@1001tv/manara 0.0.3-beta.0

package/dist/components/Carousel/useDragToScroll.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+interface UseDragToScrollOptions {
+    /** Disable all drag handling. @default true */
+    enabled?: boolean;
+    /** Pixel distance past which the trailing click is suppressed. @default 5 */
+    clickThreshold?: number;
+}
+/**
+ * Mouse drag-to-scroll. Touch falls through to native inertial scroll. Toggles
+ * `data-dragging` on the element for styling, and swallows the trailing click
+ * past `clickThreshold` so descendants don't activate on drag-release.
+ */
+export declare const useDragToScroll: <T extends HTMLElement>({ enabled, clickThreshold, }?: UseDragToScrollOptions) => RefObject<T | null>;
+export {};

package/dist/components/Chip/Chip.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { ChipProps } from './Chip.types';
+/**
+ * Chip Component — Manara Design System
+ *
+ * Chips allow users to display information, make choices, filter content,
+ * or perform actions. Supports selected state with check icon, and Arabic RTL.
+ *
+ * @example
+ * ```tsx
+ * <Chip label="Option" />
+ * <Chip label="Selected" isSelected />
+ * <Chip label="شريحة" isArabic />
+ * ```
+ */
+export declare const Chip: FC<ChipProps>;

package/dist/components/Chip/Chip.types.d.ts

@@ -0,0 +1,44 @@
+import { ButtonHTMLAttributes } from 'react';
+/**
+ * Visual interaction state — used by Storybook/Figma playground
+ * to force hover/pressed appearance for design audits.
+ * Real interaction states are handled by CVA pseudo-classes (hover:, active:).
+ */
+export type ChipState = 'default' | 'hover' | 'pressed';
+/**
+ * Props for the Chip component
+ *
+ * Extends native `<button>` attributes so consumers can pass `data-*`, `aria-*`, etc.
+ */
+export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Label text displayed in the chip
+     * @default 'Chip'
+     */
+    label?: string;
+    /**
+     * Uses Arabic font and RTL layout
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Whether the chip is in the selected/active state
+     * @default false
+     */
+    isSelected?: boolean;
+    /**
+     * Callback fired when the chip is clicked (toggles selection)
+     */
+    onToggle?: () => void;
+    /**
+     * Storybook-only: forces a visual interaction state for design audits.
+     * @default 'default'
+     */
+    state?: ChipState;
+    /**
+     * Storybook-only: forces the focus ring visible.
+     * Real focus is handled by focus-visible CSS.
+     * @default false
+     */
+    isFocused?: boolean;
+}

package/dist/components/Chip/Chip.variants.d.ts

