@hotelcard/ui 0.0.49 → 0.0.50

package/README.md

@@ -95,6 +95,7 @@ The package includes built-in translations for `de`, `en`, `fr`, and `it` locale
 | `Badge` | Status and discount badges |
 | `Card` | Hotel card component |
 | `BaseCard` | Composable card primitives (container, image, content) for building custom cards |
+| `BaseCardSkeleton` | Loading skeleton for cards (use as base for custom card skeletons) |
 | `Chip` | Filter and tag chips |
 | `Checkbox` | Checkbox with label |
 | `RadioButton` | Radio button with label |
@@ -108,6 +109,7 @@ The package includes built-in translations for `de`, `en`, `fr`, and `it` locale
 | `FAQ` | Expandable FAQ accordion |
 | `Benefits` | Benefits list with icons |
 | `Pin` | Location pin marker |
+| `EmptyState` | Generic empty state with icon, title, description, and optional action button |
 
 ### Search Components
 
@@ -121,6 +123,7 @@ The package includes built-in translations for `de`, `en`, `fr`, and `it` locale
 | `HotelCard` | Hotel card for search results with image carousel, rating, and pricing |
 | `HotelCardImage` | Hotel image carousel component |
 | `HotelCardContent` | Hotel card content with rating, price, benefits |
+| `HotelCardSkeleton` | Loading skeleton for HotelCard |
 | `SearchModal` | Full-screen search modal with destination, dates, and guest selection |
 | `SearchModalContent` | Content-only version for custom modal wrappers (e.g., IonModal) |
 | `LocationAutocomplete` | Location search input with autocomplete suggestions |
@@ -268,6 +271,86 @@ 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')
+- **BaseCardSkeleton**: Loading skeleton with shimmer animation
+
+### BaseCardSkeleton (Loading State)
+
+Use `BaseCardSkeleton` to create loading placeholders for your custom cards:
+
+```tsx
+import { BaseCardSkeleton } from '@hotelcard/ui';
+
+// Basic skeleton with image and content placeholders
+<BaseCardSkeleton>
+  <div className="skeleton" style={{ height: 20, width: '60%' }} />
+  <div className="skeleton" style={{ height: 16, width: '40%' }} />
+</BaseCardSkeleton>
+
+// With aspect ratio for image
+<BaseCardSkeleton imageAspectRatio="16/9">
+  {/* Your content placeholders */}
+</BaseCardSkeleton>
+
+// With custom image height
+<BaseCardSkeleton imageHeight={200}>
+  {/* Your content placeholders */}
+</BaseCardSkeleton>
+```
+
+Children should include `.hc-skeleton` class for shimmer animation (provided by the package CSS).
+
+### HotelCardSkeleton
+
+Pre-built loading skeleton matching HotelCard layout:
+
+```tsx
+import { HotelCardSkeleton } from '@hotelcard/ui';
+
+// Show while loading hotel data
+{isLoading ? (
+  <HotelCardSkeleton />
+) : (
+  <HotelCard hotel={hotel} />
+)}
+```
+
+### EmptyState
+
+Generic empty state component for no results, no bookings, no favourites, etc.
+
+```tsx
+import { EmptyState } from '@hotelcard/ui';
+
+// With icon (React node)
+<EmptyState
+  image={<CalendarIcon />}
+  title="No bookings yet!"
+  description="Your next travel adventure is just around the corner."
+  action={{
+    label: "Start exploring",
+    onClick: () => navigate('/search'),
+    variant: 'secondary',
+  }}
+/>
+
+// With image URL
+<EmptyState
+  image="/images/no-results.png"
+  title="No results found"
+  description="Try adjusting your filters or search for a different destination."
+  action={{
+    label: "Clear filters",
+    onClick: handleClearFilters,
+  }}
+/>
+
+// Without action button
+<EmptyState
+  image={<SearchIcon />}
+  title="Nothing here yet"
+  description="Check back later for updates."
+/>
+```
 
 ### Modal
 
@@ -663,6 +746,7 @@ import type {
   BaseCardProps,
   BaseCardImageProps,
   BaseCardContentProps,
+  BaseCardSkeletonProps,
   CheckboxProps,
   RadioButtonProps,
   DropdownProps,
@@ -678,6 +762,7 @@ import type {
   BenefitsProps,
   BenefitItem,
   PinProps,
+  EmptyStateProps,
 
   // Search Component Props
   DateSelectorProps,