npm - erp-pro-ui - Versions diffs - 0.2.6 → 0.2.7 - Mend

erp-pro-ui 0.2.6 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (422) hide show

package/dist/chunks/{sidebar-Cq7UbKJT.cjs → sidebar-DDRWkz5k.cjs} RENAMED Viewed

@@ -1,10 +1,9 @@
-require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-LRbEQHYs.cjs");
-const require_icons = require("./icons-ub9iu-JG.cjs");
-const require_button = require("./button-uD87K76W.cjs");
-const require_DropdownMenu = require("./DropdownMenu-yh04burS.cjs");
-const require_typography = require("./typography-CFIiYk1d.cjs");
-const require_SunToMoonButton = require("./SunToMoonButton-gX4Kk_5B.cjs");
+const require_utils = require("./utils-CoA0q63n.cjs");
+const require_icons = require("./icons-Ci8yEvvF.cjs");
+const require_button = require("./button-D2ZYmVda.cjs");
+const require_DropdownMenu = require("./DropdownMenu-CEmlmX7P.cjs");
+const require_typography = require("./typography-C5fYwhp2.cjs");
+const require_SunToMoonButton = require("./SunToMoonButton-DUuIqw22.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/navigation/sidebar/HamburgerIcon.tsx
@@ -446,9 +445,9 @@ function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange,
 		dir: resolvedDirection,
 		className: require_utils.mergeClassNames("sticky top-2 z-40 mb-4 flex items-center rounded-md border border-ds-border-3 bg-ds-surface-1/95 px-4 py-3 shadow-[0_4px_14px_color-mix(in_srgb,var(--ds-color-fg)_8%,transparent)] backdrop-blur-md", headerClassName),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: require_utils.mergeClassNames("flex w-full justify-between gap-4", isRtl && "flex-row-reverse"),
+			className: "flex w-full justify-between gap-4",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: require_utils.mergeClassNames("flex min-w-0 items-center gap-3", isRtl && "flex-row-reverse text-right", headerTitleClassName),
+				className: require_utils.mergeClassNames("flex min-w-0 items-center gap-3", headerTitleClassName),
 				children: [resolvedHeaderLeading, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "min-w-0",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_typography.Typography, {
@@ -463,7 +462,7 @@ function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange,
 					})]
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: require_utils.mergeClassNames("border-ds-border-4 flex min-h-11 shrink-0 items-center gap-1 rounded-full border bg-ds-surface-1 px-2 py-1 shadow-[0_2px_8px_color-mix(in_srgb,var(--ds-color-fg)_6%,transparent)]", isRtl && "flex-row-reverse", headerActionsClassName),
+				className: require_utils.mergeClassNames("border-ds-border-4 flex min-h-11 shrink-0 items-center gap-1 rounded-full border bg-ds-surface-1 px-2 py-1 shadow-[0_2px_8px_color-mix(in_srgb,var(--ds-color-fg)_6%,transparent)]", headerActionsClassName),
 				children: resolvedHeaderActions
 			})]
 		})
@@ -472,7 +471,6 @@ function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange,
 		headerActionsClassName,
 		headerClassName,
 		headerTitleClassName,
-		isRtl,
 		resolvedDirection,
 		resolvedHeaderActions,
 		resolvedHeaderLeading,
@@ -543,4 +541,4 @@ Object.defineProperty(exports, "SidebarLinks", {
 	}
 });
-//# sourceMappingURL=sidebar-Cq7UbKJT.cjs.map
+//# sourceMappingURL=sidebar-DDRWkz5k.cjs.map

