@aster-ui/prefixed 0.12.50

package/dist/components/Layout.d.ts

@@ -0,0 +1,67 @@
+import { default as React } from 'react';
+export type SiderTheme = 'light' | 'dark';
+export type SiderCollapsedType = 'clickTrigger' | 'responsive';
+export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Whether contains Sider (auto-detected if not specified) */
+    hasSider?: boolean;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+export interface LayoutHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+export interface LayoutFooterProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+export interface LayoutContentProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+export interface LayoutSiderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+    children: React.ReactNode;
+    /** Width of the sider */
+    width?: number | string;
+    /** Width when collapsed */
+    collapsedWidth?: number | string;
+    /** Controlled collapsed state */
+    collapsed?: boolean;
+    /** Initial collapsed state (uncontrolled) */
+    defaultCollapsed?: boolean;
+    /** Whether can be collapsed */
+    collapsible?: boolean;
+    /** Callback when collapse state changes */
+    onCollapse?: (collapsed: boolean, type: SiderCollapsedType) => void;
+    /** Custom trigger element (null to hide) */
+    trigger?: React.ReactNode | null;
+    /** Responsive breakpoint for auto-collapse */
+    breakpoint?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Callback when breakpoint is crossed */
+    onBreakpoint?: (broken: boolean) => void;
+    /** Reverse direction of arrow (for right-side sider) */
+    reverseArrow?: boolean;
+    /** Color theme of the sider */
+    theme?: SiderTheme;
+    /** Style for zero-width trigger */
+    zeroWidthTriggerStyle?: React.CSSProperties;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+interface SiderContextValue {
+    collapsed: boolean;
+    collapsedWidth: number | string;
+    width: number | string;
+}
+export declare function useSiderContext(): SiderContextValue | null;
+export declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<LayoutHeaderProps & React.RefAttributes<HTMLElement>>;
+    Footer: React.ForwardRefExoticComponent<LayoutFooterProps & React.RefAttributes<HTMLElement>>;
+    Content: React.ForwardRefExoticComponent<LayoutContentProps & React.RefAttributes<HTMLElement>>;
+    Sider: React.ForwardRefExoticComponent<LayoutSiderProps & React.RefAttributes<HTMLElement>>;
+};
+export {};

package/dist/components/Layout.js

