@nuvia/components 1.3.0 → 1.4.1

package/dist/index.js

@@ -133,12 +133,12 @@ var AlertDescription = React36.forwardRef(({ className, ...props }, ref) => /* @
 ));
 AlertDescription.displayName = "AlertDescription";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#5A6FC0] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#5A6FC0] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-foreground-primary-medium text-white shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        default: "bg-foreground-primary-medium text-white shadow hover:bg-primary-hover",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
         outline: "border border-input bg-background hover:bg-secondary hover:text-accent-foreground text-foreground-secondary-heavy",
         secondary: "bg-background-secondary-light hover:background-secondary-light/40 text-foreground-secondary-heavy",
         ghost: "text-foreground-secondary-heavy hover:bg-background-secondary-light",
@@ -313,9 +313,9 @@ var badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary-hover",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary-hover",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive-hover",
         outline: "text-foreground"
       }
     },
@@ -941,8 +941,8 @@ var chipVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary-hover",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
         outline: "border border-input bg-secondary/40  hover:bg-accent hover:bg-secondary/90",
         secondary: "bg-secondary/50 hover:bg-secondary dark:bg-secondary/25 text-secondary-foreground  dark:hover:bg-secondary/40",
         ghost: "hover:bg-accent hover:text-accent-foreground",
@@ -1131,7 +1131,7 @@ var CommandSeparator = React36.forwardRef(({ className, ...props }, ref) => /* @
   Command$1.Separator,
   {
     ref,
-    className: cn("-mx-1 h-px bg-border", className),
+    className: cn("-mx-1 h-px bg-card", className),
     ...props
   }
 ));
@@ -1370,7 +1370,7 @@ var ContextMenuSeparator = React36.forwardRef(({ className, ...props }, ref) =>
   ContextMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-border", className),
+    className: cn("-mx-1 my-1 h-px bg-card", className),
     ...props
   }
 ));
@@ -2275,149 +2275,163 @@ var MenubarShortcut = ({
   );
 };
 MenubarShortcut.displayname = "MenubarShortcut";
-var MultiCombobox = React36.forwardRef(({
-  options,
-  placeholder = "Select options...",
-  searchPlaceholder = "Search...",
-  emptyMessage = "No options found.",
-  className,
-  contentClassName,
-  value: controlledValue,
-  onValueChange,
-  onSelect,
-  onCreate,
-  maxDisplayedItems = 3,
-  asChild,
-  children
-}, ref) => {
-  const [open, setOpen] = React36.useState(false);
-  const [value, setValue] = React36.useState(controlledValue || []);
-  const [search, setSearch] = React36.useState("");
-  React36.useEffect(() => {
-    if (controlledValue !== void 0) {
-      setValue(controlledValue);
-    }
-  }, [controlledValue]);
-  const handleSelect = React36.useCallback((currentValue) => {
-    const newValue = value.includes(currentValue) ? value.filter((v) => v !== currentValue) : [...value, currentValue];
-    setValue(newValue);
-    onValueChange?.(newValue);
-    onSelect?.(newValue);
-  }, [value, onValueChange, onSelect]);
-  const handleRemove = React36.useCallback((valueToRemove) => {
-    const newValue = value.filter((v) => v !== valueToRemove);
-    setValue(newValue);
-    onValueChange?.(newValue);
-    onSelect?.(newValue);
-  }, [value, onValueChange, onSelect]);
-  const selectedLabels = React36.useMemo(() => {
-    return value.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
-  }, [value, options]);
-  return /* @__PURE__ */ jsxs(Popover$1, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger$1, { asChild: true, children: asChild ? children : /* @__PURE__ */ jsxs(
-      Button,
-      {
-        variant: "outline",
-        role: "combobox",
-        "aria-expanded": open,
-        className: cn("w-full justify-between", className),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1 items-center", children: [
-            value.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
-              selectedLabels.slice(0, maxDisplayedItems).map((label, index) => /* @__PURE__ */ jsxs(
-                "div",
+var MultiCombobox = React36.forwardRef(
+  ({
+    options,
+    placeholder = "Select options...",
+    searchPlaceholder = "Search...",
+    emptyMessage = "No options found.",
+    className,
+    contentClassName,
+    value: controlledValue,
+    onValueChange,
+    onSelect,
+    onCreate,
+    maxDisplayedItems = 3,
+    asChild,
+    children
+  }, ref) => {
+    const [open, setOpen] = React36.useState(false);
+    const [value, setValue] = React36.useState(controlledValue || []);
+    const [search, setSearch] = React36.useState("");
+    React36.useEffect(() => {
+      if (controlledValue !== void 0) {
+        setValue(controlledValue);
+      }
+    }, [controlledValue]);
+    const handleSelect = React36.useCallback(
+      (currentValue) => {
+        const newValue = value.includes(currentValue) ? value.filter((v) => v !== currentValue) : [...value, currentValue];
+        setValue(newValue);
+        onValueChange?.(newValue);
+        onSelect?.(newValue);
+      },
+      [value, onValueChange, onSelect]
+    );
+    const handleRemove = React36.useCallback(
+      (valueToRemove) => {
+        const newValue = value.filter((v) => v !== valueToRemove);
+        setValue(newValue);
+        onValueChange?.(newValue);
+        onSelect?.(newValue);
+      },
+      [value, onValueChange, onSelect]
+    );
+    const selectedLabels = React36.useMemo(() => {
+      return value.map((v) => options.find((opt) => opt.value === v)?.label).filter(Boolean);
+    }, [value, options]);
+    return /* @__PURE__ */ jsxs(Popover$1, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger$1, { asChild: true, children: asChild ? children : /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": open,
+          className: cn("w-full justify-between", className),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1 items-center", children: [
+              value.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+                selectedLabels.slice(0, maxDisplayedItems).map((label, index) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex items-center gap-1 bg-secondary px-2 py-0.5 rounded-md text-sm",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { children: label }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleRemove(value[index]);
+                          },
+                          className: "hover:bg-secondary-foreground/20 rounded-sm",
+                          children: /* @__PURE__ */ jsx(Cross2Icon, { className: "h-3 w-3" })
+                        }
+                      )
+                    ]
+                  },
+                  index
+                )),
+                selectedLabels.length > maxDisplayedItems && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+                  "+",
+                  selectedLabels.length - maxDisplayedItems,
+                  " more"
+                ] })
+              ] }),
+              value.length === 0 && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground font-normal", children: placeholder })
+            ] }),
+            /* @__PURE__ */ jsx(ChevronDownIcon, { className: "opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          className: cn("w-full p-0 !rounded-xl border-none", contentClassName),
+          children: /* @__PURE__ */ jsxs(Command, { className: "rounded-xl border", children: [
+            /* @__PURE__ */ jsx(
+              CommandInput,
+              {
+                placeholder: searchPlaceholder,
+                className: "h-9 w-full",
+                value: search,
+                onValueChange: setSearch
+              }
+            ),
+            /* @__PURE__ */ jsxs(CommandList, { children: [
+              /* @__PURE__ */ jsxs(CommandEmpty, { className: "flex flex-col gap-3 px-4 py-5", children: [
+                !!onCreate && search && /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: () => {
+                      setOpen(false);
+                      onCreate(search);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+                        'Create "',
+                        search,
+                        '"'
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-center text-muted-foreground text-xs", children: "No results found" })
+              ] }),
+              /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(
+                CommandItem,
                 {
-                  className: "flex items-center gap-1 bg-secondary px-2 py-0.5 rounded-md text-sm",
+                  className: "rounded-xl",
+                  keywords: [option.label],
+                  value: option.value,
+                  onSelect: () => handleSelect(option.value),
+                  onKeyUp: (e) => e.key === "Enter" && handleSelect(option.value),
+                  onKeyDown: (e) => e.key === "Enter" && handleSelect(option.value),
                   children: [
-                    /* @__PURE__ */ jsx("span", { children: label }),
+                    option.label,
                     /* @__PURE__ */ jsx(
-                      "div",
+                      CheckIcon,
                       {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleRemove(value[index]);
-                        },
-                        className: "hover:bg-secondary-foreground/20 rounded-sm",
-                        children: /* @__PURE__ */ jsx(Cross2Icon, { className: "h-3 w-3" })
+                        className: cn(
+                          "ml-auto",
+                          value.includes(option.value) ? "opacity-100" : "opacity-0"
+                        )
                       }
                     )
                   ]
                 },
-                index
-              )),
-              selectedLabels.length > maxDisplayedItems && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
-                "+",
-                selectedLabels.length - maxDisplayedItems,
-                " more"
-              ] })
-            ] }),
-            value.length === 0 && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground font-normal", children: placeholder })
-          ] }),
-          /* @__PURE__ */ jsx(ChevronDownIcon, { className: "opacity-50" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: cn("w-full p-0 !rounded-xl border-none", contentClassName), children: /* @__PURE__ */ jsxs(Command, { className: "rounded-xl border", children: [
-      /* @__PURE__ */ jsx(
-        CommandInput,
-        {
-          placeholder: searchPlaceholder,
-          className: "h-9 w-full",
-          value: search,
-          onValueChange: setSearch
+                `${option.value}-${option.label}`
+              )) })
+            ] })
+          ] })
         }