package/dist/chunks/{sidebar-Cq7UbKJT.cjs.map → sidebar-DDRWkz5k.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidebar-Cq7UbKJT.cjs","names":[],"sources":["../../src/components/navigation/sidebar/HamburgerIcon.tsx","../../src/components/navigation/sidebar/NavLink.tsx","../../src/components/navigation/sidebar/SidebarLinks.tsx","../../src/components/navigation/sidebar/Sidebar.tsx","../../src/components/navigation/sidebar/DashboardSidebarShell.tsx"],"sourcesContent":["import { mergeClassNames } from \"../../../utils\";\n\nexport interface HamburgerIconProps {\n isOpen: boolean;\n className?: string;\n}\n\nconst lineClassName =\n \"block h-0.5 w-full rounded-lg bg-current transition-all duration-300 ease-in-out\";\n\nexport function HamburgerIcon({ isOpen, className }: HamburgerIconProps) {\n return (\n <span\n className={mergeClassNames(\n \"relative flex h-4 w-5 flex-col items-center justify-between\",\n className,\n )}\n aria-hidden=\"true\"\n >\n <span\n className={mergeClassNames(\n lineClassName,\n isOpen && \"translate-y-[5px] rotate-45 transform\",\n )}\n />\n <span className={mergeClassNames(lineClassName, isOpen && \"w-0\")} />\n <span\n className={mergeClassNames(\n lineClassName,\n isOpen && \"-translate-y-[9px] -rotate-45 transform\",\n )}\n />\n </span>\n );\n}\n","import { useMemo } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport type { SidebarNavLinkProps } from \"./types\";\n\nexport function NavLink({\n className,\n children,\n style,\n borderRadius,\n disabled = false,\n href,\n target,\n rel,\n onClick,\n}: SidebarNavLinkProps) {\n const memoizedStyle = useMemo(\n () => (borderRadius !== undefined ? { ...style, borderRadius } : style),\n [borderRadius, style],\n );\n\n if (href) {\n const resolvedRel = target === \"_blank\" ? (rel ?? \"noreferrer noopener\") : rel;\n\n return (\n <a\n href={href}\n className={className}\n style={memoizedStyle}\n target={target}\n rel={resolvedRel}\n aria-disabled={disabled}\n onClick={(event) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onClick?.(event);\n }}\n >\n {children}\n </a>\n );\n }\n\n return (\n <Button\n type=\"button\"\n variant=\"tertiary\"\n className={className}\n style={memoizedStyle}\n disabled={disabled}\n onClick={onClick}\n >\n {children}\n </Button>\n );\n}\n","import { mergeClassNames } from \"../../../utils\";\nimport { NavLink } from \"./NavLink\";\nimport type { SidebarDirection, SidebarItem, SidebarLinksProps } from \"./types\";\n\nconst rtlLanguages = /^(ar\|fa\|ur\|he)(-\|$)/i;\n\nfunction resolveDirection(\n direction: SidebarDirection,\n): Exclude<SidebarDirection, \"auto\"> {\n if (direction !== \"auto\") {\n return direction;\n }\n\n if (typeof document === \"undefined\") {\n return \"ltr\";\n }\n\n const explicitDirection =\n document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n if (explicitDirection === \"rtl\" \|\| explicitDirection === \"ltr\") {\n return explicitDirection;\n }\n\n if (\n typeof navigator !== \"undefined\" &&\n rtlLanguages.test(navigator.language)\n ) {\n return \"rtl\";\n }\n\n return \"ltr\";\n}\n\nfunction isRouteActive(item: SidebarItem, activePath?: string): boolean {\n if (typeof item.active === \"boolean\") {\n return item.active;\n }\n\n if (!activePath \|\| !item.href) {\n return false;\n }\n\n return activePath === item.href \|\| activePath.startsWith(`${item.href}/`);\n}\n\nexport function SidebarLinks({\n items,\n activePath,\n onItemSelect,\n direction = \"auto\",\n className,\n itemClassName,\n activeItemClassName,\n}: SidebarLinksProps) {\n const effectiveDirection = resolveDirection(direction);\n const visibleItems = items.filter((item) => !item.hidden);\n\n return (\n <ul className={mergeClassNames(\"space-y-1.5\", className)}>\n {visibleItems.map((item) => {\n const active = isRouteActive(item, activePath);\n\n return (\n <li key={item.id} className=\"relative\">\n <NavLink\n href={item.href}\n disabled={item.disabled}\n className={mergeClassNames(\n \"group relative flex w-full items-center gap-2.5 rounded-md border px-3 py-2.5 transition-all duration-200\",\n effectiveDirection === \"rtl\" ? \"text-right\" : \"text-left\",\n \"border-transparent text-ds-2 hover:border-ds-border-3 hover:bg-ds-surface-2/80 hover:text-ds-1\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60 focus-visible:ring-offset-2 focus-visible:ring-offset-ds-canvas\",\n item.disabled && \"cursor-not-allowed opacity-50\",\n active &&\n \"border-ds-border-accent/35 bg-ds-accent-subtle text-ds-1 shadow-[0_4px_12px_color-mix(in_srgb,var(--ds-color-fg)_8%,transparent)]\",\n active && activeItemClassName,\n itemClassName,\n )}\n onClick={(event) => {\n item.onSelect?.(event);\n onItemSelect?.(item, event);\n if (onItemSelect) {\n event.preventDefault();\n }\n }}\n >\n <span\n className={mergeClassNames(\n \"inline-flex h-5 w-5 shrink-0 items-center justify-center\",\n active ? \"text-ds-1\" : \"text-ds-2 group-hover:text-ds-1\",\n )}\n aria-hidden=\"true\"\n >\n {item.icon}\n </span>\n <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n {item.label}\n </span>\n {item.badge ? (\n <span className=\"shrink-0 text-xs text-ds-2\">{item.badge}</span>\n ) : null}\n </NavLink>\n {active ? (\n <span\n className={mergeClassNames(\n \"pointer-events-none absolute top-1.5 h-[calc(100%-12px)] w-2\",\n effectiveDirection === \"rtl\" ? \"right-0\" : \"left-0\",\n )}\n aria-hidden=\"true\"\n >\n {/* <span className=\"absolute inset-y-1 left-1/2 w-2 -translate-x-1/2 rounded-full bg-ds-accent/25 blur-[4px]\" /> /}\n {/ <span className=\"absolute inset-y-0 left-1/6 w-[2px] -translate-x-1/2 rounded-full bg-ds-accent motion-safe:animate-pulse\" /> /}\n {/ <span className=\"absolute top-2.5 left-1/2 h-2 w-2 -translate-x-1/2 rounded-full bg-ds-accent shadow-[0_0_10px_color-mix(in_srgb,var(--ds-color-accent)_55%,transparent)] motion-safe:animate-pulse\" /> */}\n </span>\n ) : null}\n </li>\n );\n })}\n </ul>\n );\n}\n","import { useCallback, useMemo, useState } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { HamburgerIcon } from \"./HamburgerIcon\";\nimport { SidebarLinks } from \"./SidebarLinks\";\nimport type { SidebarProps } from \"./types\";\n\nfunction useControllableOpenState(\n open: boolean \| undefined,\n defaultOpen: boolean,\n onOpenChange?: (open: boolean) => void,\n) {\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const isControlled = open !== undefined;\n const resolvedOpen = isControlled ? open : internalOpen;\n\n const setOpen = useCallback(\n (nextOpen: boolean) => {\n if (!isControlled) {\n setInternalOpen(nextOpen);\n }\n onOpenChange?.(nextOpen);\n },\n [isControlled, onOpenChange],\n );\n\n return [resolvedOpen, setOpen] as const;\n}\n\nconst fallbackBrand = (\n <div className=\"text-xl font-bold uppercase tracking-wide text-ds-1\">\n <span className=\"text-ds-accent\">ERP</span>\n <span className=\"font-medium\">PRO</span>\n </div>\n);\n\nexport function Sidebar({\n items,\n open,\n defaultOpen = false,\n onOpenChange,\n activePath,\n onItemSelect,\n direction = \"auto\",\n navbar,\n brand = fallbackBrand,\n footer,\n className,\n linksClassName,\n itemClassName,\n activeItemClassName,\n overlayClassName,\n closeLabel = \"Toggle sidebar\",\n showOverlay = true,\n}: SidebarProps) {\n const [resolvedOpen, setOpen] = useControllableOpenState(\n open,\n defaultOpen,\n onOpenChange,\n );\n\n const content = useMemo(\n () => (\n <aside\n dir={direction === \"auto\" ? undefined : direction}\n className={mergeClassNames(\n \"fixed inset-y-2 z-70 flex w-72 flex-col rounded-xl border border-ds-border-3 bg-ds-surface-1/92 p-3 shadow-[0_10px_28px_color-mix(in_srgb,var(--ds-color-fg)_9%,transparent)] backdrop-blur-xl\",\n \"transition-transform duration-200 ease-out xl:translate-x-0\",\n direction === \"rtl\" ? \"right-2\" : \"left-2\",\n resolvedOpen\n ? \"translate-x-0\"\n : direction === \"rtl\"\n ? \"translate-x-[110%] xl:translate-x-0\"\n : \"-translate-x-[110%] xl:translate-x-0\",\n className,\n )}\n style={{\n backdropFilter: \"blur(14px) saturate(120%)\",\n WebkitBackdropFilter: \"blur(14px) saturate(120%)\",\n }}\n >\n {navbar ? (\n <div className=\"mb-4\">{navbar}</div>\n ) : (\n <div className=\"mb-4 flex items-center justify-between gap-3 rounded-xl border border-ds-border-3 bg-ds-surface-2/85 px-3 py-2\">\n <div className=\"min-w-0 flex-1\">{brand}</div>\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n aria-label={closeLabel}\n className={mergeClassNames(\n \"p-1! text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1\",\n \"xl:hidden\",\n )}\n onClick={() => setOpen(!resolvedOpen)}\n >\n <HamburgerIcon isOpen={resolvedOpen} />\n </Button>\n </div>\n )}\n\n <div className=\"mb-5 h-px bg-ds-border-3\" />\n\n <div className=\"min-h-0 flex-1 overflow-y-auto pr-1\">\n <SidebarLinks\n items={items}\n activePath={activePath}\n onItemSelect={onItemSelect}\n direction={direction}\n className={linksClassName}\n itemClassName={itemClassName}\n activeItemClassName={activeItemClassName}\n />\n </div>\n\n {footer ? <div className=\"mt-4\">{footer}</div> : null}\n </aside>\n ),\n [\n activeItemClassName,\n activePath,\n brand,\n className,\n closeLabel,\n direction,\n footer,\n itemClassName,\n items,\n linksClassName,\n onItemSelect,\n resolvedOpen,\n setOpen,\n ],\n );\n\n if (!showOverlay) {\n return content;\n }\n\n return (\n <>\n {content}\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n aria-hidden={!resolvedOpen}\n tabIndex={resolvedOpen ? 0 : -1}\n className={mergeClassNames(\n \"fixed inset-0 z-65 p-0! bg-black/30 backdrop-blur-[2px] transition-opacity duration-200 xl:hidden\",\n resolvedOpen\n ? \"pointer-events-auto opacity-100\"\n : \"pointer-events-none opacity-0\",\n overlayClassName,\n )}\n onClick={() => setOpen(false)}\n />\n </>\n );\n}\n","import {\n useCallback,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from \"react\";\n\nimport { BellIcon, FullScreenIcon } from \"../../icons\";\nimport { Button } from \"../../forms/button\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { Typography } from \"../../typography\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { HamburgerIcon } from \"./HamburgerIcon\";\nimport { Sidebar } from \"./Sidebar\";\nimport type { SidebarItem, SidebarProps } from \"./types\";\nimport { SunToMoonButton } from \"../../effects\";\n\nexport interface DashboardHeaderRenderContext {\n isSidebarOpen: boolean;\n setSidebarOpen: (open: boolean) => void;\n openSidebar: () => void;\n closeSidebar: () => void;\n toggleSidebar: () => void;\n direction: Exclude<SidebarProps[\"direction\"], \"auto\">;\n isRtl: boolean;\n}\n\ntype DashboardShellSlot =\n \| ReactNode\n \| ((context: DashboardHeaderRenderContext) => ReactNode);\n\nconst notificationItems = [\n {\n id: \"stock\",\n title: \"Low stock alert\",\n description: \"Wireless Mouse is below reorder point.\",\n time: \"4m\",\n toneClassName:\n \"bg-ds-state-warning-surface text-ds-state-warning-text border-ds-state-warning-border\",\n },\n {\n id: \"invoice\",\n title: \"Invoice paid\",\n description: \"INV-2048 was settled successfully.\",\n time: \"18m\",\n toneClassName:\n \"bg-ds-state-success-surface text-ds-state-success-text border-ds-state-success-border\",\n },\n {\n id: \"sync\",\n title: \"Catalog sync complete\",\n description: \"128 product records refreshed.\",\n time: \"42m\",\n toneClassName:\n \"bg-ds-state-info-surface text-ds-state-info-text border-ds-state-info-border\",\n },\n] as const;\n\nexport interface DashboardSidebarShellProps {\n items: readonly SidebarItem[];\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n direction?: SidebarProps[\"direction\"];\n activePath?: string;\n onItemSelect?: SidebarProps[\"onItemSelect\"];\n brand?: SidebarProps[\"brand\"];\n sidebarNavbar?: SidebarProps[\"navbar\"];\n sidebarFooter?: SidebarProps[\"footer\"];\n sidebarClassName?: SidebarProps[\"className\"];\n sidebarLinksClassName?: SidebarProps[\"linksClassName\"];\n sidebarItemClassName?: SidebarProps[\"itemClassName\"];\n sidebarActiveItemClassName?: SidebarProps[\"activeItemClassName\"];\n sidebarOverlayClassName?: SidebarProps[\"overlayClassName\"];\n sidebarCloseLabel?: SidebarProps[\"closeLabel\"];\n showSidebarOverlay?: SidebarProps[\"showOverlay\"];\n header?: DashboardShellSlot;\n headerLeading?: DashboardShellSlot;\n headerActions?: DashboardShellSlot;\n headerActionsLeading?: DashboardShellSlot;\n headerActionsTrailing?: DashboardShellSlot;\n headerClassName?: string;\n headerTitleClassName?: string;\n headerActionsClassName?: string;\n breadcrumb?: ReactNode;\n title?: ReactNode;\n children?: ReactNode;\n className?: string;\n contentClassName?: string;\n mainClassName?: string;\n autoHideOnMobileBreakpoint?: boolean;\n}\n\nconst rtlLanguages = /^(ar\|fa\|ur\|he)(-\|$)/i;\n\nfunction resolveDirection(\n direction: SidebarProps[\"direction\"],\n): Exclude<SidebarProps[\"direction\"], \"auto\"> {\n if (direction === \"rtl\" \|\| direction === \"ltr\") {\n return direction;\n }\n\n if (typeof document !== \"undefined\") {\n const documentDirection = document.documentElement.getAttribute(\"dir\");\n if (documentDirection === \"rtl\" \|\| documentDirection === \"ltr\") {\n return documentDirection;\n }\n }\n\n if (\n typeof navigator !== \"undefined\" &&\n rtlLanguages.test(navigator.language)\n ) {\n return \"rtl\";\n }\n\n return \"ltr\";\n}\n\nfunction resolveSlot(\n slot: DashboardShellSlot \| undefined,\n context: DashboardHeaderRenderContext,\n) {\n return typeof slot === \"function\" ? slot(context) : slot;\n}\n\nfunction useControllableOpenState(\n open: boolean \| undefined,\n defaultOpen: boolean,\n onOpenChange?: (open: boolean) => void,\n) {\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const isControlled = open !== undefined;\n const resolvedOpen = isControlled ? open : internalOpen;\n\n const setOpen = useCallback(\n (nextOpen: boolean) => {\n if (!isControlled) {\n setInternalOpen(nextOpen);\n }\n onOpenChange?.(nextOpen);\n },\n [isControlled, onOpenChange],\n );\n\n return [resolvedOpen, setOpen] as const;\n}\n\nexport function DashboardSidebarShell({\n items,\n open,\n defaultOpen = false,\n onOpenChange,\n direction = \"auto\",\n activePath,\n onItemSelect,\n brand,\n sidebarNavbar,\n sidebarFooter,\n sidebarClassName,\n sidebarLinksClassName,\n sidebarItemClassName,\n sidebarActiveItemClassName,\n sidebarOverlayClassName,\n sidebarCloseLabel,\n showSidebarOverlay,\n header,\n headerLeading,\n headerActions,\n headerActionsLeading,\n headerActionsTrailing,\n headerClassName,\n headerTitleClassName,\n headerActionsClassName,\n breadcrumb = \"Pages / Dashboard\",\n title = \"Dashboard\",\n children,\n className,\n contentClassName,\n mainClassName,\n autoHideOnMobileBreakpoint = true,\n}: DashboardSidebarShellProps) {\n const [resolvedOpen, setOpen] = useControllableOpenState(\n open,\n defaultOpen,\n onOpenChange,\n );\n const resolvedDirection = resolveDirection(direction);\n const isRtl = resolvedDirection === \"rtl\";\n const openSidebar = useCallback(() => setOpen(true), [setOpen]);\n const closeSidebar = useCallback(() => setOpen(false), [setOpen]);\n const toggleSidebar = useCallback(\n () => setOpen(!resolvedOpen),\n [resolvedOpen, setOpen],\n );\n\n const headerContext = useMemo<DashboardHeaderRenderContext>(\n () => ({\n isSidebarOpen: resolvedOpen,\n setSidebarOpen: setOpen,\n openSidebar,\n closeSidebar,\n toggleSidebar,\n direction: resolvedDirection,\n isRtl,\n }),\n [\n closeSidebar,\n isRtl,\n openSidebar,\n resolvedDirection,\n resolvedOpen,\n setOpen,\n toggleSidebar,\n ],\n );\n\n useEffect(() => {\n if (!autoHideOnMobileBreakpoint \|\| typeof window === \"undefined\") {\n return;\n }\n\n const mediaQuery = window.matchMedia(\"(max-width: 1279px)\");\n\n const handleMobileEnter = (event: MediaQueryListEvent \| MediaQueryList) => {\n if (event.matches) {\n setOpen(false);\n }\n };\n\n // Ensure first render on smaller screens starts closed.\n handleMobileEnter(mediaQuery);\n\n const listener = (event: MediaQueryListEvent) => handleMobileEnter(event);\n mediaQuery.addEventListener(\"change\", listener);\n\n return () => mediaQuery.removeEventListener(\"change\", listener);\n }, [autoHideOnMobileBreakpoint, setOpen]);\n\n const defaultHeaderActions = useMemo(\n () => (\n <>\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className=\"h-9 w-9 rounded-full p-0! xl:hidden\"\n aria-label=\"Toggle sidebar\"\n onClick={toggleSidebar}\n >\n <HamburgerIcon isOpen={resolvedOpen} />\n </Button>\n\n <DropdownMenu\n animationClassName={isRtl ? \"origin-top-left\" : \"origin-top-right\"}\n panelClassName={mergeClassNames(\n \"top-[44px]\",\n isRtl ? \"left-0\" : \"right-0\",\n )}\n trigger={\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className=\"relative h-9 w-9 rounded-full p-0!\"\n aria-label=\"Open notifications\"\n >\n <BellIcon className=\"h-5 w-5\" />\n <span\n className={mergeClassNames(\n \"bg-ds-state-danger text-ds-on-accent absolute -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[0.68rem] font-bold\",\n isRtl ? \"-left-0.5\" : \"-right-0.5\",\n )}\n >\n {notificationItems.length}\n </span>\n </Button>\n }\n >\n <div className=\"w-[340px] rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl\">\n <div className=\"mb-2 flex items-center justify-between gap-3\">\n <Typography variant=\"body2\" weight=\"black\">\n Notifications\n </Typography>\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className=\"px-2 py-1 text-xs\"\n >\n Mark all read\n </Button>\n </div>\n <div className=\"space-y-2\">\n {notificationItems.map((item) => (\n <Button\n key={item.id}\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className={mergeClassNames(\n \"w-full rounded-lg border border-ds-border-3 px-2.5 py-2\",\n isRtl\n ? \"justify-end text-right\"\n : \"justify-start text-left\",\n )}\n >\n <span\n className={`mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border ${item.toneClassName}`}\n >\n <BellIcon className=\"h-3.5 w-3.5\" />\n </span>\n <span className=\"min-w-0 flex-1\">\n <span className=\"block truncate text-xs font-semibold text-ds-1\">\n {item.title}\n </span>\n <span className=\"block truncate text-[11px] text-ds-3\">\n {item.description}\n </span>\n </span>\n <span className=\"text-[11px] text-ds-3\">{item.time}</span>\n </Button>\n ))}\n </div>\n </div>\n </DropdownMenu>\n\n <SunToMoonButton showLabelAndImage={false} />\n\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className=\"h-9 w-9 rounded-full p-0!\"\n aria-label=\"Toggle fullscreen\"\n onClick={() => {\n if (document.fullscreenElement) {\n document.exitFullscreen();\n } else {\n document.documentElement.requestFullscreen();\n }\n }}\n >\n <FullScreenIcon className=\"h-5 w-5\" />\n </Button>\n\n <DropdownMenu\n animationClassName={isRtl ? \"origin-top-left\" : \"origin-top-right\"}\n panelClassName={mergeClassNames(\n \"top-[44px]\",\n isRtl ? \"left-0\" : \"right-0\",\n )}\n trigger={\n <Button\n type=\"button\"\n variant=\"primary\"\n size=\"small\"\n className=\"h-9 w-9 rounded-full p-0! text-sm font-black\"\n aria-label=\"Open user menu\"\n >\n JD\n </Button>\n }\n >\n <div className=\"w-52 rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl\">\n <div className=\"mb-2 flex items-center gap-2\">\n <span className=\"bg-ds-accent text-ds-on-accent inline-flex h-8 w-8 items-center justify-center rounded-full text-xs font-black\">\n JD\n </span>\n <div className=\"min-w-0\">\n <Typography variant=\"body2\" weight=\"black\" className=\"truncate\">\n John Doe\n </Typography>\n <Typography variant=\"caption\" className=\"text-ds-3\">\n Administrator\n </Typography>\n </div>\n </div>\n <div className=\"my-2 border-t border-ds-border-3\" />\n <div className=\"flex flex-col gap-1\">\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className={mergeClassNames(\n \"px-2 py-1.5 text-sm\",\n isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n )}\n >\n Profile\n </Button>\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className={mergeClassNames(\n \"px-2 py-1.5 text-sm\",\n isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n )}\n >\n Settings\n </Button>\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className={mergeClassNames(\n \"px-2 py-1.5 text-sm text-ds-state-error-text\",\n isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n )}\n >\n Log Out\n </Button>\n </div>\n </div>\n </DropdownMenu>\n </>\n ),\n [isRtl, resolvedOpen, toggleSidebar],\n );\n\n const resolvedHeaderLeading = resolveSlot(headerLeading, headerContext);\n const resolvedHeaderActionsLeading = headerActionsLeading\n ? resolveSlot(headerActionsLeading, headerContext)\n : null;\n const resolvedHeaderActionsTrailing = headerActionsTrailing\n ? resolveSlot(headerActionsTrailing, headerContext)\n : null;\n const resolvedHeaderActions =\n headerActions === undefined ? (\n <>\n {resolvedHeaderActionsLeading}\n {defaultHeaderActions}\n {resolvedHeaderActionsTrailing}\n </>\n ) : (\n resolveSlot(headerActions, headerContext)\n );\n\n const defaultHeader = useMemo(\n () => (\n <nav\n dir={resolvedDirection}\n className={mergeClassNames(\n \"sticky top-2 z-40 mb-4 flex items-center rounded-md border border-ds-border-3 bg-ds-surface-1/95 px-4 py-3 shadow-[0_4px_14px_color-mix(in_srgb,var(--ds-color-fg)_8%,transparent)] backdrop-blur-md\",\n headerClassName,\n )}\n >\n <div\n className={mergeClassNames(\n \"flex w-full justify-between gap-4\",\n isRtl && \"flex-row-reverse\",\n )}\n >\n <div\n className={mergeClassNames(\n \"flex min-w-0 items-center gap-3\",\n isRtl && \"flex-row-reverse text-right\",\n headerTitleClassName,\n )}\n >\n {resolvedHeaderLeading}\n <div className=\"min-w-0\">\n <Typography variant=\"caption\" className=\"text-ds-3 capitalize\">\n {breadcrumb}\n </Typography>\n <Typography\n variant=\"h5\"\n weight=\"black\"\n className=\"truncate leading-7 capitalize\"\n >\n {title}\n </Typography>\n </div>\n </div>\n\n <div\n className={mergeClassNames(\n \"border-ds-border-4 flex min-h-11 shrink-0 items-center gap-1 rounded-full border bg-ds-surface-1 px-2 py-1 shadow-[0_2px_8px_color-mix(in_srgb,var(--ds-color-fg)_6%,transparent)]\",\n isRtl && \"flex-row-reverse\",\n headerActionsClassName,\n )}\n >\n {resolvedHeaderActions}\n </div>\n </div>\n </nav>\n ),\n [\n breadcrumb,\n headerActionsClassName,\n headerClassName,\n headerTitleClassName,\n isRtl,\n resolvedDirection,\n resolvedHeaderActions,\n resolvedHeaderLeading,\n title,\n ],\n );\n\n const resolvedHeader =\n header === undefined ? undefined : resolveSlot(header, headerContext);\n\n return (\n <div\n dir={resolvedDirection}\n className={mergeClassNames(\"flex h-full w-full\", className)}\n >\n <Sidebar\n items={items}\n open={resolvedOpen}\n onOpenChange={setOpen}\n activePath={activePath}\n onItemSelect={onItemSelect}\n direction={direction}\n navbar={sidebarNavbar}\n brand={brand}\n footer={sidebarFooter}\n className={sidebarClassName}\n linksClassName={sidebarLinksClassName}\n itemClassName={sidebarItemClassName}\n activeItemClassName={sidebarActiveItemClassName}\n overlayClassName={sidebarOverlayClassName}\n closeLabel={sidebarCloseLabel}\n showOverlay={showSidebarOverlay}\n />\n\n <div className=\"h-full w-full\">\n <main\n className={mergeClassNames(\n \"mx-2 flex-none transition-all duration-200 ease-in-out\",\n isRtl ? \"xl:mr-[18.5rem]\" : \"xl:ml-[18.5rem]\",\n mainClassName,\n )}\n >\n {resolvedHeader ?? defaultHeader}\n\n <section\n className={mergeClassNames(\n \"mx-auto min-h-[calc(100dvh-180px)] rounded-md md:min-h-[calc(100dvh-116px)]\",\n contentClassName,\n )}\n >\n {children}\n </section>\n </main>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"sidebar-DDRWkz5k.cjs","names":[],"sources":["../../src/components/navigation/sidebar/HamburgerIcon.tsx","../../src/components/navigation/sidebar/NavLink.tsx","../../src/components/navigation/sidebar/SidebarLinks.tsx","../../src/components/navigation/sidebar/Sidebar.tsx","../../src/components/navigation/sidebar/DashboardSidebarShell.tsx"],"sourcesContent":["import { mergeClassNames } from \"../../../utils\";\n\nexport interface HamburgerIconProps {\n isOpen: boolean;\n className?: string;\n}\n\nconst lineClassName =\n \"block h-0.5 w-full rounded-lg bg-current transition-all duration-300 ease-in-out\";\n\nexport function HamburgerIcon({ isOpen, className }: HamburgerIconProps) {\n return (\n <span\n className={mergeClassNames(\n \"relative flex h-4 w-5 flex-col items-center justify-between\",\n className,\n )}\n aria-hidden=\"true\"\n >\n <span\n className={mergeClassNames(\n lineClassName,\n isOpen && \"translate-y-[5px] rotate-45 transform\",\n )}\n />\n <span className={mergeClassNames(lineClassName, isOpen && \"w-0\")} />\n <span\n className={mergeClassNames(\n lineClassName,\n isOpen && \"-translate-y-[9px] -rotate-45 transform\",\n )}\n />\n </span>\n );\n}\n","import { useMemo } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport type { SidebarNavLinkProps } from \"./types\";\n\nexport function NavLink({\n className,\n children,\n style,\n borderRadius,\n disabled = false,\n href,\n target,\n rel,\n onClick,\n}: SidebarNavLinkProps) {\n const memoizedStyle = useMemo(\n () => (borderRadius !== undefined ? { ...style, borderRadius } : style),\n [borderRadius, style],\n );\n\n if (href) {\n const resolvedRel = target === \"_blank\" ? (rel ?? \"noreferrer noopener\") : rel;\n\n return (\n <a\n href={href}\n className={className}\n style={memoizedStyle}\n target={target}\n rel={resolvedRel}\n aria-disabled={disabled}\n onClick={(event) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n onClick?.(event);\n }}\n >\n {children}\n </a>\n );\n }\n\n return (\n <Button\n type=\"button\"\n variant=\"tertiary\"\n className={className}\n style={memoizedStyle}\n disabled={disabled}\n onClick={onClick}\n >\n {children}\n </Button>\n );\n}\n","import { mergeClassNames } from \"../../../utils\";\nimport { NavLink } from \"./NavLink\";\nimport type { SidebarDirection, SidebarItem, SidebarLinksProps } from \"./types\";\n\nconst rtlLanguages = /^(ar\|fa\|ur\|he)(-\|$)/i;\n\nfunction resolveDirection(\n direction: SidebarDirection,\n): Exclude<SidebarDirection, \"auto\"> {\n if (direction !== \"auto\") {\n return direction;\n }\n\n if (typeof document === \"undefined\") {\n return \"ltr\";\n }\n\n const explicitDirection =\n document.documentElement.getAttribute(\"dir\") ?? undefined;\n\n if (explicitDirection === \"rtl\" \|\| explicitDirection === \"ltr\") {\n return explicitDirection;\n }\n\n if (\n typeof navigator !== \"undefined\" &&\n rtlLanguages.test(navigator.language)\n ) {\n return \"rtl\";\n }\n\n return \"ltr\";\n}\n\nfunction isRouteActive(item: SidebarItem, activePath?: string): boolean {\n if (typeof item.active === \"boolean\") {\n return item.active;\n }\n\n if (!activePath \|\| !item.href) {\n return false;\n }\n\n return activePath === item.href \|\| activePath.startsWith(`${item.href}/`);\n}\n\nexport function SidebarLinks({\n items,\n activePath,\n onItemSelect,\n direction = \"auto\",\n className,\n itemClassName,\n activeItemClassName,\n}: SidebarLinksProps) {\n const effectiveDirection = resolveDirection(direction);\n const visibleItems = items.filter((item) => !item.hidden);\n\n return (\n <ul className={mergeClassNames(\"space-y-1.5\", className)}>\n {visibleItems.map((item) => {\n const active = isRouteActive(item, activePath);\n\n return (\n <li key={item.id} className=\"relative\">\n <NavLink\n href={item.href}\n disabled={item.disabled}\n className={mergeClassNames(\n \"group relative flex w-full items-center gap-2.5 rounded-md border px-3 py-2.5 transition-all duration-200\",\n effectiveDirection === \"rtl\" ? \"text-right\" : \"text-left\",\n \"border-transparent text-ds-2 hover:border-ds-border-3 hover:bg-ds-surface-2/80 hover:text-ds-1\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ds-focus/60 focus-visible:ring-offset-2 focus-visible:ring-offset-ds-canvas\",\n item.disabled && \"cursor-not-allowed opacity-50\",\n active &&\n \"border-ds-border-accent/35 bg-ds-accent-subtle text-ds-1 shadow-[0_4px_12px_color-mix(in_srgb,var(--ds-color-fg)_8%,transparent)]\",\n active && activeItemClassName,\n itemClassName,\n )}\n onClick={(event) => {\n item.onSelect?.(event);\n onItemSelect?.(item, event);\n if (onItemSelect) {\n event.preventDefault();\n }\n }}\n >\n <span\n className={mergeClassNames(\n \"inline-flex h-5 w-5 shrink-0 items-center justify-center\",\n active ? \"text-ds-1\" : \"text-ds-2 group-hover:text-ds-1\",\n )}\n aria-hidden=\"true\"\n >\n {item.icon}\n </span>\n <span className=\"min-w-0 flex-1 truncate text-sm font-medium\">\n {item.label}\n </span>\n {item.badge ? (\n <span className=\"shrink-0 text-xs text-ds-2\">{item.badge}</span>\n ) : null}\n </NavLink>\n {active ? (\n <span\n className={mergeClassNames(\n \"pointer-events-none absolute top-1.5 h-[calc(100%-12px)] w-2\",\n effectiveDirection === \"rtl\" ? \"right-0\" : \"left-0\",\n )}\n aria-hidden=\"true\"\n >\n {/* <span className=\"absolute inset-y-1 left-1/2 w-2 -translate-x-1/2 rounded-full bg-ds-accent/25 blur-[4px]\" /> /}\n {/ <span className=\"absolute inset-y-0 left-1/6 w-[2px] -translate-x-1/2 rounded-full bg-ds-accent motion-safe:animate-pulse\" /> /}\n {/ <span className=\"absolute top-2.5 left-1/2 h-2 w-2 -translate-x-1/2 rounded-full bg-ds-accent shadow-[0_0_10px_color-mix(in_srgb,var(--ds-color-accent)_55%,transparent)] motion-safe:animate-pulse\" /> */}\n </span>\n ) : null}\n </li>\n );\n })}\n </ul>\n );\n}\n","import { useCallback, useMemo, useState } from \"react\";\n\nimport { Button } from \"../../forms/button\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { HamburgerIcon } from \"./HamburgerIcon\";\nimport { SidebarLinks } from \"./SidebarLinks\";\nimport type { SidebarProps } from \"./types\";\n\nfunction useControllableOpenState(\n open: boolean \| undefined,\n defaultOpen: boolean,\n onOpenChange?: (open: boolean) => void,\n) {\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const isControlled = open !== undefined;\n const resolvedOpen = isControlled ? open : internalOpen;\n\n const setOpen = useCallback(\n (nextOpen: boolean) => {\n if (!isControlled) {\n setInternalOpen(nextOpen);\n }\n onOpenChange?.(nextOpen);\n },\n [isControlled, onOpenChange],\n );\n\n return [resolvedOpen, setOpen] as const;\n}\n\nconst fallbackBrand = (\n <div className=\"text-xl font-bold uppercase tracking-wide text-ds-1\">\n <span className=\"text-ds-accent\">ERP</span>\n <span className=\"font-medium\">PRO</span>\n </div>\n);\n\nexport function Sidebar({\n items,\n open,\n defaultOpen = false,\n onOpenChange,\n activePath,\n onItemSelect,\n direction = \"auto\",\n navbar,\n brand = fallbackBrand,\n footer,\n className,\n linksClassName,\n itemClassName,\n activeItemClassName,\n overlayClassName,\n closeLabel = \"Toggle sidebar\",\n showOverlay = true,\n}: SidebarProps) {\n const [resolvedOpen, setOpen] = useControllableOpenState(\n open,\n defaultOpen,\n onOpenChange,\n );\n\n const content = useMemo(\n () => (\n <aside\n dir={direction === \"auto\" ? undefined : direction}\n className={mergeClassNames(\n \"fixed inset-y-2 z-70 flex w-72 flex-col rounded-xl border border-ds-border-3 bg-ds-surface-1/92 p-3 shadow-[0_10px_28px_color-mix(in_srgb,var(--ds-color-fg)_9%,transparent)] backdrop-blur-xl\",\n \"transition-transform duration-200 ease-out xl:translate-x-0\",\n direction === \"rtl\" ? \"right-2\" : \"left-2\",\n resolvedOpen\n ? \"translate-x-0\"\n : direction === \"rtl\"\n ? \"translate-x-[110%] xl:translate-x-0\"\n : \"-translate-x-[110%] xl:translate-x-0\",\n className,\n )}\n style={{\n backdropFilter: \"blur(14px) saturate(120%)\",\n WebkitBackdropFilter: \"blur(14px) saturate(120%)\",\n }}\n >\n {navbar ? (\n <div className=\"mb-4\">{navbar}</div>\n ) : (\n <div className=\"mb-4 flex items-center justify-between gap-3 rounded-xl border border-ds-border-3 bg-ds-surface-2/85 px-3 py-2\">\n <div className=\"min-w-0 flex-1\">{brand}</div>\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n aria-label={closeLabel}\n className={mergeClassNames(\n \"p-1! text-ds-2 transition-colors hover:bg-ds-surface-2 hover:text-ds-1\",\n \"xl:hidden\",\n )}\n onClick={() => setOpen(!resolvedOpen)}\n >\n <HamburgerIcon isOpen={resolvedOpen} />\n </Button>\n </div>\n )}\n\n <div className=\"mb-5 h-px bg-ds-border-3\" />\n\n <div className=\"min-h-0 flex-1 overflow-y-auto pr-1\">\n <SidebarLinks\n items={items}\n activePath={activePath}\n onItemSelect={onItemSelect}\n direction={direction}\n className={linksClassName}\n itemClassName={itemClassName}\n activeItemClassName={activeItemClassName}\n />\n </div>\n\n {footer ? <div className=\"mt-4\">{footer}</div> : null}\n </aside>\n ),\n [\n activeItemClassName,\n activePath,\n brand,\n className,\n closeLabel,\n direction,\n footer,\n itemClassName,\n items,\n linksClassName,\n onItemSelect,\n resolvedOpen,\n setOpen,\n ],\n );\n\n if (!showOverlay) {\n return content;\n }\n\n return (\n <>\n {content}\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n aria-hidden={!resolvedOpen}\n tabIndex={resolvedOpen ? 0 : -1}\n className={mergeClassNames(\n \"fixed inset-0 z-65 p-0! bg-black/30 backdrop-blur-[2px] transition-opacity duration-200 xl:hidden\",\n resolvedOpen\n ? \"pointer-events-auto opacity-100\"\n : \"pointer-events-none opacity-0\",\n overlayClassName,\n )}\n onClick={() => setOpen(false)}\n />\n </>\n );\n}\n","import {\n useCallback,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from \"react\";\n\nimport { BellIcon, FullScreenIcon } from \"../../icons\";\nimport { Button } from \"../../forms/button\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { Typography } from \"../../typography\";\nimport { mergeClassNames } from \"../../../utils\";\nimport { HamburgerIcon } from \"./HamburgerIcon\";\nimport { Sidebar } from \"./Sidebar\";\nimport type { SidebarItem, SidebarProps } from \"./types\";\nimport { SunToMoonButton } from \"../../effects\";\n\nexport interface DashboardHeaderRenderContext {\n isSidebarOpen: boolean;\n setSidebarOpen: (open: boolean) => void;\n openSidebar: () => void;\n closeSidebar: () => void;\n toggleSidebar: () => void;\n direction: Exclude<SidebarProps[\"direction\"], \"auto\">;\n isRtl: boolean;\n}\n\ntype DashboardShellSlot =\n \| ReactNode\n \| ((context: DashboardHeaderRenderContext) => ReactNode);\n\nconst notificationItems = [\n {\n id: \"stock\",\n title: \"Low stock alert\",\n description: \"Wireless Mouse is below reorder point.\",\n time: \"4m\",\n toneClassName:\n \"bg-ds-state-warning-surface text-ds-state-warning-text border-ds-state-warning-border\",\n },\n {\n id: \"invoice\",\n title: \"Invoice paid\",\n description: \"INV-2048 was settled successfully.\",\n time: \"18m\",\n toneClassName:\n \"bg-ds-state-success-surface text-ds-state-success-text border-ds-state-success-border\",\n },\n {\n id: \"sync\",\n title: \"Catalog sync complete\",\n description: \"128 product records refreshed.\",\n time: \"42m\",\n toneClassName:\n \"bg-ds-state-info-surface text-ds-state-info-text border-ds-state-info-border\",\n },\n] as const;\n\nexport interface DashboardSidebarShellProps {\n items: readonly SidebarItem[];\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n direction?: SidebarProps[\"direction\"];\n activePath?: string;\n onItemSelect?: SidebarProps[\"onItemSelect\"];\n brand?: SidebarProps[\"brand\"];\n sidebarNavbar?: SidebarProps[\"navbar\"];\n sidebarFooter?: SidebarProps[\"footer\"];\n sidebarClassName?: SidebarProps[\"className\"];\n sidebarLinksClassName?: SidebarProps[\"linksClassName\"];\n sidebarItemClassName?: SidebarProps[\"itemClassName\"];\n sidebarActiveItemClassName?: SidebarProps[\"activeItemClassName\"];\n sidebarOverlayClassName?: SidebarProps[\"overlayClassName\"];\n sidebarCloseLabel?: SidebarProps[\"closeLabel\"];\n showSidebarOverlay?: SidebarProps[\"showOverlay\"];\n header?: DashboardShellSlot;\n headerLeading?: DashboardShellSlot;\n headerActions?: DashboardShellSlot;\n headerActionsLeading?: DashboardShellSlot;\n headerActionsTrailing?: DashboardShellSlot;\n headerClassName?: string;\n headerTitleClassName?: string;\n headerActionsClassName?: string;\n breadcrumb?: ReactNode;\n title?: ReactNode;\n children?: ReactNode;\n className?: string;\n contentClassName?: string;\n mainClassName?: string;\n autoHideOnMobileBreakpoint?: boolean;\n}\n\nconst rtlLanguages = /^(ar\|fa\|ur\|he)(-\|$)/i;\n\nfunction resolveDirection(\n direction: SidebarProps[\"direction\"],\n): Exclude<SidebarProps[\"direction\"], \"auto\"> {\n if (direction === \"rtl\" \|\| direction === \"ltr\") {\n return direction;\n }\n\n if (typeof document !== \"undefined\") {\n const documentDirection = document.documentElement.getAttribute(\"dir\");\n if (documentDirection === \"rtl\" \|\| documentDirection === \"ltr\") {\n return documentDirection;\n }\n }\n\n if (\n typeof navigator !== \"undefined\" &&\n rtlLanguages.test(navigator.language)\n ) {\n return \"rtl\";\n }\n\n return \"ltr\";\n}\n\nfunction resolveSlot(\n slot: DashboardShellSlot \| undefined,\n context: DashboardHeaderRenderContext,\n) {\n return typeof slot === \"function\" ? slot(context) : slot;\n}\n\nfunction useControllableOpenState(\n open: boolean \| undefined,\n defaultOpen: boolean,\n onOpenChange?: (open: boolean) => void,\n) {\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const isControlled = open !== undefined;\n const resolvedOpen = isControlled ? open : internalOpen;\n\n const setOpen = useCallback(\n (nextOpen: boolean) => {\n if (!isControlled) {\n setInternalOpen(nextOpen);\n }\n onOpenChange?.(nextOpen);\n },\n [isControlled, onOpenChange],\n );\n\n return [resolvedOpen, setOpen] as const;\n}\n\nexport function DashboardSidebarShell({\n items,\n open,\n defaultOpen = false,\n onOpenChange,\n direction = \"auto\",\n activePath,\n onItemSelect,\n brand,\n sidebarNavbar,\n sidebarFooter,\n sidebarClassName,\n sidebarLinksClassName,\n sidebarItemClassName,\n sidebarActiveItemClassName,\n sidebarOverlayClassName,\n sidebarCloseLabel,\n showSidebarOverlay,\n header,\n headerLeading,\n headerActions,\n headerActionsLeading,\n headerActionsTrailing,\n headerClassName,\n headerTitleClassName,\n headerActionsClassName,\n breadcrumb = \"Pages / Dashboard\",\n title = \"Dashboard\",\n children,\n className,\n contentClassName,\n mainClassName,\n autoHideOnMobileBreakpoint = true,\n}: DashboardSidebarShellProps) {\n const [resolvedOpen, setOpen] = useControllableOpenState(\n open,\n defaultOpen,\n onOpenChange,\n );\n const resolvedDirection = resolveDirection(direction);\n const isRtl = resolvedDirection === \"rtl\";\n const openSidebar = useCallback(() => setOpen(true), [setOpen]);\n const closeSidebar = useCallback(() => setOpen(false), [setOpen]);\n const toggleSidebar = useCallback(\n () => setOpen(!resolvedOpen),\n [resolvedOpen, setOpen],\n );\n\n const headerContext = useMemo<DashboardHeaderRenderContext>(\n () => ({\n isSidebarOpen: resolvedOpen,\n setSidebarOpen: setOpen,\n openSidebar,\n closeSidebar,\n toggleSidebar,\n direction: resolvedDirection,\n isRtl,\n }),\n [\n closeSidebar,\n isRtl,\n openSidebar,\n resolvedDirection,\n resolvedOpen,\n setOpen,\n toggleSidebar,\n ],\n );\n\n useEffect(() => {\n if (!autoHideOnMobileBreakpoint \|\| typeof window === \"undefined\") {\n return;\n }\n\n const mediaQuery = window.matchMedia(\"(max-width: 1279px)\");\n\n const handleMobileEnter = (event: MediaQueryListEvent \| MediaQueryList) => {\n if (event.matches) {\n setOpen(false);\n }\n };\n\n // Ensure first render on smaller screens starts closed.\n handleMobileEnter(mediaQuery);\n\n const listener = (event: MediaQueryListEvent) => handleMobileEnter(event);\n mediaQuery.addEventListener(\"change\", listener);\n\n return () => mediaQuery.removeEventListener(\"change\", listener);\n }, [autoHideOnMobileBreakpoint, setOpen]);\n\n const defaultHeaderActions = useMemo(\n () => (\n <>\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className=\"h-9 w-9 rounded-full p-0! xl:hidden\"\n aria-label=\"Toggle sidebar\"\n onClick={toggleSidebar}\n >\n <HamburgerIcon isOpen={resolvedOpen} />\n </Button>\n\n <DropdownMenu\n animationClassName={isRtl ? \"origin-top-left\" : \"origin-top-right\"}\n panelClassName={mergeClassNames(\n \"top-[44px]\",\n isRtl ? \"left-0\" : \"right-0\",\n )}\n trigger={\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className=\"relative h-9 w-9 rounded-full p-0!\"\n aria-label=\"Open notifications\"\n >\n <BellIcon className=\"h-5 w-5\" />\n <span\n className={mergeClassNames(\n \"bg-ds-state-danger text-ds-on-accent absolute -top-0.5 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-[0.68rem] font-bold\",\n isRtl ? \"-left-0.5\" : \"-right-0.5\",\n )}\n >\n {notificationItems.length}\n </span>\n </Button>\n }\n >\n <div className=\"w-[340px] rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl\">\n <div className=\"mb-2 flex items-center justify-between gap-3\">\n <Typography variant=\"body2\" weight=\"black\">\n Notifications\n </Typography>\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className=\"px-2 py-1 text-xs\"\n >\n Mark all read\n </Button>\n </div>\n <div className=\"space-y-2\">\n {notificationItems.map((item) => (\n <Button\n key={item.id}\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className={mergeClassNames(\n \"w-full rounded-lg border border-ds-border-3 px-2.5 py-2\",\n isRtl\n ? \"justify-end text-right\"\n : \"justify-start text-left\",\n )}\n >\n <span\n className={`mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md border ${item.toneClassName}`}\n >\n <BellIcon className=\"h-3.5 w-3.5\" />\n </span>\n <span className=\"min-w-0 flex-1\">\n <span className=\"block truncate text-xs font-semibold text-ds-1\">\n {item.title}\n </span>\n <span className=\"block truncate text-[11px] text-ds-3\">\n {item.description}\n </span>\n </span>\n <span className=\"text-[11px] text-ds-3\">{item.time}</span>\n </Button>\n ))}\n </div>\n </div>\n </DropdownMenu>\n\n <SunToMoonButton showLabelAndImage={false} />\n\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className=\"h-9 w-9 rounded-full p-0!\"\n aria-label=\"Toggle fullscreen\"\n onClick={() => {\n if (document.fullscreenElement) {\n document.exitFullscreen();\n } else {\n document.documentElement.requestFullscreen();\n }\n }}\n >\n <FullScreenIcon className=\"h-5 w-5\" />\n </Button>\n\n <DropdownMenu\n animationClassName={isRtl ? \"origin-top-left\" : \"origin-top-right\"}\n panelClassName={mergeClassNames(\n \"top-[44px]\",\n isRtl ? \"left-0\" : \"right-0\",\n )}\n trigger={\n <Button\n type=\"button\"\n variant=\"primary\"\n size=\"small\"\n className=\"h-9 w-9 rounded-full p-0! text-sm font-black\"\n aria-label=\"Open user menu\"\n >\n JD\n </Button>\n }\n >\n <div className=\"w-52 rounded-lg border border-ds-border-3 bg-ds-surface-1 p-3 shadow-xl\">\n <div className=\"mb-2 flex items-center gap-2\">\n <span className=\"bg-ds-accent text-ds-on-accent inline-flex h-8 w-8 items-center justify-center rounded-full text-xs font-black\">\n JD\n </span>\n <div className=\"min-w-0\">\n <Typography variant=\"body2\" weight=\"black\" className=\"truncate\">\n John Doe\n </Typography>\n <Typography variant=\"caption\" className=\"text-ds-3\">\n Administrator\n </Typography>\n </div>\n </div>\n <div className=\"my-2 border-t border-ds-border-3\" />\n <div className=\"flex flex-col gap-1\">\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className={mergeClassNames(\n \"px-2 py-1.5 text-sm\",\n isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n )}\n >\n Profile\n </Button>\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className={mergeClassNames(\n \"px-2 py-1.5 text-sm\",\n isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n )}\n >\n Settings\n </Button>\n <Button\n type=\"button\"\n variant=\"tertiary\"\n size=\"small\"\n className={mergeClassNames(\n \"px-2 py-1.5 text-sm text-ds-state-error-text\",\n isRtl ? \"justify-end text-right\" : \"justify-start text-left\",\n )}\n >\n Log Out\n </Button>\n </div>\n </div>\n </DropdownMenu>\n </>\n ),\n [isRtl, resolvedOpen, toggleSidebar],\n );\n\n const resolvedHeaderLeading = resolveSlot(headerLeading, headerContext);\n const resolvedHeaderActionsLeading = headerActionsLeading\n ? resolveSlot(headerActionsLeading, headerContext)\n : null;\n const resolvedHeaderActionsTrailing = headerActionsTrailing\n ? resolveSlot(headerActionsTrailing, headerContext)\n : null;\n const resolvedHeaderActions =\n headerActions === undefined ? (\n <>\n {resolvedHeaderActionsLeading}\n {defaultHeaderActions}\n {resolvedHeaderActionsTrailing}\n </>\n ) : (\n resolveSlot(headerActions, headerContext)\n );\n\n const defaultHeader = useMemo(\n () => (\n <nav\n dir={resolvedDirection}\n className={mergeClassNames(\n \"sticky top-2 z-40 mb-4 flex items-center rounded-md border border-ds-border-3 bg-ds-surface-1/95 px-4 py-3 shadow-[0_4px_14px_color-mix(in_srgb,var(--ds-color-fg)_8%,transparent)] backdrop-blur-md\",\n headerClassName,\n )}\n >\n <div className=\"flex w-full justify-between gap-4\">\n <div\n className={mergeClassNames(\n \"flex min-w-0 items-center gap-3\",\n headerTitleClassName,\n )}\n >\n {resolvedHeaderLeading}\n <div className=\"min-w-0\">\n <Typography variant=\"caption\" className=\"text-ds-3 capitalize\">\n {breadcrumb}\n </Typography>\n <Typography\n variant=\"h5\"\n weight=\"black\"\n className=\"truncate leading-7 capitalize\"\n >\n {title}\n </Typography>\n </div>\n </div>\n\n <div\n className={mergeClassNames(\n \"border-ds-border-4 flex min-h-11 shrink-0 items-center gap-1 rounded-full border bg-ds-surface-1 px-2 py-1 shadow-[0_2px_8px_color-mix(in_srgb,var(--ds-color-fg)_6%,transparent)]\",\n headerActionsClassName,\n )}\n >\n {resolvedHeaderActions}\n </div>\n </div>\n </nav>\n ),\n [\n breadcrumb,\n headerActionsClassName,\n headerClassName,\n headerTitleClassName,\n resolvedDirection,\n resolvedHeaderActions,\n resolvedHeaderLeading,\n title,\n ],\n );\n\n const resolvedHeader =\n header === undefined ? undefined : resolveSlot(header, headerContext);\n\n return (\n <div\n dir={resolvedDirection}\n className={mergeClassNames(\"flex h-full w-full\", className)}\n >\n <Sidebar\n items={items}\n open={resolvedOpen}\n onOpenChange={setOpen}\n activePath={activePath}\n onItemSelect={onItemSelect}\n direction={direction}\n navbar={sidebarNavbar}\n brand={brand}\n footer={sidebarFooter}\n className={sidebarClassName}\n linksClassName={sidebarLinksClassName}\n itemClassName={sidebarItemClassName}\n activeItemClassName={sidebarActiveItemClassName}\n overlayClassName={sidebarOverlayClassName}\n closeLabel={sidebarCloseLabel}\n showOverlay={showSidebarOverlay}\n />\n\n <div className=\"h-full w-full\">\n <main\n className={mergeClassNames(\n \"mx-2 flex-none transition-all duration-200 ease-in-out\",\n isRtl ? \"xl:mr-[18.5rem]\" : \"xl:ml-[18.5rem]\",\n mainClassName,\n )}\n >\n {resolvedHeader ?? defaultHeader}\n\n <section\n className={mergeClassNames(\n \"mx-auto min-h-[calc(100dvh-180px)] rounded-md md:min-h-[calc(100dvh-116px)]\",\n contentClassName,\n )}\n >\n {children}\n </section>\n </main>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/chunks/{skeleton-DWvVc17T.cjs → skeleton-B2u9c1xJ.cjs} RENAMED Viewed

@@ -1,5 +1,4 @@
-require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-LRbEQHYs.cjs");
+const require_utils = require("./utils-CoA0q63n.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/data-display/skeleton/Skeleton.tsx
@@ -419,4 +418,4 @@ Object.defineProperty(exports, "SkeletonText", {
 	}
 });
-//# sourceMappingURL=skeleton-DWvVc17T.cjs.map
+//# sourceMappingURL=skeleton-B2u9c1xJ.cjs.map

package/dist/chunks/{skeleton-DWvVc17T.cjs.map → skeleton-B2u9c1xJ.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton-DWvVc17T.cjs","names":[],"sources":["../../src/components/data-display/skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport type SkeletonVariant = \"text\" \| \"circular\" \| \"rectangular\" \| \"rounded\";\nexport type SkeletonAnimation = \"pulse\" \| \"wave\" \| \"none\";\nexport type SkeletonTone =\n \| \"default\"\n \| \"subtle\"\n \| \"accent\"\n \| \"success\"\n \| \"warning\"\n \| \"danger\"\n \| \"info\";\nexport type SkeletonRadius = \"none\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| \"full\";\nexport type SkeletonSpeed = \"slow\" \| \"normal\" \| \"fast\";\n\ntype SkeletonCssVariables = CSSProperties &\n Record<\n \"--ui-skeleton-base\" \| \"--ui-skeleton-highlight\" \| \"--ui-skeleton-duration\",\n string\n >;\n\nexport interface SkeletonProps extends Omit<\n ComponentPropsWithoutRef<\"div\">,\n \"children\"\n> {\n /** The variant shape of the skeleton /\n variant?: SkeletonVariant;\n /* The animation type /\n animation?: SkeletonAnimation;\n /* Width of the skeleton /\n width?: number \| string;\n /* Height of the skeleton /\n height?: number \| string;\n /* Border radius override /\n borderRadius?: number \| string;\n /* Semantic radius preset /\n radius?: SkeletonRadius;\n /* Semantic tone preset /\n tone?: SkeletonTone;\n /* Animation speed preset or custom duration /\n speed?: SkeletonSpeed \| number \| string;\n /* Number of lines for text variant /\n lines?: number;\n /* Gap between lines /\n lineGap?: number \| string;\n /* Whether the last line should be shorter /\n lastLineWidth?: number \| string;\n}\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"variant\"> {\n /* Number of text lines /\n lines?: number;\n}\n\nexport interface SkeletonAvatarProps extends Omit<\n SkeletonProps,\n \"variant\" \| \"width\" \| \"height\"\n> {\n /* Size of the avatar /\n size?: number \| string;\n}\n\nexport interface SkeletonCardProps {\n /* Whether to show image placeholder /\n showImage?: boolean;\n /* Image height /\n imageHeight?: number \| string;\n /* Number of text lines /\n lines?: number;\n /* Whether to show avatar /\n showAvatar?: boolean;\n /* Whether to show action buttons /\n showActions?: boolean;\n /* Custom className /\n className?: string;\n /* Animation type /\n animation?: SkeletonAnimation;\n /* Semantic tone preset /\n tone?: SkeletonTone;\n}\n\nexport interface SkeletonMetricCardProps {\n /* Whether to show a compact trend badge /\n showTrend?: boolean;\n /* Whether to render spark bars /\n showChart?: boolean;\n /* Number of spark bars /\n chartBars?: number;\n /* Width for the value block /\n valueWidth?: number \| string;\n /* Custom className /\n className?: string;\n /* Animation type /\n animation?: SkeletonAnimation;\n /* Semantic tone preset */\n tone?: SkeletonTone;\n}\n\nconst animationStyles: Record<SkeletonAnimation, string> = {\n pulse: \"ui-skeleton-pulse\",\n wave: \"ui-skeleton-wave\",\n none: \"\",\n};\n\nconst radiusStyles: Record<SkeletonRadius, string> = {\n none: \"rounded-none\",\n sm: \"rounded-sm\",\n md: \"rounded-md\",\n lg: \"rounded-lg\",\n xl: \"rounded-xl\",\n full: \"rounded-full\",\n};\n\nconst variantStyles: Record<SkeletonVariant, SkeletonRadius> = {\n text: \"sm\",\n circular: \"full\",\n rectangular: \"none\",\n rounded: \"md\",\n};\n\nconst speedStyles: Record<SkeletonSpeed, string> = {\n slow: \"2.4s\",\n normal: \"1.6s\",\n fast: \"1.05s\",\n};\n\nconst toneStyles: Record<SkeletonTone, { base: string; highlight: string }> = {\n default: {\n base: \"var(--ds-color-bg-ds-surface-3)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 54%, var(--ds-color-bg-canvas))\",\n },\n subtle: {\n base: \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 72%, var(--ds-color-bg-canvas))\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 42%, var(--ds-color-bg-canvas))\",\n },\n accent: {\n base: \"var(--ds-color-accent-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-accent-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n success: {\n base: \"var(--ds-color-success-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-success-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n warning: {\n base: \"var(--ds-color-warning-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-warning-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n danger: {\n base: \"var(--ds-color-danger-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-danger-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n info: {\n base: \"var(--ds-color-info-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-info-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n};\n\nfunction resolveDimension(value?: number \| string): string \| undefined {\n if (typeof value === \"number\") {\n return `${value}px`;\n }\n\n return value;\n}\n\nfunction resolveDuration(value: SkeletonProps[\"speed\"]): string {\n if (typeof value === \"number\") {\n return `${value}ms`;\n }\n\n if (typeof value === \"string\" && value in speedStyles) {\n return speedStyles[value as SkeletonSpeed];\n }\n\n return value ?? speedStyles.normal;\n}\n\nfunction getDimensionStyle({\n variant,\n width,\n height,\n borderRadius,\n}: {\n variant: SkeletonVariant;\n width?: number \| string;\n height?: number \| string;\n borderRadius?: number \| string;\n}): CSSProperties {\n const nextStyle: CSSProperties = {};\n const resolvedWidth = resolveDimension(width);\n const resolvedHeight = resolveDimension(height);\n const resolvedBorderRadius = resolveDimension(borderRadius);\n\n if (resolvedWidth) {\n nextStyle.width = resolvedWidth;\n } else if (variant === \"text\") {\n nextStyle.width = \"100%\";\n }\n\n if (resolvedHeight) {\n nextStyle.height = resolvedHeight;\n } else if (variant === \"text\") {\n nextStyle.height = \"1em\";\n } else if (variant === \"circular\") {\n nextStyle.width = nextStyle.width \|\| \"40px\";\n nextStyle.height = nextStyle.width;\n }\n\n if (resolvedBorderRadius) {\n nextStyle.borderRadius = resolvedBorderRadius;\n }\n\n return nextStyle;\n}\n\n// Base Skeleton Component\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n (\n {\n variant = \"text\",\n animation = \"pulse\",\n width,\n height,\n borderRadius,\n radius,\n tone = \"default\",\n speed = \"normal\",\n className,\n lines = 1,\n lineGap = 8,\n lastLineWidth = \"80%\",\n style,\n [\"aria-hidden\"]: ariaHidden,\n ...rest\n },\n ref,\n ) => {\n const toneStyle = toneStyles[tone];\n const sharedStyle: SkeletonCssVariables = {\n \"--ui-skeleton-base\": toneStyle.base,\n \"--ui-skeleton-highlight\": toneStyle.highlight,\n \"--ui-skeleton-duration\": resolveDuration(speed),\n ...style,\n };\n const effectiveRadius = radius ?? variantStyles[variant];\n const sharedClassName = mergeClassNames(\n \"relative overflow-hidden bg-[var(--ui-skeleton-base)] pointer-events-none select-none shrink-0\",\n radiusStyles[effectiveRadius],\n animationStyles[animation],\n );\n\n if (variant === \"text\" && lines > 1) {\n return (\n <div\n ref={ref}\n className={mergeClassNames(\"flex flex-col\", className)}\n style={{\n ...style,\n gap: resolveDimension(lineGap),\n width: resolveDimension(width) ?? style?.width,\n }}\n aria-hidden={ariaHidden ?? true}\n data-animation={animation}\n data-tone={tone}\n {...rest}\n >\n {Array.from({ length: lines }).map((_, index) => (\n <div\n key={index}\n className={sharedClassName}\n style={{\n ...sharedStyle,\n ...getDimensionStyle({\n variant,\n width:\n index === lines - 1 ? lastLineWidth : (width ?? \"100%\"),\n height,\n borderRadius,\n }),\n }}\n />\n ))}\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n className={mergeClassNames(sharedClassName, className)}\n style={{\n ...sharedStyle,\n ...getDimensionStyle({ variant, width, height, borderRadius }),\n }}\n aria-hidden={ariaHidden ?? true}\n data-animation={animation}\n data-tone={tone}\n {...rest}\n />\n );\n },\n);\n\nSkeleton.displayName = \"Skeleton\";\n\n// Skeleton Text Component\nconst SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n ({ lines = 3, ...props }, ref) => {\n return <Skeleton ref={ref} variant=\"text\" lines={lines} {...props} />;\n },\n);\n\nSkeletonText.displayName = \"SkeletonText\";\n\n// Skeleton Avatar Component\nconst SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n ({ size = 40, animation = \"pulse\", className = \"\", ...props }, ref) => {\n const sizeValue = typeof size === \"number\" ? `${size}px` : size;\n\n return (\n <Skeleton\n ref={ref}\n variant=\"circular\"\n width={sizeValue}\n height={sizeValue}\n animation={animation}\n className={className}\n {...props}\n />\n );\n },\n);\n\nSkeletonAvatar.displayName = \"SkeletonAvatar\";\n\n// Skeleton Button Component\nconst SkeletonButton = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, \"variant\"> & { size?: \"sm\" \| \"md\" \| \"lg\" }\n>(({ size = \"md\", animation = \"pulse\", className = \"\", ...props }, ref) => {\n const sizeStyles = {\n sm: { width: 80, height: 32 },\n md: { width: 100, height: 40 },\n lg: { width: 120, height: 48 },\n };\n\n return (\n <Skeleton\n ref={ref}\n variant=\"rounded\"\n width={sizeStyles[size].width}\n height={sizeStyles[size].height}\n animation={animation}\n className={className}\n {...props}\n />\n );\n});\n\nSkeletonButton.displayName = \"SkeletonButton\";\n\n// Skeleton Image Component\nconst SkeletonImage = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, \"variant\">\n>(\n (\n {\n width = \"100%\",\n height = 200,\n animation = \"pulse\",\n className = \"\",\n ...props\n },\n ref,\n ) => {\n return (\n <Skeleton\n ref={ref}\n variant=\"rounded\"\n width={width}\n height={height}\n animation={animation}\n className={className}\n {...props}\n />\n );\n },\n);\n\nSkeletonImage.displayName = \"SkeletonImage\";\n\n// Skeleton Card Component\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n (\n {\n showImage = true,\n imageHeight = 200,\n lines = 3,\n showAvatar = false,\n showActions = false,\n className,\n animation = \"pulse\",\n tone = \"default\",\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={mergeClassNames(\n \"overflow-hidden rounded-md border border-ds-border-2 bg-ds-surface-1 shadow-sm\",\n className,\n )}\n >\n {showImage && (\n <SkeletonImage\n height={imageHeight}\n animation={animation}\n borderRadius={0}\n tone={tone}\n />\n )}\n\n <div className=\"p-4 flex flex-col gap-4\">\n {showAvatar && (\n <div className=\"flex items-center gap-3\">\n <SkeletonAvatar size={40} animation={animation} tone={tone} />\n <div className=\"flex-1\">\n <Skeleton\n variant=\"text\"\n width=\"60%\"\n height={14}\n animation={animation}\n tone={tone}\n />\n <Skeleton\n variant=\"text\"\n width=\"40%\"\n height={12}\n animation={animation}\n tone={tone}\n className=\"mt-2\"\n />\n </div>\n </div>\n )}\n\n <SkeletonText\n lines={lines}\n animation={animation}\n height={14}\n lineGap={10}\n tone={tone}\n />\n\n {showActions && (\n <div className=\"flex gap-3 mt-2\">\n <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n </div>\n )}\n </div>\n </div>\n );\n },\n);\n\nSkeletonCard.displayName = \"SkeletonCard\";\n\n// Skeleton Metric Card Component\nconst SkeletonMetricCard = forwardRef<HTMLDivElement, SkeletonMetricCardProps>(\n (\n {\n showTrend = true,\n showChart = true,\n chartBars = 7,\n valueWidth = \"52%\",\n className,\n animation = \"wave\",\n tone = \"accent\",\n },\n ref,\n ) => {\n const chartHeights = [36, 52, 46, 72, 64, 84, 68, 78];\n\n return (\n <div\n ref={ref}\n className={mergeClassNames(\n \"rounded-md border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm\",\n className,\n )}\n >\n <div className=\"flex items-start justify-between gap-4\">\n <div className=\"min-w-0 flex-1 space-y-3\">\n <Skeleton\n width=\"34%\"\n height={11}\n animation={animation}\n tone=\"subtle\"\n />\n <Skeleton\n width={valueWidth}\n height={28}\n animation={animation}\n tone={tone}\n radius=\"md\"\n />\n <Skeleton\n width=\"44%\"\n height={12}\n animation={animation}\n tone=\"subtle\"\n />\n </div>\n\n {showTrend ? (\n <div className=\"rounded-full border border-ds-border-2 bg-ds-surface-1 px-3 py-2\">\n <Skeleton\n width={54}\n height={12}\n animation={animation}\n tone=\"subtle\"\n />\n </div>\n ) : null}\n </div>\n\n {showChart ? (\n <div className=\"mt-5 flex h-20 items-end gap-2\">\n {Array.from({ length: chartBars }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"rounded\"\n width=\"100%\"\n height={`${chartHeights[index % chartHeights.length]}%`}\n animation={animation}\n tone={tone}\n className=\"flex-1\"\n />\n ))}\n </div>\n ) : null}\n </div>\n );\n },\n);\n\nSkeletonMetricCard.displayName = \"SkeletonMetricCard\";\n\n// Skeleton Table Row Component\nconst SkeletonTableRow = forwardRef<\n HTMLDivElement,\n { columns?: number; animation?: SkeletonAnimation; className?: string }\n>(({ columns = 4, animation = \"pulse\", className = \"\" }, ref) => {\n const sharedWidth =\n columns <= 1 ? \"100%\" : `${Math.floor(72 / (columns - 1))}%`;\n\n return (\n <div ref={ref} className={`flex items-center gap-4 py-3 ${className}`}>\n {Array.from({ length: columns }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"text\"\n width={index === 0 ? \"28%\" : sharedWidth}\n height={16}\n animation={animation}\n />\n ))}\n </div>\n );\n});\n\nSkeletonTableRow.displayName = \"SkeletonTableRow\";\n\n// Skeleton List Item Component\nconst SkeletonListItem = forwardRef<\n HTMLDivElement,\n {\n showAvatar?: boolean;\n showSecondaryText?: boolean;\n showAction?: boolean;\n animation?: SkeletonAnimation;\n className?: string;\n }\n>(\n (\n {\n showAvatar = true,\n showSecondaryText = true,\n showAction = false,\n animation = \"pulse\",\n className = \"\",\n },\n ref,\n ) => {\n return (\n <div ref={ref} className={`flex items-center gap-3 py-3 ${className}`}>\n {showAvatar && <SkeletonAvatar size={48} animation={animation} />}\n <div className=\"flex-1\">\n <Skeleton\n variant=\"text\"\n width=\"70%\"\n height={16}\n animation={animation}\n />\n {showSecondaryText && (\n <Skeleton\n variant=\"text\"\n width=\"50%\"\n height={14}\n animation={animation}\n className=\"mt-2\"\n />\n )}\n </div>\n {showAction && <SkeletonButton size=\"sm\" animation={animation} />}\n </div>\n );\n },\n);\n\nSkeletonListItem.displayName = \"SkeletonListItem\";\n\nexport default Skeleton;\nexport {\n Skeleton,\n SkeletonText,\n SkeletonAvatar,\n SkeletonButton,\n SkeletonImage,\n SkeletonCard,\n SkeletonMetricCard,\n SkeletonTableRow,\n SkeletonListItem,\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"skeleton-B2u9c1xJ.cjs","names":[],"sources":["../../src/components/data-display/skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport type SkeletonVariant = \"text\" \| \"circular\" \| \"rectangular\" \| \"rounded\";\nexport type SkeletonAnimation = \"pulse\" \| \"wave\" \| \"none\";\nexport type SkeletonTone =\n \| \"default\"\n \| \"subtle\"\n \| \"accent\"\n \| \"success\"\n \| \"warning\"\n \| \"danger\"\n \| \"info\";\nexport type SkeletonRadius = \"none\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| \"full\";\nexport type SkeletonSpeed = \"slow\" \| \"normal\" \| \"fast\";\n\ntype SkeletonCssVariables = CSSProperties &\n Record<\n \"--ui-skeleton-base\" \| \"--ui-skeleton-highlight\" \| \"--ui-skeleton-duration\",\n string\n >;\n\nexport interface SkeletonProps extends Omit<\n ComponentPropsWithoutRef<\"div\">,\n \"children\"\n> {\n /** The variant shape of the skeleton /\n variant?: SkeletonVariant;\n /* The animation type /\n animation?: SkeletonAnimation;\n /* Width of the skeleton /\n width?: number \| string;\n /* Height of the skeleton /\n height?: number \| string;\n /* Border radius override /\n borderRadius?: number \| string;\n /* Semantic radius preset /\n radius?: SkeletonRadius;\n /* Semantic tone preset /\n tone?: SkeletonTone;\n /* Animation speed preset or custom duration /\n speed?: SkeletonSpeed \| number \| string;\n /* Number of lines for text variant /\n lines?: number;\n /* Gap between lines /\n lineGap?: number \| string;\n /* Whether the last line should be shorter /\n lastLineWidth?: number \| string;\n}\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"variant\"> {\n /* Number of text lines /\n lines?: number;\n}\n\nexport interface SkeletonAvatarProps extends Omit<\n SkeletonProps,\n \"variant\" \| \"width\" \| \"height\"\n> {\n /* Size of the avatar /\n size?: number \| string;\n}\n\nexport interface SkeletonCardProps {\n /* Whether to show image placeholder /\n showImage?: boolean;\n /* Image height /\n imageHeight?: number \| string;\n /* Number of text lines /\n lines?: number;\n /* Whether to show avatar /\n showAvatar?: boolean;\n /* Whether to show action buttons /\n showActions?: boolean;\n /* Custom className /\n className?: string;\n /* Animation type /\n animation?: SkeletonAnimation;\n /* Semantic tone preset /\n tone?: SkeletonTone;\n}\n\nexport interface SkeletonMetricCardProps {\n /* Whether to show a compact trend badge /\n showTrend?: boolean;\n /* Whether to render spark bars /\n showChart?: boolean;\n /* Number of spark bars /\n chartBars?: number;\n /* Width for the value block /\n valueWidth?: number \| string;\n /* Custom className /\n className?: string;\n /* Animation type /\n animation?: SkeletonAnimation;\n /* Semantic tone preset */\n tone?: SkeletonTone;\n}\n\nconst animationStyles: Record<SkeletonAnimation, string> = {\n pulse: \"ui-skeleton-pulse\",\n wave: \"ui-skeleton-wave\",\n none: \"\",\n};\n\nconst radiusStyles: Record<SkeletonRadius, string> = {\n none: \"rounded-none\",\n sm: \"rounded-sm\",\n md: \"rounded-md\",\n lg: \"rounded-lg\",\n xl: \"rounded-xl\",\n full: \"rounded-full\",\n};\n\nconst variantStyles: Record<SkeletonVariant, SkeletonRadius> = {\n text: \"sm\",\n circular: \"full\",\n rectangular: \"none\",\n rounded: \"md\",\n};\n\nconst speedStyles: Record<SkeletonSpeed, string> = {\n slow: \"2.4s\",\n normal: \"1.6s\",\n fast: \"1.05s\",\n};\n\nconst toneStyles: Record<SkeletonTone, { base: string; highlight: string }> = {\n default: {\n base: \"var(--ds-color-bg-ds-surface-3)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 54%, var(--ds-color-bg-canvas))\",\n },\n subtle: {\n base: \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 72%, var(--ds-color-bg-canvas))\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 42%, var(--ds-color-bg-canvas))\",\n },\n accent: {\n base: \"var(--ds-color-accent-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-accent-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n success: {\n base: \"var(--ds-color-success-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-success-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n warning: {\n base: \"var(--ds-color-warning-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-warning-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n danger: {\n base: \"var(--ds-color-danger-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-danger-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n info: {\n base: \"var(--ds-color-info-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-info-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n};\n\nfunction resolveDimension(value?: number \| string): string \| undefined {\n if (typeof value === \"number\") {\n return `${value}px`;\n }\n\n return value;\n}\n\nfunction resolveDuration(value: SkeletonProps[\"speed\"]): string {\n if (typeof value === \"number\") {\n return `${value}ms`;\n }\n\n if (typeof value === \"string\" && value in speedStyles) {\n return speedStyles[value as SkeletonSpeed];\n }\n\n return value ?? speedStyles.normal;\n}\n\nfunction getDimensionStyle({\n variant,\n width,\n height,\n borderRadius,\n}: {\n variant: SkeletonVariant;\n width?: number \| string;\n height?: number \| string;\n borderRadius?: number \| string;\n}): CSSProperties {\n const nextStyle: CSSProperties = {};\n const resolvedWidth = resolveDimension(width);\n const resolvedHeight = resolveDimension(height);\n const resolvedBorderRadius = resolveDimension(borderRadius);\n\n if (resolvedWidth) {\n nextStyle.width = resolvedWidth;\n } else if (variant === \"text\") {\n nextStyle.width = \"100%\";\n }\n\n if (resolvedHeight) {\n nextStyle.height = resolvedHeight;\n } else if (variant === \"text\") {\n nextStyle.height = \"1em\";\n } else if (variant === \"circular\") {\n nextStyle.width = nextStyle.width \|\| \"40px\";\n nextStyle.height = nextStyle.width;\n }\n\n if (resolvedBorderRadius) {\n nextStyle.borderRadius = resolvedBorderRadius;\n }\n\n return nextStyle;\n}\n\n// Base Skeleton Component\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n (\n {\n variant = \"text\",\n animation = \"pulse\",\n width,\n height,\n borderRadius,\n radius,\n tone = \"default\",\n speed = \"normal\",\n className,\n lines = 1,\n lineGap = 8,\n lastLineWidth = \"80%\",\n style,\n [\"aria-hidden\"]: ariaHidden,\n ...rest\n },\n ref,\n ) => {\n const toneStyle = toneStyles[tone];\n const sharedStyle: SkeletonCssVariables = {\n \"--ui-skeleton-base\": toneStyle.base,\n \"--ui-skeleton-highlight\": toneStyle.highlight,\n \"--ui-skeleton-duration\": resolveDuration(speed),\n ...style,\n };\n const effectiveRadius = radius ?? variantStyles[variant];\n const sharedClassName = mergeClassNames(\n \"relative overflow-hidden bg-[var(--ui-skeleton-base)] pointer-events-none select-none shrink-0\",\n radiusStyles[effectiveRadius],\n animationStyles[animation],\n );\n\n if (variant === \"text\" && lines > 1) {\n return (\n <div\n ref={ref}\n className={mergeClassNames(\"flex flex-col\", className)}\n style={{\n ...style,\n gap: resolveDimension(lineGap),\n width: resolveDimension(width) ?? style?.width,\n }}\n aria-hidden={ariaHidden ?? true}\n data-animation={animation}\n data-tone={tone}\n {...rest}\n >\n {Array.from({ length: lines }).map((_, index) => (\n <div\n key={index}\n className={sharedClassName}\n style={{\n ...sharedStyle,\n ...getDimensionStyle({\n variant,\n width:\n index === lines - 1 ? lastLineWidth : (width ?? \"100%\"),\n height,\n borderRadius,\n }),\n }}\n />\n ))}\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n className={mergeClassNames(sharedClassName, className)}\n style={{\n ...sharedStyle,\n ...getDimensionStyle({ variant, width, height, borderRadius }),\n }}\n aria-hidden={ariaHidden ?? true}\n data-animation={animation}\n data-tone={tone}\n {...rest}\n />\n );\n },\n);\n\nSkeleton.displayName = \"Skeleton\";\n\n// Skeleton Text Component\nconst SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n ({ lines = 3, ...props }, ref) => {\n return <Skeleton ref={ref} variant=\"text\" lines={lines} {...props} />;\n },\n);\n\nSkeletonText.displayName = \"SkeletonText\";\n\n// Skeleton Avatar Component\nconst SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n ({ size = 40, animation = \"pulse\", className = \"\", ...props }, ref) => {\n const sizeValue = typeof size === \"number\" ? `${size}px` : size;\n\n return (\n <Skeleton\n ref={ref}\n variant=\"circular\"\n width={sizeValue}\n height={sizeValue}\n animation={animation}\n className={className}\n {...props}\n />\n );\n },\n);\n\nSkeletonAvatar.displayName = \"SkeletonAvatar\";\n\n// Skeleton Button Component\nconst SkeletonButton = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, \"variant\"> & { size?: \"sm\" \| \"md\" \| \"lg\" }\n>(({ size = \"md\", animation = \"pulse\", className = \"\", ...props }, ref) => {\n const sizeStyles = {\n sm: { width: 80, height: 32 },\n md: { width: 100, height: 40 },\n lg: { width: 120, height: 48 },\n };\n\n return (\n <Skeleton\n ref={ref}\n variant=\"rounded\"\n width={sizeStyles[size].width}\n height={sizeStyles[size].height}\n animation={animation}\n className={className}\n {...props}\n />\n );\n});\n\nSkeletonButton.displayName = \"SkeletonButton\";\n\n// Skeleton Image Component\nconst SkeletonImage = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, \"variant\">\n>(\n (\n {\n width = \"100%\",\n height = 200,\n animation = \"pulse\",\n className = \"\",\n ...props\n },\n ref,\n ) => {\n return (\n <Skeleton\n ref={ref}\n variant=\"rounded\"\n width={width}\n height={height}\n animation={animation}\n className={className}\n {...props}\n />\n );\n },\n);\n\nSkeletonImage.displayName = \"SkeletonImage\";\n\n// Skeleton Card Component\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n (\n {\n showImage = true,\n imageHeight = 200,\n lines = 3,\n showAvatar = false,\n showActions = false,\n className,\n animation = \"pulse\",\n tone = \"default\",\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={mergeClassNames(\n \"overflow-hidden rounded-md border border-ds-border-2 bg-ds-surface-1 shadow-sm\",\n className,\n )}\n >\n {showImage && (\n <SkeletonImage\n height={imageHeight}\n animation={animation}\n borderRadius={0}\n tone={tone}\n />\n )}\n\n <div className=\"p-4 flex flex-col gap-4\">\n {showAvatar && (\n <div className=\"flex items-center gap-3\">\n <SkeletonAvatar size={40} animation={animation} tone={tone} />\n <div className=\"flex-1\">\n <Skeleton\n variant=\"text\"\n width=\"60%\"\n height={14}\n animation={animation}\n tone={tone}\n />\n <Skeleton\n variant=\"text\"\n width=\"40%\"\n height={12}\n animation={animation}\n tone={tone}\n className=\"mt-2\"\n />\n </div>\n </div>\n )}\n\n <SkeletonText\n lines={lines}\n animation={animation}\n height={14}\n lineGap={10}\n tone={tone}\n />\n\n {showActions && (\n <div className=\"flex gap-3 mt-2\">\n <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n </div>\n )}\n </div>\n </div>\n );\n },\n);\n\nSkeletonCard.displayName = \"SkeletonCard\";\n\n// Skeleton Metric Card Component\nconst SkeletonMetricCard = forwardRef<HTMLDivElement, SkeletonMetricCardProps>(\n (\n {\n showTrend = true,\n showChart = true,\n chartBars = 7,\n valueWidth = \"52%\",\n className,\n animation = \"wave\",\n tone = \"accent\",\n },\n ref,\n ) => {\n const chartHeights = [36, 52, 46, 72, 64, 84, 68, 78];\n\n return (\n <div\n ref={ref}\n className={mergeClassNames(\n \"rounded-md border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm\",\n className,\n )}\n >\n <div className=\"flex items-start justify-between gap-4\">\n <div className=\"min-w-0 flex-1 space-y-3\">\n <Skeleton\n width=\"34%\"\n height={11}\n animation={animation}\n tone=\"subtle\"\n />\n <Skeleton\n width={valueWidth}\n height={28}\n animation={animation}\n tone={tone}\n radius=\"md\"\n />\n <Skeleton\n width=\"44%\"\n height={12}\n animation={animation}\n tone=\"subtle\"\n />\n </div>\n\n {showTrend ? (\n <div className=\"rounded-full border border-ds-border-2 bg-ds-surface-1 px-3 py-2\">\n <Skeleton\n width={54}\n height={12}\n animation={animation}\n tone=\"subtle\"\n />\n </div>\n ) : null}\n </div>\n\n {showChart ? (\n <div className=\"mt-5 flex h-20 items-end gap-2\">\n {Array.from({ length: chartBars }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"rounded\"\n width=\"100%\"\n height={`${chartHeights[index % chartHeights.length]}%`}\n animation={animation}\n tone={tone}\n className=\"flex-1\"\n />\n ))}\n </div>\n ) : null}\n </div>\n );\n },\n);\n\nSkeletonMetricCard.displayName = \"SkeletonMetricCard\";\n\n// Skeleton Table Row Component\nconst SkeletonTableRow = forwardRef<\n HTMLDivElement,\n { columns?: number; animation?: SkeletonAnimation; className?: string }\n>(({ columns = 4, animation = \"pulse\", className = \"\" }, ref) => {\n const sharedWidth =\n columns <= 1 ? \"100%\" : `${Math.floor(72 / (columns - 1))}%`;\n\n return (\n <div ref={ref} className={`flex items-center gap-4 py-3 ${className}`}>\n {Array.from({ length: columns }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"text\"\n width={index === 0 ? \"28%\" : sharedWidth}\n height={16}\n animation={animation}\n />\n ))}\n </div>\n );\n});\n\nSkeletonTableRow.displayName = \"SkeletonTableRow\";\n\n// Skeleton List Item Component\nconst SkeletonListItem = forwardRef<\n HTMLDivElement,\n {\n showAvatar?: boolean;\n showSecondaryText?: boolean;\n showAction?: boolean;\n animation?: SkeletonAnimation;\n className?: string;\n }\n>(\n (\n {\n showAvatar = true,\n showSecondaryText = true,\n showAction = false,\n animation = \"pulse\",\n className = \"\",\n },\n ref,\n ) => {\n return (\n <div ref={ref} className={`flex items-center gap-3 py-3 ${className}`}>\n {showAvatar && <SkeletonAvatar size={48} animation={animation} />}\n <div className=\"flex-1\">\n <Skeleton\n variant=\"text\"\n width=\"70%\"\n height={16}\n animation={animation}\n />\n {showSecondaryText && (\n <Skeleton\n variant=\"text\"\n width=\"50%\"\n height={14}\n animation={animation}\n className=\"mt-2\"\n />\n )}\n </div>\n {showAction && <SkeletonButton size=\"sm\" animation={animation} />}\n </div>\n );\n },\n);\n\nSkeletonListItem.displayName = \"SkeletonListItem\";\n\nexport default Skeleton;\nexport {\n Skeleton,\n SkeletonText,\n SkeletonAvatar,\n SkeletonButton,\n SkeletonImage,\n SkeletonCard,\n SkeletonMetricCard,\n SkeletonTableRow,\n SkeletonListItem,\n};\n"],"mappings":";;;;AAqGA,IAAM,kBAAqD;CACzD,OAAO;CACP,MAAM;CACN,MAAM;AACR;AAEA,IAAM,eAA+C;CACnD,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,MAAM;AACR;AAEA,IAAM,gBAAyD;CAC7D,MAAM;CACN,UAAU;CACV,aAAa;CACb,SAAS;AACX;AAEA,IAAM,cAA6C;CACjD,MAAM;CACN,QAAQ;CACR,MAAM;AACR;AAEA,IAAM,aAAwE;CAC5E,SAAS;EACP,MAAM;EACN,WACE;CACJ;CACA,QAAQ;EACN,MAAM;EACN,WACE;CACJ;CACA,QAAQ;EACN,MAAM;EACN,WACE;CACJ;CACA,SAAS;EACP,MAAM;EACN,WACE;CACJ;CACA,SAAS;EACP,MAAM;EACN,WACE;CACJ;CACA,QAAQ;EACN,MAAM;EACN,WACE;CACJ;CACA,MAAM;EACJ,MAAM;EACN,WACE;CACJ;AACF;AAEA,SAAS,iBAAiB,OAA6C;CACrE,IAAI,OAAO,UAAU,UACnB,OAAO,GAAG,MAAM;CAGlB,OAAO;AACT;AAEA,SAAS,gBAAgB,OAAuC;CAC9D,IAAI,OAAO,UAAU,UACnB,OAAO,GAAG,MAAM;CAGlB,IAAI,OAAO,UAAU,YAAY,SAAS,aACxC,OAAO,YAAY;CAGrB,OAAO,SAAS,YAAY;AAC9B;AAEA,SAAS,kBAAkB,EACzB,SACA,OACA,QACA,gBAMgB;CAChB,MAAM,YAA2B,CAAC;CAClC,MAAM,gBAAgB,iBAAiB,KAAK;CAC5C,MAAM,iBAAiB,iBAAiB,MAAM;CAC9C,MAAM,uBAAuB,iBAAiB,YAAY;CAE1D,IAAI,eACF,UAAU,QAAQ;MACb,IAAI,YAAY,QACrB,UAAU,QAAQ;CAGpB,IAAI,gBACF,UAAU,SAAS;MACd,IAAI,YAAY,QACrB,UAAU,SAAS;MACd,IAAI,YAAY,YAAY;EACjC,UAAU,QAAQ,UAAU,SAAS;EACrC,UAAU,SAAS,UAAU;CAC/B;CAEA,IAAI,sBACF,UAAU,eAAe;CAG3B,OAAO;AACT;AAGA,IAAM,YAAA,GAAA,MAAA,aAEF,EACE,UAAU,QACV,YAAY,SACZ,OACA,QACA,cACA,QACA,OAAO,WACP,QAAQ,UACR,WACA,QAAQ,GACR,UAAU,GACV,gBAAgB,OAChB,QACC,gBAAgB,YACjB,GAAG,QAEL,QACG;CACH,MAAM,YAAY,WAAW;CAC7B,MAAM,cAAoC;EACxC,sBAAsB,UAAU;EAChC,2BAA2B,UAAU;EACrC,0BAA0B,gBAAgB,KAAK;EAC/C,GAAG;CACL;CAEA,MAAM,kBAAkB,cAAA,gBACtB,kGACA,aAHsB,UAAU,cAAc,WAI9C,gBAAgB,UAClB;CAEA,IAAI,YAAY,UAAU,QAAQ,GAChC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACO;EACL,WAAW,cAAA,gBAAgB,iBAAiB,SAAS;EACrD,OAAO;GACL,GAAG;GACH,KAAK,iBAAiB,OAAO;GAC7B,OAAO,iBAAiB,KAAK,KAAK,OAAO;EAC3C;EACA,eAAa,cAAc;EAC3B,kBAAgB;EAChB,aAAW;EACX,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,MAAM,CAAC,EAAE,KAAK,GAAG,UACrC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAEE,WAAW;GACX,OAAO;IACL,GAAG;IACH,GAAG,kBAAkB;KACnB;KACA,OACE,UAAU,QAAQ,IAAI,gBAAiB,SAAS;KAClD;KACA;IACF,CAAC;GACH;EACD,GAZM,KAYN,CACF;CACE,CAAA;CAIT,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACO;EACL,WAAW,cAAA,gBAAgB,iBAAiB,SAAS;EACrD,OAAO;GACL,GAAG;GACH,GAAG,kBAAkB;IAAE;IAAS;IAAO;IAAQ;GAAa,CAAC;EAC/D;EACA,eAAa,cAAc;EAC3B,kBAAgB;EAChB,aAAW;EACX,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAS,cAAc;AAGvB,IAAM,gBAAA,GAAA,MAAA,aACH,EAAE,QAAQ,GAAG,GAAG,SAAS,QAAQ;CAChC,OAAO,iBAAA,GAAA,kBAAA,KAAC,UAAD;EAAe;EAAK,SAAQ;EAAc;EAAO,GAAI;CAAQ,CAAA;AACtE,CACF;AAEA,aAAa,cAAc;AAG3B,IAAM,kBAAA,GAAA,MAAA,aACH,EAAE,OAAO,IAAI,YAAY,SAAS,YAAY,IAAI,GAAG,SAAS,QAAQ;CACrE,MAAM,YAAY,OAAO,SAAS,WAAW,GAAG,KAAK,MAAM;CAE3D,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACO;EACL,SAAQ;EACR,OAAO;EACP,QAAQ;EACG;EACA;EACX,GAAI;CACL,CAAA;AAEL,CACF;AAEA,eAAe,cAAc;AAG7B,IAAM,kBAAA,GAAA,MAAA,aAGH,EAAE,OAAO,MAAM,YAAY,SAAS,YAAY,IAAI,GAAG,SAAS,QAAQ;CACzE,MAAM,aAAa;EACjB,IAAI;GAAE,OAAO;GAAI,QAAQ;EAAG;EAC5B,IAAI;GAAE,OAAO;GAAK,QAAQ;EAAG;EAC7B,IAAI;GAAE,OAAO;GAAK,QAAQ;EAAG;CAC/B;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACO;EACL,SAAQ;EACR,OAAO,WAAW,MAAM;EACxB,QAAQ,WAAW,MAAM;EACd;EACA;EACX,GAAI;CACL,CAAA;AAEL,CAAC;AAED,eAAe,cAAc;AAG7B,IAAM,iBAAA,GAAA,MAAA,aAKF,EACE,QAAQ,QACR,SAAS,KACT,YAAY,SACZ,YAAY,IACZ,GAAG,SAEL,QACG;CACH,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACO;EACL,SAAQ;EACD;EACC;EACG;EACA;EACX,GAAI;CACL,CAAA;AAEL,CACF;AAEA,cAAc,cAAc;AAG5B,IAAM,gBAAA,GAAA,MAAA,aAEF,EACE,YAAY,MACZ,cAAc,KACd,QAAQ,GACR,aAAa,OACb,cAAc,OACd,WACA,YAAY,SACZ,OAAO,aAET,QACG;CACH,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACO;EACL,WAAW,cAAA,gBACT,kFACA,SACF;YALF,CAOG,aACC,iBAAA,GAAA,kBAAA,KAAC,eAAD;GACE,QAAQ;GACG;GACX,cAAc;GACR;EACP,CAAA,GAGH,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf;IACG,cACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;MAAgB,MAAM;MAAe;MAAiB;KAAO,CAAA,GAC7D,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAK,WAAU;gBAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;OACE,SAAQ;OACR,OAAM;OACN,QAAQ;OACG;OACL;MACP,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,UAAD;OACE,SAAQ;OACR,OAAM;OACN,QAAQ;OACG;OACL;OACN,WAAU;MACX,CAAA,CACE;OACF;;IAGP,iBAAA,GAAA,kBAAA,KAAC,cAAD;KACS;KACI;KACX,QAAQ;KACR,SAAS;KACH;IACP,CAAA;IAEA,eACC,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAU;eAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;MAAgB,MAAK;MAAgB;MAAiB;KAAO,CAAA,GAC7D,iBAAA,GAAA,kBAAA,KAAC,gBAAD;MAAgB,MAAK;MAAgB;MAAiB;KAAO,CAAA,CAC1D;;GAEJ;IACF;;AAET,CACF;AAEA,aAAa,cAAc;AAG3B,IAAM,sBAAA,GAAA,MAAA,aAEF,EACE,YAAY,MACZ,YAAY,MACZ,YAAY,GACZ,aAAa,OACb,WACA,YAAY,QACZ,OAAO,YAET,QACG;CACH,MAAM,eAAe;EAAC;EAAI;EAAI;EAAI;EAAI;EAAI;EAAI;EAAI;CAAE;CAEpD,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACO;EACL,WAAW,cAAA,gBACT,sEACA,SACF;YALF,CAOE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf;KACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;MACE,OAAM;MACN,QAAQ;MACG;MACX,MAAK;KACN,CAAA;KACD,iBAAA,GAAA,kBAAA,KAAC,UAAD;MACE,OAAO;MACP,QAAQ;MACG;MACL;MACN,QAAO;KACR,CAAA;KACD,iBAAA,GAAA,kBAAA,KAAC,UAAD;MACE,OAAM;MACN,QAAQ;MACG;MACX,MAAK;KACN,CAAA;IACE;OAEJ,YACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACb,iBAAA,GAAA,kBAAA,KAAC,UAAD;KACE,OAAO;KACP,QAAQ;KACG;KACX,MAAK;IACN,CAAA;GACE,CAAA,IACH,IACD;MAEJ,YACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,UAAU,CAAC,EAAE,KAAK,GAAG,UACzC,iBAAA,GAAA,kBAAA,KAAC,UAAD;IAEE,SAAQ;IACR,OAAM;IACN,QAAQ,GAAG,aAAa,QAAQ,aAAa,QAAQ;IAC1C;IACL;IACN,WAAU;GACX,GAPM,KAON,CACF;EACE,CAAA,IACH,IACD;;AAET,CACF;AAEA,mBAAmB,cAAc;AAGjC,IAAM,oBAAA,GAAA,MAAA,aAGH,EAAE,UAAU,GAAG,YAAY,SAAS,YAAY,MAAM,QAAQ;CAC/D,MAAM,cACJ,WAAW,IAAI,SAAS,GAAG,KAAK,MAAM,MAAM,UAAU,EAAE,EAAE;CAE5D,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAU;EAAK,WAAW,gCAAgC;YACvD,MAAM,KAAK,EAAE,QAAQ,QAAQ,CAAC,EAAE,KAAK,GAAG,UACvC,iBAAA,GAAA,kBAAA,KAAC,UAAD;GAEE,SAAQ;GACR,OAAO,UAAU,IAAI,QAAQ;GAC7B,QAAQ;GACG;EACZ,GALM,KAKN,CACF;CACE,CAAA;AAET,CAAC;AAED,iBAAiB,cAAc;AAG/B,IAAM,oBAAA,GAAA,MAAA,aAWF,EACE,aAAa,MACb,oBAAoB,MACpB,aAAa,OACb,YAAY,SACZ,YAAY,MAEd,QACG;CACH,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAU;EAAK,WAAW,gCAAgC;YAA1D;GACG,cAAc,iBAAA,GAAA,kBAAA,KAAC,gBAAD;IAAgB,MAAM;IAAe;GAAY,CAAA;GAChE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;KACE,SAAQ;KACR,OAAM;KACN,QAAQ;KACG;IACZ,CAAA,GACA,qBACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;KACE,SAAQ;KACR,OAAM;KACN,QAAQ;KACG;KACX,WAAU;IACX,CAAA,CAEA;;GACJ,cAAc,iBAAA,GAAA,kBAAA,KAAC,gBAAD;IAAgB,MAAK;IAAgB;GAAY,CAAA;EAC7D;;AAET,CACF;AAEA,iBAAiB,cAAc"}

