ssovee-os-web-ui 0.1.47 → 0.1.49

package/dist/index.cjs

@@ -185,9 +185,9 @@ var Input = React22__namespace.default.forwardRef(
   }, ref) => {
     const baseClasses = "transition-all duration-200 focus:outline-none placeholder:text-neutral-300 rounded-[6px]";
     const variantClasses = {
-      default: "bg-primary text-neutral-500 border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+      default: "bg-primary text-neutral-500 border border-surface-1 placeholder:text-neutral-300 dark:placeholder:text-[#d7e1ef] focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
       filled: "bg-surface-4 text-neutral-500 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
-      outline: "bg-transparent text-neutral-500 border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
+      outline: "bg-transparent text-neutral-500 border border-surface-1 placeholder:text-neutral-300 dark:placeholder:text-[#d7e1ef] focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
     };
     const sizeClasses = {
       sm: "h-8 px-2 text-sm",
@@ -204,7 +204,7 @@ var Input = React22__namespace.default.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col", fullWidth && "w-full"), children: [
       label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-neutral-500 mb-1", children: label }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400", children: leftIcon }),
+        leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 dark:text-[#d7e1ef]", children: leftIcon }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -223,14 +223,14 @@ var Input = React22__namespace.default.forwardRef(
             ...props
           }
         ),
-        rightIcon && !showSubmitButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400", children: rightIcon }),
+        rightIcon && !showSubmitButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400 dark:text-[#d7e1ef]", children: rightIcon }),
         showSubmitButton && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
             onClick: onSubmit,
             disabled: props.disabled || props.readOnly || !onSubmit,
-            className: "absolute right-3 top-1/2 -translate-y-1/2 text-neutral-300 transition-colors hover:text-neutral-400 disabled:cursor-not-allowed disabled:opacity-50",
+            className: "absolute right-3 top-1/2 -translate-y-1/2 text-neutral-300 transition-colors hover:text-neutral-400 dark:text-[#d7e1ef] dark:hover:text-[#d7e1ef] disabled:cursor-not-allowed disabled:opacity-50",
             "aria-label": "Submit input",
             children: /* @__PURE__ */ jsxRuntime.jsx(react.ArrowCircleRightIcon, { size: 20 })
           }
@@ -259,9 +259,9 @@ var TextArea = React22__namespace.default.forwardRef(
   }, ref) => {
     const baseClasses = "transition-all duration-200 focus:outline-none placeholder:text-neutral-300 rounded-[6px]";
     const variantClasses = {
-      default: "bg-primary text-neutral-500 border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+      default: "bg-primary text-neutral-500 border border-surface-1 placeholder:text-neutral-300 dark:placeholder:text-[#d7e1ef] focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
       filled: "bg-surface-4 text-neutral-500 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
-      outline: "bg-transparent text-neutral-500 border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
+      outline: "bg-transparent text-neutral-500 border border-surface-1 placeholder:text-neutral-300 dark:placeholder:text-[#d7e1ef] focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
     };
     const sizeClasses = {
       sm: "px-2 py-1 text-sm",
@@ -329,6 +329,7 @@ var Select = React22__namespace.default.forwardRef(
       lg: "h-12 px-4 text-lg"
     };
     const widthClasses = fullWidth ? "w-full" : "";
+    const isPlaceholderSelected = Boolean(placeholder) && (value === "" || value === void 0 || value === null);
     const handleChange = (e) => {
       onChange?.(e.target.value);
     };
@@ -342,6 +343,9 @@ var Select = React22__namespace.default.forwardRef(
             className: cn(
               baseClasses,
               variantClasses[variant],
+              isPlaceholderSelected && "text-neutral-300",
+              isPlaceholderSelected && variant !== "filled" && "dark:text-[#d7e1ef]",
+              !isPlaceholderSelected && "text-neutral-500",
               sizeClasses[size],
               widthClasses,
               "pr-10",
@@ -369,7 +373,10 @@ var Select = React22__namespace.default.forwardRef(
           react.CaretDownIcon,
           {
             size: 16,
-            className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400 pointer-events-none"
+            className: cn(
+              "absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400 pointer-events-none",
+              variant !== "filled" && "dark:text-[#d7e1ef]"
+            )
           }
         )
       ] }),
@@ -622,13 +629,14 @@ var Dropdown = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "text-neutral-500" : "text-neutral-300", children: selectedOption ? selectedOption.label : placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "text-neutral-500" : cn("text-neutral-300", variant !== "filled" && "dark:text-[#d7e1ef]"), children: selectedOption ? selectedOption.label : placeholder }),
           /* @__PURE__ */ jsxRuntime.jsx(
             react.CaretDownIcon,
             {
               size: 16,
               className: cn(
                 "text-neutral-400 transition-transform duration-200",
+                variant !== "filled" && "dark:text-[#d7e1ef]",
                 isOpen && "rotate-180"
               )
             }
@@ -1660,11 +1668,11 @@ var SearchInput = React22__namespace.default.forwardRef(
       };
     }, [enableKeyboardShortcuts, isActive, handleClear, addShortcutListener, removeShortcutListener]);
     const displayPlaceholder = enableKeyboardShortcuts ? `${placeholder} (${formatKeys(getShortcutByCommand("focus_search"))})` : placeholder;