@@ -0,0 +1,20 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Chip container variants using CVA
+ *
+ * - Height: 36px
+ * - Padding: px-12px, py-8px
+ * - Gap: 6px (between check icon and label)
+ * - Border: 2px solid
+ * - Radius: 12px
+ *
+ * isSelected state changes:
+ * - Unselected: surface/primary bg, border/primary border, text/secondary text
+ * - Selected: surface/brand/primary bg, border/focused border, text/brand/secondary text
+ *
+ * Hover/Pressed handled via CSS pseudo-classes
+ */
+export declare const chipVariants: (props?: ({
+    isSelected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ChipVariantsProps = VariantProps<typeof chipVariants>;

package/dist/components/Chip/index.d.ts

@@ -0,0 +1 @@
+export { Chip } from './Chip';

package/dist/components/Episode/Episode.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { EpisodeProps } from './Episode.types';
+/** Episode card — `Card` poster (with optional timeline overlay) plus episode-number / title / description text. */
+export declare const Episode: FC<EpisodeProps>;

package/dist/components/Episode/Episode.types.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+/** Props for the Episode card. Composes `Card` with an episode text block underneath. */
+export interface EpisodeProps extends HTMLAttributes<HTMLElement> {
+    /** Poster image URL — fills the top thumbnail. */
+    posterSrc?: string;
+    /** Alt text for the poster image. @default '' */
+    posterAlt?: string;
+    /** Heading line, e.g. 'Episode 1' / 'الحلقة 1'. */
+    episodeNumber: string;
+    /** Muted secondary line below the heading — typically the actual episode title. */
+    episodeTitle: string;
+    /** 3-line clamped description paragraph. */
+    description: string;
+    /** Show the timeline overlay (progress bar + season/episode badge + kebab). @default false */
+    showTimeline?: boolean;
+    /** Season/episode label inside the timeline overlay (e.g. 'S1 E2', 'موسم 1 حلقة 2'). */
+    episodeLabel?: string;
+    /** Watch progress 0–100 for the timeline overlay's progress bar. @default 0 */
+    progress?: number;
+    /** Click handler for the timeline more-menu (kebab) button. */
+    onMoreClick?: () => void;
+    /** RTL mode — mirrors overlays and applies the Arabic-script font. @default true */
+    isArabic?: boolean;
+}

package/dist/components/Episode/index.d.ts

@@ -0,0 +1 @@
+export { Episode } from './Episode';

package/dist/components/FeaturedCarousel/FeaturedCarousel.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { FeaturedCarouselProps } from './FeaturedCarousel.types';
+/**
+ * FeaturedCarousel — full-bleed hero carousel showcasing one slide at a time.
+ * Crossfades between slides via opacity. Supports autoplay, touch/mouse swipe,
+ * and click-to-jump pagination dots.
+ */
+export declare const FeaturedCarousel: FC<FeaturedCarouselProps>;

package/dist/components/FeaturedCarousel/FeaturedCarousel.types.d.ts

@@ -0,0 +1,43 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { LogoBrand } from '../Logo/Logo.types';
+/** Single hero slide. `primary`/`secondary`/`tertiary` are `ReactNode` slots — pass rendered `<Button>`s so consumers control variant, icons, and handlers. */
+export interface FeaturedCarouselItem {
+    /** Stable React `key` (falls back to array index when omitted). */
+    id?: string | number;
+    /** Poster image URL — landscape, fills the right (LTR) or left (RTL) side. */
+    posterSrc: string;
+    /** Alt text for the poster image. @default '' (decorative) */
+    posterAlt?: string;
+    /** Brand mark shown inline with the overline. @default '1001' */
+    logoBrand?: LogoBrand;
+    /** Short text shown next to the logo (e.g. `'・Live Now'`). */
+    overline: string;
+    /** Slide headline (Display/Small, 40px). */
+    title: string;
+    /** Two-line summary (Body/Small, truncates after 2 lines). */
+    description: string;
+    /** Primary action button — typically a fill `<Button>` with an icon. */
+    primary: ReactNode;
+    /** Optional outline secondary action button. */
+    secondary?: ReactNode;
+    /** Optional ghost tertiary action button. */
+    tertiary?: ReactNode;
+}
+/**
+ * Props for the FeaturedCarousel component.
+ *
+ * Extends native `<section>` attributes so consumers can pass `id`, `data-*`,
+ * `aria-*`, etc.
+ */
+export interface FeaturedCarouselProps extends HTMLAttributes<HTMLElement> {
+    /** Slides rendered in order. Pagination dots and swipe navigation are derived from this. */
+    items: FeaturedCarouselItem[];
+    /** Auto-advance to the next slide on an interval. Pauses while the user is hovering or mid-swipe. @default true */
+    autoplay?: boolean;
+    /** Milliseconds between auto-advances. @default 6000 */
+    autoplayInterval?: number;
+    /** Pixel distance past which a touch/mouse swipe commits to a slide change. @default 60 */
+    swipeThreshold?: number;
+    /** RTL mode — flips poster, details, pagination, swipe direction, and fonts. @default true */
+    isArabic?: boolean;
+}

package/dist/components/FeaturedCarousel/Slide/Slide.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SlideProps } from './Slide.types';
+/** One absolute-positioned hero slide; the parent crossfades by toggling `isActive`. */
+export declare const Slide: FC<SlideProps>;

package/dist/components/FeaturedCarousel/Slide/Slide.types.d.ts

@@ -0,0 +1,10 @@
+import { FeaturedCarouselItem } from '../FeaturedCarousel.types';
+/** Props for the internal `Slide` sub-component. */
+export interface SlideProps {
+    /** The slide payload to render. */
+    item: FeaturedCarouselItem;
+    /** When true the slide is fully visible and interactive; otherwise it fades to opacity 0 and stops accepting pointer events. */
+    isActive: boolean;
+    /** RTL mode — flips poster anchor and side-scrim direction. */
+    isArabic: boolean;
+}

package/dist/components/FeaturedCarousel/SlideDots/SlideDots.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SlideDotsProps } from './SlideDots.types';
+/** Pill of dots indicating the active slide; positioned at top-450 on the side opposite the details panel. */
+export declare const SlideDots: FC<SlideDotsProps>;

package/dist/components/FeaturedCarousel/SlideDots/SlideDots.types.d.ts

@@ -0,0 +1,11 @@
+/** Props for the internal `SlideDots` indicator. */
+export interface SlideDotsProps {
+    /** Total number of slides — one dot per slide. */
+    total: number;
+    /** Index of the slide currently shown; that dot renders in the brand colour. */
+    activeIndex: number;
+    /** RTL mode — flips the pill from the right edge to the left edge. */
+    isArabic: boolean;
+    /** Called with the dot index when the user clicks a dot. */
+    onSelect: (index: number) => void;
+}

package/dist/components/FeaturedCarousel/index.d.ts

@@ -0,0 +1 @@
+export { FeaturedCarousel } from './FeaturedCarousel';

package/dist/components/Footer/Footer.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { FooterProps } from './Footer.types';
+/**
+ * Footer — Manara Design System
+ *
+ * Fully self-contained: derives RTL, font, labels, and copyright from
+ * `selectedLanguage` and responds to viewport via Tailwind breakpoints:
+ *   mobile  <768px    → everything stacked, tight padding
+ *   tablet  md:≥768px → copyright top, links+socials share a row, larger padding
+ *   desktop lg:≥1024px → single row: copyright ⇄ (links + socials), disclaimer below
+ */
+export declare const Footer: FC<FooterProps>;

package/dist/components/Footer/Footer.socials.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+export interface FooterSocialItem {
+    key: string;
+    Icon: FC<{
+        fill?: string;
+        className?: string;
+    }>;
+    label: string;
+    href: string;
+}
+export declare const SOCIAL_ITEMS: FooterSocialItem[];

package/dist/components/Footer/Footer.translations.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Footer translations — colocated so the Footer is fully self-contained:
+ * parents only pass `selectedLanguage` and the component derives every
+ * label from this dictionary.
+ */
+export type FooterLinkKey = 'privacy' | 'terms' | 'help' | 'contact';
+export interface FooterStrings {
+    /** Builds the © line. Year and version are supplied internally by the Footer. */
+    copyright: (year: number, version: string) => string;
+    links: Record<FooterLinkKey, string>;
+    /**
+     * reCAPTCHA disclaimer split into 5 segments so Privacy Policy and
+     * Terms of Service render as inline underlined links.
+     */
+    recaptcha: {
+        prefix: string;
+        privacyLink: string;
+        middle: string;
+        termsLink: string;
+        suffix: string;
+    };
+}
+export declare const FOOTER_STRINGS: Record<string, FooterStrings>;
+export declare const FOOTER_LINK_ORDER: FooterLinkKey[];

package/dist/components/Footer/Footer.types.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+export interface FooterProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Currently selected language key — drives RTL, font, and labels @default 'ar' */
+    selectedLanguage?: string;
+}