package/dist/chunks/{skeleton-BsDMlWZG.mjs → skeleton-DVAlrOq2.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
+import { n as mergeClassNames } from "./utils-Dc7j29ec.mjs";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-display/skeleton/Skeleton.tsx
@@ -365,4 +365,4 @@ SkeletonListItem.displayName = "SkeletonListItem";
 //#endregion
 export { SkeletonImage as a, SkeletonTableRow as c, SkeletonCard as i, SkeletonText as l, SkeletonAvatar as n, SkeletonListItem as o, SkeletonButton as r, SkeletonMetricCard as s, Skeleton as t };
-//# sourceMappingURL=skeleton-BsDMlWZG.mjs.map
+//# sourceMappingURL=skeleton-DVAlrOq2.mjs.map

package/dist/chunks/{skeleton-BsDMlWZG.mjs.map → skeleton-DVAlrOq2.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton-BsDMlWZG.mjs","names":[],"sources":["../../src/components/data-display/skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport type SkeletonVariant = \"text\" \| \"circular\" \| \"rectangular\" \| \"rounded\";\nexport type SkeletonAnimation = \"pulse\" \| \"wave\" \| \"none\";\nexport type SkeletonTone =\n \| \"default\"\n \| \"subtle\"\n \| \"accent\"\n \| \"success\"\n \| \"warning\"\n \| \"danger\"\n \| \"info\";\nexport type SkeletonRadius = \"none\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| \"full\";\nexport type SkeletonSpeed = \"slow\" \| \"normal\" \| \"fast\";\n\ntype SkeletonCssVariables = CSSProperties &\n Record<\n \"--ui-skeleton-base\" \| \"--ui-skeleton-highlight\" \| \"--ui-skeleton-duration\",\n string\n >;\n\nexport interface SkeletonProps extends Omit<\n ComponentPropsWithoutRef<\"div\">,\n \"children\"\n> {\n /** The variant shape of the skeleton /\n variant?: SkeletonVariant;\n /* The animation type /\n animation?: SkeletonAnimation;\n /* Width of the skeleton /\n width?: number \| string;\n /* Height of the skeleton /\n height?: number \| string;\n /* Border radius override /\n borderRadius?: number \| string;\n /* Semantic radius preset /\n radius?: SkeletonRadius;\n /* Semantic tone preset /\n tone?: SkeletonTone;\n /* Animation speed preset or custom duration /\n speed?: SkeletonSpeed \| number \| string;\n /* Number of lines for text variant /\n lines?: number;\n /* Gap between lines /\n lineGap?: number \| string;\n /* Whether the last line should be shorter /\n lastLineWidth?: number \| string;\n}\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"variant\"> {\n /* Number of text lines /\n lines?: number;\n}\n\nexport interface SkeletonAvatarProps extends Omit<\n SkeletonProps,\n \"variant\" \| \"width\" \| \"height\"\n> {\n /* Size of the avatar /\n size?: number \| string;\n}\n\nexport interface SkeletonCardProps {\n /* Whether to show image placeholder /\n showImage?: boolean;\n /* Image height /\n imageHeight?: number \| string;\n /* Number of text lines /\n lines?: number;\n /* Whether to show avatar /\n showAvatar?: boolean;\n /* Whether to show action buttons /\n showActions?: boolean;\n /* Custom className /\n className?: string;\n /* Animation type /\n animation?: SkeletonAnimation;\n /* Semantic tone preset /\n tone?: SkeletonTone;\n}\n\nexport interface SkeletonMetricCardProps {\n /* Whether to show a compact trend badge /\n showTrend?: boolean;\n /* Whether to render spark bars /\n showChart?: boolean;\n /* Number of spark bars /\n chartBars?: number;\n /* Width for the value block /\n valueWidth?: number \| string;\n /* Custom className /\n className?: string;\n /* Animation type /\n animation?: SkeletonAnimation;\n /* Semantic tone preset */\n tone?: SkeletonTone;\n}\n\nconst animationStyles: Record<SkeletonAnimation, string> = {\n pulse: \"ui-skeleton-pulse\",\n wave: \"ui-skeleton-wave\",\n none: \"\",\n};\n\nconst radiusStyles: Record<SkeletonRadius, string> = {\n none: \"rounded-none\",\n sm: \"rounded-sm\",\n md: \"rounded-md\",\n lg: \"rounded-lg\",\n xl: \"rounded-xl\",\n full: \"rounded-full\",\n};\n\nconst variantStyles: Record<SkeletonVariant, SkeletonRadius> = {\n text: \"sm\",\n circular: \"full\",\n rectangular: \"none\",\n rounded: \"md\",\n};\n\nconst speedStyles: Record<SkeletonSpeed, string> = {\n slow: \"2.4s\",\n normal: \"1.6s\",\n fast: \"1.05s\",\n};\n\nconst toneStyles: Record<SkeletonTone, { base: string; highlight: string }> = {\n default: {\n base: \"var(--ds-color-bg-ds-surface-3)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 54%, var(--ds-color-bg-canvas))\",\n },\n subtle: {\n base: \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 72%, var(--ds-color-bg-canvas))\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 42%, var(--ds-color-bg-canvas))\",\n },\n accent: {\n base: \"var(--ds-color-accent-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-accent-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n success: {\n base: \"var(--ds-color-success-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-success-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n warning: {\n base: \"var(--ds-color-warning-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-warning-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n danger: {\n base: \"var(--ds-color-danger-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-danger-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n info: {\n base: \"var(--ds-color-info-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-info-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n};\n\nfunction resolveDimension(value?: number \| string): string \| undefined {\n if (typeof value === \"number\") {\n return `${value}px`;\n }\n\n return value;\n}\n\nfunction resolveDuration(value: SkeletonProps[\"speed\"]): string {\n if (typeof value === \"number\") {\n return `${value}ms`;\n }\n\n if (typeof value === \"string\" && value in speedStyles) {\n return speedStyles[value as SkeletonSpeed];\n }\n\n return value ?? speedStyles.normal;\n}\n\nfunction getDimensionStyle({\n variant,\n width,\n height,\n borderRadius,\n}: {\n variant: SkeletonVariant;\n width?: number \| string;\n height?: number \| string;\n borderRadius?: number \| string;\n}): CSSProperties {\n const nextStyle: CSSProperties = {};\n const resolvedWidth = resolveDimension(width);\n const resolvedHeight = resolveDimension(height);\n const resolvedBorderRadius = resolveDimension(borderRadius);\n\n if (resolvedWidth) {\n nextStyle.width = resolvedWidth;\n } else if (variant === \"text\") {\n nextStyle.width = \"100%\";\n }\n\n if (resolvedHeight) {\n nextStyle.height = resolvedHeight;\n } else if (variant === \"text\") {\n nextStyle.height = \"1em\";\n } else if (variant === \"circular\") {\n nextStyle.width = nextStyle.width \|\| \"40px\";\n nextStyle.height = nextStyle.width;\n }\n\n if (resolvedBorderRadius) {\n nextStyle.borderRadius = resolvedBorderRadius;\n }\n\n return nextStyle;\n}\n\n// Base Skeleton Component\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n (\n {\n variant = \"text\",\n animation = \"pulse\",\n width,\n height,\n borderRadius,\n radius,\n tone = \"default\",\n speed = \"normal\",\n className,\n lines = 1,\n lineGap = 8,\n lastLineWidth = \"80%\",\n style,\n [\"aria-hidden\"]: ariaHidden,\n ...rest\n },\n ref,\n ) => {\n const toneStyle = toneStyles[tone];\n const sharedStyle: SkeletonCssVariables = {\n \"--ui-skeleton-base\": toneStyle.base,\n \"--ui-skeleton-highlight\": toneStyle.highlight,\n \"--ui-skeleton-duration\": resolveDuration(speed),\n ...style,\n };\n const effectiveRadius = radius ?? variantStyles[variant];\n const sharedClassName = mergeClassNames(\n \"relative overflow-hidden bg-[var(--ui-skeleton-base)] pointer-events-none select-none shrink-0\",\n radiusStyles[effectiveRadius],\n animationStyles[animation],\n );\n\n if (variant === \"text\" && lines > 1) {\n return (\n <div\n ref={ref}\n className={mergeClassNames(\"flex flex-col\", className)}\n style={{\n ...style,\n gap: resolveDimension(lineGap),\n width: resolveDimension(width) ?? style?.width,\n }}\n aria-hidden={ariaHidden ?? true}\n data-animation={animation}\n data-tone={tone}\n {...rest}\n >\n {Array.from({ length: lines }).map((_, index) => (\n <div\n key={index}\n className={sharedClassName}\n style={{\n ...sharedStyle,\n ...getDimensionStyle({\n variant,\n width:\n index === lines - 1 ? lastLineWidth : (width ?? \"100%\"),\n height,\n borderRadius,\n }),\n }}\n />\n ))}\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n className={mergeClassNames(sharedClassName, className)}\n style={{\n ...sharedStyle,\n ...getDimensionStyle({ variant, width, height, borderRadius }),\n }}\n aria-hidden={ariaHidden ?? true}\n data-animation={animation}\n data-tone={tone}\n {...rest}\n />\n );\n },\n);\n\nSkeleton.displayName = \"Skeleton\";\n\n// Skeleton Text Component\nconst SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n ({ lines = 3, ...props }, ref) => {\n return <Skeleton ref={ref} variant=\"text\" lines={lines} {...props} />;\n },\n);\n\nSkeletonText.displayName = \"SkeletonText\";\n\n// Skeleton Avatar Component\nconst SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n ({ size = 40, animation = \"pulse\", className = \"\", ...props }, ref) => {\n const sizeValue = typeof size === \"number\" ? `${size}px` : size;\n\n return (\n <Skeleton\n ref={ref}\n variant=\"circular\"\n width={sizeValue}\n height={sizeValue}\n animation={animation}\n className={className}\n {...props}\n />\n );\n },\n);\n\nSkeletonAvatar.displayName = \"SkeletonAvatar\";\n\n// Skeleton Button Component\nconst SkeletonButton = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, \"variant\"> & { size?: \"sm\" \| \"md\" \| \"lg\" }\n>(({ size = \"md\", animation = \"pulse\", className = \"\", ...props }, ref) => {\n const sizeStyles = {\n sm: { width: 80, height: 32 },\n md: { width: 100, height: 40 },\n lg: { width: 120, height: 48 },\n };\n\n return (\n <Skeleton\n ref={ref}\n variant=\"rounded\"\n width={sizeStyles[size].width}\n height={sizeStyles[size].height}\n animation={animation}\n className={className}\n {...props}\n />\n );\n});\n\nSkeletonButton.displayName = \"SkeletonButton\";\n\n// Skeleton Image Component\nconst SkeletonImage = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, \"variant\">\n>(\n (\n {\n width = \"100%\",\n height = 200,\n animation = \"pulse\",\n className = \"\",\n ...props\n },\n ref,\n ) => {\n return (\n <Skeleton\n ref={ref}\n variant=\"rounded\"\n width={width}\n height={height}\n animation={animation}\n className={className}\n {...props}\n />\n );\n },\n);\n\nSkeletonImage.displayName = \"SkeletonImage\";\n\n// Skeleton Card Component\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n (\n {\n showImage = true,\n imageHeight = 200,\n lines = 3,\n showAvatar = false,\n showActions = false,\n className,\n animation = \"pulse\",\n tone = \"default\",\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={mergeClassNames(\n \"overflow-hidden rounded-md border border-ds-border-2 bg-ds-surface-1 shadow-sm\",\n className,\n )}\n >\n {showImage && (\n <SkeletonImage\n height={imageHeight}\n animation={animation}\n borderRadius={0}\n tone={tone}\n />\n )}\n\n <div className=\"p-4 flex flex-col gap-4\">\n {showAvatar && (\n <div className=\"flex items-center gap-3\">\n <SkeletonAvatar size={40} animation={animation} tone={tone} />\n <div className=\"flex-1\">\n <Skeleton\n variant=\"text\"\n width=\"60%\"\n height={14}\n animation={animation}\n tone={tone}\n />\n <Skeleton\n variant=\"text\"\n width=\"40%\"\n height={12}\n animation={animation}\n tone={tone}\n className=\"mt-2\"\n />\n </div>\n </div>\n )}\n\n <SkeletonText\n lines={lines}\n animation={animation}\n height={14}\n lineGap={10}\n tone={tone}\n />\n\n {showActions && (\n <div className=\"flex gap-3 mt-2\">\n <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n </div>\n )}\n </div>\n </div>\n );\n },\n);\n\nSkeletonCard.displayName = \"SkeletonCard\";\n\n// Skeleton Metric Card Component\nconst SkeletonMetricCard = forwardRef<HTMLDivElement, SkeletonMetricCardProps>(\n (\n {\n showTrend = true,\n showChart = true,\n chartBars = 7,\n valueWidth = \"52%\",\n className,\n animation = \"wave\",\n tone = \"accent\",\n },\n ref,\n ) => {\n const chartHeights = [36, 52, 46, 72, 64, 84, 68, 78];\n\n return (\n <div\n ref={ref}\n className={mergeClassNames(\n \"rounded-md border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm\",\n className,\n )}\n >\n <div className=\"flex items-start justify-between gap-4\">\n <div className=\"min-w-0 flex-1 space-y-3\">\n <Skeleton\n width=\"34%\"\n height={11}\n animation={animation}\n tone=\"subtle\"\n />\n <Skeleton\n width={valueWidth}\n height={28}\n animation={animation}\n tone={tone}\n radius=\"md\"\n />\n <Skeleton\n width=\"44%\"\n height={12}\n animation={animation}\n tone=\"subtle\"\n />\n </div>\n\n {showTrend ? (\n <div className=\"rounded-full border border-ds-border-2 bg-ds-surface-1 px-3 py-2\">\n <Skeleton\n width={54}\n height={12}\n animation={animation}\n tone=\"subtle\"\n />\n </div>\n ) : null}\n </div>\n\n {showChart ? (\n <div className=\"mt-5 flex h-20 items-end gap-2\">\n {Array.from({ length: chartBars }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"rounded\"\n width=\"100%\"\n height={`${chartHeights[index % chartHeights.length]}%`}\n animation={animation}\n tone={tone}\n className=\"flex-1\"\n />\n ))}\n </div>\n ) : null}\n </div>\n );\n },\n);\n\nSkeletonMetricCard.displayName = \"SkeletonMetricCard\";\n\n// Skeleton Table Row Component\nconst SkeletonTableRow = forwardRef<\n HTMLDivElement,\n { columns?: number; animation?: SkeletonAnimation; className?: string }\n>(({ columns = 4, animation = \"pulse\", className = \"\" }, ref) => {\n const sharedWidth =\n columns <= 1 ? \"100%\" : `${Math.floor(72 / (columns - 1))}%`;\n\n return (\n <div ref={ref} className={`flex items-center gap-4 py-3 ${className}`}>\n {Array.from({ length: columns }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"text\"\n width={index === 0 ? \"28%\" : sharedWidth}\n height={16}\n animation={animation}\n />\n ))}\n </div>\n );\n});\n\nSkeletonTableRow.displayName = \"SkeletonTableRow\";\n\n// Skeleton List Item Component\nconst SkeletonListItem = forwardRef<\n HTMLDivElement,\n {\n showAvatar?: boolean;\n showSecondaryText?: boolean;\n showAction?: boolean;\n animation?: SkeletonAnimation;\n className?: string;\n }\n>(\n (\n {\n showAvatar = true,\n showSecondaryText = true,\n showAction = false,\n animation = \"pulse\",\n className = \"\",\n },\n ref,\n ) => {\n return (\n <div ref={ref} className={`flex items-center gap-3 py-3 ${className}`}>\n {showAvatar && <SkeletonAvatar size={48} animation={animation} />}\n <div className=\"flex-1\">\n <Skeleton\n variant=\"text\"\n width=\"70%\"\n height={16}\n animation={animation}\n />\n {showSecondaryText && (\n <Skeleton\n variant=\"text\"\n width=\"50%\"\n height={14}\n animation={animation}\n className=\"mt-2\"\n />\n )}\n </div>\n {showAction && <SkeletonButton size=\"sm\" animation={animation} />}\n </div>\n );\n },\n);\n\nSkeletonListItem.displayName = \"SkeletonListItem\";\n\nexport default Skeleton;\nexport {\n Skeleton,\n SkeletonText,\n SkeletonAvatar,\n SkeletonButton,\n SkeletonImage,\n SkeletonCard,\n SkeletonMetricCard,\n SkeletonTableRow,\n SkeletonListItem,\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"skeleton-DVAlrOq2.mjs","names":[],"sources":["../../src/components/data-display/skeleton/Skeleton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport type SkeletonVariant = \"text\" \| \"circular\" \| \"rectangular\" \| \"rounded\";\nexport type SkeletonAnimation = \"pulse\" \| \"wave\" \| \"none\";\nexport type SkeletonTone =\n \| \"default\"\n \| \"subtle\"\n \| \"accent\"\n \| \"success\"\n \| \"warning\"\n \| \"danger\"\n \| \"info\";\nexport type SkeletonRadius = \"none\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| \"full\";\nexport type SkeletonSpeed = \"slow\" \| \"normal\" \| \"fast\";\n\ntype SkeletonCssVariables = CSSProperties &\n Record<\n \"--ui-skeleton-base\" \| \"--ui-skeleton-highlight\" \| \"--ui-skeleton-duration\",\n string\n >;\n\nexport interface SkeletonProps extends Omit<\n ComponentPropsWithoutRef<\"div\">,\n \"children\"\n> {\n /** The variant shape of the skeleton /\n variant?: SkeletonVariant;\n /* The animation type /\n animation?: SkeletonAnimation;\n /* Width of the skeleton /\n width?: number \| string;\n /* Height of the skeleton /\n height?: number \| string;\n /* Border radius override /\n borderRadius?: number \| string;\n /* Semantic radius preset /\n radius?: SkeletonRadius;\n /* Semantic tone preset /\n tone?: SkeletonTone;\n /* Animation speed preset or custom duration /\n speed?: SkeletonSpeed \| number \| string;\n /* Number of lines for text variant /\n lines?: number;\n /* Gap between lines /\n lineGap?: number \| string;\n /* Whether the last line should be shorter /\n lastLineWidth?: number \| string;\n}\n\nexport interface SkeletonTextProps extends Omit<SkeletonProps, \"variant\"> {\n /* Number of text lines /\n lines?: number;\n}\n\nexport interface SkeletonAvatarProps extends Omit<\n SkeletonProps,\n \"variant\" \| \"width\" \| \"height\"\n> {\n /* Size of the avatar /\n size?: number \| string;\n}\n\nexport interface SkeletonCardProps {\n /* Whether to show image placeholder /\n showImage?: boolean;\n /* Image height /\n imageHeight?: number \| string;\n /* Number of text lines /\n lines?: number;\n /* Whether to show avatar /\n showAvatar?: boolean;\n /* Whether to show action buttons /\n showActions?: boolean;\n /* Custom className /\n className?: string;\n /* Animation type /\n animation?: SkeletonAnimation;\n /* Semantic tone preset /\n tone?: SkeletonTone;\n}\n\nexport interface SkeletonMetricCardProps {\n /* Whether to show a compact trend badge /\n showTrend?: boolean;\n /* Whether to render spark bars /\n showChart?: boolean;\n /* Number of spark bars /\n chartBars?: number;\n /* Width for the value block /\n valueWidth?: number \| string;\n /* Custom className /\n className?: string;\n /* Animation type /\n animation?: SkeletonAnimation;\n /* Semantic tone preset */\n tone?: SkeletonTone;\n}\n\nconst animationStyles: Record<SkeletonAnimation, string> = {\n pulse: \"ui-skeleton-pulse\",\n wave: \"ui-skeleton-wave\",\n none: \"\",\n};\n\nconst radiusStyles: Record<SkeletonRadius, string> = {\n none: \"rounded-none\",\n sm: \"rounded-sm\",\n md: \"rounded-md\",\n lg: \"rounded-lg\",\n xl: \"rounded-xl\",\n full: \"rounded-full\",\n};\n\nconst variantStyles: Record<SkeletonVariant, SkeletonRadius> = {\n text: \"sm\",\n circular: \"full\",\n rectangular: \"none\",\n rounded: \"md\",\n};\n\nconst speedStyles: Record<SkeletonSpeed, string> = {\n slow: \"2.4s\",\n normal: \"1.6s\",\n fast: \"1.05s\",\n};\n\nconst toneStyles: Record<SkeletonTone, { base: string; highlight: string }> = {\n default: {\n base: \"var(--ds-color-bg-ds-surface-3)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 54%, var(--ds-color-bg-canvas))\",\n },\n subtle: {\n base: \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 72%, var(--ds-color-bg-canvas))\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-bg-ds-surface-3) 42%, var(--ds-color-bg-canvas))\",\n },\n accent: {\n base: \"var(--ds-color-accent-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-accent-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n success: {\n base: \"var(--ds-color-success-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-success-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n warning: {\n base: \"var(--ds-color-warning-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-warning-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n danger: {\n base: \"var(--ds-color-danger-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-danger-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n info: {\n base: \"var(--ds-color-info-subtle)\",\n highlight:\n \"color-mix(in oklch, var(--ds-color-info-subtle) 48%, var(--ds-color-bg-canvas))\",\n },\n};\n\nfunction resolveDimension(value?: number \| string): string \| undefined {\n if (typeof value === \"number\") {\n return `${value}px`;\n }\n\n return value;\n}\n\nfunction resolveDuration(value: SkeletonProps[\"speed\"]): string {\n if (typeof value === \"number\") {\n return `${value}ms`;\n }\n\n if (typeof value === \"string\" && value in speedStyles) {\n return speedStyles[value as SkeletonSpeed];\n }\n\n return value ?? speedStyles.normal;\n}\n\nfunction getDimensionStyle({\n variant,\n width,\n height,\n borderRadius,\n}: {\n variant: SkeletonVariant;\n width?: number \| string;\n height?: number \| string;\n borderRadius?: number \| string;\n}): CSSProperties {\n const nextStyle: CSSProperties = {};\n const resolvedWidth = resolveDimension(width);\n const resolvedHeight = resolveDimension(height);\n const resolvedBorderRadius = resolveDimension(borderRadius);\n\n if (resolvedWidth) {\n nextStyle.width = resolvedWidth;\n } else if (variant === \"text\") {\n nextStyle.width = \"100%\";\n }\n\n if (resolvedHeight) {\n nextStyle.height = resolvedHeight;\n } else if (variant === \"text\") {\n nextStyle.height = \"1em\";\n } else if (variant === \"circular\") {\n nextStyle.width = nextStyle.width \|\| \"40px\";\n nextStyle.height = nextStyle.width;\n }\n\n if (resolvedBorderRadius) {\n nextStyle.borderRadius = resolvedBorderRadius;\n }\n\n return nextStyle;\n}\n\n// Base Skeleton Component\nconst Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n (\n {\n variant = \"text\",\n animation = \"pulse\",\n width,\n height,\n borderRadius,\n radius,\n tone = \"default\",\n speed = \"normal\",\n className,\n lines = 1,\n lineGap = 8,\n lastLineWidth = \"80%\",\n style,\n [\"aria-hidden\"]: ariaHidden,\n ...rest\n },\n ref,\n ) => {\n const toneStyle = toneStyles[tone];\n const sharedStyle: SkeletonCssVariables = {\n \"--ui-skeleton-base\": toneStyle.base,\n \"--ui-skeleton-highlight\": toneStyle.highlight,\n \"--ui-skeleton-duration\": resolveDuration(speed),\n ...style,\n };\n const effectiveRadius = radius ?? variantStyles[variant];\n const sharedClassName = mergeClassNames(\n \"relative overflow-hidden bg-[var(--ui-skeleton-base)] pointer-events-none select-none shrink-0\",\n radiusStyles[effectiveRadius],\n animationStyles[animation],\n );\n\n if (variant === \"text\" && lines > 1) {\n return (\n <div\n ref={ref}\n className={mergeClassNames(\"flex flex-col\", className)}\n style={{\n ...style,\n gap: resolveDimension(lineGap),\n width: resolveDimension(width) ?? style?.width,\n }}\n aria-hidden={ariaHidden ?? true}\n data-animation={animation}\n data-tone={tone}\n {...rest}\n >\n {Array.from({ length: lines }).map((_, index) => (\n <div\n key={index}\n className={sharedClassName}\n style={{\n ...sharedStyle,\n ...getDimensionStyle({\n variant,\n width:\n index === lines - 1 ? lastLineWidth : (width ?? \"100%\"),\n height,\n borderRadius,\n }),\n }}\n />\n ))}\n </div>\n );\n }\n\n return (\n <div\n ref={ref}\n className={mergeClassNames(sharedClassName, className)}\n style={{\n ...sharedStyle,\n ...getDimensionStyle({ variant, width, height, borderRadius }),\n }}\n aria-hidden={ariaHidden ?? true}\n data-animation={animation}\n data-tone={tone}\n {...rest}\n />\n );\n },\n);\n\nSkeleton.displayName = \"Skeleton\";\n\n// Skeleton Text Component\nconst SkeletonText = forwardRef<HTMLDivElement, SkeletonTextProps>(\n ({ lines = 3, ...props }, ref) => {\n return <Skeleton ref={ref} variant=\"text\" lines={lines} {...props} />;\n },\n);\n\nSkeletonText.displayName = \"SkeletonText\";\n\n// Skeleton Avatar Component\nconst SkeletonAvatar = forwardRef<HTMLDivElement, SkeletonAvatarProps>(\n ({ size = 40, animation = \"pulse\", className = \"\", ...props }, ref) => {\n const sizeValue = typeof size === \"number\" ? `${size}px` : size;\n\n return (\n <Skeleton\n ref={ref}\n variant=\"circular\"\n width={sizeValue}\n height={sizeValue}\n animation={animation}\n className={className}\n {...props}\n />\n );\n },\n);\n\nSkeletonAvatar.displayName = \"SkeletonAvatar\";\n\n// Skeleton Button Component\nconst SkeletonButton = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, \"variant\"> & { size?: \"sm\" \| \"md\" \| \"lg\" }\n>(({ size = \"md\", animation = \"pulse\", className = \"\", ...props }, ref) => {\n const sizeStyles = {\n sm: { width: 80, height: 32 },\n md: { width: 100, height: 40 },\n lg: { width: 120, height: 48 },\n };\n\n return (\n <Skeleton\n ref={ref}\n variant=\"rounded\"\n width={sizeStyles[size].width}\n height={sizeStyles[size].height}\n animation={animation}\n className={className}\n {...props}\n />\n );\n});\n\nSkeletonButton.displayName = \"SkeletonButton\";\n\n// Skeleton Image Component\nconst SkeletonImage = forwardRef<\n HTMLDivElement,\n Omit<SkeletonProps, \"variant\">\n>(\n (\n {\n width = \"100%\",\n height = 200,\n animation = \"pulse\",\n className = \"\",\n ...props\n },\n ref,\n ) => {\n return (\n <Skeleton\n ref={ref}\n variant=\"rounded\"\n width={width}\n height={height}\n animation={animation}\n className={className}\n {...props}\n />\n );\n },\n);\n\nSkeletonImage.displayName = \"SkeletonImage\";\n\n// Skeleton Card Component\nconst SkeletonCard = forwardRef<HTMLDivElement, SkeletonCardProps>(\n (\n {\n showImage = true,\n imageHeight = 200,\n lines = 3,\n showAvatar = false,\n showActions = false,\n className,\n animation = \"pulse\",\n tone = \"default\",\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={mergeClassNames(\n \"overflow-hidden rounded-md border border-ds-border-2 bg-ds-surface-1 shadow-sm\",\n className,\n )}\n >\n {showImage && (\n <SkeletonImage\n height={imageHeight}\n animation={animation}\n borderRadius={0}\n tone={tone}\n />\n )}\n\n <div className=\"p-4 flex flex-col gap-4\">\n {showAvatar && (\n <div className=\"flex items-center gap-3\">\n <SkeletonAvatar size={40} animation={animation} tone={tone} />\n <div className=\"flex-1\">\n <Skeleton\n variant=\"text\"\n width=\"60%\"\n height={14}\n animation={animation}\n tone={tone}\n />\n <Skeleton\n variant=\"text\"\n width=\"40%\"\n height={12}\n animation={animation}\n tone={tone}\n className=\"mt-2\"\n />\n </div>\n </div>\n )}\n\n <SkeletonText\n lines={lines}\n animation={animation}\n height={14}\n lineGap={10}\n tone={tone}\n />\n\n {showActions && (\n <div className=\"flex gap-3 mt-2\">\n <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n <SkeletonButton size=\"sm\" animation={animation} tone={tone} />\n </div>\n )}\n </div>\n </div>\n );\n },\n);\n\nSkeletonCard.displayName = \"SkeletonCard\";\n\n// Skeleton Metric Card Component\nconst SkeletonMetricCard = forwardRef<HTMLDivElement, SkeletonMetricCardProps>(\n (\n {\n showTrend = true,\n showChart = true,\n chartBars = 7,\n valueWidth = \"52%\",\n className,\n animation = \"wave\",\n tone = \"accent\",\n },\n ref,\n ) => {\n const chartHeights = [36, 52, 46, 72, 64, 84, 68, 78];\n\n return (\n <div\n ref={ref}\n className={mergeClassNames(\n \"rounded-md border border-ds-border-2 bg-ds-surface-1 p-4 shadow-sm\",\n className,\n )}\n >\n <div className=\"flex items-start justify-between gap-4\">\n <div className=\"min-w-0 flex-1 space-y-3\">\n <Skeleton\n width=\"34%\"\n height={11}\n animation={animation}\n tone=\"subtle\"\n />\n <Skeleton\n width={valueWidth}\n height={28}\n animation={animation}\n tone={tone}\n radius=\"md\"\n />\n <Skeleton\n width=\"44%\"\n height={12}\n animation={animation}\n tone=\"subtle\"\n />\n </div>\n\n {showTrend ? (\n <div className=\"rounded-full border border-ds-border-2 bg-ds-surface-1 px-3 py-2\">\n <Skeleton\n width={54}\n height={12}\n animation={animation}\n tone=\"subtle\"\n />\n </div>\n ) : null}\n </div>\n\n {showChart ? (\n <div className=\"mt-5 flex h-20 items-end gap-2\">\n {Array.from({ length: chartBars }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"rounded\"\n width=\"100%\"\n height={`${chartHeights[index % chartHeights.length]}%`}\n animation={animation}\n tone={tone}\n className=\"flex-1\"\n />\n ))}\n </div>\n ) : null}\n </div>\n );\n },\n);\n\nSkeletonMetricCard.displayName = \"SkeletonMetricCard\";\n\n// Skeleton Table Row Component\nconst SkeletonTableRow = forwardRef<\n HTMLDivElement,\n { columns?: number; animation?: SkeletonAnimation; className?: string }\n>(({ columns = 4, animation = \"pulse\", className = \"\" }, ref) => {\n const sharedWidth =\n columns <= 1 ? \"100%\" : `${Math.floor(72 / (columns - 1))}%`;\n\n return (\n <div ref={ref} className={`flex items-center gap-4 py-3 ${className}`}>\n {Array.from({ length: columns }).map((_, index) => (\n <Skeleton\n key={index}\n variant=\"text\"\n width={index === 0 ? \"28%\" : sharedWidth}\n height={16}\n animation={animation}\n />\n ))}\n </div>\n );\n});\n\nSkeletonTableRow.displayName = \"SkeletonTableRow\";\n\n// Skeleton List Item Component\nconst SkeletonListItem = forwardRef<\n HTMLDivElement,\n {\n showAvatar?: boolean;\n showSecondaryText?: boolean;\n showAction?: boolean;\n animation?: SkeletonAnimation;\n className?: string;\n }\n>(\n (\n {\n showAvatar = true,\n showSecondaryText = true,\n showAction = false,\n animation = \"pulse\",\n className = \"\",\n },\n ref,\n ) => {\n return (\n <div ref={ref} className={`flex items-center gap-3 py-3 ${className}`}>\n {showAvatar && <SkeletonAvatar size={48} animation={animation} />}\n <div className=\"flex-1\">\n <Skeleton\n variant=\"text\"\n width=\"70%\"\n height={16}\n animation={animation}\n />\n {showSecondaryText && (\n <Skeleton\n variant=\"text\"\n width=\"50%\"\n height={14}\n animation={animation}\n className=\"mt-2\"\n />\n )}\n </div>\n {showAction && <SkeletonButton size=\"sm\" animation={animation} />}\n </div>\n );\n },\n);\n\nSkeletonListItem.displayName = \"SkeletonListItem\";\n\nexport default Skeleton;\nexport {\n Skeleton,\n SkeletonText,\n SkeletonAvatar,\n SkeletonButton,\n SkeletonImage,\n SkeletonCard,\n SkeletonMetricCard,\n SkeletonTableRow,\n SkeletonListItem,\n};\n"],"mappings":"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"}