@@ -0,0 +1,188 @@
+import { jsx as a, jsxs as Z } from "react/jsx-runtime";
+import C, { forwardRef as y, useContext as _, createContext as q, useState as S, useEffect as G, useCallback as J } from "react";
+const U = "d-bg-base-100", X = "d-bg-base-200", v = "d-bg-base-300", E = q(null);
+function ae() {
+  return _(E);
+}
+const b = y(
+  ({ children: s, hasSider: o, className: n = "", "data-testid": e, ...l }, r) => {
+    const d = C.Children.toArray(s), f = d.some(
+      (t) => C.isValidElement(t) && t.type.displayName === "LayoutSider"
+    ), c = o ?? f, p = [
+      "flex",
+      "min-h-0",
+      c ? "flex-row" : "flex-col",
+      n
+    ].filter(Boolean).join(" "), g = c ? d.map((t) => {
+      if (C.isValidElement(t) && (t.type === b || t.type.displayName === "LayoutRoot") && t.type.displayName !== "LayoutSider") {
+        const N = t.props.className || "";
+        if (!N.includes("flex-1"))
+          return C.cloneElement(t, {
+            className: `flex-1 ${N}`.trim()
+          });
+      }
+      return t;
+    }) : s;
+    return /* @__PURE__ */ a("div", { ref: r, className: p, "data-testid": e, ...l, children: g });
+  }
+);
+b.displayName = "LayoutRoot";
+const $ = y(
+  ({ children: s, className: o = "", "data-testid": n, ...e }, l) => {
+    const r = [
+      "flex",
+      "items-center",
+      "px-6",
+      "h-16",
+      v,
+      "flex-shrink-0",
+      o
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ a("header", { ref: l, className: r, "data-testid": n, ...e, children: s });
+  }
+);
+$.displayName = "LayoutHeader";
+const R = y(
+  ({ children: s, className: o = "", "data-testid": n, ...e }, l) => {
+    const r = [
+      "px-6",
+      "py-4",
+      "text-center",
+      v,
+      "flex-shrink-0",
+      o
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ a("footer", { ref: l, className: r, "data-testid": n, ...e, children: s });
+  }
+);
+R.displayName = "LayoutFooter";
+const A = y(
+  ({ children: s, className: o = "", "data-testid": n, ...e }, l) => {
+    const r = ["flex-1", "min-h-0", "overflow-auto", o].filter(Boolean).join(" ");
+    return /* @__PURE__ */ a("main", { ref: l, className: r, "data-testid": n, ...e, children: s });
+  }
+);
+A.displayName = "LayoutContent";
+const Y = {
+  sm: "(max-width: 639px)",
+  md: "(max-width: 767px)",
+  lg: "(max-width: 1023px)",
+  xl: "(max-width: 1279px)",
+  "2xl": "(max-width: 1535px)"
+}, M = y(
+  ({
+    children: s,
+    width: o = 200,
+    collapsedWidth: n = 80,
+    collapsed: e,
+    defaultCollapsed: l = !1,
+    collapsible: r = !1,
+    onCollapse: d,
+    trigger: f,
+    breakpoint: c,
+    onBreakpoint: p,
+    reverseArrow: g = !1,
+    theme: t = "dark",
+    zeroWidthTriggerStyle: N,
+    className: T = "",
+    style: W,
+    "data-testid": x,
+    ...z
+  }, F) => {
+    const [H, w] = S(l), [k, P] = S(!1), i = e ?? H;
+    G(() => {
+      if (!c) return;
+      const m = window.matchMedia(Y[c]), L = (Q) => {
+        const h = Q.matches;
+        P(h), p?.(h), e === void 0 && w(h), h !== k && d?.(h, "responsive");
+      };
+      return L(m), m.addEventListener("change", L), () => m.removeEventListener("change", L);
+    }, [c, p, e, d, k]);
+    const B = J(() => {
+      const m = !i;
+      e === void 0 && w(m), d?.(m, "clickTrigger");
+    }, [i, e, d]), u = i ? n : o, j = u === 0 || u === "0" || u === "0px", O = [
+      "flex",
+      "flex-col",
+      {
+        light: U,
+        dark: X
+      }[t],
+      "flex-shrink-0",
+      "transition-all",
+      "duration-200",
+      "relative",
+      T
+    ].filter(Boolean).join(" "), V = () => g ? i ? "" : "rotate-180" : i ? "rotate-180" : "", D = r && f !== null && /* @__PURE__ */ a(
+      "button",
+      {
+        onClick: B,
+        className: `flex items-center justify-center h-10 w-full ${v} hover:bg-base-content/10 transition-colors`,
+        "aria-label": i ? "Expand sidebar" : "Collapse sidebar",
+        "data-testid": x ? `${x}-trigger` : void 0,
+        children: /* @__PURE__ */ a(
+          "svg",
+          {
+            className: `w-4 h-4 transition-transform ${V()}`,
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" })
+          }
+        )
+      }
+    ), K = r && j && i && /* @__PURE__ */ a(
+      "button",
+      {
+        onClick: B,
+        className: `absolute top-1/2 -translate-y-1/2 right-0 translate-x-full w-6 h-12 flex items-center justify-center ${v} hover:bg-base-content/10 transition-colors rounded-r z-10`,
+        "aria-label": "Expand sidebar",
+        style: N,
+        "data-testid": x ? `${x}-zero-trigger` : void 0,
+        children: /* @__PURE__ */ a(
+          "svg",
+          {
+            className: `w-3 h-3 ${g ? "rotate-180" : ""}`,
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+          }
+        )
+      }
+    );
+    return /* @__PURE__ */ a(E.Provider, { value: { collapsed: i, collapsedWidth: n, width: o }, children: /* @__PURE__ */ Z(
+      "aside",
+      {
+        ref: F,
+        className: O,
+        style: {
+          width: typeof u == "number" ? `${u}px` : u,
+          ...W
+        },
+        "data-collapsed": i,
+        "data-theme": t,
+        "data-testid": x,
+        "aria-expanded": !i,
+        ...z,
+        children: [
+          /* @__PURE__ */ a("div", { className: "flex-1 overflow-auto", children: s }),
+          !j && f !== null && (f ?? D),
+          K
+        ]
+      }
+    ) });
+  }
+);
+M.displayName = "LayoutSider";
+const se = Object.assign(b, {
+  Header: $,
+  Footer: R,
+  Content: A,
+  Sider: M
+});
+export {
+  se as Layout,
+  ae as useSiderContext
+};
+//# sourceMappingURL=Layout.js.map

package/dist/components/Layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.js","sources":["../../src/components/Layout.tsx"],"sourcesContent":["import React, { createContext, useContext, useState, useCallback, useEffect, forwardRef } from 'react'\n\n// DaisyUI classes\nconst dBgBase100 = 'd-bg-base-100'\nconst dBgBase200 = 'd-bg-base-200'\nconst dBgBase300 = 'd-bg-base-300'\n\nexport type SiderTheme = 'light' | 'dark'\nexport type SiderCollapsedType = 'clickTrigger' | 'responsive'\n\nexport interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  /** Whether contains Sider (auto-detected if not specified) */\n  hasSider?: boolean\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\nexport interface LayoutHeaderProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\nexport interface LayoutFooterProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\nexport interface LayoutContentProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\nexport interface LayoutSiderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {\n  children: React.ReactNode\n  /** Width of the sider */\n  width?: number | string\n  /** Width when collapsed */\n  collapsedWidth?: number | string\n  /** Controlled collapsed state */\n  collapsed?: boolean\n  /** Initial collapsed state (uncontrolled) */\n  defaultCollapsed?: boolean\n  /** Whether can be collapsed */\n  collapsible?: boolean\n  /** Callback when collapse state changes */\n  onCollapse?: (collapsed: boolean, type: SiderCollapsedType) => void\n  /** Custom trigger element (null to hide) */\n  trigger?: React.ReactNode | null\n  /** Responsive breakpoint for auto-collapse */\n  breakpoint?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n  /** Callback when breakpoint is crossed */\n  onBreakpoint?: (broken: boolean) => void\n  /** Reverse direction of arrow (for right-side sider) */\n  reverseArrow?: boolean\n  /** Color theme of the sider */\n  theme?: SiderTheme\n  /** Style for zero-width trigger */\n  zeroWidthTriggerStyle?: React.CSSProperties\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\ninterface SiderContextValue {\n  collapsed: boolean\n  collapsedWidth: number | string\n  width: number | string\n}\n\nconst SiderContext = createContext<SiderContextValue | null>(null)\n\nexport function useSiderContext() {\n  return useContext(SiderContext)\n}\n\nconst LayoutRoot = forwardRef<HTMLDivElement, LayoutProps>(\n  ({ children, hasSider: hasSiderProp, className = '', 'data-testid': testId, ...rest }, ref) => {\n    // Check if any child is a Sider to determine flex direction\n    const childArray = React.Children.toArray(children)\n    const hasSiderDetected = childArray.some(\n      (child) => React.isValidElement(child) && (child.type as any).displayName === 'LayoutSider'\n    )\n    const hasSider = hasSiderProp ?? hasSiderDetected\n\n    const layoutClasses = [\n      'flex',\n      'min-h-0',\n      hasSider ? 'flex-row' : 'flex-col',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    // If we have a Sider, auto-add flex-1 to non-Sider Layout children\n    const processedChildren = hasSider\n      ? childArray.map((child) => {\n          if (\n            React.isValidElement(child) &&\n            (child.type === LayoutRoot || (child.type as any).displayName === 'LayoutRoot') &&\n            (child.type as any).displayName !== 'LayoutSider'\n          ) {\n            // Clone the Layout child and add flex-1 if not already present\n            const existingClassName = (child.props as any).className || ''\n            if (!existingClassName.includes('flex-1')) {\n              return React.cloneElement(child as React.ReactElement<any>, {\n                className: `flex-1 ${existingClassName}`.trim(),\n              })\n            }\n          }\n          return child\n        })\n      : children\n\n    return (\n      <div ref={ref} className={layoutClasses} data-testid={testId} {...rest}>\n        {processedChildren}\n      </div>\n    )\n  }\n)\n\nLayoutRoot.displayName = 'LayoutRoot'\n\nconst LayoutHeader = forwardRef<HTMLElement, LayoutHeaderProps>(\n  ({ children, className = '', 'data-testid': testId, ...rest }, ref) => {\n    const headerClasses = [\n      'flex',\n      'items-center',\n      'px-6',\n      'h-16',\n      dBgBase300,\n      'flex-shrink-0',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <header ref={ref} className={headerClasses} data-testid={testId} {...rest}>\n        {children}\n      </header>\n    )\n  }\n)\n\nLayoutHeader.displayName = 'LayoutHeader'\n\nconst LayoutFooter = forwardRef<HTMLElement, LayoutFooterProps>(\n  ({ children, className = '', 'data-testid': testId, ...rest }, ref) => {\n    const footerClasses = [\n      'px-6',\n      'py-4',\n      'text-center',\n      dBgBase300,\n      'flex-shrink-0',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <footer ref={ref} className={footerClasses} data-testid={testId} {...rest}>\n        {children}\n      </footer>\n    )\n  }\n)\n\nLayoutFooter.displayName = 'LayoutFooter'\n\nconst LayoutContent = forwardRef<HTMLElement, LayoutContentProps>(\n  ({ children, className = '', 'data-testid': testId, ...rest }, ref) => {\n    // flex-1 by default so Content fills available space\n    const contentClasses = ['flex-1', 'min-h-0', 'overflow-auto', className].filter(Boolean).join(' ')\n\n    return (\n      <main ref={ref} className={contentClasses} data-testid={testId} {...rest}>\n        {children}\n      </main>\n    )\n  }\n)\n\nLayoutContent.displayName = 'LayoutContent'\n\nconst BREAKPOINT_MAP: Record<string, string> = {\n  sm: '(max-width: 639px)',\n  md: '(max-width: 767px)',\n  lg: '(max-width: 1023px)',\n  xl: '(max-width: 1279px)',\n  '2xl': '(max-width: 1535px)',\n}\n\nconst LayoutSider = forwardRef<HTMLElement, LayoutSiderProps>(\n  (\n    {\n      children,\n      width = 200,\n      collapsedWidth = 80,\n      collapsed: controlledCollapsed,\n      defaultCollapsed = false,\n      collapsible = false,\n      onCollapse,\n      trigger,\n      breakpoint,\n      onBreakpoint,\n      reverseArrow = false,\n      theme = 'dark',\n      zeroWidthTriggerStyle,\n      className = '',\n      style,\n      'data-testid': testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed)\n    const [broken, setBroken] = useState(false)\n\n    const collapsed = controlledCollapsed ?? internalCollapsed\n\n    // Handle responsive breakpoint\n    useEffect(() => {\n      if (!breakpoint) return\n\n      const mediaQuery = window.matchMedia(BREAKPOINT_MAP[breakpoint])\n\n      const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {\n        const isBroken = e.matches\n        setBroken(isBroken)\n        onBreakpoint?.(isBroken)\n\n        // Auto-collapse when breakpoint is crossed\n        if (controlledCollapsed === undefined) {\n          setInternalCollapsed(isBroken)\n        }\n        if (isBroken !== broken) {\n          onCollapse?.(isBroken, 'responsive')\n        }\n      }\n\n      // Check initial state\n      handleChange(mediaQuery)\n\n      // Listen for changes\n      mediaQuery.addEventListener('change', handleChange)\n      return () => mediaQuery.removeEventListener('change', handleChange)\n    }, [breakpoint, onBreakpoint, controlledCollapsed, onCollapse, broken])\n\n    const handleCollapse = useCallback(() => {\n      const newCollapsed = !collapsed\n      if (controlledCollapsed === undefined) {\n        setInternalCollapsed(newCollapsed)\n      }\n      onCollapse?.(newCollapsed, 'clickTrigger')\n    }, [collapsed, controlledCollapsed, onCollapse])\n\n    const currentWidth = collapsed ? collapsedWidth : width\n    const isZeroWidth = currentWidth === 0 || currentWidth === '0' || currentWidth === '0px'\n\n    const themeClasses: Record<SiderTheme, string> = {\n      light: dBgBase100,\n      dark: dBgBase200,\n    }\n\n    const siderClasses = [\n      'flex',\n      'flex-col',\n      themeClasses[theme],\n      'flex-shrink-0',\n      'transition-all',\n      'duration-200',\n      'relative',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    // Determine arrow rotation based on collapsed state and reverseArrow prop\n    const getArrowRotation = () => {\n      if (reverseArrow) {\n        return collapsed ? '' : 'rotate-180'\n      }\n      return collapsed ? 'rotate-180' : ''\n    }\n\n    const defaultTrigger = collapsible && trigger !== null && (\n      <button\n        onClick={handleCollapse}\n        className={`flex items-center justify-center h-10 w-full ${dBgBase300} hover:bg-base-content/10 transition-colors`}\n        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n        data-testid={testId ? `${testId}-trigger` : undefined}\n      >\n        <svg\n          className={`w-4 h-4 transition-transform ${getArrowRotation()}`}\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n    )\n\n    // Zero-width trigger (floating button when sider is collapsed to 0)\n    const zeroWidthTrigger = collapsible && isZeroWidth && collapsed && (\n      <button\n        onClick={handleCollapse}\n        className={`absolute top-1/2 -translate-y-1/2 right-0 translate-x-full w-6 h-12 flex items-center justify-center ${dBgBase300} hover:bg-base-content/10 transition-colors rounded-r z-10`}\n        aria-label=\"Expand sidebar\"\n        style={zeroWidthTriggerStyle}\n        data-testid={testId ? `${testId}-zero-trigger` : undefined}\n      >\n        <svg\n          className={`w-3 h-3 ${reverseArrow ? 'rotate-180' : ''}`}\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </button>\n    )\n\n    return (\n      <SiderContext.Provider value={{ collapsed, collapsedWidth, width }}>\n        <aside\n          ref={ref}\n          className={siderClasses}\n          style={{\n            width: typeof currentWidth === 'number' ? `${currentWidth}px` : currentWidth,\n            ...style,\n          }}\n          data-collapsed={collapsed}\n          data-theme={theme}\n          data-testid={testId}\n          aria-expanded={!collapsed}\n          {...rest}\n        >\n          <div className=\"flex-1 overflow-auto\">{children}</div>\n          {!isZeroWidth && trigger !== null && (trigger ?? defaultTrigger)}\n          {zeroWidthTrigger}\n        </aside>\n      </SiderContext.Provider>\n    )\n  }\n)\n\nLayoutSider.displayName = 'LayoutSider'\n\nexport const Layout = Object.assign(LayoutRoot, {\n  Header: LayoutHeader,\n  Footer: LayoutFooter,\n  Content: LayoutContent,\n  Sider: LayoutSider,\n})\n"],"names":["dBgBase100","dBgBase200","dBgBase300","SiderContext","createContext","useSiderContext","useContext","LayoutRoot","forwardRef","children","hasSiderProp","className","testId","rest","ref","childArray","React","hasSiderDetected","child","hasSider","layoutClasses","processedChildren","existingClassName","jsx","LayoutHeader","headerClasses","LayoutFooter","footerClasses","LayoutContent","contentClasses","BREAKPOINT_MAP","LayoutSider","width","collapsedWidth","controlledCollapsed","defaultCollapsed","collapsible","onCollapse","trigger","breakpoint","onBreakpoint","reverseArrow","theme","zeroWidthTriggerStyle","style","internalCollapsed","setInternalCollapsed","useState","broken","setBroken","collapsed","useEffect","mediaQuery","handleChange","e","isBroken","handleCollapse","useCallback","newCollapsed","currentWidth","isZeroWidth","siderClasses","getArrowRotation","defaultTrigger","zeroWidthTrigger","jsxs","Layout"],"mappings":"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"}

package/dist/components/List.d.ts

@@ -0,0 +1,79 @@
+import { default as React } from 'react';
+export interface ListPaginationConfig {
+    current?: number;
+    pageSize?: number;
+    total?: number;
+    onChange?: (page: number, pageSize: number) => void;
+}
+export interface ListGridConfig {
+    gutter?: number;
+    column?: number;
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+}
+export interface ListProps<T = unknown> extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
+    /** Data source array */
+    dataSource?: T[];
+    /** Function to render each item */
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    /** List header content */
+    header?: React.ReactNode;
+    /** List footer content */
+    footer?: React.ReactNode;
+    /** Show loading state */
+    loading?: boolean;
+    /** Pagination configuration or false to disable */
+    pagination?: ListPaginationConfig | false;
+    /** Grid layout configuration */
+    grid?: ListGridConfig;
+    /** Show border around list */
+    bordered?: boolean;
+    /** Show divider between items */
+    split?: boolean;
+    /** Size variant */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Layout direction */
+    itemLayout?: 'horizontal' | 'vertical';
+    /** Empty state text */
+    locale?: {
+        emptyText?: React.ReactNode;
+    };
+    /** Load more content (e.g., button) */
+    loadMore?: React.ReactNode;
+    /** Custom key extraction function */
+    rowKey?: keyof T | ((item: T) => React.Key);
+    /** Compound pattern children */
+    children?: React.ReactNode;
+    /** Accessible label for the list */
+    'aria-label'?: string;
+    /** Test ID for the component */
+    'data-testid'?: string;
+}
+export interface ListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /** Item content */
+    children: React.ReactNode;
+    /** Action buttons */
+    actions?: React.ReactNode[];
+    /** Extra content on the right */
+    extra?: React.ReactNode;
+    /** Test ID for this item */
+    'data-testid'?: string;
+}
+export interface ListItemMetaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Avatar or icon */
+    avatar?: React.ReactNode;
+    /** Title content */
+    title?: React.ReactNode;
+    /** Description content */
+    description?: React.ReactNode;
+}
+export type ListRowProps = ListItemProps;
+export declare const List: React.ForwardRefExoticComponent<ListProps<unknown> & React.RefAttributes<HTMLUListElement>> & {
+    Item: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>> & {
+        Meta: React.FC<ListItemMetaProps>;
+    };
+    Row: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;
+};

