@flamingo-stack/openframe-frontend-core 0.0.296 → 0.0.297

package/dist/{chunk-EL6QLAWX.js → chunk-JALO4TAZ.js}

@@ -7,6 +7,9 @@ import {
   cn,
   init_cn
 } from "./chunk-XTCBRQN2.js";
+import {
+  CheckboxCheckmarkIcon
+} from "./chunk-6U3IUD57.js";
 import {
   __esm
 } from "./chunk-GGWZFCYS.js";
@@ -35,8 +38,8 @@ var init_button_styles = __esm({
 // src/components/ui/button/button.tsx
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React3 from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var buttonVariants, splitShellVariants, splitSlotVariants, Spinner, Button;
 var init_button = __esm({
   "src/components/ui/button/button.tsx"() {
@@ -149,9 +152,9 @@ var init_button = __esm({
         defaultVariants: { slot: "main", size: "default", variant: "accent" }
       }
     );
-    Spinner = () => /* @__PURE__ */ jsxs("svg", { className: "animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-      /* @__PURE__ */ jsx(
+    Spinner = () => /* @__PURE__ */ jsxs3("svg", { className: "animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx3("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+      /* @__PURE__ */ jsx3(
         "path",
         {
           className: "opacity-75",
@@ -160,7 +163,7 @@ var init_button = __esm({
         }
       )
     ] });
-    Button = React.forwardRef(function Button2({
+    Button = React3.forwardRef(function Button2({
       className,
       variant,
       size,
@@ -191,16 +194,16 @@ var init_button = __esm({
         );
         const mainSlotClass = splitSlotVariants({ slot: "main", size: safeSize, variant: safeVariant });
         const iconSlotClass = splitSlotVariants({ slot: "icon", size: safeSize, variant: safeVariant });
-        const splitContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("span", { className: cn("contents", loading && "invisible"), children: [
-            /* @__PURE__ */ jsxs("span", { className: mainSlotClass, children: [
-              leftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: leftIcon }),
+        const splitContent = /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsxs3("span", { className: cn("contents", loading && "invisible"), children: [
+            /* @__PURE__ */ jsxs3("span", { className: mainSlotClass, children: [
+              leftIcon && /* @__PURE__ */ jsx3("span", { className: "inline-flex items-center", children: leftIcon }),
               children,
-              rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: rightIcon })
+              rightIcon && /* @__PURE__ */ jsx3("span", { className: "inline-flex items-center", children: rightIcon })
             ] }),
-            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: iconSlotClass, children: splitIcon })
+            /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", className: iconSlotClass, children: splitIcon })
           ] }),
-          loading && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 inline-flex items-center justify-center text-ods-text-primary", children: /* @__PURE__ */ jsx(Spinner, {}) })
+          loading && /* @__PURE__ */ jsx3("span", { className: "absolute inset-0 inline-flex items-center justify-center text-ods-text-primary", children: /* @__PURE__ */ jsx3(Spinner, {}) })
         ] });
         const splitAnchor = linkProps ?? (href ? {
           href,
@@ -209,7 +212,7 @@ var init_button = __esm({
           onClick
         } : null);
         if (splitAnchor) {
-          return /* @__PURE__ */ jsx(
+          return /* @__PURE__ */ jsx3(
             next_link_default,
             {
               href: splitAnchor.href,
@@ -225,7 +228,7 @@ var init_button = __esm({
             }
           );
         }
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx3(
           "button",
           {
             ref,
@@ -239,15 +242,15 @@ var init_button = __esm({
       }
       const classes = cn(buttonVariants({ variant, size, fullWidth, noPaddingX }), className);
       if (asChild) {
-        return /* @__PURE__ */ jsx(Slot, { ref, className: classes, ...props, children });
+        return /* @__PURE__ */ jsx3(Slot, { ref, className: classes, ...props, children });
       }
-      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs("span", { className: cn("contents", loading && "invisible"), children: [
-          leftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: leftIcon }),
+      const content = /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsxs3("span", { className: cn("contents", loading && "invisible"), children: [
+          leftIcon && /* @__PURE__ */ jsx3("span", { className: "inline-flex items-center", children: leftIcon }),
           children,
-          rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: rightIcon })
+          rightIcon && /* @__PURE__ */ jsx3("span", { className: "inline-flex items-center", children: rightIcon })
         ] }),
-        loading && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 inline-flex items-center justify-center text-ods-text-primary", children: /* @__PURE__ */ jsx(Spinner, {}) })
+        loading && /* @__PURE__ */ jsx3("span", { className: "absolute inset-0 inline-flex items-center justify-center text-ods-text-primary", children: /* @__PURE__ */ jsx3(Spinner, {}) })
       ] });
       const anchor = linkProps ?? (href ? {
         href,
@@ -256,7 +259,7 @@ var init_button = __esm({
         onClick
       } : null);
       if (anchor) {
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx3(
           next_link_default,
           {
             href: anchor.href,
@@ -272,7 +275,7 @@ var init_button = __esm({
           }
         );
       }
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx3(
         "button",
         {
           ref,
@@ -289,12 +292,12 @@ var init_button = __esm({
 
 // src/components/ui/button/split-button.tsx
 import { cva as cva2 } from "class-variance-authority";
-import React2 from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import React4 from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function Half({ variant, size, side, href, openInNewTab, prefetch, onClick, disabled, grow, type = "button", ariaLabel, children }) {
   const classes = cn(splitHalfVariants({ variant, size, side }), grow && "flex-1");
   if (href) {
-    return /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx4(
       next_link_default,
       {
         href,
@@ -310,7 +313,7 @@ function Half({ variant, size, side, href, openInNewTab, prefetch, onClick, disa
       }
     );
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     "button",
     {
       type,
@@ -376,7 +379,7 @@ var init_split_button = __esm({
       ],
       defaultVariants: { variant: "accent", size: "default", side: "main" }
     });
-    SplitButton = React2.forwardRef(function SplitButton2({
+    SplitButton = React4.forwardRef(function SplitButton2({
       variant = "accent",
       size = "default",
       fullWidth = false,
@@ -395,7 +398,7 @@ var init_split_button = __esm({
       "aria-label": ariaLabel,
       groupAriaLabel
     }, ref) {
-      return /* @__PURE__ */ jsxs2(
+      return /* @__PURE__ */ jsxs4(
         "div",
         {
           ref,
@@ -403,7 +406,7 @@ var init_split_button = __esm({
           "aria-label": groupAriaLabel,
           className: cn("inline-flex items-stretch", fullWidth && "w-full", className),
           children: [
-            /* @__PURE__ */ jsxs2(
+            /* @__PURE__ */ jsxs4(
               Half,
               {
                 variant,
@@ -418,13 +421,13 @@ var init_split_button = __esm({
                 type,
                 ariaLabel,
                 children: [
-                  leftIcon && /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center", children: leftIcon }),
-                  /* @__PURE__ */ jsx2("span", { children }),
-                  rightIcon && /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center", children: rightIcon })
+                  leftIcon && /* @__PURE__ */ jsx4("span", { className: "inline-flex items-center", children: leftIcon }),
+                  /* @__PURE__ */ jsx4("span", { children }),
+                  rightIcon && /* @__PURE__ */ jsx4("span", { className: "inline-flex items-center", children: rightIcon })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx4(
               Half,
               {
                 variant,
@@ -436,7 +439,7 @@ var init_split_button = __esm({
                 onClick: iconAction.onClick,
                 disabled: disabled || iconAction.disabled,
                 ariaLabel: iconAction["aria-label"],
-                children: /* @__PURE__ */ jsx2("span", { className: "inline-flex items-center", children: iconAction.icon })
+                children: /* @__PURE__ */ jsx4("span", { className: "inline-flex items-center", children: iconAction.icon })
               }
             )
           ]
@@ -455,30 +458,173 @@ var init_button2 = __esm({
   }
 });
 
+// src/components/ui/field-wrapper.tsx
+init_cn();
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var errorVariantClasses = {
+  error: "text-ods-error",
+  warning: "text-[var(--ods-attention-yellow-warning)]"
+};
+var FieldWrapper = React.forwardRef(
+  ({ label, error, errorVariant = "error", className, children }, ref) => {
+    const hasChrome = label != null || error != null;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(hasChrome ? "relative flex w-full flex-col" : "contents", className), children: [
+      label && /* @__PURE__ */ jsx("label", { className: "text-h4 text-ods-text-primary mb-1", children: label }),
+      children,
+      error && /* @__PURE__ */ jsx("p", { className: cn("absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate", errorVariantClasses[errorVariant]), title: error, children: error })
+    ] });
+  }
+);
+FieldWrapper.displayName = "FieldWrapper";
+
+// src/components/ui/input.tsx
+init_cn();
+import * as React2 from "react";
+import { Loader2 } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var invalidBorderClasses = {
+  error: "border-ods-error hover:border-ods-error has-[:focus]:border-ods-error",
+  warning: "!border-[var(--ods-attention-yellow-warning)] hover:!border-[var(--ods-attention-yellow-warning)] has-[:focus]:!border-[var(--ods-attention-yellow-warning)]"
+};
+var Input = React2.forwardRef(
+  ({ className, type, invalid = false, startAdornment, endAdornment, label, error, errorVariant = "error", loading = false, ...props }, ref) => {
+    const isInvalid = invalid || !!error;
+    if (type === "range") {
+      const rangeInput = /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "range",
+          className: cn(
+            "w-full cursor-pointer appearance-none rounded-full bg-white/30 h-1",
+            // Webkit (Chrome/Safari) thumb
+            "[&::-webkit-slider-thumb]:appearance-none",
+            "[&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3",
+            "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white",
+            "[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:shadow-sm",
+            // Firefox thumb
+            "[&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3",
+            "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white",
+            "[&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer",
+            // Firefox track
+            "[&::-moz-range-track]:bg-transparent",
+            // Disabled
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          ref,
+          ...props
+        }
+      );
+      return label ? /* @__PURE__ */ jsx2(FieldWrapper, { label, error, errorVariant, children: rangeInput }) : rangeInput;
+    }
+    const content = /* @__PURE__ */ jsxs2(
+      "label",
+      {
+        "data-invalid": isInvalid || void 0,
+        className: cn(
+          // Layout & spacing
+          "flex w-full items-center gap-2 rounded-[6px] border px-3 h-11 md:h-12 cursor-text",
+          // Focus-within states
+          "has-[:focus-visible]:outline-none",
+          "group",
+          // Animations & touch UX
+          "transition-colors duration-200",
+          // Theme palette
+          "bg-ods-card border-ods-border has-[:focus]:border-ods-accent",
+          // Hover & active (not disabled)
+          !props.disabled && "hover:bg-ods-bg-hover hover:border-ods-border-hover active:bg-ods-bg-active active:border-ods-border-active",
+          // Disabled
+          props.disabled && "!cursor-not-allowed bg-ods-bg",
+          // Invalid
+          isInvalid && invalidBorderClasses[errorVariant],
+          className
+        ),
+        children: [
+          startAdornment && /* @__PURE__ */ jsx2("span", { className: "text-h6 flex-shrink-0 text-ods-text-secondary transition-colors duration-200 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: startAdornment }),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type,
+              className: cn(
+                // Layout
+                "flex-1 min-w-0 bg-transparent border-none outline-none",
+                // Typography
+                "text-h4",
+                // Colors
+                "text-ods-text-primary placeholder:text-ods-text-secondary",
+                // File input adjustments
+                "file:border-0 file:bg-transparent",
+                // Disabled
+                "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border",
+                // Touch
+                "touch-manipulation",
+                // Autofill override
+                "[&:-webkit-autofill]:[-webkit-box-shadow:0_0_0_9999px_transparent_inset] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-text-primary)] [&:-webkit-autofill]:[caret-color:var(--color-text-primary)] [&:-webkit-autofill]:[transition:background-color_9999s_ease-in-out_0s]"
+              ),
+              ref,
+              ...props
+            }
+          ),
+          loading && /* @__PURE__ */ jsx2(Loader2, { className: "animate-spin flex-shrink-0 text-ods-text-secondary size-4 md:size-6" }),
+          !loading && endAdornment && /* @__PURE__ */ jsx2("span", { className: "text-h6 flex-shrink-0 text-ods-text-secondary transition-colors duration-200 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: endAdornment })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsx2(FieldWrapper, { label, error, errorVariant, children: content });
+  }
+);
+Input.displayName = "Input";
+
+// src/components/ui/checkbox.tsx
+init_cn();
+import * as React5 from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Checkbox = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-ods-border bg-ods-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-ods-accent data-[state=checked]:border-ods-accent",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx5(
+      CheckboxPrimitive.Indicator,
+      {
+        className: cn("flex items-center justify-center text-ods-text-on-accent"),
+        children: /* @__PURE__ */ jsx5(CheckboxCheckmarkIcon, { size: 10 })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
 // src/components/ui/dropdown-menu.tsx
 init_cn();
-import * as React4 from "react";
+import * as React7 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check, ChevronRight, Circle } from "lucide-react";
 
 // src/components/ui/portal-container.tsx
-import * as React3 from "react";
-var PortalContainerContext = React3.createContext(
+import * as React6 from "react";
+var PortalContainerContext = React6.createContext(
   null
 );
 function usePortalContainer() {
-  return React3.useContext(PortalContainerContext);
+  return React6.useContext(PortalContainerContext);
 }
 
 // src/components/ui/dropdown-menu.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React4.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
+var DropdownMenuSubTrigger = React7.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs5(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -490,12 +636,12 @@ var DropdownMenuSubTrigger = React4.forwardRef(({ className, inset, children, ..
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx3(ChevronRight, { className: "ml-auto" })
+      /* @__PURE__ */ jsx6(ChevronRight, { className: "ml-auto" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+var DropdownMenuSubContent = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -507,9 +653,9 @@ var DropdownMenuSubContent = React4.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
+var DropdownMenuContent = React7.forwardRef(({ className, sideOffset = 4, ...props }, ref) => {
   const container = usePortalContainer();
-  return /* @__PURE__ */ jsx3(DropdownMenuPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx6(DropdownMenuPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx6(
     DropdownMenuPrimitive.Content,
     {
       ref,
@@ -523,7 +669,7 @@ var DropdownMenuContent = React4.forwardRef(({ className, sideOffset = 4, ...pro
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx3(
+var DropdownMenuItem = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx6(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -536,7 +682,7 @@ var DropdownMenuItem = React4.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React4.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs3(
+var DropdownMenuCheckboxItem = React7.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs5(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -547,13 +693,13 @@ var DropdownMenuCheckboxItem = React4.forwardRef(({ className, children, checked
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx3("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx3(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx3(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx6("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx6(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx6(Check, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
+var DropdownMenuRadioItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -563,13 +709,13 @@ var DropdownMenuRadioItem = React4.forwardRef(({ className, children, ...props }
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx3("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx3(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx3(Circle, { className: "h-2 w-2 fill-ods-accent" }) }) }),
+      /* @__PURE__ */ jsx6("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx6(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx6(Circle, { className: "h-2 w-2 fill-ods-accent" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React4.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx3(
+var DropdownMenuLabel = React7.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx6(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -582,7 +728,7 @@ var DropdownMenuLabel = React4.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+var DropdownMenuSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -595,7 +741,7 @@ var DropdownMenuShortcut = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx6(
     "span",
     {
       className: cn("ml-auto text-xs tracking-widest text-ods-text-secondary opacity-60", className),
@@ -605,13 +751,161 @@ var DropdownMenuShortcut = ({
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
+// src/components/ui/skeleton.tsx
+init_cn();
+import * as React8 from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var Skeleton = React8.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ref,
+        className: cn(
+          "animate-pulse rounded-md bg-ods-border",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+var SkeletonText = React8.forwardRef(
+  ({ lines = 1, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx7("div", { ref, className: cn("space-y-2", className), ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx7(
+      Skeleton,
+      {
+        className: cn(
+          "h-4",
+          i === lines - 1 && lines > 1 && "w-3/4"
+          // Last line shorter for multi-line
+        )
+      },
+      i
+    )) });
+  }
+);
+SkeletonText.displayName = "SkeletonText";
+var SkeletonCard = React8.forwardRef(
+  ({ showImage = false, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-lg border border-ods-border overflow-hidden",
+          className
+        ),
+        ...props,
+        children: [
+          showImage && /* @__PURE__ */ jsx7(Skeleton, { className: "h-48 w-full" }),
+          /* @__PURE__ */ jsxs6("div", { className: "p-6", children: [
+            /* @__PURE__ */ jsx7(Skeleton, { className: "h-6 w-3/4 mb-4" }),
+            /* @__PURE__ */ jsx7(SkeletonText, { lines: 3 })
+          ] })
+        ]
+      }
+    );
+  }
+);
+SkeletonCard.displayName = "SkeletonCard";
+var SkeletonGrid = React8.forwardRef(
+  ({ columns = 3, items = 6, showImages = false, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ref,
+        className: cn(
+          `grid grid-cols-1 gap-6`,
+          columns === 2 && "md:grid-cols-2",
+          columns === 3 && "md:grid-cols-3",
+          columns === 4 && "md:grid-cols-4",
+          className
+        ),
+        ...props,
+        children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx7(SkeletonCard, { showImage: showImages }, i))
+      }
+    );
+  }
+);
+SkeletonGrid.displayName = "SkeletonGrid";
+var SkeletonButton = React8.forwardRef(
+  ({ size = "default", className, ...props }, ref) => {
+    const sizeClasses = {
+      sm: "h-8 w-20",
+      default: "h-10 w-32",
+      lg: "h-12 w-40"
+    };
+    return /* @__PURE__ */ jsx7(
+      Skeleton,
+      {
+        ref,
+        className: cn(
+          "rounded-lg",
+          sizeClasses[size],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SkeletonButton.displayName = "SkeletonButton";
+var SkeletonHeading = React8.forwardRef(
+  ({ level = 1, className, ...props }, ref) => {
+    const heightClasses = {
+      1: "h-12",
+      2: "h-10",
+      3: "h-8",
+      4: "h-7",
+      5: "h-6",
+      6: "h-5"
+    };
+    return /* @__PURE__ */ jsx7(
+      Skeleton,
+      {
+        ref,
+        className: cn(
+          heightClasses[level],
+          "w-3/4",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SkeletonHeading.displayName = "SkeletonHeading";
+var SkeletonList = React8.forwardRef(
+  ({ items = 5, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx7("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx7(Skeleton, { className: "h-10 w-10 rounded-full flex-shrink-0" }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx7(Skeleton, { className: "h-4 w-1/3 mb-1" }),
+        /* @__PURE__ */ jsx7(Skeleton, { className: "h-3 w-1/2" })
+      ] })
+    ] }, i)) });
+  }
+);
+SkeletonList.displayName = "SkeletonList";
+var SkeletonNavigation = React8.forwardRef(
+  ({ items = 6, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx7("div", { ref, className: cn("flex items-center gap-6", className), ...props, children: Array.from({ length: items }).map((_, i) => /* @__PURE__ */ jsx7(Skeleton, { className: "h-5 w-20" }, i)) });
+  }
+);
+SkeletonNavigation.displayName = "SkeletonNavigation";
+
 export {
+  FieldWrapper,
+  Input,
   buttonVariants,
   Button,
   init_button,
   SplitButton,
   init_split_button,
   init_button2,
+  Checkbox,
   PortalContainerContext,
   usePortalContainer,
   DropdownMenu,
@@ -628,6 +922,14 @@ export {
   DropdownMenuRadioItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
-  DropdownMenuShortcut
+  DropdownMenuShortcut,
+  Skeleton,
+  SkeletonText,
+  SkeletonCard,
+  SkeletonGrid,
+  SkeletonButton,
+  SkeletonHeading,
+  SkeletonList,
+  SkeletonNavigation
 };
-//# sourceMappingURL=chunk-EL6QLAWX.js.map
+//# sourceMappingURL=chunk-JALO4TAZ.js.map