package/dist/chunks/{spinners-DlMcokJa.mjs → spinners-BQtIp2ov.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { g as AudioWaveIcon } from "./icons-JzMKLygv.mjs";
+import { g as AudioWaveIcon } from "./icons-CkVHNbbN.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/spinners/Audio.tsx
 var Audio = ({ className = void 0, ...props }) => /* @__PURE__ */ jsx(AudioWaveIcon, {
@@ -8,4 +8,4 @@ var Audio = ({ className = void 0, ...props }) => /* @__PURE__ */ jsx(AudioWaveI
 //#endregion
 export { Audio as t };
-//# sourceMappingURL=spinners-DlMcokJa.mjs.map
+//# sourceMappingURL=spinners-BQtIp2ov.mjs.map

package/dist/chunks/{spinners-DlMcokJa.mjs.map → spinners-BQtIp2ov.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spinners-~~DlMcokJa~~.mjs","names":[],"sources":["../../src/components/spinners/Audio.tsx"],"sourcesContent":["import { AudioWaveIcon } from \"../icons\";\n\nconst Audio = ({\n className = undefined, // String\n ...props\n}) => (\n <AudioWaveIcon\n className={`svg-loaders-svg${className ? ` ${className}` : \"\"}`}\n {...props}\n />\n);\n\nexport { Audio };\n"],"mappings":";;;AAEA,IAAM,SAAS,EACb,YAAY,KAAA,GACZ,GAAG,YAEH,oBAAC,eAAD;CACE,WAAW,kBAAkB,YAAY,IAAI,cAAc;CAC3D,GAAI;~~CACJ~~,CAAA"}
1	+ {"version":3,"file":"spinners-BQtIp2ov.mjs","names":[],"sources":["../../src/components/spinners/Audio.tsx"],"sourcesContent":["import { AudioWaveIcon } from \"../icons\";\n\nconst Audio = ({\n className = undefined, // String\n ...props\n}) => (\n <AudioWaveIcon\n className={`svg-loaders-svg${className ? ` ${className}` : \"\"}`}\n {...props}\n />\n);\n\nexport { Audio };\n"],"mappings":";;;AAEA,IAAM,SAAS,EACb,YAAY,KAAA,GACZ,GAAG,YAEH,oBAAC,eAAD;CACE,WAAW,kBAAkB,YAAY,IAAI,cAAc;CAC3D,GAAI;AACL,CAAA"}

package/dist/chunks/{spinners-DBAJliAj.cjs → spinners-BiebALzS.cjs} RENAMED Viewed

@@ -1,5 +1,4 @@
-require("./chunk-B_GkZjkl.cjs");
-const require_icons = require("./icons-ub9iu-JG.cjs");
+const require_icons = require("./icons-Ci8yEvvF.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/spinners/Audio.tsx
 var Audio = ({ className = void 0, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.AudioWaveIcon, {
@@ -14,4 +13,4 @@ Object.defineProperty(exports, "Audio", {
 	}
 });
-//# sourceMappingURL=spinners-DBAJliAj.cjs.map
+//# sourceMappingURL=spinners-BiebALzS.cjs.map

package/dist/chunks/{spinners-DBAJliAj.cjs.map → spinners-BiebALzS.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spinners-~~DBAJliAj~~.cjs","names":[],"sources":["../../src/components/spinners/Audio.tsx"],"sourcesContent":["import { AudioWaveIcon } from \"../icons\";\n\nconst Audio = ({\n className = undefined, // String\n ...props\n}) => (\n <AudioWaveIcon\n className={`svg-loaders-svg${className ? ` ${className}` : \"\"}`}\n {...props}\n />\n);\n\nexport { Audio };\n"],"mappings":"~~;;;;~~AAEA,IAAM,SAAS,EACb,YAAY,KAAA,GACZ,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,cAAA,eAAD;CACE,WAAW,kBAAkB,YAAY,IAAI,cAAc;CAC3D,GAAI;~~CACJ~~,CAAA"}
1	+ {"version":3,"file":"spinners-BiebALzS.cjs","names":[],"sources":["../../src/components/spinners/Audio.tsx"],"sourcesContent":["import { AudioWaveIcon } from \"../icons\";\n\nconst Audio = ({\n className = undefined, // String\n ...props\n}) => (\n <AudioWaveIcon\n className={`svg-loaders-svg${className ? ` ${className}` : \"\"}`}\n {...props}\n />\n);\n\nexport { Audio };\n"],"mappings":";;;AAEA,IAAM,SAAS,EACb,YAAY,KAAA,GACZ,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,cAAA,eAAD;CACE,WAAW,kBAAkB,YAAY,IAAI,cAAc;CAC3D,GAAI;AACL,CAAA"}

package/dist/chunks/{splash-cursor-CQ6_HwHV.cjs → splash-cursor-8b7ORB2k.cjs} RENAMED Viewed

@@ -1,5 +1,4 @@
-require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-LRbEQHYs.cjs");
+const require_utils = require("./utils-CoA0q63n.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -276,4 +275,4 @@ Object.defineProperty(exports, "SplashCursor", {
 	}
 });
-//# sourceMappingURL=splash-cursor-CQ6_HwHV.cjs.map
+//# sourceMappingURL=splash-cursor-8b7ORB2k.cjs.map