@mohasinac/ui 1.0.0 → 1.1.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode } from 'react';
+import React$1, { ReactNode } from 'react';
 import { PaginationConfig, TableColumn, TableConfig } from '@mohasinac/contracts';
 export { DEFAULT_PAGINATION_CONFIG, DEFAULT_STICKY_CONFIG, DEFAULT_TABLE_CONFIG, PaginationConfig, StickyConfig, TableConfig, TableViewMode, mergeTableConfig } from '@mohasinac/contracts';
 
@@ -39,24 +39,24 @@ export { DEFAULT_PAGINATION_CONFIG, DEFAULT_STICKY_CONFIG, DEFAULT_TABLE_CONFIG,
  * 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.HTMLAttributes<HTMLElement> {
-    children: React.ReactNode;
+interface SectionProps extends React$1.HTMLAttributes<HTMLElement> {
+    children: React$1.ReactNode;
 }
-declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
+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.HTMLAttributes<HTMLElement> {
-    children?: React.ReactNode;
+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.HTMLAttributes<HTMLElement> {
-    children: React.ReactNode;
+interface MainProps extends React$1.HTMLAttributes<HTMLElement> {
+    children: React$1.ReactNode;
 }
 declare function Main({ className, children, ...props }: MainProps): react_jsx_runtime.JSX.Element;
 /**
@@ -64,10 +64,10 @@ declare function Main({ className, children, ...props }: MainProps): react_jsx_r
  * Use for supplementary content tangentially related to the main content:
  * sidebars, callout boxes, related-link panels.
  */
-interface AsideProps extends React.HTMLAttributes<HTMLElement> {
-    children: React.ReactNode;
+interface AsideProps extends React$1.HTMLAttributes<HTMLElement> {
+    children: React$1.ReactNode;
 }
-declare const Aside: React.ForwardRefExoticComponent<AsideProps & React.RefAttributes<HTMLElement>>;
+declare const Aside: React$1.ForwardRefExoticComponent<AsideProps & React$1.RefAttributes<HTMLElement>>;
 /**
  * Semantic `<nav>` element with enforced `aria-label`.
  *
@@ -80,10 +80,10 @@ declare const Aside: React.ForwardRefExoticComponent<AsideProps & React.RefAttri
  * <Nav aria-label="Product categories">...</Nav>
  * ```
  */
-interface NavProps extends React.HTMLAttributes<HTMLElement> {
+interface NavProps extends React$1.HTMLAttributes<HTMLElement> {
     /** REQUIRED — describes the purpose of this navigation region for screen readers. */
     "aria-label": string;
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 }
 declare function Nav({ className, children, ...props }: NavProps): react_jsx_runtime.JSX.Element;
 /**
@@ -99,16 +99,16 @@ declare function Nav({ className, children, ...props }: NavProps): react_jsx_run
  * </Article>
  * ```
  */
-interface BlockHeaderProps extends React.HTMLAttributes<HTMLElement> {
-    children: React.ReactNode;
+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.HTMLAttributes<HTMLElement> {
-    children: React.ReactNode;
+interface BlockFooterProps extends React$1.HTMLAttributes<HTMLElement> {
+    children: React$1.ReactNode;
 }
 declare function BlockFooter({ className, children, ...props }: BlockFooterProps): react_jsx_runtime.JSX.Element;
 /**
@@ -122,8 +122,8 @@ declare function BlockFooter({ className, children, ...props }: BlockFooterProps
  * </Ul>
  * ```
  */
-interface UlProps extends React.HTMLAttributes<HTMLUListElement> {
-    children: React.ReactNode;
+interface UlProps extends React$1.HTMLAttributes<HTMLUListElement> {
+    children: React$1.ReactNode;
 }
 declare function Ul({ className, children, ...props }: UlProps): react_jsx_runtime.JSX.Element;
 /**
@@ -137,40 +137,40 @@ declare function Ul({ className, children, ...props }: UlProps): react_jsx_runti
  * </Ol>
  * ```
  */
-interface OlProps extends React.HTMLAttributes<HTMLOListElement> {
-    children: React.ReactNode;
+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.LiHTMLAttributes<HTMLLIElement> {
-    children: React.ReactNode;
+interface LiProps extends React$1.LiHTMLAttributes<HTMLLIElement> {
+    children: React$1.ReactNode;
 }
 declare function Li({ className, children, ...props }: LiProps): react_jsx_runtime.JSX.Element;
 
-interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+interface HeadingProps extends React$1.HTMLAttributes<HTMLHeadingElement> {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     variant?: "primary" | "secondary" | "muted" | "none";
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 }
 declare function Heading({ level, variant, className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
-interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
+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";
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 }
 declare function Text({ variant, size, weight, className, children, ...props }: TextProps): react_jsx_runtime.JSX.Element;
-interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+interface LabelProps extends React$1.LabelHTMLAttributes<HTMLLabelElement> {
     required?: boolean;
-    children: React.ReactNode;
+    children: React$1.ReactNode;
 }
 declare function Label({ required, className, children, ...props }: LabelProps): react_jsx_runtime.JSX.Element;
-interface CaptionProps extends React.HTMLAttributes<HTMLSpanElement> {
+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.ReactNode;
+    children: React$1.ReactNode;
 }
 declare function Caption({ variant, className, children, ...props }: CaptionProps): react_jsx_runtime.JSX.Element;
 /**
@@ -187,12 +187,12 @@ declare function Caption({ variant, className, children, ...props }: CaptionProp
  * <Span variant="error" weight="semibold">Required</Span>
  * ```
  */
-interface SpanProps extends React.HTMLAttributes<HTMLSpanElement> {
+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.ReactNode;
+    children?: React$1.ReactNode;
 }
 declare function Span({ variant, size, weight, className, children, ...props }: SpanProps): react_jsx_runtime.JSX.Element;
 
@@ -248,11 +248,11 @@ declare const UI_BUTTON: {
         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.ButtonHTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: keyof typeof UI_BUTTON.variants;
     size?: keyof typeof UI_BUTTON.sizes;
     isLoading?: boolean;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 }
 declare function Button({ variant, size, className, isLoading, disabled, children, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
@@ -282,7 +282,7 @@ declare const BADGE_CLASSES: {
 };
 type BadgeVariant = keyof typeof BADGE_CLASSES;
 interface BadgeProps {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     variant?: BadgeVariant;
     className?: string;
 }
@@ -321,7 +321,7 @@ declare const ALERT_STYLES: {
     };
 };
 interface AlertProps {
-    children: React.ReactNode;
+    children: React$1.ReactNode;
     variant?: keyof typeof ALERT_STYLES;
     title?: string;
     onClose?: () => void;
@@ -408,13 +408,13 @@ interface ModalProps {
     isOpen: boolean;
     onClose: () => void;
     title?: string;
-    children: React.ReactNode;
+    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.ReactPortal | null;
+declare function Modal({ isOpen, onClose, title, children, size, showCloseButton, className, }: ModalProps): React$1.ReactPortal | null;
 
 /**
  * Drawer — slide-in panel from left, right, or bottom.
@@ -426,15 +426,15 @@ interface DrawerProps {
     isOpen: boolean;
     onClose: () => void;
     title?: string;
-    children: React.ReactNode;
-    footer?: React.ReactNode;
+    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.ReactPortal | null;
+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.
@@ -515,7 +515,108 @@ interface ImageLightboxProps {
     onClose: () => void;
     onNavigate?: (index: number) => void;
 }
-declare function ImageLightbox({ images, activeIndex, onClose, onNavigate, }: ImageLightboxProps): React.ReactPortal | null;
+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;
+
+type ViewMode$1 = "grid" | "list";
+interface ViewToggleLabels {
+    grid: 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;
 
 /**
  * Layout Primitives — Container, Stack, Row, Grid
@@ -642,7 +743,7 @@ type JustifyContent = keyof typeof JUSTIFY_MAP;
  * <Container size="full" as="main">...</Container>
  * ```
  */
-interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
+interface ContainerProps extends React$1.HTMLAttributes<HTMLElement> {
     /**
      * Max-width breakpoint preset.
      * - `sm`  → `max-w-3xl`  (blog / policy)
@@ -655,8 +756,8 @@ interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
      */
     size?: ContainerSize;
     /** Render as a different element (e.g. `"main"`, `"section"`). Defaults to `"div"`. */
-    as?: React.ElementType;
-    children?: React.ReactNode;
+    as?: React$1.ElementType;
+    children?: React$1.ReactNode;
 }
 declare function Container({ size, as, className, children, ...props }: ContainerProps): react_jsx_runtime.JSX.Element;
 /**
@@ -675,14 +776,14 @@ declare function Container({ size, as, className, children, ...props }: Containe
  * </Stack>
  * ```
  */
-interface StackProps extends React.HTMLAttributes<HTMLElement> {
+interface StackProps extends React$1.HTMLAttributes<HTMLElement> {
     /** Space between children. Defaults to `"md"` (`gap-4`). */
     gap?: GapKey;
     /** Cross-axis (horizontal) alignment. Defaults to `"stretch"`. */
     align?: Extract<ItemsAlign, "start" | "center" | "end" | "stretch">;
     /** Render as a different element. Defaults to `"div"`. */
-    as?: React.ElementType;
-    children?: React.ReactNode;
+    as?: React$1.ElementType;
+    children?: React$1.ReactNode;
 }
 declare function Stack({ gap, align, as, className, children, ...props }: StackProps): react_jsx_runtime.JSX.Element;
 /**
@@ -701,7 +802,7 @@ declare function Stack({ gap, align, as, className, children, ...props }: StackP
  * </Row>
  * ```
  */
-interface RowProps extends React.HTMLAttributes<HTMLElement> {
+interface RowProps extends React$1.HTMLAttributes<HTMLElement> {
     /** Space between children. Defaults to `"md"` (`gap-4`). */
     gap?: GapKey;
     /** Cross-axis (vertical) alignment. Defaults to `"center"`. */
@@ -711,8 +812,8 @@ interface RowProps extends React.HTMLAttributes<HTMLElement> {
     /** Allow children to wrap onto multiple lines. */
     wrap?: boolean;
     /** Render as a different element. Defaults to `"div"`. */
-    as?: React.ElementType;
-    children?: React.ReactNode;
+    as?: React$1.ElementType;
+    children?: React$1.ReactNode;
 }
 declare function Row({ gap, align, justify, wrap, as, className, children, ...props }: RowProps): react_jsx_runtime.JSX.Element;
 /**
@@ -731,7 +832,7 @@ declare function Row({ gap, align, justify, wrap, as, className, children, ...pr
  * </Grid>
  * ```
  */
-interface GridProps extends React.HTMLAttributes<HTMLElement> {
+interface GridProps extends React$1.HTMLAttributes<HTMLElement> {
     /**
      * Column preset.
      * - Numbers `1`–`6` → mobile-first responsive stacks
@@ -747,8 +848,8 @@ interface GridProps extends React.HTMLAttributes<HTMLElement> {
     /** Space between grid cells. Defaults to `"md"` (`gap-4`). */
     gap?: GapKey;
     /** Render as a different element. Defaults to `"div"`. */
-    as?: React.ElementType;
-    children?: React.ReactNode;
+    as?: React$1.ElementType;
+    children?: React$1.ReactNode;
 }
 declare function Grid({ cols, gap, as, className, children, ...props }: GridProps): react_jsx_runtime.JSX.Element;
 
@@ -826,4 +927,43 @@ interface DataTableProps<T> {
 }
 declare function DataTable<T extends Record<string, any>>({ data, columns, keyExtractor, 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;
 
-export { 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, Button, type ButtonProps, Caption, Container, type ContainerProps, type ContainerSize, DataTable, type DataTableColumn, type DataTableProps, Divider, type DividerProps, Drawer, type DrawerProps, GRID_MAP, type GapKey, type GenericStatus, Grid, type GridCols, type GridProps, Heading, ImageLightbox, type ImageLightboxProps, IndeterminateProgress, type IndeterminateProgressProps, Label, Li, type LiProps, type LightboxImage, Main, type MainProps, Modal, type ModalProps, Nav, type NavProps, Ol, type OlProps, type OrderStatus, Pagination, type PaginationProps, type PaymentStatus, Progress, type ProgressProps, type ReviewStatus, Row, type RowProps, Section, type SectionProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Span, Spinner, type SpinnerProps, Stack, type StackProps, StarRating, type StarRatingProps, StatusBadge, type StatusBadgeProps, type StatusBadgeStatus, Text, type TicketStatus, Ul, type UlProps };
+/**
+ * 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;
+
+export { 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, Button, type ButtonProps, Caption, Container, type ContainerProps, type ContainerSize, CountdownDisplay, type CountdownDisplayProps, DataTable, type DataTableColumn, type DataTableProps, Divider, type DividerProps, Drawer, type DrawerProps, GRID_MAP, type GapKey, type GenericStatus, Grid, type GridCols, type GridProps, Heading, ImageLightbox, type ImageLightboxProps, IndeterminateProgress, type IndeterminateProgressProps, ItemRow, type ItemRowProps, Label, Li, type LiProps, type LightboxImage, Main, type MainProps, Modal, type ModalProps, Nav, type NavProps, Ol, type OlProps, type OrderStatus, Pagination, type PaginationProps, type PaymentStatus, PriceDisplay, type PriceDisplayProps, Progress, type ProgressProps, RatingDisplay, type RatingDisplayProps, type ReviewStatus, Row, type RowProps, Section, type SectionProps, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, 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, SummaryCard, type SummaryCardProps, type SummaryLine, TagInput, type TagInputProps, Text, type TicketStatus, Ul, type UlProps, type ViewMode$1 as ViewMode, ViewToggle, type ViewToggleLabels, type ViewToggleProps, classNames, easings, getContrastColor, hexToRgb, mergeTailwindClasses, rgbToHex };