package/dist/components/List.js

@@ -0,0 +1,128 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import p, { forwardRef as j } from "react";
+import { Pagination as A } from "./Pagination.js";
+import { Loading as D } from "./Loading.js";
+import { useConfig as F } from "./ConfigProvider.js";
+const G = "d-list", u = "d-list-row", H = {
+  xs: "py-1",
+  sm: "py-2",
+  md: "py-3",
+  lg: "py-4",
+  xl: "py-5"
+}, y = j(
+  ({ children: i, actions: a, extra: r, className: d = "", "data-testid": o, ...l }, c) => {
+    const N = [u, d].filter(Boolean).join(" ");
+    return /* @__PURE__ */ b("li", { ref: c, className: N, "data-testid": o, ...l, children: [
+      /* @__PURE__ */ e("div", { className: "flex-1", children: i }),
+      r && /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: r }),
+      a && a.length > 0 && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 flex-shrink-0", children: a.map((x, h) => /* @__PURE__ */ e("span", { children: x }, h)) })
+    ] });
+  }
+);
+y.displayName = "List.Item";
+const z = ({
+  avatar: i,
+  title: a,
+  description: r,
+  className: d = "",
+  ...o
+}) => /* @__PURE__ */ b("div", { className: `flex items-center gap-3 ${d}`, ...o, children: [
+  i && /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: i }),
+  /* @__PURE__ */ b("div", { className: "flex-1 min-w-0", children: [
+    a && /* @__PURE__ */ e("div", { className: "font-medium truncate", children: a }),
+    r && /* @__PURE__ */ e("div", { className: "text-sm text-base-content/70 truncate", children: r })
+  ] })
+] });
+z.displayName = "List.Item.Meta";
+const R = j(
+  ({
+    dataSource: i,
+    renderItem: a,
+    header: r,
+    footer: d,
+    loading: o = !1,
+    pagination: l = !1,
+    grid: c,
+    bordered: N = !0,
+    split: x = !0,
+    size: h,
+    itemLayout: k = "horizontal",
+    locale: $,
+    loadMore: g,
+    rowKey: f,
+    children: v,
+    className: E = "",
+    "aria-label": S,
+    "data-testid": t = "list",
+    ...M
+  }, T) => {
+    const { componentSize: _ } = F(), w = h ?? _ ?? "md", B = [
+      `${G} bg-base-100 rounded-box`,
+      N && "border border-base-300",
+      x && `[&_.${u}]:border-b [&_.${u}]:border-base-200 [&_.${u}:last-child]:border-b-0`,
+      E
+    ].filter(Boolean).join(" "), C = H[w], O = c ? {
+      display: "grid",
+      gridTemplateColumns: `repeat(${c.column || 1}, minmax(0, 1fr))`,
+      gap: c.gutter ? `${c.gutter}px` : void 0
+    } : {}, V = (s, n) => f ? typeof f == "function" ? f(s) : String(s[f] ?? n) : n, L = k === "vertical" ? "flex-col items-start" : "", P = () => o ? /* @__PURE__ */ e("div", { className: "flex justify-center py-8", "data-testid": `${t}-loading`, role: "status", children: /* @__PURE__ */ e(D, { size: "md", "aria-label": "Loading list" }) }) : i && a ? i.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center py-8 text-base-content/50", "data-testid": `${t}-empty`, children: $?.emptyText ?? "No data" }) : i.map((s, n) => {
+      const m = a(s, n), W = V(s, n);
+      if (p.isValidElement(m)) {
+        const q = m.props.className || "";
+        return p.cloneElement(m, {
+          key: W,
+          className: `${q} ${C} ${L}`.trim(),
+          "data-testid": `${t}-item-${n}`
+        });
+      }
+      return m;
+    }) : v ? p.Children.map(v, (s, n) => {
+      if (p.isValidElement(s)) {
+        const m = s.props.className || "";
+        return p.cloneElement(s, {
+          className: `${m} ${C} ${L}`.trim(),
+          "data-testid": `${t}-item-${n}`
+        });
+      }
+      return s;
+    }) : /* @__PURE__ */ e("div", { className: "text-center py-8 text-base-content/50", "data-testid": `${t}-empty`, children: $?.emptyText ?? "No data" });
+    return /* @__PURE__ */ b("div", { "data-testid": t, "aria-busy": o, children: [
+      r && /* @__PURE__ */ e("div", { className: "px-4 py-3 border-b border-base-200 font-medium", "data-testid": `${t}-header`, children: r }),
+      /* @__PURE__ */ e(
+        "ul",
+        {
+          ref: T,
+          role: "list",
+          "aria-label": S,
+          className: B,
+          style: O,
+          ...M,
+          children: P()
+        }
+      ),
+      d && /* @__PURE__ */ e("div", { className: "px-4 py-3 border-t border-base-200", "data-testid": `${t}-footer`, children: d }),
+      g && /* @__PURE__ */ e("div", { className: "py-4 text-center", "data-testid": `${t}-load-more`, children: g }),
+      l && l.total !== void 0 && /* @__PURE__ */ e("div", { className: "flex justify-end pt-4", "data-testid": `${t}-pagination`, children: /* @__PURE__ */ e(
+        A,
+        {
+          current: l.current,
+          pageSize: l.pageSize,
+          total: l.total,
+          onChange: l.onChange
+        }
+      ) })
+    ] });
+  }
+);
+R.displayName = "List";
+const J = Object.assign(y, {
+  Meta: z
+}), K = Object.assign(R, {
+  Item: J,
+  Row: y
+  // Backwards compatibility with DaisyUI pattern
+});
+export {
+  K as List
+};
+//# sourceMappingURL=List.js.map