-      ),
-      /* @__PURE__ */ jsxs(CommandList, { children: [
-        /* @__PURE__ */ jsxs(CommandEmpty, { className: "flex flex-col gap-3 px-4 py-5", children: [
-          !!onCreate && search && /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: "outline",
-              size: "sm",
-              onClick: () => {
-                setOpen(false);
-                onCreate(search);
-              },
-              children: [
-                /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" }),
-                /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
-                  'Create "',
-                  search,
-                  '"'
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-center text-muted-foreground text-xs", children: "No results found" })
-        ] }),
-        /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(
-          CommandItem,
-          {
-            className: "rounded-lg",
-            keywords: [option.label],
-            value: option.value,
-            onSelect: () => handleSelect(option.value),
-            onKeyUp: (e) => e.key === "Enter" && handleSelect(option.value),
-            onKeyDown: (e) => e.key === "Enter" && handleSelect(option.value),
-            children: [
-              option.label,
-              /* @__PURE__ */ jsx(
-                CheckIcon,
-                {
-                  className: cn(
-                    "ml-auto",
-                    value.includes(option.value) ? "opacity-100" : "opacity-0"
-                  )
-                }
-              )
-            ]
-          },
-          option.value
-        )) })
-      ] })
-    ] }) })
-  ] });
-});
+      )
+    ] });
+  }
+);
 MultiCombobox.displayName = "MultiCombobox";
 var NavigationMenu = React36.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   NavigationMenuPrimitive.Root,
