@bricks-toolkit/toolkit 0.1.0 → 0.1.1

package/dist/sidebar/index.d.mts

@@ -0,0 +1,96 @@
+import { ReactNode, ElementType, CSSProperties } from 'react';
+
+interface SidebarItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    isActive?: boolean;
+    badge?: ReactNode;
+    /** Optional component to use for the item (e.g., NavLink) */
+    component?: ElementType;
+    /** Optional props for the custom component */
+    componentProps?: Record<string, unknown>;
+    /** Optional nested items */
+    items?: SidebarItem[];
+    /** Whether the item is currently expanded (for nested items) */
+    isExpanded?: boolean;
+    /** Whether the item should be hidden */
+    hidden?: boolean;
+}
+interface SidebarGroup {
+    id: string;
+    label?: string;
+    items: SidebarItem[];
+    /** Whether the group should be hidden */
+    hidden?: boolean;
+}
+interface SidebarClassNames {
+    root?: string;
+    header?: string;
+    content?: string;
+    footer?: string;
+    group?: string;
+    groupLabel?: string;
+    item?: string;
+    itemIcon?: string;
+    itemLabel?: string;
+    itemActive?: string;
+    itemCollapsed?: string;
+    toggleButton?: string;
+}
+interface SidebarStyles {
+    root?: CSSProperties;
+    header?: CSSProperties;
+    content?: CSSProperties;
+    footer?: CSSProperties;
+    group?: CSSProperties;
+    groupLabel?: CSSProperties;
+    item?: CSSProperties;
+    itemIcon?: CSSProperties;
+    itemLabel?: CSSProperties;
+    toggleButton?: CSSProperties;
+}
+interface SidebarProps {
+    /** Groups of navigation items to display in the sidebar. */
+    groups: SidebarGroup[];
+    /** Whether the sidebar is in its collapsed state. */
+    isCollapsed?: boolean;
+    /** Callback triggered when the collapsed state changes. */
+    onToggleCollapse?: (isCollapsed: boolean) => void;
+    /** Optional logo or brand element to display at the top. */
+    logo?: ReactNode;
+    /** Optional footer content. */
+    footer?: ReactNode;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Whether to show the glass effect. */
+    glass?: boolean;
+    /** Custom width for expanded state (default: 288px / 72rem) */
+    width?: string | number;
+    /** Custom width for collapsed state (default: 80px / 20rem) */
+    collapsedWidth?: string | number;
+    /** Whether to show the built-in collapse toggle button */
+    showToggleButton?: boolean;
+    /** Position of the toggle button ('top' | 'bottom' | 'center') */
+    togglePosition?: 'top' | 'bottom' | 'center';
+    /** Placement of the sidebar */
+    position?: 'left' | 'right';
+    /** Whether icons should be centered when collapsed */
+    centerIcons?: boolean;
+    /** Deep customization of CSS classes */
+    classNames?: SidebarClassNames;
+    /** Deep customization of inline styles */
+    styles?: SidebarStyles;
+    /** Custom render function for items */
+    renderItem?: (item: SidebarItem, isCollapsed: boolean) => ReactNode;
+}
+
+interface SidebarComponent {
+    (props: SidebarProps): React.JSX.Element;
+    displayName?: string;
+}
+declare const Sidebar: SidebarComponent;
+
+export { Sidebar, type SidebarGroup, type SidebarItem, type SidebarProps };

package/dist/sidebar/index.d.ts

