@inf-monkeys-tech/monkeys-design 1.0.40 → 1.0.41

package/dist/components/primitives/index.mjs

@@ -418,7 +418,7 @@ var buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground shadow-sm 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",
+        outline: "border border-input bg-control-surface shadow-sm ring-offset-control-surface 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"
@@ -773,7 +773,7 @@ var Input = React14.forwardRef(({ className, appearance = "standard", type, ...p
     ref,
     type,
     className: cn(
-      "flex w-full border border-input bg-background px-3 text-foreground transition-[border-color,background-color,color,box-shadow] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex w-full border border-input bg-control-surface px-3 text-foreground ring-offset-control-surface transition-[border-color,background-color,color,box-shadow] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       appearance === "compact" ? "h-9 rounded-md py-1 text-sm shadow-sm" : "h-10 rounded-md py-2 text-sm shadow-sm",
       appearance === "shadow" && "rounded-lg shadow-sm shadow-black/[0.02] dark:border-white/10 dark:bg-white/[0.04] dark:shadow-none",
       className
@@ -787,7 +787,7 @@ var Textarea = React14.forwardRef(({ className, appearance = "standard", ...prop
   {
     ref,
     className: cn(
-      "flex w-full border border-input bg-background px-3 py-2 text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "flex w-full border border-input bg-control-surface px-3 py-2 text-foreground ring-offset-control-surface placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       appearance === "compact" ? "min-h-[60px] rounded-md text-sm shadow-sm" : "min-h-[80px] rounded-md text-sm",
       appearance === "shadow" && "shadow-sm shadow-black/[0.02] dark:border-white/10 dark:bg-white/[0.04] dark:shadow-none",
       className
@@ -1134,7 +1134,7 @@ function InputGroupTextarea({ className, ...props }) {
   );
 }
 var menuItemClassName = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0";
-var menuContentClassName = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
+var menuContentClassName = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-menu-surface p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
@@ -1186,7 +1186,7 @@ var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
 var SelectTrigger = React14.forwardRef(
-  ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, { ref, className: cn("flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background px-3 py-2 text-left text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:min-w-0 [&>span]:flex-1 [&>span]:text-left", size === "sm" && "h-8 px-2 py-1 text-xs", className), ...props, children: [
+  ({ className, children, iconClassName, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, { ref, className: cn("flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-control-surface px-3 py-2 text-left text-sm shadow-sm ring-offset-control-surface data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:min-w-0 [&>span]:flex-1 [&>span]:text-left", size === "sm" && "h-8 px-2 py-1 text-xs", className), ...props, children: [
     children,
     /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: cn("h-4 w-4 opacity-50", iconClassName) }) })
   ] })
@@ -1262,12 +1262,12 @@ var DialogContent = React14.forwardRef(
       DialogPrimitive.Content,
       {
         ref,
-        className: cn("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background p-6 shadow-lg 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", className),
+        className: cn("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-dialog-surface p-6 shadow-lg 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", className),
         "data-monkeys-dialog-content": true,
         ...props,
         children: [
           children,
-          showCloseButton ? /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [
+          showCloseButton ? /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-dialog-surface transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none", children: [
             /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "h-4 w-4" }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel })
           ] }) : null
@@ -1315,7 +1315,7 @@ var AlertDialogOverlay = React14.forwardRef(({ className, style, ...props }, ref
 AlertDialogOverlay.displayName = "AlertDialogOverlay";
 var AlertDialogContent = React14.forwardRef(({ className, style, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
-  /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, { ref, className: cn("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-background p-6 shadow-lg 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", className), "data-monkeys-dialog-content": true, style: { pointerEvents: "auto", ...style }, ...props })
+  /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, { ref, className: cn("fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border bg-dialog-surface p-6 shadow-lg 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", className), "data-monkeys-dialog-content": true, style: { pointerEvents: "auto", ...style }, ...props })
 ] }));
 AlertDialogContent.displayName = "AlertDialogContent";
 var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-2 text-center sm:text-left", className), ...props });