Hello Bauhaus!
\nCard content
\nOptional extra content (children)
\n\n```\n\n**Props:**\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `title` | `string` | - | Card title |\n| `subtitle` | `string` | - | Card subtitle |\n| `children` | `ReactNode` | - | Optional extra content |\n| `tail` | `boolean` | `true` | Show yellow tail accent |\n| `buttonVariant` | `'solid' \\| 'outline' \\| 'text' \\| 'none'` | `'solid'` | Button style |\n| `buttonText` | `string` | `'Action'` | Button text |\n| `buttonColor` | `Color` | `'blue'` | Button color |\n| `onButtonClick` | `() => void` | - | Button click handler |\n| `buttonFill` | `boolean` | `false` | Full width button |\n| `minHeight` | `string \\| number` | `'300px'` | Minimum height |\n| `minWidth` | `string \\| number` | `'400px'` | Minimum width |\n\n---\n\n## Design System\n\n### CSS Variables\n\nAll variables use the `--bh-` prefix to avoid collisions with your project:\n\n#### Colors (no prefix - Bauhaus identity)\n```css\n--bauhaus-blue: #0063C2\n--bauhaus-red: #CD3F2A\n--bauhaus-yellow: #F9B700\n--bauhaus-green: #06A77D\n--bauhaus-orange: #FF6B35\n--bauhaus-purple: #7209B7\n--bauhaus-black: #000000\n--bauhaus-white: #FFFFFF\n```\n\n#### Spacing\n```css\n--bh-space-xs: 4px\n--bh-space-sm: 8px\n--bh-space-md: 16px\n--bh-space-lg: 24px\n--bh-space-xl: 32px\n```\n\n#### Typography\n```css\n--bh-font-size-xs: 12px\n--bh-font-size-sm: 14px\n--bh-font-size-md: 16px\n--bh-font-size-lg: 20px\n--bh-font-size-xl: 24px\n\n--bh-font-weight-normal: 400\n--bh-font-weight-medium: 500\n--bh-font-weight-bold: 700\n```\n\n#### Borders\n```css\n--bh-border-width: 1px\n--bh-border-width-thick: 2px\n--bh-border-card: 8px solid var(--bauhaus-black)\n--bh-border-accent: 6px\n--bh-btn-border-width: 3px\n```\n\n#### Transitions\n```css\n--bh-transition-fast: 150ms ease-in-out\n--bh-transition-normal: 250ms ease-in-out\n```\n\n### Customization\n\nOverride variables in your CSS:\n\n```css\n:root {\n /* Change primary blue */\n --bauhaus-blue: #0066FF;\n \n /* Adjust spacing */\n --bh-space-md: 20px;\n \n /* Thicker borders */\n --bh-btn-border-width: 4px;\n}\n```\n\n---\n\n## Development\n\n### Setup\n\n```bash\n# Install dependencies\nnpm install\n\n# Start Storybook\nnpm run storybook\n\n# Build library\nnpm run build\n```\n\n### Project Structure\n\n```\nbauhaus-ui/\nāāā src/\nā āāā components/\nā ā āāā Button/\nā ā ā āāā Button.tsx\nā ā ā āāā Button.module.css\nā ā ā āāā Button.stories.tsx\nā ā ā āāā index.ts\nā ā āāā Input/\nā ā āāā Checkbox/\nā ā āāā Dropdown/\nā ā āāā VerticalTitleCard/\nā ā āāā HorizontalImageCard/\nā ā āāā VerticalImageCard/\nā ā āāā Card/\nā ā āāā Toggle/\nā āāā styles/\nā ā āāā variables.css\nā ā āāā global.css\nā āāā types/\nā ā āāā index.ts\nā āāā index.ts\nāāā dist/\nāāā package.json\nāāā tsconfig.json\nāāā vite.config.ts\n```\n\n### Creating a New Component\n\n1. Create component directory:\n```\nsrc/components/MyComponent/\nāāā MyComponent.tsx\nāāā MyComponent.module.css\nāāā MyComponent.stories.tsx\nāāā index.ts\n```\n\n2. Follow BEM methodology for CSS classes:\n```css\n.bh-my-component { }\n.bh-my-component__element { }\n.bh-my-component--modifier { }\n```\n\n3. Export from `src/index.ts`:\n```typescript\nexport { MyComponent } from './components/MyComponent';\nexport type { MyComponentProps } from './components/MyComponent';\n```\n\n---\n\n## TypeScript Support\n\nAll components are fully typed. Import types:\n\n```typescript\nimport type { \n ButtonProps, \n InputProps, \n CheckboxProps,\n DropdownProps,\n VerticalTitleCardProps,\n HorizontalImageCardProps,\n Size,\n Color,\n ButtonVariant,\n} from '@ars-design/bauhaus-ui';\n```\n\n---\n\n## Design Philosophy\n\nBauhaus UI follows the principles of the Bauhaus design school:\n\n- **Form Follows Function** - No unnecessary decorations\n- **Simple Geometry** - Basic shapes, sharp corners, bold lines\n- **Primary Colors** - Red, blue, yellow + neutrals\n- **Thick Borders** - 8px card borders, 3px button borders\n- **Visual Accents** - Colored bars (yellow tail, red divider, blue accent)\n\n---\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n---\n\n## Contact\n\nQuestions, feedback, or collaboration?\n\n[](https://www.instagram.com/ars_design_st/)\n\n---\n\n## License\n\nMIT Ā© ars-design\n\n---\n\n**Made with ā¤ļø inspired by Bauhaus design principles**\n","readmeFilename":"README.md"}