@@ -2505,7 +2519,7 @@ var NavigationMenuIndicator = React36.forwardRef(({ className, ...props }, ref)
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-card shadow-md" })
   }
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
@@ -2661,11 +2675,11 @@ var ResizableHandle = ({
   ResizablePrimitive.PanelResizeHandle,
   {
     className: cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "relative flex w-px items-center justify-center bg-card after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
       className
     ),
     ...props,
-    children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx(DragHandleDots2Icon, { className: "h-2.5 w-2.5" }) })
+    children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-card", children: /* @__PURE__ */ jsx(DragHandleDots2Icon, { className: "h-2.5 w-2.5" }) })
   }
 );
 var ScrollArea = React36.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
@@ -2694,7 +2708,7 @@ var ScrollBar = React36.forwardRef(({ className, orientation = "vertical", ...pr
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-card" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
@@ -2813,7 +2827,7 @@ var Separator5 = React36.forwardRef(
       decorative,
       orientation,
       className: cn(
-        "shrink-0 bg-border",
+        "shrink-0 bg-card",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className
       ),
@@ -2943,7 +2957,10 @@ function Skeleton({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("animate-pulse rounded-xl bg-primary/10 ", className),
+      className: cn(
+        "animate-pulse rounded-xl bg-background-primary-light ",
+        className
+      ),
       ...props
     }
   );