@j3m-quantum/ui 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React7 = require('react');
+var React10 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -62,7 +62,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React7__namespace = /*#__PURE__*/_interopNamespace(React7);
+var React10__namespace = /*#__PURE__*/_interopNamespace(React10);
 var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
@@ -95,8 +95,8 @@ var ResizablePrimitive__namespace = /*#__PURE__*/_interopNamespace(ResizablePrim
 // src/hooks/use-mobile.ts
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React7__namespace.useState(void 0);
-  React7__namespace.useEffect(() => {
+  const [isMobile, setIsMobile] = React10__namespace.useState(void 0);
+  React10__namespace.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -111,24 +111,73 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none 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",
+  // 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",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        // 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(" ")
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
+        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"
       }
     },
     defaultVariants: {
@@ -137,23 +186,20 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? reactSlot.Slot : "button";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
+var Button = React10__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
 function Separator({
   className,
   orientation = "horizontal",
@@ -239,22 +285,59 @@ function ButtonGroupSeparator({
     }
   );
 }
-function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.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
-    }
-  );
-}
+var Input = React10__namespace.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.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 Textarea({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "textarea",
@@ -502,7 +585,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React7__namespace.useMemo(
+  const _values = React10__namespace.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -788,7 +871,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React7__namespace.createContext({
+var ToggleGroupContext = React10__namespace.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -825,7 +908,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React7__namespace.useContext(ToggleGroupContext);
+  const context = React10__namespace.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToggleGroupPrimitive__namespace.Item,
     {
@@ -880,7 +963,7 @@ function InputOTPSlot({
   className,
   ...props
 }) {
-  const inputOTPContext = React7__namespace.useContext(inputOtp.OTPInputContext);
+  const inputOTPContext = React10__namespace.useContext(inputOtp.OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -919,7 +1002,7 @@ function Label2({
   );
 }
 var Form = reactHookForm.FormProvider;
-var FormFieldContext = React7__namespace.createContext(
+var FormFieldContext = React10__namespace.createContext(
   {}
 );
 var FormField = ({
@@ -928,8 +1011,8 @@ var FormField = ({
   return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(reactHookForm.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React7__namespace.useContext(FormFieldContext);
-  const itemContext = React7__namespace.useContext(FormItemContext);
+  const fieldContext = React10__namespace.useContext(FormFieldContext);
+  const itemContext = React10__namespace.useContext(FormItemContext);
   const { getFieldState } = reactHookForm.useFormContext();
   const formState = reactHookForm.useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -946,11 +1029,11 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React7__namespace.createContext(
+var FormItemContext = React10__namespace.createContext(
   {}
 );
 function FormItem({ className, ...props }) {
-  const id = React7__namespace.useId();
+  const id = React10__namespace.useId();
   return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1198,7 +1281,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = React7.useMemo(() => {
+  const content = React10.useMemo(() => {
     if (children) {
       return children;
     }
@@ -1229,85 +1312,148 @@ function FieldError({
     }
   );
 }
-function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+var cardVariants = classVarianceAuthority.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__namespace.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref,
       "data-slot": "card",
-      className: cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      ),
+      className: cn(cardVariants({ variant, className })),
       ...props
     }
-  );
-}
-function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React10__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref,
       "data-slot": "card-header",
       className: cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "flex flex-col gap-[var(--j3m-spacing-2xs)]",
+        "px-[var(--j3m-spacing-l)] py-[var(--j3m-spacing-m)]",
         className
       ),
       ...props
     }
-  );
-}
-function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+  )
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React10__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "h3",
     {
+      ref,
       "data-slot": "card-title",
-      className: cn("leading-none font-semibold", className),
+      className: cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className
+      ),
       ...props
     }
-  );
-}
-function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React10__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
     {
+      ref,
       "data-slot": "card-description",
-      className: cn("text-muted-foreground text-sm", className),
-      ...props
-    }
-  );
-}
-function CardAction({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-slot": "card-action",
       className: cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        "text-sm opacity-80",
         className
       ),
       ...props
     }
-  );
-}
-function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  )
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React10__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref,
       "data-slot": "card-content",
-      className: cn("px-6", className),
+      className: cn(
+        "px-[var(--j3m-spacing-l)] pb-[var(--j3m-spacing-m)]",
+        className
+      ),
       ...props
     }
-  );
-}
-function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  )
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React10__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref,
       "data-slot": "card-footer",
