@j3m-quantum/ui 0.7.9 → 0.7.11

package/dist/index.cjs

@@ -143,6 +143,8 @@ var Button = React8__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       Comp,
       {
+        "data-slot": "button",
+        "data-variant": variant || "default",
         className: cn(buttonVariants({ variant, size, className })),
         ref,
         ...props
@@ -714,7 +716,7 @@ function NativeSelect({ className, ...props }) {
           {
             "data-slot": "native-select",
             className: cn(
-              "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+              "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-background dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-full border px-4 py-2 pr-10 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
               "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
@@ -725,7 +727,7 @@ function NativeSelect({ className, ...props }) {
         /* @__PURE__ */ jsxRuntime.jsx(
           lucideReact.ChevronDownIcon,
           {
-            className: "text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none",
+            className: "text-muted-foreground pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 opacity-50 select-none",
             "aria-hidden": "true",
             "data-slot": "native-select-icon"
           }
@@ -751,7 +753,7 @@ function NativeSelectOptGroup({
   );
 }
 var toggleVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
   {
     variants: {
       variant: {
@@ -885,7 +887,7 @@ function InputOTPSlot({
       "data-slot": "input-otp-slot",
       "data-active": isActive,
       className: cn(
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive bg-background border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-full first:border-l last:rounded-r-full data-[active=true]:z-10 data-[active=true]:ring-[3px]",
         className
       ),
       ...props,
@@ -1233,6 +1235,8 @@ var cardVariants = classVarianceAuthority.cva(
       variant: {
         default: "bg-card border shadow",
         glass: [
+          "glass-context",
+          // Enables glass semantic token overrides for children
           "bg-[var(--j3m-glass-frosted-card)]",
           "backdrop-blur-[var(--j3m-blur-frosted)]",
           "glass-border-gradient",
@@ -1415,7 +1419,7 @@ var badgeVariants = classVarianceAuthority.cva(
         default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
         secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+        outline: "bg-background text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
       }
     },
     defaultVariants: {
@@ -1611,7 +1615,6 @@ function Calendar({
   classNames,
   showOutsideDays = true,
   captionLayout = "label",
-  buttonVariant = "ghost",
   formatters,
   components,
   ...props
@@ -1622,7 +1625,7 @@ function Calendar({
     {
       showOutsideDays,
       className: cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "bg-card group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -1644,13 +1647,11 @@ function Calendar({
           defaultClassNames.nav
         ),
         button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none inline-flex items-center justify-center rounded-full hover:bg-muted/50 transition-colors",
           defaultClassNames.button_previous
         ),
         button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none inline-flex items-center justify-center rounded-full hover:bg-muted/50 transition-colors",
           defaultClassNames.button_next
         ),
         month_caption: cn(
@@ -1701,7 +1702,7 @@ function Calendar({
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
         today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          "rounded-full [&_button]:ring-2 [&_button]:ring-primary/50",
           defaultClassNames.today
         ),
         outside: cn(
@@ -1758,25 +1759,22 @@ function CalendarDayButton({
   modifiers,
   ...props
 }) {
-  const defaultClassNames = reactDayPicker.getDefaultClassNames();
   const ref = React8__namespace.useRef(null);
   React8__namespace.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Button,
+    "button",
     {
       ref,
-      variant: "ghost",
-      size: "icon",
+      type: "button",
       "data-day": day.date.toLocaleDateString(),
       "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
       "data-range-start": modifiers.range_start,
       "data-range-end": modifiers.range_end,
       "data-range-middle": modifiers.range_middle,
       className: cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
-        defaultClassNames.day,
+        "rounded-full hover:bg-muted/50 transition-colors data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent/50 data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:ring-ring/50 flex aspect-square size-auto w-full min-w-(--cell-size) items-center justify-center leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
         className
       ),
       ...props
@@ -4262,7 +4260,7 @@ function SheetHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "sheet-header",
-      className: cn("flex flex-col gap-1.5 p-4", className),
+      className: cn("flex flex-col gap-1.5 px-6 py-4", className),
       ...props
     }
   );
@@ -4272,7 +4270,7 @@ function SheetFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "sheet-footer",
-      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      className: cn("mt-auto flex flex-col gap-2 px-6 py-4", className),
       ...props
     }
   );
@@ -4303,6 +4301,16 @@ function SheetDescription({
     }
   );
 }
+function SheetBody({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sheet-body",
+      className: cn("flex-1 px-6 py-4", className),
+      ...props
+    }
+  );
+}
 function Popover({
   ...props
 }) {
@@ -4427,12 +4435,14 @@ function Collapsible({
   return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.Root, { "data-slot": "collapsible", ...props });
 }
 function CollapsibleTrigger2({
+  className,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     CollapsiblePrimitive__namespace.CollapsibleTrigger,
     {
       "data-slot": "collapsible-trigger",
+      className: cn(className),
       ...props
     }
   );
@@ -5463,6 +5473,7 @@ exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
 exports.Separator = Separator;
 exports.Sheet = Sheet;
+exports.SheetBody = SheetBody;
 exports.SheetClose = SheetClose;
 exports.SheetContent = SheetContent;
 exports.SheetDescription = SheetDescription;