@geomak/ui 1.3.0 → 1.4.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { colors_default } from './chunk-DNQSZOYD.js';
-export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-DNQSZOYD.js';
+import { colors_default } from './chunk-OSWZRIGC.js';
+export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-OSWZRIGC.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React9, { createContext, useMemo, useState, useEffect, useContext, useRef, useCallback, useId } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
@@ -435,23 +435,49 @@ function Drawer({
     ) }) })
   ] }) });
 }
+var ANIMATION = {
+  top: "data-[state=delayed-open]:animate-tooltip-in-top",
+  bottom: "data-[state=delayed-open]:animate-tooltip-in-bottom",
+  left: "data-[state=delayed-open]:animate-tooltip-in-left",
+  right: "data-[state=delayed-open]:animate-tooltip-in-right"
+};
 function Tooltip({
   children,
   title,
-  placement = "left",
-  delayDuration = 400
+  placement = "top",
+  delayDuration = 300,
+  sideOffset = 8
 }) {
   return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { children: [
-    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "h-max w-max", children }) }),
+    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children }) }),
     /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
       TooltipPrimitive.Content,
       {
         side: placement,
-        sideOffset: 8,
-        className: "pointer-events-none z-[500000000] rounded-lg bg-prussian-blue dark:bg-rich-black-fogra px-2 py-1.5 text-white text-sm w-max max-w-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        sideOffset,
+        className: [
+          // Layout + typography
+          "pointer-events-none z-[500000] max-w-[220px] px-2.5 py-1.5",
+          "text-xs font-medium leading-snug text-white",
+          // Background + border — slightly translucent for depth
+          "bg-foreground/95 rounded-md border border-white/5",
+          // Shadow
+          "shadow-md",
+          // Out animation (always the same — just fade)
+          "data-[state=closed]:animate-tooltip-out",
+          // In animation — direction-aware
+          ANIMATION[placement]
+        ].join(" "),
         children: [
           title,
-          /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "fill-prussian-blue dark:fill-rich-black-fogra" })
+          /* @__PURE__ */ jsx(
+            TooltipPrimitive.Arrow,
+            {
+              width: 10,
+              height: 5,
+              className: "fill-foreground/95"
+            }
+          )
         ]
       }
     ) })
@@ -709,44 +735,74 @@ var TYPE_BG = {
   warning: "bg-status-warning",
   danger: "bg-status-error"
 };
+var VIEWPORT_CLASSES = {
+  "top-right": "fixed top-14 right-0     flex flex-col       items-end",
+  "top-left": "fixed top-14 left-0      flex flex-col       items-start",
+  "top-center": "fixed top-14 left-1/2    flex flex-col       items-center -translate-x-1/2",
+  "bottom-right": "fixed bottom-4 right-0   flex flex-col-reverse items-end",
+  "bottom-left": "fixed bottom-4 left-0    flex flex-col-reverse items-start",
+  "bottom-center": "fixed bottom-4 left-1/2  flex flex-col-reverse items-center -translate-x-1/2"
+};
+function getInitialMotion(pos, reduced) {
+  if (reduced) return { opacity: 0, x: 0, y: 0, scale: 1 };
+  const right = pos.endsWith("right");
+  const left = pos.endsWith("left");
+  const center = pos.endsWith("center");
+  const bottom = pos.startsWith("bottom");
+  return {
+    opacity: 0,
+    x: right ? 40 : left ? -40 : 0,
+    y: center ? bottom ? 12 : -12 : 0,
+    scale: center ? 0.96 : 1
+  };
+}
 function TypeIcon({ type }) {
   if (type === "success") {
-    return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 28 28", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-      "path",
-      {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M14 0.25C6.40625 0.25 0.25 6.40625 0.25 14C0.25 21.5937 6.40625 27.75 14 27.75C21.5937 27.75 27.75 21.5937 27.75 14C27.75 6.40625 21.5937 0.25 14 0.25ZM19.96 11.675C20.0697 11.5496 20.1533 11.4034 20.2057 11.2452C20.2582 11.087 20.2784 10.9199 20.2653 10.7537C20.2522 10.5876 20.206 10.4257 20.1295 10.2777C20.0529 10.1296 19.9475 9.99838 19.8194 9.89168C19.6914 9.78497 19.5433 9.70495 19.3839 9.65633C19.2244 9.6077 19.0569 9.59145 18.8911 9.60853C18.7253 9.62562 18.5646 9.67568 18.4184 9.75579C18.2723 9.8359 18.1436 9.94443 18.04 10.075L12.665 16.5237L9.88375 13.7412C9.648 13.5136 9.33224 13.3876 9.0045 13.3904C8.67675 13.3933 8.36324 13.5247 8.13148 13.7565C7.89972 13.9882 7.76825 14.3018 7.76541 14.6295C7.76256 14.9572 7.88855 15.273 8.11625 15.5087L11.8662 19.2587C11.9891 19.3815 12.1361 19.4773 12.298 19.5401C12.4599 19.6028 12.6331 19.6312 12.8066 19.6233C12.98 19.6154 13.15 19.5715 13.3055 19.4943C13.4611 19.4171 13.5988 19.3084 13.71 19.175L19.96 11.675Z",
-        fill: "#fff"
-      }
-    ) });
+    return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
   }
   if (type === "info") {
-    return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#fff", className: "w-5 h-5", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z", clipRule: "evenodd" }) });
+    return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+    ] });
   }
   if (type === "warning") {
-    return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#fff", className: "w-5 h-5", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z", clipRule: "evenodd" }) });
+    return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+    ] });
   }