package/dist/components/Footer/index.d.ts

@@ -0,0 +1 @@
+export { Footer } from './Footer';

package/dist/components/FormInputs/Checkbox/Checkbox.d.ts

@@ -0,0 +1,22 @@
+import { CheckboxProps } from './Checkbox.types';
+/**
+ * Checkbox Component - Manara Design System
+ *
+ * A controlled checkbox component that supports checked, indeterminate, and unchecked states.
+ * Supports two sizes, labels with required indicators, Arabic RTL, and disabled/focus states.
+ *
+ * The parent is responsible for managing state via isChecked + onChange.
+ *
+ * @example
+ * ```tsx
+ * const [checked, setChecked] = useState(false);
+ * <Checkbox isChecked={checked} onChange={setChecked} label="Accept terms" />
+ *
+ * // Indeterminate
+ * <Checkbox isIndeterminate label="Select all" onChange={handleSelectAll} />
+ *
+ * // Large + Required
+ * <Checkbox size="large" isChecked={val} onChange={setVal} label="Required" isRequired />
+ * ```
+ */
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/FormInputs/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,63 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+/**
+ * Checkbox size variants
+ */
+export type CheckboxSize = 'default' | 'large';
+/**
+ * Checkbox state (for styling purposes in Matrix/Storybook)
+ */
+export type CheckboxState = 'default' | 'hover' | 'pressed' | 'disabled' | 'focused';
+/**
+ * Props for the Checkbox component
+ */
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'checked' | 'onChange'> {
+    /**
+     * Size variant of the checkbox
+     * @default 'default'
+     */
+    size?: CheckboxSize;
+    /**
+     * Whether the checkbox is checked. Parent manages state via onChange.
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Whether the checkbox is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the checkbox is focused (for Storybook/testing)
+     * The native browser focus is already handled in the css classes.
+     * This is only for testing/storybook to trigger the focus state.
+     * @default false
+     */
+    isFocused?: boolean;
+    /**
+     * Whether to render the checkbox in Arabic mode (RTL)
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Label text or node displayed next to the checkbox
+     */
+    label?: ReactNode;
+    /**
+     * Whether to show a required asterisk after the label
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Callback fired when the checked state changes
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Additional CSS classes to apply
+     */
+    className?: string;
+}

