@hotelcard/ui 0.0.9 → 0.0.12

package/README.md

@@ -78,6 +78,9 @@ function App() {
 | `Dropdown` | Select dropdown |
 | `Modal` | Modal dialog |
 | `SectionHeader` | Section title with "Show all" button |
+| `WhenContent` | Date/month picker for search (accepts labels as props) |
+| `DualCalendar` | Calendar component for date range selection |
+| `GuestContent` | Guest selector with adults, children (with ages), and pet toggle |
 
 ### Icons
 
@@ -173,6 +176,67 @@ import { Modal } from '@hotelcard/ui';
 </Modal>
 ```
 
+### WhenContent (Date Picker)
+
+```tsx
+import { WhenContent } from '@hotelcard/ui';
+
+<WhenContent
+  initialDateRange={{ start: null, end: null }}
+  initialMonthFilter={null}
+  onChange={(dateRange) => setDateRange(dateRange)}
+  onMonthFilterChange={(months) => setMonthFilter(months)}
+  variant="dropdown"
+  showApplyButton={true}
+  onApply={() => closeDropdown()}
+  labels={{
+    dates: 'Dates',           // Tab label
+    flexible: 'Flexible',     // Tab label
+    anytime: 'Anytime',       // Button label
+    selectMonths: 'When do you want to travel?',
+    apply: 'Apply',           // Button label
+  }}
+  locale="de"  // Optional: 'de', 'en', 'fr', 'it'
+/>
+```
+
+**Note**: All text labels are passed as props. The consuming app provides translated strings.
+
+### GuestContent (Guest Selector)
+
+```tsx
+import { GuestContent, type GuestCounts } from '@hotelcard/ui';
+
+const [guests, setGuests] = useState<GuestCounts>({
+  adults: 2,
+  children: 0,
+  childrenAges: [],
+});
+const [petFilter, setPetFilter] = useState(0);
+
+<GuestContent
+  guests={guests}
+  onChange={setGuests}
+  petFilter={petFilter}
+  onPetChange={setPetFilter}
+  showPetToggle={true}
+  labels={{
+    adults: 'Adults',
+    children: 'Children',
+    pet: 'Pet',
+    ageOfChild: 'Age of child',
+    age: 'Age',
+    decreaseAdults: 'Decrease adults',
+    increaseAdults: 'Increase adults',
+    decreaseChildren: 'Decrease children',
+    increaseChildren: 'Increase children',
+    togglePets: 'Toggle pets',
+  }}
+/>
+```
+
+**Note**: All text labels are passed as props. The consuming app provides translated strings.
+
 ### Checkbox & RadioButton
 
 ```tsx
@@ -200,6 +264,7 @@ All components export their prop types:
 
 ```typescript
 import type {
+  // Component Props
   ButtonProps,
   BadgeProps,
   InputProps,
@@ -213,11 +278,82 @@ import type {
   RatingProps,
   DividerProps,
   SectionHeaderProps,
+  WhenContentProps,
+  WhenContentLabels,
+  DateRange,
+  GuestContentProps,
+  GuestContentLabels,
+  GuestCounts,
+  ChildAgeError,
+
+  // Data Types
+  Hotel,
+  Booking,
+  User,
+  Address,
+  Membership,
+  SearchParams,
+  SearchFilters,
 } from '@hotelcard/ui';
 ```
 
 ---
 
+## Hooks
+
+```typescript
+import { useDebounce, useResponsive, useWindowData } from '@hotelcard/ui';
+
+// Debounce a value
+const debouncedSearch = useDebounce(searchTerm, 300);
+
+// Responsive breakpoint detection
+const { isDesktop } = useResponsive(); // >= 1024px
+
+// Window/context data
+const { locale, currency } = useWindowData();
+```
+
+---
+
+## Utilities
+
+```typescript
+import { formatPrice, formatDate, formatDateRange, calculateDiscount } from '@hotelcard/ui';
+
+// Format price with currency
+formatPrice(199, 'CHF'); // "CHF 199"
+
+// Format date
+formatDate('2024-03-15', 'de-CH'); // "15. März 2024"
+
+// Format date range
+formatDateRange('2024-03-15', '2024-03-18', 'de-CH'); // "15. - 18. März 2024"
+
+// Calculate discount percentage
+calculateDiscount(400, 200); // 50
+```
+
+---
+
+## Context Provider (Optional)
+
+For apps that need shared configuration:
+
+```tsx
+import { HotelCardUIProvider } from '@hotelcard/ui';
+
+<HotelCardUIProvider
+  locale="de"
+  currency="CHF"
+  isDesktop={false}
+>
+  <App />
+</HotelCardUIProvider>
+```
+
+---
+
 ## Styling
 
 Components use CSS variables for theming. Import the styles once in your app entry: