@1001tv/manara 0.0.3-beta.0

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

@@ -0,0 +1,6 @@
+import { NavigationBarProps } from '../NavigationBar/NavigationBar.types';
+export type MobileBarProps = Pick<NavigationBarProps, 'isScrolled' | 'isPremium' | 'labels' | 'onSearchClick'> & {
+    /** Fires when the hamburger is tapped. */
+    onMenuClick?: () => void;
+    className?: string;
+};

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

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Mobile bar layout — 48px tall, 8px horizontal gutter, 6px gap between slots.
+ * Background is solid (`bg-manara-primary`) at idle and switches to the
+ * navbar surface + 16px backdrop blur when scrolled.
+ */
+export declare const mobileBarVariants: (props?: ({
+    isScrolled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type MobileBarVariantsProps = VariantProps<typeof mobileBarVariants>;

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { NavigationBarProps } from './NavigationBar.types';
+/** Responsive composer for mobile / tablet / desktop nav + shared drawer. */
+export declare const NavigationBar: FC<NavigationBarProps>;

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

@@ -0,0 +1,8 @@
+import { NavItem, NavigationLabels } from './NavigationBar.types';
+/**
+ * Demo data for Storybook + the matrix. Real consumers supply `navItems`
+ * and `labels` themselves — typically from CMS — so nothing in this file
+ * ships through the component runtime.
+ */
+export declare const DEMO_NAV_ITEMS: Record<string, NavItem[]>;
+export declare const DEMO_LABELS: Record<string, NavigationLabels>;

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

@@ -0,0 +1,54 @@
+import { HTMLAttributes } from 'react';
+/** Single nav-bar entry. */
+export interface NavItem {
+    key: string;
+    label: string;
+}
+/**
+ * All textual and aria content the NavigationBar surfaces. Supply from CMS —
+ * the component itself ships no hardcoded text in any language.
+ */
+export interface NavigationLabels {
+    /** aria-label for the outer <nav>. */
+    nav: string;
+    /** aria-label for the drawer dialog. */
+    drawer: string;
+    /** aria-label for the close button inside the drawer. */
+    close: string;
+    /** aria-label for the Search icon button. */
+    search: string;
+    /** aria-label for the Menu (hamburger) icon button. */
+    menu: string;
+    /** Visible text on the Login button. */
+    login: string;
+    /** Visible text on the Account row (logged-in mobile drawer only). */
+    account: string;
+}
+export interface NavigationBarProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Nav items — supply per region/locale. */
+    navItems?: NavItem[];
+    /** Key of the currently active nav item. */
+    activeItem?: string;
+    /** Show Avatar instead of Login. */
+    isLoggedIn?: boolean;
+    /**
+     * Override the auto-detected scrolled appearance. When omitted the navbar
+     * listens to `window.scroll` and switches past 8px. Mobile + desktop only;
+     * tablet ignores this value.
+     */
+    isScrolled?: boolean;
+    /** Crown/premium logo variant. */
+    isPremium?: boolean;
+    /** Currently selected language key — drives RTL direction and font. One of 'en' | 'ar' | 'ckb'. */
+    selectedLanguage?: string;
+    /** All textual + aria content. Required — supply from CMS. */
+    labels: NavigationLabels;
+    onLanguageChange?: (languageKey: string) => void;
+    onNavItemClick?: (key: string) => void;
+    onSearchClick?: () => void;
+    onLoginClick?: () => void;
+    onAvatarClick?: () => void;
+    /** Controlled drawer state (mobile + tablet). Omit for uncontrolled. */
+    isDrawerOpen?: boolean;
+    onDrawerOpenChange?: (open: boolean) => void;
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Returns whether the window has scrolled past 8px.
+ * If `controlled` is provided, returns it unchanged and skips the scroll listener.
+ */
+export declare const useScrolled: (controlled?: boolean) => boolean;

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { NavigationDrawerProps } from './NavigationDrawer.types';
+/** Slide-in drawer shared by MobileBar + TabletBar; always mounted, gated by lg:hidden. */
+export declare const NavigationDrawer: FC<NavigationDrawerProps>;

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

@@ -0,0 +1,8 @@
+import { NavigationBarProps } from '../NavigationBar/NavigationBar.types';
+export type NavigationDrawerProps = Pick<NavigationBarProps, 'navItems' | 'activeItem' | 'isLoggedIn' | 'selectedLanguage' | 'labels' | 'onNavItemClick' | 'onLanguageChange' | 'onLoginClick'> & {
+    isOpen: boolean;
+    onClose: () => void;
+    /** Fires when the Account row is tapped (logged-in mobile only). */
+    onAccountClick?: () => void;
+    className?: string;
+};

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

@@ -0,0 +1,37 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Outer wrapper — fixed full-viewport overlay, hidden at lg+ where the
+ * desktop bar takes over. Pointer events follow the open state so a closed
+ * drawer doesn't block clicks on page content.
+ */
+export declare const drawerWrapperVariants: (props?: ({
+    isOpen?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Dark scrim behind the panel. Tap to dismiss. */
+export declare const drawerOverlayVariants: (props?: ({
+    isOpen?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Sliding panel. Mobile is near-full-screen; tablet is a 320px partial drawer.
+ * Slide direction flips with `dir="rtl"` on the parent.
+ */
+export declare const drawerPanelVariants: (props?: ({
+    isOpen?: boolean | null | undefined;
+    isRtl?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Text-row button inside the drawer panel: nav item, account, or language toggle.
+ * All three share size, hover, and typography; they differ in justify and
+ * active color.
+ */
+export declare const drawerRowVariants: (props?: ({
+    kind?: "nav" | "account" | "language" | null | undefined;
+    arabicFont?: boolean | null | undefined;
+    active?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Icon-only close button at the top of the drawer header. */
+export declare const drawerCloseButtonVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export type DrawerWrapperVariantsProps = VariantProps<typeof drawerWrapperVariants>;
+export type DrawerOverlayVariantsProps = VariantProps<typeof drawerOverlayVariants>;
+export type DrawerPanelVariantsProps = VariantProps<typeof drawerPanelVariants>;
+export type DrawerRowVariantsProps = VariantProps<typeof drawerRowVariants>;

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TabletBarProps } from './TabletBar.types';
+/** Tablet layout (md – lg). 56px bar with Hamburger · centered Logo · Search · Login/Avatar. */
+export declare const TabletBar: FC<TabletBarProps>;

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

@@ -0,0 +1,6 @@
+import { NavigationBarProps } from '../NavigationBar/NavigationBar.types';
+export type TabletBarProps = Pick<NavigationBarProps, 'isLoggedIn' | 'isPremium' | 'selectedLanguage' | 'labels' | 'onSearchClick' | 'onLoginClick' | 'onAvatarClick'> & {
+    /** Fires when the hamburger is tapped. */
+    onMenuClick?: () => void;
+    className?: string;
+};

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

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Tablet bar layout — 56px tall, 32px horizontal gutter, 8px vertical gutter.
+ * Always translucent (`surface-manara-navbar` + 16px backdrop blur);
+ * tablet has no opaque/non-scrolled state, so `isScrolled` is ignored.
+ *
+ * Display (`flex` / `hidden`) is owned by the composer's responsive className.
+ */
+export declare const tabletBarVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export type TabletBarVariantsProps = VariantProps<typeof tabletBarVariants>;

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

@@ -0,0 +1,2 @@
+export { NavigationBar } from './NavigationBar/NavigationBar';
+export type { NavItem, NavigationBarProps, NavigationLabels } from './NavigationBar/NavigationBar.types';

package/dist/components/Tab/TabButton/TabButton.d.ts

@@ -0,0 +1,23 @@
+import { TabButtonProps } from './TabButton.types';
+/**
+ * TabButton Component - Manara Design System
+ *
+ * An individual tab button — the building block used inside TabGroup.
+ * Can also be used standalone.
+ *
+ * Props mirror the Figma component playground:
+ * - state: default / hover / pressed (Storybook demo; CSS handles real interaction)
+ * - size: default / medium / large
+ * - isArabic: Arabic RTL mode
+ * - isSelected: selected state (green text + accent bg)
+ * - icon: optional icon before the label
+ * - label: tab label text
+ * - isFocused: Storybook-only forced focus ring
+ *
+ * @example
+ * ```tsx
+ * <TabButton isSelected label="Active" />
+ * <TabButton label="Inactive" icon={<Grid fill="currentColor" />} />
+ * ```
+ */
+export declare const TabButton: import('react').ForwardRefExoticComponent<TabButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Tab/TabButton/TabButton.types.d.ts

@@ -0,0 +1,57 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+/**
+ * Tab button size variants
+ */
+export type TabButtonSize = 'default' | 'medium' | 'large';
+/**
+ * Tab button state (for Storybook/testing)
+ */
+export type TabButtonState = 'default' | 'hover' | 'pressed';
+/**
+ * Props for the individual TabButton component (building block)
+ *
+ * Extends native `<button>` attributes so consumers can pass `aria-*`, `data-*`, etc.
+ * `onClick` is narrowed to `() => void` (no event arg) for simpler consumer usage.
+ */
+export interface TabButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    /**
+     * Size variant
+     * @default 'default'
+     */
+    size?: TabButtonSize;
+    /**
+     * Whether this tab is currently selected
+     * @default false
+     */
+    isSelected?: boolean;
+    /**
+     * Whether to render in Arabic mode (RTL)
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Tab label text
+     * @default 'Tab'
+     */
+    label?: string;
+    /**
+     * Optional icon displayed before the label
+     */
+    icon?: ReactNode;
+    /**
+     * Visual state override (for Storybook/testing).
+     * Hover and pressed states are handled via CSS in production.
+     * @default 'default'
+     */
+    state?: TabButtonState;
+    /**
+     * Whether the tab is focused (for Storybook/testing).
+     * Native browser focus is handled via CSS.
+     * @default false
+     */
+    isFocused?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}

package/dist/components/Tab/TabButton/TabButton.variants.d.ts

@@ -0,0 +1,24 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * TabButton variants using CVA (Class Variance Authority)
+ * Based on Manara Design System specifications
+ *
+ * Sizes (from Figma):
+ * - default: h-40px, rounded-12px, Body/Small/SemiBold (14px)
+ * - medium:  h-48px, rounded-12px, Body/Default/SemiBold (16px)
+ * - large:   h-56px, rounded-12px, Body/Large/SemiBold (18px)
+ *
+ * States (from Figma, applied via CSS pseudo-classes):
+ * - selected default:   surface/accent (#0d0e25), text/selected (#13cb5c)
+ * - selected hover:     surface/hover (#2e2f42), text/selected (#13cb5c)
+ * - selected pressed:   surface/accent (#0d0e25), text/selected (#13cb5c)
+ * - unselected default: no bg, text/secondary (#bfc0c6)
+ * - unselected hover:   surface/hover (#2e2f42), text/primary (#ebebed)
+ * - unselected pressed: surface/accent (#0d0e25), text/secondary (#bfc0c6)
+ */
+export declare const tabButtonVariants: (props?: ({
+    size?: "default" | "medium" | "large" | null | undefined;
+    isSelected?: boolean | null | undefined;
+    isArabic?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TabButtonVariantsProps = VariantProps<typeof tabButtonVariants>;

package/dist/components/Tab/TabGroup/TabGroup.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { TabGroupProps } from './TabGroup.types';
+/**
+ * TabGroup Component - Manara Design System
+ *
+ * A Tab is used to navigate between content groups or views within the same screen.
+ * Renders a group of tab buttons inside a pill-shaped container.
+ *
+ * @example
+ * ```tsx
+ * const [tab, setTab] = useState('tab1');
+ * <TabGroup
+ *   tabs={[
+ *     { value: 'tab1', label: 'First' },
+ *     { value: 'tab2', label: 'Second' },
+ *     { value: 'tab3', label: 'Third' },
+ *   ]}
+ *   value={tab}
+ *   onChange={setTab}
+ * />
+ * ```
+ */
+export declare const TabGroup: FC<TabGroupProps>;

package/dist/components/Tab/TabGroup/TabGroup.types.d.ts

@@ -0,0 +1,52 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Tab group size variants
+ */
+export type TabGroupSize = 'default' | 'medium' | 'large';
+/**
+ * A single tab item definition used by TabGroup
+ */
+export interface TabItem {
+    /**
+     * Unique key for the tab
+     */
+    value: string;
+    /**
+     * Label text displayed in the tab
+     */
+    label: string;
+    /**
+     * Optional icon displayed before the label
+     */
+    icon?: ReactNode;
+}
+/**
+ * Props for the TabGroup component
+ *
+ * Extends native `<div>` attributes so consumers can pass `data-*`, `aria-*`, etc.
+ * `onChange` is narrowed to `(value: string) => void` for tab selection.
+ */
+export interface TabGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Size variant of all tabs in the group
+     * @default 'default'
+     */
+    size?: TabGroupSize;
+    /**
+     * Array of tab items to render
+     */
+    tabs: TabItem[];
+    /**
+     * Currently selected tab value (controlled)
+     */
+    value: string;
+    /**
+     * Callback fired when a tab is selected
+     */
+    onChange: (value: string) => void;
+    /**
+     * Whether to render in Arabic mode (RTL)
+     * @default false
+     */
+    isArabic?: boolean;
+}

package/dist/components/Tab/TabGroup/TabGroup.variants.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * TabGroup container variants
+ *
+ * Container sizes (from Figma):
+ * - default: h-48px (40px tab + 4px padding top + 4px padding bottom)
+ * - medium:  h-56px (48px tab + 4px + 4px)
+ * - large:   h-64px (56px tab + 4px + 4px)
+ */
+export declare const tabGroupVariants: (props?: ({
+    size?: "default" | "medium" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TabGroupVariantsProps = VariantProps<typeof tabGroupVariants>;

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

@@ -0,0 +1,2 @@
+export { TabButton } from './TabButton/TabButton';
+export { TabGroup } from './TabGroup/TabGroup';

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { TagProps } from './Tag.types';
+/**
+ * Tag Component — Manara Design System
+ *
+ * A tag identifies and labels a piece of UI content for quick recognition and navigation.
+ * Supports three colour appearances, three display types (outline / ghost / fill),
+ * three sizes, icon-only mode, optional remove button, and Arabic RTL.
+ *
+ * @example
+ * ```tsx
+ * <Tag appearance="brand" type="outline" size="40" icon={<Crown fill="currentColor" />} label="Premium" />
+ * <Tag appearance="critical" type="fill" size="32" label="Expired" removable onRemove={() => {}} />
+ * <Tag appearance="neutral" type="ghost" size="24" icon={<Star fill="currentColor" />} iconOnly />
+ * ```
+ */
+export declare const Tag: FC<TagProps>;

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

@@ -0,0 +1,76 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Visual colour variant of the tag
+ */
+export type TagAppearance = 'brand' | 'critical' | 'neutral';
+/**
+ * Display style of the tag
+ */
+export type TagType = 'outline' | 'ghost' | 'fill';
+/**
+ * Height variant of the tag (in px)
+ */
+export type TagSize = '40' | '32' | '24';
+/**
+ * Shared props for all Tag variants
+ * Extends native `<div>` attributes so consumers can pass `data-*`, `aria-*`, etc.
+ */
+interface TagBaseProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visual colour variant
+     * @default 'brand'
+     */
+    appearance?: TagAppearance;
+    /**
+     * Display style — outline adds a 2px border, ghost is borderless, fill uses a solid background
+     * @default 'outline'
+     */
+    type?: TagType;
+    /**
+     * Height variant in pixels
+     * @default '40'
+     */
+    size?: TagSize;
+    /**
+     * Renders label with Arabic font and reverses icon/label order (RTL)
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * When true, shows a close/remove button after the label
+     * @default false
+     */
+    removable?: boolean;
+    /**
+     * Callback fired when the remove button is clicked
+     */
+    onRemove?: () => void;
+}
+/**
+ * When iconOnly is true, icon is required (otherwise the tag would be empty).
+ */
+interface TagIconOnlyProps extends TagBaseProps {
+    iconOnly: true;
+    icon: ReactNode;
+    label?: string;
+}
+/**
+ * When iconOnly is false or omitted, icon is optional.
+ */
+interface TagWithLabelProps extends TagBaseProps {
+    iconOnly?: false;
+    icon?: ReactNode;
+    /**
+     * Label text displayed inside the tag
+     * @default 'Label'
+     */
+    label?: string;
+}
+/**
+ * Props for the Tag component
+ *
+ * Extends native `<div>` attributes so consumers can pass `data-*`, `aria-*`, etc.
+ * When `iconOnly` is true, `icon` becomes required.
+ */
+export type TagProps = TagIconOnlyProps | TagWithLabelProps;
+export {};

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

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Tag container variants using CVA
+ *
+ * Sizes (from Figma):
+ * - '40': h-40px, radius-12px, Body/Default/SemiBold (16px), icon 24px
+ * - '32': h-32px, radius-12px, Body/Small/SemiBold (14px),   icon 20px
+ * - '24': h-24px, radius-8px,  Caption/Default/SemiBold (12px), icon 16px
+ *
+ * Type × Appearance colour matrix (from Figma):
+ * - outline: 2px border, background = background/primary (#0d0e25)
+ * - ghost:   no border,  background = background/primary (#0d0e25)
+ * - fill:    no border,  background = solid colour per appearance
+ *
+ * Padding (iconOnly creates a square tag):
+ * - size=40, with-label: p-8px     | iconOnly: p-8px   (8+24+8 = 40px ✓)
+ * - size=32, with-label: px-8 py-6 | iconOnly: p-6px   (6+20+6 = 32px ✓)
+ * - size=24, with-label: px-6 py-4 | iconOnly: p-4px   (4+16+4 = 24px ✓)
+ */
+export declare const tagVariants: (props?: ({
+    size?: "24" | "32" | "40" | null | undefined;
+    appearance?: "critical" | "brand" | "neutral" | null | undefined;
+    type?: "fill" | "outline" | "ghost" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TagVariantsProps = VariantProps<typeof tagVariants>;

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

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

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { ToastProps } from './Toast.types';
+/**
+ * Toast Component — Manara Design System
+ *
+ * Toasts inform users of low-priority messages and disappear quickly to avoid distractions.
+ * Supports neutral / brand / critical types, loading state, closable, and Arabic RTL.
+ *
+ * @example
+ * ```tsx
+ * <Toast type="neutral" message="Changes saved." />
+ * <Toast type="critical" message="Failed to save." closable onClose={() => {}} />
+ * <Toast type="brand" message="Processing..." isLoading />
+ * ```
+ */
+export declare const Toast: FC<ToastProps>;

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

@@ -0,0 +1,56 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Toast type — determines border colour and default icon
+ */
+export type ToastType = 'neutral' | 'brand' | 'critical';
+/**
+ * Props for the Toast component
+ *
+ * Extends native `<div>` attributes so consumers can pass `data-*`, `aria-*`, etc.
+ */
+export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Toast type — neutral/brand use default border, critical uses red border
+     * @default 'neutral'
+     */
+    type?: ToastType;
+    /**
+     * Uses Arabic font and RTL layout
+     * @default false
+     */
+    isArabic?: boolean;
+    /**
+     * Replaces the status icon with a loading spinner
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Allows the message to wrap to multiple lines
+     * @default false
+     */
+    multiline?: boolean;
+    /**
+     * Shows a close/dismiss button
+     * @default true
+     */
+    closable?: boolean;
+    /**
+     * Message text displayed in the toast
+     * @default 'Short feedback message.'
+     */
+    message?: string;
+    /**
+     * Custom icon override — replaces the default type-based icon
+     */
+    icon?: ReactNode;
+    /**
+     * Callback fired when the close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Storybook-only: forces the focus ring visible on the close button.
+     * Real focus is handled by focus-visible CSS on the button.
+     * @default false
+     */
+    isFocused?: boolean;
+}

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

@@ -0,0 +1,18 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * Toast container variants using CVA
+ *
+ * From Figma:
+ * - Container: surface/accent (#0d0e25), border 2px, radius 16px, padding 12px, gap 8px
+ * - Shadow: 0px 12px 16px -6px rgba(0,0,0,0.4)
+ * - Border colour: neutral/brand → border/primary (#3b3b4e), critical → border/critical (#ad3131)
+ * - Icon: 32px — neutral/brand = CircleCheck (green), critical = TriangleExclamation (red)
+ * - Text: Body/Small/Regular (14px), text/primary (#ebebed)
+ * - Close: 24px icon
+ * - Width: mobile 359px, tablet 480px (consumer-controlled via className)
+ */
+export declare const toastVariants: (props?: ({
+    type?: "critical" | "brand" | "neutral" | null | undefined;
+    multiline?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ToastVariantsProps = VariantProps<typeof toastVariants>;

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

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

package/dist/components/VideoPlayer/PlaybackActions/PlaybackActions.d.ts

@@ -0,0 +1,3 @@
+import { PlaybackActionsProps } from './PlaybackActions.types';
+/** Center-screen playback cluster: skip-back · play/pause · skip-forward. When `pulsedKey` matches a button, that button flashes the keyboard-activation visual in two stages (focus ring → white fill). */
+export declare const PlaybackActions: import('react').ForwardRefExoticComponent<PlaybackActionsProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/VideoPlayer/PlaybackActions/PlaybackActions.types.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+import { PlaybackPulseKey } from '../hooks/usePlaybackPulse/usePlaybackPulse.types';
+export interface PlaybackActionsProps extends HTMLAttributes<HTMLDivElement> {
+    /** @default false */
+    isPaused?: boolean;
+    /** @default 10 */
+    skipSeconds?: number;
+    onPlayPause?: () => void;
+    onSkipBack?: () => void;
+    onSkipForward?: () => void;
+    isDisabled?: boolean;
+    /** Render the ±skipSeconds buttons. Set false during ads — play/pause only. @default true */
+    showSkip?: boolean;
+    /** When set, the matching button briefly flashes the white-fill + focus-ring keyboard-activation visual. */
+    pulsedKey?: PlaybackPulseKey | null;
+}

package/dist/components/VideoPlayer/PlayerUI/PlayerUI.d.ts

@@ -0,0 +1,7 @@
+import { PlayerUIProps } from './PlayerUI.types';
+/**
+ * Controls overlay — `absolute inset-0` over a relative video stage. Auto-hides the HUD after idle while keeping
+ * the scrubber hoverable; click-to-play backdrop toggles playback; Skip Intro / Next Episode pills time-gate
+ * against `currentTimeSec` and cross-fade between in-row and floating anchors.
+ */
+export declare const PlayerUI: import('react').ForwardRefExoticComponent<PlayerUIProps & import('react').RefAttributes<HTMLDivElement>>;