@hotelcard/ui 0.0.47 → 0.0.48

package/README.md

@@ -94,6 +94,7 @@ The package includes built-in translations for `de`, `en`, `fr`, and `it` locale
 | `Input` | Text input with label, helper text, and validation |
 | `Badge` | Status and discount badges |
 | `Card` | Hotel card component |
+| `BaseCard` | Composable card primitives (container, image, content) for building custom cards |
 | `Chip` | Filter and tag chips |
 | `Checkbox` | Checkbox with label |
 | `RadioButton` | Radio button with label |
@@ -225,6 +226,49 @@ import { Card } from '@hotelcard/ui';
 />
 ```
 
+### BaseCard (Composable Card Primitives)
+
+Use `BaseCard`, `BaseCardImage`, and `BaseCardContent` to build custom cards with consistent styling:
+
+```tsx
+import { BaseCard, BaseCardImage, BaseCardContent } from '@hotelcard/ui';
+
+// Custom booking card using BaseCard primitives
+<BaseCard hoverable onClick={() => navigateToBooking()}>
+  <BaseCardImage
+    src={hotel.imageUrl}
+    alt={hotel.name}
+    height={200}
+    topLeftSlot={<StatusBadge status="confirmed" />}
+    topRightSlot={<FavoriteButton />}
+  />
+  <BaseCardContent padding="large">
+    <h3>{hotel.name}</h3>
+    <p>{hotel.location}</p>
+    <div>Check-in: {checkInDate}</div>
+  </BaseCardContent>
+</BaseCard>
+
+// With aspect ratio instead of fixed height
+<BaseCard borderRadius={16}>
+  <BaseCardImage
+    src={hotel.imageUrl}
+    alt={hotel.name}
+    aspectRatio="16/9"
+    showGradient={true}
+    bottomSlot={<ImageIndicatorDots count={3} active={0} />}
+  />
+  <BaseCardContent padding="medium">
+    {/* Your content */}
+  </BaseCardContent>
+</BaseCard>
+```
+
+BaseCard provides:
+- **BaseCard**: Container with border, radius, shadow, hover effects
+- **BaseCardImage**: Image with overlay slots (top-left, top-right, center, bottom)
+- **BaseCardContent**: Content area with configurable padding ('none' | 'small' | 'medium' | 'large')
+
 ### Modal
 
 ```tsx
@@ -616,6 +660,9 @@ import type {
   BadgeProps,
   InputProps,
   CardProps,
+  BaseCardProps,
+  BaseCardImageProps,
+  BaseCardContentProps,
   CheckboxProps,
   RadioButtonProps,
   DropdownProps,