package/dist/components/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sources":["../../src/components/List.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { Pagination } from './Pagination'\nimport { Loading } from './Loading'\nimport { useConfig } from './ConfigProvider'\n\n// DaisyUI classes\nconst dList = 'd-list'\nconst dListRow = 'd-list-row'\n\nexport interface ListPaginationConfig {\n  current?: number\n  pageSize?: number\n  total?: number\n  onChange?: (page: number, pageSize: number) => void\n}\n\nexport interface ListGridConfig {\n  gutter?: number\n  column?: number\n  xs?: number\n  sm?: number\n  md?: number\n  lg?: number\n  xl?: number\n}\n\nexport interface ListProps<T = unknown> extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {\n  /** Data source array */\n  dataSource?: T[]\n  /** Function to render each item */\n  renderItem?: (item: T, index: number) => React.ReactNode\n  /** List header content */\n  header?: React.ReactNode\n  /** List footer content */\n  footer?: React.ReactNode\n  /** Show loading state */\n  loading?: boolean\n  /** Pagination configuration or false to disable */\n  pagination?: ListPaginationConfig | false\n  /** Grid layout configuration */\n  grid?: ListGridConfig\n  /** Show border around list */\n  bordered?: boolean\n  /** Show divider between items */\n  split?: boolean\n  /** Size variant */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  /** Layout direction */\n  itemLayout?: 'horizontal' | 'vertical'\n  /** Empty state text */\n  locale?: { emptyText?: React.ReactNode }\n  /** Load more content (e.g., button) */\n  loadMore?: React.ReactNode\n  /** Custom key extraction function */\n  rowKey?: keyof T | ((item: T) => React.Key)\n  /** Compound pattern children */\n  children?: React.ReactNode\n  /** Accessible label for the list */\n  'aria-label'?: string\n  /** Test ID for the component */\n  'data-testid'?: string\n}\n\nexport interface ListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /** Item content */\n  children: React.ReactNode\n  /** Action buttons */\n  actions?: React.ReactNode[]\n  /** Extra content on the right */\n  extra?: React.ReactNode\n  /** Test ID for this item */\n  'data-testid'?: string\n}\n\nexport interface ListItemMetaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Avatar or icon */\n  avatar?: React.ReactNode\n  /** Title content */\n  title?: React.ReactNode\n  /** Description content */\n  description?: React.ReactNode\n}\n\n// Also export as ListRowProps for backwards compatibility with DaisyUI pattern\nexport type ListRowProps = ListItemProps\n\nconst sizeClasses = {\n  xs: 'py-1',\n  sm: 'py-2',\n  md: 'py-3',\n  lg: 'py-4',\n  xl: 'py-5',\n}\n\nconst ListItem = forwardRef<HTMLLIElement, ListItemProps>(\n  ({ children, actions, extra, className = '', 'data-testid': testId, ...rest }, ref) => {\n    const classes = [dListRow, className].filter(Boolean).join(' ')\n\n    return (\n      <li ref={ref} className={classes} data-testid={testId} {...rest}>\n        <div className=\"flex-1\">{children}</div>\n        {extra && <div className=\"flex-shrink-0\">{extra}</div>}\n        {actions && actions.length > 0 && (\n          <div className=\"flex items-center gap-2 flex-shrink-0\">\n            {actions.map((action, index) => (\n              <span key={index}>{action}</span>\n            ))}\n          </div>\n        )}\n      </li>\n    )\n  }\n)\n\nListItem.displayName = 'List.Item'\n\nconst ListItemMeta: React.FC<ListItemMetaProps> = ({\n  avatar,\n  title,\n  description,\n  className = '',\n  ...rest\n}) => {\n  return (\n    <div className={`flex items-center gap-3 ${className}`} {...rest}>\n      {avatar && <div className=\"flex-shrink-0\">{avatar}</div>}\n      <div className=\"flex-1 min-w-0\">\n        {title && <div className=\"font-medium truncate\">{title}</div>}\n        {description && (\n          <div className=\"text-sm text-base-content/70 truncate\">{description}</div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nListItemMeta.displayName = 'List.Item.Meta'\n\nconst ListRoot = forwardRef<HTMLUListElement, ListProps>(\n  (\n    {\n      dataSource,\n      renderItem,\n      header,\n      footer,\n      loading = false,\n      pagination = false,\n      grid,\n      bordered = true,\n      split = true,\n      size,\n      itemLayout = 'horizontal',\n      locale,\n      loadMore,\n      rowKey,\n      children,\n      className = '',\n      'aria-label': ariaLabel,\n      'data-testid': testId = 'list',\n      ...rest\n    },\n    ref\n  ) => {\n    const { componentSize } = useConfig()\n    const effectiveSize = size ?? componentSize ?? 'md'\n\n    const listClasses = [\n      `${dList} bg-base-100 rounded-box`,\n      bordered && 'border border-base-300',\n      split && `[&_.${dListRow}]:border-b [&_.${dListRow}]:border-base-200 [&_.${dListRow}:last-child]:border-b-0`,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    const itemClasses = sizeClasses[effectiveSize]\n\n    // Grid styles\n    const gridStyles: React.CSSProperties = grid\n      ? {\n          display: 'grid',\n          gridTemplateColumns: `repeat(${grid.column || 1}, minmax(0, 1fr))`,\n          gap: grid.gutter ? `${grid.gutter}px` : undefined,\n        }\n      : {}\n\n    // Get key for item\n    const getItemKey = (item: unknown, index: number): React.Key => {\n      if (!rowKey) return index\n      if (typeof rowKey === 'function') return rowKey(item as Parameters<typeof rowKey>[0])\n      return String((item as Record<string, unknown>)[rowKey as string] ?? index)\n    }\n\n    // Layout class for vertical items\n    const layoutClass = itemLayout === 'vertical' ? 'flex-col items-start' : ''\n\n    // Render items from dataSource or children\n    const renderContent = () => {\n      if (loading) {\n        return (\n          <div className=\"flex justify-center py-8\" data-testid={`${testId}-loading`} role=\"status\">\n            <Loading size=\"md\" aria-label=\"Loading list\" />\n          </div>\n        )\n      }\n\n      // Use dataSource + renderItem if provided\n      if (dataSource && renderItem) {\n        if (dataSource.length === 0) {\n          return (\n            <div className=\"text-center py-8 text-base-content/50\" data-testid={`${testId}-empty`}>\n              {locale?.emptyText ?? 'No data'}\n            </div>\n          )\n        }\n\n        return dataSource.map((item, index) => {\n          const rendered = renderItem(item, index)\n          const key = getItemKey(item, index)\n          // Inject size and layout classes into list items\n          if (React.isValidElement(rendered)) {\n            const existingClassName = (rendered.props as { className?: string }).className || ''\n            return React.cloneElement(rendered, {\n              key,\n              className: `${existingClassName} ${itemClasses} ${layoutClass}`.trim(),\n              'data-testid': `${testId}-item-${index}`,\n            } as React.Attributes & { className?: string; 'data-testid'?: string })\n          }\n          return rendered\n        })\n      }\n\n      // Use compound children pattern\n      if (children) {\n        return React.Children.map(children, (child, index) => {\n          if (React.isValidElement(child)) {\n            const existingClassName = (child.props as { className?: string }).className || ''\n            return React.cloneElement(child, {\n              className: `${existingClassName} ${itemClasses} ${layoutClass}`.trim(),\n              'data-testid': `${testId}-item-${index}`,\n            } as React.Attributes & { className?: string; 'data-testid'?: string })\n          }\n          return child\n        })\n      }\n\n      return (\n        <div className=\"text-center py-8 text-base-content/50\" data-testid={`${testId}-empty`}>\n          {locale?.emptyText ?? 'No data'}\n        </div>\n      )\n    }\n\n    return (\n      <div data-testid={testId} aria-busy={loading}>\n        {header && (\n          <div className=\"px-4 py-3 border-b border-base-200 font-medium\" data-testid={`${testId}-header`}>\n            {header}\n          </div>\n        )}\n\n        <ul\n          ref={ref}\n          role=\"list\"\n          aria-label={ariaLabel}\n          className={listClasses}\n          style={gridStyles}\n          {...rest}\n        >\n          {renderContent()}\n        </ul>\n\n        {footer && (\n          <div className=\"px-4 py-3 border-t border-base-200\" data-testid={`${testId}-footer`}>\n            {footer}\n          </div>\n        )}\n\n        {loadMore && (\n          <div className=\"py-4 text-center\" data-testid={`${testId}-load-more`}>\n            {loadMore}\n          </div>\n        )}\n\n        {pagination && pagination.total !== undefined && (\n          <div className=\"flex justify-end pt-4\" data-testid={`${testId}-pagination`}>\n            <Pagination\n              current={pagination.current}\n              pageSize={pagination.pageSize}\n              total={pagination.total}\n              onChange={pagination.onChange}\n            />\n          </div>\n        )}\n      </div>\n    )\n  }\n)\n\nListRoot.displayName = 'List'\n\n// Compound component with Item and Item.Meta\nconst ItemWithMeta = Object.assign(ListItem, {\n  Meta: ListItemMeta,\n})\n\nexport const List = Object.assign(ListRoot, {\n  Item: ItemWithMeta,\n  Row: ListItem, // Backwards compatibility with DaisyUI pattern\n})\n"],"names":["dList","dListRow","sizeClasses","ListItem","forwardRef","children","actions","extra","className","testId","rest","ref","classes","jsxs","jsx","action","index","ListItemMeta","avatar","title","description","ListRoot","dataSource","renderItem","header","footer","loading","pagination","grid","bordered","split","size","itemLayout","locale","loadMore","rowKey","ariaLabel","componentSize","useConfig","effectiveSize","listClasses","itemClasses","gridStyles","getItemKey","item","layoutClass","renderContent","Loading","rendered","key","React","existingClassName","child","Pagination","ItemWithMeta","List"],"mappings":"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"}

