@1001tv/manara 0.0.3-beta.0

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

@@ -0,0 +1,68 @@
+import { AnchorHTMLAttributes } from 'react';
+/**
+ * Link type — determines colour scheme
+ */
+export type LinkType = 'brand' | 'neutral';
+/**
+ * Link size — determines typography and icon dimensions
+ */
+export type LinkSize = 'large' | 'medium' | 'small';
+/**
+ * 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 LinkState = 'default' | 'hover' | 'pressed';
+/**
+ * Props for the Link component
+ *
+ * Extends native `<a>` attributes so consumers can pass `href`, `target`, `data-*`, etc.
+ */
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Link type — brand (green) or neutral (gray)
+     * @default 'brand'
+     */
+    type?: LinkType;
+    /**
+     * Link size — controls typography and icon size
+     * @default 'medium'
+     */
+    size?: LinkSize;
+    /**
+     * Uses semibold font weight
+     * @default true
+     */
+    isBold?: boolean;
+    /**
+     * Renders in a disabled/non-interactive state
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Shows the link-outline icon after the label
+     * @default true
+     */
+    icon?: boolean;
+    /**
+     * Uses Arabic font and RTL layout
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Label text displayed in the link
+     * @default 'Link'
+     */
+    label?: string;
+    /**
+     * Storybook-only: forces a visual interaction state for design audits.
+     * @default 'default'
+     */
+    state?: LinkState;
+    /**
+     * Storybook-only: forces the focus ring visible.
+     * Real focus is handled by focus-visible CSS.
+     * @default false
+     */
+    isFocused?: boolean;
+}

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

@@ -0,0 +1,18 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Link container variants using CVA
+ *
+ * - Layout: inline-flex, items-center
+ * - Gap: large = 4px (space050), medium/small = 2px (space025)
+ * - Rounded: 8px (radius100)
+ *
+ * Type determines colour (via link-manara-* composite utilities):
+ * - brand: verdant-500 base, verdant-600 hover, verdant-700 active
+ * - neutral: navy-50 base, navy-30 hover, navy-100 active
+ */
+export declare const linkVariants: (props?: ({
+    type?: "brand" | "neutral" | null | undefined;
+    size?: "small" | "medium" | "large" | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type LinkVariantsProps = VariantProps<typeof linkVariants>;

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

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

package/dist/components/List/List.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { ListProps } from './List.types';
+/**
+ * List (also called "Menu" in Figma) — 48h navigation row.
+ *
+ * A single row: icon + label + chevron. Stack multiple `<List>` items
+ * inside a `<nav>` to build a sidebar/column menu.
+ *
+ * Not to be confused with `<ListItem>` — a separate 72h row for
+ * settings/info lists (subtitle + title + trailing slot).
+ *
+ * Renders `<a>` when `href` is provided, otherwise `<button>`.
+ */
+export declare const List: FC<ListProps>;

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

@@ -0,0 +1,17 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface ListProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type'> {
+    /** Visible row label. Rendered with Arabic font when `selectedLanguage` is `ar`. */
+    label: string;
+    /** Optional leading icon — rendered inside a 24px slot. Inherits `currentColor`. */
+    icon?: ReactNode;
+    /** Show the trailing chevron (angle-right LTR / angle-left RTL) @default true */
+    showChevron?: boolean;
+    /** Currently selected row (green text + tinted surface) */
+    isSelected?: boolean;
+    /** Disabled row — no interactions, dimmed text */
+    isDisabled?: boolean;
+    /** Language key — drives RTL direction and Arabic font @default 'en' */
+    selectedLanguage?: string;
+    /** If provided, renders as an `<a>` instead of `<button>` */
+    href?: string;
+}

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

@@ -0,0 +1,22 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * List variants — Manara Design System (also called "Menu" in Figma)
+ *
+ * A single-sized row (48h × fluid width) with three interactive states
+ * handled via CSS pseudo-classes (`hover:`, `active:`, `focus-visible:`)
+ * plus two explicit flags: `isSelected` and `isDisabled`.
+ *
+ * Background per state:
+ *   default   → transparent
+ *   hover     → bg-manara-secondary       (navy-750)
+ *   pressed   → surface-manara-pressed    (navy-600)
+ *   selected  → surface-manara-primary    (navy-700)  + text-manara-selected
+ *   disabled  → transparent + text-manara-disabled
+ *
+ * Focus ring is a 2px inset-[-2px] outline with radius 14 so it sits
+ * cleanly around the 12-radius container (matches Figma spec).
+ */
+export declare const listVariants: (props?: ({
+    state?: "default" | "disabled" | "selected" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ListVariantProps = VariantProps<typeof listVariants>;

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

@@ -0,0 +1,2 @@
+export { List } from './List';
+export type { ListProps } from './List.types';

package/dist/components/ListItem/ListItem.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ListItemProps } from './ListItem.types';
+/**
+ * ListItem (also called "List Item" / "Menu Item" in Figma) — 72h general-purpose row.
+ *
+ * Subtitle + title with composition slots: `leading` (icon, payment card)
+ * and `trailing` (`<Button>`, `<Switch>`, text value). When `infoText` is
+ * set the row switches to a stacked layout with info text underneath.
+ *
+ * Not to be confused with `<List>` — a separate 48h navigation row
+ * (icon + label + chevron) used for sidebar/column menus.
+ */
+export declare const ListItem: FC<ListItemProps>;

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

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /** Primary title line — body/default/semibold, text-primary */
+    title: string;
+    /** Optional subtitle shown above the title — body/small/medium, text-tertiary */
+    subtitle?: string;
+    /**
+     * Optional info text rendered below the main row. When set, the root
+     * switches from a single row (72h) to a stacked column layout.
+     */
+    infoText?: string;
+    /** Optional leading visual next to the title (e.g. payment method card, icon) */
+    leading?: ReactNode;
+    /** Optional trailing node — pass <Button />, <Switch />, or a plain value span */
+    trailing?: ReactNode;
+    /** Language key — drives RTL direction and Arabic font @default 'en' */
+    selectedLanguage?: string;
+}

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

@@ -0,0 +1,2 @@
+export { ListItem } from './ListItem';
+export type { ListItemProps } from './ListItem.types';

package/dist/components/Logo/Logo.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import { LogoProps } from './Logo.types';
+/**
+ * Logo: bare wordmark by default (`variant='wordmark'`); pass `variant='tile'`
+ * for the full branded card (gradient/colored bg + border + wordmark).
+ *
+ * @example
+ * ```tsx
+ * <Logo />                                        // bare 1001 wordmark
+ * <Logo brand='osn' variant='tile' size='48' />   // OSN+ tile at 48px tall
+ * <Logo brand='1001' isPremium variant='tile' />  // 1001 Premium tile
+ * <Logo appearance='neutral' />                   // wordmark recoloured white
+ * ```
+ */
+export declare const Logo: FC<LogoProps>;

package/dist/components/Logo/Logo.helpers.d.ts

@@ -0,0 +1,34 @@
+import { FC, SVGProps } from 'react';
+import { LogoBrand, LogoVariant } from './Logo.types';
+export type BrandSvg = FC<SVGProps<SVGSVGElement>>;
+type BrandEntry = {
+    wordmark: BrandSvg;
+    tile: BrandSvg;
+    /** Optional premium variants — currently only `1001` has them. */
+    premium?: {
+        wordmark: BrandSvg;
+        tile: BrandSvg;
+    };
+};
+/**
+ * Brand → SVG registry — single source of truth for what each `brand` renders.
+ *
+ * Architecture:
+ * - Raw SVG assets live in `@/assets/logos/` and are the bare wordmark/icon.
+ *   These are the canonical brand marks.
+ * - Composite tiles live in `./brands/` and wrap a raw asset with the branded
+ *   background/border seen in Figma (circular gradient, dark square, etc.).
+ *   `brands/` is strictly a presentation layer — not the source of truth.
+ *
+ * Each entry exposes both `wordmark` and `tile`. The Logo component picks one
+ * based on the consumer's `variant` prop. Brands that ship a single form
+ * (self-contained NBTel/Supercell/etc., or wordmark-only LBC) use `same()`
+ * — both variants render the same SVG.
+ *
+ * Every value must render `<svg>` as its root (FC<SVGProps<SVGSVGElement>>).
+ */
+export declare const BRAND_MAP: Record<LogoBrand, BrandEntry>;
+/** Display names for UI (Storybook controls, matrix captions, etc.). Matches Figma brand casing. */
+export declare const BRAND_LABELS: Record<LogoBrand, string>;
+export declare const resolveBrandSvg: (brand: LogoBrand, isPremium: boolean, variant: LogoVariant) => BrandSvg;
+export {};

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

@@ -0,0 +1,61 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Brand identity to render. Each brand maps to an SVG in `src/assets/logos/`.
+ *
+ * To add a new brand: create the SVG in `src/assets/logos/`, then add the key
+ * here and the component reference in `Logo.tsx`'s `BRAND_MAP`.
+ */
+export type LogoBrand = '1001' | 'osn' | 'starzplay' | 'starzplay-sports' | 'tod' | 'lbc' | 'rotana' | 'sharqiya' | 'laliga' | 'wide' | 'zain' | 'asiacell' | 'nbtel' | 'al-jazeera' | 'fiberx' | 'supercell' | 'yango-play' | 'roya' | 'al-rahma';
+/**
+ * Logo height in pixels. Width auto-scales to preserve the brand SVG's
+ * intrinsic aspect ratio.
+ */
+export type LogoSize = '16' | '24' | '32' | '48' | '64' | '80' | '120';
+/**
+ * - `wordmark` → the bare brand mark (e.g. green "1001" text) — for nav bars,
+ *   footers, embedded chrome.
+ * - `tile`     → the branded card (gradient/colored background + border +
+ *   wordmark) — for brand galleries, picker tiles, marketing surfaces.
+ *
+ * Brands that only ship one form (e.g. self-contained tiles like NBTel, or
+ * wordmark-only brands like LBC) render the same SVG for both variants.
+ */
+export type LogoVariant = 'wordmark' | 'tile';
+/**
+ * Color treatment — applied via CSS `color` on the wrapper; the brand SVG
+ * inherits via `fill='currentColor'`.
+ *
+ * - `brand`       → each brand's natural colors (no override)
+ * - `neutral`     → text/primary (white, #ebebed)
+ * - `transparent` → text/tertiary (dim grey, #757683)
+ *
+ * Note: multi-color brand SVGs (OSN, TOD, etc.) have hardcoded path colors
+ * that ignore `fill`. For those, `neutral`/`transparent` will recolour only
+ * the paths authored with `fill={props.fill || ...}` and leave the others.
+ */
+export type LogoAppearance = 'brand' | 'neutral' | 'transparent';
+/**
+ * Props for the Logo component.
+ *
+ * Extends native `<span>` attributes so consumers can pass `data-*`,
+ * `aria-*`, `id`, layout classes, etc.
+ */
+export interface LogoProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Brand identity to render. @default '1001' */
+    brand?: LogoBrand;
+    /** Logo height in pixels. @default '32' */
+    size?: LogoSize;
+    /**
+     * Render the bare wordmark or the full branded tile.
+     * @default 'wordmark'
+     */
+    variant?: LogoVariant;
+    /** Color treatment. @default 'brand' */
+    appearance?: LogoAppearance;
+    /**
+     * When true and the brand has a premium variant, render that instead.
+     * Currently only `1001` has a premium variant; silently ignored for others.
+     * @default false
+     */
+    isPremium?: boolean;
+}

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

@@ -0,0 +1,17 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Logo wrapper variants.
+ *
+ * Sizing happens via inline `style` (height in px) on the wrapper plus inline
+ * style on the inner SVG (`height: 100%; width: auto`) — needed because each
+ * brand SVG has hardcoded `width`/`height` HTML attributes that would
+ * otherwise win over Tailwind classes.
+ *
+ * The `appearance` variant sets `color` on the wrapper; the brand SVG
+ * inherits via `fill='currentColor'` (passed by the Logo component when
+ * appearance is not 'brand').
+ */
+export declare const logoVariants: (props?: ({
+    appearance?: "brand" | "neutral" | "transparent" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type LogoVariantsProps = VariantProps<typeof logoVariants>;

package/dist/components/Logo/brands/AlRahma.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** Al-rahma brand tile: 1:1 circular purple gradient + antenna PNG. Figma renders at 10% opacity (intentionally dim). */
+export declare const AlRahma: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/AlSharqiya.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** Al Sharqia brand tile: 1:1 dark maroon rounded-square + red wordmark. `fill` recolours the wordmark only. */
+export declare const AlSharqiya: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/Asiacell.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** Asiacell brand tile: 1:1 circular red radial gradient + white wordmark. `fill` recolours the wordmark only. */
+export declare const Asiacell: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/FiberX.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** FiberX brand tile: 1:1 circular purple gradient + multi-colour wordmark. `fill` recolours the wordmark only. */
+export declare const FiberX: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/Laliga.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** LaLiga brand tile: 1:1 dark warm rounded-square + red wordmark. `fill` recolours the wordmark only. */
+export declare const Laliga: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/Osn.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** OSN+ brand tile: 1:1 dark rounded-square + multi-colour wordmark. `fill` recolours the wordmark only. */
+export declare const Osn: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/Rotana.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** Rotana brand tile: 1:1 dark green rounded-square + green wordmark. `fill` recolours the wordmark only. */
+export declare const Rotana: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/Roya.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** Roya brand tile: 1:1 dark rounded-square + pink wordmark. `fill` recolours the wordmark only. */
+export declare const Roya: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/Starzplay.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** Starzplay brand tile: 1:1 dark teal rounded-square + gradient wordmark. `fill` recolours the wordmark only. */
+export declare const Starzplay: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/StarzplaySports.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** Starzplay Sports brand tile: 1:1 dark teal rounded-square + sports wordmark. `fill` recolours the wordmark only. */
+export declare const StarzplaySports: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/Tod.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** TOD brand tile: 1:1 dark grey rounded-square + yellow wordmark. `fill` recolours the wordmark only. */
+export declare const Tod: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/Wide.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** Wide brand tile: 1:1 dark olive rounded-square + gold wordmark. `fill` recolours the wordmark only. */
+export declare const Wide: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/Zain.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** Zain brand tile: 1:1 circular gradient + white wordmark. `fill` recolours the wordmark only. */
+export declare const Zain: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/_1001.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** 1001 brand tile: 1:1 navy circle + green wordmark + bottom blue glow. `fill` recolours the wordmark only. */
+export declare const _1001: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Logo/brands/_1001Premium.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+/** 1001 crown brand tile: 1:1 navy rounded-square + green wordmark with crown. `fill` recolours the wordmark only. */
+export declare const _1001Premium: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,29 @@
+import { ModalProps } from './Modal.types';
+/**
+ * Modal Component - Manara Design System
+ *
+ * A dialog that overlays the interface for critical actions or information.
+ * Supports two sizes, Arabic RTL, configurable header/footer, and body content slot.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   header={{ title: 'Main Title', subtitle: 'Subtitle', closable: true }}
+ *   footer={{
+ *     primaryAction: { label: 'Primary', onClick: handlePrimary },
+ *     secondaryAction: { label: 'Secondary', onClick: handleSecondary },
+ *     tertiaryAction: { label: 'Tertiary', onClick: handleTertiary },
+ *   }}
+ * >
+ *   <p>Modal body content goes here.</p>
+ * </Modal>
+ * ```
+ */
+export declare const Modal: {
+    ({ isOpen, onClose, size, isArabic, header, children, footer, className, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

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

@@ -0,0 +1,104 @@
+import { ReactNode } from 'react';
+/**
+ * Modal size variants
+ */
+export type ModalSize = 'small' | 'large';
+/**
+ * Action button configuration for the modal footer
+ */
+export interface ModalAction {
+    label: ReactNode;
+    onClick?: () => void;
+}
+/**
+ * Props for the ModalHeader sub-component
+ */
+export interface ModalHeaderProps {
+    /**
+     * Title text displayed in the modal header
+     */
+    title: ReactNode;
+    /**
+     * Optional subtitle displayed below the title
+     */
+    subtitle?: ReactNode;
+    /**
+     * Whether the close button is visible in the header
+     * @default true
+     */
+    closable?: boolean;
+    /**
+     * Whether to render in Arabic mode (RTL)
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Props for the ModalFooter sub-component
+ */
+export interface ModalFooterProps {
+    /**
+     * Primary action button props
+     */
+    primaryAction: ModalAction;
+    /**
+     * Optional secondary action button props
+     */
+    secondaryAction?: ModalAction;
+    /**
+     * Optional tertiary action button props
+     */
+    tertiaryAction?: ModalAction;
+    /**
+     * Whether to render in Arabic mode (RTL)
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * Props for the Modal component
+ */
+export interface ModalProps {
+    /**
+     * Whether the modal is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback when the modal is requested to close
+     */
+    onClose: () => void;
+    /**
+     * Size variant of the modal
+     * @default 'small'
+     */
+    size?: ModalSize;
+    /**
+     * Whether to render in Arabic mode (RTL)
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Header configuration with title, subtitle, and closable
+     */
+    header: ModalHeaderProps;
+    /**
+     * Modal body content
+     */
+    children?: ReactNode;
+    /**
+     * Footer configuration. Pass `false` to hide the footer entirely.
+     */
+    footer?: ModalFooterProps | false;
+    /**
+     * Additional CSS classes for the modal container
+     */
+    className?: string;
+}

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

@@ -0,0 +1,29 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Modal overlay variants using CVA
+ * The full-screen backdrop behind the modal
+ */
+export declare const modalOverlayVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Modal container variants using CVA
+ * The modal box itself
+ *
+ * Variants:
+ * - size: Controls max-width (small: 480px, large: 720px)
+ */
+export declare const modalContainerVariants: (props?: ({
+    size?: "small" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Modal header variants using CVA
+ */
+export declare const modalHeaderVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Modal body variants using CVA
+ */
+export declare const modalBodyVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Modal footer variants using CVA
+ */
+export declare const modalFooterVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export type ModalContainerVariantsProps = VariantProps<typeof modalContainerVariants>;

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

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

package/dist/components/NavigationBar/DesktopBar/DesktopBar.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { DesktopBarProps } from './DesktopBar.types';
+/** Desktop layout (≥ lg). Logo + language left, nav items + search + login/avatar right. */
+export declare const DesktopBar: FC<DesktopBarProps>;

package/dist/components/NavigationBar/DesktopBar/DesktopBar.types.d.ts

@@ -0,0 +1,4 @@
+import { NavigationBarProps } from '../NavigationBar/NavigationBar.types';
+export type DesktopBarProps = Pick<NavigationBarProps, 'navItems' | 'activeItem' | 'isLoggedIn' | 'isScrolled' | 'isPremium' | 'selectedLanguage' | 'labels' | 'onLanguageChange' | 'onNavItemClick' | 'onSearchClick' | 'onLoginClick' | 'onAvatarClick'> & {
+    className?: string;
+};

package/dist/components/NavigationBar/DesktopBar/DesktopBar.variants.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Desktop bar layout — flex with logo cluster left, menu cluster right.
+ * Background is transparent at idle (overlays page content) and switches
+ * to the navbar surface + 16px backdrop blur when scrolled.
+ */
+export declare const desktopBarVariants: (props?: ({
+    isScrolled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type DesktopBarVariantsProps = VariantProps<typeof desktopBarVariants>;

package/dist/components/NavigationBar/LanguageSwitcher/LanguageSwitcher.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { LanguageSwitcherProps } from './LanguageSwitcher.types';
+/** Dropdown that switches between en, ar, and ckb. */
+export declare const LanguageSwitcher: FC<LanguageSwitcherProps>;

package/dist/components/NavigationBar/LanguageSwitcher/LanguageSwitcher.types.d.ts

@@ -0,0 +1,11 @@
+export interface LanguageOption {
+    /** Locale code (BCP 47), e.g. 'en', 'ar', 'ckb'. */
+    key: string;
+    /** Endonym (native-script label). */
+    label: string;
+}
+export interface LanguageSwitcherProps {
+    /** Locale code of the currently selected language. */
+    selectedLanguage?: string;
+    onLanguageChange?: (languageKey: string) => void;
+}

package/dist/components/NavigationBar/LanguageSwitcher/LanguageSwitcher.utils.d.ts

@@ -0,0 +1,4 @@
+import { LanguageOption } from './LanguageSwitcher.types';
+/** The three locales the NavigationBar supports. Display labels are the
+ *  endonym for each language and are intentionally not translated. */
+export declare const SUPPORTED_LANGUAGES: LanguageOption[];

package/dist/components/NavigationBar/LoginOrAvatar/LoginOrAvatar.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { LoginOrAvatarProps } from './LoginOrAvatar.types';
+/** Auth slot used by DesktopBar + TabletBar: Avatar when logged in, Login button otherwise. */
+export declare const LoginOrAvatar: FC<LoginOrAvatarProps>;

package/dist/components/NavigationBar/LoginOrAvatar/LoginOrAvatar.types.d.ts

@@ -0,0 +1,10 @@
+export interface LoginOrAvatarProps {
+    /** Show Avatar instead of Login button. */
+    isLoggedIn?: boolean;
+    /** Visible text on the Login button. */
+    loginLabel: string;
+    /** Whether the Login label should render with the Arabic font. */
+    isArabicFont?: boolean;
+    onLoginClick?: () => void;
+    onAvatarClick?: () => void;
+}

package/dist/components/NavigationBar/MobileBar/MobileBar.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { MobileBarProps } from './MobileBar.types';
+/** Mobile layout (< md). 48px bar with Search · centered Logo · Hamburger. */
+export declare const MobileBar: FC<MobileBarProps>;