-      className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+      className: cn(
+        "flex items-center",
+        "px-[var(--j3m-spacing-l)] py-[var(--j3m-spacing-m)]",
+        "border-t border-[inherit]",
+        className
+      ),
       ...props
     }
-  );
-}
+  )
+);
+CardFooter.displayName = "CardFooter";
 function Table({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1762,8 +1908,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = reactDayPicker.getDefaultClassNames();
-  const ref = React7__namespace.useRef(null);
-  React7__namespace.useEffect(() => {
+  const ref = React10__namespace.useRef(null);
+  React10__namespace.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1786,9 +1932,9 @@ function CalendarDayButton({
     }
   );
 }
-var CarouselContext = React7__namespace.createContext(null);
+var CarouselContext = React10__namespace.createContext(null);
 function useCarousel() {
-  const context = React7__namespace.useContext(CarouselContext);
+  const context = React10__namespace.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -1810,20 +1956,20 @@ function Carousel({
     },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React7__namespace.useState(false);
-  const [canScrollNext, setCanScrollNext] = React7__namespace.useState(false);
-  const onSelect = React7__namespace.useCallback((api2) => {
+  const [canScrollPrev, setCanScrollPrev] = React10__namespace.useState(false);
+  const [canScrollNext, setCanScrollNext] = React10__namespace.useState(false);
+  const onSelect = React10__namespace.useCallback((api2) => {
     if (!api2) return;
     setCanScrollPrev(api2.canScrollPrev());
     setCanScrollNext(api2.canScrollNext());
   }, []);
-  const scrollPrev = React7__namespace.useCallback(() => {
+  const scrollPrev = React10__namespace.useCallback(() => {
     api?.scrollPrev();
   }, [api]);
-  const scrollNext = React7__namespace.useCallback(() => {
+  const scrollNext = React10__namespace.useCallback(() => {
     api?.scrollNext();
   }, [api]);
-  const handleKeyDown = React7__namespace.useCallback(
+  const handleKeyDown = React10__namespace.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -1835,11 +1981,11 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React7__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     if (!api || !setApi) return;
     setApi(api);
   }, [api, setApi]);
-  React7__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -1972,9 +2118,9 @@ function CarouselNext({
   );
 }
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React7__namespace.createContext(null);
+var ChartContext = React10__namespace.createContext(null);
 function useChart() {
-  const context = React7__namespace.useContext(ChartContext);
+  const context = React10__namespace.useContext(ChartContext);
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />");
   }
@@ -1987,7 +2133,7 @@ function ChartContainer({
   config,
   ...props
 }) {
-  const uniqueId = React7__namespace.useId();
+  const uniqueId = React10__namespace.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2048,7 +2194,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
-  const tooltipLabel = React7__namespace.useMemo(() => {
+  const tooltipLabel = React10__namespace.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
     }
@@ -2771,16 +2917,16 @@ var M = (e, i, s, u, m, a, l, h) => {
   } catch (n) {
   }
 };
-var x = React7__namespace.createContext(void 0);
+var x = React10__namespace.createContext(void 0);
 var U = { setTheme: (e) => {
 }, themes: [] };
 var z = () => {
   var e;
-  return (e = React7__namespace.useContext(x)) != null ? e : U;
+  return (e = React10__namespace.useContext(x)) != null ? e : U;
 };
-React7__namespace.memo(({ forcedTheme: e, storageKey: i, attribute: s, enableSystem: u, enableColorScheme: m, defaultTheme: a, value: l, themes: h, nonce: d, scriptProps: w }) => {
+React10__namespace.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 React7__namespace.createElement("script", { ...w, suppressHydrationWarning: true, nonce: typeof window == "undefined" ? d : "", dangerouslySetInnerHTML: { __html: `(${M.toString()})(${p})` } });
+  return React10__namespace.createElement("script", { ...w, suppressHydrationWarning: true, nonce: typeof window == "undefined" ? d : "", dangerouslySetInnerHTML: { __html: `(${M.toString()})(${p})` } });
 });
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = z();
@@ -3012,126 +3158,153 @@ function PaginationEllipsis({
     }
   );
 }
-function Dialog({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { "data-slot": "dialog", ...props });
-}
-function DialogTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Trigger, { "data-slot": "dialog-trigger", ...props });
-}
-function DialogPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { "data-slot": "dialog-portal", ...props });
-}
-function DialogClose({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Close, { "data-slot": "dialog-close", ...props });
-}
-function DialogOverlay({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Overlay,
-    {
-      "data-slot": "dialog-overlay",
-      className: cn(
-        "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
-    }
-  );
-}
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      DialogPrimitive__namespace.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__ */ jsxRuntime.jsxs(
-            DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.XIcon, {}),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-    "div",
+var Dialog = DialogPrimitive__namespace.Root;
+var DialogTrigger = DialogPrimitive__namespace.Trigger;
+var DialogPortal = DialogPrimitive__namespace.Portal;
+var DialogClose = DialogPrimitive__namespace.Close;
+var DialogOverlay = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.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__namespace.Overlay.displayName;
+var DialogContent = React10__namespace.forwardRef(({ className, children, showCloseButton = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogPrimitive__namespace.Content,
     {
-      "data-slot": "dialog-footer",
+      ref,
       className: cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        // 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%]",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        children,
+        showCloseButton && /* @__PURE__ */ jsxRuntime.jsxs(
+          DialogPrimitive__namespace.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        )
+      ]
     }
-  );
-}
-function DialogTitle({
+  )
+] }));
+DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
+var DialogHeader = ({
   className,
   ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Title,
-    {
-      "data-slot": "dialog-title",
-      className: cn("text-lg leading-none font-semibold", className),
-      ...props
-    }
-  );
-}
-function DialogDescription({
+}) => /* @__PURE__ */ jsxRuntime.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 = ({
   className,
   ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    DialogPrimitive__namespace.Description,
-    {
-      "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
-      ...props
-    }
-  );
-}
+}) => /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      "text-[var(--color-text-main)]",
+      className
+    ),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
+var DialogDescription = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Description,
+  {
+    ref,
+    className: cn(
+      "text-sm",
+      "text-[var(--color-text-muted)]",
+      className
+    ),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive__namespace.Description.displayName;
 function Command({
   className,
   ...props
@@ -4496,9 +4669,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React7__namespace.createContext(null);
+var SidebarContext = React10__namespace.createContext(null);
 function useSidebar() {
-  const context = React7__namespace.useContext(SidebarContext);
+  const context = React10__namespace.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -4514,10 +4687,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React7__namespace.useState(false);
-  const [_open, _setOpen] = React7__namespace.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React10__namespace.useState(false);
+  const [_open, _setOpen] = React10__namespace.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React7__namespace.useCallback(
+  const setOpen = React10__namespace.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -4529,10 +4702,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React7__namespace.useCallback(() => {
+  const toggleSidebar = React10__namespace.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React7__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -4543,7 +4716,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React7__namespace.useMemo(
+  const contextValue = React10__namespace.useMemo(
     () => ({
       state,
       open,
@@ -5001,7 +5174,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React7__namespace.useMemo(() => {
+  const width = React10__namespace.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5089,6 +5262,146 @@ function SidebarMenuSubButton({
     }
   );
 }
+var sectionVariants = classVarianceAuthority.cva(
+  // Base styles - larger padding than Card for section grouping
+  "flex flex-col rounded-[var(--j3m-radius-l)]",
+  {
+    variants: {
+      variant: {
+        // Default solid section
+        default: [
+          "bg-[var(--color-bg-surface)]",
+          "border border-[var(--color-border-subtle)]",
+          "text-[var(--color-text-main)]",
+          "shadow-sm"
+        ].join(" "),
+        // Glass Light - for dark or image backgrounds
+        "glass-light": [
+          "glass-context",
+          // Enables glass semantic token overrides
+          "bg-[var(--j3m-glass-light-20)]",
+          "backdrop-blur-[var(--j3m-blur-2xl)]",
+          "border border-[var(--j3m-glass-border-light)]",
+          "text-[var(--color-text-main)]",
+          "shadow-[var(--j3m-glass-shadow-md)]"
+        ].join(" "),
+        // Glass Dark - dark frosted glass
+        "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 (most common)
+        "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 isGlassVariant = (variant) => variant?.startsWith("glass-") ?? false;
+var Section = React10__namespace.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "section",
+    {
+      ref,
+      className: cn(sectionVariants({ variant, className })),
+      "data-glass-context": isGlassVariant(variant) ? "true" : void 0,
+      ...props
+    }
+  )
+);
+Section.displayName = "Section";
+var SectionHeader = React10__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex flex-col gap-[var(--j3m-spacing-xs)]",
+        "px-[var(--j3m-spacing-xl)] pt-[var(--j3m-spacing-xl)] pb-[var(--j3m-spacing-m)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+SectionHeader.displayName = "SectionHeader";
+var SectionTitle = React10__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "h2",
+    {
+      ref,
+      className: cn(
+        "text-xl font-semibold leading-none tracking-tight",
+        className
+      ),
+      ...props
+    }
+  )
+);
+SectionTitle.displayName = "SectionTitle";
+var SectionDescription = React10__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ref,
+      className: cn(
+        "text-sm opacity-70",
+        className
+      ),
+      ...props
+    }
+  )
+);
+SectionDescription.displayName = "SectionDescription";
+var SectionContent = React10__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "px-[var(--j3m-spacing-xl)] py-[var(--j3m-spacing-l)]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+SectionContent.displayName = "SectionContent";
+var SectionFooter = React10__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center",
+        "px-[var(--j3m-spacing-xl)] py-[var(--j3m-spacing-l)]",
+        "border-t border-[inherit]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+SectionFooter.displayName = "SectionFooter";
 
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
@@ -5127,7 +5440,6 @@ exports.ButtonGroupText = ButtonGroupText;
 exports.Calendar = Calendar;
 exports.CalendarDayButton = CalendarDayButton;
 exports.Card = Card;
-exports.CardAction = CardAction;
 exports.CardContent = CardContent;
 exports.CardDescription = CardDescription;
 exports.CardFooter = CardFooter;
@@ -5303,6 +5615,12 @@ exports.ResizablePanel = ResizablePanel;
 exports.ResizablePanelGroup = ResizablePanelGroup;
 exports.ScrollArea = ScrollArea;
 exports.ScrollBar = ScrollBar;
+exports.Section = Section;
+exports.SectionContent = SectionContent;
+exports.SectionDescription = SectionDescription;
+exports.SectionFooter = SectionFooter;
+exports.SectionHeader = SectionHeader;
+exports.SectionTitle = SectionTitle;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -5373,7 +5691,9 @@ exports.TooltipTrigger = TooltipTrigger;
 exports.badgeVariants = badgeVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
+exports.cardVariants = cardVariants;
 exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
+exports.sectionVariants = sectionVariants;
 exports.toggleVariants = toggleVariants;
 exports.useFormField = useFormField;
 exports.useIsMobile = useIsMobile;