package/dist/components/FormInputs/Checkbox/Checkbox.variants.d.ts

@@ -0,0 +1,19 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Checkbox box variants using CVA (Class Variance Authority)
+ * Based on Manara Design System specifications
+ *
+ * The checkbox box is the inner visual square element that displays
+ * the check or indeterminate icon. It sits inside a touch-target wrapper
+ * that controls the overall hit area size (32×32 default, 40×40 large).
+ *
+ * Variants:
+ * - checked: Whether the box shows as checked/indeterminate (green) or unchecked (dark)
+ * - isDisabled: Disabled state styling
+ */
+export declare const checkboxBoxVariants: (props?: ({
+    size?: "default" | "large" | null | undefined;
+    checked?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type CheckboxBoxVariantsProps = VariantProps<typeof checkboxBoxVariants>;

package/dist/components/FormInputs/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export { Checkbox } from './Checkbox';

package/dist/components/FormInputs/Dropdown/Dropdown.d.ts

@@ -0,0 +1,24 @@
+import { DropdownProps } from './Dropdown.types';
+/**
+ * Dropdown Component - Manara Design System
+ *
+ * A dropdown allows users to select a single option from a list.
+ * Supports three sizes, three types (default, phoneNumber, paymentMethod),
+ * labels with required indicators, helper text, Arabic RTL, and disabled/focus states.
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useState('');
+ * <Dropdown
+ *   value={value}
+ *   onChange={setValue}
+ *   label="Country"
+ *   placeholder="Select country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'uk', label: 'United Kingdom' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Dropdown: import('react').ForwardRefExoticComponent<DropdownProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/FormInputs/Dropdown/Dropdown.types.d.ts

@@ -0,0 +1,104 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Dropdown size variants
+ */
+export type DropdownSize = 'default' | 'medium' | 'large';
+/**
+ * Dropdown type variants — affects trigger icon layout/padding
+ */
+export type DropdownType = 'default' | 'phoneNumber' | 'paymentMethod';
+/**
+ * Helper text state for color control
+ */
+export type DropdownHelperState = 'default' | 'error' | 'success';
+/**
+ * A single option in the dropdown
+ */
+export interface DropdownOption {
+    /** Unique value for this option */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional icon rendered before the label */
+    iconBefore?: ReactNode;
+    /** Whether this option is disabled */
+    isDisabled?: boolean;
+}
+/**
+ * Props for the Dropdown component
+ *
+ * Extends native `<div>` attributes so consumers can pass `data-*`, `aria-*`, etc.
+ * `onChange` is narrowed to `(value: string) => void` for selection changes.
+ */
+export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Size variant of the dropdown
+     * @default 'default'
+     */
+    size?: DropdownSize;
+    /**
+     * Type variant — affects trigger icon layout and padding
+     * @default 'default'
+     */
+    type?: DropdownType;
+    /**
+     * Whether the dropdown is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the dropdown appears focused (for Storybook/testing).
+     * Native focus is handled via CSS.
+     * @default false
+     */
+    isFocused?: boolean;
+    /**
+     * Whether the dropdown is in an invalid/error state
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether to render in Arabic mode (RTL)
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Whether to show a required asterisk after the label
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Label text or node displayed above the dropdown
+     */
+    label?: ReactNode;
+    /**
+     * Helper text displayed below the dropdown
+     */
+    helperText?: ReactNode;
+    /**
+     * Controls the color of helper text when not invalid
+     * @default 'default'
+     */
+    helperState?: DropdownHelperState;
+    /**
+     * Placeholder text when no value is selected
+     * @default 'Placeholder'
+     */
+    placeholder?: string;
+    /**
+     * Currently selected value
+     */
+    value?: string;
+    /**
+     * Callback fired when the selected value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * List of options to display in the dropdown menu
+     */
+    options: DropdownOption[];
+    /**
+     * Icon displayed in the trigger before the text (e.g. flag for phoneNumber)
+     */
+    iconBefore?: ReactNode;
+}

package/dist/components/FormInputs/Dropdown/Dropdown.variants.d.ts

@@ -0,0 +1,39 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Dropdown trigger button variants
+ *
+ * Variants:
+ * - size: Controls height, padding, border radius
+ * - isInvalid: Error state with critical border
+ * - isDisabled: Disabled state styling
+ * - type: Affects gap and padding for icon accommodation
+ *
+ * Interactive states (focus, hover, open) are handled via CSS:
+ * - hover: surface-manara-hover
+ * - open (focus-within): surface-manara-accent + border-manara-focused (2px)
+ */
+export declare const dropdownTriggerVariants: (props?: ({
+    size?: "default" | "medium" | "large" | null | undefined;
+    type?: "default" | "phoneNumber" | "paymentMethod" | null | undefined;
+    isInvalid?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+    isOpen?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type DropdownTriggerVariantsProps = VariantProps<typeof dropdownTriggerVariants>;
+/**
+ * Dropdown option item variants
+ *
+ * - size: Controls height
+ * - isSelected: Green background with dark text
+ */
+export declare const dropdownOptionVariants: (props?: ({
+    isSelected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type DropdownOptionVariantsProps = VariantProps<typeof dropdownOptionVariants>;
+/**
+ * Dropdown menu (floating panel) variants
+ */
+export declare const dropdownMenuVariants: (props?: ({
+    size?: "default" | "medium" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type DropdownMenuVariantsProps = VariantProps<typeof dropdownMenuVariants>;

package/dist/components/FormInputs/Dropdown/index.d.ts

@@ -0,0 +1 @@
+export { Dropdown } from './Dropdown';

package/dist/components/FormInputs/OtpInput/OtpInput.d.ts

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import { OtpInputProps } from './OtpInput.types';
+/**
+ * OTP Input Component - Manara Design System
+ *
+ * An OTP input lets users enter a one-time password for authentication or verification.
+ * Supports three sizes, labels, Arabic RTL, disabled/invalid states, and an optional
+ * dash separator between digit groups.
+ *
+ * @example
+ * ```tsx
+ * const [otp, setOtp] = useState('');
+ * <OtpInput value={otp} onChange={setOtp} label="Verification Code" />
+ *
+ * // 5-digit with separator
+ * <OtpInput value={otp} onChange={setOtp} length={5} separatorAfter={2} />
+ *
+ * // Large + Invalid
+ * <OtpInput size="large" value={otp} onChange={setOtp} isInvalid />
+ * ```
+ */
+export declare const OtpInput: FC<OtpInputProps>;

package/dist/components/FormInputs/OtpInput/OtpInput.types.d.ts

@@ -0,0 +1,66 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * OTP Input size variants
+ */
+export type OtpInputSize = 'default' | 'medium' | 'large';
+/**
+ * OTP Input state (for styling purposes in Matrix/Storybook)
+ */
+export type OtpInputState = 'default' | 'focus' | 'typing' | 'filled' | 'invalid' | 'disabled';
+/**
+ * Props for the OtpInput component
+ *
+ * Extends native `<div>` attributes so consumers can pass `data-*`, `aria-*`, etc.
+ * `onChange` is narrowed to `(value: string) => void` for OTP value changes.
+ */
+export interface OtpInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Size variant of the OTP input slots
+     * @default 'default'
+     */
+    size?: OtpInputSize;
+    /**
+     * Number of OTP digit slots
+     * @default 4
+     */
+    length?: number;
+    /**
+     * Current OTP value (controlled). Each character fills one slot.
+     * @default ''
+     */
+    value?: string;
+    /**
+     * Callback fired when the OTP value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Whether the OTP input is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Index of the slot to show as focused (for Storybook/testing).
+     * The native browser focus is already handled in CSS.
+     * Use 0 to focus the first slot, 1 for the second, etc.
+     */
+    focusedIndex?: number;
+    /**
+     * Whether the OTP input is in an invalid/error state
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether to render in Arabic mode (RTL)
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Label text or node displayed above the input
+     */
+    label?: ReactNode;
+    /**
+     * Index after which to show a dash separator (0-based).
+     * For example, separatorAfter={2} with length=5 renders: [0][1][2] - [3][4]
+     */
+    separatorAfter?: number;
+}