package/dist/components/Loading.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    type?: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity';
+    spinning?: boolean;
+    children?: React.ReactNode;
+    tip?: string;
+}
+export declare const Loading: React.FC<LoadingProps>;

package/dist/components/Loading.js

@@ -0,0 +1,40 @@
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { useConfig as f } from "./ConfigProvider.js";
+const L = "d-loading", p = "d-loading-xs", x = "d-loading-sm", b = "d-loading-md", u = "d-loading-lg", N = "d-loading-xl", v = "d-loading-spinner", y = "d-loading-dots", C = "d-loading-ring", h = "d-loading-ball", j = "d-loading-bars", z = "d-loading-infinity", k = ({
+  size: l,
+  type: t = "spinner",
+  className: c = "",
+  spinning: d = !0,
+  children: e,
+  tip: s,
+  ...a
+}) => {
+  const { componentSize: r } = f(), g = l ?? r ?? "md", m = {
+    xs: p,
+    sm: x,
+    md: b,
+    lg: u,
+    xl: N
+  }, i = [L, {
+    spinner: v,
+    dots: y,
+    ring: C,
+    ball: h,
+    bars: j,
+    infinity: z
+  }[t], m[g], c].filter(Boolean).join(" ");
+  return e ? /* @__PURE__ */ o("div", { className: "relative", ...a, children: [
+    d && /* @__PURE__ */ o("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-base-100/50 backdrop-blur-sm z-10", children: [
+      /* @__PURE__ */ n("span", { className: i }),
+      s && /* @__PURE__ */ n("p", { className: "mt-2 text-sm", children: s })
+    ] }),
+    /* @__PURE__ */ n("div", { className: d ? "pointer-events-none" : "", children: e })
+  ] }) : d ? /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-2", ...a, children: [
+    /* @__PURE__ */ n("span", { className: i }),
+    s && /* @__PURE__ */ n("p", { className: "text-sm", children: s })
+  ] }) : null;
+};
+export {
+  k as Loading
+};
+//# sourceMappingURL=Loading.js.map