@@ -0,0 +1,96 @@
+import { ReactNode, ElementType, CSSProperties } from 'react';
+
+interface SidebarItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    isActive?: boolean;
+    badge?: ReactNode;
+    /** Optional component to use for the item (e.g., NavLink) */
+    component?: ElementType;
+    /** Optional props for the custom component */
+    componentProps?: Record<string, unknown>;
+    /** Optional nested items */
+    items?: SidebarItem[];
+    /** Whether the item is currently expanded (for nested items) */
+    isExpanded?: boolean;
+    /** Whether the item should be hidden */
+    hidden?: boolean;
+}
+interface SidebarGroup {
+    id: string;
+    label?: string;
+    items: SidebarItem[];
+    /** Whether the group should be hidden */
+    hidden?: boolean;
+}
+interface SidebarClassNames {
+    root?: string;
+    header?: string;
+    content?: string;
+    footer?: string;
+    group?: string;
+    groupLabel?: string;
+    item?: string;
+    itemIcon?: string;
+    itemLabel?: string;
+    itemActive?: string;
+    itemCollapsed?: string;
+    toggleButton?: string;
+}
+interface SidebarStyles {
+    root?: CSSProperties;
+    header?: CSSProperties;
+    content?: CSSProperties;
+    footer?: CSSProperties;
+    group?: CSSProperties;
+    groupLabel?: CSSProperties;
+    item?: CSSProperties;
+    itemIcon?: CSSProperties;
+    itemLabel?: CSSProperties;
+    toggleButton?: CSSProperties;
+}
+interface SidebarProps {
+    /** Groups of navigation items to display in the sidebar. */
+    groups: SidebarGroup[];
+    /** Whether the sidebar is in its collapsed state. */
+    isCollapsed?: boolean;
+    /** Callback triggered when the collapsed state changes. */
+    onToggleCollapse?: (isCollapsed: boolean) => void;
+    /** Optional logo or brand element to display at the top. */
+    logo?: ReactNode;
+    /** Optional footer content. */
+    footer?: ReactNode;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Whether to show the glass effect. */
+    glass?: boolean;
+    /** Custom width for expanded state (default: 288px / 72rem) */
+    width?: string | number;
+    /** Custom width for collapsed state (default: 80px / 20rem) */
+    collapsedWidth?: string | number;
+    /** Whether to show the built-in collapse toggle button */
+    showToggleButton?: boolean;
+    /** Position of the toggle button ('top' | 'bottom' | 'center') */
+    togglePosition?: 'top' | 'bottom' | 'center';
+    /** Placement of the sidebar */
+    position?: 'left' | 'right';
+    /** Whether icons should be centered when collapsed */
+    centerIcons?: boolean;
+    /** Deep customization of CSS classes */
+    classNames?: SidebarClassNames;
+    /** Deep customization of inline styles */
+    styles?: SidebarStyles;
+    /** Custom render function for items */
+    renderItem?: (item: SidebarItem, isCollapsed: boolean) => ReactNode;
+}
+
+interface SidebarComponent {
+    (props: SidebarProps): React.JSX.Element;
+    displayName?: string;
+}
+declare const Sidebar: SidebarComponent;
+
+export { Sidebar, type SidebarGroup, type SidebarItem, type SidebarProps };

package/dist/sidebar/index.mjs

