@j3m-quantum/ui 0.4.0 → 0.7.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import * as React10 from 'react';
+import * as React8 from 'react';
 import { useMemo } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -7,7 +7,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { X, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, MinusIcon, ChevronLeftIcon, ChevronRightIcon, ArrowLeft, ArrowRight, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, ChevronRight, MoreHorizontal, MoreHorizontalIcon, SearchIcon, XIcon, GripVerticalIcon, PanelLeftIcon } from 'lucide-react';
+import { CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, MinusIcon, ChevronLeftIcon, ChevronRightIcon, ArrowLeft, ArrowRight, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, ChevronRight, MoreHorizontal, MoreHorizontalIcon, XIcon, SearchIcon, GripVerticalIcon, PanelLeftIcon } from 'lucide-react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as SliderPrimitive from '@radix-ui/react-slider';
@@ -44,8 +44,8 @@ import * as ResizablePrimitive from 'react-resizable-panels';
 // src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React10.useState(void 0);
-  React10.useEffect(() => {
+  const [isMobile, setIsMobile] = React8.useState(void 0);
+  React8.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -60,73 +60,24 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var buttonVariants = cva(
-  // Base styles - shared across all variants
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        // Primary CTA - J3M Orange
-        default: [
-          "text-[var(--color-text-on-accent)]",
-          "bg-[var(--j3m-primary-300)]",
-          "hover:bg-[var(--j3m-primary-400)]",
-          "active:bg-[var(--j3m-primary-500)]",
-          "focus-visible:ring-[var(--j3m-primary-300)]",
-          "rounded-[var(--j3m-radius-2xs)]",
-          "shadow-sm"
-        ].join(" "),
-        // Secondary - Neutral surface
-        secondary: [
-          "text-[var(--color-text-main)]",
-          "bg-[var(--j3m-neutral-200)]",
-          "hover:bg-[var(--j3m-neutral-300)]",
-          "active:bg-[var(--j3m-neutral-400)]",
-          "focus-visible:ring-[var(--j3m-neutral-400)]",
-          "rounded-[var(--j3m-radius-2xs)]"
-        ].join(" "),
-        // Outline - Border only
-        outline: [
-          "text-[var(--color-text-main)]",
-          "bg-transparent",
-          "border border-[var(--color-border-strong)]",
-          "hover:bg-[var(--j3m-neutral-200)]",
-          "active:bg-[var(--j3m-neutral-300)]",
-          "focus-visible:ring-[var(--j3m-neutral-400)]",
-          "rounded-[var(--j3m-radius-2xs)]"
-        ].join(" "),
-        // Ghost - Minimal
-        ghost: [
-          "text-[var(--color-text-muted)]",
-          "bg-transparent",
-          "hover:bg-[var(--j3m-neutral-200)]",
-          "hover:text-[var(--color-text-main)]",
-          "active:bg-[var(--j3m-neutral-300)]",
-          "focus-visible:ring-[var(--j3m-neutral-400)]",
-          "rounded-[var(--j3m-radius-2xs)]"
-        ].join(" "),
-        // Destructive - Error/danger actions
-        destructive: [
-          "text-[var(--color-text-on-accent)]",
-          "bg-[var(--j3m-red-100)]",
-          "hover:bg-[var(--j3m-red-200)]",
-          "active:bg-[var(--j3m-red-200)]",
-          "focus-visible:ring-[var(--j3m-red-100)]",
-          "rounded-[var(--j3m-radius-2xs)]",
-          "shadow-sm"
-        ].join(" "),
-        // Link - Text only
-        link: [
-          "text-[var(--j3m-primary-300)]",
-          "underline-offset-4",
-          "hover:underline",
-          "hover:text-[var(--j3m-primary-400)]"
-        ].join(" ")
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
-        sm: "h-8 px-[var(--j3m-spacing-s)] text-xs",
-        default: "h-10 px-[var(--j3m-spacing-m)] py-[var(--j3m-spacing-xs)] text-sm",
-        lg: "h-12 px-[var(--j3m-spacing-xl)] text-base",
-        icon: "h-10 w-10"
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+        "icon-sm": "h-8 w-8",
+        "icon-lg": "h-10 w-10"
       }
     },
     defaultVariants: {
@@ -135,7 +86,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React10.forwardRef(
+var Button = React8.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -234,59 +185,22 @@ function ButtonGroupSeparator({
     }
   );
 }
-var Input = React10.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "input",
-      {
-        type,
-        "data-slot": "input",
-        className: cn(
-          // Base
-          "flex h-10 w-full min-w-0 text-sm",
-          "px-[var(--j3m-spacing-s)] py-[var(--j3m-spacing-xs)]",
-          "rounded-[var(--j3m-radius-2xs)]",
-          // Colors
-          "bg-[var(--color-bg-surface)]",
-          "text-[var(--color-text-main)]",
-          "border border-[var(--color-border-subtle)]",
-          // Placeholder
-          "placeholder:text-[var(--color-text-soft)]",
-          // Focus state
-          "focus-visible:outline-none",
-          "focus-visible:ring-2",
-          "focus-visible:ring-[var(--j3m-primary-300)]",
-          "focus-visible:ring-offset-1",
-          "focus-visible:border-[var(--j3m-primary-300)]",
-          // Hover state
-          "hover:border-[var(--color-border-strong)]",
-          // Disabled state
-          "disabled:cursor-not-allowed",
-          "disabled:opacity-50",
-          "disabled:bg-[var(--color-bg-subtle)]",
-          // Error state (via aria-invalid)
-          "aria-invalid:border-[var(--j3m-red-100)]",
-          "aria-invalid:focus-visible:ring-[var(--j3m-red-100)]",
-          // File input
-          "file:border-0",
-          "file:bg-transparent",
-          "file:text-sm",
-          "file:font-medium",
-          "file:text-[var(--color-text-main)]",
-          // Selection
-          "selection:bg-[var(--j3m-primary-100)]",
-          "selection:text-[var(--color-text-main)]",
-          // Transition
-          "transition-colors duration-150",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
 function Textarea({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "textarea",
@@ -534,7 +448,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React10.useMemo(
+  const _values = React8.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -820,7 +734,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React10.createContext({
+var ToggleGroupContext = React8.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -857,7 +771,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React10.useContext(ToggleGroupContext);
+  const context = React8.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -912,7 +826,7 @@ function InputOTPSlot({
   className,
   ...props
 }) {
-  const inputOTPContext = React10.useContext(OTPInputContext);
+  const inputOTPContext = React8.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
   return /* @__PURE__ */ jsxs(
     "div",
@@ -951,7 +865,7 @@ function Label2({
   );
 }
 var Form = FormProvider;
-var FormFieldContext = React10.createContext(
+var FormFieldContext = React8.createContext(
   {}
 );
 var FormField = ({
@@ -960,8 +874,8 @@ var FormField = ({
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React10.useContext(FormFieldContext);
-  const itemContext = React10.useContext(FormItemContext);
+  const fieldContext = React8.useContext(FormFieldContext);
+  const itemContext = React8.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -978,11 +892,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React10.createContext(
+var FormItemContext = React8.createContext(
   {}
 );
 function FormItem({ className, ...props }) {
-  const id = React10.useId();
+  const id = React8.useId();
   return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -1261,148 +1175,69 @@ function FieldError({
     }
   );
 }
-var cardVariants = cva(
-  // Base styles
-  "flex flex-col rounded-[var(--j3m-radius-2xs)]",
-  {
-    variants: {
-      variant: {
-        // Default solid card
-        default: [
-          "bg-[var(--color-bg-surface)]",
-          "border border-[var(--color-border-subtle)]",
-          "text-[var(--color-text-main)]",
-          "shadow-sm"
-        ].join(" "),
-        // Glass Light - for light backgrounds or over images
-        "glass-light": [
-          "bg-[var(--j3m-glass-light)]",
-          "backdrop-blur-[var(--j3m-blur-md)]",
-          "border border-[var(--j3m-glass-border-light)]",
-          "text-[var(--color-text-main)]",
-          "shadow-[var(--j3m-glass-shadow-md)]"
-        ].join(" "),
-        // Glass Dark - for light backgrounds, dark card
-        "glass-dark": [
-          "bg-[var(--j3m-glass-dark)]",
-          "backdrop-blur-[var(--j3m-blur-md)]",
-          "border border-[var(--j3m-glass-border-dark)]",
-          "text-white",
-          "shadow-[var(--j3m-glass-shadow-lg)]"
-        ].join(" "),
-        // Glass Neutral - subtle frosted effect
-        "glass-neutral": [
-          "bg-[var(--j3m-glass-neutral)]",
-          "backdrop-blur-[var(--j3m-blur-lg)]",
-          "border border-[var(--j3m-glass-border-subtle)]",
-          "text-[var(--color-text-main)]",
-          "shadow-[var(--j3m-glass-shadow-sm)]"
-        ].join(" "),
-        // Glass Primary - with orange tint
-        "glass-primary": [
-          "bg-[var(--j3m-glass-primary)]",
-          "backdrop-blur-[var(--j3m-blur-lg)]",
-          "border border-[var(--j3m-glass-border-light)]",
-          "text-[var(--color-text-main)]",
-          "shadow-[var(--j3m-glass-shadow-glow)]"
-        ].join(" ")
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var Card = React10.forwardRef(
-  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
       "data-slot": "card",
-      className: cn(cardVariants({ variant, className })),
+      className: cn(
+        "bg-card text-card-foreground rounded-xl border shadow",
+        className
+      ),
       ...props
     }
-  )
-);
-Card.displayName = "Card";
-var CardHeader = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
       "data-slot": "card-header",
-      className: cn(
-        "flex flex-col gap-[var(--j3m-spacing-2xs)]",
-        "px-[var(--j3m-spacing-l)] py-[var(--j3m-spacing-m)]",
-        className
-      ),
+      className: cn("flex flex-col gap-1.5 p-6", className),
       ...props
     }
-  )
-);
-CardHeader.displayName = "CardHeader";
-var CardTitle = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "h3",
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      ref,
       "data-slot": "card-title",
-      className: cn(
-        "text-lg font-semibold leading-none tracking-tight",
-        className
-      ),
+      className: cn("leading-none font-semibold tracking-tight", className),
       ...props
     }
-  )
-);
-CardTitle.displayName = "CardTitle";
-var CardDescription = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "p",
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      ref,
       "data-slot": "card-description",
-      className: cn(
-        "text-sm opacity-80",
-        className
-      ),
+      className: cn("text-muted-foreground text-sm", className),
       ...props
     }
-  )
-);
-CardDescription.displayName = "CardDescription";
-var CardContent = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
       "data-slot": "card-content",
-      className: cn(
-        "px-[var(--j3m-spacing-l)] pb-[var(--j3m-spacing-m)]",
-        className
-      ),
+      className: cn("p-6 pt-0", className),
       ...props
     }
-  )
-);
-CardContent.displayName = "CardContent";
-var CardFooter = React10.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
       "data-slot": "card-footer",
-      className: cn(
-        "flex items-center",
-        "px-[var(--j3m-spacing-l)] py-[var(--j3m-spacing-m)]",
-        "border-t border-[inherit]",
-        className
-      ),
+      className: cn("flex items-center p-6 pt-0", className),
       ...props
     }
-  )
-);
-CardFooter.displayName = "CardFooter";
+  );
+}
 function Table({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -1857,8 +1692,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
-  const ref = React10.useRef(null);
-  React10.useEffect(() => {
+  const ref = React8.useRef(null);
+  React8.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx(
@@ -1881,9 +1716,9 @@ function CalendarDayButton({
     }
   );
 }
-var CarouselContext = React10.createContext(null);
+var CarouselContext = React8.createContext(null);
 function useCarousel() {
-  const context = React10.useContext(CarouselContext);
+  const context = React8.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -1905,20 +1740,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React10.useState(false);
-  const [canScrollNext, setCanScrollNext] = React10.useState(false);
-  const onSelect = React10.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React8.useState(false);
+  const [canScrollNext, setCanScrollNext] = React8.useState(false);
+  const onSelect = React8.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React10.useCallback(() => {
+  const scrollPrev = React8.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React10.useCallback(() => {
+  const scrollNext = React8.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React10.useCallback(
+  const handleKeyDown = React8.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -1930,11 +1765,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -2067,9 +1902,9 @@ function CarouselNext({
   );
 }
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React10.createContext(null);
+var ChartContext = React8.createContext(null);
 function useChart() {
-  const context = React10.useContext(ChartContext);
+  const context = React8.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -2082,7 +1917,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React10.useId();
+  const uniqueId = React8.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
     "div",
@@ -2143,7 +1978,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React10.useMemo(() => {
+  const tooltipLabel = React8.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -2866,16 +2701,16 @@ var M = (e, i, s, u, m, a, l, h) => {
   } catch (n) {
   }
 };
-var x = React10.createContext(void 0);
+var x = React8.createContext(void 0);
 var U = { setTheme: (e) => {
 }, themes: [] };
 var z = () => {
   var e;
-  return (e = React10.useContext(x)) != null ? e : U;
+  return (e = React8.useContext(x)) != null ? e : U;
 };
-React10.memo(({ forcedTheme: e, storageKey: i, attribute: s, enableSystem: u, enableColorScheme: m, defaultTheme: a, value: l, themes: h, nonce: d, scriptProps: w }) => {
+React8.memo(({ forcedTheme: e, storageKey: i, attribute: s, enableSystem: u, enableColorScheme: m, defaultTheme: a, value: l, themes: h, nonce: d, scriptProps: w }) => {
   let p = JSON.stringify([s, i, a, e, h, l, u, m]).slice(1, -1);
-  return React10.createElement("script", { ...w, suppressHydrationWarning: true, nonce: typeof window == "undefined" ? d : "", dangerouslySetInnerHTML: { __html: `(${M.toString()})(${p})` } });
+  return React8.createElement("script", { ...w, suppressHydrationWarning: true, nonce: typeof window == "undefined" ? d : "", dangerouslySetInnerHTML: { __html: `(${M.toString()})(${p})` } });
 });
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = z();
@@ -3107,153 +2942,126 @@ function PaginationEllipsis({
     }
   );
 }
-var Dialog = DialogPrimitive.Root;
-var DialogTrigger = DialogPrimitive.Trigger;
-var DialogPortal = DialogPrimitive.Portal;
-var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Overlay,
-  {
-    ref,
-    className: cn(
-      "fixed inset-0 z-50",
-      "bg-[var(--j3m-neutral-1000)]/50",
-      "backdrop-blur-sm",
-      // Animations
-      "data-[state=open]:animate-in",
-      "data-[state=closed]:animate-out",
-      "data-[state=closed]:fade-out-0",
-      "data-[state=open]:fade-in-0",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React10.forwardRef(({ className, children, showCloseButton = true, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs(
-    DialogPrimitive.Content,
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
     {
-      ref,
+      "data-slot": "dialog-overlay",
       className: cn(
-        // Positioning
-        "fixed left-[50%] top-[50%] z-50",
-        "translate-x-[-50%] translate-y-[-50%]",
-        "w-full max-w-lg",
-        "max-h-[90vh] overflow-y-auto",
-        // Card-like styling
-        "rounded-[var(--j3m-radius-2xs)]",
-        "border border-[var(--color-border-subtle)]",
-        "bg-[var(--color-bg-surface)]",
-        "shadow-lg",
-        // Padding
-        "p-[var(--j3m-spacing-l)]",
-        // Animations
-        "duration-200",
-        "data-[state=open]:animate-in",
-        "data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0",
-        "data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95",
-        "data-[state=open]:zoom-in-95",
-        "data-[state=closed]:slide-out-to-left-1/2",
-        "data-[state=closed]:slide-out-to-top-[48%]",
-        "data-[state=open]:slide-in-from-left-1/2",
-        "data-[state=open]:slide-in-from-top-[48%]",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
         className
       ),
-      ...props,
-      children: [
-        children,
-        showCloseButton && /* @__PURE__ */ jsxs(
-          DialogPrimitive.Close,
-          {
-            className: cn(
-              "absolute right-[var(--j3m-spacing-m)] top-[var(--j3m-spacing-m)]",
-              "rounded-[var(--j3m-radius-2xs)]",
-              "p-1",
-              "text-[var(--color-text-muted)]",
-              "opacity-70",
-              "ring-offset-background",
-              "transition-opacity",
-              "hover:opacity-100",
-              "hover:bg-[var(--j3m-neutral-200)]",
-              "focus:outline-none",
-              "focus:ring-2",
-              "focus:ring-[var(--j3m-primary-300)]",
-              "focus:ring-offset-2",
-              "disabled:pointer-events-none"
-            ),
-            children: [
-              /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-            ]
-          }
-        )
-      ]
+      ...props
     }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = ({
+  );
+}
+function DialogContent({
   className,
+  children,
+  showCloseButton = true,
   ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col gap-[var(--j3m-spacing-2xs)]",
-      "mb-[var(--j3m-spacing-m)]",
-      "text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
-DialogHeader.displayName = "DialogHeader";
-var DialogFooter = ({
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
   className,
   ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end",
-      "gap-[var(--j3m-spacing-s)]",
-      "mt-[var(--j3m-spacing-l)]",
-      className
-    ),
-    ...props
-  }
-);
-DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Title,
-  {
-    ref,
-    className: cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      "text-[var(--color-text-main)]",
-      className
-    ),
-    ...props
-  }
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Description,
-  {
-    ref,
-    className: cn(
-      "text-sm",
-      "text-[var(--color-text-muted)]",
-      className
-    ),
-    ...props
-  }
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
 function Command({
   className,
   ...props
@@ -4563,12 +4371,17 @@ function CollapsibleTrigger2({
   );
 }
 function CollapsibleContent2({
+  className,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     CollapsiblePrimitive.CollapsibleContent,
     {
       "data-slot": "collapsible-content",
+      className: cn(
+        "data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden",
+        className
+      ),
       ...props
     }
   );
@@ -4618,9 +4431,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React10.createContext(null);
+var SidebarContext = React8.createContext(null);
 function useSidebar() {
-  const context = React10.useContext(SidebarContext);
+  const context = React8.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -4636,10 +4449,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React10.useState(false);
-  const [_open, _setOpen] = React10.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React8.useState(false);
+  const [_open, _setOpen] = React8.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React10.useCallback(
+  const setOpen = React8.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -4651,10 +4464,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React10.useCallback(() => {
+  const toggleSidebar = React8.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -4665,7 +4478,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React10.useMemo(
+  const contextValue = React8.useMemo(
     () => ({
       state,
       open,
@@ -5123,7 +4936,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React10.useMemo(() => {
+  const width = React8.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -5266,7 +5079,7 @@ var sectionVariants = cva(
   }
 );
 var isGlassVariant = (variant) => variant?.startsWith("glass-") ?? false;
-var Section = React10.forwardRef(
+var Section = React8.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
     "section",
     {
@@ -5278,7 +5091,7 @@ var Section = React10.forwardRef(
   )
 );
 Section.displayName = "Section";
-var SectionHeader = React10.forwardRef(
+var SectionHeader = React8.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5293,7 +5106,7 @@ var SectionHeader = React10.forwardRef(
   )
 );
 SectionHeader.displayName = "SectionHeader";
-var SectionTitle = React10.forwardRef(
+var SectionTitle = React8.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "h2",
     {
@@ -5307,7 +5120,7 @@ var SectionTitle = React10.forwardRef(
   )
 );
 SectionTitle.displayName = "SectionTitle";
-var SectionDescription = React10.forwardRef(
+var SectionDescription = React8.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "p",
     {
@@ -5321,7 +5134,7 @@ var SectionDescription = React10.forwardRef(
   )
 );
 SectionDescription.displayName = "SectionDescription";
-var SectionContent = React10.forwardRef(
+var SectionContent = React8.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5335,7 +5148,7 @@ var SectionContent = React10.forwardRef(
   )
 );
 SectionContent.displayName = "SectionContent";
-var SectionFooter = React10.forwardRef(
+var SectionFooter = React8.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5352,6 +5165,6 @@ var SectionFooter = React10.forwardRef(
 );
 SectionFooter.displayName = "SectionFooter";
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item5 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label2 as Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Section, SectionContent, SectionDescription, SectionFooter, SectionHeader, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cardVariants, navigationMenuTriggerStyle, sectionVariants, toggleVariants, useFormField, useIsMobile, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item5 as Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label2 as Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Section, SectionContent, SectionDescription, SectionFooter, SectionHeader, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, navigationMenuTriggerStyle, sectionVariants, toggleVariants, useFormField, useIsMobile, useSidebar };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map