package/dist/components/Loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.js","sources":["../../src/components/Loading.tsx"],"sourcesContent":["import React from 'react'\nimport { useConfig } from './ConfigProvider'\n\n// DaisyUI classes\nconst dLoading = 'd-loading'\nconst dLoadingXs = 'd-loading-xs'\nconst dLoadingSm = 'd-loading-sm'\nconst dLoadingMd = 'd-loading-md'\nconst dLoadingLg = 'd-loading-lg'\nconst dLoadingXl = 'd-loading-xl'\nconst dLoadingSpinner = 'd-loading-spinner'\nconst dLoadingDots = 'd-loading-dots'\nconst dLoadingRing = 'd-loading-ring'\nconst dLoadingBall = 'd-loading-ball'\nconst dLoadingBars = 'd-loading-bars'\nconst dLoadingInfinity = 'd-loading-infinity'\n\nexport interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  type?: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity'\n  spinning?: boolean\n  children?: React.ReactNode\n  tip?: string\n}\n\nexport const Loading: React.FC<LoadingProps> = ({\n  size,\n  type = 'spinner',\n  className = '',\n  spinning = true,\n  children,\n  tip,\n  ...rest\n}) => {\n  const { componentSize } = useConfig()\n  const effectiveSize = size ?? componentSize ?? 'md'\n\n  const sizeClasses = {\n    xs: dLoadingXs,\n    sm: dLoadingSm,\n    md: dLoadingMd,\n    lg: dLoadingLg,\n    xl: dLoadingXl,\n  }\n\n  const typeClasses = {\n    spinner: dLoadingSpinner,\n    dots: dLoadingDots,\n    ring: dLoadingRing,\n    ball: dLoadingBall,\n    bars: dLoadingBars,\n    infinity: dLoadingInfinity,\n  }\n\n  const spinnerClasses = [dLoading, typeClasses[type], sizeClasses[effectiveSize], className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (children) {\n    return (\n      <div className=\"relative\" {...rest}>\n        {spinning && (\n          <div className=\"absolute inset-0 flex flex-col items-center justify-center bg-base-100/50 backdrop-blur-sm z-10\">\n            <span className={spinnerClasses}></span>\n            {tip && <p className=\"mt-2 text-sm\">{tip}</p>}\n          </div>\n        )}\n        <div className={spinning ? 'pointer-events-none' : ''}>{children}</div>\n      </div>\n    )\n  }\n\n  if (!spinning) {\n    return null\n  }\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\" {...rest}>\n      <span className={spinnerClasses}></span>\n      {tip && <p className=\"text-sm\">{tip}</p>}\n    </div>\n  )\n}\n"],"names":["dLoading","dLoadingXs","dLoadingSm","dLoadingMd","dLoadingLg","dLoadingXl","dLoadingSpinner","dLoadingDots","dLoadingRing","dLoadingBall","dLoadingBars","dLoadingInfinity","Loading","size","type","className","spinning","children","tip","rest","componentSize","useConfig","effectiveSize","sizeClasses","spinnerClasses","jsxs","jsx"],"mappings":";;AAIA,MAAMA,IAAW,aACXC,IAAa,gBACbC,IAAa,gBACbC,IAAa,gBACbC,IAAa,gBACbC,IAAa,gBACbC,IAAkB,qBAClBC,IAAe,kBACfC,IAAe,kBACfC,IAAe,kBACfC,IAAe,kBACfC,IAAmB,sBAUZC,IAAkC,CAAC;AAAA,EAC9C,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,eAAAC,EAAA,IAAkBC,EAAA,GACpBC,IAAgBT,KAAQO,KAAiB,MAEzCG,IAAc;AAAA,IAClB,IAAItB;AAAA,IACJ,IAAIC;AAAA,IACJ,IAAIC;AAAA,IACJ,IAAIC;AAAA,IACJ,IAAIC;AAAA,EAAA,GAYAmB,IAAiB,CAACxB,GATJ;AAAA,IAClB,SAASM;AAAA,IACT,MAAMC;AAAA,IACN,MAAMC;AAAA,IACN,MAAMC;AAAA,IACN,MAAMC;AAAA,IACN,UAAUC;AAAA,EAAA,EAGkCG,CAAI,GAAGS,EAAYD,CAAa,GAAGP,CAAS,EACvF,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SAAIE,IAEA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,YAAY,GAAGN,GAC3B,UAAA;AAAA,IAAAH,KACC,gBAAAS,EAAC,OAAA,EAAI,WAAU,mGACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWF,EAAA,CAAgB;AAAA,MAChCN,KAAO,gBAAAQ,EAAC,KAAA,EAAE,WAAU,gBAAgB,UAAAR,EAAA,CAAI;AAAA,IAAA,GAC3C;AAAA,sBAED,OAAA,EAAI,WAAWF,IAAW,wBAAwB,IAAK,UAAAC,EAAA,CAAS;AAAA,EAAA,GACnE,IAICD,IAKH,gBAAAS,EAAC,OAAA,EAAI,WAAU,oCAAoC,GAAGN,GACpD,UAAA;AAAA,IAAA,gBAAAO,EAAC,QAAA,EAAK,WAAWF,EAAA,CAAgB;AAAA,IAChCN,KAAO,gBAAAQ,EAAC,KAAA,EAAE,WAAU,WAAW,UAAAR,EAAA,CAAI;AAAA,EAAA,GACtC,IAPO;AASX;"}

package/dist/components/Mask.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export type MaskShape = 'squircle' | 'heart' | 'hexagon' | 'hexagon-2' | 'decagon' | 'pentagon' | 'diamond' | 'square' | 'circle' | 'star' | 'star-2' | 'triangle' | 'triangle-2' | 'triangle-3' | 'triangle-4';
+export type MaskHalf = 'half-1' | 'half-2';
+export interface MaskProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Shape of the mask */
+    shape: MaskShape;
+    /** Show only half of the mask */
+    half?: MaskHalf;
+    /** Content to mask (typically an image) */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare const Mask: React.ForwardRefExoticComponent<MaskProps & React.RefAttributes<HTMLDivElement>>;