@kjaniec-dev/ui 0.8.0 → 0.9.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React18 from 'react';
+import * as React52 from 'react';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
@@ -38,7 +38,7 @@ var buttonVariants = cva(
     defaultVariants: { variant: "primary", size: "md" }
   }
 );
-var Button = React18.forwardRef(
+var Button = React52.forwardRef(
   ({ className, variant, size, loading, leadingIcon, trailingIcon, children, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "button",
@@ -85,7 +85,7 @@ var badgeVariants = cva(
     defaultVariants: { variant: "neutral" }
   }
 );
-var Badge = React18.forwardRef(
+var Badge = React52.forwardRef(
   ({ className, variant, dot, children, ...props }, ref) => /* @__PURE__ */ jsxs("span", { ref, className: cn(badgeVariants({ variant }), className), ...props, children: [
     dot && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current", "aria-hidden": true }),
     children
@@ -112,7 +112,7 @@ var iconColor = {
   warning: "text-warning",
   danger: "text-danger"
 };
-var Alert = React18.forwardRef(
+var Alert = React52.forwardRef(
   ({ className, variant = "info", icon, title, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props, children: [
     icon && /* @__PURE__ */ jsx("span", { className: cn("shrink-0 mt-0.5 [&_svg]:h-[1.15rem] [&_svg]:w-[1.15rem]", iconColor[variant ?? "info"]), children: icon }),
     /* @__PURE__ */ jsxs("div", { className: "text-foreground", children: [
@@ -122,7 +122,7 @@ var Alert = React18.forwardRef(
   ] })
 );
 Alert.displayName = "Alert";
-var Spinner = React18.forwardRef(
+var Spinner = React52.forwardRef(
   ({ className, size = 24, style, ...props }, ref) => /* @__PURE__ */ jsx(
     "span",
     {
@@ -139,7 +139,7 @@ var Spinner = React18.forwardRef(
   )
 );
 Spinner.displayName = "Spinner";
-var Progress = React18.forwardRef(
+var Progress = React52.forwardRef(
   ({ className, value = 0, tone = "primary", barClassName, ...props }, ref) => {
     const pct = Math.max(0, Math.min(100, value));
     return /* @__PURE__ */ jsx(
@@ -169,14 +169,14 @@ var Progress = React18.forwardRef(
   }
 );
 Progress.displayName = "Progress";
-var Label = React18.forwardRef(
+var Label = React52.forwardRef(
   ({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxs("label", { ref, className: cn("text-[0.8rem] font-semibold text-foreground", className), ...props, children: [
     children,
     required && /* @__PURE__ */ jsx("span", { className: "text-danger", children: " *" })
   ] })
 );
 Label.displayName = "Label";
-var Hint = React18.forwardRef(
+var Hint = React52.forwardRef(
   ({ className, error, ...props }, ref) => /* @__PURE__ */ jsx(
     "span",
     {
@@ -187,17 +187,17 @@ var Hint = React18.forwardRef(
   )
 );
 Hint.displayName = "Hint";
-var Field = React18.forwardRef(
+var Field = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5", className), ...props })
 );
 Field.displayName = "Field";
-var FormField = React18.forwardRef(
+var FormField = React52.forwardRef(
   ({ className, label, hint, error, required, children, ...props }, ref) => {
-    const id = React18.useId();
+    const id = React52.useId();
     const hintId = `${id}-hint`;
     const errorId = `${id}-error`;
-    const child = React18.Children.only(children);
-    const clonedChild = React18.cloneElement(child, {
+    const child = React52.Children.only(children);
+    const clonedChild = React52.cloneElement(child, {
       id: child.props.id ?? id,
       "aria-describedby": cn(
         hint && hintId,
@@ -216,9 +216,136 @@ var FormField = React18.forwardRef(
   }
 );
 FormField.displayName = "FormField";
+var sizeDimensions = {
+  sm: 36,
+  md: 64,
+  lg: 96,
+  xl: 128
+};
+var defaultStrokeWidths = {
+  sm: 3.5,
+  md: 6,
+  lg: 8,
+  xl: 10
+};
+var textSizeClasses = {
+  sm: "text-[0.65rem] font-semibold leading-none",
+  md: "text-xs font-semibold leading-none",
+  lg: "text-base font-bold leading-none",
+  xl: "text-xl font-bold leading-none"
+};
+var toneClasses = {
+  primary: "text-primary stroke-current",
+  secondary: "text-secondary stroke-current",
+  success: "text-success stroke-current",
+  warning: "text-warning stroke-current",
+  danger: "text-danger stroke-current",
+  info: "text-info stroke-current"
+};
+var ProgressRing = React52.forwardRef(
+  ({
+    className,
+    style,
+    value = 0,
+    min = 0,
+    max = 100,
+    size = "md",
+    strokeWidth,
+    tone = "primary",
+    showValue = false,
+    formatValue,
+    trackClassName,
+    indicatorClassName,
+    children,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const range2 = max > min ? max - min : 100;
+    const clampedValue = Math.max(min, Math.min(max, value));
+    const percentage = Math.max(0, Math.min(100, (clampedValue - min) / range2 * 100));
+    const dimension = sizeDimensions[size];
+    const strokeWidthVal = strokeWidth ?? defaultStrokeWidths[size];
+    const radius = Math.max(0, (dimension - strokeWidthVal) / 2);
+    const circumference = 2 * Math.PI * radius;
+    const strokeDashoffset = circumference - percentage / 100 * circumference;
+    const computedAriaLabel = ariaLabel ?? (props["aria-labelledby"] ? void 0 : "Progress");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-label": computedAriaLabel,
+        "aria-valuenow": clampedValue,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        className: cn("relative inline-flex items-center justify-center shrink-0", className),
+        style: { width: dimension, height: dimension, ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: dimension,
+              height: dimension,
+              viewBox: `0 0 ${dimension} ${dimension}`,
+              className: "-rotate-90 transform",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: dimension / 2,
+                    cy: dimension / 2,
+                    r: radius,
+                    strokeWidth: strokeWidthVal,
+                    className: cn("stroke-muted/30 fill-none", trackClassName)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: dimension / 2,
+                    cy: dimension / 2,
+                    r: radius,
+                    strokeWidth: strokeWidthVal,
+                    strokeDasharray: circumference,
+                    strokeDashoffset,
+                    strokeLinecap: percentage === 0 ? "butt" : "round",
+                    className: cn(
+                      "fill-none transition-[stroke-dashoffset,opacity] duration-500 ease-in-out",
+                      percentage === 0 && "opacity-0",
+                      toneClasses[tone],
+                      indicatorClassName
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          (children || showValue) && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "absolute inset-0 flex flex-col items-center justify-center text-center text-foreground p-1",
+                textSizeClasses[size]
+              ),
+              children: children ?? (formatValue ? formatValue(clampedValue, Math.round(percentage)) : `${Math.round(percentage)}%`)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ProgressRing.displayName = "ProgressRing";
+var ProgressRingField = React52.forwardRef(
+  ({ label, hint, error, required, fieldClassName, ...ringProps }, ref) => {
+    return /* @__PURE__ */ jsx(FormField, { label, hint, error, required, className: fieldClassName, children: /* @__PURE__ */ jsx(ProgressRing, { ref, "aria-label": ringProps["aria-label"] ?? label, ...ringProps }) });
+  }
+);
+ProgressRingField.displayName = "ProgressRingField";
 var baseField = "w-full font-sans text-sm text-foreground bg-surface border rounded-kj-md px-[0.85rem] transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground focus:outline-none focus:border-ring focus:ring-[3px] focus:ring-ring/30 disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed";
-var Input = React18.forwardRef(
-  ({ className, error, leadingIcon, style, ...props }, ref) => {
+var Input = React52.forwardRef(
+  ({ className, error, leadingIcon, ...props }, ref) => {
     const field = /* @__PURE__ */ jsx(
       "input",
       {
@@ -242,7 +369,7 @@ var Input = React18.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Textarea = React18.forwardRef(
+var Textarea = React52.forwardRef(
   ({ className, error, ...props }, ref) => /* @__PURE__ */ jsx(
     "textarea",
     {
@@ -259,14 +386,14 @@ var Textarea = React18.forwardRef(
   )
 );
 Textarea.displayName = "Textarea";
-var TextField = React18.forwardRef(
+var TextField = React52.forwardRef(
   ({ label, hint, error, required, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(FormField, { label, hint, error, required, className, children: /* @__PURE__ */ jsx(Input, { ref, error: !!error, ...props }) });
   }
 );
 TextField.displayName = "TextField";
 var chevron = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E";
-var Select = React18.forwardRef(
+var Select = React52.forwardRef(
   ({ className, error, style, children, ...props }, ref) => /* @__PURE__ */ jsx(
     "select",
     {
@@ -294,15 +421,15 @@ var Select = React18.forwardRef(
   )
 );
 Select.displayName = "Select";
-var SelectField = React18.forwardRef(
+var SelectField = React52.forwardRef(
   ({ label, hint, error, required, className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(FormField, { label, hint, error, required, className, children: /* @__PURE__ */ jsx(Select, { ref, error: !!error, ...props, children }) });
   }
 );
 SelectField.displayName = "SelectField";
-var Checkbox = React18.forwardRef(
+var Checkbox = React52.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const autoId = React18.useId();
+    const autoId = React52.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
       /* @__PURE__ */ jsx("input", { ref, id: inputId, type: "checkbox", className: "peer sr-only", ...props }),
@@ -312,9 +439,9 @@ var Checkbox = React18.forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
-var Radio = React18.forwardRef(
+var Radio = React52.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const autoId = React18.useId();
+    const autoId = React52.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
       /* @__PURE__ */ jsx("input", { ref, id: inputId, type: "radio", className: "peer sr-only", ...props }),
@@ -324,9 +451,9 @@ var Radio = React18.forwardRef(
   }
 );
 Radio.displayName = "Radio";
-var CheckboxField = React18.forwardRef(
+var CheckboxField = React52.forwardRef(
   ({ label, hint, error, className, ...props }, ref) => {
-    const id = React18.useId();
+    const id = React52.useId();
     const hintId = `${id}-hint`;
     const errorId = `${id}-error`;
     return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1 w-full", className), children: [
@@ -347,9 +474,9 @@ var CheckboxField = React18.forwardRef(
   }
 );
 CheckboxField.displayName = "CheckboxField";
-var Switch = React18.forwardRef(
+var Switch = React52.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const autoId = React18.useId();
+    const autoId = React52.useId();
     const inputId = id ?? autoId;
     return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: cn("inline-flex items-center gap-2.5 cursor-pointer text-sm select-none", className), children: [
       /* @__PURE__ */ jsx("input", { ref, id: inputId, type: "checkbox", role: "switch", className: "peer sr-only", ...props }),
@@ -359,19 +486,47 @@ var Switch = React18.forwardRef(
   }
 );
 Switch.displayName = "Switch";
-var Slider = React18.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "input",
-    {
-      ref,
-      type: "range",
-      className: cn(
-        "kj-slider w-full h-1.5 rounded-full bg-input appearance-none cursor-pointer",
-        className
-      ),
-      ...props
-    }
-  )
+var Slider = React52.forwardRef(
+  ({ className, style, value, defaultValue, min = 0, max = 100, onChange, ...props }, ref) => {
+    const [localValue, setLocalValue] = React52.useState(
+      Number(defaultValue ?? value ?? 50)
+    );
+    const isControlled = value !== void 0;
+    const currentVal = isControlled ? Number(value) : localValue;
+    const numMin = Number(min);
+    const numMax = Number(max);
+    const percentage = Math.min(
+      100,
+      Math.max(0, (currentVal - numMin) / (numMax - numMin) * 100)
+    );
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setLocalValue(Number(e.target.value));
+      }
+      onChange?.(e);
+    };
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "range",
+        value,
+        defaultValue,
+        min,
+        max,
+        onChange: handleChange,
+        style: {
+          background: `linear-gradient(to right, var(--kj-primary) ${percentage}%, var(--kj-border, rgba(120, 120, 128, 0.2)) ${percentage}%)`,
+          ...style
+        },
+        className: cn(
+          "kj-slider w-full h-1.5 rounded-full appearance-none cursor-pointer accent-primary",
+          className
+        ),
+        ...props
+      }
+    );
+  }
 );
 Slider.displayName = "Slider";
 var sliderThumbCSS = `
@@ -412,7 +567,47 @@ function Segmented({
     }
   );
 }
-var Card = React18.forwardRef(
+function ToggleGroup({
+  options,
+  value,
+  onChange,
+  disabled,
+  className,
+  ...props
+}) {
+  const toggle = (optionValue) => {
+    if (disabled) return;
+    const next = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      className: cn("inline-flex gap-0.5 p-[3px] rounded-kj-md bg-muted", className),
+      ...props,
+      children: options.map((opt) => {
+        const active = value.includes(opt.value);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": active,
+            disabled,
+            onClick: () => toggle(opt.value),
+            className: cn(
+              "px-3.5 py-1.5 text-[0.82rem] font-semibold rounded-[calc(var(--kj-radius-md)-3px)] cursor-pointer transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50",
+              active ? "bg-surface text-foreground shadow-kj-xs" : "bg-transparent text-muted-foreground hover:text-foreground"
+            ),
+            children: opt.label
+          },
+          opt.value
+        );
+      })
+    }
+  );
+}
+var Card = React52.forwardRef(
   ({ as: Tag = "div", className, elevated, interactive, ...props }, ref) => /* @__PURE__ */ jsx(
     Tag,
     {
@@ -428,23 +623,23 @@ var Card = React18.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React18.forwardRef(
+var CardHeader = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-[1.35rem] flex flex-col gap-1", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React18.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("m-0 text-base font-bold tracking-[-0.01em]", className), ...props })
+var CardTitle = React52.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: cn("m-0 text-base font-bold tracking-[-0.01em]", className), ...props, children })
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React18.forwardRef(
+var CardDescription = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("m-0 text-[0.85rem] text-muted-foreground", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React18.forwardRef(
+var CardContent = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("px-[1.35rem] pb-[1.35rem]", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React18.forwardRef(
+var CardFooter = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -455,7 +650,7 @@ var CardFooter = React18.forwardRef(
   )
 );
 CardFooter.displayName = "CardFooter";
-var Stat = React18.forwardRef(
+var Stat = React52.forwardRef(
   ({ className, label, value, delta, trend, ...props }, ref) => /* @__PURE__ */ jsxs(Card, { ref, className: cn("p-[1.35rem] flex flex-col gap-2", className), ...props, children: [
     /* @__PURE__ */ jsx("span", { className: "text-[0.78rem] font-semibold uppercase tracking-[0.05em] text-muted-foreground", children: label }),
     /* @__PURE__ */ jsx("span", { className: "text-[2rem] font-bold tracking-[-0.03em] tabular-nums leading-none", children: value }),
@@ -495,7 +690,7 @@ var avatarVariants = cva(
     defaultVariants: { size: "md", tone: "secondary" }
   }
 );
-var Avatar = React18.forwardRef(
+var Avatar = React52.forwardRef(
   ({ className, size, tone, src, alt, status, children, ...props }, ref) => {
     const node = /* @__PURE__ */ jsx("span", { ref, className: cn(avatarVariants({ size, tone }), "overflow-hidden", className), ...props, children: src ? /* @__PURE__ */ jsx("img", { src, alt, className: "h-full w-full object-cover" }) : children });
     if (!status) return node;
@@ -506,21 +701,21 @@ var Avatar = React18.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
-var AvatarGroup = React18.forwardRef(
+var AvatarGroup = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex [&>*:not(:first-child)]:-ml-2.5", className), ...props })
 );
 AvatarGroup.displayName = "AvatarGroup";
-var TabsContext = React18.createContext(null);
+var TabsContext = React52.createContext(null);
 function useTabs() {
-  const ctx = React18.useContext(TabsContext);
+  const ctx = React52.useContext(TabsContext);
   if (!ctx) throw new Error("Tabs.* must be used within <Tabs>");
   return ctx;
 }
 function Tabs({ value, defaultValue, onValueChange, className, children, ...props }) {
-  const [internal, setInternal] = React18.useState(defaultValue ?? "");
-  const uid = React18.useId();
+  const [internal, setInternal] = React52.useState(defaultValue ?? "");
+  const uid = React52.useId();
   const current = value ?? internal;
-  const setValue = React18.useCallback(
+  const setValue = React52.useCallback(
     (v) => {
       if (value === void 0) setInternal(v);
       onValueChange?.(v);
@@ -529,7 +724,7 @@ function Tabs({ value, defaultValue, onValueChange, className, children, ...prop
   );
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value: current, setValue, uid }, children: /* @__PURE__ */ jsx("div", { className, ...props, children }) });
 }
-var TabsList = React18.forwardRef(
+var TabsList = React52.forwardRef(
   ({ className, onKeyDown, ...props }, ref) => {
     const handleKeyDown = (e) => {
       const container = e.currentTarget;
@@ -576,7 +771,7 @@ var TabsList = React18.forwardRef(
   }
 );
 TabsList.displayName = "TabsList";
-var TabsTrigger = React18.forwardRef(
+var TabsTrigger = React52.forwardRef(
   ({ className, value, children, ...props }, ref) => {
     const { value: current, setValue, uid } = useTabs();
     const active = current === value;
@@ -605,7 +800,7 @@ var TabsTrigger = React18.forwardRef(
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React18.forwardRef(
+var TabsContent = React52.forwardRef(
   ({ className, value, ...props }, ref) => {
     const { value: current, uid } = useTabs();
     const active = current === value;
@@ -625,10 +820,10 @@ var TabsContent = React18.forwardRef(
   }
 );
 TabsContent.displayName = "TabsContent";
-var AccordionContext = React18.createContext(null);
+var AccordionContext = React52.createContext(null);
 function Accordion({ type = "single", defaultValue = [], className, children, ...props }) {
-  const [open, setOpen] = React18.useState(defaultValue);
-  const toggle = React18.useCallback(
+  const [open, setOpen] = React52.useState(defaultValue);
+  const toggle = React52.useCallback(
     (v) => {
       setOpen((prev) => {
         const isOpen = prev.includes(v);
@@ -640,15 +835,15 @@ function Accordion({ type = "single", defaultValue = [], className, children, ..
   );
   return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { open, toggle }, children: /* @__PURE__ */ jsx("div", { className: cn("border border-border rounded-kj-lg overflow-hidden", className), ...props, children }) });
 }
-var ItemContext = React18.createContext("");
-var AccordionItem = React18.forwardRef(
+var ItemContext = React52.createContext("");
+var AccordionItem = React52.forwardRef(
   ({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(ItemContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, className: cn("border-t border-border first:border-t-0", className), ...props }) })
 );
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React18.forwardRef(
+var AccordionTrigger = React52.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const ctx = React18.useContext(AccordionContext);
-    const value = React18.useContext(ItemContext);
+    const ctx = React52.useContext(AccordionContext);
+    const value = React52.useContext(ItemContext);
     const isOpen = ctx.open.includes(value);
     return /* @__PURE__ */ jsxs(
       "button",
@@ -685,10 +880,10 @@ var AccordionTrigger = React18.forwardRef(
   }
 );
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React18.forwardRef(
+var AccordionContent = React52.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const ctx = React18.useContext(AccordionContext);
-    const value = React18.useContext(ItemContext);
+    const ctx = React52.useContext(AccordionContext);
+    const value = React52.useContext(ItemContext);
     const isOpen = ctx.open.includes(value);
     return /* @__PURE__ */ jsx(
       "div",
@@ -702,11 +897,11 @@ var AccordionContent = React18.forwardRef(
   }
 );
 AccordionContent.displayName = "AccordionContent";
-var MenuContext = React18.createContext(null);
+var MenuContext = React52.createContext(null);
 function DropdownMenu({ children, className }) {
-  const [open, setOpen] = React18.useState(false);
-  const ref = React18.useRef(null);
-  React18.useEffect(() => {
+  const [open, setOpen] = React52.useState(false);
+  const ref = React52.useRef(null);
+  React52.useEffect(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -721,11 +916,11 @@ function DropdownMenu({ children, className }) {
   }, [open]);
   return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { open, setOpen }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("relative inline-block", className), children }) });
 }
-var DropdownMenuTrigger = React18.forwardRef(({ onClick, asChild, ...props }, ref) => {
-  const ctx = React18.useContext(MenuContext);
+var DropdownMenuTrigger = React52.forwardRef(({ onClick, asChild, ...props }, ref) => {
+  const ctx = React52.useContext(MenuContext);
   if (asChild) {
-    const child = React18.Children.only(props.children);
-    return React18.cloneElement(child, {
+    const child = React52.Children.only(props.children);
+    return React52.cloneElement(child, {
       ref,
       ...props,
       ...child.props,
@@ -755,9 +950,9 @@ var DropdownMenuTrigger = React18.forwardRef(({ onClick, asChild, ...props }, re
 });
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
 function DropdownMenuContent({ className, align = "start", children, ...props }) {
-  const ctx = React18.useContext(MenuContext);
-  const ref = React18.useRef(null);
-  React18.useEffect(() => {
+  const ctx = React52.useContext(MenuContext);
+  const ref = React52.useRef(null);
+  React52.useEffect(() => {
     if (!ctx.open) return;
     const container = ref.current;
     if (container) {
@@ -804,9 +999,9 @@ function DropdownMenuContent({ className, align = "start", children, ...props })
     }
   );
 }
-var DropdownMenuItem = React18.forwardRef(
+var DropdownMenuItem = React52.forwardRef(
   ({ className, danger, icon, children, onClick, ...props }, ref) => {
-    const ctx = React18.useContext(MenuContext);
+    const ctx = React52.useContext(MenuContext);
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -836,11 +1031,11 @@ DropdownMenuItem.displayName = "DropdownMenuItem";
 function DropdownMenuSeparator({ className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("h-px bg-border my-1.5", className), role: "separator" });
 }
-var Breadcrumb = React18.forwardRef(
+var Breadcrumb = React52.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn("flex items-center gap-1.5 text-[0.85rem] text-muted-foreground", className), ...props, children })
 );
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbItem = React18.forwardRef(
+var BreadcrumbItem = React52.forwardRef(
   ({ className, current, children, ...props }, ref) => {
     if (current) {
       return /* @__PURE__ */ jsx("span", { "aria-current": "page", className: cn("text-foreground font-semibold", className), children });
@@ -887,7 +1082,7 @@ function Pagination({ page, pageCount, onPageChange, className }) {
     /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Next", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), children: /* @__PURE__ */ jsx(Chevron, { dir: "right" }) })
   ] });
 }
-var BottomNavigation = React18.forwardRef(
+var BottomNavigation = React52.forwardRef(
   ({ className, items, showLabels = "always", fixed = true, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "nav",
@@ -959,27 +1154,27 @@ var BottomNavigation = React18.forwardRef(
   }
 );
 BottomNavigation.displayName = "BottomNavigation";
-var TableWrap = React18.forwardRef(
+var TableWrap = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("border border-border rounded-kj-lg overflow-x-auto w-full", className), ...props })
 );
 TableWrap.displayName = "TableWrap";
-var Table = React18.forwardRef(
+var Table = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("table", { ref, className: cn("w-full border-collapse text-[0.85rem]", className), ...props })
 );
 Table.displayName = "Table";
-var TableHeader = React18.forwardRef(
+var TableHeader = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className, ...props })
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React18.forwardRef(
+var TableBody = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className, ...props })
 );
 TableBody.displayName = "TableBody";
-var TableRow = React18.forwardRef(
+var TableRow = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("tr", { ref, className: cn("transition-colors hover:bg-muted/50", className), ...props })
 );
 TableRow.displayName = "TableRow";
-var TableHead = React18.forwardRef(
+var TableHead = React52.forwardRef(
   ({ className, numeric, ...props }, ref) => /* @__PURE__ */ jsx(
     "th",
     {
@@ -994,7 +1189,7 @@ var TableHead = React18.forwardRef(
   )
 );
 TableHead.displayName = "TableHead";
-var TableCell = React18.forwardRef(
+var TableCell = React52.forwardRef(
   ({ className, numeric, ...props }, ref) => /* @__PURE__ */ jsx(
     "td",
     {
@@ -1010,30 +1205,33 @@ var TableCell = React18.forwardRef(
 );
 TableCell.displayName = "TableCell";
 function Tooltip({ content, children, className }) {
-  return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex group", className), tabIndex: 0, children: [
-    children,
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        role: "tooltip",
-        className: cn(
-          "pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap",
-          "rounded-kj-sm bg-foreground text-background text-xs font-medium px-2.5 py-1.5 shadow-kj-md",
-          "opacity-0 transition-all duration-150 group-hover:opacity-100 group-hover:translate-y-0 group-focus-visible:opacity-100 group-focus-visible:translate-y-0",
-          "after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-[5px] after:border-transparent after:border-t-foreground"
-        ),
-        children: content
-      }
-    )
-  ] });
+  return (
+    /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+    /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex group", className), tabIndex: 0, children: [
+      children,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          role: "tooltip",
+          className: cn(
+            "pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 translate-y-1 whitespace-nowrap",
+            "rounded-kj-sm bg-foreground text-background text-xs font-medium px-2.5 py-1.5 shadow-kj-md",
+            "opacity-0 transition-all duration-150 group-hover:opacity-100 group-hover:translate-y-0 group-focus-visible:opacity-100 group-focus-visible:translate-y-0",
+            "after:content-[''] after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-[5px] after:border-transparent after:border-t-foreground"
+          ),
+          children: content
+        }
+      )
+    ] })
+  );
 }
-var ModalContext = React18.createContext(null);
+var ModalContext = React52.createContext(null);
 function Modal({ open, onClose, children, width = 440, className, showClose = true }) {
-  const titleId = React18.useId();
-  const descId = React18.useId();
-  const containerRef = React18.useRef(null);
-  const lastActiveElement = React18.useRef(null);
-  React18.useEffect(() => {
+  const titleId = React52.useId();
+  const descId = React52.useId();
+  const containerRef = React52.useRef(null);
+  const lastActiveElement = React52.useRef(null);
+  React52.useEffect(() => {
     if (!open) {
       if (lastActiveElement.current) {
         lastActiveElement.current.focus();
@@ -1134,20 +1332,20 @@ function Modal({ open, onClose, children, width = 440, className, showClose = tr
     }
   );
 }
-function ModalTitle({ className, id, ...props }) {
-  const ctx = React18.useContext(ModalContext);
-  return /* @__PURE__ */ jsx("h3", { id: id ?? ctx?.titleId, className: cn("m-0 mb-2 text-[1.15rem] font-bold tracking-[-0.01em]", className), ...props });
+function ModalTitle({ className, id, children, ...props }) {
+  const ctx = React52.useContext(ModalContext);
+  return /* @__PURE__ */ jsx("h3", { id: id ?? ctx?.titleId, className: cn("m-0 mb-2 text-[1.15rem] font-bold tracking-[-0.01em]", className), ...props, children });
 }
 function ModalDescription({ className, id, ...props }) {
-  const ctx = React18.useContext(ModalContext);
+  const ctx = React52.useContext(ModalContext);
   return /* @__PURE__ */ jsx("p", { id: id ?? ctx?.descId, className: cn("m-0 text-[0.9rem] text-muted-foreground", className), ...props });
 }
 function ModalActions({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex gap-2.5 justify-end mt-6", className), ...props });
 }
-var ToastContext = React18.createContext(null);
+var ToastContext = React52.createContext(null);
 function useToast() {
-  const ctx = React18.useContext(ToastContext);
+  const ctx = React52.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within <ToastProvider>");
   return ctx;
 }
@@ -1168,13 +1366,13 @@ var toneBorder = {
   danger: "border-l-danger"
 };
 function ToastProvider({ children }) {
-  const [items, setItems] = React18.useState([]);
-  const idRef = React18.useRef(0);
-  const remove = React18.useCallback((id) => {
+  const [items, setItems] = React52.useState([]);
+  const idRef = React52.useRef(0);
+  const remove = React52.useCallback((id) => {
     setItems((prev) => prev.map((t) => t.id === id ? { ...t, leaving: true } : t));
     setTimeout(() => setItems((prev) => prev.filter((t) => t.id !== id)), 250);
   }, []);
-  const toast = React18.useCallback(
+  const toast = React52.useCallback(
     ({ message, tone = "default", duration = 3200 }) => {
       const id = ++idRef.current;
       setItems((prev) => [...prev, { id, message, tone, duration }]);
@@ -1204,7 +1402,7 @@ function ToastProvider({ children }) {
     )) })
   ] });
 }
-var PageHeader = React18.forwardRef(
+var PageHeader = React52.forwardRef(
   ({ eyebrow, title, description, actions }, ref) => /* @__PURE__ */ jsx("header", { ref, className: "py-12 md:py-16", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 md:flex-row md:items-end md:justify-between", children: [
     /* @__PURE__ */ jsxs("div", { className: "space-y-3 max-w-2xl", children: [
       eyebrow && /* @__PURE__ */ jsx("p", { className: "font-mono text-xs font-bold uppercase tracking-[0.2em] text-primary", children: eyebrow }),
@@ -1215,7 +1413,111 @@ var PageHeader = React18.forwardRef(
   ] }) })
 );
 PageHeader.displayName = "PageHeader";
-var EmptyState = React18.forwardRef(
+var SectionHeaderKicker = React52.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    if (!children) return null;
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        className: cn(
+          "font-mono text-xs font-bold uppercase tracking-[0.2em] text-primary",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+SectionHeaderKicker.displayName = "SectionHeaderKicker";
+var SectionHeaderTitle = React52.forwardRef(
+  ({ className, as: Component = "h2", children, ...props }, ref) => {
+    if (!children) return null;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: cn("text-2xl font-bold tracking-tight text-foreground sm:text-3xl", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+SectionHeaderTitle.displayName = "SectionHeaderTitle";
+var SectionHeaderDescription = React52.forwardRef(({ className, children, ...props }, ref) => {
+  if (!children) return null;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn("text-base leading-relaxed text-muted-foreground max-w-2xl", className),
+      ...props,
+      children
+    }
+  );
+});
+SectionHeaderDescription.displayName = "SectionHeaderDescription";
+var SectionHeaderActions = React52.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    if (!children) return null;
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-wrap items-center gap-3", className), ...props, children });
+  }
+);
+SectionHeaderActions.displayName = "SectionHeaderActions";
+var SectionHeader = React52.forwardRef(
+  ({
+    kicker,
+    title,
+    description,
+    actions,
+    align = "left",
+    headingLevel = "h2",
+    divider = false,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const isCentered = align === "center";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "space-y-4",
+          isCentered ? "text-center items-center mx-auto max-w-3xl" : "md:flex md:items-end md:justify-between md:space-y-0",
+          divider && "border-b border-border pb-6",
+          className
+        ),
+        ...props,
+        children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "space-y-2",
+                isCentered && "flex flex-col items-center"
+              ),
+              children: [
+                kicker && /* @__PURE__ */ jsx(SectionHeaderKicker, { children: kicker }),
+                title && /* @__PURE__ */ jsx(SectionHeaderTitle, { as: headingLevel, children: title }),
+                description && /* @__PURE__ */ jsx(SectionHeaderDescription, { children: description })
+              ]
+            }
+          ),
+          actions && /* @__PURE__ */ jsx(SectionHeaderActions, { className: cn(isCentered && "justify-center mt-4"), children: actions })
+        ] })
+      }
+    );
+  }
+);
+SectionHeader.displayName = "SectionHeader";
+SectionHeader.Kicker = SectionHeaderKicker;
+SectionHeader.Title = SectionHeaderTitle;
+SectionHeader.Description = SectionHeaderDescription;
+SectionHeader.Actions = SectionHeaderActions;
+var EmptyState = React52.forwardRef(
   ({ className, icon, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1235,7 +1537,7 @@ var EmptyState = React18.forwardRef(
   )
 );
 EmptyState.displayName = "EmptyState";
-var MetricCard = React18.forwardRef(
+var MetricCard = React52.forwardRef(
   ({ className, title, value, trend, trendDirection = "neutral", description, icon, ...props }, ref) => {
     const trendColor = {
       up: "text-success bg-success-surface border-success/20",
@@ -1276,22 +1578,22 @@ function DataTable({
   onSort,
   ...props
 }) {
-  const getRowId = React18.useCallback(
+  const getRowId = React52.useCallback(
     (row, index) => getRowKey ? getRowKey(row, index) : index,
     [getRowKey]
   );
   const isSelectionActive = selectedRows !== void 0 && onSelectionChange !== void 0;
-  const allSelected = React18.useMemo(() => {
+  const allSelected = React52.useMemo(() => {
     if (!isSelectionActive || data.length === 0) return false;
     return data.every((row, idx) => selectedRows.has(getRowId(row, idx)));
   }, [isSelectionActive, data, selectedRows, getRowId]);
-  const someSelected = React18.useMemo(() => {
+  const someSelected = React52.useMemo(() => {
     if (!isSelectionActive || data.length === 0) return false;
     const selectedCount = data.filter((row, idx) => selectedRows.has(getRowId(row, idx))).length;
     return selectedCount > 0 && selectedCount < data.length;
   }, [isSelectionActive, data, selectedRows, getRowId]);
-  const headerCheckboxRef = React18.useRef(null);
-  React18.useEffect(() => {
+  const headerCheckboxRef = React52.useRef(null);
+  React52.useEffect(() => {
     if (headerCheckboxRef.current) {
       headerCheckboxRef.current.indeterminate = someSelected;
     }
@@ -1445,7 +1747,7 @@ function DataTable({
   ] });
 }
 DataTable.displayName = "DataTable";
-var ErrorState = React18.forwardRef(
+var ErrorState = React52.forwardRef(
   ({ className, title = "Wyst\u0105pi\u0142 b\u0142\u0105d", message, onRetry, retryLabel = "Spr\xF3buj ponownie", ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1465,7 +1767,7 @@ var ErrorState = React18.forwardRef(
   )
 );
 ErrorState.displayName = "ErrorState";
-var Skeleton = React18.forwardRef(
+var Skeleton = React52.forwardRef(
   ({ className, variant = "rectangular", width, height, style, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -1487,7 +1789,7 @@ var Skeleton = React18.forwardRef(
   )
 );
 Skeleton.displayName = "Skeleton";
-var DashboardShell = React18.forwardRef(
+var DashboardShell = React52.forwardRef(
   ({
     className,
     sidebar,
@@ -1499,7 +1801,7 @@ var DashboardShell = React18.forwardRef(
     mobileSidebar,
     ...props
   }, ref) => {
-    const [mobileOpen, setMobileOpen] = React18.useState(false);
+    const [mobileOpen, setMobileOpen] = React52.useState(false);
     const contentWidthClass = {
       default: "max-w-7xl w-full mx-auto",
       wide: "max-w-screen-2xl w-full mx-auto",
@@ -1590,7 +1892,7 @@ var DashboardShell = React18.forwardRef(
   }
 );
 DashboardShell.displayName = "DashboardShell";
-var SettingsLayout = React18.forwardRef(
+var SettingsLayout = React52.forwardRef(
   ({ className, sidebar, children, title, description, ...props }, ref) => {
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-6 w-full", className), ...props, children: [
       (title || description) && /* @__PURE__ */ jsxs("div", { className: "border-b border-border pb-4", children: [
@@ -1605,7 +1907,7 @@ var SettingsLayout = React18.forwardRef(
   }
 );
 SettingsLayout.displayName = "SettingsLayout";
-var DetailPageLayout = React18.forwardRef(
+var DetailPageLayout = React52.forwardRef(
   ({ className, title, description, backHref, backLabel = "Back", onBackClick, actions, aside, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-6 w-full", className), ...props, children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
@@ -1651,7 +1953,7 @@ var DetailPageLayout = React18.forwardRef(
   }
 );
 DetailPageLayout.displayName = "DetailPageLayout";
-var TableToolbar = React18.forwardRef(
+var TableToolbar = React52.forwardRef(
   ({ className, searchQuery, onSearchChange, searchPlaceholder = "Search...", actions, filters, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -1720,9 +2022,9 @@ function Drawer({
   width = "max-w-md",
   side = "right"
 }) {
-  const containerRef = React18.useRef(null);
-  const lastActiveElement = React18.useRef(null);
-  React18.useEffect(() => {
+  const containerRef = React52.useRef(null);
+  const lastActiveElement = React52.useRef(null);
+  React52.useEffect(() => {
     if (!open) {
       if (lastActiveElement.current) {
         lastActiveElement.current.focus();
@@ -1841,11 +2143,11 @@ function Drawer({
 }
 Drawer.displayName = "Drawer";
 function CommandPalette({ open, onClose, items, placeholder = "Type a command or search..." }) {
-  const [search, setSearch] = React18.useState("");
-  const [activeIndex, setActiveIndex] = React18.useState(0);
-  const containerRef = React18.useRef(null);
-  const listRef = React18.useRef(null);
-  React18.useEffect(() => {
+  const [search, setSearch] = React52.useState("");
+  const [activeIndex, setActiveIndex] = React52.useState(0);
+  const containerRef = React52.useRef(null);
+  const listRef = React52.useRef(null);
+  React52.useEffect(() => {
     if (open) {
       setSearch("");
       setActiveIndex(0);
@@ -1854,17 +2156,17 @@ function CommandPalette({ open, onClose, items, placeholder = "Type a command or
       document.body.style.overflow = "";
     }
   }, [open]);
-  const filteredItems = React18.useMemo(() => {
+  const filteredItems = React52.useMemo(() => {
     if (!search) return items;
     const cleanSearch = search.toLowerCase();
     return items.filter(
       (item) => item.title.toLowerCase().includes(cleanSearch) || item.subtitle?.toLowerCase().includes(cleanSearch) || item.category?.toLowerCase().includes(cleanSearch)
     );
   }, [search, items]);
-  React18.useEffect(() => {
+  React52.useEffect(() => {
     setActiveIndex(0);
   }, [filteredItems]);
-  React18.useEffect(() => {
+  React52.useEffect(() => {
     if (!open) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -1888,7 +2190,7 @@ function CommandPalette({ open, onClose, items, placeholder = "Type a command or
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, filteredItems, activeIndex, onClose]);
-  React18.useEffect(() => {
+  React52.useEffect(() => {
     if (listRef.current) {
       const activeEl = listRef.current.querySelector('[aria-selected="true"]');
       if (activeEl) {
@@ -2091,7 +2393,7 @@ var fabVariants = cva(
     defaultVariants: { variant: "primary", size: "md", position: "bottom-right" }
   }
 );
-var Fab = React18.forwardRef(
+var Fab = React52.forwardRef(
   ({ className, variant, size, position, mobileOnly, icon, label, loading, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "button",
@@ -2118,7 +2420,7 @@ var Fab = React18.forwardRef(
   }
 );
 Fab.displayName = "Fab";
-var BottomSheetContext = React18.createContext(null);
+var BottomSheetContext = React52.createContext(null);
 function BottomSheet({
   open,
   onClose,
@@ -2127,12 +2429,12 @@ function BottomSheet({
   className,
   showClose = true
 }) {
-  const titleId = React18.useId();
-  const descId = React18.useId();
-  const containerRef = React18.useRef(null);
-  const lastActiveElement = React18.useRef(null);
-  const [mounted, setMounted] = React18.useState(open);
-  React18.useEffect(() => {
+  const titleId = React52.useId();
+  const descId = React52.useId();
+  const containerRef = React52.useRef(null);
+  const lastActiveElement = React52.useRef(null);
+  const [mounted, setMounted] = React52.useState(open);
+  React52.useEffect(() => {
     if (open) {
       setMounted(true);
     } else {
@@ -2140,7 +2442,7 @@ function BottomSheet({
       return () => clearTimeout(timer);
     }
   }, [open]);
-  React18.useEffect(() => {
+  React52.useEffect(() => {
     if (!open) return;
     lastActiveElement.current = document.activeElement;
     const container = containerRef.current;
@@ -2262,12 +2564,12 @@ function BottomSheet({
 function BottomSheetHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("p-6 flex flex-col gap-1.5 border-b border-border", className), ...props });
 }
-function BottomSheetTitle({ className, id, ...props }) {
-  const ctx = React18.useContext(BottomSheetContext);
-  return /* @__PURE__ */ jsx("h2", { id: id ?? ctx?.titleId, className: cn("m-0 text-[1.15rem] font-bold tracking-[-0.01em]", className), ...props });
+function BottomSheetTitle({ className, id, children, ...props }) {
+  const ctx = React52.useContext(BottomSheetContext);
+  return /* @__PURE__ */ jsx("h2", { id: id ?? ctx?.titleId, className: cn("m-0 text-[1.15rem] font-bold tracking-[-0.01em]", className), ...props, children });
 }
 function BottomSheetDescription({ className, id, ...props }) {
-  const ctx = React18.useContext(BottomSheetContext);
+  const ctx = React52.useContext(BottomSheetContext);
   return /* @__PURE__ */ jsx("p", { id: id ?? ctx?.descId, className: cn("m-0 text-[0.9rem] text-muted-foreground", className), ...props });
 }
 function BottomSheetContent({ className, ...props }) {
@@ -2288,7 +2590,7 @@ var kbdVariants = cva(
     defaultVariants: { size: "sm" }
   }
 );
-var Kbd = React18.forwardRef(
+var Kbd = React52.forwardRef(
   ({ className, size, keys, children, ...props }, ref) => {
     if (keys && keys.length > 0) {
       return /* @__PURE__ */ jsx(
@@ -2305,9 +2607,9 @@ var Kbd = React18.forwardRef(
   }
 );
 Kbd.displayName = "Kbd";
-var CodeBlock = React18.forwardRef(
+var CodeBlock = React52.forwardRef(
   ({ className, code, language, filename, copyable = true, maxHeight, ...props }, ref) => {
-    const [copied, setCopied] = React18.useState(false);
+    const [copied, setCopied] = React52.useState(false);
     const canCopy = copyable && typeof navigator !== "undefined" && !!navigator.clipboard;
     const onCopy = () => {
       navigator.clipboard.writeText(code).then(
@@ -2353,26 +2655,40 @@ var CodeBlock = React18.forwardRef(
   }
 );
 CodeBlock.displayName = "CodeBlock";
-var PopoverContext = React18.createContext(null);
+function Separator({ orientation = "horizontal", decorative = true, className }) {
+  const semanticProps = decorative ? { role: "none", "aria-hidden": true } : { role: "separator", "aria-orientation": orientation };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "w-px h-full",
+        className
+      ),
+      ...semanticProps
+    }
+  );
+}
+var PopoverContext = React52.createContext(null);
 function usePopoverContext(part) {
-  const ctx = React18.useContext(PopoverContext);
+  const ctx = React52.useContext(PopoverContext);
   if (!ctx) throw new Error(`${part} must be used inside <Popover>`);
   return ctx;
 }
 function Popover({ children, className, open: openProp, onOpenChange }) {
-  const [openState, setOpenState] = React18.useState(false);
+  const [openState, setOpenState] = React52.useState(false);
   const controlled = openProp !== void 0;
   const open = controlled ? openProp : openState;
-  const triggerRef = React18.useRef(null);
-  const ref = React18.useRef(null);
-  const setOpen = React18.useCallback(
+  const triggerRef = React52.useRef(null);
+  const ref = React52.useRef(null);
+  const setOpen = React52.useCallback(
     (v) => {
       if (!controlled) setOpenState(v);
       onOpenChange?.(v);
     },
     [controlled, onOpenChange]
   );
-  React18.useEffect(() => {
+  React52.useEffect(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -2392,7 +2708,7 @@ function Popover({ children, className, open: openProp, onOpenChange }) {
   }, [open, setOpen]);
   return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("relative inline-block", className), children }) });
 }
-var PopoverTrigger = React18.forwardRef(({ onClick, asChild, ...props }, ref) => {
+var PopoverTrigger = React52.forwardRef(({ onClick, asChild, ...props }, ref) => {
   const ctx = usePopoverContext("PopoverTrigger");
   const setRefs = (node) => {
     ctx.triggerRef.current = node;
@@ -2400,8 +2716,8 @@ var PopoverTrigger = React18.forwardRef(({ onClick, asChild, ...props }, ref) =>
     else if (ref) ref.current = node;
   };
   if (asChild) {
-    const child = React18.Children.only(props.children);
-    return React18.cloneElement(child, {
+    const child = React52.Children.only(props.children);
+    return React52.cloneElement(child, {
       ref: setRefs,
       ...props,
       ...child.props,
@@ -2452,8 +2768,8 @@ function PopoverContent({
   ...props
 }) {
   const ctx = usePopoverContext("PopoverContent");
-  const ref = React18.useRef(null);
-  React18.useEffect(() => {
+  const ref = React52.useRef(null);
+  React52.useEffect(() => {
     if (ctx.open) ref.current?.focus();
   }, [ctx.open]);
   if (!ctx.open) return null;
@@ -2474,7 +2790,3275 @@ function PopoverContent({
     }
   );
 }
+function toArray(v) {
+  if (v == null) return [];
+  return Array.isArray(v) ? v : [v];
+}
+var Combobox = React52.forwardRef(
+  function Combobox2(props, ref) {
+    const {
+      options,
+      placeholder = "Select\u2026",
+      searchPlaceholder = "Search\u2026",
+      emptyMessage = "No results",
+      disabled = false,
+      error = false,
+      required = false,
+      className,
+      id,
+      name,
+      "aria-describedby": describedBy
+    } = props;
+    const multiple = props.multiple ?? false;
+    const reactId = React52.useId();
+    const baseId = id ?? reactId;
+    const listId = `${baseId}-listbox`;
+    const optionId = (i) => `${baseId}-opt-${i}`;
+    const controlled = props.value !== void 0;
+    const [internal, setInternal] = React52.useState(() => toArray(props.defaultValue));
+    const selected = controlled ? toArray(props.value) : internal;
+    const [open, setOpen] = React52.useState(false);
+    const [search, setSearch] = React52.useState("");
+    const [activeIndex, setActiveIndex] = React52.useState(0);
+    const containerRef = React52.useRef(null);
+    const triggerRef = React52.useRef(null);
+    const inputRef = React52.useRef(null);
+    const listRef = React52.useRef(null);
+    const setTriggerRef = (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const filtered = React52.useMemo(() => {
+      const q = search.trim().toLowerCase();
+      return q ? options.filter((o) => o.label.toLowerCase().includes(q)) : options;
+    }, [search, options]);
+    const firstEnabled = React52.useCallback(() => {
+      const i = filtered.findIndex((o) => !o.disabled);
+      return i === -1 ? 0 : i;
+    }, [filtered]);
+    const labelFor = (v) => options.find((o) => o.value === v)?.label ?? v;
+    const emit = (next) => {
+      if (!controlled) setInternal(next);
+      if (props.multiple) {
+        props.onChange?.(next);
+      } else {
+        props.onChange?.(next[0] ?? "");
+      }
+    };
+    const closePopup = React52.useCallback(() => {
+      setOpen(false);
+      setSearch("");
+    }, []);
+    const openPopup = () => {
+      if (!disabled) setOpen(true);
+    };
+    const handleSelect = (opt) => {
+      if (opt.disabled) return;
+      if (multiple) {
+        const next = selected.includes(opt.value) ? selected.filter((v) => v !== opt.value) : [...selected, opt.value];
+        emit(next);
+        inputRef.current?.focus();
+      } else {
+        emit([opt.value]);
+        closePopup();
+        triggerRef.current?.focus();
+      }
+    };
+    const removeValue = (value) => {
+      emit(selected.filter((v) => v !== value));
+    };
+    React52.useEffect(() => {
+      if (open) setActiveIndex(firstEnabled());
+    }, [open, firstEnabled]);
+    React52.useEffect(() => {
+      if (open) inputRef.current?.focus();
+    }, [open]);
+    React52.useEffect(() => {
+      if (!open) return;
+      const onDown = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) closePopup();
+      };
+      document.addEventListener("mousedown", onDown);
+      return () => document.removeEventListener("mousedown", onDown);
+    }, [open, closePopup]);
+    React52.useEffect(() => {
+      const el = listRef.current?.querySelector('[data-active="true"]');
+      el?.scrollIntoView({ block: "nearest" });
+    }, [activeIndex]);
+    const moveActive = (dir) => {
+      if (filtered.length === 0) return;
+      setActiveIndex((prev) => {
+        let i = prev;
+        for (let step = 0; step < filtered.length; step++) {
+          i = (i + dir + filtered.length) % filtered.length;
+          if (!filtered[i]?.disabled) return i;
+        }
+        return prev;
+      });
+    };
+    const onInputKeyDown = (e) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          moveActive(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          moveActive(-1);
+          break;
+        case "Home":
+          e.preventDefault();
+          setActiveIndex(firstEnabled());
+          break;
+        case "End":
+          e.preventDefault();
+          for (let i = filtered.length - 1; i >= 0; i--) {
+            if (!filtered[i].disabled) {
+              setActiveIndex(i);
+              break;
+            }
+          }
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (filtered[activeIndex]) handleSelect(filtered[activeIndex]);
+          break;
+        case "Escape":
+          e.preventDefault();
+          closePopup();
+          triggerRef.current?.focus();
+          break;
+        case "Backspace":
+          if (multiple && search === "" && selected.length > 0) {
+            removeValue(selected[selected.length - 1]);
+          }
+          break;
+      }
+    };
+    const onTriggerKeyDown = (e) => {
+      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        openPopup();
+      }
+    };
+    const showPlaceholder = multiple ? selected.length === 0 : !selected[0];
+    return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative w-full", className), children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative flex w-full items-center gap-1.5 flex-wrap border rounded-kj-md bg-surface",
+            "pl-[0.85rem] pr-9 py-[calc(0.45rem*var(--kj-density,1))] min-h-[calc(2.5rem*var(--kj-density,1))]",
+            "transition-[border-color,box-shadow] duration-150",
+            "focus-within:outline-none focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/30",
+            disabled && "bg-muted cursor-not-allowed",
+            error ? "border-danger" : "border-input"
+          ),
+          children: [
+            multiple && selected.map((value) => /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 rounded-kj-sm bg-primary/10 text-primary text-xs font-medium pl-2 pr-1 py-0.5",
+                children: [
+                  labelFor(value),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Remove ${labelFor(value)}`,
+                      disabled,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        removeValue(value);
+                      },
+                      className: "rounded-full p-0.5 leading-none hover:bg-primary/20",
+                      children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-3 w-3", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) })
+                    }
+                  )
+                ]
+              },
+              value
+            )),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: setTriggerRef,
+                type: "button",
+                id,
+                disabled,
+                "aria-haspopup": "listbox",
+                "aria-expanded": open,
+                "aria-controls": open && filtered.length > 0 ? listId : void 0,
+                "aria-invalid": error || void 0,
+                "aria-required": required || void 0,
+                "aria-describedby": describedBy,
+                onClick: () => open ? closePopup() : openPopup(),
+                onKeyDown: onTriggerKeyDown,
+                className: cn(
+                  "flex-1 min-w-[60px] text-left bg-transparent border-none outline-none cursor-pointer text-sm disabled:cursor-not-allowed",
+                  showPlaceholder && "text-muted-foreground"
+                ),
+                children: multiple ? selected.length === 0 ? placeholder : "" : (selected[0] ? labelFor(selected[0]) : "") || placeholder
+              }
+            ),
+            name && multiple && selected.map((v) => /* @__PURE__ */ jsx("input", { type: "hidden", name, value: v }, v)),
+            name && !multiple && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected[0] ?? "" }),
+            /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) }) })
+          ]
+        }
+      ),
+      open && /* @__PURE__ */ jsxs("div", { className: "absolute z-40 top-[calc(100%+6px)] left-0 w-full min-w-[12rem] bg-surface border border-border rounded-kj-md shadow-kj-lg overflow-hidden animate-[kjpop_.12s_ease]", children: [
+        /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-border", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            role: "combobox",
+            "aria-autocomplete": "list",
+            "aria-expanded": open,
+            "aria-controls": filtered.length > 0 ? listId : void 0,
+            "aria-activedescendant": filtered[activeIndex] ? optionId(activeIndex) : void 0,
+            "aria-label": searchPlaceholder,
+            placeholder: searchPlaceholder,
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            onKeyDown: onInputKeyDown,
+            className: "w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none px-2 py-1"
+          }
+        ) }),
+        filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: listRef,
+            id: listId,
+            role: "listbox",
+            "aria-multiselectable": multiple || void 0,
+            "aria-label": placeholder,
+            className: "max-h-60 overflow-y-auto p-1",
+            children: filtered.map((opt, i) => {
+              const isSelected = selected.includes(opt.value);
+              const isActive = i === activeIndex;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  id: optionId(i),
+                  role: "option",
+                  "aria-selected": isSelected,
+                  "aria-disabled": opt.disabled || void 0,
+                  "data-active": isActive || void 0,
+                  onMouseEnter: () => !opt.disabled && setActiveIndex(i),
+                  onClick: () => handleSelect(opt),
+                  className: cn(
+                    "flex items-center justify-between gap-2 px-3 py-2 rounded-kj-sm text-sm cursor-pointer select-none",
+                    opt.disabled && "text-muted-foreground opacity-50 cursor-not-allowed",
+                    !opt.disabled && isActive && "bg-primary/10 text-primary",
+                    !opt.disabled && !isActive && "text-foreground hover:bg-muted"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: opt.label }),
+                    isSelected && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4 text-primary shrink-0", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m5 12 5 5L20 7" }) })
+                  ]
+                },
+                opt.value
+              );
+            })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+Combobox.displayName = "Combobox";
+var ComboboxField = React52.forwardRef(
+  function ComboboxField2({ label, hint, error, required, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(FormField, { label, hint, error, required, className, children: /* @__PURE__ */ jsx(Combobox, { ref, error: !!error, ...props }) });
+  }
+);
+ComboboxField.displayName = "ComboboxField";
+
+// src/components/calendar-internals.ts
+function startOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function addDays(d, n) {
+  const r = new Date(d);
+  r.setDate(r.getDate() + n);
+  return r;
+}
+function addMonths(d, n) {
+  const r = new Date(d);
+  r.setMonth(r.getMonth() + n);
+  return r;
+}
+function clampToMonth(year, month, day) {
+  const daysInTarget = new Date(year, month + 1, 0).getDate();
+  return new Date(year, month, Math.min(day, daysInTarget));
+}
+function addMonthsClamped(d, n) {
+  return clampToMonth(d.getFullYear(), d.getMonth() + n, d.getDate());
+}
+function addYearsClamped(d, n) {
+  return clampToMonth(d.getFullYear() + n, d.getMonth(), d.getDate());
+}
+function startOfMonth(d) {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+function startOfWeek(d) {
+  const r = startOfDay(d);
+  r.setDate(r.getDate() - r.getDay());
+  return r;
+}
+function buildGridDays(viewMonth) {
+  const gridStart = startOfWeek(startOfMonth(viewMonth));
+  return Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+}
+function dateKey(d) {
+  return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+}
+function toISODateString(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+var monthLabelFormat = new Intl.DateTimeFormat(void 0, { month: "long", year: "numeric" });
+var fullDateFormat = new Intl.DateTimeFormat(void 0, { dateStyle: "full" });
+var weekdayShortFormat = new Intl.DateTimeFormat(void 0, { weekday: "short" });
+var weekdayLongFormat = new Intl.DateTimeFormat(void 0, { weekday: "long" });
+var weekdayLabels = Array.from({ length: 7 }, (_, i) => {
+  const d = addDays(startOfWeek(/* @__PURE__ */ new Date()), i);
+  return { key: i, short: weekdayShortFormat.format(d), long: weekdayLongFormat.format(d) };
+});
+var CalendarGrid = React52.forwardRef(function CalendarGrid2({ viewMonth, isDayDisabled, cellState, onSelectDay, onFocusDay, initialFocusDate, className }, ref) {
+  const gridDays = React52.useMemo(() => buildGridDays(viewMonth), [viewMonth]);
+  const inViewMonth = (d) => d.getMonth() === viewMonth.getMonth() && d.getFullYear() === viewMonth.getFullYear();
+  const [focusedDate, setFocusedDate] = React52.useState(() => startOfDay(initialFocusDate));
+  const pendingFocusRef = React52.useRef(false);
+  const gridRef = React52.useRef(null);
+  const rovingTarget = inViewMonth(focusedDate) && !isDayDisabled(focusedDate) ? focusedDate : gridDays.find((d) => inViewMonth(d) && !isDayDisabled(d)) ?? gridDays.find((d) => inViewMonth(d)) ?? gridDays[0];
+  const moveFocusTo = (next, viaKeyboard) => {
+    pendingFocusRef.current = viaKeyboard;
+    setFocusedDate(next);
+    onFocusDay?.(next);
+  };
+  React52.useEffect(() => {
+    if (!pendingFocusRef.current) return;
+    pendingFocusRef.current = false;
+    const el = gridRef.current?.querySelector(`[data-date="${dateKey(rovingTarget)}"]`);
+    el?.focus();
+  }, [rovingTarget]);
+  const step = (from, delta) => {
+    let next = addDays(from, delta);
+    let guard = 0;
+    while (isDayDisabled(next) && guard < 1e3) {
+      next = addDays(next, delta);
+      guard++;
+    }
+    return isDayDisabled(next) ? from : next;
+  };
+  const selectDay = (d) => {
+    if (isDayDisabled(d)) return;
+    moveFocusTo(d, false);
+    onSelectDay(d);
+  };
+  const onGridKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowRight":
+        e.preventDefault();
+        moveFocusTo(step(rovingTarget, 1), true);
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        moveFocusTo(step(rovingTarget, -1), true);
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        moveFocusTo(step(rovingTarget, 7), true);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveFocusTo(step(rovingTarget, -7), true);
+        break;
+      case "Home": {
+        e.preventDefault();
+        const target = startOfWeek(rovingTarget);
+        moveFocusTo(isDayDisabled(target) ? step(target, 1) : target, true);
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        const target = addDays(startOfWeek(rovingTarget), 6);
+        moveFocusTo(isDayDisabled(target) ? step(target, -1) : target, true);
+        break;
+      }
+      case "PageUp": {
+        e.preventDefault();
+        const target = e.shiftKey ? addYearsClamped(rovingTarget, -1) : addMonthsClamped(rovingTarget, -1);
+        moveFocusTo(isDayDisabled(target) ? step(target, -1) : target, true);
+        break;
+      }
+      case "PageDown": {
+        e.preventDefault();
+        const target = e.shiftKey ? addYearsClamped(rovingTarget, 1) : addMonthsClamped(rovingTarget, 1);
+        moveFocusTo(isDayDisabled(target) ? step(target, 1) : target, true);
+        break;
+      }
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        selectDay(rovingTarget);
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), children: /* @__PURE__ */ jsxs("div", { ref: gridRef, role: "grid", "aria-label": monthLabelFormat.format(viewMonth), onKeyDown: onGridKeyDown, children: [
+    /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: weekdayLabels.map((w) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "columnheader",
+        "aria-label": w.long,
+        className: "h-8 flex items-center justify-center text-xs font-medium text-muted-foreground",
+        children: w.short
+      },
+      w.key
+    )) }),
+    Array.from({ length: 6 }, (_, week) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: gridDays.slice(week * 7, week * 7 + 7).map((day) => {
+      if (!inViewMonth(day)) {
+        return /* @__PURE__ */ jsx("div", { role: "gridcell", "aria-hidden": "true", className: "h-9" }, dateKey(day));
+      }
+      const disabled = isDayDisabled(day);
+      const state = cellState(day);
+      const isRoving = isSameDay(day, rovingTarget);
+      const isEndpoint = !!(state.selected || state.rangeStart || state.rangeEnd);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "gridcell",
+          "data-date": dateKey(day),
+          tabIndex: isRoving ? 0 : -1,
+          "aria-selected": isEndpoint,
+          "aria-disabled": disabled || void 0,
+          "aria-label": fullDateFormat.format(day),
+          onMouseEnter: () => onFocusDay?.(day),
+          onClick: () => selectDay(day),
+          className: cn(
+            "h-9 w-9 mx-auto flex items-center justify-center text-sm",
+            state.inRange && !isEndpoint ? "rounded-none" : "rounded-full",
+            "focus:outline-none focus:ring-[3px] focus:ring-ring/30",
+            disabled && "text-muted-foreground opacity-40 cursor-not-allowed",
+            !disabled && isEndpoint && "bg-primary text-primary-foreground",
+            !disabled && state.inRange && !isEndpoint && "bg-primary/15 text-foreground",
+            !disabled && !isEndpoint && !state.inRange && state.today && "ring-1 ring-primary text-primary font-medium",
+            !disabled && !isEndpoint && !state.inRange && !state.today && "text-foreground hover:bg-muted"
+          ),
+          children: day.getDate()
+        },
+        dateKey(day)
+      );
+    }) }, week))
+  ] }) });
+});
+CalendarGrid.displayName = "CalendarGrid";
+var Calendar = React52.forwardRef(
+  function Calendar2({ value, defaultValue, onChange, month, defaultMonth, onMonthChange, min, max, disabledDates, className }, ref) {
+    const controlled = value !== void 0;
+    const [internalValue, setInternalValue] = React52.useState(defaultValue);
+    const selected = controlled ? value : internalValue;
+    const monthControlled = month !== void 0;
+    const [internalMonth, setInternalMonth] = React52.useState(
+      () => startOfMonth(month ?? defaultMonth ?? selected ?? /* @__PURE__ */ new Date())
+    );
+    const viewMonth = monthControlled ? startOfMonth(month) : internalMonth;
+    const setViewMonth = (next) => {
+      const normalized = startOfMonth(next);
+      if (!monthControlled) setInternalMonth(normalized);
+      onMonthChange?.(normalized);
+    };
+    const isDayDisabled = React52.useCallback(
+      (d) => {
+        if (min && d < startOfDay(min)) return true;
+        if (max && d > startOfDay(max)) return true;
+        return disabledDates?.(d) ?? false;
+      },
+      [min, max, disabledDates]
+    );
+    const commitValue = (d) => {
+      if (!controlled) setInternalValue(d);
+      onChange?.(d);
+    };
+    const today = /* @__PURE__ */ new Date();
+    const cellState = (d) => ({
+      selected: selected ? isSameDay(d, selected) : false,
+      today: isSameDay(d, today)
+    });
+    const inViewMonth = (d) => d.getMonth() === viewMonth.getMonth() && d.getFullYear() === viewMonth.getFullYear();
+    const handleFocusDay = (d) => {
+      if (!inViewMonth(d)) setViewMonth(d);
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-[280px] select-none", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Previous month",
+            onClick: () => setViewMonth(addMonths(viewMonth, -1)),
+            className: "p-1.5 rounded-kj-sm text-muted-foreground hover:bg-muted hover:text-foreground",
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: monthLabelFormat.format(viewMonth) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Next month",
+            onClick: () => setViewMonth(addMonths(viewMonth, 1)),
+            className: "p-1.5 rounded-kj-sm text-muted-foreground hover:bg-muted hover:text-foreground",
+            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        CalendarGrid,
+        {
+          viewMonth,
+          isDayDisabled,
+          cellState,
+          onSelectDay: commitValue,
+          onFocusDay: handleFocusDay,
+          initialFocusDate: selected ?? /* @__PURE__ */ new Date()
+        }
+      )
+    ] });
+  }
+);
+Calendar.displayName = "Calendar";
+var displayFormat = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
+var DatePicker = React52.forwardRef(
+  function DatePicker2({
+    value,
+    defaultValue,
+    onChange,
+    min,
+    max,
+    disabledDates,
+    placeholder = "Pick a date\u2026",
+    disabled = false,
+    error = false,
+    required = false,
+    className,
+    id,
+    name,
+    "aria-describedby": describedBy
+  }, ref) {
+    const controlled = value !== void 0;
+    const [internalValue, setInternalValue] = React52.useState(defaultValue);
+    const selected = controlled ? value : internalValue;
+    const [open, setOpen] = React52.useState(false);
+    const containerRef = React52.useRef(null);
+    const triggerRef = React52.useRef(null);
+    const setTriggerRef = (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const commitValue = (d) => {
+      if (!controlled) setInternalValue(d);
+      onChange?.(d);
+    };
+    const closePopup = React52.useCallback(() => setOpen(false), []);
+    const openPopup = () => {
+      if (!disabled) setOpen(true);
+    };
+    const handleCalendarChange = (d) => {
+      commitValue(d);
+      closePopup();
+      triggerRef.current?.focus();
+    };
+    React52.useEffect(() => {
+      if (!open) return;
+      const onDown = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) closePopup();
+      };
+      document.addEventListener("mousedown", onDown);
+      return () => document.removeEventListener("mousedown", onDown);
+    }, [open, closePopup]);
+    const onTriggerKeyDown = (e) => {
+      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        openPopup();
+      } else if (e.key === "Escape" && open) {
+        e.preventDefault();
+        closePopup();
+      }
+    };
+    const onPanelKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closePopup();
+        triggerRef.current?.focus();
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative inline-block w-full", className), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: setTriggerRef,
+          type: "button",
+          id,
+          disabled,
+          "aria-haspopup": "grid",
+          "aria-expanded": open,
+          "aria-invalid": error || void 0,
+          "aria-required": required || void 0,
+          "aria-describedby": describedBy,
+          onClick: () => open ? closePopup() : openPopup(),
+          onKeyDown: onTriggerKeyDown,
+          className: cn(
+            "w-full flex items-center justify-between gap-2 border rounded-kj-md bg-surface text-left text-sm",
+            "pl-[0.85rem] pr-3 py-[calc(0.6rem*var(--kj-density,1))]",
+            "transition-[border-color,box-shadow] duration-150",
+            "focus:outline-none focus:border-ring focus:ring-[3px] focus:ring-ring/30",
+            disabled && "bg-muted text-muted-foreground cursor-not-allowed",
+            error ? "border-danger" : "border-input",
+            !selected && "text-muted-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: selected ? displayFormat.format(selected) : placeholder }),
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "h-4 w-4 text-muted-foreground shrink-0",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+                  /* @__PURE__ */ jsx("path", { d: "M3 10h18M8 2v4M16 2v4" })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected ? toISODateString(selected) : "" }),
+      open && /* @__PURE__ */ jsx(
+        "div",
+        {
+          onKeyDown: onPanelKeyDown,
+          className: "absolute z-40 top-[calc(100%+6px)] left-0 bg-surface border border-border rounded-kj-md shadow-kj-lg p-3 animate-[kjpop_.12s_ease]",
+          children: /* @__PURE__ */ jsx(Calendar, { value: selected, onChange: handleCalendarChange, min, max, disabledDates })
+        }
+      )
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+var DatePickerField = React52.forwardRef(
+  function DatePickerField2({ label, hint, error, required, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(FormField, { label, hint, error, required, className, children: /* @__PURE__ */ jsx(DatePicker, { ref, error: !!error, ...props }) });
+  }
+);
+DatePickerField.displayName = "DatePickerField";
+function isBetweenExclusive(d, lo, hi) {
+  const t = startOfDay(d).getTime();
+  return t > startOfDay(lo).getTime() && t < startOfDay(hi).getTime();
+}
+var RangeCalendar = React52.forwardRef(
+  function RangeCalendar2({ value, defaultValue, onChange, month, defaultMonth, onMonthChange, min, max, disabledDates, className }, ref) {
+    const controlled = value !== void 0;
+    const [internalValue, setInternalValue] = React52.useState(defaultValue ?? {});
+    const range2 = controlled ? value : internalValue;
+    const monthControlled = month !== void 0;
+    const [internalMonth, setInternalMonth] = React52.useState(
+      () => startOfMonth(month ?? defaultMonth ?? range2.start ?? /* @__PURE__ */ new Date())
+    );
+    const leftMonth = monthControlled ? startOfMonth(month) : internalMonth;
+    const rightMonth = addMonths(leftMonth, 1);
+    const setViewMonth = (next) => {
+      const normalized = startOfMonth(next);
+      if (!monthControlled) setInternalMonth(normalized);
+      onMonthChange?.(normalized);
+    };
+    const isDayDisabled = React52.useCallback(
+      (d) => {
+        if (min && d < startOfDay(min)) return true;
+        if (max && d > startOfDay(max)) return true;
+        return disabledDates?.(d) ?? false;
+      },
+      [min, max, disabledDates]
+    );
+    const [pendingStart, setPendingStart] = React52.useState(void 0);
+    const [hoverDate, setHoverDate] = React52.useState(void 0);
+    const commitRange = (next) => {
+      if (!controlled) setInternalValue(next);
+      onChange?.(next);
+    };
+    const handleSelectDay = (d) => {
+      const day = startOfDay(d);
+      if (pendingStart === void 0) {
+        setPendingStart(day);
+        setHoverDate(void 0);
+        return;
+      }
+      if (day < startOfDay(pendingStart)) {
+        setPendingStart(day);
+        setHoverDate(void 0);
+        return;
+      }
+      commitRange({ start: pendingStart, end: day });
+      setPendingStart(void 0);
+      setHoverDate(void 0);
+    };
+    const today = /* @__PURE__ */ new Date();
+    const previewEnd = pendingStart !== void 0 ? hoverDate : void 0;
+    const cellState = (d) => {
+      const isToday = isSameDay(d, today);
+      if (pendingStart !== void 0) {
+        if (previewEnd === void 0) {
+          return { rangeStart: isSameDay(d, pendingStart), today: isToday };
+        }
+        if (startOfDay(previewEnd) < startOfDay(pendingStart)) {
+          return { rangeStart: isSameDay(d, previewEnd), today: isToday };
+        }
+        return {
+          rangeStart: isSameDay(d, pendingStart),
+          rangeEnd: isSameDay(d, previewEnd),
+          inRange: isBetweenExclusive(d, pendingStart, previewEnd),
+          today: isToday
+        };
+      }
+      if (range2.start && range2.end) {
+        return {
+          rangeStart: isSameDay(d, range2.start),
+          rangeEnd: isSameDay(d, range2.end),
+          inRange: isBetweenExclusive(d, range2.start, range2.end),
+          today: isToday
+        };
+      }
+      return { rangeStart: range2.start ? isSameDay(d, range2.start) : false, today: isToday };
+    };
+    const inLockedRange = (d) => d.getMonth() === leftMonth.getMonth() && d.getFullYear() === leftMonth.getFullYear() || d.getMonth() === rightMonth.getMonth() && d.getFullYear() === rightMonth.getFullYear();
+    const handleFocusDay = (d) => {
+      if (pendingStart !== void 0) setHoverDate(d);
+      if (!inLockedRange(d)) setViewMonth(d);
+    };
+    const navButton = (direction) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": direction === "prev" ? "Previous month" : "Next month",
+        onClick: () => setViewMonth(addMonths(leftMonth, direction === "prev" ? -1 : 1)),
+        className: "p-1.5 rounded-kj-sm text-muted-foreground hover:bg-muted hover:text-foreground",
+        children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: direction === "prev" ? /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) : /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
+      }
+    );
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex gap-6 select-none", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-[280px]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          navButton("prev"),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: monthLabelFormat.format(leftMonth) }),
+          /* @__PURE__ */ jsx("span", { className: "w-[26px]", "aria-hidden": "true" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          CalendarGrid,
+          {
+            viewMonth: leftMonth,
+            isDayDisabled,
+            cellState,
+            onSelectDay: handleSelectDay,
+            onFocusDay: handleFocusDay,
+            initialFocusDate: pendingStart ?? range2.start ?? /* @__PURE__ */ new Date()
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "w-[280px]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-[26px]", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: monthLabelFormat.format(rightMonth) }),
+          navButton("next")
+        ] }),
+        /* @__PURE__ */ jsx(
+          CalendarGrid,
+          {
+            viewMonth: rightMonth,
+            isDayDisabled,
+            cellState,
+            onSelectDay: handleSelectDay,
+            onFocusDay: handleFocusDay,
+            initialFocusDate: pendingStart ?? range2.start ?? /* @__PURE__ */ new Date()
+          }
+        )
+      ] })
+    ] });
+  }
+);
+RangeCalendar.displayName = "RangeCalendar";
+var displayFormat2 = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
+function formatRangeLabel(range2) {
+  if (!range2.start || !range2.end) return void 0;
+  return `${displayFormat2.format(range2.start)} \u2013 ${displayFormat2.format(range2.end)}`;
+}
+var DateRangePicker = React52.forwardRef(
+  function DateRangePicker2({
+    value,
+    defaultValue,
+    onChange,
+    min,
+    max,
+    disabledDates,
+    placeholder = "Pick a date range\u2026",
+    disabled = false,
+    error = false,
+    required = false,
+    className,
+    id,
+    name,
+    "aria-describedby": describedBy
+  }, ref) {
+    const controlled = value !== void 0;
+    const [internalValue, setInternalValue] = React52.useState(defaultValue ?? {});
+    const selected = controlled ? value : internalValue;
+    const [open, setOpen] = React52.useState(false);
+    const containerRef = React52.useRef(null);
+    const triggerRef = React52.useRef(null);
+    const setTriggerRef = (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    const commitValue = (r) => {
+      if (!controlled) setInternalValue(r);
+      onChange?.(r);
+    };
+    const closePopup = React52.useCallback(() => setOpen(false), []);
+    const openPopup = () => {
+      if (!disabled) setOpen(true);
+    };
+    const handleRangeChange = (r) => {
+      commitValue(r);
+      closePopup();
+      triggerRef.current?.focus();
+    };
+    React52.useEffect(() => {
+      if (!open) return;
+      const onDown = (e) => {
+        if (containerRef.current && !containerRef.current.contains(e.target)) closePopup();
+      };
+      document.addEventListener("mousedown", onDown);
+      return () => document.removeEventListener("mousedown", onDown);
+    }, [open, closePopup]);
+    const onTriggerKeyDown = (e) => {
+      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        openPopup();
+      } else if (e.key === "Escape" && open) {
+        e.preventDefault();
+        closePopup();
+        triggerRef.current?.focus();
+      }
+    };
+    const onPanelKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closePopup();
+        triggerRef.current?.focus();
+      }
+    };
+    const label = formatRangeLabel(selected);
+    return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative inline-block w-full", className), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: setTriggerRef,
+          type: "button",
+          id,
+          disabled,
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-invalid": error || void 0,
+          "aria-required": required || void 0,
+          "aria-describedby": describedBy,
+          onClick: () => open ? closePopup() : openPopup(),
+          onKeyDown: onTriggerKeyDown,
+          className: cn(
+            "w-full flex items-center justify-between gap-2 border rounded-kj-md bg-surface text-left text-sm",
+            "pl-[0.85rem] pr-3 py-[calc(0.6rem*var(--kj-density,1))]",
+            "transition-[border-color,box-shadow] duration-150",
+            "focus:outline-none focus:border-ring focus:ring-[3px] focus:ring-ring/30",
+            disabled && "bg-muted text-muted-foreground cursor-not-allowed",
+            error ? "border-danger" : "border-input",
+            !label && "text-muted-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: label ?? placeholder }),
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                className: "h-4 w-4 text-muted-foreground shrink-0",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: [
+                  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+                  /* @__PURE__ */ jsx("path", { d: "M3 10h18M8 2v4M16 2v4" })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      name && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}Start`, value: selected.start ? toISODateString(selected.start) : "" }),
+        /* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}End`, value: selected.end ? toISODateString(selected.end) : "" })
+      ] }),
+      open && /* @__PURE__ */ jsx(
+        "div",
+        {
+          onKeyDown: onPanelKeyDown,
+          className: "absolute z-40 top-[calc(100%+6px)] left-0 bg-surface border border-border rounded-kj-md shadow-kj-lg p-3 animate-[kjpop_.12s_ease]",
+          children: /* @__PURE__ */ jsx(RangeCalendar, { value: selected, onChange: handleRangeChange, min, max, disabledDates })
+        }
+      )
+    ] });
+  }
+);
+DateRangePicker.displayName = "DateRangePicker";
+var DateRangePickerField = React52.forwardRef(
+  function DateRangePickerField2({ label, hint, error, required, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(FormField, { label, hint, error, required, className, children: /* @__PURE__ */ jsx(DateRangePicker, { ref, error: !!error, ...props }) });
+  }
+);
+DateRangePickerField.displayName = "DateRangePickerField";
+var Dropzone = React52.forwardRef(
+  function Dropzone2({
+    onFiles,
+    accept,
+    multiple = true,
+    disabled = false,
+    className,
+    children,
+    id,
+    "aria-describedby": describedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired
+  }, ref) {
+    const inputRef = React52.useRef(null);
+    const [dragActive, setDragActive] = React52.useState(false);
+    const dragCounter = React52.useRef(0);
+    const invalid = ariaInvalid === true || ariaInvalid === "true";
+    const openPicker = () => {
+      if (!disabled) inputRef.current?.click();
+    };
+    const handleInputChange = (e) => {
+      const files = e.target.files ? Array.from(e.target.files) : [];
+      if (files.length > 0) onFiles(files);
+      e.target.value = "";
+    };
+    const handleDragEnter = (e) => {
+      e.preventDefault();
+      if (disabled) return;
+      dragCounter.current += 1;
+      setDragActive(true);
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+    };
+    const handleDragLeave = (e) => {
+      e.preventDefault();
+      if (disabled) return;
+      dragCounter.current -= 1;
+      if (dragCounter.current <= 0) {
+        dragCounter.current = 0;
+        setDragActive(false);
+      }
+    };
+    const handleDrop = (e) => {
+      e.preventDefault();
+      dragCounter.current = 0;
+      setDragActive(false);
+      if (disabled) return;
+      const files = e.dataTransfer?.files ? Array.from(e.dataTransfer.files) : [];
+      if (files.length > 0) onFiles(files);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          id,
+          disabled,
+          "aria-describedby": describedBy,
+          "aria-invalid": ariaInvalid,
+          "aria-required": ariaRequired,
+          "data-drag-active": dragActive || void 0,
+          onClick: openPicker,
+          onDragEnter: handleDragEnter,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          onDrop: handleDrop,
+          className: cn(
+            "w-full flex flex-col items-center justify-center gap-2 rounded-kj-md border-2 border-dashed px-6 py-8 text-center text-sm transition-colors",
+            "focus:outline-none focus:ring-[3px] focus:ring-ring/30",
+            disabled ? "border-input bg-muted text-muted-foreground cursor-not-allowed" : dragActive ? "border-primary bg-primary/5 text-foreground cursor-pointer" : invalid ? "border-danger bg-surface text-muted-foreground hover:text-foreground cursor-pointer" : "border-input bg-surface text-muted-foreground hover:border-primary hover:text-foreground cursor-pointer"
+          ),
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-7 w-7", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("path", { d: "M12 16V4M7 9l5-5 5 5" }),
+              /* @__PURE__ */ jsx("path", { d: "M20 16v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3" })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "Drag and drop files here" }),
+              ", or click to browse"
+            ] })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "file",
+          accept,
+          multiple,
+          disabled,
+          onChange: handleInputChange,
+          className: "sr-only",
+          tabIndex: -1,
+          "aria-hidden": "true"
+        }
+      )
+    ] });
+  }
+);
+Dropzone.displayName = "Dropzone";
+
+// src/components/file-upload-internals.ts
+var KB = 1024;
+function formatBytes(bytes) {
+  if (bytes < KB) return `${bytes} B`;
+  const units = ["KB", "MB", "GB", "TB"];
+  let value = bytes / KB;
+  let unitIndex = 0;
+  while (value >= KB && unitIndex < units.length - 1) {
+    value /= KB;
+    unitIndex++;
+  }
+  return `${value.toFixed(1)} ${units[unitIndex]}`;
+}
+function matchesAccept(file, accept) {
+  if (!accept || accept.trim() === "") return true;
+  const tokens = accept.split(",").map((t) => t.trim()).filter(Boolean);
+  if (tokens.length === 0) return true;
+  const fileType = file.type.toLowerCase();
+  const fileName = file.name.toLowerCase();
+  return tokens.some((token) => {
+    const t = token.toLowerCase();
+    if (t.startsWith(".")) return fileName.endsWith(t);
+    if (t.endsWith("/*")) return fileType.startsWith(t.slice(0, -1));
+    return fileType === t;
+  });
+}
+var idCounter = 0;
+function generateId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  idCounter += 1;
+  return `file-${Date.now().toString(36)}-${idCounter}-${Math.random().toString(36).slice(2, 8)}`;
+}
+function validateFiles(files, { accept, maxSize, maxFiles, existingCount = 0, multiple = true }) {
+  const accepted = [];
+  const rejected = [];
+  const effectiveExisting = multiple ? existingCount : 0;
+  for (const file of files) {
+    if (!matchesAccept(file, accept)) {
+      rejected.push({ file, reason: "type" });
+      continue;
+    }
+    if (maxSize != null && file.size > maxSize) {
+      rejected.push({ file, reason: "size" });
+      continue;
+    }
+    if (!multiple) {
+      if (accepted.length === 0) accepted.push(file);
+      else rejected.push({ file, reason: "count" });
+      continue;
+    }
+    const capacity = maxFiles != null ? maxFiles - effectiveExisting - accepted.length : Infinity;
+    if (capacity <= 0) {
+      rejected.push({ file, reason: "count" });
+      continue;
+    }
+    accepted.push(file);
+  }
+  return { accepted, rejected };
+}
+function FileIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className, fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+    /* @__PURE__ */ jsx("path", { d: "M14 2v6h6" })
+  ] });
+}
+var FileUpload = React52.forwardRef(
+  function FileUpload2({
+    value,
+    defaultValue,
+    onChange,
+    onReject,
+    accept,
+    maxSize,
+    maxFiles,
+    multiple = true,
+    disabled = false,
+    error = false,
+    required = false,
+    className,
+    id,
+    "aria-describedby": describedBy
+  }, ref) {
+    const controlled = value !== void 0;
+    const [internalItems, setInternalItems] = React52.useState(defaultValue ?? []);
+    const items = controlled ? value : internalItems;
+    const commit = (next) => {
+      if (!controlled) setInternalItems(next);
+      onChange?.(next);
+    };
+    const handleFiles = (files) => {
+      const { accepted, rejected } = validateFiles(files, {
+        accept,
+        maxSize,
+        maxFiles,
+        existingCount: items.length,
+        multiple
+      });
+      if (rejected.length > 0) onReject?.(rejected);
+      if (accepted.length === 0) return;
+      const newItems = accepted.map((file) => ({
+        id: generateId(),
+        file,
+        status: "pending"
+      }));
+      commit(multiple ? [...items, ...newItems] : newItems.slice(0, 1));
+    };
+    const removeItem = (itemId) => {
+      commit(items.filter((it) => it.id !== itemId));
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full flex flex-col gap-3", className), children: [
+      /* @__PURE__ */ jsx(
+        Dropzone,
+        {
+          ref,
+          onFiles: handleFiles,
+          accept,
+          multiple,
+          disabled,
+          id,
+          "aria-describedby": describedBy,
+          "aria-invalid": error || void 0,
+          "aria-required": required || void 0
+        }
+      ),
+      items.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: items.map((item) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "flex items-center gap-3 rounded-kj-md border border-border bg-surface px-3 py-2",
+          children: [
+            /* @__PURE__ */ jsx(FileIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-foreground", children: item.file.name }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatBytes(item.file.size) })
+              ] }),
+              item.status === "uploading" && item.progress != null && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(Progress, { value: item.progress, className: "h-1.5" }),
+                /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs text-muted-foreground", children: [
+                  Math.round(item.progress),
+                  "%"
+                ] })
+              ] }),
+              item.status === "success" && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-success", children: "Uploaded" }),
+              item.status === "error" && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-danger", children: item.error ?? "Upload failed" })
+            ] }),
+            !disabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Remove ${item.file.name}`,
+                onClick: () => removeItem(item.id),
+                className: "shrink-0 rounded-kj-sm p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+              }
+            )
+          ]
+        },
+        item.id
+      )) })
+    ] });
+  }
+);
+FileUpload.displayName = "FileUpload";
+var FileUploadField = React52.forwardRef(
+  function FileUploadField2({ label, hint, error, required, className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(FormField, { label, hint, error, required, className, children: /* @__PURE__ */ jsx(FileUpload, { ref, error: !!error, ...props }) });
+  }
+);
+FileUploadField.displayName = "FileUploadField";
+var TimelineContext = React52.createContext(null);
+var TimelineItemContext = React52.createContext(null);
+var Timeline = React52.forwardRef(
+  ({ align = "left", className, children, ...props }, ref) => {
+    const validChildren = React52.Children.toArray(children).filter(React52.isValidElement);
+    const count = validChildren.length;
+    const childrenWithIndex = validChildren.map((child, index) => {
+      return React52.cloneElement(child, {
+        index
+      });
+    });
+    return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: { align, count }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "list",
+        className: cn("flex flex-col gap-6 w-full", className),
+        ...props,
+        children: childrenWithIndex
+      }
+    ) });
+  }
+);
+Timeline.displayName = "Timeline";
+var TimelineItem = React52.forwardRef(
+  ({ className, index = 0, children, ...props }, ref) => {
+    const ctx = React52.useContext(TimelineContext);
+    if (!ctx) throw new Error("TimelineItem must be used within a Timeline");
+    const { align, count } = ctx;
+    const isEven = index % 2 === 0;
+    const isLast = index === count - 1;
+    const gridClass = cn(
+      "grid w-full gap-4 items-start group/timeline-item",
+      align === "left" && "grid-cols-[auto_1fr]",
+      align === "right" && "grid-cols-[1fr_auto] text-right",
+      align === "alternate" && "md:grid-cols-[1fr_auto_1fr] grid-cols-[auto_1fr]"
+    );
+    return /* @__PURE__ */ jsx(TimelineItemContext.Provider, { value: { isEven, align, isLast }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "listitem",
+        className: cn(gridClass, className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+TimelineItem.displayName = "TimelineItem";
+var TimelineSeparator = React52.forwardRef(
+  ({ className, align: propAlign, ...props }, ref) => {
+    const ctx = React52.useContext(TimelineItemContext);
+    const align = propAlign ?? ctx?.align ?? "left";
+    const separatorClass = cn(
+      "flex flex-col items-center justify-self-center h-full min-h-[40px]",
+      align === "alternate" && "md:col-start-2 col-start-1",
+      align === "left" && "col-start-1",
+      align === "right" && "col-start-2",
+      className
+    );
+    return /* @__PURE__ */ jsx("div", { ref, className: separatorClass, ...props });
+  }
+);
+TimelineSeparator.displayName = "TimelineSeparator";
+var TimelineConnector = React52.forwardRef(
+  ({ className, dashed, ...props }, ref) => {
+    const ctx = React52.useContext(TimelineItemContext);
+    const isLast = ctx?.isLast ?? false;
+    const connectorClass = cn(
+      "grow",
+      isLast && "hidden",
+      dashed ? "w-0 border-l border-dashed border-border" : "w-0.5 bg-border",
+      className
+    );
+    return /* @__PURE__ */ jsx("div", { ref, className: connectorClass, ...props });
+  }
+);
+TimelineConnector.displayName = "TimelineConnector";
+var TimelineDot = React52.forwardRef(
+  ({ className, variant = "default", size = "md", ...props }, ref) => {
+    const sizeClasses2 = {
+      sm: "w-2.5 h-2.5 rounded-full my-1.5",
+      md: "w-4 h-4 rounded-full my-1 border-2 bg-background border-border",
+      lg: "w-8 h-8 rounded-full border flex items-center justify-center bg-background text-[0.8rem]"
+    };
+    const variantClasses = {
+      default: "border-border text-muted-foreground",
+      primary: "border-primary bg-primary/5 text-primary",
+      secondary: "border-secondary bg-secondary/5 text-secondary",
+      success: "border-success bg-success-surface text-success",
+      warning: "border-warning bg-warning-surface text-warning",
+      danger: "border-danger bg-danger-surface text-danger"
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "shrink-0 select-none",
+          sizeClasses2[size],
+          variantClasses[variant],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TimelineDot.displayName = "TimelineDot";
+var TimelineContent = React52.forwardRef(
+  ({ className, isEven: propIsEven, align: propAlign, ...props }, ref) => {
+    const ctx = React52.useContext(TimelineItemContext);
+    const isEven = propIsEven ?? ctx?.isEven ?? false;
+    const align = propAlign ?? ctx?.align ?? "left";
+    const contentClass = cn(
+      "pb-8 flex flex-col gap-1 w-full",
+      align === "left" && "col-start-2 text-left",
+      align === "right" && "col-start-1 text-right",
+      align === "alternate" && (isEven ? "md:col-start-3 col-start-2 text-left" : "md:col-start-1 col-start-2 md:text-right text-left"),
+      className
+    );
+    return /* @__PURE__ */ jsx("div", { ref, className: contentClass, ...props });
+  }
+);
+TimelineContent.displayName = "TimelineContent";
+var TimelineTitle = React52.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h4",
+    {
+      ref,
+      className: cn("m-0 text-sm font-semibold tracking-[-0.01em] text-foreground", className),
+      ...props,
+      children
+    }
+  )
+);
+TimelineTitle.displayName = "TimelineTitle";
+var TimelineTime = React52.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "time",
+    {
+      ref,
+      className: cn("text-[0.75rem] text-muted-foreground font-normal", className),
+      ...props
+    }
+  )
+);
+TimelineTime.displayName = "TimelineTime";
+function useStepper({ initialStep = 0, stepsCount }) {
+  const safeStepsCount = Math.max(1, stepsCount);
+  const [activeStep, setActiveStep] = React52.useState(initialStep);
+  const [completedSteps, setCompletedSteps] = React52.useState([]);
+  const setStep = React52.useCallback((step) => {
+    if (step >= 0 && step < safeStepsCount) {
+      setActiveStep(step);
+    }
+  }, [safeStepsCount]);
+  const nextStep = React52.useCallback(() => {
+    setActiveStep((prev) => Math.min(prev + 1, safeStepsCount - 1));
+  }, [safeStepsCount]);
+  const prevStep = React52.useCallback(() => {
+    setActiveStep((prev) => Math.max(prev - 1, 0));
+  }, []);
+  const completeStep = React52.useCallback((step) => {
+    setCompletedSteps((prev) => {
+      if (step < 0 || step >= safeStepsCount) return prev;
+      if (prev.includes(step)) return prev;
+      return [...prev, step].sort((a, b) => a - b);
+    });
+  }, [safeStepsCount]);
+  const uncompleteStep = React52.useCallback((step) => {
+    setCompletedSteps((prev) => prev.filter((s) => s !== step));
+  }, []);
+  const reset = React52.useCallback(() => {
+    setActiveStep(initialStep);
+    setCompletedSteps([]);
+  }, [initialStep]);
+  return {
+    activeStep,
+    completedSteps,
+    setStep,
+    nextStep,
+    prevStep,
+    completeStep,
+    uncompleteStep,
+    reset,
+    isFirstStep: activeStep === 0,
+    isLastStep: activeStep === safeStepsCount - 1
+  };
+}
+var StepperContext = React52.createContext(null);
+var StepperItemContext = React52.createContext(null);
+var Stepper = React52.forwardRef(
+  ({ value, defaultValue, onValueChange, orientation = "horizontal", linear = true, children, className, ...props }, ref) => {
+    const [localValue, setLocalValue] = React52.useState(defaultValue ?? 0);
+    const isControlled = value !== void 0;
+    const activeStep = isControlled ? value : localValue;
+    const [steps, setSteps] = React52.useState([]);
+    const [completedSteps, setCompletedSteps] = React52.useState([]);
+    const registerStep = React52.useCallback((val) => {
+      setSteps((prev) => prev.includes(val) ? prev : [...prev, val].sort((a, b) => a - b));
+    }, []);
+    const unregisterStep = React52.useCallback((val) => {
+      setSteps((prev) => prev.filter((v) => v !== val));
+    }, []);
+    const setStep = React52.useCallback(
+      (step) => {
+        if (!isControlled) {
+          setLocalValue(step);
+        }
+        onValueChange?.(step);
+        if (linear) {
+          setCompletedSteps((prev) => {
+            const priorSteps = steps.filter((s) => s < step);
+            const nextCompleted = Array.from(/* @__PURE__ */ new Set([...prev, ...priorSteps])).sort((a, b) => a - b);
+            return nextCompleted;
+          });
+        }
+      },
+      [isControlled, onValueChange, linear, steps]
+    );
+    const contextValue = React52.useMemo(
+      () => ({
+        activeStep,
+        orientation,
+        linear,
+        setStep,
+        completedSteps,
+        registerStep,
+        unregisterStep,
+        steps
+      }),
+      [activeStep, orientation, linear, setStep, completedSteps, registerStep, unregisterStep, steps]
+    );
+    return /* @__PURE__ */ jsx(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full",
+          orientation === "vertical" ? "flex flex-col gap-6" : "space-y-6",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Stepper.displayName = "Stepper";
+var StepperContent = React52.forwardRef(
+  ({ value, className, children, ...props }, ref) => {
+    const ctx = React52.useContext(StepperContext);
+    if (!ctx) throw new Error("StepperContent must be used within a Stepper");
+    const isActive = ctx.activeStep === value;
+    if (!isActive) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tabpanel",
+        tabIndex: 0,
+        className: cn("focus-visible:outline-none w-full", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+StepperContent.displayName = "StepperContent";
+var StepperList = React52.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const ctx = React52.useContext(StepperContext);
+    if (!ctx) throw new Error("StepperList must be used within a Stepper");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "tablist",
+        "aria-orientation": ctx.orientation,
+        className: cn(
+          ctx.orientation === "horizontal" ? "flex items-center justify-between w-full relative gap-4" : "flex flex-col items-start gap-6 relative w-full",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+StepperList.displayName = "StepperList";
+var StepperItem = React52.forwardRef(
+  ({ value, disabled = false, className, children, ...props }, ref) => {
+    const ctx = React52.useContext(StepperContext);
+    if (!ctx) throw new Error("StepperItem must be used within a Stepper");
+    const { registerStep, unregisterStep } = ctx;
+    React52.useEffect(() => {
+      registerStep(value);
+      return () => unregisterStep(value);
+    }, [value, registerStep, unregisterStep]);
+    const isLast = ctx.steps[ctx.steps.length - 1] === value;
+    return /* @__PURE__ */ jsx(StepperItemContext.Provider, { value: { value, disabled, isLast }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group relative flex items-center gap-3 z-10",
+          ctx.orientation === "vertical" ? "flex items-start w-full" : "",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+StepperItem.displayName = "StepperItem";
+var StepperSeparator = React52.forwardRef(
+  ({ className, ...props }, ref) => {
+    const ctx = React52.useContext(StepperContext);
+    if (!ctx) throw new Error("StepperSeparator must be used within a Stepper");
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          ctx.orientation === "horizontal" ? "flex-1 h-[2px] bg-border transition-all duration-300" : "w-[2px] bg-border absolute left-[17px] top-8 bottom-0 -ml-px z-0",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+StepperSeparator.displayName = "StepperSeparator";
+var StepperTrigger = React52.forwardRef(
+  ({ className, children, onClick, onKeyDown, ...props }, ref) => {
+    const ctx = React52.useContext(StepperContext);
+    const itemCtx = React52.useContext(StepperItemContext);
+    if (!ctx || !itemCtx) {
+      throw new Error("StepperTrigger must be used within a StepperItem inside a Stepper");
+    }
+    const isCompleted = ctx.completedSteps.includes(itemCtx.value) || itemCtx.value < ctx.activeStep;
+    const isActive = ctx.activeStep === itemCtx.value;
+    const isClickable = !ctx.linear || isCompleted || isActive;
+    const disabled = itemCtx.disabled || !isClickable;
+    const handleClick = (e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      ctx.setStep(itemCtx.value);
+      onClick?.(e);
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      const triggers = Array.from(
+        e.currentTarget.closest('[role="tablist"]')?.querySelectorAll('[role="tab"]') || []
+      );
+      const currentIndex = triggers.indexOf(e.currentTarget);
+      if (currentIndex === -1) return;
+      let targetIndex = -1;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        targetIndex = Math.min(currentIndex + 1, triggers.length - 1);
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        targetIndex = Math.max(currentIndex - 1, 0);
+      }
+      if (targetIndex !== -1 && triggers[targetIndex]) {
+        e.preventDefault();
+        triggers[targetIndex].focus();
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "tab",
+        "aria-selected": isActive,
+        "aria-disabled": disabled,
+        tabIndex: isActive ? 0 : -1,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        className: cn(
+          "flex items-center gap-3 bg-transparent border-0 p-0 text-left cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-md disabled:cursor-not-allowed disabled:opacity-50",
+          ctx.orientation === "vertical" ? "w-full" : "",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+StepperTrigger.displayName = "StepperTrigger";
+var StepperIndicator = React52.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const ctx = React52.useContext(StepperContext);
+    const itemCtx = React52.useContext(StepperItemContext);
+    if (!ctx || !itemCtx) {
+      throw new Error("StepperIndicator must be used within a StepperItem inside a Stepper");
+    }
+    const isCompleted = ctx.completedSteps.includes(itemCtx.value) || itemCtx.value < ctx.activeStep;
+    const isActive = ctx.activeStep === itemCtx.value;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "flex h-9 w-9 shrink-0 items-center justify-center rounded-full border text-sm font-semibold transition-all duration-200",
+          isCompleted ? "bg-primary border-primary text-primary-foreground" : isActive ? "border-primary text-primary bg-primary/10 ring-2 ring-primary/20" : "border-border text-muted-foreground bg-muted/40",
+          className
+        ),
+        ...props,
+        children: children ?? (isCompleted ? "\u2713" : itemCtx.value + 1)
+      }
+    );
+  }
+);
+StepperIndicator.displayName = "StepperIndicator";
+var StepperTitle = React52.forwardRef(
+  ({ className, ...props }, ref) => {
+    const ctx = React52.useContext(StepperContext);
+    const itemCtx = React52.useContext(StepperItemContext);
+    if (!ctx || !itemCtx) {
+      throw new Error("StepperTitle must be used within a StepperItem inside a Stepper");
+    }
+    const isActive = ctx.activeStep === itemCtx.value;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "text-sm font-medium transition-colors duration-200",
+          isActive ? "text-foreground font-semibold" : "text-muted-foreground",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+StepperTitle.displayName = "StepperTitle";
+var StepperDescription = React52.forwardRef(
+  ({ className, ...props }, ref) => {
+    const itemCtx = React52.useContext(StepperItemContext);
+    if (!itemCtx) throw new Error("StepperDescription must be used within a StepperItem");
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn("text-xs text-muted-foreground text-left block", className),
+        ...props
+      }
+    );
+  }
+);
+StepperDescription.displayName = "StepperDescription";
+var AppShellBanner = React52.forwardRef(
+  ({ className, variant = "primary", closable, onClose, children, ...props }, ref) => {
+    const variantClass = {
+      primary: "bg-primary text-primary-foreground",
+      accent: "bg-secondary text-secondary-foreground",
+      muted: "bg-surface border-b border-border text-muted-foreground"
+    }[variant];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("px-4 py-2 text-sm font-medium text-center flex items-center justify-center relative z-30", variantClass, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children }),
+          closable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "p-1 rounded opacity-80 hover:opacity-100 transition-opacity ml-2 cursor-pointer",
+              "aria-label": "Close banner",
+              children: /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AppShellBanner.displayName = "AppShellBanner";
+var AppShellHeader = React52.forwardRef(
+  ({
+    className,
+    variant = "glass",
+    position = "sticky",
+    bordered = true,
+    children,
+    mobileNav,
+    ...props
+  }, ref) => {
+    const [mobileOpen, setMobileOpen] = React52.useState(false);
+    React52.useEffect(() => {
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape" && mobileOpen) {
+          setMobileOpen(false);
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [mobileOpen]);
+    const positionClass = {
+      sticky: "sticky top-0 z-40",
+      fixed: "fixed top-0 left-0 right-0 z-40",
+      static: "relative z-40"
+    }[position];
+    const variantClass = {
+      glass: "bg-surface/80 backdrop-blur-md text-foreground",
+      solid: "bg-surface text-foreground",
+      transparent: "bg-transparent text-foreground"
+    }[variant];
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "header",
+        {
+          ref,
+          className: cn(
+            "w-full transition-colors",
+            positionClass,
+            variantClass,
+            bordered && "border-b border-border/60",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-4", children: [
+            mobileNav && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setMobileOpen(true),
+                className: "md:hidden p-2 -ml-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer",
+                "aria-label": "Open navigation",
+                children: /* @__PURE__ */ jsxs("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+                  /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+                  /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+                ] })
+              }
+            ),
+            children
+          ] })
+        }
+      ),
+      mobileNav && mobileOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 md:hidden flex", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            onClick: () => setMobileOpen(false),
+            className: "fixed inset-0 bg-overlay backdrop-blur-[2px] transition-opacity duration-300"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "Mobile Navigation",
+            className: "relative z-10 w-72 h-full bg-surface border-r border-border flex flex-col shadow-kj-lg",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-border", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-bold uppercase tracking-wider text-muted-foreground", children: "Navigation" }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setMobileOpen(false),
+                    className: "p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer",
+                    "aria-label": "Close navigation",
+                    children: /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: mobileNav })
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+AppShellHeader.displayName = "AppShellHeader";
+var AppShellMain = React52.forwardRef(
+  ({ className, width = "default", padded = true, children, ...props }, ref) => {
+    const widthClass = {
+      default: "max-w-7xl mx-auto w-full",
+      narrow: "max-w-5xl mx-auto w-full",
+      wide: "max-w-screen-2xl mx-auto w-full",
+      full: "max-w-none w-full"
+    }[width];
+    return /* @__PURE__ */ jsx(
+      "main",
+      {
+        ref,
+        className: cn("flex-1", padded && "px-4 sm:px-6 lg:px-8 py-8 md:py-12", widthClass, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+AppShellMain.displayName = "AppShellMain";
+var AppShellFooter = React52.forwardRef(
+  ({ className, bordered = true, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "footer",
+      {
+        ref,
+        className: cn(
+          "w-full bg-surface text-foreground py-12 mt-auto",
+          bordered && "border-t border-border",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children })
+      }
+    );
+  }
+);
+AppShellFooter.displayName = "AppShellFooter";
+var AppShell = React52.forwardRef(
+  ({
+    className,
+    banner,
+    header,
+    children,
+    footer,
+    contentWidth = "default",
+    headerPosition = "sticky",
+    headerVariant = "glass",
+    paddedContent = true,
+    mobileNav,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("min-h-screen bg-canvas text-foreground flex flex-col antialiased", className),
+        ...props,
+        children: [
+          banner && /* @__PURE__ */ jsx(AppShellBanner, { children: banner }),
+          header && /* @__PURE__ */ jsx(AppShellHeader, { variant: headerVariant, position: headerPosition, mobileNav, children: header }),
+          /* @__PURE__ */ jsx(AppShellMain, { width: contentWidth, padded: paddedContent, children }),
+          footer && /* @__PURE__ */ jsx(AppShellFooter, { children: footer })
+        ]
+      }
+    );
+  }
+);
+AppShell.displayName = "AppShell";
+AppShell.Banner = AppShellBanner;
+AppShell.Header = AppShellHeader;
+AppShell.Main = AppShellMain;
+AppShell.Footer = AppShellFooter;
+var sizeClasses = {
+  sm: { wrapper: "kj-rating-sm gap-1", star: "w-4 h-4", text: "text-xs" },
+  md: { wrapper: "kj-rating-md gap-1.5", star: "w-5 h-5", text: "text-sm" },
+  lg: { wrapper: "kj-rating-lg gap-2", star: "w-6 h-6", text: "text-base" },
+  xl: { wrapper: "kj-rating-xl gap-2.5", star: "w-8 h-8", text: "text-lg" }
+};
+var iconPaths = {
+  star: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+  heart: "M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z",
+  flame: "M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z",
+  shield: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67 0C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z",
+  thumb: "M7 10v12M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"
+};
+function roundToPrecision(value, precision) {
+  const inv = 1 / precision;
+  return Math.round(value * inv) / inv;
+}
+function isCssColor(str) {
+  return str.startsWith("#") || str.startsWith("rgb") || str.startsWith("hsl");
+}
+var Rating = React52.forwardRef(
+  ({
+    value: controlledValue,
+    defaultValue = 0,
+    max = 5,
+    precision = 1,
+    size = "md",
+    icon = "star",
+    color = "#f59e0b",
+    emptyColor = "#e5e7eb",
+    allowClear = true,
+    disabled = false,
+    readOnly = false,
+    hoverPreview = true,
+    showValue = false,
+    showCount = false,
+    count,
+    name,
+    onChange,
+    onHoverChange,
+    className,
+    onKeyDown,
+    onMouseLeave,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const isControlled = controlledValue !== void 0;
+    const [internalValue, setInternalValue] = React52.useState(
+      controlledValue ?? defaultValue
+    );
+    const [hoverValue, setHoverValue] = React52.useState(null);
+    const instanceId = React52.useId();
+    React52.useEffect(() => {
+      if (isControlled) {
+        setInternalValue(controlledValue);
+      }
+    }, [isControlled, controlledValue]);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const displayValue = hoverPreview && hoverValue !== null ? hoverValue : currentValue;
+    const handleValueChange = (newValue) => {
+      if (disabled || readOnly) return;
+      const clamped = Math.max(0, Math.min(max, roundToPrecision(newValue, precision)));
+      if (!isControlled) {
+        setInternalValue(clamped);
+      }
+      onChange?.(clamped);
+    };
+    const getEventValue = (e, starIndex) => {
+      const target = e.currentTarget;
+      const width = target.offsetWidth;
+      const nativeEv = e.nativeEvent;
+      const offsetX = nativeEv?.offsetX ?? nativeEv?.nativeEvent?.offsetX ?? e.offsetX;
+      if (width > 0 && offsetX !== void 0 && offsetX !== null) {
+        const ratio = Math.max(1e-3, Math.min(1, offsetX / width));
+        const stepInStar = Math.ceil(ratio / precision) * precision;
+        return Math.min(max, Math.max(precision, starIndex - 1 + stepInStar));
+      }
+      return starIndex;
+    };
+    const handleStarClick = (e, starIndex) => {
+      if (disabled || readOnly) return;
+      const targetValue = getEventValue(e, starIndex);
+      let nextValue = targetValue;
+      if (allowClear && targetValue === currentValue) {
+        nextValue = 0;
+      }
+      handleValueChange(nextValue);
+    };
+    const handleStarMouseMove = (e, starIndex) => {
+      if (disabled || readOnly) return;
+      if (hoverPreview) {
+        const hoveredVal = getEventValue(e, starIndex);
+        setHoverValue(hoveredVal);
+        onHoverChange?.(hoveredVal);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (disabled || readOnly) {
+        onKeyDown?.(e);
+        return;
+      }
+      let nextVal = null;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          nextVal = Math.min(max, currentValue + precision);
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          nextVal = Math.max(0, currentValue - precision);
+          break;
+        case "Home":
+          nextVal = 0;
+          break;
+        case "End":
+          nextVal = max;
+          break;
+      }
+      if (nextVal !== null) {
+        e.preventDefault();
+        handleValueChange(nextVal);
+      }
+      onKeyDown?.(e);
+    };
+    const handleContainerMouseLeave = (e) => {
+      if (hoverPreview) {
+        setHoverValue(null);
+        onHoverChange?.(null);
+      }
+      onMouseLeave?.(e);
+    };
+    const sizing = sizeClasses[size] || sizeClasses.md;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: readOnly ? "img" : "radiogroup",
+        tabIndex: disabled || readOnly ? -1 : 0,
+        "aria-valuenow": displayValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-disabled": disabled || void 0,
+        "aria-readonly": readOnly || void 0,
+        "aria-label": ariaLabel || (readOnly ? `Rated ${displayValue} out of ${max}` : "Rating"),
+        onKeyDown: handleKeyDown,
+        onMouseLeave: handleContainerMouseLeave,
+        className: cn(
+          "inline-flex items-center select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md",
+          disabled && "opacity-50 cursor-not-allowed",
+          readOnly && "cursor-default",
+          !disabled && !readOnly && "cursor-pointer",
+          sizing.wrapper,
+          className
+        ),
+        ...props,
+        children: [
+          name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: currentValue }),
+          /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-0.5", children: Array.from({ length: max }, (_, index) => {
+            const starIndex = index + 1;
+            const fillFraction = Math.max(
+              0,
+              Math.min(1, displayValue - index)
+            );
+            const gradientId = `rating-grad-${instanceId}-${index}-${Math.round(
+              fillFraction * 100
+            )}`;
+            const CustomIconComponent = typeof icon === "function" || typeof icon === "object" ? icon : null;
+            const builtInIconType = typeof icon === "string" ? icon : "star";
+            const pathD = iconPaths[builtInIconType] || iconPaths.star;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                "data-testid": "rating-star",
+                role: readOnly ? void 0 : "radio",
+                "aria-checked": readOnly ? void 0 : displayValue >= starIndex,
+                "aria-label": `${starIndex} of ${max} stars`,
+                disabled,
+                onClick: (e) => handleStarClick(e, starIndex),
+                onMouseMove: (e) => handleStarMouseMove(e, starIndex),
+                onMouseEnter: (e) => handleStarMouseMove(e, starIndex),
+                className: cn(
+                  "p-0.5 focus:outline-none transition-transform active:scale-95 disabled:scale-100",
+                  sizing.star
+                ),
+                children: CustomIconComponent ? /* @__PURE__ */ jsx(
+                  CustomIconComponent,
+                  {
+                    className: cn(
+                      "w-full h-full",
+                      fillFraction >= 0.5 ? !isCssColor(color) && color : !isCssColor(emptyColor) && emptyColor
+                    )
+                  }
+                ) : /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    className: "w-full h-full",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: [
+                      fillFraction > 0 && fillFraction < 1 && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+                        "linearGradient",
+                        {
+                          id: gradientId,
+                          x1: "0%",
+                          y1: "0%",
+                          x2: "100%",
+                          y2: "0%",
+                          children: [
+                            isCssColor(color) ? /* @__PURE__ */ jsx(
+                              "stop",
+                              {
+                                offset: `${fillFraction * 100}%`,
+                                stopColor: color
+                              }
+                            ) : /* @__PURE__ */ jsx(
+                              "stop",
+                              {
+                                offset: `${fillFraction * 100}%`,
+                                stopColor: "currentColor",
+                                className: color
+                              }
+                            ),
+                            isCssColor(emptyColor) ? /* @__PURE__ */ jsx(
+                              "stop",
+                              {
+                                offset: `${fillFraction * 100}%`,
+                                stopColor: emptyColor
+                              }
+                            ) : /* @__PURE__ */ jsx(
+                              "stop",
+                              {
+                                offset: `${fillFraction * 100}%`,
+                                stopColor: "currentColor",
+                                className: emptyColor
+                              }
+                            )
+                          ]
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: pathD,
+                          fill: fillFraction === 1 ? isCssColor(color) ? color : void 0 : fillFraction === 0 ? isCssColor(emptyColor) ? emptyColor : void 0 : `url(#${gradientId})`,
+                          className: fillFraction === 1 ? !isCssColor(color) ? color : void 0 : fillFraction === 0 ? !isCssColor(emptyColor) ? emptyColor : void 0 : void 0,
+                          stroke: "none"
+                        }
+                      )
+                    ]
+                  }
+                )
+              },
+              index
+            );
+          }) }),
+          showValue && /* @__PURE__ */ jsx("span", { className: cn("font-medium text-foreground ml-1.5", sizing.text), children: displayValue }),
+          showCount && count !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn("text-muted-foreground ml-1", sizing.text), children: [
+            "(",
+            count,
+            ")"
+          ] })
+        ]
+      }
+    );
+  }
+);
+Rating.displayName = "Rating";
+var RatingField = React52.forwardRef(
+  ({
+    id: customId,
+    label,
+    helperText,
+    errorMessage,
+    required,
+    className,
+    containerClassName,
+    "aria-describedby": ariaDescribedBy,
+    ...ratingProps
+  }, ref) => {
+    const generatedId = React52.useId();
+    const id = customId || generatedId;
+    const helperId = helperText ? `${id}-helper` : void 0;
+    const errorId = errorMessage ? `${id}-error` : void 0;
+    const describedBy = [ariaDescribedBy, helperId, errorId].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", containerClassName), children: [
+      label && /* @__PURE__ */ jsx(Label, { htmlFor: id, required, children: label }),
+      /* @__PURE__ */ jsx(
+        Rating,
+        {
+          ref,
+          id,
+          className,
+          "aria-describedby": describedBy,
+          ...ratingProps
+        }
+      ),
+      helperText && /* @__PURE__ */ jsx(Hint, { id: helperId, children: helperText }),
+      errorMessage && /* @__PURE__ */ jsx(Hint, { id: errorId, error: true, children: errorMessage })
+    ] });
+  }
+);
+RatingField.displayName = "RatingField";
+var RatingSummary = React52.forwardRef(
+  ({
+    average,
+    totalCount,
+    distribution,
+    max = 5,
+    size = "md",
+    icon = "star",
+    className,
+    ...props
+  }, ref) => {
+    const formattedAverage = Number.isInteger(average) ? average.toString() : average.toFixed(1);
+    const formattedTotalCount = totalCount.toLocaleString();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex flex-col gap-6 sm:flex-row sm:items-center sm:gap-8 p-4 rounded-xl border bg-card text-card-foreground shadow-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center p-4 rounded-lg bg-muted/40 text-center min-w-[140px]", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-4xl font-bold tracking-tight text-foreground", children: formattedAverage }),
+            /* @__PURE__ */ jsx("div", { className: "my-1.5", children: /* @__PURE__ */ jsx(
+              Rating,
+              {
+                value: average,
+                max,
+                size,
+                icon,
+                readOnly: true,
+                allowClear: false,
+                hoverPreview: false
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+              formattedTotalCount,
+              " total ratings"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col gap-2.5", children: distribution.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-sm", children: [
+            /* @__PURE__ */ jsxs("span", { className: "w-12 text-right font-medium text-foreground whitespace-nowrap", children: [
+              item.stars,
+              " star"
+            ] }),
+            /* @__PURE__ */ jsx(
+              Progress,
+              {
+                value: item.percentage,
+                "aria-label": `${item.stars} star ratings: ${item.percentage}%`,
+                className: "h-2.5 flex-1"
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "w-12 text-right text-xs text-muted-foreground font-mono", children: [
+              item.percentage,
+              "%"
+            ] })
+          ] }, item.stars)) })
+        ]
+      }
+    );
+  }
+);
+RatingSummary.displayName = "RatingSummary";
+var PricingCard = React52.forwardRef(
+  ({
+    className,
+    name,
+    price,
+    period,
+    description,
+    features = [],
+    variant,
+    badge,
+    popular = false,
+    ctaText = "Get Started",
+    onCtaClick,
+    ctaHref,
+    cta,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const resolvedVariant = variant || (popular ? "featured" : "default");
+    const displayBadge = badge || (popular ? "Most Popular" : void 0);
+    const isFeatured = resolvedVariant === "featured";
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        ref,
+        className: cn(
+          "relative flex flex-col p-6 transition-all duration-300",
+          isFeatured ? "border-amber-500/80 shadow-kj-lg ring-1 ring-amber-500/30" : resolvedVariant === "outline" ? "border-border/80 bg-transparent shadow-none" : "border-border shadow-kj-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold tracking-tight text-foreground", children: name }),
+              description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: description })
+            ] }),
+            displayBadge && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-amber-500 px-3 py-0.5 text-[0.7rem] font-bold uppercase tracking-wider text-black shadow-sm shrink-0 mt-0.5", children: displayBadge })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-baseline gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-3xl font-extrabold tracking-tight text-foreground", children: price }),
+            period && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: period })
+          ] }),
+          features.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mb-6 flex flex-1 flex-col gap-2.5 p-0 text-xs list-none", children: features.map((feature, idx) => {
+            const text = typeof feature === "string" ? feature : feature.text;
+            const included = typeof feature === "string" ? true : feature.included ?? true;
+            return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2.5", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[0.65rem] font-bold",
+                    included ? "bg-amber-500/15 text-amber-600 dark:text-amber-400" : "bg-muted text-muted-foreground/60"
+                  ),
+                  children: included ? "\u2713" : "\u2715"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: cn(included ? "text-foreground" : "text-muted-foreground line-through opacity-70"), children: text })
+            ] }, idx);
+          }) }),
+          /* @__PURE__ */ jsx("div", { className: "mt-auto pt-2", children: cta ? cta : ctaHref ? (
+            /* eslint-disable-next-line jsx-a11y/anchor-is-valid */
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: disabled ? void 0 : ctaHref,
+                "aria-disabled": disabled || void 0,
+                tabIndex: disabled ? -1 : void 0,
+                className: cn(
+                  buttonVariants({ variant: isFeatured ? "primary" : "outline" }),
+                  "w-full justify-center",
+                  disabled && "pointer-events-none opacity-50"
+                ),
+                children: ctaText
+              }
+            )
+          ) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: isFeatured ? "primary" : "outline",
+              className: "w-full justify-center",
+              onClick: onCtaClick,
+              disabled,
+              children: ctaText
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+PricingCard.displayName = "PricingCard";
+var BlogCard = React52.forwardRef(
+  ({
+    className,
+    title,
+    description,
+    coverUrl,
+    coverAlt,
+    category,
+    readTime,
+    publishedAt,
+    author,
+    orientation = "vertical",
+    href,
+    ...props
+  }, ref) => {
+    const isHorizontal = orientation === "horizontal";
+    const isInteractive = Boolean(href || props.onClick);
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        ref,
+        as: href ? "a" : "div",
+        href,
+        interactive: isInteractive,
+        className: cn(
+          "group flex overflow-hidden transition-all duration-300",
+          isHorizontal ? "flex-col sm:flex-row" : "flex-col",
+          className
+        ),
+        ...props,
+        children: [
+          coverUrl && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "relative overflow-hidden bg-muted shrink-0",
+                isHorizontal ? "w-full sm:w-2/5 min-h-[160px]" : "w-full aspect-[16/9]"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: coverUrl,
+                  alt: coverAlt || title,
+                  className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col justify-between p-5", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2 text-[0.75rem] text-muted-foreground", children: [
+                category && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: category }),
+                (readTime || publishedAt) && /* @__PURE__ */ jsxs("span", { children: [
+                  publishedAt,
+                  " ",
+                  publishedAt && readTime && "\u2022",
+                  " ",
+                  readTime
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx("h3", { className: "text-base font-bold tracking-tight text-foreground transition-colors group-hover:text-primary", children: title }),
+              description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-muted-foreground line-clamp-2", children: description })
+            ] }),
+            author && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2.5 border-t border-border/60 pt-3", children: [
+              /* @__PURE__ */ jsx(Avatar, { src: author.avatarUrl, alt: author.name, size: "sm", children: author.name.charAt(0) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col text-xs", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: author.name }),
+                author.role && /* @__PURE__ */ jsx("span", { className: "text-[0.7rem] text-muted-foreground", children: author.role })
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+BlogCard.displayName = "BlogCard";
+var ProjectCard = React52.forwardRef(
+  ({
+    className,
+    title,
+    description,
+    status,
+    techStack = [],
+    metrics = [],
+    updatedAt,
+    actions,
+    href,
+    ...props
+  }, ref) => {
+    const isInteractive = Boolean(href || props.onClick);
+    return /* @__PURE__ */ jsxs(
+      Card,
+      {
+        ref,
+        as: href ? "a" : "div",
+        href,
+        interactive: isInteractive,
+        className: cn(
+          "group flex flex-col justify-between p-5 transition-all duration-300",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-base font-bold tracking-tight text-foreground transition-colors group-hover:text-primary", children: title }),
+              status && /* @__PURE__ */ jsx(Badge, { variant: status.variant || "neutral", className: "shrink-0 text-[0.65rem]", children: status.label })
+            ] }),
+            description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-muted-foreground line-clamp-2", children: description }),
+            techStack.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3.5 flex flex-wrap gap-1.5", children: techStack.map((tech) => /* @__PURE__ */ jsx(Badge, { variant: "neutral", className: "text-[0.65rem] py-0 px-2 font-mono", children: tech }, tech)) })
+          ] }),
+          (metrics.length > 0 || updatedAt || actions) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between border-t border-border/60 pt-3 text-[0.75rem] text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              metrics.map((metric, idx) => /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "flex items-center gap-1 font-mono font-medium",
+                  children: [
+                    metric.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: metric.icon }),
+                    /* @__PURE__ */ jsx("span", { children: metric.value }),
+                    metric.label && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70", children: metric.label })
+                  ]
+                },
+                metric.label ? `${metric.label}-${idx}` : idx
+              )),
+              updatedAt && /* @__PURE__ */ jsx("span", { children: updatedAt })
+            ] }),
+            actions && /* @__PURE__ */ jsx(
+              "div",
+              {
+                onClick: (e) => e.stopPropagation(),
+                className: "flex items-center gap-1 shrink-0",
+                children: actions
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+ProjectCard.displayName = "ProjectCard";
+function formatRelativeTime(date) {
+  const d = typeof date === "string" ? new Date(date) : date;
+  if (isNaN(d.getTime())) return "";
+  const diffMs = Date.now() - d.getTime();
+  const diffMin = Math.floor(diffMs / 6e4);
+  const diffH = Math.floor(diffMs / 36e5);
+  const diffD = Math.floor(diffMs / 864e5);
+  if (diffMin < 1) return "Just now";
+  if (diffMin < 60) return `${diffMin} min ago`;
+  if (diffH < 24) return diffH === 1 ? "1 hour ago" : `${diffH} hours ago`;
+  if (diffD === 1) return "Yesterday";
+  if (diffD < 7) return `${diffD} days ago`;
+  return d.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
+function useInboxState(initial) {
+  const [items, setItems] = React52.useState(initial);
+  const unreadCount = items.filter((i) => !i.read).length;
+  const markRead = React52.useCallback((id) => {
+    setItems(
+      (prev) => prev.map((item) => item.id === id ? { ...item, read: true } : item)
+    );
+  }, []);
+  const markAllRead = React52.useCallback(() => {
+    setItems((prev) => prev.map((item) => ({ ...item, read: true })));
+  }, []);
+  const dismiss = React52.useCallback((id) => {
+    setItems((prev) => prev.filter((item) => item.id !== id));
+  }, []);
+  return { items, unreadCount, markRead, markAllRead, dismiss };
+}
+var InboxContext = React52.createContext(null);
+function useInboxContext(part) {
+  const ctx = React52.useContext(InboxContext);
+  if (!ctx) throw new Error(`${part} must be used inside <InboxPopover>`);
+  return ctx;
+}
+function InboxPopover({
+  children,
+  className,
+  open: openProp,
+  onOpenChange
+}) {
+  const [openState, setOpenState] = React52.useState(false);
+  const controlled = openProp !== void 0;
+  const open = controlled ? openProp : openState;
+  const triggerRef = React52.useRef(null);
+  const ref = React52.useRef(null);
+  const setOpen = React52.useCallback(
+    (v) => {
+      if (!controlled) setOpenState(v);
+      onOpenChange?.(v);
+    },
+    [controlled, onOpenChange]
+  );
+  React52.useEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+    };
+    const onEsc = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onEsc);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onEsc);
+    };
+  }, [open, setOpen]);
+  const ctxValue = React52.useMemo(() => ({ open, setOpen, triggerRef }), [open, setOpen]);
+  return /* @__PURE__ */ jsx(InboxContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn("relative inline-block", className), children }) });
+}
+function InboxTrigger({
+  unreadCount,
+  label = "Notifications",
+  className,
+  onClick,
+  ...props
+}) {
+  const ctx = useInboxContext("InboxTrigger");
+  const setRef = (node) => {
+    ctx.triggerRef.current = node;
+  };
+  const displayCount = unreadCount == null || unreadCount <= 0 ? null : unreadCount > 99 ? "99+" : String(unreadCount);
+  const defaultLabel = displayCount ? `${label} (${displayCount} unread)` : label;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: setRef,
+      type: "button",
+      "aria-label": defaultLabel,
+      "aria-haspopup": "dialog",
+      "aria-expanded": ctx.open,
+      className: cn(
+        "relative inline-flex items-center justify-center w-9 h-9 rounded-full",
+        "bg-surface border border-border text-muted-foreground",
+        "hover:bg-muted hover:text-foreground transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        className
+      ),
+      onClick: (e) => {
+        ctx.setOpen(!ctx.open);
+        onClick?.(e);
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: 16,
+            height: 16,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
+              /* @__PURE__ */ jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
+            ]
+          }
+        ),
+        displayCount != null && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute -top-0.5 -right-0.5 min-w-[16px] h-4 px-1",
+              "rounded-full bg-primary text-primary-foreground",
+              "text-[9px] font-bold leading-4 flex items-center justify-center"
+            ),
+            children: displayCount
+          }
+        )
+      ]
+    }
+  );
+}
+function NotificationItem({ item, onDismiss, className }) {
+  const leadingSlot = item.avatarSrc ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: item.avatarSrc,
+      alt: item.avatarFallback ?? "",
+      className: "w-7 h-7 rounded-full object-cover flex-shrink-0"
+    }
+  ) : item.avatarFallback ? /* @__PURE__ */ jsx("span", { className: "w-7 h-7 rounded-full bg-primary/20 text-primary text-[10px] font-bold flex items-center justify-center flex-shrink-0 select-none", children: item.avatarFallback }) : item.icon ? /* @__PURE__ */ jsx("span", { className: "w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 text-primary", children: item.icon }) : null;
+  const textBlock = /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+    /* @__PURE__ */ jsx("p", { className: cn("text-sm leading-snug", item.read ? "text-muted-foreground" : "text-foreground"), children: item.title }),
+    item.body && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 truncate", children: item.body }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1", children: formatRelativeTime(item.timestamp) })
+  ] });
+  const sharedClass = cn(
+    "group relative flex items-start gap-2.5 px-3.5 py-2.5 w-full text-left",
+    "border-b border-border last:border-0",
+    !item.read && "bg-primary/[0.04]",
+    "hover:bg-muted/50 transition-colors",
+    className
+  );
+  const mainContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leadingSlot,
+    textBlock
+  ] });
+  const mainAction = item.href ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: item.href,
+      onClick: () => item.onClick?.(item.id),
+      className: "flex-1 flex items-start gap-2.5 min-w-0 text-left outline-none",
+      children: mainContent
+    }
+  ) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => item.onClick?.(item.id),
+      className: "flex-1 flex items-start gap-2.5 min-w-0 text-left outline-none",
+      children: mainContent
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: sharedClass, children: [
+    mainAction,
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 flex-shrink-0 mt-0.5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Dismiss",
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onDismiss?.(item.id);
+          },
+          className: cn(
+            "text-muted-foreground hover:text-foreground transition-colors",
+            "opacity-0 group-hover:opacity-100 focus:opacity-100",
+            "text-base leading-none p-0.5 rounded"
+          ),
+          children: "\xD7"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-label": item.read ? void 0 : "Unread",
+          "aria-hidden": item.read ? true : void 0,
+          className: cn(
+            "w-[7px] h-[7px] rounded-full flex-shrink-0 mt-1",
+            item.read ? "border border-border" : "bg-primary"
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function InboxContent({
+  items,
+  onMarkAllRead,
+  onDismiss,
+  viewAllHref,
+  viewAllLabel = "View all notifications",
+  emptyState,
+  width = 360,
+  maxHeight = 320,
+  className
+}) {
+  const ctx = useInboxContext("InboxContent");
+  const ref = React52.useRef(null);
+  React52.useEffect(() => {
+    if (ctx.open) ref.current?.focus();
+  }, [ctx.open]);
+  if (!ctx.open) return null;
+  const allRead = items.length === 0 || items.every((i) => i.read);
+  const defaultEmptyState = /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-10 px-5 text-center", children: [
+    /* @__PURE__ */ jsx("span", { className: "w-10 h-10 rounded-full bg-muted flex items-center justify-center mb-3 text-muted-foreground", children: /* @__PURE__ */ jsxs("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
+      /* @__PURE__ */ jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
+    ] }) }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "All caught up" }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "No new notifications" })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "dialog",
+      "aria-label": "Notifications",
+      tabIndex: -1,
+      style: { width },
+      className: cn(
+        "absolute right-0 top-[calc(100%+6px)] z-40",
+        "bg-surface border border-border rounded-kj-md shadow-kj-lg outline-none",
+        "animate-[kjpop_.12s_ease]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3.5 py-2.5 border-b border-border", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: "Notifications" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: allRead,
+              "aria-disabled": allRead,
+              onClick: allRead ? void 0 : onMarkAllRead,
+              className: cn(
+                "text-xs font-medium transition-colors",
+                allRead ? "text-muted-foreground cursor-not-allowed" : "text-primary hover:text-primary/80"
+              ),
+              children: "Mark all read"
+            }
+          )
+        ] }),
+        items.length === 0 ? emptyState ?? defaultEmptyState : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "overflow-y-auto",
+            style: { maxHeight },
+            children: items.map((item) => /* @__PURE__ */ jsx(
+              NotificationItem,
+              {
+                item,
+                onDismiss
+              },
+              item.id
+            ))
+          }
+        ),
+        items.length > 0 && viewAllHref && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-3.5 py-2.5 text-center", children: /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: viewAllHref,
+            className: "text-xs font-medium text-primary hover:text-primary/80 transition-colors",
+            children: [
+              viewAllLabel,
+              " \u2192"
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+var DEFAULT_COLOR_SWATCHES = [
+  "#EF4444",
+  // Red
+  "#F97316",
+  // Orange
+  "#F59E0B",
+  // Amber
+  "#10B981",
+  // Emerald
+  "#14B8A6",
+  // Teal
+  "#06B6D4",
+  // Sky
+  "#3B82F6",
+  // Blue
+  "#6366F1",
+  // Indigo
+  "#8B5CF6",
+  // Purple
+  "#EC4899",
+  // Pink
+  "#64748B",
+  // Slate
+  "#1E293B"
+  // Charcoal
+];
+function isValidHex(hex) {
+  const trimmed = hex.trim();
+  const clean = trimmed.startsWith("#") ? trimmed.slice(1) : trimmed;
+  return /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(clean);
+}
+function normalizeHex(hex) {
+  let clean = hex.trim();
+  if (!clean.startsWith("#")) clean = `#${clean}`;
+  if (/^#[0-9A-Fa-f]{3}$/.test(clean)) {
+    clean = `#${clean[1]}${clean[1]}${clean[2]}${clean[2]}${clean[3]}${clean[3]}`;
+  }
+  return clean.toUpperCase();
+}
+function hexToHsl(hex) {
+  if (!isValidHex(hex)) return { h: 0, s: 0, l: 0 };
+  const normalized = normalizeHex(hex);
+  const r = parseInt(normalized.slice(1, 3), 16) / 255;
+  const g = parseInt(normalized.slice(3, 5), 16) / 255;
+  const b = parseInt(normalized.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+}
+function hslToHex(h, s, l) {
+  const normalizedH = (h % 360 + 360) % 360;
+  const sPct = s / 100;
+  const lPct = l / 100;
+  const c = (1 - Math.abs(2 * lPct - 1)) * sPct;
+  const x = c * (1 - Math.abs(normalizedH / 60 % 2 - 1));
+  const m = lPct - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (0 <= normalizedH && normalizedH < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (60 <= normalizedH && normalizedH < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (120 <= normalizedH && normalizedH < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (180 <= normalizedH && normalizedH < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (240 <= normalizedH && normalizedH < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else if (300 <= normalizedH && normalizedH < 360) {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  const toHex = (n) => {
+    const hex = Math.round((n + m) * 255).toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+}
+var ColorPickerSwatch = React52.forwardRef(({ color, selected = false, size = "md", className, style, ...props }, ref) => {
+  const sizeClasses2 = {
+    sm: "w-5 h-5",
+    md: "w-7 h-7",
+    lg: "w-9 h-9"
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-pressed": selected,
+      style: { backgroundColor: color, ...style },
+      className: cn(
+        "relative shrink-0 rounded-full border border-border/50 shadow-sm transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary flex items-center justify-center text-white text-xs font-bold",
+        sizeClasses2[size],
+        selected && "ring-2 ring-primary ring-offset-2 ring-offset-surface",
+        className
+      ),
+      ...props,
+      children: selected && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2713" })
+    }
+  );
+});
+ColorPickerSwatch.displayName = "ColorPickerSwatch";
+var ColorPicker = React52.forwardRef(
+  ({
+    value,
+    defaultValue = "#3B82F6",
+    onChange,
+    swatches = DEFAULT_COLOR_SWATCHES,
+    disabled = false,
+    showHexInput = true,
+    className,
+    ...props
+  }, ref) => {
+    const isControlled = value !== void 0;
+    const [localColor, setLocalColor] = React52.useState(
+      normalizeHex(defaultValue)
+    );
+    const color = isControlled ? normalizeHex(value) : localColor;
+    const [hexInputValue, setHexInputValue] = React52.useState(color);
+    React52.useEffect(() => {
+      setHexInputValue(color);
+    }, [color]);
+    const handleColorChange = React52.useCallback(
+      (newHex) => {
+        const normalized = normalizeHex(newHex);
+        if (!isControlled) {
+          setLocalColor(normalized);
+        }
+        onChange?.(normalized);
+      },
+      [isControlled, onChange]
+    );
+    const hsl = React52.useMemo(() => hexToHsl(color), [color]);
+    const handleHueChange = (e) => {
+      const h = Number(e.target.value);
+      const s = hsl.s === 0 ? 100 : hsl.s;
+      const l = hsl.s === 0 ? 50 : hsl.l;
+      const newHex = hslToHex(h, s, l);
+      handleColorChange(newHex);
+    };
+    const handleHexSubmit = () => {
+      if (isValidHex(hexInputValue)) {
+        handleColorChange(hexInputValue);
+      } else {
+        setHexInputValue(color);
+      }
+    };
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("inline-block", className), ...props, children: /* @__PURE__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled,
+          "aria-label": `Select color, current ${color}`,
+          className: cn(
+            "inline-flex items-center gap-2.5 px-3 py-1.5 rounded-kj-md border border-border bg-surface text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: { backgroundColor: color },
+                className: "w-5 h-5 rounded-full border border-border/50 shadow-sm shrink-0"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-xs uppercase", children: color }),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: 12,
+                height: 12,
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2,
+                className: "text-muted-foreground ml-auto",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(PopoverContent, { side: "bottom", align: "start", className: "w-64 p-3.5 space-y-3.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-2 rounded-kj-md bg-muted/40 border border-border", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: { backgroundColor: color },
+              className: "w-8 h-8 rounded-full border border-border/50 shadow-sm shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Selected Color" }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-bold text-foreground uppercase", children: color })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-muted-foreground", children: "Preset Swatches" }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-6 gap-2", children: swatches.map((swatch) => {
+            const normalizedSwatch = normalizeHex(swatch);
+            return /* @__PURE__ */ jsx(
+              ColorPickerSwatch,
+              {
+                color: swatch,
+                selected: normalizedSwatch === color,
+                "aria-label": `Select color ${swatch}`,
+                onClick: () => handleColorChange(swatch)
+              },
+              swatch
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-muted-foreground", children: "Hue" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "range",
+              min: 0,
+              max: 360,
+              value: hsl.h,
+              onChange: handleHueChange,
+              "aria-label": "Hue slider",
+              className: "w-full h-3 rounded-full appearance-none cursor-pointer",
+              style: {
+                background: "linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)"
+              }
+            }
+          )
+        ] }),
+        showHexInput && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-muted-foreground", children: "Hex Code" }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              "aria-label": "Hex Code",
+              value: hexInputValue,
+              onChange: (e) => setHexInputValue(e.target.value),
+              onBlur: handleHexSubmit,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") handleHexSubmit();
+              },
+              placeholder: "#000000",
+              className: "flex-1 px-2.5 py-1 text-xs font-mono rounded-kj-md border border-border bg-surface text-foreground uppercase focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+            }
+          ) })
+        ] })
+      ] })
+    ] }) });
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+var ColorPickerField = React52.forwardRef(({ label, hint, error, required, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(Field, { children: [
+    label && /* @__PURE__ */ jsx(Label, { required, children: label }),
+    /* @__PURE__ */ jsx(ColorPicker, { ref, ...props }),
+    hint && /* @__PURE__ */ jsx(Hint, { children: hint }),
+    error && /* @__PURE__ */ jsx(Hint, { error: true, children: error })
+  ] });
+});
+ColorPickerField.displayName = "ColorPickerField";
+var COLUMN_CLASSES = {
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5"
+};
+var ASPECT_CLASSES = {
+  square: "aspect-square",
+  video: "aspect-video",
+  "4/3": "aspect-[4/3]",
+  auto: "aspect-auto"
+};
+function ImageGallery({
+  images = [],
+  columns = 3,
+  aspectRatio = "square",
+  maxVisible,
+  className,
+  thumbnailClassName,
+  lightboxClassName,
+  onImageClick
+}) {
+  const [selectedIndex, setSelectedIndex] = React52.useState(null);
+  const columnClass = COLUMN_CLASSES[columns] || "grid-cols-3";
+  const aspectClass = ASPECT_CLASSES[aspectRatio] || (aspectRatio.startsWith("aspect-") ? aspectRatio : `aspect-[${aspectRatio}]`);
+  const hasMaxVisible = typeof maxVisible === "number" && maxVisible > 0 && images.length > maxVisible;
+  const visibleImages = hasMaxVisible ? images.slice(0, maxVisible) : images;
+  const remainingCount = hasMaxVisible ? images.length - maxVisible + 1 : 0;
+  const handleThumbnailClick = (index) => {
+    setSelectedIndex(index);
+    if (onImageClick) {
+      onImageClick(index);
+    }
+  };
+  const handleClose = React52.useCallback(() => {
+    setSelectedIndex(null);
+  }, []);
+  const handleNext = React52.useCallback(() => {
+    setSelectedIndex((prev) => prev === null ? null : (prev + 1) % images.length);
+  }, [images.length]);
+  const handlePrev = React52.useCallback(() => {
+    setSelectedIndex((prev) => prev === null ? null : (prev - 1 + images.length) % images.length);
+  }, [images.length]);
+  React52.useEffect(() => {
+    if (selectedIndex === null) return;
+    const originalOverflow = document.body.style.overflow;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        handleClose();
+      } else if (e.key === "ArrowRight") {
+        handleNext();
+      } else if (e.key === "ArrowLeft") {
+        handlePrev();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [selectedIndex, handleClose, handleNext, handlePrev]);
+  const activeImage = selectedIndex !== null ? images[selectedIndex] : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: cn("grid gap-3 w-full", columnClass, className), children: visibleImages.map((img, idx) => {
+      const isLastOverlay = hasMaxVisible && idx === maxVisible - 1;
+      const thumbSrc = img.thumbnailSrc || img.src;
+      const defaultAlt = img.alt || `Thumbnail ${idx + 1}`;
+      const buttonAriaLabel = isLastOverlay ? `View all ${images.length} images` : defaultAlt;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": buttonAriaLabel,
+          onClick: () => handleThumbnailClick(idx),
+          className: cn(
+            "relative group overflow-hidden rounded-kj-lg bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 cursor-pointer transition-all duration-200",
+            aspectClass,
+            thumbnailClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: thumbSrc,
+                alt: img.alt || `Thumbnail ${idx + 1}`,
+                className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+              }
+            ),
+            isLastOverlay && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-[2px] flex items-center justify-center text-white font-bold text-xl group-hover:bg-black/70 transition-colors", children: [
+              "+",
+              remainingCount
+            ] })
+          ]
+        },
+        idx
+      );
+    }) }),
+    selectedIndex !== null && activeImage && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Image gallery lightbox",
+        onClick: (e) => e.target === e.currentTarget && handleClose(),
+        className: cn(
+          "fixed inset-0 z-[100] bg-black/85 backdrop-blur-md flex flex-col justify-between p-4 sm:p-6 transition-opacity duration-200 animate-in fade-in-0",
+          lightboxClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full text-white z-10", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-white/80 select-none", children: [
+              selectedIndex + 1,
+              " of ",
+              images.length
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleClose,
+                "aria-label": "Close",
+                className: "p-2 rounded-full text-white/80 hover:text-white hover:bg-white/10 transition-colors cursor-pointer",
+                children: /* @__PURE__ */ jsx("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center justify-between gap-4 my-auto min-h-0 w-full", children: [
+            images.length > 1 && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handlePrev,
+                "aria-label": "Previous image",
+                className: "p-3 rounded-full text-white/80 hover:text-white hover:bg-white/10 transition-colors cursor-pointer z-10 shrink-0",
+                children: /* @__PURE__ */ jsx("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" }) })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col items-center justify-center h-full min-h-0 px-2 select-none", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: activeImage.src,
+                alt: activeImage.alt || `Image ${selectedIndex + 1}`,
+                className: "max-h-[70vh] max-w-full object-contain rounded-kj-md shadow-2xl transition-transform"
+              }
+            ) }),
+            images.length > 1 && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleNext,
+                "aria-label": "Next image",
+                className: "p-3 rounded-full text-white/80 hover:text-white hover:bg-white/10 transition-colors cursor-pointer z-10 shrink-0",
+                children: /* @__PURE__ */ jsx("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) })
+              }
+            )
+          ] }),
+          (activeImage.title || activeImage.caption) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center text-center text-white pb-2 z-10", children: [
+            activeImage.title && /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-white", children: activeImage.title }),
+            activeImage.caption && /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-white/70 max-w-lg mt-0.5", children: activeImage.caption })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, Avatar, AvatarGroup, Badge, BottomNavigation, BottomSheet, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHeader, BottomSheetTitle, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxField, CodeBlock, CommandPalette, ConfirmDialog, DashboardShell, DataTable, DetailPageLayout, Drawer, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, EmptyState, ErrorState, Fab, Field, FormField, Hint, Input, Kbd, Label, MetricCard, Modal, ModalActions, ModalDescription, ModalTitle, PageHeader, Pagination, Popover, PopoverContent, PopoverTrigger, Progress, Radio, Segmented, Select, SelectField, SettingsLayout, SidebarNav, Skeleton, Slider, Spinner, Stat, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableToolbar, TableWrap, Tabs, TabsContent, TabsList, TabsTrigger, TextField, Textarea, ToastProvider, Tooltip, badgeVariants, buttonVariants, cn, sliderThumbCSS, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AppShell, AppShellBanner, AppShellFooter, AppShellHeader, AppShellMain, Avatar, AvatarGroup, Badge, BlogCard, BottomNavigation, BottomSheet, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHeader, BottomSheetTitle, Breadcrumb, BreadcrumbItem, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxField, CodeBlock, ColorPicker, ColorPickerField, ColorPickerSwatch, Combobox, ComboboxField, CommandPalette, ConfirmDialog, DEFAULT_COLOR_SWATCHES, DashboardShell, DataTable, DatePicker, DatePickerField, DateRangePicker, DateRangePickerField, DetailPageLayout, Drawer, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Dropzone, EmptyState, ErrorState, Fab, Field, FileUpload, FileUploadField, FormField, Hint, ImageGallery, InboxContent, InboxPopover, InboxTrigger, Input, Kbd, Label, MetricCard, Modal, ModalActions, ModalDescription, ModalTitle, NotificationItem, PageHeader, Pagination, Popover, PopoverContent, PopoverTrigger, PricingCard, Progress, ProgressRing, ProgressRingField, ProjectCard, Radio, RangeCalendar, Rating, RatingField, RatingSummary, SectionHeader, Segmented, Select, SelectField, Separator, SettingsLayout, SidebarNav, Skeleton, Slider, Spinner, Stat, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperSeparator, StepperTitle, StepperTrigger, Switch, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableToolbar, TableWrap, Tabs, TabsContent, TabsList, TabsTrigger, TextField, Textarea, Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineItem, TimelineSeparator, TimelineTime, TimelineTitle, ToastProvider, ToggleGroup, Tooltip, badgeVariants, buttonVariants, cn, formatRelativeTime, hexToHsl, hslToHex, isValidHex, normalizeHex, sliderThumbCSS, useInboxState, useStepper, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map