@onesaz/ui 0.4.4 → 0.4.6

package/dist/index.js

@@ -870,23 +870,23 @@ var useButtonGroup = () => React6.useContext(ButtonGroupContext);
 var colorMap = {
   success: {
     contained: "bg-success-500 text-white hover:bg-success-600 dark:bg-success-600 dark:hover:bg-success-700",
-    outline: "border border-success-500 bg-transparent text-success-600 hover:bg-success-50 dark:text-success-400 dark:hover:bg-success-950",
-    secondary: "bg-success-50 text-success-700 hover:bg-success-100 dark:bg-success-950 dark:text-success-300 dark:hover:bg-success-900",
-    ghost: "text-success-600 hover:bg-success-50 dark:text-success-400 dark:hover:bg-success-950",
+    outline: "border border-success-500 bg-transparent text-success-600 hover:bg-success-500/10 dark:text-success-400 dark:hover:bg-success-500/10",
+    secondary: "bg-success-500/10 text-success-700 hover:bg-success-500/15 dark:text-success-300 dark:hover:bg-success-500/15",
+    ghost: "text-success-600 hover:bg-success-500/10 dark:text-success-400 dark:hover:bg-success-500/10",
     link: "text-success-600 dark:text-success-400"
   },
   warning: {
     contained: "bg-warning-500 text-white hover:bg-warning-600 dark:bg-warning-600 dark:hover:bg-warning-700",
-    outline: "border border-warning-500 bg-transparent text-warning-600 hover:bg-warning-50 dark:text-warning-400 dark:hover:bg-warning-950",
-    secondary: "bg-warning-50 text-warning-700 hover:bg-warning-100 dark:bg-warning-950 dark:text-warning-300 dark:hover:bg-warning-900",
-    ghost: "text-warning-600 hover:bg-warning-50 dark:text-warning-400 dark:hover:bg-warning-950",
+    outline: "border border-warning-500 bg-transparent text-warning-600 hover:bg-warning-500/10 dark:text-warning-400 dark:hover:bg-warning-500/10",
+    secondary: "bg-warning-500/10 text-warning-700 hover:bg-warning-500/15 dark:text-warning-300 dark:hover:bg-warning-500/15",
+    ghost: "text-warning-600 hover:bg-warning-500/10 dark:text-warning-400 dark:hover:bg-warning-500/10",
     link: "text-warning-600 dark:text-warning-400"
   },
   error: {
     contained: "bg-error-500 text-white hover:bg-error-600 dark:bg-error-600 dark:hover:bg-error-700",
-    outline: "border border-error-500 bg-transparent text-error-600 hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-950",
-    secondary: "bg-error-50 text-error-700 hover:bg-error-100 dark:bg-error-950 dark:text-error-300 dark:hover:bg-error-900",
-    ghost: "text-error-600 hover:bg-error-50 dark:text-error-400 dark:hover:bg-error-950",
+    outline: "border border-error-500 bg-transparent text-error-600 hover:bg-error-500/10 dark:text-error-400 dark:hover:bg-error-500/10",
+    secondary: "bg-error-500/10 text-error-700 hover:bg-error-500/15 dark:text-error-300 dark:hover:bg-error-500/15",
+    ghost: "text-error-600 hover:bg-error-500/10 dark:text-error-400 dark:hover:bg-error-500/10",
     link: "text-error-600 dark:text-error-400"
   },
   destructive: {
@@ -951,11 +951,11 @@ var Button = React6.forwardRef(
     const resolvedSize = size ?? "default";
     const resolvedColor = color ?? groupCtx.color ?? "default";
     const resolvedDisabled = disabled ?? groupCtx.disabled;
-    const colorOverride = resolvedColor !== "default" ? colorMap[resolvedColor][variantToShape(resolvedVariant)] : null;
+    const colorOverride = resolvedColor !== "default" ? colorMap[resolvedColor]?.[variantToShape(resolvedVariant)] ?? null : null;
     const variantClasses3 = colorOverride ? null : {
       "bg-accent text-accent-foreground hover:bg-accent-hover": resolvedVariant === "default",
       "bg-destructive text-destructive-foreground hover:bg-destructive/90": resolvedVariant === "destructive",
-      "border border-input bg-background hover:bg-muted hover:text-foreground": resolvedVariant === "outline",
+      "border border-accent bg-transparent text-accent hover:bg-accent/10": resolvedVariant === "outline",
       "bg-muted text-foreground hover:bg-muted/80": resolvedVariant === "secondary",
       "hover:bg-muted hover:text-foreground": resolvedVariant === "ghost",
       "text-accent underline-offset-4 hover:underline": resolvedVariant === "link"
@@ -1004,11 +1004,11 @@ var iconButtonSizes = {
 };
 var IconButton = React6.forwardRef(
   ({ className, variant = "ghost", color = "default", size = "md", rounded = false, loading = false, ...props }, ref) => {
-    const colorOverride = color !== "default" ? colorMap[color][variantToShape(variant)] : null;
+    const colorOverride = color !== "default" ? colorMap[color]?.[variantToShape(variant)] ?? null : null;
     const variantClasses3 = colorOverride ? null : {
       "bg-accent text-accent-foreground hover:bg-accent-hover": variant === "default",
       "bg-destructive text-destructive-foreground hover:bg-destructive/90": variant === "destructive",
-      "border border-input bg-background hover:bg-muted hover:text-foreground": variant === "outline",
+      "border border-accent bg-transparent text-accent hover:bg-accent/10": variant === "outline",
       "bg-muted text-foreground hover:bg-muted/80": variant === "secondary",
       "hover:bg-muted hover:text-foreground": variant === "ghost",
       "text-accent underline-offset-4 hover:underline": variant === "link"
@@ -1100,6 +1100,7 @@ var Input = React7.forwardRef(
     containerClassName,
     ...props
   }, ref) => {
+    const safeSize = inputSize in sizeClasses ? inputSize : "md";
     const hasAdornment = startAdornment || endAdornment;
     if (hasAdornment) {
       return /* @__PURE__ */ jsxs2(
@@ -1126,7 +1127,7 @@ var Input = React7.forwardRef(
                   "focus:outline-none",
                   "disabled:cursor-not-allowed",
                   "file:border-0 file:bg-transparent file:text-sm file:font-medium",
-                  sizeClasses[inputSize],
+                  sizeClasses[safeSize],
                   startAdornment && "pl-2",
                   endAdornment && "pr-2",
                   className
@@ -1153,7 +1154,7 @@ var Input = React7.forwardRef(
           "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
           "transition-colors",
           "file:border-0 file:bg-transparent file:text-sm file:font-medium",
-          sizeClasses[inputSize],
+          sizeClasses[safeSize],
           className
         ),
         ref,
@@ -1393,7 +1394,7 @@ var Checkbox = React12.forwardRef(
                 "flex items-center justify-center",
                 // Focus ring mirrors the hidden input's focus-visible state
                 "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background peer-focus-visible:outline-none",
-                active ? "bg-accent border-accent text-accent-foreground" : "bg-background border-border text-transparent"
+                active ? "bg-accent border-accent text-accent-foreground" : "bg-background border-muted-foreground text-transparent"
               ),
               children: indeterminate ? (
                 // Dash for indeterminate
@@ -1505,6 +1506,7 @@ var indicatorSizeClasses = {
 var RadioGroupItem = React14.forwardRef(({ className, size: sizeProp, ...props }, ref) => {
   const { size: contextSize } = React14.useContext(RadioGroupContext);
   const size = sizeProp || contextSize || "md";
+  const safeSize = size in sizeClasses2 ? size : "md";
   return /* @__PURE__ */ jsx14(
     RadioGroupPrimitive.Item,
     {
@@ -1517,7 +1519,7 @@ var RadioGroupItem = React14.forwardRef(({ className, size: sizeProp, ...props }
         "disabled:cursor-not-allowed disabled:opacity-50",
         "data-[state=checked]:border-accent",
         "transition-colors",
-        sizeClasses2[size],
+        sizeClasses2[safeSize],
         className
       ),
       ...props,
@@ -1526,7 +1528,7 @@ var RadioGroupItem = React14.forwardRef(({ className, size: sizeProp, ...props }
         {
           className: cn(
             "rounded-full bg-accent",
-            indicatorSizeClasses[size]
+            indicatorSizeClasses[safeSize]
           )
         }
       ) })
@@ -1752,7 +1754,8 @@ var Slider = React16.forwardRef(({
       valueElement
     ] })
   };
-  return /* @__PURE__ */ jsx16("div", { className: containerClasses[valuePosition], children: orderMap[valuePosition] });
+  const safePosition = valuePosition in containerClasses ? valuePosition : "top";
+  return /* @__PURE__ */ jsx16("div", { className: containerClasses[safePosition], children: orderMap[safePosition] });
 });
 Slider.displayName = SliderPrimitive.Root.displayName;
 
@@ -2043,8 +2046,10 @@ var Chip = React20.forwardRef(
     const content = label ?? children;
     const isClickable = clickable || !!onClick || !!href;
     const Component = component ?? (href ? "a" : "div");
-    const colorClass = variant === "filled" ? filledClasses[color] ?? filledClasses.default : outlinedClasses2[color] ?? outlinedClasses2.default;
-    const hoverClass = isClickable && !disabled ? variant === "filled" ? filledHoverClasses[color] ?? filledHoverClasses.default : outlinedHoverClasses[color] ?? outlinedHoverClasses.default : "";
+    const safeSize = size in sizeClasses3 ? size : "medium";
+    const safeVariant = variant === "filled" || variant === "outlined" ? variant : "filled";
+    const colorClass = safeVariant === "filled" ? filledClasses[color] ?? filledClasses.default : outlinedClasses2[color] ?? outlinedClasses2.default;
+    const hoverClass = isClickable && !disabled ? safeVariant === "filled" ? filledHoverClasses[color] ?? filledHoverClasses.default : outlinedHoverClasses[color] ?? outlinedHoverClasses.default : "";
     const handleKeyDown = (e) => {
       if (!disabled) {
         if (isClickable && (e.key === "Enter" || e.key === " ")) {
@@ -2071,8 +2076,8 @@ var Chip = React20.forwardRef(
         className: cn(
           "inline-flex items-center rounded-full font-medium transition-colors select-none",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-          sizeClasses3[size],
-          variant === "outlined" && "border bg-transparent",
+          sizeClasses3[safeSize],
+          safeVariant === "outlined" && "border bg-transparent",
           colorClass,
           hoverClass,
           isClickable && !disabled ? "cursor-pointer" : "cursor-default",
@@ -2081,8 +2086,8 @@ var Chip = React20.forwardRef(
         ),
         ...props,
         children: [
-          avatar && /* @__PURE__ */ jsx20("span", { className: cn("-ml-1 flex shrink-0 items-center justify-center [&>*]:rounded-full", avatarSizeClasses[size]), children: avatar }),
-          !avatar && icon && /* @__PURE__ */ jsx20("span", { className: cn("-ml-0.5 flex shrink-0 items-center justify-center", iconSizeClasses[size]), children: icon }),
+          avatar && /* @__PURE__ */ jsx20("span", { className: cn("-ml-1 flex shrink-0 items-center justify-center [&>*]:rounded-full", avatarSizeClasses[safeSize]), children: avatar }),
+          !avatar && icon && /* @__PURE__ */ jsx20("span", { className: cn("-ml-0.5 flex shrink-0 items-center justify-center", iconSizeClasses[safeSize]), children: icon }),
           /* @__PURE__ */ jsx20("span", { className: "truncate", children: content }),
           onDelete && /* @__PURE__ */ jsx20(
             "button",
@@ -2100,7 +2105,7 @@ var Chip = React20.forwardRef(
               ),
               disabled,
               "aria-label": "Remove",
-              children: deleteIcon ?? /* @__PURE__ */ jsx20(DefaultDeleteIcon, { size })
+              children: deleteIcon ?? /* @__PURE__ */ jsx20(DefaultDeleteIcon, { size: safeSize })
             }
           )
         ]
@@ -2735,19 +2740,19 @@ var variantConfig = {
     iconColor: "text-accent"
   },
   success: {
-    root: "bg-success-50",
+    root: "bg-success-500/10",
     strip: "bg-success-500",
-    iconColor: "text-success-600"
+    iconColor: "text-success-600 dark:text-success-400"
   },
   warning: {
-    root: "bg-warning-50",
+    root: "bg-warning-500/10",
     strip: "bg-warning-500",
-    iconColor: "text-warning-600"
+    iconColor: "text-warning-600 dark:text-warning-400"
   },
   error: {
-    root: "bg-error-50",
+    root: "bg-error-500/10",
     strip: "bg-error-500",
-    iconColor: "text-error-600"
+    iconColor: "text-error-600 dark:text-error-400"
   }
 };
 var InfoIcon = () => /* @__PURE__ */ jsxs15(
@@ -3174,13 +3179,15 @@ var LinearProgress = React30.forwardRef(
     ...props
   }, ref) => {
     const isIndeterminate = value === void 0;
+    const safeSize = size in linearSizeClasses ? size : "md";
+    const safeVariant = variant in variantClasses2 ? variant : "default";
     return /* @__PURE__ */ jsxs18("div", { ref, className: cn("w-full", className), ...props, children: [
       /* @__PURE__ */ jsx30(
         "div",
         {
           className: cn(
             "w-full overflow-hidden rounded-full bg-muted",
-            linearSizeClasses[size]
+            linearSizeClasses[safeSize]
           ),
           role: "progressbar",
           "aria-valuenow": isIndeterminate ? void 0 : value,
@@ -3191,7 +3198,7 @@ var LinearProgress = React30.forwardRef(
             {
               className: cn(
                 "h-full rounded-full",
-                variantClasses2[variant],
+                variantClasses2[safeVariant],
                 animated && !isIndeterminate && "transition-all duration-300 ease-out",
                 isIndeterminate && "animate-indeterminate-progress w-1/3"
               ),
@@ -3231,7 +3238,9 @@ var CircularProgress = React30.forwardRef(
     ...props
   }, ref) => {
     const isIndeterminate = value === void 0;
-    const sizeValue = typeof size === "number" ? size : circularSizeValues[size];
+    const safeVariant = variant in strokeColors ? variant : "default";
+    const safeSize = typeof size === "number" || size in circularSizeValues ? size : "md";
+    const sizeValue = typeof safeSize === "number" ? safeSize : circularSizeValues[safeSize];
     const radius = (sizeValue - thickness) / 2;
     const circumference = 2 * Math.PI * radius;
     const strokeDashoffset = isIndeterminate ? 0 : circumference - Math.min(100, Math.max(0, value)) / 100 * circumference;
@@ -3270,7 +3279,7 @@ var CircularProgress = React30.forwardRef(
                   "circle",
                   {
                     className: cn(
-                      strokeColors[variant],
+                      strokeColors[safeVariant],
                       !isIndeterminate && "transition-all duration-300 ease-out"
                     ),
                     fill: "none",
@@ -3931,7 +3940,7 @@ var Combobox = React35.forwardRef(
       (option) => {
         if (typeof option === "string") return option;
         const record = option;
-        const maybeLabel = record[labelKey];
+        const maybeLabel = labelKey in record ? record[labelKey] : void 0;
         return typeof maybeLabel === "string" ? maybeLabel : String(maybeLabel ?? "");
       },
       [labelKey]
@@ -3940,7 +3949,7 @@ var Combobox = React35.forwardRef(
       (option) => {
         if (typeof option === "string") return option;
         const record = option;
-        const maybeValue = record[valueKey];
+        const maybeValue = valueKey in record ? record[valueKey] : void 0;
         if (maybeValue !== void 0 && maybeValue !== null) {
           return String(maybeValue);
         }
@@ -4913,16 +4922,16 @@ var DataGridToolbar = ({
   customButtons,
   moreOptions = []
 }) => {
-  return /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap items-center gap-2 px-4 py-3 border-b border-border bg-background", children: [
+  return /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 px-4 py-3 border-b border-border bg-background", children: [
     title && /* @__PURE__ */ jsx36("h3", { className: "text-sm font-semibold text-foreground shrink-0", children: title }),
-    /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap items-center gap-2 ml-auto", children: [
+    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 ml-auto", children: [
       showQuickFilter && /* @__PURE__ */ jsx36(
         Input,
         {
           placeholder: "Search...",
           value: globalFilter ?? "",
           onChange: (e) => setGlobalFilter(e.target.value),
-          className: "h-9 min-w-[120px] flex-1",
+          className: "h-9 w-[200px]",
           endAdornment: /* @__PURE__ */ jsxs23("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-muted-foreground", children: [
             /* @__PURE__ */ jsx36("circle", { cx: "11", cy: "11", r: "8" }),
             /* @__PURE__ */ jsx36("path", { d: "m21 21-4.3-4.3" })
@@ -8347,13 +8356,14 @@ var sizeClasses5 = {
 };
 var TopBar = React46.forwardRef(
   ({ className, bordered = true, sticky = false, size = "md", children, ...props }, ref) => {
+    const safeSize = size in sizeClasses5 ? size : "md";
     return /* @__PURE__ */ jsx46(
       "header",
       {
         ref,
         className: cn(
           "flex items-center px-4 bg-card text-foreground",
-          sizeClasses5[size],
+          sizeClasses5[safeSize],
           bordered && "border-b border-border",
           sticky && "sticky top-0 z-40",
           className