@@ -0,0 +1 @@
+import {useState}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {ChevronRightIcon,ChevronLeftIcon,ChevronDownIcon}from'@heroicons/react/24/outline';import {jsx,jsxs,Fragment}from'react/jsx-runtime';function a(...s){return twMerge(clsx(s))}var C=({groups:s,isCollapsed:I,onToggleCollapse:u,logo:m,footer:x,className:N,glass:k=false,width:E=288,collapsedWidth:R=80,showToggleButton:L=false,togglePosition:p="center",position:l="left",centerIcons:A=true,classNames:o={},styles:n={},renderItem:f})=>{let[B,j]=useState(false),[z,G]=useState({}),r=I??B,M=()=>{let e=!r;u?u(e):j(e);},P=e=>{G(d=>({...d,[e]:!d[e]}));},D=r?R:E,h=(e,d=0)=>{if(e.hidden)return null;if(f)return jsx("div",{children:f(e,r)},e.id);let c=e.items&&e.items.length>0,v=z[e.id]??!!e.isExpanded,y=e.component??"button",V=jsxs(Fragment,{children:[e.icon&&jsx("span",{className:a("shrink-0 transition-colors duration-normal",e.isActive?"text-text-inverse":"text-text-muted group-hover:text-text",r&&A&&"mx-auto",o.itemIcon),style:n.itemIcon,children:e.icon}),!r&&jsx("span",{className:a("truncate",o.itemLabel),style:n.itemLabel,children:e.label}),!r&&jsxs("div",{className:"ml-auto flex items-center gap-2",children:[e.badge&&jsx("span",{className:"shrink-0",children:e.badge}),c&&jsx(ChevronDownIcon,{className:a("w-4 h-4 transition-transform duration-normal",v&&"rotate-180")})]}),r&&jsx("div",{className:"absolute left-full ml-2 px-2 py-1 bg-surface-secondary border border-border rounded shadow-lg text-xs opacity-0 pointer-events-none group-hover:opacity-100 transition-opacity z-index-tooltip whitespace-nowrap text-text",children:e.label})]});return jsxs("div",{className:"w-full",children:[jsx(y,{type:y==="button"?"button":void 0,onClick:b=>{c&&!r&&(b.preventDefault(),P(e.id)),e.onClick?.();},className:a("w-full flex items-center gap-4 transition-all duration-normal group relative text-base rounded-lg",d===0?"px-4 py-3":"px-3 py-2 pl-10",e.isActive?"bg-black text-text-inverse shadow-md shadow-black/20 font-bold":"text-text-secondary hover:bg-hover hover:text-text",r&&"justify-center px-0",e.isActive&&o.itemActive,r&&o.itemCollapsed,o.item),style:n.item,title:r?e.label:void 0,...e.componentProps??{},children:V}),c&&v&&!r&&jsx("div",{className:"mt-1 space-y-1",children:e.items?.map(b=>h(b,d+1))})]},e.id)},J=L&&jsx("button",{onClick:M,className:a("absolute z-index-popover flex items-center justify-center w-8 h-8 rounded-full bg-surface border border-border shadow-sm hover:shadow-md transition-all duration-normal hover:bg-hover text-text-muted hover:text-text",l==="left"?"-right-4":"-left-4",p==="top"&&"top-12",p==="center"&&"top-1/2 -translate-y-1/2",p==="bottom"&&"bottom-12",o.toggleButton),style:n.toggleButton,"aria-label":r?"Expand sidebar":"Collapse sidebar",children:r?l==="left"?jsx(ChevronRightIcon,{className:"w-4 h-4"}):jsx(ChevronLeftIcon,{className:"w-4 h-4"}):l==="left"?jsx(ChevronLeftIcon,{className:"w-4 h-4"}):jsx(ChevronRightIcon,{className:"w-4 h-4"})});return jsxs("aside",{className:a("flex flex-col h-full bg-surface transition-all duration-slow ease-in-out z-index-sticky shadow-premium relative",l==="right"&&"border-l border-border",l==="left"&&"border-r border-border",k&&"glass",o.root,N),style:{width:D,...n.root},children:[J,m&&jsx("div",{className:a("flex items-center px-6 pt-10 pb-6",r&&"justify-center px-0",o.header),style:n.header,children:m}),jsx("div",{className:a("flex-1 overflow-y-auto overflow-x-hidden px-4 py-6 space-y-10 custom-scrollbar",o.content),style:n.content,children:s.map(e=>e.hidden?null:jsxs("div",{className:a("space-y-4",o.group),style:n.group,children:[e.label&&!r&&jsx("h3",{className:a("px-2 text-xs font-bold text-text-muted uppercase tracking-wider",o.groupLabel),style:n.groupLabel,children:e.label}),jsx("div",{className:"space-y-1",children:e.items.map(d=>h(d))})]},e.id))}),x&&jsx("div",{className:a("p-6 mt-auto border-t border-border/50",r&&"flex justify-center px-0",o.footer),style:n.footer,children:x})]})};C.displayName="Sidebar";export{C as Sidebar};

package/dist/skeleton/index.cjs

