banhaten-ui 0.0.11 → 0.0.13

package/dist/index.d.ts

@@ -0,0 +1,417 @@
+import { ButtonHTMLAttributes } from 'react';
+import { default as default_2 } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+
+/**
+ * Accordion component for collapsible content sections.
+ * Supports Default and Boxed styles, expandable states, and RTL.
+ *
+ * Specifications:
+ * - Padding: 20px
+ * - Gap: 12px
+ * - Border radius: 10px (Boxed style)
+ * - Title: 17px, semibold, line-height 28px
+ * - Description: 15px, regular, line-height 24px
+ * - Icon size: 24px × 24px
+ */
+export declare const Accordion: ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "style"> {
+    /** The title/label of the accordion */
+    label?: string;
+    /** The description/content shown when expanded */
+    description?: string;
+    /** Whether to show the left icon */
+    icon?: boolean;
+    /** Custom icon to display on the left */
+    iconLeft?: ReactNode;
+    /** Whether to show a badge */
+    badge?: boolean;
+    /** Badge text content */
+    badgeText?: string;
+    /** Whether to show an action button */
+    action?: boolean;
+    /** Action button text */
+    actionText?: string;
+    /** Action button click handler */
+    onActionClick?: () => void;
+    /** The visual style variant */
+    style?: AccordionStyle;
+    /** The state (Default or Hover) - for controlled hover state */
+    state?: AccordionState;
+    /** Enable RTL (Right-to-Left) mode */
+    rtl?: boolean;
+    /** Whether the accordion is expandable */
+    expandable?: boolean;
+    /** Controlled expanded state */
+    expanded?: boolean;
+    /** Callback when accordion is toggled */
+    onToggle?: (expanded: boolean) => void;
+    /** RTL label text */
+    rtlLabel?: string;
+    /** RTL description text */
+    rtlDescription?: string;
+}
+
+export declare type AccordionState = "Default" | "Hover";
+
+export declare type AccordionStyle = "Default" | "Boxed";
+
+export declare const Alert: default_2.ForwardRefExoticComponent<AlertProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface AlertProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'style'> {
+    /** The alert style */
+    style?: 'Outline' | 'Light' | 'Solid';
+    /** The alert status/severity */
+    status?: 'Danger' | 'Success' | 'Warning' | 'Info' | 'Neutral';
+    /** The title text */
+    title?: string;
+    /** Optional message text (for expandable alerts) */
+    message?: string;
+    /** Whether to show action links */
+    showActions?: boolean;
+    /** Primary action text */
+    primaryAction?: string;
+    /** Secondary action text */
+    secondaryAction?: string;
+    /** Callback for primary action click */
+    onPrimaryAction?: () => void;
+    /** Callback for secondary action click */
+    onSecondaryAction?: () => void;
+    /** Whether to show close button */
+    closable?: boolean;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+    /** RTL mode */
+    rtl?: boolean;
+    /** RTL title text */
+    rtlTitle?: string;
+    /** RTL message text */
+    rtlMessage?: string;
+    /** RTL primary action text */
+    rtlPrimaryAction?: string;
+    /** RTL secondary action text */
+    rtlSecondaryAction?: string;
+}
+
+/**
+ * Badge component for displaying labels, statuses, and notifications.
+ * Supports multiple types, styles, sizes, and colors with RTL support.
+ *
+ * Specifications:
+ * - Font: Inter Medium, 11px, weight 500, line-height 14px
+ * - Border radius: Fully rounded (pill shape)
+ * - Padding: 8px horizontal for both sizes
+ * - Height sm: 24px, lg: 28px
+ * - Icon sizes: 12px (sm), 16px (lg)
+ * - Dot size: 8px (sm), 10px (lg)
+ */
+export declare const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLDivElement>>;
+
+export declare type BadgeColor = "Neutral" | "Blue" | "Green" | "Amber" | "Danger" | "Purple" | "Fuchsia" | "Rose" | "Sky" | "Golden";
+
+export declare interface BadgeProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "style"> {
+    /** The type of badge */
+    type?: BadgeType;
+    /** The visual style variant */
+    style?: BadgeStyle;
+    /** The size of the badge */
+    size?: BadgeSize;
+    /** The color variant */
+    color?: BadgeColor;
+    /** Whether to show a number instead of text */
+    showNumber?: boolean;
+    /** The number to display (when showNumber is true) */
+    number?: number;
+    /** The badge text content */
+    children?: ReactNode;
+    /** Icon to display on the left (for LeadingIcon type) */
+    leadingIcon?: ReactNode;
+    /** Icon to display on the right (for TrailingIcon type) */
+    trailingIcon?: ReactNode;
+    /** Flag icon (for Flag type) */
+    flagIcon?: ReactNode;
+    /** Enable RTL (Right-to-Left) mode */
+    rtl?: boolean;
+}
+
+export declare type BadgeSize = "sm" | "lg";
+
+export declare type BadgeStyle = "Light" | "Outline" | "Solid";
+
+export declare type BadgeType = "Default" | "LeadingIcon" | "TrailingIcon" | "Dot" | "Flag";
+
+/**
+ * Primary UI component for user interaction.
+ * Supports multiple variants, sizes, loading states, and icons on both left and right.
+ * Features a sophisticated 3-layer shadow system matching the Figma design.
+ * Includes RTL (Right-to-Left) support for Arabic, Hebrew, and other RTL languages.
+ *
+ * Size Specifications (from Figma):
+ * - xs: 32px height, 6px/8px padding, 2px gap
+ * - sm: 36px height, 8px padding, 4px gap
+ * - md: 40px height, 10px horizontal padding, 4px gap
+ * - lg: 48px height, 12px padding, 4px gap
+ *
+ * All sizes use:
+ * - Border radius: 8px
+ * - Font: Inter Medium, 15px, weight 500, line-height 24px
+ */
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare const ButtonGroup: default_2.ForwardRefExoticComponent<ButtonGroupProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare interface ButtonGroupItem {
+    /** Button text label */
+    label?: string;
+    /** Icon component from lucide-react */
+    icon?: LucideIcon;
+    /** Click handler for this button */
+    onClick?: () => void;
+    /** Whether this button is disabled */
+    disabled?: boolean;
+    /** Whether this button is active/selected */
+    active?: boolean;
+}
+
+export declare interface ButtonGroupProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'style'> {
+    /** Array of button items */
+    items: ButtonGroupItem[];
+    /** Button group size */
+    size?: 'xs' | 'sm' | 'md';
+    /** Button group type */
+    type?: 'Default' | 'IconOnly';
+    /** RTL mode */
+    rtl?: boolean;
+    /** RTL button labels (array matching items) */
+    rtlLabels?: string[];
+}
+
+export declare interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** The visual style variant of the button */
+    variant?: ButtonVariant;
+    /** The size of the button */
+    size?: ButtonSize;
+    /** Whether the button is in a loading state */
+    loading?: boolean;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Whether the button should take full width of its container */
+    fullWidth?: boolean;
+    /** Icon to display on the left side of the button */
+    iconLeft?: ReactNode;
+    /** Icon to display on the right side of the button */
+    iconRight?: ReactNode;
+    /** Icon to display at the start (left) of the button - alias for iconLeft */
+    startIcon?: ReactNode;
+    /** Icon to display at the end (right) of the button - alias for iconRight */
+    endIcon?: ReactNode;
+    /** Icon for icon-only buttons */
+    icon?: ReactNode;
+    /** Enable RTL (Right-to-Left) mode for Arabic, Hebrew, and other RTL languages */
+    rtl?: boolean;
+    /** Button content */
+    children?: ReactNode;
+}
+
+export declare type ButtonSize = "xs" | "sm" | "md" | "lg";
+
+export declare type ButtonVariant = "primary" | "soft" | "secondary" | "dashed" | "white" | "outline" | "ghost" | "ghost-primary" | "danger" | "soft-danger";
+
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Checkbox label */
+    label?: string;
+    /** Support text below label */
+    supportText?: string;
+    /** RTL label (Arabic) */
+    rtlLabel?: string;
+    /** RTL support text (Arabic) */
+    rtlSupportText?: string;
+    /** Checkbox position relative to label */
+    checkLocation?: 'leading' | 'trailing';
+    /** Indeterminate state */
+    indeterminate?: boolean;
+    /** RTL mode */
+    rtl?: boolean;
+    /** Error state */
+    error?: boolean;
+}
+
+export declare const CheckmarkCard: default_2.ForwardRefExoticComponent<CheckmarkCardProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface CheckmarkCardProps extends Omit<HTMLAttributes<HTMLElement>, 'style' | 'onChange'> {
+    /** Card label */
+    label: string;
+    /** Support text below label */
+    supportText?: string;
+    /** RTL label (Arabic) */
+    rtlLabel?: string;
+    /** RTL support text (Arabic) */
+    rtlSupportText?: string;
+    /** Whether the card is selected */
+    selected?: boolean;
+    /** Whether the card is disabled */
+    disabled?: boolean;
+    /** Card type */
+    type?: 'default' | 'icon-left' | 'icon-right' | 'label-only';
+    /** Optional icon component from lucide-react */
+    icon?: LucideIcon;
+    /** Custom icon node (for avatars, payment icons, etc.) */
+    customIcon?: default_2.ReactNode;
+    /** RTL mode */
+    rtl?: boolean;
+    /** On change handler */
+    onChange?: (selected: boolean) => void;
+}
+
+export declare function cn(...inputs: (string | undefined | null | false)[]): string;
+
+export declare const CodeBlock: ({ code, language, className }: CodeBlockProps) => JSX_2.Element;
+
+declare interface CodeBlockProps {
+    code: string;
+    language?: string;
+    className?: string;
+}
+
+export declare const Divider: ForwardRefExoticComponent<DividerProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Direction of the divider */
+    direction?: 'horizontal' | 'vertical';
+    /** Style type of the divider */
+    type?: 'solid' | 'dashed';
+    /** Custom color (defaults to neutral-200) */
+    color?: string;
+    /** Spacing around the divider (margin) */
+    spacing?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export declare const Menu: ForwardRefExoticComponent<MenuProps & RefAttributes<HTMLDivElement>>;
+
+declare interface MenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'type'> {
+    /** Type of menu item */
+    type?: 'default' | 'multiline' | 'cta' | 'progress' | 'button' | 'divider' | 'label' | 'caption';
+    /** Item state */
+    state?: 'default' | 'hover' | 'disabled';
+    /** Main label text */
+    label?: string;
+    /** Supporting text (for multiline items) */
+    supportText?: string;
+    /** Leading icon */
+    leadingIcon?: LucideIcon;
+    /** Trailing icon */
+    trailingIcon?: LucideIcon;
+    /** Avatar image URL */
+    avatarSrc?: string;
+    /** Avatar initials */
+    avatarInitials?: string;
+    /** Badge text */
+    badgeText?: string;
+    /** Badge variant */
+    badgeVariant?: 'neutral' | 'green' | 'blue' | 'red' | 'yellow';
+    /** Right-aligned text */
+    rightText?: string;
+    /** Show toggle switch */
+    hasSwitch?: boolean;
+    /** Toggle switch active state */
+    switchActive?: boolean;
+    /** Switch change handler */
+    onSwitchChange?: (active: boolean) => void;
+    /** Button text (for CTA items) */
+    buttonText?: string;
+    /** Button click handler */
+    onButtonClick?: () => void;
+    /** Progress percentage (for progress items) */
+    progress?: number;
+    /** Progress label */
+    progressLabel?: string;
+    /** Progress optional text */
+    progressOptional?: string;
+    /** Caption text (for label/caption items) */
+    caption?: string;
+    /** RTL mode */
+    rtl?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+}
+
+export declare const MenuItemType: ForwardRefExoticComponent<MenuItemProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface MenuProps extends HTMLAttributes<HTMLDivElement> {
+    /** Menu items */
+    children?: ReactNode;
+    /** Menu width */
+    width?: number | string;
+    /** RTL mode */
+    rtl?: boolean;
+}
+
+/**
+ * SocialButton component for social media authentication buttons.
+ * Supports multiple platforms (Facebook, LinkedIn, Apple, WhatsApp, Google, X),
+ * two types (Default with text, IconOnly), two styles (Solid, Outlined),
+ * and RTL support.
+ *
+ * Specifications:
+ * - Height: 36px
+ * - Font: Inter Medium, 15px, weight 500, line-height 24px
+ * - Border radius: 8px
+ * - Icon size: 20px × 20px
+ * - Left padding: 12px
+ * - Shadow: component/default shadow system
+ */
+export declare const SocialButton: ForwardRefExoticComponent<SocialButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface SocialButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type" | "style"> {
+    /** The social platform */
+    platform: SocialPlatform;
+    /** The type of button - Default with text or IconOnly */
+    type?: SocialButtonType;
+    /** The visual style variant */
+    style?: SocialButtonStyle;
+    /** Enable RTL (Right-to-Left) mode */
+    rtl?: boolean;
+}
+
+declare type SocialButtonStyle = "Solid" | "Outlined";
+
+declare type SocialButtonType = "Default" | "IconOnly";
+
+export declare type SocialPlatform = "Facebook" | "LinkedIn" | "Apple" | "WhatsApp" | "Google" | "X";
+
+/**
+ * Switcher Component - Toggle switch for binary options
+ * Supports RTL, different sizes, and dark mode
+ * Perfect for theme switching (light/dark) and direction switching (LTR/RTL)
+ */
+export declare const Switcher: ForwardRefExoticComponent<SwitcherProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface SwitcherProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange'> {
+    /** Label text for the switcher */
+    label?: string;
+    /** Whether the switcher is checked */
+    checked?: boolean;
+    /** Callback when the switcher is changed */
+    onChange?: (checked: boolean) => void;
+    /** Callback when the switcher state changes */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Size of the switcher */
+    size?: SwitcherSize;
+    /** Enable RTL mode */
+    rtl?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+}
+
+export declare type SwitcherSize = 'sm' | 'md' | 'lg';
+
+export { }