@hotelcard/ui 0.0.2 → 0.0.4

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import * as React$1 from 'react';
+import React__default, { ButtonHTMLAttributes, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
@@ -37,7 +37,7 @@ interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'chi
     iconOnly?: boolean;
 }
 
-declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
 interface BadgeProps {
     /**
@@ -116,6 +116,280 @@ interface RatingProps {
 
 declare const Rating: React.FC<RatingProps>;
 
+interface DividerProps {
+    /** Optional label to display in the middle of the divider */
+    label?: ReactNode;
+    /** Orientation of the divider */
+    orientation?: 'horizontal' | 'vertical';
+    /** Additional CSS class names */
+    className?: string;
+}
+
+declare const Divider: React.FC<DividerProps>;
+
+type ChipSize = 'small' | 'medium';
+type ChipState = 'idle' | 'active' | 'disabled';
+interface ChipProps {
+    /** The label text displayed in the chip */
+    label: string;
+    /** Optional count/number displayed in a badge (for filter chips) */
+    count?: number | string;
+    /** Size variant */
+    size?: ChipSize;
+    /** State variant */
+    state?: ChipState;
+    /** Whether the chip is removable (shows X icon) */
+    removable?: boolean;
+    /** Click handler for the chip (used for selection/toggle) */
+    onClick?: () => void;
+    /** Handler called when remove button is clicked */
+    onRemove?: () => void;
+    /** Additional className for custom styling */
+    className?: string;
+    /** Disable the chip */
+    disabled?: boolean;
+}
+
+declare const Chip: React.FC<ChipProps>;
+
+type CheckboxSize = 'small' | 'medium';
+interface CheckboxProps {
+    /** Label text displayed next to checkbox */
+    label?: string;
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Default checked state for uncontrolled usage */
+    defaultChecked?: boolean;
+    /** Callback when checked state changes */
+    onChange?: (checked: boolean) => void;
+    /** Disable the checkbox */
+    disabled?: boolean;
+    /** Show error state */
+    error?: boolean;
+    /** Input name attribute */
+    name?: string;
+    /** Input id attribute */
+    id?: string;
+    /** Additional className for custom styling */
+    className?: string;
+    /** Size variant */
+    size?: CheckboxSize;
+}
+
+declare const Checkbox: React.FC<CheckboxProps>;
+
+interface RadioButtonProps {
+    /** Whether the radio button is checked */
+    checked: boolean;
+    /** Callback fired when the radio button state changes */
+    onChange: (checked: boolean) => void;
+    /** The id attribute of the radio button (used to associate the label via htmlFor) */
+    id?: string;
+    /** The name attribute of the radio button (for grouping) */
+    name?: string;
+    /** The value attribute of the radio button */
+    value?: string;
+    /** Whether the radio button is disabled */
+    disabled?: boolean;
+    /** Additional CSS class names */
+    className?: string;
+    /** Label text for the radio button */
+    label?: string;
+    /** Autocomplete attribute */
+    autoComplete?: string;
+}
+
+declare const RadioButton: React__default.FC<RadioButtonProps>;
+
+interface SectionHeaderProps {
+    /** Title text for the section */
+    title: string;
+    /** Label for the "Show all" button (e.g., "Show all", "Alle anzeigen") */
+    showAllLabel?: string;
+    /** Click handler for the "Show all" button */
+    onShowAllClick?: () => void;
+    /** Additional className for custom styling */
+    className?: string;
+}
+
+declare const SectionHeader: React.FC<SectionHeaderProps>;
+
+interface ModalProps {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Callback when modal should close */
+    onClose: () => void;
+    /** Modal content */
+    children: React.ReactNode;
+    /** Maximum width of the modal */
+    width?: string;
+    /** Additional className for custom styling */
+    className?: string;
+    /** Whether to show the close button (default: true) */
+    showCloseButton?: boolean;
+    /** Whether clicking the backdrop closes the modal (default: false) */
+    disableBackdropClick?: boolean;
+}
+
+declare const Modal: React__default.FC<ModalProps>;
+
+interface CardBadge {
+    text: string;
+    variant?: 'primary' | 'secondary';
+}
+interface CardRatingInfo {
+    label: string;
+    value: string | number;
+}
+interface CardProps {
+    /** Image URL for the card */
+    image?: string;
+    /** Alt text for accessibility */
+    imageAlt?: string;
+    /** Main label/title text */
+    label?: string;
+    /** Price text */
+    price?: string;
+    /** Rating value (1-6, 6 = Swiss Lodge) */
+    stars?: number;
+    /** Superior hotel indicator */
+    isSuperior?: boolean;
+    /** Badge configuration */
+    badge?: CardBadge;
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Card size variant - determines styling for desktop or mobile */
+    variant?: 'desktop' | 'mobile';
+    /** Whether to show rating area */
+    hasRating?: boolean;
+    /** Add padding around card */
+    withPadding?: boolean;
+    /** Fixed height (desktop only) */
+    withHeight?: boolean;
+    /** Rating info to display (e.g., { label: "Excellent", value: "4.5" }) */
+    ratingInfo?: CardRatingInfo;
+    /** Usage context for conditional styling */
+    context?: 'hotel-deals' | string;
+    /** Label for Swiss Lodge (stars = 6), e.g., "Swiss Lodge" */
+    swissLodgeLabel?: string;
+}
+
+declare const Card: React__default.FC<CardProps>;
+
+interface CompactCardBadge {
+    text: string;
+    variant?: 'primary' | 'secondary';
+}
+interface CompactCardProps {
+    /** Image URL for the card */
+    image?: string;
+    /** Alt text for accessibility */
+    imageAlt?: string;
+    /** Main label/title text */
+    label?: string;
+    /** Price text */
+    price?: string;
+    /** Rating value (1-6, 6 = Swiss Lodge) */
+    stars?: number;
+    /** Superior hotel indicator */
+    isSuperior?: boolean;
+    /** Badge configuration */
+    badge?: CompactCardBadge;
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Label for Swiss Lodge (rating = 6), e.g., "Swiss Lodge" */
+    swissLodgeLabel?: string;
+}
+
+declare const CompactCard: React__default.FC<CompactCardProps>;
+
+interface DropdownOption {
+    value: string;
+    label: string;
+}
+interface DropdownProps {
+    /** Available options */
+    options?: DropdownOption[];
+    /** Disable the dropdown */
+    disabled?: boolean;
+    /** Show error state */
+    error?: boolean;
+    /** Default selected value */
+    defaultValue?: string;
+    /** Controlled value */
+    value?: string;
+    /** Callback when selection changes */
+    onChange?: (value: string) => void;
+    /** Additional className for custom styling */
+    className?: string;
+    /** Input name attribute */
+    name?: string;
+    /** Input id attribute */
+    id?: string;
+    /** Placeholder text when no selection */
+    placeholder?: string;
+}
+
+declare const Dropdown: React__default.FC<DropdownProps>;
+
+type InputType = 'text' | 'email' | 'password' | 'tel' | 'number' | 'search' | 'url' | 'date';
+interface InputProps {
+    /** Label text above the input */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Helper text below the input */
+    helper?: string;
+    /** Controlled value */
+    value?: string;
+    /** Default value for uncontrolled usage */
+    defaultValue?: string;
+    /** Callback when value changes */
+    onChange?: (value: string) => void;
+    /** Callback when input gains focus */
+    onFocus?: () => void;
+    /** Callback when input loses focus */
+    onBlur?: () => void;
+    /** Input type */
+    type?: InputType;
+    /** Show error state */
+    error?: boolean;
+    /** Disable the input */
+    disabled?: boolean;
+    /** Icon to show on the left side */
+    leftIcon?: React.ReactNode;
+    /** Icon or element to show on the right side */
+    rightIcon?: React.ReactNode;
+    /** Prefix text (e.g., currency symbol) */
+    prefix?: string;
+    /** Additional className for container */
+    className?: string;
+    /** Additional className for input element */
+    inputClassName?: string;
+    /** Additional className for wrapper */
+    wrapperClassName?: string;
+    /** Input name attribute */
+    name?: string;
+    /** Input id attribute */
+    id?: string;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Autocomplete attribute */
+    autoComplete?: string;
+    /** Auto focus the input */
+    autoFocus?: boolean;
+    /** Make the input read-only */
+    readOnly?: boolean;
+    /** Additional input props */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+}
+
+declare const Input: React__default.FC<InputProps>;
+
 interface HeartIconProps {
     filled?: boolean;
     className?: string;
@@ -163,4 +437,4 @@ declare const PinIcon: {
     displayName: string;
 };
 
-export { Badge, type BadgeProps, Button, type ButtonProps, ChevronLeftIcon, ChevronRightIcon, HeartIcon, PinIcon, Rating, type RatingProps, StarIcon };
+export { Badge, type BadgeProps, Button, type ButtonProps, Card, type CardBadge, type CardProps, type CardRatingInfo, Checkbox, type CheckboxProps, type CheckboxSize, ChevronLeftIcon, ChevronRightIcon, Chip, type ChipProps, type ChipSize, type ChipState, CompactCard, type CompactCardBadge, type CompactCardProps, Divider, type DividerProps, Dropdown, type DropdownOption, type DropdownProps, HeartIcon, Input, type InputProps, type InputType, Modal, type ModalProps, PinIcon, RadioButton, type RadioButtonProps, Rating, type RatingProps, SectionHeader, type SectionHeaderProps, StarIcon };