@@ -0,0 +1 @@
+'use strict';var react=require('react'),clsx=require('clsx'),tailwindMerge=require('tailwind-merge'),jsxRuntime=require('react/jsx-runtime');function l(...p){return tailwindMerge.twMerge(clsx.clsx(p))}var g={default:"animate-pulse bg-skeleton",wave:"skeleton-wave bg-skeleton",pulse:"animate-pulse bg-skeleton-shine"},x={rectangle:"rounded-sm",circle:"rounded-full",rounded:"rounded-md"},s=react.forwardRef(function({className:r,variant:a="wave",shape:n="rectangle",width:e,height:o,style:d,...f},m){return jsxRuntime.jsx("div",{ref:m,role:"status","aria-busy":"true","aria-label":"Loading",style:{width:e!==void 0?typeof e=="number"?`${String(e)}px`:e:void 0,height:o!==void 0?typeof o=="number"?`${String(o)}px`:o:void 0,...d},className:l("overflow-hidden",g[a],x[n],r),...f})});s.displayName="Skeleton";var k=react.forwardRef(function({lines:r=3,variant:a="wave",shortLast:n=true,className:e,...o},d){return jsxRuntime.jsx("div",{ref:d,className:l("flex flex-col gap-2",e),role:"status","aria-busy":"true","aria-label":"Loading",...o,children:Array.from({length:r}).map((f,m)=>{let i=m===r-1;return jsxRuntime.jsx(s,{variant:a,height:14,className:l(i&&n?"w-3/5":"w-full")},m)})})});k.displayName="SkeletonText";var h=react.forwardRef(function({size:r=40,variant:a="wave",className:n,...e},o){return jsxRuntime.jsx(s,{ref:o,variant:a,shape:"circle",width:r,height:r,className:l("shrink-0",n),...e})});h.displayName="SkeletonAvatar";var y=react.forwardRef(function({showImage:r=true,imageHeight:a=160,lines:n=3,variant:e="wave",className:o,...d},f){return jsxRuntime.jsxs("div",{ref:f,className:l("rounded-lg border border-border bg-surface overflow-hidden flex flex-col",o),role:"status","aria-busy":"true","aria-label":"Loading",...d,children:[r&&jsxRuntime.jsx(s,{variant:e,shape:"rectangle",height:a,className:"w-full rounded-none"}),jsxRuntime.jsxs("div",{className:"flex flex-col gap-2 p-4",children:[jsxRuntime.jsx(s,{variant:e,height:20,className:"w-2/3"}),jsxRuntime.jsx(k,{lines:n,variant:e,className:"mt-1"}),jsxRuntime.jsxs("div",{className:"flex items-center gap-2 mt-2",children:[jsxRuntime.jsx(s,{variant:e,width:80,height:32,shape:"rounded"}),jsxRuntime.jsx(s,{variant:e,width:80,height:32,shape:"rounded"})]})]})]})});y.displayName="SkeletonCard";var w=react.forwardRef(function({rows:r=5,columns:a=4,variant:n="wave",showHeader:e=true,className:o,...d},f){return jsxRuntime.jsxs("div",{ref:f,className:l("w-full rounded-lg border border-border overflow-hidden bg-surface",o),role:"status","aria-busy":"true","aria-label":"Loading",...d,children:[e&&jsxRuntime.jsx("div",{className:"flex items-center gap-4 border-b border-border px-4 py-2 bg-surface-secondary",children:Array.from({length:a}).map((m,i)=>jsxRuntime.jsx(s,{variant:n,height:14,className:l(i===0?"w-1/4":i===a-1?"w-16":"flex-1")},i))}),Array.from({length:r}).map((m,i)=>jsxRuntime.jsx("div",{className:l("flex items-center gap-4 px-4 py-2",i<r-1&&"border-b border-border"),children:Array.from({length:a}).map((R,v)=>jsxRuntime.jsx(s,{variant:n,height:14,className:l(v===0?"w-1/4":v===a-1?"w-16":"flex-1")},v))},i))]})});w.displayName="SkeletonTable";exports.Skeleton=s;exports.SkeletonAvatar=h;exports.SkeletonCard=y;exports.SkeletonTable=w;exports.SkeletonText=k;

package/dist/skeleton/index.d.mts