-  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#fff", className: "w-5 h-5", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z", clipRule: "evenodd" }) });
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  ] });
 }
 function NotificationItem({
   n,
+  pos,
   onClose,
   reduced
 }) {
+  const initial = getInitialMotion(pos, reduced);
+  const center = pos.endsWith("center");
   return /* @__PURE__ */ jsx(
     motion.div,
     {
       layout: true,
-      initial: { opacity: 0, x: reduced ? 0 : 56, scale: reduced ? 0.97 : 1 },
-      animate: { opacity: 1, x: 0, scale: 1 },
-      exit: { opacity: 0, x: reduced ? 0 : 40, scale: reduced ? 0.97 : 1 },
+      initial,
+      animate: { opacity: 1, x: 0, y: 0, scale: 1 },
+      exit: { ...initial, opacity: 0 },
       transition: reduced ? { duration: 0 } : {
-        opacity: { duration: 0.15 },
+        opacity: { duration: 0.14 },
         x: { type: "tween", duration: 0.22, ease: [0.16, 1, 0.3, 1] },
-        layout: { duration: 0.2 }
+        y: { type: "tween", duration: 0.22, ease: [0.16, 1, 0.3, 1] },
+        scale: { type: "tween", duration: 0.22, ease: [0.16, 1, 0.3, 1] },
+        layout: { duration: 0.18 }
       },
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         Toast.Root,
         {
           open: true,
@@ -755,32 +811,36 @@ function NotificationItem({
             if (!o) onClose(n.id);
           },
           className: [
-            "rounded-xl shadow-md p-3 w-[300px] text-white",
-            "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/60",
+            "w-[300px] rounded-md shadow-lg overflow-hidden",
+            center ? "mx-auto" : "",
+            "focus:outline-none",
             TYPE_BG[n.type ?? "info"]
           ].join(" "),
-          children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-              /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(TypeIcon, { type: n.type ?? "info" }) }),
-              /* @__PURE__ */ jsx(Toast.Title, { className: "font-semibold text-sm leading-snug flex-1", children: n.title }),
-              /* @__PURE__ */ jsx(Toast.Action, { asChild: true, altText: "Close", children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "aria-label": "Close notification",
-                  onClick: () => onClose(n.id),
-                  className: "flex-shrink-0 rounded-md p-1 hover:bg-white/20 transition-colors duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-white/60",
-                  children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "#fff", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-                }
-              ) })
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-3 pr-2.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex-shrink-0 text-white/90", children: /* @__PURE__ */ jsx(TypeIcon, { type: n.type ?? "info" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx(Toast.Title, { className: "text-sm font-semibold text-white leading-snug", children: n.title }),
+              n.description && /* @__PURE__ */ jsx(Toast.Description, { className: "mt-0.5 text-xs text-white/75 leading-relaxed", children: n.description })
             ] }),
