@hotelcard/ui 0.0.2 → 0.0.4

package/README.md

@@ -17,8 +17,8 @@ npm install @hotelcard/ui
 ### Import Components
 
 ```tsx
-import { Button, Badge, Rating } from '@hotelcard/ui';
-import type { ButtonProps, BadgeProps } from '@hotelcard/ui';
+import { Button, Badge, Rating, Input, Checkbox, Modal } from '@hotelcard/ui';
+import type { ButtonProps, BadgeProps, InputProps } from '@hotelcard/ui';
 ```
 
 ### Import Styles (REQUIRED)
@@ -117,6 +117,324 @@ import { Rating } from '@hotelcard/ui';
 | `showValue` | `boolean` | `false` | Show numeric value |
 | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Star size |
 
+### Input
+
+```tsx
+import { Input } from '@hotelcard/ui';
+
+// Basic input
+<Input
+  label="Email"
+  placeholder="Enter your email"
+  value={email}
+  onChange={setEmail}
+/>
+
+// With helper text
+<Input
+  label="Password"
+  type="password"
+  helper="Must be at least 8 characters"
+/>
+
+// Error state
+<Input
+  label="Email"
+  error
+  helper="Invalid email address"
+/>
+
+// With icons
+<Input
+  leftIcon={<SearchIcon />}
+  placeholder="Search..."
+/>
+
+// Disabled
+<Input
+  label="Disabled"
+  disabled
+  value="Cannot edit"
+/>
+```
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | Label text above input |
+| `placeholder` | `string` | `'Placeholder'` | Placeholder text |
+| `helper` | `string` | - | Helper text below input |
+| `value` | `string` | - | Controlled value |
+| `onChange` | `(value: string) => void` | - | Change handler |
+| `type` | `'text' \| 'email' \| 'password' \| 'tel' \| 'number'` | `'text'` | Input type |
+| `error` | `boolean` | `false` | Show error state |
+| `disabled` | `boolean` | `false` | Disable input |
+| `leftIcon` | `ReactNode` | - | Icon on the left |
+| `rightIcon` | `ReactNode` | - | Icon on the right |
+
+### Checkbox
+
+```tsx
+import { Checkbox } from '@hotelcard/ui';
+
+// Controlled checkbox
+<Checkbox
+  label="Accept terms"
+  checked={accepted}
+  onChange={setAccepted}
+/>
+
+// Uncontrolled with default
+<Checkbox
+  label="Remember me"
+  defaultChecked
+/>
+
+// Error state
+<Checkbox
+  label="Required field"
+  error
+/>
+
+// Sizes
+<Checkbox label="Medium" size="medium" />
+<Checkbox label="Small" size="small" />
+```
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | Label text |
+| `checked` | `boolean` | - | Controlled checked state |
+| `defaultChecked` | `boolean` | `false` | Default checked state |
+| `onChange` | `(checked: boolean) => void` | - | Change handler |
+| `size` | `'small' \| 'medium'` | `'medium'` | Checkbox size |
+| `disabled` | `boolean` | `false` | Disable checkbox |
+| `error` | `boolean` | `false` | Show error state |
+
+### RadioButton
+
+```tsx
+import { RadioButton } from '@hotelcard/ui';
+
+// Radio group
+<RadioButton
+  label="Option 1"
+  checked={selected === '1'}
+  onChange={() => setSelected('1')}
+  name="options"
+/>
+<RadioButton
+  label="Option 2"
+  checked={selected === '2'}
+  onChange={() => setSelected('2')}
+  name="options"
+/>
+```
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | Label text |
+| `checked` | `boolean` | - | Checked state (required) |
+| `onChange` | `(checked: boolean) => void` | - | Change handler (required) |
+| `name` | `string` | - | Group name for form |
+| `disabled` | `boolean` | `false` | Disable radio |
+
+### Dropdown
+
+```tsx
+import { Dropdown } from '@hotelcard/ui';
+
+const options = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+  { value: '3', label: 'Option 3' },
+];
+
+// Controlled
+<Dropdown
+  options={options}
+  value={selected}
+  onChange={setSelected}
+  placeholder="Select..."
+/>
+
+// Uncontrolled with default
+<Dropdown
+  options={options}
+  defaultValue="1"
+/>
+```
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `Array<{value, label}>` | `[]` | Dropdown options |
+| `value` | `string` | - | Controlled value |
+| `defaultValue` | `string` | - | Default value |
+| `onChange` | `(value: string) => void` | - | Change handler |
+| `placeholder` | `string` | `'Select...'` | Placeholder text |
+| `disabled` | `boolean` | `false` | Disable dropdown |
+| `error` | `boolean` | `false` | Show error state |
+
+### Modal
+
+```tsx
+import { Modal } from '@hotelcard/ui';
+
+<Modal
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  width="500px"
+>
+  <h2>Modal Title</h2>
+  <p>Modal content goes here.</p>
+</Modal>
+
+// Without close button
+<Modal
+  isOpen={isOpen}
+  onClose={handleClose}
+  showCloseButton={false}
+>
+  <CustomCloseButton />
+</Modal>
+
+// Disable backdrop click
+<Modal
+  isOpen={isOpen}
+  onClose={handleClose}
+  disableBackdropClick
+>
+  Must use close button
+</Modal>
+```
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isOpen` | `boolean` | - | Show/hide modal |
+| `onClose` | `() => void` | - | Close handler |
+| `children` | `ReactNode` | - | Modal content |
+| `width` | `string` | `'600px'` | Max width |
+| `showCloseButton` | `boolean` | `true` | Show X button |
+| `disableBackdropClick` | `boolean` | `false` | Prevent backdrop close |
+
+### Chip
+
+```tsx
+import { Chip } from '@hotelcard/ui';
+
+// Basic chip
+<Chip label="Filter" />
+
+// With count
+<Chip label="Hotels" count={42} />
+
+// Active state
+<Chip label="Selected" state="active" />
+
+// Non-removable
+<Chip label="Category" removable={false} onClick={() => {}} />
+
+// Sizes
+<Chip label="Medium" size="medium" />
+<Chip label="Small" size="small" />
+```
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | Chip text |
+| `count` | `number \| string` | - | Badge count |
+| `state` | `'idle' \| 'active' \| 'disabled'` | `'idle'` | State variant |
+| `size` | `'small' \| 'medium'` | `'small'` | Chip size |
+| `removable` | `boolean` | `true` | Show X button |
+| `onRemove` | `() => void` | - | Remove handler |
+| `onClick` | `() => void` | - | Click handler |
+
+### Divider
+
+```tsx
+import { Divider } from '@hotelcard/ui';
+
+// Horizontal divider
+<Divider />
+
+// With label
+<Divider label="OR" />
+
+// Vertical divider
+<Divider orientation="vertical" />
+```
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | - | Center label text |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Divider direction |
+
+### SectionHeader
+
+```tsx
+import { SectionHeader } from '@hotelcard/ui';
+
+// With "Show all" button
+<SectionHeader
+  title="Latest Hotels"
+  showAllLabel="Show all"
+  onShowAllClick={() => navigate('/hotels')}
+/>
+
+// Title only
+<SectionHeader title="Featured" />
+```
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | - | Section title |
+| `showAllLabel` | `string` | - | "Show all" button text |
+| `onShowAllClick` | `() => void` | - | Button click handler |
+
+### CompactCard
+
+```tsx
+import { CompactCard } from '@hotelcard/ui';
+
+<CompactCard
+  image="/hotel.jpg"
+  imageAlt="Hotel Grand"
+  label="Hotel Grand Zurich"
+  price="From CHF 120"
+  stars={4}
+  isSuperior
+  badge={{ text: '-30%', variant: 'primary' }}
+  onClick={() => navigate('/hotel/123')}
+/>
+
+// Swiss Lodge (stars = 6)
+<CompactCard
+  label="Swiss Lodge Hotel"
+  stars={6}
+  swissLodgeLabel="Swiss Lodge"
+/>
+```
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `image` | `string` | - | Image URL |
+| `imageAlt` | `string` | `''` | Image alt text |
+| `label` | `string` | - | Hotel name |
+| `price` | `string` | - | Price text |
+| `stars` | `number` | - | Star rating (1-6) |
+| `isSuperior` | `boolean` | `false` | Superior indicator |
+| `badge` | `{text, variant}` | - | Badge config |
+| `onClick` | `() => void` | - | Click handler |
+| `swissLodgeLabel` | `string` | `'Swiss Lodge'` | Label for 6-star |
+
 ### Icons
 
 ```tsx
