@1001tv/manara 0.0.3-beta.0

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

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Title text — body/default/semibold, text-primary */
+    title?: string;
+    /** Description text — body/small/regular, text-secondary */
+    description?: string;
+    /**
+     * Leading icon rendered at 24x24 in warning colour.
+     * Defaults to the built-in Alert (!) icon. Pass `null` to hide.
+     */
+    icon?: ReactNode;
+    /** Label for the action button */
+    actionLabel?: string;
+    /** Callback fired when the action button is clicked */
+    onAction?: () => void;
+    /** Language key — drives RTL direction and Arabic font @default 'en' */
+    selectedLanguage?: string;
+}

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

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

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { AvatarProps } from './Avatar.types';
+/**
+ * Avatar Component — Manara Design System
+ *
+ * Circular avatar with a default User silhouette icon. Supports three
+ * sizes (32 / 40 / 48) and a selected state (brand border + icon colour).
+ * The focus affordance is a brighter icon (no focus ring).
+ *
+ * @example
+ * ```tsx
+ * <Avatar size="40" />
+ * <Avatar size="48" isSelected />
+ * <Avatar size="32" onSelect={() => console.log('selected')} />
+ * ```
+ */
+export declare const Avatar: FC<AvatarProps>;

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

@@ -0,0 +1,44 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export type AvatarSize = '32' | '40' | '48';
+/**
+ * Visual interaction state — used by Storybook/Figma playground
+ * to force the focus/hover appearance for design audits.
+ * Real interaction states are handled by CSS pseudo-classes (hover:, focus-visible:).
+ *
+ * Note: the Avatar has no separate "pressed" visual — focus and hover both
+ * just brighten the icon from tertiary to secondary.
+ */
+export type AvatarState = 'default' | 'focus';
+/**
+ * Props for the Avatar component
+ *
+ * Extends native `<button>` attributes so consumers can pass `data-*`, `aria-*`, etc.
+ * `children` is omitted because the visual content is the user icon (or `icon` slot).
+ */
+export interface AvatarProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onSelect'> {
+    /**
+     * Diameter of the avatar in pixels.
+     * @default '40'
+     */
+    size?: AvatarSize;
+    /**
+     * Whether the avatar is in the selected state (brand colour border + icon).
+     * @default false
+     */
+    isSelected?: boolean;
+    /**
+     * Optional custom icon. Defaults to the User silhouette.
+     * Use `fill='currentColor'` so the icon inherits the avatar's text colour.
+     */
+    icon?: ReactNode;
+    /**
+     * Callback fired when the avatar is clicked (toggles selection).
+     */
+    onSelect?: () => void;
+    /**
+     * Storybook-only: forces a visual interaction state for design audits.
+     * `focus` brightens the icon to icon-secondary (matches Figma's `isFocus`).
+     * @default 'default'
+     */
+    state?: AvatarState;
+}

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