@@ -0,0 +1,76 @@
+import { HTMLAttributes } from 'react';
+
+type SkeletonVariant = 'default' | 'wave' | 'pulse';
+type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Animation style of the skeleton. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** Shape of the skeleton block. Defaults to 'rectangle'. */
+    shape?: SkeletonShape;
+    /** Explicit width (e.g. '100%', '200px'). Falls back to the element's natural width. */
+    width?: string | number;
+    /** Explicit height (e.g. '1rem', 48). Falls back to the element's natural height. */
+    height?: string | number;
+}
+interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of text lines to render. Defaults to 3. */
+    lines?: number;
+    /** Animation variant forwarded to each line. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** When true the last line is shorter (≈ 60 %) to look like natural prose. Defaults to true. */
+    shortLast?: boolean;
+}
+interface SkeletonAvatarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Diameter of the avatar circle in pixels. Defaults to 40. */
+    size?: number;
+    /** Animation variant. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+}
+interface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Show a header image placeholder at the top of the card. Defaults to true. */
+    showImage?: boolean;
+    /** Height of the image placeholder in pixels. Defaults to 160. */
+    imageHeight?: number;
+    /** Number of text-line skeletons in the body. Defaults to 3. */
+    lines?: number;
+    /** Animation variant forwarded to all children. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+}
+interface SkeletonTableProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of rows to render. Defaults to 5. */
+    rows?: number;
+    /** Number of columns to render. Defaults to 4. */
+    columns?: number;
+    /** Animation variant. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** Show a header row above the body rows. Defaults to true. */
+    showHeader?: boolean;
+}
+
+/**
+ * Primitive skeleton block. Use this as the building brick for any custom
+ * layout skeleton you need.
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Multi-line text placeholder. The last line is intentionally shorter to
+ * mimic natural prose paragraph endings.
+ */
+declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Circular avatar placeholder. Pairs naturally with SkeletonText to build
+ * user-card or comment-thread loaders.
+ */
+declare const SkeletonAvatar: React.ForwardRefExoticComponent<SkeletonAvatarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Pre-composed card skeleton mirroring the Card component structure:
+ * optional hero image → title → description lines → action bar.
+ */
+declare const SkeletonCard: React.ForwardRefExoticComponent<SkeletonCardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Full table placeholder matching the Table component's visual grid.
+ * Renders a configurable number of column headers and body rows.
+ */
+declare const SkeletonTable: React.ForwardRefExoticComponent<SkeletonTableProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonCard, type SkeletonCardProps, type SkeletonProps, type SkeletonShape, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant };

package/dist/skeleton/index.d.ts

@@ -0,0 +1,76 @@
+import { HTMLAttributes } from 'react';
+
+type SkeletonVariant = 'default' | 'wave' | 'pulse';
+type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Animation style of the skeleton. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** Shape of the skeleton block. Defaults to 'rectangle'. */
+    shape?: SkeletonShape;
+    /** Explicit width (e.g. '100%', '200px'). Falls back to the element's natural width. */
+    width?: string | number;
+    /** Explicit height (e.g. '1rem', 48). Falls back to the element's natural height. */
+    height?: string | number;
+}
+interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of text lines to render. Defaults to 3. */
+    lines?: number;
+    /** Animation variant forwarded to each line. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** When true the last line is shorter (≈ 60 %) to look like natural prose. Defaults to true. */
+    shortLast?: boolean;
+}
+interface SkeletonAvatarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Diameter of the avatar circle in pixels. Defaults to 40. */
+    size?: number;
+    /** Animation variant. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+}
+interface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Show a header image placeholder at the top of the card. Defaults to true. */
+    showImage?: boolean;
+    /** Height of the image placeholder in pixels. Defaults to 160. */
+    imageHeight?: number;
+    /** Number of text-line skeletons in the body. Defaults to 3. */
+    lines?: number;
+    /** Animation variant forwarded to all children. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+}
+interface SkeletonTableProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of rows to render. Defaults to 5. */
+    rows?: number;
+    /** Number of columns to render. Defaults to 4. */
+    columns?: number;
+    /** Animation variant. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** Show a header row above the body rows. Defaults to true. */
+    showHeader?: boolean;
+}
+
+/**
+ * Primitive skeleton block. Use this as the building brick for any custom
+ * layout skeleton you need.
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Multi-line text placeholder. The last line is intentionally shorter to
+ * mimic natural prose paragraph endings.
+ */
+declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Circular avatar placeholder. Pairs naturally with SkeletonText to build
+ * user-card or comment-thread loaders.
+ */
+declare const SkeletonAvatar: React.ForwardRefExoticComponent<SkeletonAvatarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Pre-composed card skeleton mirroring the Card component structure:
+ * optional hero image → title → description lines → action bar.
+ */
+declare const SkeletonCard: React.ForwardRefExoticComponent<SkeletonCardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Full table placeholder matching the Table component's visual grid.
+ * Renders a configurable number of column headers and body rows.
+ */
+declare const SkeletonTable: React.ForwardRefExoticComponent<SkeletonTableProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonCard, type SkeletonCardProps, type SkeletonProps, type SkeletonShape, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant };

package/dist/skeleton/index.mjs

@@ -0,0 +1 @@
+import {forwardRef}from'react';import {clsx}from'clsx';import {twMerge}from'tailwind-merge';import {jsx,jsxs}from'react/jsx-runtime';function l(...p){return twMerge(clsx(p))}var g={default:"animate-pulse bg-skeleton",wave:"skeleton-wave bg-skeleton",pulse:"animate-pulse bg-skeleton-shine"},x={rectangle:"rounded-sm",circle:"rounded-full",rounded:"rounded-md"},s=forwardRef(function({className:r,variant:a="wave",shape:n="rectangle",width:e,height:o,style:d,...f},m){return jsx("div",{ref:m,role:"status","aria-busy":"true","aria-label":"Loading",style:{width:e!==void 0?typeof e=="number"?`${String(e)}px`:e:void 0,height:o!==void 0?typeof o=="number"?`${String(o)}px`:o:void 0,...d},className:l("overflow-hidden",g[a],x[n],r),...f})});s.displayName="Skeleton";var k=forwardRef(function({lines:r=3,variant:a="wave",shortLast:n=true,className:e,...o},d){return jsx("div",{ref:d,className:l("flex flex-col gap-2",e),role:"status","aria-busy":"true","aria-label":"Loading",...o,children:Array.from({length:r}).map((f,m)=>{let i=m===r-1;return jsx(s,{variant:a,height:14,className:l(i&&n?"w-3/5":"w-full")},m)})})});k.displayName="SkeletonText";var h=forwardRef(function({size:r=40,variant:a="wave",className:n,...e},o){return jsx(s,{ref:o,variant:a,shape:"circle",width:r,height:r,className:l("shrink-0",n),...e})});h.displayName="SkeletonAvatar";var y=forwardRef(function({showImage:r=true,imageHeight:a=160,lines:n=3,variant:e="wave",className:o,...d},f){return jsxs("div",{ref:f,className:l("rounded-lg border border-border bg-surface overflow-hidden flex flex-col",o),role:"status","aria-busy":"true","aria-label":"Loading",...d,children:[r&&jsx(s,{variant:e,shape:"rectangle",height:a,className:"w-full rounded-none"}),jsxs("div",{className:"flex flex-col gap-2 p-4",children:[jsx(s,{variant:e,height:20,className:"w-2/3"}),jsx(k,{lines:n,variant:e,className:"mt-1"}),jsxs("div",{className:"flex items-center gap-2 mt-2",children:[jsx(s,{variant:e,width:80,height:32,shape:"rounded"}),jsx(s,{variant:e,width:80,height:32,shape:"rounded"})]})]})]})});y.displayName="SkeletonCard";var w=forwardRef(function({rows:r=5,columns:a=4,variant:n="wave",showHeader:e=true,className:o,...d},f){return jsxs("div",{ref:f,className:l("w-full rounded-lg border border-border overflow-hidden bg-surface",o),role:"status","aria-busy":"true","aria-label":"Loading",...d,children:[e&&jsx("div",{className:"flex items-center gap-4 border-b border-border px-4 py-2 bg-surface-secondary",children:Array.from({length:a}).map((m,i)=>jsx(s,{variant:n,height:14,className:l(i===0?"w-1/4":i===a-1?"w-16":"flex-1")},i))}),Array.from({length:r}).map((m,i)=>jsx("div",{className:l("flex items-center gap-4 px-4 py-2",i<r-1&&"border-b border-border"),children:Array.from({length:a}).map((R,v)=>jsx(s,{variant:n,height:14,className:l(v===0?"w-1/4":v===a-1?"w-16":"flex-1")},v))},i))]})});w.displayName="SkeletonTable";export{s as Skeleton,h as SkeletonAvatar,y as SkeletonCard,w as SkeletonTable,k as SkeletonText};