-            n.description && /* @__PURE__ */ jsx(Toast.Description, { className: "mt-1.5 text-xs text-white/80 leading-relaxed pl-7", children: n.description })
-          ]
+            /* @__PURE__ */ jsx(Toast.Action, { asChild: true, altText: "Close", children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": "Close",
+                onClick: () => onClose(n.id),
+                className: "flex-shrink-0 mt-0.5 rounded p-1 text-white/60 hover:text-white hover:bg-white/15 transition-colors duration-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-white/50",
+                children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+              }
+            ) })
+          ] })
         }
       )
     }
   );
 }
-function NotificationProvider({ children }) {
+function NotificationProvider({
+  children,
+  position = "top-right"
+}) {
   const [notifications, setNotifications] = useState([]);
   const reduced = useReducedMotion();
   const open = (payload) => {
@@ -792,17 +852,21 @@ function NotificationProvider({ children }) {
   const close = (id) => {
     setNotifications((prev) => prev.filter((n) => n.id !== id));
   };
-  return /* @__PURE__ */ jsx(NotificationContext.Provider, { value: { open, close }, children: /* @__PURE__ */ jsxs(Toast.Provider, { swipeDirection: "right", children: [
+  return /* @__PURE__ */ jsx(NotificationContext.Provider, { value: { open, close }, children: /* @__PURE__ */ jsxs(Toast.Provider, { swipeDirection: position.endsWith("right") ? "right" : position.endsWith("left") ? "left" : "up", children: [
     children,
     /* @__PURE__ */ jsx(
       Toast.Viewport,
       {
         asChild: true,
-        className: "fixed top-[56px] right-0 z-[500000] flex flex-col gap-2 w-[350px] p-4 outline-none",
+        className: [
+          VIEWPORT_CLASSES[position],
+          "z-[500000] gap-2 w-[332px] p-4 outline-none"
+        ].join(" "),
         children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: notifications.map((n) => /* @__PURE__ */ jsx(
           NotificationItem,
           {
             n,
+            pos: position,
             onClose: close,
             reduced
           },
@@ -1858,6 +1922,248 @@ function TopBar({
     }
   );
 }
+function NavItem({
+  item,
+  isExpanded
+}) {
+  const btn = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: item.onClick,
+      className: [
+        "group relative flex w-full items-center gap-2.5 rounded-md",
+        "px-2.5 py-2 transition-colors duration-100",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset",
+        item.isActive ? "bg-accent/10 text-accent" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "relative flex h-5 w-5 flex-shrink-0 items-center justify-center", children: [
+          item.icon,
+          item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ jsx("span", { className: "absolute -right-1 -top-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-status-error text-[9px] font-bold text-white leading-none", children: item.badge > 99 ? "99+" : item.badge })
+        ] }),
+        isExpanded && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            initial: false,
+            animate: { opacity: 1 },
+            className: "truncate text-sm font-medium",
+            children: item.label
+          }
+        ),
+        item.isActive && /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-0 w-[3px] rounded-r-full bg-accent" })
+      ]
+    }
+  );
+  if (isExpanded) return btn;
+  return /* @__PURE__ */ jsx(Tooltip, { title: item.label, placement: "right", delayDuration: 200, children: btn });
+}
+function Sidebar({
+  sections,
+  isExpanded,
+  onToggle,
+  expandedWidth = 220,
+  collapsedWidth = 52,
+  footer
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(
+    motion.aside,
+    {
+      initial: false,
+      animate: { width: isExpanded ? expandedWidth : collapsedWidth },
+      transition: { type: "tween", duration: 0.22, ease: [0.16, 1, 0.3, 1] },
+      className: "relative flex h-full flex-col border-r border-border bg-surface overflow-hidden flex-shrink-0",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: [
+          "flex h-14 flex-shrink-0 items-center border-b border-border",
+          isExpanded ? "justify-between px-3" : "justify-center px-1.5"
+        ].join(" "), children: [
+          isExpanded && /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              transition: { delay: 0.08 },
+              className: "text-xs font-semibold uppercase tracking-widest text-foreground-muted select-none",
+              children: "Menu"
+            }
+          ),
+          /* @__PURE__ */ jsx(Tooltip, { title: isExpanded ? "Collapse menu" : "Expand menu", placement: "right", delayDuration: 500, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onToggle,
+              "aria-label": isExpanded ? "Collapse sidebar" : "Expand sidebar",
+              className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md text-foreground-muted hover:bg-surface-raised hover:text-foreground transition-colors duration-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+              children: /* @__PURE__ */ jsx(
+                motion.svg,
+                {
+                  viewBox: "0 0 20 20",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.8",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "h-4 w-4",
+                  animate: { rotate: isExpanded ? 0 : 180 },
+                  transition: { type: "tween", duration: 0.22 },
+                  children: /* @__PURE__ */ jsx("path", { d: "M13 5l-5 5 5 5" })
+                }
+              )
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-y-auto overflow-x-hidden py-2 px-1.5 space-y-0.5", children: sections.map((section, si) => /* @__PURE__ */ jsxs("div", { className: si > 0 ? "pt-3" : "", children: [
+          section.title && isExpanded && /* @__PURE__ */ jsx(
+            motion.p,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              transition: { delay: 0.06 },
+              className: "px-2.5 pb-1 text-[10px] font-semibold uppercase tracking-widest text-foreground-muted select-none",
+              children: section.title
+            }
+          ),
+          section.items.map((item) => /* @__PURE__ */ jsx(NavItem, { item, isExpanded }, item.key))
+        ] }, section.key)) }),
+        footer && /* @__PURE__ */ jsx("div", { className: [
+          "flex flex-shrink-0 items-center border-t border-border py-2",
+          isExpanded ? "px-3 gap-2" : "justify-center px-1.5"
+        ].join(" "), children: footer })
+      ]
+    }
+  ) });
+}
+function AppShell({
+  topBar,
+  sidebarSections = [],
+  sidebarExpandedWidth = 220,
+  sidebarCollapsedWidth = 52,
+  sidebarDefaultExpanded = false,
+  sidebarFooter,
+  children,
+  className = ""
+}) {
+  const [expanded, setExpanded] = useState(sidebarDefaultExpanded);
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col h-screen bg-background ${className}`, children: [
+    topBar && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 z-[200]", children: topBar }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
+      sidebarSections.length > 0 && /* @__PURE__ */ jsx(
+        Sidebar,
+        {
+          sections: sidebarSections,
+          isExpanded: expanded,
+          onToggle: () => setExpanded((e) => !e),
+          expandedWidth: sidebarExpandedWidth,
+          collapsedWidth: sidebarCollapsedWidth,
+          footer: sidebarFooter
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        motion.main,
+        {
+          className: "flex-1 overflow-y-auto overflow-x-hidden",
+          animate: { marginLeft: 0 },
+          transition: { type: "tween", duration: 0.22, ease: [0.16, 1, 0.3, 1] },
+          children: /* @__PURE__ */ jsx("div", { className: "h-full p-6", children })
+        }
+      )
+    ] })
+  ] });
+}
+var SHIMMER = [
+  "animate-shimmer rounded-sm",
+  "bg-[length:400%_100%]",
+  "bg-gradient-to-r",
+  "from-border via-border-strong/40 to-border"
+].join(" ");
+function SkeletonBox({ width, height = 16, radius, className = "", style }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `block ${SHIMMER} ${className}`,
+      style: {
+        width: width ?? "100%",
+        height,
+        borderRadius: radius ?? "var(--radius-md)",
+        ...style
+      }
+    }
+  );
+}
+function SkeletonText({
+  lines = 3,
+  lastLineWidth = 60,
+  lineHeight = 14,
+  gap = 8,
+  className = "",
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `flex flex-col ${className}`,
+      style: { gap, ...style },
+      children: Array.from({ length: lines }).map((_, i) => {
+        const isLast = i === lines - 1;
+        const width = isLast && lines > 1 ? `${lastLineWidth}%` : "100%";
+        return /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `block ${SHIMMER}`,
+            style: { height: lineHeight, width, borderRadius: "var(--radius-sm)" }
+          },
+          i
+        );
+      })
+    }
+  );
+}
+function SkeletonCircle({ size = 40, className = "", style }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `block flex-shrink-0 ${SHIMMER} ${className}`,
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        ...style
+      }
+    }
+  );
+}
+function SkeletonCard({ hasAvatar = true, lines = 3, className = "", style }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `rounded-lg border border-border bg-surface p-4 ${className}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+          hasAvatar && /* @__PURE__ */ jsx(SkeletonCircle, { size: 36 }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsx(SkeletonBox, { height: 12, width: "55%" }),
+            /* @__PURE__ */ jsx(SkeletonBox, { height: 10, width: "35%" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(SkeletonText, { lines, lastLineWidth: 55 }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
+          /* @__PURE__ */ jsx(SkeletonBox, { height: 28, width: 72 }),
+          /* @__PURE__ */ jsx(SkeletonBox, { height: 28, width: 56 })
+        ] })
+      ]
+    }
+  );
+}
 function TextInput({
   value,
   onChange,
@@ -2081,56 +2387,82 @@ function Password({
   ] });
 }
 function Checkbox({
-  layout = "vertical",
-  labelPosition = "left",
+  checked,
+  value,
+  // legacy alias
+  onChange,
   label,
   name,
   htmlFor,
   errorMessage,
-  value = false,
-  onChange
+  disabled = false
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "p-2", children: [
+  const isChecked = checked ?? value ?? false;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
     /* @__PURE__ */ jsxs(
-      "div",
+      "label",
       {
-        className: `flex ${layout === "vertical" ? "flex-col" : labelPosition === "left" ? "flex-row" : "flex-row-reverse"} gap-2`,
+        htmlFor,
+        className: [
+          "inline-flex items-center gap-2.5",
+          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+        ].join(" "),
         children: [
-          /* @__PURE__ */ jsx(
-            "label",
-            {
-              htmlFor,
-              className: "font-bold text-md text-prussian-blue dark:text-white cursor-pointer",
-              children: label
-            }
-          ),
           /* @__PURE__ */ jsx(
             CheckboxPrimitive.Root,
             {
               id: htmlFor,
               name,
-              checked: value,
-              onCheckedChange: (checked) => onChange?.({
-                target: { value: !!checked, id: htmlFor, name }
-              }),
-              className: "border-2 border-prussian-blue dark:border-independence rounded-md w-6 h-6 flex items-center justify-center cursor-pointer transition-colors duration-150 data-[state=checked]:bg-prussian-blue dark:data-[state=checked]:bg-independence focus:outline-none focus-visible:ring-2 focus-visible:ring-usafa-blue",
+              checked: isChecked,
+              disabled,
+              onCheckedChange: (c) => onChange?.({ target: { checked: !!c, id: htmlFor, name } }),
+              className: [
+                // Box
+                "relative flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center",
+                "rounded-sm border transition-colors duration-150",
+                // Unchecked
+                "border-border-strong bg-surface",
+                // Checked
+                "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
+                // Focus
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1",
+                // Disabled
+                "disabled:cursor-not-allowed"
+              ].join(" "),
               "aria-label": typeof label === "string" ? label : void 0,
-              children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "transition-transform duration-150 scale-100", children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
-                "path",
+              children: /* @__PURE__ */ jsx(
+                CheckboxPrimitive.Indicator,
                 {
-                  d: "M4 10l4.5 4.5L16 6",
-                  stroke: "#fff",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
+                  className: "flex items-center justify-center data-[state=checked]:animate-check-pop",
+                  children: /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      width: "11",
+                      height: "9",
+                      viewBox: "0 0 11 9",
+                      fill: "none",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M1 4.5L4 7.5L10 1",
+                          stroke: "white",
+                          strokeWidth: "1.8",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      )
+                    }
+                  )
                 }
-              ) }) })
+              )
             }
-          )
+          ),
+          label && /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-secondary select-none leading-snug", children: label })
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "text-error text-center", children: errorMessage })
+    errorMessage && /* @__PURE__ */ jsx("span", { className: "text-xs text-status-error pl-[26px]", children: errorMessage })
   ] });
 }
 function Switch({
@@ -2733,6 +3065,6 @@ Temporal.DatePicker = DatePickerBase;
 Temporal.TemporalPicker = TemporalPickerBase;
 var DatePicker_default = Temporal;
 
-export { AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, DropdownPill, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MenuBar, MenuBarItem, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, ScalableContainer, SearchInput_default as SearchInput, Switch, Table, Tabs, DatePicker_default as Temporal, TextInput, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Wizard, useNotification };
+export { AppShell, AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, DropdownPill, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MenuBar, MenuBarItem, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker_default as Temporal, TextInput, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Wizard, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map