-    const baseClasses = "transition-all duration-200 focus:outline-none placeholder:text-neutral-300 rounded-[6px]";
+    const baseClasses = "transition-all duration-200 focus:outline-none rounded-[6px]";
     const variantClasses = {
-      default: "bg-primary text-neutral-500 border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
+      default: "bg-primary text-neutral-500 border border-surface-1 placeholder:text-neutral-300 dark:placeholder:text-[#d7e1ef] focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
       filled: "bg-surface-4 text-neutral-500 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
-      outline: "bg-transparent text-neutral-500 border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
+      outline: "bg-transparent text-neutral-500 border border-surface-1 placeholder:text-neutral-300 dark:placeholder:text-[#d7e1ef] focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
     };
     const sizeClasses = {
       sm: "h-8 text-sm leading-tight",
@@ -1696,7 +1704,7 @@ var SearchInput = React22__namespace.default.forwardRef(
         "div",
         {
           className: cn(
-            "pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 text-neutral-400",
+            "pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 text-neutral-400 dark:text-[#d7e1ef]",
             iconPositionClasses[size]
           ),
           children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1748,7 +1756,7 @@ var SearchInput = React22__namespace.default.forwardRef(
         "button",
         {
           onClick: handleClear,
-          className: "absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors",
+          className: "absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors dark:text-[#d7e1ef] dark:hover:text-[#d7e1ef]",
           "aria-label": "Clear search",
           type: "button",
           children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: iconSizeClasses[size], fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
@@ -1822,10 +1830,11 @@ var FileUpload = ({
     md: "h-24 px-4 text-base",
     lg: "h-32 px-6 text-lg"
   };
+  const darkPlaceholderTone = variant !== "filled" ? "dark:text-[#d7e1ef]" : "";
   const defaultContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.UploadIcon, { size: 24, className: "text-neutral-400 mb-2" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "text-sm text-neutral-400", children: dragAndDrop ? "Drag and drop files here" : "Click to upload files" }),
-    accept && /* @__PURE__ */ jsxRuntime.jsxs(Typography_default, { variant: "p", className: "text-xs text-neutral-300 mt-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.UploadIcon, { size: 24, className: cn("text-neutral-400 mb-2", darkPlaceholderTone) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: cn("text-sm text-neutral-400", darkPlaceholderTone), children: dragAndDrop ? "Drag and drop files here" : "Click to upload files" }),
+    accept && /* @__PURE__ */ jsxRuntime.jsxs(Typography_default, { variant: "p", className: cn("text-xs text-neutral-300 mt-1", darkPlaceholderTone), children: [
       "Accepted: ",
       accept
     ] })
@@ -1987,7 +1996,7 @@ var Pagination = ({
           className: cn(
             "flex items-center justify-center",
             sizeClasses[size],
-            "text-neutral-400"
+            "text-neutral-400 dark:text-[#d7e1ef]"
           ),
           children: "..."
         },
@@ -2003,8 +2012,8 @@ var Pagination = ({
           "flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
           sizeClasses[size],
           variantClasses[variant],
-          isActive ? activeClasses[variant] : "text-neutral-400",
-          !isActive && "hover:text-neutral-500"
+          isActive ? activeClasses[variant] : "text-neutral-400 dark:text-[#d7e1ef]",
+          !isActive && "hover:text-neutral-500 dark:hover:text-[#d7e1ef]"
         ),
         children: page
       },
@@ -2020,7 +2029,7 @@ var Pagination = ({
           "flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
           sizeClasses[size],
           variantClasses[variant],
-          "text-neutral-400 hover:text-neutral-500"
+          "text-neutral-400 hover:text-neutral-500 dark:text-[#d7e1ef] dark:hover:text-[#d7e1ef]"
         ),
         children: "First"
       }
@@ -2033,7 +2042,7 @@ var Pagination = ({
           "flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
           sizeClasses[size],
           variantClasses[variant],
-          "text-neutral-400 hover:text-neutral-500"
+          "text-neutral-400 hover:text-neutral-500 dark:text-[#d7e1ef] dark:hover:text-[#d7e1ef]"
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeftIcon, { size: 16 })
       }
@@ -2047,7 +2056,7 @@ var Pagination = ({
           "flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
           sizeClasses[size],
           variantClasses[variant],
-          "text-neutral-400 hover:text-neutral-500"
+          "text-neutral-400 hover:text-neutral-500 dark:text-[#d7e1ef] dark:hover:text-[#d7e1ef]"
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRightIcon, { size: 16 })
       }
@@ -2060,7 +2069,7 @@ var Pagination = ({
           "flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
           sizeClasses[size],
           variantClasses[variant],
-          "text-neutral-400 hover:text-neutral-500"
+          "text-neutral-400 hover:text-neutral-500 dark:text-[#d7e1ef] dark:hover:text-[#d7e1ef]"
         ),
         children: "Last"
       }
@@ -3131,13 +3140,13 @@ var Table = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b text-neutral-400 bg-surface-2", className), ...props }));
+var TableHeader = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b text-neutral-400 dark:text-[#d7e1ef] bg-surface-2", className), ...props }));
 TableHeader.displayName = "TableHeader";
 var TableBody = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "tbody",
   {
     ref,
-    className: cn("[&_tr:last-child]:border-0 text-neutral-300", className),
+    className: cn("[&_tr:last-child]:border-0 text-neutral-300 dark:text-[#d7e1ef]", className),
     ...props
   }
 ));
@@ -3206,27 +3215,12 @@ var useGridClasses = (windowSize, gridRules) => {
     if (windowSize.width <= 640) return "mobile";
     if (windowSize.width <= 1024) return "tablet";
     return "desktop";
-  }, [windowSize.width]);
+  }, [windowSize]);
   const gridClasses = React22.useMemo(() => {
     const classes = {};
-    const resolveSpan = (spanRules) => {
-      const fallbackByDevice = {
-        mobile: ["mobile", "tablet", "desktop"],
-        tablet: ["tablet", "desktop", "mobile"],
-        desktop: ["desktop", "tablet", "mobile"]
-      };
-      const orderedDevices = fallbackByDevice[deviceType];
-      for (const device of orderedDevices) {
-        const candidate = spanRules?.[device];
-        if (candidate) {
-          return candidate;
-        }
-      }
-      return "12";
-    };
     for (const element in gridRules) {
       const classRules = gridRules[element];
-      const colSpan = resolveSpan(classRules["col-span"]);
+      const colSpan = classRules["col-span"][deviceType];
       classes[element] = `col-span-${deviceType}-${colSpan}`;
     }
     return classes;