@@ -169,6 +487,15 @@ import type {
   ButtonProps,
   BadgeProps,
   RatingProps,
+  InputProps,
+  CheckboxProps,
+  RadioButtonProps,
+  DropdownProps,
+  ModalProps,
+  ChipProps,
+  DividerProps,
+  SectionHeaderProps,
+  CompactCardProps,
 } from '@hotelcard/ui';
 ```
 
@@ -189,6 +516,15 @@ packages/ui/
 │   │   │   └── index.ts
 │   │   ├── Badge/
 │   │   ├── Rating/
+│   │   ├── Input/
+│   │   ├── Checkbox/
+│   │   ├── RadioButton/
+│   │   ├── Dropdown/
+│   │   ├── Modal/
+│   │   ├── Chip/
+│   │   ├── Divider/
+│   │   ├── SectionHeader/
+│   │   ├── CompactCard/
 │   │   └── icons/
 │   └── index.ts                  # Main exports
 ├── dist/                         # Built output
@@ -254,7 +590,15 @@ CSS Modules don't work well with tsup bundling - the class name mappings become
 
 - `hc-btn-*` for Button
 - `hc-badge-*` for Badge
-- `hc-rating-*` for Rating
+- `hc-input-*` for Input
+- `hc-checkbox-*` for Checkbox
+- `hc-radio-*` for RadioButton
+- `hc-dropdown-*` for Dropdown
+- `hc-modal-*` for Modal
+- `hc-chip-*` for Chip
+- `hc-divider-*` for Divider
+- `hc-section-*` for SectionHeader
+- `hc-compact-*` for CompactCard
 
 This prevents conflicts with consuming app's styles while ensuring styles are always applied.
 
@@ -326,11 +670,11 @@ git push
 import '@hotelcard/ui/dist/index.css';  // REQUIRED
 
 // src/library/index.ts (barrel export)
-export { Button, Badge } from '@hotelcard/ui';
-export type { ButtonProps, BadgeProps } from '@hotelcard/ui';
+export { Button, Badge, Input, Checkbox } from '@hotelcard/ui';
+export type { ButtonProps, BadgeProps, InputProps } from '@hotelcard/ui';
 
 // src/pages/SomePage.tsx
-import { Button, Badge } from '@/library';
+import { Button, Input } from '@/library';
 ```
 
 ### hotelcard-ui (Website)
@@ -340,7 +684,7 @@ import { Button, Badge } from '@/library';
 import '@hotelcard/ui/dist/index.css';  // REQUIRED
 
 // Use directly
-import { Button, Badge } from '@hotelcard/ui';
+import { Button, Badge, Modal } from '@hotelcard/ui';
 ```
 
 ### Updating the Package