@@ -0,0 +1,22 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Avatar container variants using CVA
+ *
+ * - Sizes: 32px / 40px / 48px (square circle, rounded-full)
+ * - Border: 1px solid
+ * - Background: surface/primary  (#1c1d32)
+ *
+ * isSelected state changes:
+ * - Unselected: border/primary (#3b3b4e), icon-tertiary (#757683)
+ * - Selected:   border/focused (#13cb5c), icon-brand-primary (#13cb5c)
+ *
+ * Focus / hover state on the unselected variant simply brightens the
+ * icon from icon-tertiary (#757683) to icon-secondary (#bfc0c6).
+ * The avatar does NOT use a focus ring — the icon colour change IS the
+ * focus affordance. Handled via :hover and :focus-visible pseudo-classes.
+ */
+export declare const avatarVariants: (props?: ({
+    size?: "32" | "40" | "48" | null | undefined;
+    isSelected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type AvatarVariantsProps = VariantProps<typeof avatarVariants>;

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

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

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,10 @@
+import { BottomSheetProps } from './BottomSheet.types';
+/**
+ * BottomSheet — a panel that slides up from the bottom, draggable between a
+ * content-height collapsed snap and a near-viewport full snap, with drag-down
+ * to dismiss. Only the slot scrolls; header and footer stay fixed.
+ */
+export declare const BottomSheet: {
+    ({ isOpen, onClose, snapPoints, defaultSnap, isArabic, grabber, header, children, footer, onSnapChange, className, }: BottomSheetProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

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

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { BottomSheetHeaderProps } from './BottomSheetHeader/BottomSheetHeader.types';
+import { BottomSheetFooterProps } from './BottomSheetFooter/BottomSheetFooter.types';
+/**
+ * A single snap target: raw px from the bottom, a viewport fraction (`'60%'`),
+ * `'content'` (intrinsic content height, capped), or `'full'` (near-viewport).
+ */
+export type SnapPoint = number | `${number}%` | 'content' | 'full';
+/** The standard snap points used when `snapPoints` is not provided. */
+export declare const DEFAULT_SNAP_POINTS: SnapPoint[];
+/** Props for the BottomSheet component. */
+export interface BottomSheetProps {
+    /** Whether the sheet is open. */
+    isOpen: boolean;
+    /** Called when the sheet is dismissed (backdrop, Escape, or drag-down). */
+    onClose: () => void;
+    /** Ordered snap targets the sheet can rest at. @default ['content', 'full'] */
+    snapPoints?: SnapPoint[];
+    /** Index into `snapPoints` the sheet opens at (clamped). @default 0 */
+    defaultSnap?: number;
+    /** Render in Arabic mode (RTL). @default true */
+    isArabic?: boolean;
+    /** Whether the drag grabber handle is shown. @default true */
+    grabber?: boolean;
+    /** Header configuration. Pass `false` to hide the header. */
+    header: BottomSheetHeaderProps | false;
+    /** Scrollable slot content. */
+    children?: ReactNode;
+    /** Footer configuration. Pass `false` to hide the footer. */
+    footer?: BottomSheetFooterProps | false;
+    /** Fired with the snap index whenever the sheet settles on a new snap. */
+    onSnapChange?: (index: number) => void;
+    /** Additional CSS classes for the sheet container. */
+    className?: string;
+}

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

@@ -0,0 +1,10 @@
+/** Full-screen backdrop; anchors the sheet to the bottom and centers it on wide viewports. */
+export declare const bottomSheetOverlayVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/** The sheet container itself — bottom-aligned, capped width on desktop, rounded top. */
+export declare const bottomSheetContainerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/** Header — fixed (non-scrolling) region. */
+export declare const bottomSheetHeaderVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/** Slot — the only scrolling region; momentum scroll on iOS, contained overscroll. */
+export declare const bottomSheetBodyVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/** Footer — fixed region; full-width buttons stacked vertically. */
+export declare const bottomSheetFooterVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/BottomSheet/BottomSheetFooter/BottomSheetFooter.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { BottomSheetFooterProps } from './BottomSheetFooter.types';
+/** Fixed footer; Primary/Secondary/Tertiary actions stacked full-width. */
+export declare const BottomSheetFooter: FC<BottomSheetFooterProps>;

package/dist/components/BottomSheet/BottomSheetFooter/BottomSheetFooter.types.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+/** Action button configuration for the footer. */
+export interface BottomSheetAction {
+    label: ReactNode;
+    onClick?: () => void;
+}
+/** Props for the BottomSheetFooter sub-component. */
+export interface BottomSheetFooterProps {
+    /** Primary action — rendered as a full-width fill button. */
+    primaryAction: BottomSheetAction;
+    /** Optional secondary action — full-width outline button. */
+    secondaryAction?: BottomSheetAction;
+    /** Optional tertiary action — full-width ghost button. */
+    tertiaryAction?: BottomSheetAction;
+    /** Render in Arabic mode (RTL). @default true */
+    isArabic?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+}

package/dist/components/BottomSheet/BottomSheetHeader/BottomSheetHeader.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { BottomSheetHeaderProps } from './BottomSheetHeader.types';
+/** Fixed (non-scrolling) header with title, optional subtitle, and close button. */
+export declare const BottomSheetHeader: FC<BottomSheetHeaderProps & {
+    onClose?: () => void;
+}>;

package/dist/components/BottomSheet/BottomSheetHeader/BottomSheetHeader.types.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+/** Props for the BottomSheetHeader sub-component. */
+export interface BottomSheetHeaderProps {
+    /** Title text shown in the header. */
+    title: ReactNode;
+    /** Optional subtitle shown below the title. */
+    subtitle?: ReactNode;
+    /** Whether the close button is visible. @default true */
+    closable?: boolean;
+    /** Render in Arabic mode (RTL). @default true */
+    isArabic?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+}

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

@@ -0,0 +1,5 @@
+export { BottomSheet } from './BottomSheet';
+export { DEFAULT_SNAP_POINTS } from './BottomSheet.types';
+export type { BottomSheetProps, SnapPoint } from './BottomSheet.types';
+export type { BottomSheetHeaderProps } from './BottomSheetHeader/BottomSheetHeader.types';
+export type { BottomSheetFooterProps, BottomSheetAction } from './BottomSheetFooter/BottomSheetFooter.types';

package/dist/components/BottomSheet/useBottomSheet/useBottomSheet.d.ts

@@ -0,0 +1,28 @@
+import { MouseEvent, PointerEvent } from 'react';
+import { SnapPoint } from '../BottomSheet.types';
+interface UseBottomSheetOptions {
+    isOpen: boolean;
+    onClose: () => void;
+    snapPoints: SnapPoint[];
+    defaultSnap: number;
+    closable: boolean;
+    onSnapChange?: (index: number) => void;
+}
+/**
+ * Drag/snap engine for BottomSheet: resolves the snap-point spec to pixel
+ * heights, runs pointer-drag with velocity-based nearest-snap release,
+ * slide-in/out, scroll-lock and Escape. Returns refs, render-state, handlers.
+ */
+export declare const useBottomSheet: ({ isOpen, onClose, snapPoints, defaultSnap, closable, onSnapChange, }: UseBottomSheetOptions) => {
+    containerRef: import('react').RefObject<HTMLDivElement | null>;
+    slotRef: import('react').RefObject<HTMLDivElement | null>;
+    contentRef: import('react').RefObject<HTMLDivElement | null>;
+    height: number | null;
+    hidden: boolean;
+    transition: string;
+    onHandlePointerDown: (e: PointerEvent) => void;
+    onSlotPointerDown: (e: PointerEvent) => void;
+    handleOverlayClick: (e: MouseEvent<HTMLDivElement>) => void;
+    requestClose: () => void;
+};
+export {};

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,31 @@
+import { ButtonProps } from './Button.types';
+/**
+ * Button Component - Manara Design System
+ *
+ * A flexible button component that supports multiple appearances, sizes, and states.
+ * Supports icons, loading states, Arabic text, and icon-only variants.
+ *
+ * @example
+ * ```tsx
+ * // Basic button
+ * <Button>Click me</Button>
+ *
+ * // Outline button with icon
+ * <Button appearance="outline" iconBefore={<Icon />}>
+ *   Save
+ * </Button>
+ *
+ * // Icon-only button with direct icon node
+ * <Button iconOnly={<Icon />} />
+ *
+ * // Icon-only button using iconBefore
+ * <Button iconOnly iconBefore={<Icon />} />
+ *
+ * // Arabic text button
+ * <Button isArabic>تسمية</Button>
+ *
+ * // Loading state
+ * <Button isLoading>Loading...</Button>
+ * ```
+ */
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,112 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+/**
+ * Button appearance variants based on Manara Design System
+ */
+export type ButtonAppearance = 'fill' | 'outline' | 'ghost' | 'critical' | 'nav' | 'player-ghost';
+/**
+ * Button size variants
+ */
+export type ButtonSize = 'default' | 'medium' | 'large';
+/**
+ * Button state (for styling purposes, actual state managed internally)
+ */
+export type ButtonState = 'default' | 'hover' | 'pressed';
+/**
+ * Type for icon nodes, excluding booleans to prevent shorthand usage errors.
+ */
+export type ButtonIcon = Exclude<ReactNode, boolean | null | undefined>;
+/**
+ * Base props shared by all button variants
+ */
+interface BaseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /**
+     * Visual style variant of the button
+     * @default 'fill'
+     */
+    appearance?: ButtonAppearance;
+    /**
+     * Size variant of the button
+     * @default 'default'
+     */
+    size?: ButtonSize;
+    /**
+     * Whether the button is in a loading state
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Whether the button is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether to render the button in Arabic mode
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Additional CSS classes to apply
+     */
+    className?: string;
+    /**
+     * Whether the button 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;
+}
+/**
+ * Props for a standard text button
+ */
+interface StandardButtonProps extends BaseButtonProps {
+    /**
+     * Whether to render only the icon (icon-only mode)
+     */
+    iconOnly?: false;
+    /**
+     * Button content (text or elements)
+     */
+    children: ReactNode;
+    /**
+     * Icon to display before the button text
+     */
+    iconBefore?: ButtonIcon;
+    /**
+     * Icon to display after the button text
+     */
+    iconAfter?: ButtonIcon;
+}
+/**
+ * Props for an icon-only button requiring at least one icon source
+ */
+type IconOnlyButtonProps = BaseButtonProps & ({
+    /** Icon to display as the primary button content */
+    iconOnly: ButtonIcon;
+    iconBefore?: ButtonIcon;
+    iconAfter?: ButtonIcon;
+    children?: ReactNode;
+} | ({
+    /** Whether to render only the icon (icon-only mode) */
+    iconOnly: true;
+} & ({
+    /** Icon to display as the primary button content */
+    iconBefore: ButtonIcon;
+    iconAfter?: ButtonIcon;
+    children?: ReactNode;
+} | {
+    iconBefore?: ButtonIcon;
+    /** Icon to display as the primary button content */
+    iconAfter: ButtonIcon;
+    children?: ReactNode;
+} | {
+    iconBefore?: ButtonIcon;
+    iconAfter?: ReactNode;
+    /** Icon to display as the primary button content */
+    children: ButtonIcon;
+})));
+/**
+ * Props for the Button component
+ */
+export type ButtonProps = StandardButtonProps | IconOnlyButtonProps;
+export {};

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

@@ -0,0 +1,25 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Button variants using CVA (Class Variance Authority)
+ * Based on Manara Design System specifications
+ *
+ * Appearance variants:
+ * - fill: Green filled button with dark green text
+ * - outline: Transparent with green border and green text
+ * - ghost: Transparent with green text only (no border)
+ * - critical: Transparent with red border and red text (outlined style)
+ *
+ * All variants support:
+ * - 3 sizes: default, medium, large
+ * - States: default, hover, pressed, disabled, isLoading
+ * - isArabic: Arabic font family
+ * - iconOnly: Square button with icon
+ */
+export declare const buttonVariants: (props?: ({
+    appearance?: "fill" | "outline" | "ghost" | "critical" | "nav" | "player-ghost" | null | undefined;
+    size?: "default" | "medium" | "large" | null | undefined;
+    isArabic?: boolean | null | undefined;
+    iconOnly?: boolean | null | undefined;
+    isLoading?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ButtonVariantsProps = VariantProps<typeof buttonVariants>;

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

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

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { CardProps } from './Card.types';
+/**
+ * Card Component — Manara Design System
+ *
+ * Re-usable video tile. Renders a background image plus optional overlays:
+ * brand logo, timeline (progress + episode label + more menu), tags
+ * (premium crown + custom label badge), and a remove-from-watchlist button.
+ *
+ * Two orientations:
+ * - '16:9' (default) — 208 × 117, bottom overlays h-48px
+ * - '2:3'            — 208 × 304, bottom overlays h-56px
+ *
+ * Width defaults to 208px (Figma) but is overridable via `className`
+ * (e.g. `className="w-full"` inside a responsive grid).
+ *
+ * @example
+ * ```tsx
+ * <Card imageSrc="/poster.jpg" imageAlt="Show" isPremium tagLabel="Live" showLogo />
+ * <Card orientation="2:3" imageSrc="/cover.jpg" showTimeline progress={45} episodeLabel="S1 E2" />
+ * ```
+ */
+export declare const Card: FC<CardProps>;

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

@@ -0,0 +1,60 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Aspect ratio variant — drives the card's height at the default 208px width
+ * (16:9 → 117px, 2:3 → 304px). Width is overridable via `className`.
+ */
+export type CardOrientation = '16:9' | '2:3';
+/**
+ * Props for the Card component
+ *
+ * Extends native `<div>` attributes so consumers can pass `data-*`, `aria-*`,
+ * `id`, `onClick` (when wrapping the whole card in a click target), etc.
+ */
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Image source URL — rendered as a full-bleed background image. */
+    imageSrc?: string;
+    /** Image alt text. @default '' */
+    imageAlt?: string;
+    /** Aspect ratio variant @default '16:9' */
+    orientation?: CardOrientation;
+    /** RTL mode — mirrors overlay positions and applies Arabic font to text. @default true */
+    isArabic?: boolean;
+    /**
+     * Storybook-only forced hover/focus border (2px brand-green outset).
+     * Real hover/focus is handled by CSS pseudo-classes in the variants.
+     * @default false
+     */
+    isHover?: boolean;
+    /** Show a brand logo at the bottom with dark scrim (defaults to 1001; override via `logo`). @default false */
+    showLogo?: boolean;
+    /**
+     * Logo slot shown when `showLogo` is true. Defaults to the neutral-white
+     * 1001 logo at size 16 when omitted. Pass a customised `<Logo />` to switch
+     * brand / appearance / isPremium.
+     */
+    logo?: ReactNode;
+    /**
+     * Show the timeline overlay (progress bar + episode label + more menu).
+     * Visually shares the bottom slot with `showLogo` — pick one.
+     * @default false
+     */
+    showTimeline?: boolean;
+    /** Episode label shown in 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 button. */
+    onMoreClick?: () => void;
+    /** Show the premium (crown) badge at the top. @default false */
+    isPremium?: boolean;
+    /** Optional additional badge label (e.g. 'Live'). Renders red when set. */
+    tagLabel?: string;
+    /**
+     * Show the remove-from-watchlist trash button at the top corner.
+     * Visually shares the top corner with the tags cluster — pick one.
+     * @default false
+     */
+    showRemoveWatchlist?: boolean;
+    /** Click handler for the remove-from-watchlist button. */
+    onRemoveWatchlist?: () => void;
+}

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

@@ -0,0 +1,18 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Card container variants.
+ *
+ * Sizes (Figma default width 208px — overridable via consumer className):
+ * - 16:9 → h-117px (208 × 117), bottom overlay h-48px
+ * - 2:3  → h-304px (208 × 304), bottom overlay h-56px
+ *
+ * Border radius is always rounded-manara-150 (12px).
+ *
+ * Note: the root does NOT clip overflow because the Storybook-only `isHover`
+ * focus border is positioned `inset-[-2px]` (outset). Bottom overlays rely on
+ * `rounded-b-manara-150` to clip their own corners.
+ */
+export declare const cardVariants: (props?: ({
+    orientation?: "16:9" | "2:3" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type CardVariantsProps = VariantProps<typeof cardVariants>;

package/dist/components/Card/TimelineOverlay.d.ts

@@ -0,0 +1,11 @@
+import { FC, MouseEvent } from 'react';
+interface TimelineOverlayProps {
+    overlayHeight: string;
+    progress: number;
+    episodeLabel?: string;
+    isArabic: boolean;
+    onMoreClick: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+/** Internal sub-component of Card — bottom overlay with progress bar, episode label, and more-menu button. */
+export declare const TimelineOverlay: FC<TimelineOverlayProps>;
+export {};

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

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

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { CarouselProps } from './Carousel.types';
+/**
+ * Carousel — horizontal `<Card>` row with an optional title row and edge arrow
+ * buttons. Pass items as a `CardProps[]` array; arrows derive from scroll
+ * state and auto-hide at the edges or when content fits without overflow.
+ */
+export declare const Carousel: FC<CarouselProps>;

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

@@ -0,0 +1,47 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { CardProps } from '../Card/Card.types';
+/**
+ * Single carousel item — a `CardProps` payload with an optional stable `id`
+ * used as the React `key` (falls back to array index when omitted).
+ *
+ * `id` is omitted from `CardProps` (which inherits HTML `id: string`) and
+ * re-declared as `string | number` so numeric indices are accepted.
+ */
+export type CarouselItem = Omit<CardProps, 'id'> & {
+    id?: string | number;
+};
+/**
+ * Props for the Carousel component.
+ *
+ * Extends native `<section>` attributes so consumers can pass `id`, `data-*`,
+ * `aria-*`, etc.
+ */
+export interface CarouselProps extends HTMLAttributes<HTMLElement> {
+    /** Items rendered in the row. Each entry is a `CardProps` payload. */
+    items: CarouselItem[];
+    /** Header title. Omit to render without a header row. */
+    title?: string;
+    /** Optional 24px leading icon shown next to the title (e.g. `<Live />`). */
+    leadingIcon?: ReactNode;
+    /** Label for the trailing "See More" link. @default 'See More' / 'عرض المزيد' */
+    seeMoreLabel?: string;
+    /** When set, See More renders as an `<a href>`. */
+    seeMoreHref?: string;
+    /** When set (and `seeMoreHref` is not), See More renders as a `<button>`. */
+    onSeeMoreClick?: () => void;
+    /**
+     * Allow horizontal scrolling on the items row. When false, content is
+     * clipped (`overflow-hidden`) and the scroll arrows are never shown.
+     * @default true
+     */
+    isScrollable?: boolean;
+    /**
+     * Show the prev/next arrow buttons outside the items row. Each arrow is
+     * automatically hidden at its respective edge or when content fits without
+     * overflow. Ignored when `isScrollable` is false.
+     * @default true
+     */
+    showArrows?: boolean;
+    /** RTL mode — flips header layout, scroll direction, and chevron icons. @default true */
+    isArabic?: boolean;
+}

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { CarouselHeaderProps } from './CarouselHeader.types';
+/**
+ * CarouselHeader — title row with optional leading icon and a trailing
+ * "See More" link/button. Composable on its own; also rendered by `Carousel`
+ * when a `title` is supplied.
+ */
+export declare const CarouselHeader: FC<CarouselHeaderProps>;

package/dist/components/Carousel/CarouselHeader/CarouselHeader.types.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Props for the CarouselHeader component.
+ *
+ * Extends native `<div>` attributes so consumers can pass `data-*`, `aria-*`,
+ * `id`, etc.
+ */
+export interface CarouselHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Title text rendered as `Title/Small` (semibold). */
+    title: string;
+    /**
+     * Optional 24px leading icon shown before the title (e.g. `<Live />`).
+     * Omit for portrait layouts that don't carry a category icon.
+     */
+    leadingIcon?: ReactNode;
+    /** Label for the trailing "See More" link. @default 'See More' / 'عرض المزيد' (when `isArabic`) */
+    seeMoreLabel?: string;
+    /** When set, the See More cluster renders as an `<a href>`. */
+    seeMoreHref?: string;
+    /** When set (and `seeMoreHref` is not), the See More cluster renders as a `<button>`. */
+    onSeeMoreClick?: () => void;
+    /** RTL mode — flips the chevron, applies the Arabic font, sets `dir='rtl'`. @default true */
+    isArabic?: boolean;
+}

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

@@ -0,0 +1,4 @@
+export { Carousel } from './Carousel';
+export type { CarouselProps, CarouselItem } from './Carousel.types';
+export { CarouselHeader } from './CarouselHeader/CarouselHeader';
+export type { CarouselHeaderProps } from './CarouselHeader/CarouselHeader.types';