@j3m-quantum/ui 0.4.0 → 0.7.0

package/dist/index.cjs

@@ -111,73 +111,24 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var buttonVariants = classVarianceAuthority.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: {
@@ -291,44 +242,8 @@ var Input = React10__namespace.forwardRef(
       "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",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         ),
         ref,
@@ -1312,147 +1227,55 @@ function FieldError({
     }
   );
 }
-var cardVariants = classVarianceAuthority.cva(
-  // Base styles
-  "flex flex-col rounded-[var(--j3m-radius-2xs)]",
+var Card = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
   {
-    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"
-    }
+    ref,
+    className: cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    ),
+    ...props
   }
-);
-var Card = React10__namespace.forwardRef(
-  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      "data-slot": "card",
-      className: cn(cardVariants({ variant, className })),
-      ...props
-    }
-  )
-);
+));
 Card.displayName = "Card";
-var CardHeader = React10__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.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
-      ),
-      ...props
-    }
-  )
-);
+var CardHeader = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React10__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "h3",
-    {
-      ref,
-      "data-slot": "card-title",
-      className: cn(
-        "text-lg font-semibold leading-none tracking-tight",
-        className
-      ),
-      ...props
-    }
-  )
-);
+var CardTitle = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React10__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "p",
-    {
-      ref,
-      "data-slot": "card-description",
-      className: cn(
-        "text-sm opacity-80",
-        className
-      ),
-      ...props
-    }
-  )
-);
+var CardDescription = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
 CardDescription.displayName = "CardDescription";
-var CardContent = React10__namespace.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      "data-slot": "card-content",
-      className: cn(
-        "px-[var(--j3m-spacing-l)] pb-[var(--j3m-spacing-m)]",
-        className
-      ),
-      ...props
-    }
-  )
-);
+var CardContent = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 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-[var(--j3m-spacing-l)] py-[var(--j3m-spacing-m)]",
-        "border-t border-[inherit]",
-        className
-      ),
-      ...props
-    }
-  )
-);
+var CardFooter = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
 CardFooter.displayName = "CardFooter";
 function Table({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3158,153 +2981,126 @@ function PaginationEllipsis({
     }
   );
 }
-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,
+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,
     {
-      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__ */ 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" })
-            ]
-          }
-        )
-      ]
+      ...props
     }
-  )
-] }));
-DialogContent.displayName = DialogPrimitive__namespace.Content.displayName;
-var DialogHeader = ({
+  );
+}
+function DialogContent({
   className,
+  children,
+  showCloseButton = true,
   ...props
-}) => /* @__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 = ({
+}) {
+  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",
+    {
+      "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__ */ 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;
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DialogPrimitive__namespace.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
 function Command({
   className,
   ...props
@@ -5691,7 +5487,6 @@ exports.TooltipTrigger = TooltipTrigger;
 exports.badgeVariants = badgeVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.buttonVariants = buttonVariants;
-exports.cardVariants = cardVariants;
 exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
 exports.sectionVariants = sectionVariants;
 exports.toggleVariants = toggleVariants;