@mohasinac/appkit 2.1.1 → 2.2.0

package/dist/ui/index.d.ts

@@ -1,1644 +1,165 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { ReactNode, RefObject } from 'react';
-
-/**
- * Semantic HTML Wrapper Components
- *
- * Thin wrappers around HTML5 semantic elements.
- * Using these instead of raw tags enables:
- *   - Future one-place theming (add default padding/colour here, it applies everywhere)
- *   - Enforced accessibility attributes (Nav requires aria-label)
- *   - Consistent documentation / IDE autocomplete
- *   - Clean migration path if element defaults change
- *
- * All components pass through every standard HTML attribute via `...props`.
- * Style via `className` using Tailwind CSS classes.
- *
- * @example
- * ```tsx
- * import { Section, Article, Main, Aside, Nav, Ul, Ol, Li } from '@mohasinac/ui';
- *
- * <Main className="max-w-7xl mx-auto px-4">
- *   <Section className="py-12">
- *     <Article>...</Article>
- *   </Section>
- *   <Aside className="w-64 shrink-0">...</Aside>
- * </Main>
- *
- * <Nav aria-label="Main navigation">
- *   <Ul className="flex gap-4">
- *     <Li>Products</Li>
- *   </Ul>
- * </Nav>
- * ```
- */
-/**
- * Semantic `<section>` element.
- * Use for thematically grouped content that would appear in an outline.
- * Prefer this over a plain `<div>` when the block has a heading.
- */
-interface SectionProps extends React$1.HTMLAttributes<HTMLElement> {
-    children: React$1.ReactNode;
-}
-declare const Section: React$1.ForwardRefExoticComponent<SectionProps & React$1.RefAttributes<HTMLElement>>;
-/**
- * Semantic `<article>` element.
- * Use for self-contained compositions: blog posts, product cards, reviews, forum posts.
- */
-interface ArticleProps extends React$1.HTMLAttributes<HTMLElement> {
-    children?: React$1.ReactNode;
-}
-declare function Article({ className, children, ...props }: ArticleProps): react_jsx_runtime.JSX.Element;
-/**
- * Semantic `<main>` element.
- * Wraps the primary content of the document. Should appear only once per page.
- */
-interface MainProps extends React$1.HTMLAttributes<HTMLElement> {
-    children: React$1.ReactNode;
-}
-declare function Main({ className, children, ...props }: MainProps): react_jsx_runtime.JSX.Element;
-/**
- * Semantic `<aside>` element.
- * Use for supplementary content tangentially related to the main content:
- * sidebars, callout boxes, related-link panels.
- */
-interface AsideProps extends React$1.HTMLAttributes<HTMLElement> {
-    children: React$1.ReactNode;
-}
-declare const Aside: React$1.ForwardRefExoticComponent<AsideProps & React$1.RefAttributes<HTMLElement>>;
-/**
- * Semantic `<nav>` element with enforced `aria-label`.
- *
- * Every `<nav>` on a page MUST have a unique `aria-label` so assistive
- * technologies can distinguish between multiple navigation landmarks.
- *
- * @example
- * ```tsx
- * <Nav aria-label="Breadcrumb">...</Nav>
- * <Nav aria-label="Product categories">...</Nav>
- * ```
- */
-interface NavProps extends React$1.HTMLAttributes<HTMLElement> {
-    /** REQUIRED — describes the purpose of this navigation region for screen readers. */
-    "aria-label": string;
-    children: React$1.ReactNode;
-}
-declare function Nav({ className, children, ...props }: NavProps): react_jsx_runtime.JSX.Element;
-/**
- * Semantic `<header>` element for block-level component headers.
- * Use inside `Section`, `Article`, or card bodies — NOT as the page-level header.
- *
- * @example
- * ```tsx
- * <Article>
- *   <BlockHeader className="mb-4">
- *     <Heading level={2}>Post title</Heading>
- *   </BlockHeader>
- * </Article>
- * ```
- */
-interface BlockHeaderProps extends React$1.HTMLAttributes<HTMLElement> {
-    children: React$1.ReactNode;
-}
-declare function BlockHeader({ className, children, ...props }: BlockHeaderProps): react_jsx_runtime.JSX.Element;
-/**
- * Semantic `<footer>` element for block-level component footers.
- * Use inside `Section`, `Article`, or card bodies — NOT as the page-level footer.
- */
-interface BlockFooterProps extends React$1.HTMLAttributes<HTMLElement> {
-    children: React$1.ReactNode;
-}
-declare function BlockFooter({ className, children, ...props }: BlockFooterProps): react_jsx_runtime.JSX.Element;
-/**
- * Semantic `<ul>` (unordered list) element.
- *
- * @example
- * ```tsx
- * <Ul className="space-y-2">
- *   <Li>Item one</Li>
- *   <Li>Item two</Li>
- * </Ul>
- * ```
- */
-interface UlProps extends React$1.HTMLAttributes<HTMLUListElement> {
-    children: React$1.ReactNode;
-}
-declare function Ul({ className, children, ...props }: UlProps): react_jsx_runtime.JSX.Element;
-/**
- * Semantic `<ol>` (ordered list) element.
- *
- * @example
- * ```tsx
- * <Ol className="list-decimal pl-4 space-y-1">
- *   <Li>Step one</Li>
- *   <Li>Step two</Li>
- * </Ol>
- * ```
- */
-interface OlProps extends React$1.HTMLAttributes<HTMLOListElement> {
-    children: React$1.ReactNode;
-}
-declare function Ol({ className, children, ...props }: OlProps): react_jsx_runtime.JSX.Element;
-/**
- * Semantic `<li>` (list item) element. Use inside `Ul` or `Ol`.
- */
-interface LiProps extends React$1.LiHTMLAttributes<HTMLLIElement> {
-    children: React$1.ReactNode;
-}
-declare function Li({ className, children, ...props }: LiProps): react_jsx_runtime.JSX.Element;
-/**
- * Aliases for `BlockHeader` and `BlockFooter`.
- * Use when importing from the standard `<Header>` / `<Footer>` names.
- */
-type HeaderProps = BlockHeaderProps;
-declare const Header: typeof BlockHeader;
-type FooterProps = BlockFooterProps;
-declare const Footer: typeof BlockFooter;
-
-interface DivProps extends React$1.HTMLAttributes<HTMLDivElement> {
-    children?: React$1.ReactNode;
-}
-/**
- * Semantic `<div>` wrapper for general-purpose layout containers.
- *
- * Use when no more specific semantic element applies
- * (`<Section>`, `<Article>`, `<Main>`, `<Aside>` etc). Enables
- * future one-place theming and consistent import from `@mohasinac/appkit/ui`.
- *
- * @example
- * ```tsx
- * <Div className="flex items-center gap-4">
- *   <Badge>New</Badge>
- *   <Text>Product title</Text>
- * </Div>
- * ```
- */
-declare const Div: React$1.ForwardRefExoticComponent<DivProps & React$1.RefAttributes<HTMLDivElement>>;
-
-interface HeadingProps extends React$1.HTMLAttributes<HTMLHeadingElement> {
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-    variant?: "primary" | "secondary" | "muted" | "none";
-    children: React$1.ReactNode;
-}
-declare function Heading({ level, variant, className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
-interface TextProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
-    variant?: "primary" | "secondary" | "muted" | "error" | "success" | "none";
-    size?: "xs" | "sm" | "base" | "lg" | "xl";
-    weight?: "normal" | "medium" | "semibold" | "bold";
-    /** Override the rendered element. Defaults to `p`. */
-    as?: React$1.ElementType;
-    children: React$1.ReactNode;
-}
-declare function Text({ variant, size, weight, className, as: Tag, children, ...props }: TextProps): react_jsx_runtime.JSX.Element;
-interface LabelProps extends React$1.LabelHTMLAttributes<HTMLLabelElement> {
-    required?: boolean;
-    children: React$1.ReactNode;
-}
-declare function Label({ required, className, children, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
-interface CaptionProps extends React$1.HTMLAttributes<HTMLSpanElement> {
-    /** "default" — muted grey (default); "accent" — indigo, semibold; "inverse" — light indigo for use on dark indigo backgrounds */
-    variant?: "default" | "accent" | "inverse";
-    children: React$1.ReactNode;
-}
-declare function Caption({ variant, className, children, ...props }: CaptionProps): react_jsx_runtime.JSX.Element;
-/**
- * Inline wrapper for styled text fragments. Use instead of a raw `<span>`.
- * When `variant` is "inherit" (default) the element carries no colour classes
- * so it blends with its parent — perfect for purely structural/CSS wrappers.
- *
- * @example
- * ```tsx
- * <Span className="bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent">
- *   Highlighted
- * </Span>
- *
- * <Span variant="error" weight="semibold">Required</Span>
- * ```
- */
-interface SpanProps extends React$1.HTMLAttributes<HTMLSpanElement> {
-    /** Colour variant. "inherit" (default) applies no colour class. */
-    variant?: "inherit" | "primary" | "secondary" | "muted" | "error" | "success" | "accent";
-    size?: "xs" | "sm" | "base" | "lg" | "xl";
-    weight?: "normal" | "medium" | "semibold" | "bold";
-    children?: React$1.ReactNode;
-}
-declare function Span({ variant, size, weight, className, children, ...props }: SpanProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Spinner — generic loading indicator.
- *
- * Extracted from src/components/ui/Spinner.tsx for @mohasinac/ui.
- * No app-specific imports; pure Tailwind CSS.
- */
-interface SpinnerProps {
-    size?: "sm" | "md" | "lg" | "xl";
-    variant?: "primary" | "white" | "current";
-    className?: string;
-    label?: string;
-}
-declare function Spinner({ size, variant, className, label, }: SpinnerProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Skeleton — content placeholder with pulse or wave animation.
- *
- * Extracted from src/components/ui/Skeleton.tsx for @mohasinac/ui.
- * Wave animation uses a plain <style> element (no styled-jsx dependency).
- */
-interface SkeletonProps {
-    variant?: "text" | "circular" | "rectangular";
-    width?: string | number;
-    height?: string | number;
-    className?: string;
-    animation?: "pulse" | "wave" | "none";
-}
-declare function Skeleton({ variant, width, height, className, animation, }: SkeletonProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Button — versatile button with multiple variants, sizes, and loading state.
- *
- * Extracted from src/components/ui/Button.tsx for @mohasinac/ui.
- * Theme values inlined from THEME_CONSTANTS.button and THEME_CONSTANTS.colors.button.
- */
-declare const UI_BUTTON: {
-    readonly base: "inline-flex items-center justify-center font-medium rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
-    readonly active: "active:scale-95";
-    readonly variants: {
-        readonly primary: "bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 shadow-sm focus:ring-primary-500/30 dark:bg-secondary-500 dark:text-white dark:hover:bg-secondary-400 dark:active:bg-secondary-600 dark:focus:ring-secondary-400/30";
-        readonly secondary: "bg-primary-700 text-white hover:bg-primary-600 active:bg-primary-800 shadow-md focus:ring-primary-500 dark:bg-secondary-700 dark:text-white dark:hover:bg-secondary-600 dark:active:bg-secondary-800 dark:focus:ring-secondary-500";
-        readonly outline: "border border-zinc-200 dark:border-slate-700 bg-white dark:bg-transparent text-zinc-900 dark:text-zinc-100 hover:bg-zinc-50 dark:hover:bg-slate-800 focus:ring-zinc-400";
-        readonly ghost: "text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-slate-800 focus:ring-zinc-400";
-        readonly danger: "bg-red-600 text-white hover:bg-red-500 active:bg-red-700 shadow-sm shadow-red-600/10 focus:ring-red-500";
-        readonly warning: "bg-amber-500 text-white hover:bg-amber-400 active:bg-amber-600 shadow-sm shadow-amber-500/10 focus:ring-amber-500";
-    };
-    readonly sizes: {
-        readonly sm: "px-2.5 py-1.5 text-xs sm:px-3 sm:text-sm gap-1.5 min-h-[36px]";
-        readonly md: "px-3 py-2 text-sm sm:px-4 sm:py-2.5 sm:text-base gap-2 min-h-[44px]";
-        readonly lg: "px-4 py-2.5 text-base sm:px-6 sm:py-3 sm:text-lg gap-2.5 min-h-[44px]";
-    };
-};
-interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: keyof typeof UI_BUTTON.variants;
-    size?: keyof typeof UI_BUTTON.sizes;
-    isLoading?: boolean;
-    children?: React$1.ReactNode;
-}
-declare function Button({ variant, size, className, isLoading, disabled, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
-
-declare const SIZES: {
-    readonly sm: "h-8 w-8 rounded-lg";
-    readonly md: "h-10 w-10 rounded-xl";
-    readonly lg: "h-12 w-12 rounded-xl";
-};
-declare const VARIANTS$1: {
-    readonly ghost: "text-zinc-600 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-zinc-800 focus:ring-zinc-400";
-    readonly outline: "border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-transparent text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 focus:ring-zinc-400";
-    readonly primary: "bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 dark:bg-secondary-500 dark:hover:bg-secondary-400";
-    readonly danger: "text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 focus:ring-red-500";
-};
-interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Required — text alternative for screen readers. Also shown as tooltip. */
-    "aria-label": string;
-    /** Icon element to display (usually a Lucide icon). Falls back to children. */
-    icon?: React$1.ReactNode;
-    size?: keyof typeof SIZES;
-    variant?: keyof typeof VARIANTS$1;
-}
-/**
- * Icon-only button. `aria-label` is required — will throw in development if omitted.
- *
- * @example
- * ```tsx
- * <Tooltip label="Add to wishlist">
- *   <IconButton aria-label="Add to wishlist" icon={<HeartIcon />} onClick={handleWishlist} />
- * </Tooltip>
- * ```
- */
-declare function IconButton({ size, variant, className, icon, children, ...props }: IconButtonProps): react_jsx_runtime.JSX.Element;
-
-declare const VARIANTS: {
-    readonly default: "text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-200 transition-colors";
-    readonly muted: "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors";
-    readonly underline: "text-primary-600 dark:text-primary-400 underline hover:no-underline transition-all";
-    readonly none: "";
-};
-interface TextLinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement> {
-    href: string;
-    children: React$1.ReactNode;
-    variant?: keyof typeof VARIANTS;
-    /**
-     * Set to true to render a plain `<a>` targeting "_blank" with rel="noopener noreferrer".
-     * Defaults to false — renders a Next.js `<Link>` for SPA navigation.
-     */
-    external?: boolean;
-}
-/**
- * Styled anchor wrapper. Uses `next/link` for internal navigation and
- * a plain `<a>` for external links.
- *
- * @example
- * ```tsx
- * <TextLink href="/products">View all products</TextLink>
- * <TextLink href="https://example.com" external>External site</TextLink>
- * ```
- */
-declare function TextLink({ href, children, variant, external, className, ...props }: TextLinkProps): react_jsx_runtime.JSX.Element;
-
-interface TooltipProps {
-    /** Text shown in the tooltip bubble */
-    label: string;
-    /** Single child element — must accept mouse/focus events */
-    children: React$1.ReactElement;
-    /** Which side to render the tooltip on (default: "top") */
-    side?: "top" | "bottom" | "left" | "right";
-    /** Delay before showing tooltip in ms (default: 400) */
-    delay?: number;
-    /**
-     * Enable long-press on touch devices to show a bottom-sheet tooltip panel.
-     * Designed for mobile where hover is not available. Default: true.
-     */
-    mobileSheet?: boolean;
-    /**
-     * Duration in ms to hold touch before the mobile sheet opens. Default: 500.
-     */
-    longPressDelay?: number;
-}
-/**
- * Tooltip wrapper. Injects `aria-label` into the child if not already present,
- * and shows a visible label bubble on hover/focus (desktop) or long-press
- * (mobile — opens an accessible bottom-sheet panel).
- *
- * @example
- * ```tsx
- * <Tooltip label="Add to wishlist">
- *   <IconButton aria-label="Add to wishlist" icon={<HeartIcon />} onClick={handleWishlist} />
- * </Tooltip>
- * ```
- */
-declare function Tooltip({ label, children, side, delay, mobileSheet, longPressDelay, }: TooltipProps): react_jsx_runtime.JSX.Element;
-
-interface AccordionProps {
-    /** Legacy simple mode: renders a native details/summary accordion */
-    title?: React$1.ReactNode;
-    /** Legacy simple mode open state */
-    open?: boolean;
-    /** Legacy simple mode title styling */
-    titleClassName?: string;
-    /** Legacy simple mode content styling */
-    contentClassName?: string;
-    /** Controlled/list mode: single or multiple expanded items */
-    type?: "single" | "multiple";
-    defaultValue?: string | string[];
-    value?: string | string[];
-    onChange?: (value: string | string[]) => void;
-    className?: string;
-    children?: React$1.ReactNode;
-}
-interface AccordionItemProps {
-    value: string;
-    title: React$1.ReactNode;
-    disabled?: boolean;
-    className?: string;
-    children?: React$1.ReactNode;
-}
-declare function Accordion({ title, children, open, className, titleClassName, contentClassName, type, defaultValue, value, onChange, }: AccordionProps): react_jsx_runtime.JSX.Element;
-declare function AccordionItem({ value, title, disabled, className, children, }: AccordionItemProps): react_jsx_runtime.JSX.Element;
-
-interface FormProps extends React$1.FormHTMLAttributes<HTMLFormElement> {
-    children: React$1.ReactNode;
-}
-/**
- * Semantic `<form>` wrapper. Passes all standard form attributes through.
- * Use with `react-hook-form`:
- *
- * ```tsx
- * const { handleSubmit } = useForm();
- * <Form onSubmit={handleSubmit(onSubmit)}>
- *   <FormGrid>...</FormGrid>
- *   <Button type="submit">Submit</Button>
- * </Form>
- * ```
- */
-declare function Form({ children, className, ...props }: FormProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Badge — compact label with ring border variants for status, roles, and categories.
- *
- * Extracted from src/components/ui/Badge.tsx for @mohasinac/ui.
- * Theme values inlined from THEME_CONSTANTS.badge and THEME_CONSTANTS.colors.badge.
- */
-declare const BADGE_CLASSES: {
-    readonly active: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-400/20";
-    readonly inactive: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-zinc-100 text-zinc-600 ring-1 ring-zinc-500/10 dark:bg-slate-800 dark:text-zinc-400 dark:ring-zinc-400/20";
-    readonly pending: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-300 dark:ring-amber-400/20";
-    readonly approved: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-400/20";
-    readonly rejected: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-rose-50 text-rose-700 ring-1 ring-rose-600/20 dark:bg-rose-900/30 dark:text-rose-300 dark:ring-rose-400/20";
-    readonly success: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20 dark:bg-emerald-900/30 dark:text-emerald-300 dark:ring-emerald-400/20";
-    readonly warning: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-amber-50 text-amber-700 ring-1 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-300 dark:ring-amber-400/20";
-    readonly danger: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-rose-50 text-rose-700 ring-1 ring-rose-600/20 dark:bg-rose-900/30 dark:text-rose-300 dark:ring-rose-400/20";
-    readonly info: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-sky-50 text-sky-700 ring-1 ring-sky-600/20 dark:bg-sky-900/30 dark:text-sky-300 dark:ring-sky-400/20";
-    readonly admin: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-purple-50 text-purple-700 ring-1 ring-purple-600/20 dark:bg-purple-900/30 dark:text-purple-300 dark:ring-purple-400/20";
-    readonly moderator: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-sky-50 text-sky-700 ring-1 ring-sky-600/20 dark:bg-sky-900/30 dark:text-sky-300 dark:ring-sky-400/20";
-    readonly seller: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-teal-50 text-teal-700 ring-1 ring-teal-600/20 dark:bg-teal-900/30 dark:text-teal-300 dark:ring-teal-400/20";
-    readonly user: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-zinc-100 text-zinc-700 ring-1 ring-zinc-500/10 dark:bg-slate-800 dark:text-zinc-300 dark:ring-zinc-400/20";
-    readonly default: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-zinc-100 text-zinc-700 ring-1 ring-zinc-500/10 dark:bg-slate-800 dark:text-zinc-300 dark:ring-zinc-400/20";
-    readonly primary: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300";
-    readonly secondary: "inline-flex items-center gap-1 px-2.5 py-0.5 text-xs font-semibold rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/50 dark:text-primary-300";
-};
-type BadgeVariant = keyof typeof BADGE_CLASSES;
-interface BadgeProps {
-    children: React$1.ReactNode;
-    variant?: BadgeVariant;
-    className?: string;
-}
-declare function Badge({ children, variant, className, }: BadgeProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Alert — flexible alert/notification with variant icons and optional dismiss.
- *
- * Extracted from src/components/feedback/Alert.tsx for @mohasinac/ui.
- * Theme values inlined from THEME_CONSTANTS.colors.alert and THEME_CONSTANTS.colors.button.
- */
-declare const ALERT_STYLES: {
-    readonly info: {
-        readonly container: "bg-sky-50 border-sky-200/80 dark:bg-sky-950/30 dark:border-sky-800/50";
-        readonly icon: "text-sky-600 dark:text-sky-400";
-        readonly title: "text-sky-900 dark:text-sky-200";
-        readonly text: "text-sky-800 dark:text-sky-300";
-    };
-    readonly success: {
-        readonly container: "bg-emerald-50 border-emerald-200/80 dark:bg-emerald-950/30 dark:border-emerald-800/50";
-        readonly icon: "text-emerald-600 dark:text-emerald-400";
-        readonly title: "text-emerald-900 dark:text-emerald-200";
-        readonly text: "text-emerald-800 dark:text-emerald-300";
-    };
-    readonly warning: {
-        readonly container: "bg-amber-50 border-amber-200/80 dark:bg-amber-950/30 dark:border-amber-800/50";
-        readonly icon: "text-amber-600 dark:text-amber-400";
-        readonly title: "text-amber-900 dark:text-amber-200";
-        readonly text: "text-amber-800 dark:text-amber-300";
-    };
-    readonly error: {
-        readonly container: "bg-red-50 border-red-200/80 dark:bg-red-950/30 dark:border-red-800/50";
-        readonly icon: "text-red-600 dark:text-red-400";
-        readonly title: "text-red-900 dark:text-red-200";
-        readonly text: "text-red-800 dark:text-red-300";
-    };
-};
-interface AlertProps {
-    children: React$1.ReactNode;
-    variant?: keyof typeof ALERT_STYLES;
-    title?: string;
-    onClose?: () => void;
-    className?: string;
-}
-declare function Alert({ children, variant, title, onClose, className, }: AlertProps): react_jsx_runtime.JSX.Element;
-
-interface DividerProps {
-    label?: string;
-    orientation?: "horizontal" | "vertical";
-    className?: string;
-}
-declare function Divider({ label, orientation, className, }: DividerProps): react_jsx_runtime.JSX.Element;
-
-interface ProgressProps {
-    value: number;
-    max?: number;
-    variant?: "primary" | "success" | "warning" | "error";
-    size?: "sm" | "md" | "lg";
-    label?: string;
-    showValue?: boolean;
-    className?: string;
-}
-declare function Progress({ value, max, variant, size, label, showValue, className, }: ProgressProps): react_jsx_runtime.JSX.Element;
-interface IndeterminateProgressProps {
-    variant?: "primary" | "success" | "warning" | "error";
-    size?: "sm" | "md" | "lg";
-    label?: string;
-    className?: string;
-}
-declare function IndeterminateProgress({ variant, size, label, className, }: IndeterminateProgressProps): react_jsx_runtime.JSX.Element;
-
-/**
- * A single column definition for data tables.
- * Defined here in contracts so feat-* packages can export default column sets
- * without cross-importing each other.
- *
- * @example
- * // feat-products can export default product columns
- * export const productAdminColumns: TableColumn<ProductItem>[] = [...];
- *
- * // Consumer app extends with their richer type
- * const columns: TableColumn<ProductDocument>[] = [
- *   ...productAdminColumns as TableColumn<ProductDocument>[],
- *   { key: "brand", header: "Brand", render: (p) => p.brand },
- * ];
- */
-interface TableColumn<T = Record<string, unknown>> {
-    /** Field key (used for sorting, cell lookup) */
-    key: string;
-    /** Column header label */
-    header: string;
-    /** Whether clicking the header fires an onSort callback */
-    sortable?: boolean;
-    /** Custom cell renderer. Return value is rendered as-is (React.ReactNode in JSX context). */
-    render?: (row: T) => unknown;
-    /** Additional className for the `<th>` and `<td>` */
-    className?: string;
-    /** CSS width / Tailwind width class applied to the column. */
-    width?: string;
-    /** Hide this column from the rendered table (keeps it in the array for export) */
-    hidden?: boolean;
-}
-
-/**
- * Table, pagination and sticky-header configuration types.
- *
- * Every table/list view in every feat-* package accepts these config objects.
- * Apps can spread-merge over the exported defaults to override only what they need:
- *
- * @example
- * // App-level base config (one file, reused everywhere)
- * import { DEFAULT_TABLE_CONFIG, DEFAULT_PAGINATION_CONFIG } from "@mohasinac/contracts";
- *
- * export const myTableConfig: TableConfig = {
- *   ...DEFAULT_TABLE_CONFIG,
- *   pageSize: 10,
- *   showViewToggle: true,
- * };
- *
- * export const myPaginationConfig: PaginationConfig = {
- *   ...DEFAULT_PAGINATION_CONFIG,
- *   perPage: 10,
- *   showPageSizeSelector: true,
- *   pageSizeOptions: [10, 25, 50],
- * };
- *
- * // In a component
- * <DataTable tableConfig={myTableConfig} paginationConfig={myPaginationConfig} ... />
- *
- * // In a hook
- * const { products } = useProducts(params, { paginationConfig: myPaginationConfig });
- */
-/**
- * Composable pagination configuration.
- * All fields are optional so apps can spread-merge over the defaults.
- */
-interface PaginationConfig {
-    /** Items per page sent to the API. Default: 20 */
-    perPage?: number;
-    /** Hard cap on perPage (for page-size selector). Default: 100 */
-    maxPerPage?: number;
-    /** Show a page-size selector UI element. Default: false */
-    showPageSizeSelector?: boolean;
-    /** Options for the page-size selector. Default: [10, 20, 50, 100] */
-    pageSizeOptions?: number[];
-    /** Show first / last page buttons. Default: true */
-    showFirstLast?: boolean;
-    /** Show previous / next buttons. Default: true */
-    showPrevNext?: boolean;
-    /** Max visible page number buttons before ellipsis. Default: 7 */
-    maxVisible?: number;
-    /** Size variant for pagination button sizing. Default: "md" */
-    size?: "sm" | "md" | "lg";
-}
-declare const DEFAULT_PAGINATION_CONFIG: Required<PaginationConfig>;
-/**
- * Sticky header configuration for data tables.
- * When `enabled` is true the thead is pinned while the tbody scrolls.
- */
-interface StickyConfig {
-    /** Pin the header while the body scrolls. Default: false */
-    enabled?: boolean;
-    /** Tailwind `top-*` class applied to the sticky thead. Default: "top-0" */
-    topOffset?: string;
-    /** Max height of the scrollable container. Default: "600px" */
-    maxHeight?: string;
-    /** z-index of the sticky header. Default: 10 */
-    zIndex?: number;
-}
-declare const DEFAULT_STICKY_CONFIG: Required<StickyConfig>;
-/** View mode options for DataTable. */
-type TableViewMode = "table" | "grid" | "list";
-/**
- * Composable table configuration.
- * Pass a Partial<TableConfig> to any DataTable / admin-list hook; values are
- * deep-merged with DEFAULT_TABLE_CONFIG at the use site.
- */
-interface TableConfig {
-    /** Items shown per page (internal pagination). Default: 20 */
-    pageSize?: number;
-    /** Sticky header behaviour. Default: disabled */
-    sticky?: StickyConfig;
-    /** Alternate row background colour. Default: false */
-    striped?: boolean;
-    /** Enable row checkbox selection. Default: false */
-    selectable?: boolean;
-    /** Show view-mode toggle (table / grid / list). Default: false */
-    showViewToggle?: boolean;
-    /** Default view mode. Default: "table" */
-    defaultViewMode?: TableViewMode;
-    /** Pagination widget configuration. */
-    pagination?: PaginationConfig;
-}
-declare const DEFAULT_TABLE_CONFIG: {
-    pageSize: number;
-    sticky: Required<StickyConfig>;
-    striped: boolean;
-    selectable: boolean;
-    showViewToggle: boolean;
-    defaultViewMode: TableViewMode;
-    pagination: Required<PaginationConfig>;
-};
-/**
- * Utility: merge a Partial<TableConfig> over the defaults.
- * Performs a shallow merge at the top level and deep merge for nested objects.
- */
-declare function mergeTableConfig(override?: Partial<TableConfig>): typeof DEFAULT_TABLE_CONFIG;
-
-/**
- * Pagination — smart ellipsis pagination with prev/next chevrons.
- *
- * Accepts either individual props OR a `paginationConfig` object
- * (merged with DEFAULT_PAGINATION_CONFIG). Individual props take precedence.
- */
-interface PaginationProps {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-    /**
-     * Composable pagination config. Merged with DEFAULT_PAGINATION_CONFIG.
-     * Individual flat props override this.
-     */
-    paginationConfig?: Partial<PaginationConfig>;
-    /** Max visible page buttons before ellipsis kicks in. Default: 7 */
-    maxVisible?: number;
-    showFirstLast?: boolean;
-    showPrevNext?: boolean;
-    disabled?: boolean;
-    size?: "sm" | "md" | "lg";
-    className?: string;
-}
-declare function Pagination({ currentPage, totalPages, onPageChange, paginationConfig, maxVisible: maxVisibleProp, showFirstLast: showFirstLastProp, showPrevNext: showPrevNextProp, disabled, size: sizeProp, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
-
-/**
- * StatusBadge — semantic color map for order/payment/review/ticket status strings.
- *
- * Wraps @mohasinac/ui Badge with a pre-defined status → variant mapping.
- * No app-specific imports.
- */
-type OrderStatus = "pending" | "confirmed" | "processing" | "shipped" | "delivered" | "cancelled" | "refunded" | "failed";
-type PaymentStatus = "pending" | "paid" | "failed" | "refunded" | "partially_refunded";
-type ReviewStatus = "pending" | "approved" | "rejected";
-type TicketStatus = "open" | "in_progress" | "resolved" | "closed";
-type GenericStatus = "active" | "inactive" | "pending" | "approved" | "rejected" | "success" | "warning" | "danger" | "info";
-type StatusBadgeStatus = OrderStatus | PaymentStatus | ReviewStatus | TicketStatus | GenericStatus;
-interface StatusBadgeProps {
-    status: StatusBadgeStatus;
-    label?: string;
-    className?: string;
-}
-declare function StatusBadge({ status, label, className }: StatusBadgeProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Modal — centered dialog with backdrop, multiple sizes, ESC-to-close, and scroll lock.
- *
- * Standalone @mohasinac/ui primitive. No app-specific imports.
- * Renders via React Portal for correct z-index layering.
- */
-interface ModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    title?: string;
-    children: React$1.ReactNode;
-    size?: "sm" | "md" | "lg" | "xl" | "full";
-    showCloseButton?: boolean;
-    /** Additional classNames for the modal panel */
-    className?: string;
-}
-declare function Modal({ isOpen, onClose, title, children, size, showCloseButton, className, }: ModalProps): React$1.ReactPortal | null;
-
-/**
- * Drawer — slide-in panel from left, right, or bottom.
- *
- * Standalone @mohasinac/ui primitive. No app-specific imports.
- * Bottom variant gets `rounded-t-2xl` and can be swipe-dismissed via drag handle.
- */
-interface DrawerProps {
-    isOpen: boolean;
-    onClose: () => void;
-    title?: string;
-    children: React$1.ReactNode;
-    footer?: React$1.ReactNode;
-    side?: "left" | "right" | "bottom";
-    /** Width for left/right drawers. Default: 'md' */
-    size?: "sm" | "md" | "lg" | "full";
-    showCloseButton?: boolean;
-    className?: string;
-}
-declare function Drawer({ isOpen, onClose, title, children, footer, side, size, showCloseButton, className, }: DrawerProps): React$1.ReactPortal | null;
-
-/**
- * Select — accessible combobox with label, error state, and disabled support.
- *
- * Standalone @mohasinac/ui primitive. No app-specific imports.
- */
-interface SelectOption<V = string> {
-    label: string;
-    value: V;
-    disabled?: boolean;
-}
-interface SelectProps<V extends string = string> {
-    options: SelectOption<V>[];
-    value?: V;
-    onChange?: (value: V) => void;
-    placeholder?: string;
-    label?: string;
-    error?: string;
-    disabled?: boolean;
-    required?: boolean;
-    className?: string;
-    id?: string;
-}
-declare function Select<V extends string = string>({ options, value, onChange, placeholder, label, error, disabled, required, className, id: externalId, }: SelectProps<V>): react_jsx_runtime.JSX.Element;
-
-type InputProps = React$1.InputHTMLAttributes<HTMLInputElement>;
-declare function Input({ className, ...props }: InputProps): react_jsx_runtime.JSX.Element;
-
-type TextareaProps = React$1.TextareaHTMLAttributes<HTMLTextAreaElement>;
-declare function Textarea({ className, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;
-
-interface SliderProps {
-    value?: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    onChange?: (value: number) => void;
-    className?: string;
-    disabled?: boolean;
-}
-declare function Slider({ value, min, max, step, onChange, className, disabled, }: SliderProps): react_jsx_runtime.JSX.Element;
-
-/**
- * StarRating — 0–5 star display/interactive rating.
- *
- * Standalone @mohasinac/ui primitive. No app-specific imports.
- * Use `readOnly` for display, omit it for interactive mode with hover preview.
- */
-interface StarRatingProps {
-    value?: number;
-    onChange?: (value: number) => void;
-    max?: number;
-    size?: "sm" | "md" | "lg";
-    readOnly?: boolean;
-    className?: string;
-    /** Accessible label describing what is being rated */
-    label?: string;
-}
-declare function StarRating({ value, onChange, max, size, readOnly, className, label, }: StarRatingProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Breadcrumb — accessible navigation trail with ChevronRight separators.
- *
- * Standalone @mohasinac/ui primitive. No app-specific imports.
- * Last item is displayed with `font-medium` (non-link, current page).
- */
-interface BreadcrumbItem {
-    label: string;
-    href?: string;
-}
-interface BreadcrumbProps {
-    items: BreadcrumbItem[];
-    className?: string;
-}
-declare function Breadcrumb({ items, className }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
-
-/**
- * ImageLightbox — full-screen image overlay with keyboard navigation.
- *
- * Standalone @mohasinac/ui primitive. No app-specific imports.
- * Navigation: ← / → arrow keys, Esc to close. Displays item counter.
- *
- * Uses a standard <img> tag for framework portability.
- * In a Next.js app, callers may swap src with a blurDataURL if desired.
- */
-interface LightboxImage {
-    src: string;
-    alt?: string;
-    caption?: string;
-}
-interface ImageLightboxProps {
-    images: LightboxImage[];
-    /** The index to open. Pass `null` or `-1` to close. */
-    activeIndex: number | null;
-    onClose: () => void;
-    onNavigate?: (index: number) => void;
-}
-declare function ImageLightbox({ images, activeIndex, onClose, onNavigate, }: ImageLightboxProps): React$1.ReactPortal | null;
-
-interface TagInputProps {
-    value: string[];
-    onChange: (tags: string[]) => void;
-    disabled?: boolean;
-    label?: string;
-    placeholder?: string;
-    className?: string;
-    helperText?: string;
-}
-declare function TagInput({ value, onChange, disabled, label, placeholder, className, helperText, }: TagInputProps): react_jsx_runtime.JSX.Element;
-
-interface StepperNavStep {
-    number: number;
-    label: string;
-}
-interface StepperNavProps {
-    steps: StepperNavStep[];
-    currentStep: number;
-    className?: string;
-}
-declare function StepperNav({ steps, currentStep, className }: StepperNavProps): react_jsx_runtime.JSX.Element;
-
-/** Three layout modes for listing pages. Stored in URL as ?view=card|fluid|list */
-type ViewMode$1 = "card" | "fluid" | "list";
-interface ViewToggleLabels {
-    card: string;
-    fluid: string;
-    list: string;
-    toolbar?: string;
-}
-interface ViewToggleProps {
-    value: ViewMode$1;
-    onChange: (mode: ViewMode$1) => void;
-    labels?: ViewToggleLabels;
-    className?: string;
-}
-declare function ViewToggle({ value, onChange, labels, className, }: ViewToggleProps): react_jsx_runtime.JSX.Element;
-
-interface RatingDisplayProps {
-    rating: number;
-    maxRating?: number;
-    size?: "sm" | "md" | "lg";
-    showValue?: boolean;
-    className?: string;
-}
-declare function RatingDisplay({ rating, maxRating, size, showValue, className, }: RatingDisplayProps): react_jsx_runtime.JSX.Element;
-
-interface PriceDisplayProps {
-    amount: number;
-    currency?: string;
-    originalAmount?: number;
-    variant?: "compact" | "detail";
-    className?: string;
-}
-declare function PriceDisplay({ amount, currency, originalAmount, variant, className, }: PriceDisplayProps): react_jsx_runtime.JSX.Element;
-
-interface StatItem {
-    label: string;
-    value: number | string;
-    icon?: React.ReactNode;
-    colorClass?: string;
-}
-interface StatsGridProps {
-    stats: StatItem[];
-    columns?: 2 | 3 | 4;
-    className?: string;
-}
-declare function StatsGrid({ stats, columns, className }: StatsGridProps): react_jsx_runtime.JSX.Element;
-
-interface SummaryLine {
-    label: string;
-    value: string;
-    muted?: boolean;
-}
-interface SummaryCardProps {
-    lines: SummaryLine[];
-    total: {
-        label: string;
-        value: string;
-    };
-    action?: React.ReactNode;
-    className?: string;
-}
-declare function SummaryCard({ lines, total, action, className, }: SummaryCardProps): react_jsx_runtime.JSX.Element;
-
-interface CountdownDisplayProps {
-    targetDate: Date;
-    format?: "dhms" | "hms" | "auto";
-    expiredLabel?: string;
-    className?: string;
-}
-declare function CountdownDisplay({ targetDate, format, expiredLabel, className, }: CountdownDisplayProps): react_jsx_runtime.JSX.Element;
-
-interface ItemRowProps {
-    thumbnail?: React.ReactNode;
-    title: string;
-    subtitle?: string;
-    rightSlot?: React.ReactNode;
-    actions?: React.ReactNode;
-    className?: string;
-}
-declare function ItemRow({ thumbnail, title, subtitle, rightSlot, actions, className, }: ItemRowProps): react_jsx_runtime.JSX.Element;
-
-interface PerViewConfig {
-    base?: number;
-    xs?: number;
-    sm?: number;
-    md?: number;
-    lg?: number;
-    xl?: number;
-    "2xl"?: number;
-}
-interface HorizontalScrollerProps<T = unknown> {
-    children?: ReactNode;
-    className?: string;
-    gap?: number;
-    snapToItems?: boolean;
-    showArrows?: boolean;
-    arrowSize?: "sm" | "md" | "lg";
-    showScrollbar?: boolean;
-    showFadeEdges?: boolean;
-    scrollContainerRef?: RefObject<HTMLDivElement | null>;
-    onScroll?: () => void;
-    items?: T[];
-    renderItem?: (item: T, index: number) => ReactNode;
-    keyExtractor?: (item: T, index: number) => string;
-    perView?: number | PerViewConfig;
-    rows?: number;
-    autoScroll?: boolean;
-    autoScrollInterval?: number;
-    minItemWidth?: number;
-    pauseOnHover?: boolean;
-    itemClassName?: string;
-}
-declare function HorizontalScroller<T = unknown>({ children, className, gap, snapToItems, showArrows, arrowSize, showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows, autoScroll, autoScrollInterval, minItemWidth, itemClassName, }: HorizontalScrollerProps<T>): react_jsx_runtime.JSX.Element;
-
-interface TabStripTab {
-    key: string;
-    label: string;
-    badge?: number;
-    disabled?: boolean;
-}
-interface TabStripProps {
-    tabs: TabStripTab[];
-    activeKey: string;
-    onChange: (key: string) => void;
-    /** Minimum width per tab in pixels (default: FLUID_GRID_MIN_WIDTHS.tabItem = 100) */
-    minTabWidth?: number;
-    className?: string;
-}
-/**
- * `TabStrip` — a horizontally scrollable tab bar that shows as many tabs as
- * fit the container width. Arrow buttons appear automatically when tabs overflow.
- * The active tab is always scrolled into the visible window.
- *
- * @example
- * ```tsx
- * <TabStrip
- *   tabs={[
- *     { key: "all", label: "All" },
- *     { key: "active", label: "Active", badge: 3 },
- *     { key: "archived", label: "Archived", disabled: true },
- *   ]}
- *   activeKey={activeTab}
- *   onChange={setActiveTab}
- * />
- * ```
- */
-declare function TabStrip({ tabs, activeKey, onChange, minTabWidth, className, }: TabStripProps): react_jsx_runtime.JSX.Element;
-
-interface FormGridProps {
-    children: ReactNode;
-    /** Minimum field width in pixels before wrapping to a new row (default: 280) */
-    minFieldWidth?: number;
-    /** Gap between fields in pixels (default: 16) */
-    gap?: number;
-    className?: string;
-}
-interface FormFieldProps {
-    children: ReactNode;
-    /**
-     * - `"auto"` — fluid: `flex-1 min-w-[280px]` (default)
-     * - `"full"` — always full width
-     * - `"half"` — fixed 50%, min-width still respected
-     */
-    span?: "auto" | "full" | "half";
-    className?: string;
-}
-/**
- * `FormGrid` — a flex-wrap container that naturally transitions from
- * multi-column to single-column without media queries.
- *
- * **Column count at given widths** (default minFieldWidth=280, gap=16):
- * | Container | Columns |
- * |-----------|---------|
- * | 360 px    | 1       |
- * | 600 px    | 2       |
- * | 900 px    | 3       |
- * | 1200 px   | 4       |
- *
- * @example
- * ```tsx
- * <FormGrid>
- *   <FormField><Label>First name</Label><Input name="firstName" /></FormField>
- *   <FormField><Label>Last name</Label><Input name="lastName" /></FormField>
- *   <FormField span="full"><Label>Bio</Label><Textarea name="bio" /></FormField>
- * </FormGrid>
- * ```
- */
-declare function FormGrid({ children, minFieldWidth, gap, className, }: FormGridProps): react_jsx_runtime.JSX.Element;
-/**
- * `FormField` — a single form field slot inside a `FormGrid`.
- * Grows/shrinks to fill available space while respecting `minFieldWidth`.
- */
-declare function FormField({ children, span, className, }: FormFieldProps): react_jsx_runtime.JSX.Element;
-
-interface DescriptionFieldProps {
-    label: string;
-    value: string;
-    /** Force full-width regardless of value length (default: auto-detect by length) */
-    fullWidth?: boolean;
-    className?: string;
-}
-/**
- * `DescriptionField` — renders a label + value pair using the appropriate
- * text style. Short values render inline-ish (`flex-1 min-w-[280px]`);
- * long values (> 80 chars) take full width with `prose` wrapping.
- *
- * Designed for use inside `FormGrid` or `<Row as="dl">` definition lists.
- *
- * @example
- * ```tsx
- * <Row as="dl" wrap gap="md">
- *   <DescriptionField label="Store name" value="My Amazing Store" />
- *   <DescriptionField label="Description" value={longDescription} />
- * </Row>
- * ```
- */
-declare function DescriptionField({ label, value, fullWidth, className, }: DescriptionFieldProps): react_jsx_runtime.JSX.Element;
-
-interface ActiveFilter {
-    key: string;
-    label: string;
-    value: string;
-}
-interface ActiveFilterChipsProps {
-    filters: ActiveFilter[];
-    onRemove: (key: string) => void;
-    onClearAll: () => void;
-    className?: string;
-    clearAllLabel?: string;
-}
-declare function ActiveFilterChips({ filters, onRemove, onClearAll, className, clearAllLabel, }: ActiveFilterChipsProps): react_jsx_runtime.JSX.Element | null;
-
-interface SortOption {
-    label: string;
-    value: string;
-}
-interface SortDropdownProps {
-    value?: string;
-    onChange: (value: string) => void;
-    options: SortOption[];
-    label?: string;
-    className?: string;
-}
-declare function SortDropdown({ value, onChange, options, label, className, }: SortDropdownProps): react_jsx_runtime.JSX.Element;
-
-interface TablePaginationLabels {
-    paginationLabel?: string;
-    showing?: string;
-    of?: string;
-    results?: string;
-    perPage?: string;
-}
-interface TablePaginationProps {
-    currentPage: number;
-    totalPages: number;
-    pageSize: number;
-    total: number;
-    onPageChange: (page: number) => void;
-    onPageSizeChange?: (pageSize: number) => void;
-    pageSizeOptions?: readonly number[];
-    isLoading?: boolean;
-    className?: string;
-    compact?: boolean;
-    labels?: TablePaginationLabels;
-}
-declare function TablePagination({ currentPage, totalPages, pageSize, total, onPageChange, onPageSizeChange, pageSizeOptions, isLoading, className, compact, labels, }: TablePaginationProps): react_jsx_runtime.JSX.Element;
-
-/**
- * Layout Primitives — Container, Stack, Row, Grid
- *
- * Thin component wrappers that turn semantic prop names into the correct
- * Tailwind class strings from the app's THEME_CONSTANTS token map.
- * Eliminates repeated inline class strings like "grid grid-cols-1 sm:grid-cols-2
- * lg:grid-cols-3 gap-4" and "flex flex-row items-center justify-between gap-2".
- *
- * Token maps are inlined here (like UI_THEME in Typography.tsx) so the package
- * stays independent of the host app's @/constants import path.
- *
- * @example
- * ```tsx
- * // Before
- * <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
- * <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
- * <div className="flex flex-row items-center justify-between gap-2">
- * <div className="flex flex-col gap-4">
- *
- * // After
- * <Container>
- * <Grid cols={3} gap="md">
- * <Row justify="between" gap="sm">
- * <Stack gap="md">
- * ```
- */
-/**
- * Gap tokens — maps to `gap-*` Tailwind classes.
- * Mirrors THEME_CONSTANTS.spacing.gap in the host app.
- */
-declare const GAP_MAP: {
-    readonly none: "";
-    readonly px: "gap-px";
-    readonly xs: "gap-1";
-    readonly sm: "gap-2";
-    readonly "2.5": "gap-2.5";
-    readonly "3": "gap-3";
-    readonly md: "gap-4";
-    readonly "5": "gap-5";
-    readonly lg: "gap-6";
-    readonly xl: "gap-8";
-    readonly "2xl": "gap-12";
-};
-type GapKey = keyof typeof GAP_MAP;
-/**
- * Page container sizes.
- * Mirrors THEME_CONSTANTS.page.container in the host app.
- */
-declare const CONTAINER_MAP: {
-    /** `max-w-3xl` — blog posts, legal / policy pages */
-    readonly sm: "max-w-3xl mx-auto px-4 sm:px-6 lg:px-8";
-    /** `max-w-4xl` — narrow content, contact, about */
-    readonly md: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8";
-    /** `max-w-5xl` — medium content, checkout, help */
-    readonly lg: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8";
-    /** `max-w-6xl` — product detail, cart */
-    readonly xl: "max-w-6xl mx-auto px-4 sm:px-6 lg:px-8";
-    /** `max-w-7xl` — main content grids (default) */
-    readonly "2xl": "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8";
-    /** `max-w-screen-2xl` — full-bleed wide content */
-    readonly full: "max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8";
-    /** `max-w-screen-2xl` — wide store/seller layouts (compact px) */
-    readonly wide: "max-w-screen-2xl mx-auto px-4 sm:px-6";
-    /** `max-w-[1920px]` — ultra-wide / 4K displays */
-    readonly ultra: "max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8";
-};
-type ContainerSize = keyof typeof CONTAINER_MAP;
-/**
- * Responsive grid column presets.
- * Mirrors THEME_CONSTANTS.grid in the host app.
- */
-declare const GRID_MAP: {
-    /** Single column */
-    readonly 1: "grid grid-cols-1";
-    /** 1 → 2 */
-    readonly 2: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2";
-    /** 1 → 2 → 3 → 4 on widescreen */
-    readonly 3: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4";
-    /** 1 → 2 → 3 → 4 → 5 on widescreen */
-    readonly 4: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5";
-    /** 1 → 2 → 3 → 4 → 5 */
-    readonly 5: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5";
-    /** 2 → 3 → 4 → 5 → 6 */
-    readonly 6: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6";
-    /**
-     * Generic card grid — 1 col on portrait mobile → 5 on ultrawide.
-     * Starts at 1 so product cards are readable even on 320 px handsets.
-     */
-    readonly cards: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5";
-    /** Auto-fill product cards — min 200 px */
-    readonly productCards: "grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-6";
-    /** Auto-fill product cards (compact) — min 220 px */
-    readonly productCardsCompact: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4";
-    /** Auto-fill store cards — min 220 px */
-    readonly storeCards: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-6";
-    /** Auto-fill category tiles — min 130 px */
-    readonly categoryCards: "grid grid-cols-[repeat(auto-fill,minmax(130px,1fr))] gap-4";
-    /** Auto-fill coupon/promo cards — min 264 px */
-    readonly couponCards: "grid grid-cols-[repeat(auto-fill,minmax(264px,1fr))] gap-6";
-    /** Auto-fill address / wide cards — min 300 px */
-    readonly addressCards: "grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4";
-    /** Auto-fill KPI/stat tiles — min 180 px */
-    readonly statTiles: "grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-4";
-    /** Auto-fill account nav tiles — min 160 px */
-    readonly navTiles: "grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4";
-    /** Equal halves on md+ */
-    readonly halves: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2";
-    /** 2fr / 1fr split on md+ */
-    readonly twoThird: "grid grid-cols-1 md:grid-cols-[2fr_1fr]";
-    /** 1fr / 2fr split on md+ */
-    readonly oneThird: "grid grid-cols-1 md:grid-cols-[1fr_2fr]";
-    /** Fixed 280px left sidebar + 1fr on lg+ */
-    readonly sidebar: "grid grid-cols-1 lg:grid-cols-[280px_1fr]";
-    /** 1fr + fixed 280px right sidebar on lg+ */
-    readonly sidebarRight: "grid grid-cols-1 lg:grid-cols-[1fr_280px]";
-    /** Fixed 320px left sidebar + 1fr on lg+ (admin layout) */
-    readonly sidebarWide: "grid grid-cols-1 lg:grid-cols-[320px_1fr]";
-    /** Product detail triplet: gallery | info | actions sidebar */
-    readonly productDetailTriplet: "grid grid-cols-1 lg:grid-cols-[1fr_1fr_280px] xl:grid-cols-[1fr_1fr_300px] 2xl:grid-cols-[1fr_1fr_320px] gap-6 lg:gap-8";
-    /** CSS auto-fill, min 200px columns */
-    readonly autoSm: "grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))]";
-    /** CSS auto-fill, min 280px columns */
-    readonly autoMd: "grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))]";
-    /** CSS auto-fill, min 360px columns */
-    readonly autoLg: "grid grid-cols-[repeat(auto-fill,minmax(360px,1fr))]";
-};
-type GridCols = keyof typeof GRID_MAP;
-declare const ITEMS_MAP: {
-    readonly start: "items-start";
-    readonly center: "items-center";
-    readonly end: "items-end";
-    readonly stretch: "items-stretch";
-    readonly baseline: "items-baseline";
-};
-type ItemsAlign = keyof typeof ITEMS_MAP;
-declare const JUSTIFY_MAP: {
-    readonly start: "justify-start";
-    readonly center: "justify-center";
-    readonly end: "justify-end";
-    readonly between: "justify-between";
-    readonly around: "justify-around";
-    readonly evenly: "justify-evenly";
-};
-type JustifyContent = keyof typeof JUSTIFY_MAP;
-/**
- * Page-level container with max-width + centering + responsive horizontal padding.
- * Replaces repeated `max-w-7xl mx-auto px-4 sm:px-6 lg:px-8` strings.
- *
- * @example
- * ```tsx
- * <Container>...</Container>                   // max-w-7xl (default)
- * <Container size="lg">...</Container>         // max-w-5xl
- * <Container size="full" as="main">...</Container>
- * ```
- */
-interface ContainerProps extends React$1.HTMLAttributes<HTMLElement> {
-    /**
-     * Max-width breakpoint preset.
-     * - `sm`    → `max-w-3xl`       (blog / policy)
-     * - `md`    → `max-w-4xl`       (contact / about)
-     * - `lg`    → `max-w-5xl`       (checkout / help)
-     * - `xl`    → `max-w-6xl`       (product detail / cart)
-     * - `2xl`   → `max-w-7xl`       (main content grids — **default**)
-     * - `full`  → `max-w-screen-2xl` (full-bleed)
-     * - `wide`  → `max-w-screen-2xl` (compact px, no lg step)
-     * - `ultra` → `max-w-[1920px]`  (ultra-wide / 4K displays)
-     */
-    size?: ContainerSize;
-    /** Render as a different element (e.g. `"main"`, `"section"`). Defaults to `"div"`. */
-    as?: React$1.ElementType;
-    children?: React$1.ReactNode;
-}
-declare function Container({ size, as, className, children, ...props }: ContainerProps): react_jsx_runtime.JSX.Element;
-/**
- * Vertical flex column. Use instead of `<div className="flex flex-col gap-4">`.
- *
- * @example
- * ```tsx
- * <Stack gap="sm">
- *   <Text>Line one</Text>
- *   <Text>Line two</Text>
- * </Stack>
- *
- * // As a list
- * <Stack as="ul" gap="xs">
- *   <Li>Item</Li>
- * </Stack>
- * ```
- */
-interface StackProps extends React$1.HTMLAttributes<HTMLElement> {
-    /** Space between children. Defaults to `"md"` (`gap-4`). */
-    gap?: GapKey;
-    /** Centers children on both axes (`items-center justify-center`). */
-    centered?: boolean;
-    /** Cross-axis (horizontal) alignment. Defaults to `"stretch"`. */
-    align?: Extract<ItemsAlign, "start" | "center" | "end" | "stretch">;
-    /** Render as a different element. Defaults to `"div"`. */
-    as?: React$1.ElementType;
-    children?: React$1.ReactNode;
-}
-declare function Stack({ gap, centered, align, as, className, children, ...props }: StackProps): react_jsx_runtime.JSX.Element;
-/**
- * Horizontal flex row. Use instead of `<div className="flex items-center gap-3">`.
- *
- * @example
- * ```tsx
- * <Row gap="sm" justify="between">
- *   <Heading level={3}>Title</Heading>
- *   <Button>Action</Button>
- * </Row>
- *
- * <Row gap="xs" wrap>
- *   <Badge>tag</Badge>
- *   <Badge>other</Badge>
- * </Row>
- * ```
- */
-interface RowProps extends React$1.HTMLAttributes<HTMLElement> {
-    /** Space between children. Defaults to `"md"` (`gap-4`). */
-    gap?: GapKey;
-    /** Centers children on both axes (`items-center justify-center`). */
-    centered?: boolean;
-    /** Cross-axis (vertical) alignment. Defaults to `"center"`. */
-    align?: ItemsAlign;
-    /** Main-axis (horizontal) distribution. Defaults to `"start"`. */
-    justify?: JustifyContent;
-    /** Allow children to wrap onto multiple lines. */
-    wrap?: boolean;
-    /** Render as a different element. Defaults to `"div"`. */
-    as?: React$1.ElementType;
-    children?: React$1.ReactNode;
-}
-declare function Row({ gap, centered, align, justify, wrap, as, className, children, ...props }: RowProps): react_jsx_runtime.JSX.Element;
-/**
- * Responsive CSS grid. Use instead of `<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">`.
- *
- * @example
- * ```tsx
- * <Grid cols={3} gap="md">
- *   <ProductCard />
- *   <ProductCard />
- * </Grid>
- *
- * <Grid cols="sidebar" gap="lg">
- *   <Aside>Filters</Aside>
- *   <Main>Results</Main>
- * </Grid>
- * ```
- */
-interface GridProps extends React$1.HTMLAttributes<HTMLElement> {
-    /**
-     * Column preset.
-     * - Numbers `1`–`6` → mobile-first responsive stacks
-     * - `"halves"` → equal 2-col on md+
-     * - `"sidebar"` / `"sidebarRight"` / `"sidebarWide"` → fixed+flexible splits
-     * - `"twoThird"` / `"oneThird"` → 2fr/1fr splits
-     * - `"autoSm"` / `"autoMd"` / `"autoLg"` → CSS auto-fill grids
-     * - Omit (or `undefined`) to use a raw `grid` base and supply columns via
-     *   the `className` prop directly (e.g. `className="grid-cols-2"`). Useful
-     *   for fixed non-responsive column counts (form field pairs, button rows).
-     */
-    cols?: GridCols;
-    /** Space between grid cells. Defaults to `"md"` (`gap-4`). */
-    gap?: GapKey;
-    /** Render as a different element. Defaults to `"div"`. */
-    as?: React$1.ElementType;
-    children?: React$1.ReactNode;
-}
-declare function Grid({ cols, gap, as, className, children, ...props }: GridProps): react_jsx_runtime.JSX.Element;
-
-/**
- * DataTable — generic sortable + paginated table promoted to @mohasinac/ui.
- *
- * Accepts `tableConfig` and `paginationConfig` for composable configuration.
- * Apps can spread-merge DEFAULT_TABLE_CONFIG / DEFAULT_PAGINATION_CONFIG and
- * override only the values they need, then pass the result once.
- *
- * Individual flat props (pageSize, stickyHeader, striped, …) still work and
- * take precedence over anything in tableConfig when explicitly provided.
- */
-type ViewMode = "table" | "grid" | "list";
-/**
- * Column descriptor for the DataTable component.
- * Narrows `render` to return `ReactNode` (TableColumn uses `unknown` so
- * contracts stays React-free). Fully compatible with `TableColumn<T>`.
- */
-type DataTableColumn<T> = Omit<TableColumn<T>, "render"> & {
-    render?: (item: T) => ReactNode;
-};
-interface DataTableProps<T> {
-    data: T[];
-    columns: DataTableColumn<T>[];
-    /** Derives a stable key per row. Defaults to `(item) => (item as Record<string,string>).id`. */
-    keyExtractor?: (item: T) => string;
-    onRowClick?: (item: T) => void;
-    loading?: boolean;
-    emptyMessage?: string;
-    actions?: (item: T) => ReactNode;
-    /** When true, disables internal pagination — render your own externally. Default: false */
-    externalPagination?: boolean;
-    /**
-     * Composable table configuration.
-     * Deep-merged with DEFAULT_TABLE_CONFIG. Individual flat props (pageSize,
-     * stickyHeader, etc.) override this when explicitly provided.
-     */
-    tableConfig?: Partial<TableConfig>;
-    /**
-     * Composable pagination configuration.
-     * Merged with DEFAULT_PAGINATION_CONFIG. Individual flat props override this.
-     */
-    paginationConfig?: Partial<PaginationConfig>;
-    /** Items per page. Explicit value overrides tableConfig.pageSize. Default: 20 */
-    pageSize?: number;
-    mobileCardRender?: (item: T) => ReactNode;
-    emptyState?: ReactNode;
-    emptyIcon?: ReactNode;
-    emptyTitle?: string;
-    stickyHeader?: boolean;
-    striped?: boolean;
-    showViewToggle?: boolean;
-    showTableView?: boolean;
-    viewMode?: ViewMode;
-    defaultViewMode?: ViewMode;
-    onViewModeChange?: (mode: ViewMode) => void;
-    selectable?: boolean;
-    selectedIds?: string[];
-    onSelectionChange?: (ids: string[]) => void;
-    /**
-     * Number of grid columns for card grid view.
-     * Matches Layout GRID_MAP keys: 1–6, "autoSm", "autoMd", "autoLg".
-     * Default: 6 (2→3→4→5→6 across breakpoints).
-     */
-    gridCols?: GridCols;
-    labels?: {
-        loading?: string;
-        noDataTitle?: string;
-        noDataDescription?: string;
-        actions?: string;
-        tableView?: string;
-        gridView?: string;
-        listView?: string;
-    };
-}
-declare function DataTable<T extends object>({ data, columns, keyExtractor: keyExtractorProp, onRowClick, loading, emptyMessage, actions, mobileCardRender, emptyState, emptyIcon, emptyTitle, tableConfig, paginationConfig, externalPagination, pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, showViewToggle: showViewToggleProp, showTableView, viewMode: controlledViewMode, defaultViewMode: defaultViewModeProp, onViewModeChange, selectable: selectableProp, selectedIds, onSelectionChange, gridCols, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
-
-/**
- * Animation Helpers
- *
- * Easing functions for animations and transitions.
- */
-declare const easings: {
-    linear: (t: number) => number;
-    easeInQuad: (t: number) => number;
-    easeOutQuad: (t: number) => number;
-    easeInOutQuad: (t: number) => number;
-    easeInCubic: (t: number) => number;
-    easeOutCubic: (t: number) => number;
-    easeInOutCubic: (t: number) => number;
-    easeInQuart: (t: number) => number;
-    easeOutQuart: (t: number) => number;
-    easeInOutQuart: (t: number) => number;
-};
-
-/**
- * Color Helpers
- *
- * UI helpers for color manipulation and utilities.
- */
-declare function hexToRgb(hex: string): {
-    r: number;
-    g: number;
-    b: number;
-} | null;
-declare function rgbToHex(r: number, g: number, b: number): string;
-declare function getContrastColor(hex: string): "#000000" | "#ffffff";
-
-/**
- * Style Helpers
- *
- * UI helpers for dynamic styling and CSS class management.
- */
-declare function classNames(...classes: (string | boolean | undefined | null)[]): string;
-declare function mergeTailwindClasses(...classes: (string | undefined | null)[]): string;
-
-interface SideModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    title?: string;
-    /** Default: "right". "left" opens from the left edge. */
-    side?: "left" | "right";
-    /** Width on desktop. Default: "60vw" clamped to max-w-2xl. */
-    width?: string;
-    children: React$1.ReactNode;
-    /** Extra class on the panel Div. */
-    className?: string;
-}
-/**
- * SideModal — slides in from the right (or left) on desktop (60 vw),
- * full-screen drawer on mobile (< sm breakpoint).
- *
- * Accessibility:
- *  - Traps focus inside the panel when open
- *  - Closes on Escape key
- *  - backdrop click closes panel
- *  - role="dialog" + aria-modal + aria-labelledby
- */
-declare function SideModal({ isOpen, onClose, title, side, children, className, }: SideModalProps): react_jsx_runtime.JSX.Element | null;
-
-interface RichTextProps {
-    /** Raw HTML string — typically from ProseMirror / Tiptap JSON rendered to HTML. */
-    html: string;
-    /** Extra class names on the wrapper div. */
-    className?: string;
-    /** Tailwind prose class variant. Defaults to "prose dark:prose-invert". */
-    proseClass?: string;
-    /**
-     * When true, every `<pre>` code block gets an overlay "Copy" button that
-     * copies the code text to the clipboard on click. Defaults to false.
-     */
-    copyableCode?: boolean;
-    /**
-     * Optional syntax highlighter applied to every `<pre><code>` block.
-     * Called with (rawCode, languageName) — return the highlighted HTML string.
-     *
-     * The language name is derived from the `language-*` CSS class on the `<code>`
-     * element (e.g. "ts", "js", "python"). Falls back to `"plaintext"` when absent.
-     *
-     * @example
-     * ```tsx
-     * import hljs from "highlight.js";
-     * <RichText
-     *   html={post.body}
-     *   highlightCode={(code, lang) =>
-     *     hljs.highlight(code, { language: lang || "plaintext", ignoreIllegals: true }).value
-     *   }
-     * />
-     * ```
-     */
-    highlightCode?: (code: string, lang: string) => string;
-}
-/**
- * RichText — renders sanitised HTML from a CMS / ProseMirror output.
- *
- * Security: client-side DOM-based sanitiser strips disallowed tags/attrs.
- * For defence-in-depth, also sanitise on the server before storing.
- *
- * Usage:
- * ```tsx
- * <RichText html={blogPost.body} className="max-w-2xl" />
- * <RichText html={desc} copyableCode />
- * ```
- */
-declare function RichText({ html, className, proseClass, copyableCode, highlightCode, }: RichTextProps): react_jsx_runtime.JSX.Element;
-
-interface BulkActionItem {
-    id: string;
-    label: string;
-    variant?: "primary" | "secondary" | "outline" | "danger" | "ghost" | "warning";
-    icon?: React$1.ReactNode;
-    onClick: () => void;
-    disabled?: boolean;
-    loading?: boolean;
-}
-interface BulkActionBarLabels {
-    /** e.g. "${count} selected" — receives count as format arg */
-    selected?: string;
-    apply?: string;
-    clearSelection?: string;
-    bulkActions?: string;
-}
-interface BulkActionBarProps {
-    selectedCount: number;
-    onClearSelection?: () => void;
-    actions?: BulkActionItem[];
-    labels?: BulkActionBarLabels;
-}
-declare function BulkActionBar({ selectedCount, onClearSelection, actions, labels, }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
-
-interface ListingLayoutLabels {
-    filtersTitle?: string;
-    clearAll?: string;
-    applyFilters?: string;
-    close?: string;
-    showFilters?: string;
-    hideFilters?: string;
-    filterActiveCount?: (count: number) => string;
-}
-interface ListingLayoutProps {
-    headerSlot?: ReactNode;
-    statusTabsSlot?: ReactNode;
-    filterContent?: ReactNode;
-    filterActiveCount?: number;
-    onFilterApply?: () => void;
-    onFilterClear?: () => void;
-    filterTitle?: string;
-    activeFiltersSlot?: ReactNode;
-    searchSlot?: ReactNode;
-    sortSlot?: ReactNode;
-    viewToggleSlot?: ReactNode;
-    actionsSlot?: ReactNode;
-    selectedCount?: number;
-    onClearSelection?: () => void;
-    bulkActionItems?: BulkActionItem[];
-    toolbarPaginationSlot?: ReactNode;
-    paginationSlot?: ReactNode;
-    children: ReactNode;
-    /** When true, sticky toolbar sits at top-0 (inside overflow-y-auto container).
-     *  When false, accounts for a top navbar above (top-14/top-[120px]). */
-    isDashboard?: boolean;
-    defaultSidebarOpen?: boolean;
-    className?: string;
-    loading?: boolean;
-    errorSlot?: ReactNode;
-    labels?: ListingLayoutLabels;
-}
-declare function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen, className, loading, errorSlot, labels, }: ListingLayoutProps): react_jsx_runtime.JSX.Element;
-
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type ActiveFilter, ActiveFilterChips, type ActiveFilterChipsProps, Alert, type AlertProps, Article, type ArticleProps, Aside, type AsideProps, Badge, type BadgeProps, type BadgeVariant, BlockFooter, type BlockFooterProps, BlockHeader, type BlockHeaderProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BulkActionBar, type BulkActionBarLabels, type BulkActionBarProps, type BulkActionItem, Button, type ButtonProps, Caption, Container, type ContainerProps, type ContainerSize, CountdownDisplay, type CountdownDisplayProps, DEFAULT_PAGINATION_CONFIG, DEFAULT_STICKY_CONFIG, DEFAULT_TABLE_CONFIG, DataTable, type DataTableColumn, type DataTableProps, DescriptionField, type DescriptionFieldProps, Div, type DivProps, Divider, type DividerProps, Drawer, type DrawerProps, Footer, type FooterProps, Form, FormField, type FormFieldProps, FormGrid, type FormGridProps, type FormProps, GRID_MAP, type GapKey, type GenericStatus, Grid, type GridCols, type GridProps, Header, type HeaderProps, Heading, HorizontalScroller, type HorizontalScrollerProps, IconButton, type IconButtonProps, ImageLightbox, type ImageLightboxProps, IndeterminateProgress, type IndeterminateProgressProps, Input, type InputProps, ItemRow, type ItemRowProps, Label, Li, type LiProps, type LightboxImage, ListingLayout, type ListingLayoutLabels, type ListingLayoutProps, Main, type MainProps, Modal, type ModalProps, Nav, type NavProps, Ol, type OlProps, type OrderStatus, Pagination, type PaginationConfig, type PaginationProps, type PaymentStatus, type PerViewConfig, PriceDisplay, type PriceDisplayProps, Progress, type ProgressProps, RatingDisplay, type RatingDisplayProps, type ReviewStatus, RichText, type RichTextProps, Row, type RowProps, Section, type SectionProps, Select, type SelectOption, type SelectProps, SideModal, type SideModalProps, Skeleton, type SkeletonProps, Slider, type SliderProps, SortDropdown, type SortDropdownProps, type SortOption, Span, Spinner, type SpinnerProps, Stack, type StackProps, StarRating, type StarRatingProps, type StatItem, StatsGrid, type StatsGridProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, StepperNav, type StepperNavProps, type StepperNavStep, type StickyConfig, SummaryCard, type SummaryCardProps, type SummaryLine, TabStrip, type TabStripProps, type TabStripTab, type TableConfig, TablePagination, type TablePaginationLabels, type TablePaginationProps, type TableViewMode, TagInput, type TagInputProps, Text, TextLink, type TextLinkProps, Textarea, type TextareaProps, type TicketStatus, Tooltip, type TooltipProps, Ul, type UlProps, type ViewMode$1 as ViewMode, ViewToggle, type ViewToggleLabels, type ViewToggleProps, classNames, easings, getContrastColor, hexToRgb, mergeTableConfig, mergeTailwindClasses, rgbToHex };
+import "./components/index.style.css";
+export { buildColumns, createColumnBuilder, renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, } from "./columns";
+export type { BooleanRenderOpts, RatingMode, RatingRenderOpts, } from "./columns";
+export type { SectionProps, ArticleProps, MainProps, AsideProps, NavProps, BlockHeaderProps, BlockFooterProps, HeaderProps, FooterProps, UlProps, OlProps, LiProps, } from "./components/Semantic";
+export { Section, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Header, Footer, Ul, Ol, Li, } from "./components/Semantic";
+export type { DivProps } from "./components/Div";
+export { Div } from "./components/Div";
+export { Heading, Text, Label, Caption, Span } from "./components/Typography";
+export type { SpinnerProps } from "./components/Spinner";
+export { Spinner } from "./components/Spinner";
+export type { SkeletonProps } from "./components/Skeleton";
+export { Skeleton } from "./components/Skeleton";
+export type { ButtonProps } from "./components/Button";
+export { Button } from "./components/Button";
+export type { IconButtonProps } from "./components/IconButton";
+export { IconButton } from "./components/IconButton";
+export type { TextLinkProps } from "./components/TextLink";
+export { TextLink } from "./components/TextLink";
+export type { TooltipProps } from "./components/Tooltip";
+export { Tooltip } from "./components/Tooltip";
+export type { AccordionProps, AccordionItemProps, } from "./components/Accordion";
+export { Accordion, AccordionItem } from "./components/Accordion";
+export type { FormProps, GapToken, FormGroupProps, FormFieldSpanProps, FormActionsProps, } from "./components/Form";
+export { Form, FormGroup, FormFieldSpan, FormActions } from "./components/Form";
+export type { BadgeProps, BadgeVariant } from "./components/Badge";
+export { Badge } from "./components/Badge";
+export type { AlertProps } from "./components/Alert";
+export { Alert } from "./components/Alert";
+export type { DividerProps } from "./components/Divider";
+export { Divider } from "./components/Divider";
+export type { ProgressProps, IndeterminateProgressProps, } from "./components/Progress";
+export { Progress, IndeterminateProgress } from "./components/Progress";
+export type { PaginationProps } from "./components/Pagination";
+export { Pagination } from "./components/Pagination";
+export type { StatusBadgeProps, StatusBadgeStatus, OrderStatus, PaymentStatus, ReviewStatus, TicketStatus, GenericStatus, } from "./components/StatusBadge";
+export { StatusBadge } from "./components/StatusBadge";
+export type { ModalProps } from "./components/Modal";
+export { Modal, ModalFooter } from "./components/Modal";
+export type { UnsavedChangesModalProps, UnsavedChangesLabels, } from "./components/UnsavedChangesModal";
+export { UnsavedChangesModal } from "./components/UnsavedChangesModal";
+export type { DrawerProps } from "./components/Drawer";
+export { Drawer } from "./components/Drawer";
+export type { BackgroundRendererProps, BackgroundConfig, } from "./components/BackgroundRenderer";
+export { BackgroundRenderer } from "./components/BackgroundRenderer";
+export type { ResponsiveViewProps } from "./components/ResponsiveView";
+export { ResponsiveView } from "./components/ResponsiveView";
+export type { SelectProps, SelectOption } from "./components/Select";
+export { Select } from "./components/Select";
+export type { InputProps } from "./components/Input";
+export { Input } from "./components/Input";
+export type { TextareaProps } from "./components/Textarea";
+export { Textarea } from "./components/Textarea";
+export type { SliderProps } from "./components/Slider";
+export { Slider } from "./components/Slider";
+export type { CheckboxProps } from "./components/Checkbox";
+export { Checkbox } from "./components/Checkbox";
+export type { RadioGroupProps, RadioOption } from "./components/Radio";
+export { RadioGroup } from "./components/Radio";
+export type { ToggleProps } from "./components/Toggle";
+export { Toggle } from "./components/Toggle";
+export type { ToastVariant, ToastPosition, ToastProviderProps, } from "./components/Toast";
+export { ToastProvider, useToast } from "./components/Toast";
+export type { StarRatingProps } from "./components/StarRating";
+export { StarRating } from "./components/StarRating";
+export type { BreadcrumbProps, BreadcrumbItem } from "./components/Breadcrumb";
+export { Breadcrumb } from "./components/Breadcrumb";
+export type { ImageLightboxProps, LightboxImage, } from "./components/ImageLightbox";
+export { ImageLightbox } from "./components/ImageLightbox";
+export type { TagInputProps } from "./components/TagInput";
+export { TagInput } from "./components/TagInput";
+export type { StepperNavProps, StepperNavStep } from "./components/StepperNav";
+export { StepperNav } from "./components/StepperNav";
+export type { ViewMode, ViewToggleProps, ViewToggleLabels, } from "./components/ViewToggle";
+export { ViewToggle } from "./components/ViewToggle";
+export type { RatingDisplayProps } from "./components/RatingDisplay";
+export { RatingDisplay } from "./components/RatingDisplay";
+export type { PriceDisplayProps } from "./components/PriceDisplay";
+export { PriceDisplay } from "./components/PriceDisplay";
+export type { StatsGridProps, StatItem } from "./components/StatsGrid";
+export { StatsGrid } from "./components/StatsGrid";
+export type { SummaryCardProps, SummaryLine } from "./components/SummaryCard";
+export { SummaryCard } from "./components/SummaryCard";
+export type { CountdownDisplayProps } from "./components/CountdownDisplay";
+export { CountdownDisplay } from "./components/CountdownDisplay";
+export type { ItemRowProps } from "./components/ItemRow";
+export { ItemRow } from "./components/ItemRow";
+export type { HorizontalScrollerProps, PerViewConfig, } from "./components/HorizontalScroller";
+export { HorizontalScroller } from "./components/HorizontalScroller";
+export type { SectionTabsProps, SectionTab } from "./components/SectionTabs";
+export { SectionTabs } from "./components/SectionTabs";
+export type { TabStripProps, TabStripTab } from "./components/TabStrip";
+export { TabStrip } from "./components/TabStrip";
+export type { FormGridProps, FormFieldProps } from "./components/FormGrid";
+export { FormGrid, FormField as FormGridField } from "./components/FormGrid";
+export type { FormFieldProps as SmartFormFieldProps } from "./components/FormField";
+export { FormField } from "./components/FormField";
+export type { DescriptionFieldProps } from "./components/DescriptionField";
+export { DescriptionField } from "./components/DescriptionField";
+export type { CardProps, CardSectionProps } from "./components/Card";
+export { Card, CardHeader, CardBody, CardFooter } from "./components/Card";
+export type { EmptyStateProps } from "./components/EmptyState";
+export { EmptyState } from "./components/EmptyState";
+export type { AvatarProps, AvatarGroupProps } from "./components/Avatar";
+export { Avatar, AvatarGroup } from "./components/Avatar";
+export type { DropdownProps, DropdownMenuItem } from "./components/Dropdown";
+export { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSeparator, } from "./components/Dropdown";
+export type { MenuProps } from "./components/Menu";
+export { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator, } from "./components/Menu";
+export type { DynamicSelectProps, DynamicSelectOption, AsyncPage, } from "./components/DynamicSelect";
+export { DynamicSelect } from "./components/DynamicSelect";
+export type { RoleBadgeProps } from "./components/RoleBadge";
+export { RoleBadge } from "./components/RoleBadge";
+export type { SkipToMainProps } from "./components/SkipToMain";
+export { SkipToMain } from "./components/SkipToMain";
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps, } from "./components/Tabs";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./components/Tabs";
+export type { FilterDrawerProps } from "./components/FilterDrawer";
+export { FilterDrawer } from "./components/FilterDrawer";
+export type { RowAction, RowActionMenuProps } from "./components/RowActionMenu";
+export { RowActionMenu } from "./components/RowActionMenu";
+export type { PasswordStrengthIndicatorProps } from "./components/PasswordStrengthIndicator";
+export { PasswordStrengthIndicator } from "./components/PasswordStrengthIndicator";
+export type { AvatarDisplayProps } from "./components/AvatarDisplay";
+export { AvatarDisplay } from "./components/AvatarDisplay";
+export type { DashboardStatsCardProps } from "./components/DashboardStatsCard";
+export { DashboardStatsCard } from "./components/DashboardStatsCard";
+export type { ActiveFilter, ActiveFilterChipsProps, } from "./components/ActiveFilterChips";
+export { ActiveFilterChips } from "./components/ActiveFilterChips";
+export type { SortOption, SortDropdownProps } from "./components/SortDropdown";
+export { SortDropdown } from "./components/SortDropdown";
+export type { TablePaginationProps, TablePaginationLabels, } from "./components/TablePagination";
+export { TablePagination } from "./components/TablePagination";
+export type { DataTableProps, DataTableColumn } from "./DataTable";
+export { DataTable } from "./DataTable";
+export type { TableConfig, TableViewMode, PaginationConfig, StickyConfig, } from "../contracts";
+export { DEFAULT_TABLE_CONFIG, DEFAULT_PAGINATION_CONFIG, DEFAULT_STICKY_CONFIG, mergeTableConfig, } from "../contracts";
+export type { GapKey, ContainerSize, GridCols, ViewPortal, ContainerProps, StackProps, RowProps, GridProps, } from "./components/Layout";
+export { Container, Stack, Row, Grid, GRID_MAP } from "./components/Layout";
+export { classNames, mergeTailwindClasses } from "./style.helper";
+export type { SideModalProps } from "./components/SideModal";
+export { SideModal } from "./components/SideModal";
+export type { RichTextProps } from "./rich-text/RichText";
+export { RichText } from "./rich-text/RichText";
+export type { ListingLayoutProps, ListingLayoutLabels, } from "./components/ListingLayout";
+export { ListingLayout } from "./components/ListingLayout";
+export type { ListingViewShellProps } from "./components/ListingViewShell";
+export { ListingViewShell } from "./components/ListingViewShell";
+export type { SlottedListingViewProps, SlottedListingViewLabels, } from "./components/SlottedListingView";
+export { SlottedListingView } from "./components/SlottedListingView";
+export type { DetailViewShellProps, DetailViewLayout, } from "./components/DetailViewShell";
+export { DetailViewShell } from "./components/DetailViewShell";
+export type { StackedViewShellProps, StackedViewShellLabels, } from "./components/StackedViewShell";
+export { StackedViewShell } from "./components/StackedViewShell";
+export type { BulkActionBarProps, BulkActionBarLabels, BulkActionItem, } from "./components/BulkActionBar";
+export { BulkActionBar } from "./components/BulkActionBar";
+export type { FlowStep, FlowDiagramProps } from "./components/FlowDiagram";
+export { FlowDiagram } from "./components/FlowDiagram";
+export type { BaseListingCardRootProps, BaseListingCardHeroProps, BaseListingCardInfoProps, BaseListingCardCheckboxProps, } from "./components/BaseListingCard";
+export { BaseListingCard } from "./components/BaseListingCard";
+export type { GalleryImage, ImageGalleryProps, } from "./components/ImageGallery";
+export { default as ImageGallery } from "./components/ImageGallery";
+export type { SideDrawerProps, DrawerMode } from "./components/SideDrawer";
+export { SideDrawer } from "./components/SideDrawer";
+export type { ConfirmDeleteModalProps } from "./components/ConfirmDeleteModal";
+export { ConfirmDeleteModal } from "./components/ConfirmDeleteModal";