ssovee-os-web-ui 0.1.57 → 0.1.59

package/dist/index.cjs

@@ -183,11 +183,11 @@ var Input = React22__namespace.default.forwardRef(
     onKeyUp,
     ...props
   }, ref) => {
-    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",
-      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"
+      default: "bg-primary input-text-default border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50 placeholder-light placeholder-default",
+      filled: "bg-surface-4 input-text-filled border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50 placeholder-light placeholder-filled",
+      outline: "bg-transparent input-text-outline border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50 placeholder-light placeholder-outline"
     };
     const sizeClasses = {
       sm: "h-8 px-2 text-sm",
@@ -257,11 +257,11 @@ var TextArea = React22__namespace.default.forwardRef(
     resize = "vertical",
     ...props
   }, ref) => {
-    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",
-      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"
+      default: "bg-primary input-text-default border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50 placeholder-light placeholder-default",
+      filled: "bg-surface-4 input-text-filled border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50 placeholder-light placeholder-filled",
+      outline: "bg-transparent input-text-outline border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50 placeholder-light placeholder-outline"
     };
     const sizeClasses = {
       sm: "px-2 py-1 text-sm",
@@ -794,7 +794,7 @@ var Loading = ({
   return content;
 };
 var Loading_default = Loading;
-var basePulseClasses = "bg-surface-1/35 dark:bg-surface-3/20 rounded-md overflow-hidden";
+var basePulseClasses = "skeleton-bg rounded-md overflow-hidden";
 var lineWidths = ["w-full", "w-11/12", "w-4/5", "w-3/5"];
 var Skeleton = ({
   variant = "text",
@@ -944,7 +944,7 @@ var Toast = ({
       case "success":
         return "border-l-green-500 bg-green-50";
       case "warning":
-        return "border-l-yellow-500 bg-yellow-50";
+        return "border-l-yellow-500 bg-yellow-50 dark:text-[#121316]";
       case "info":
         return "border-l-blue-500 bg-blue-50";
       default:
@@ -992,8 +992,28 @@ var Toast = ({
           children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mt-0.5", children: getIcon() }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-              heading && /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "h4", className: "text-sm font-medium text-neutral-700 mb-1", children: heading }),
-              /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "text-sm text-neutral-600 leading-relaxed", children: message })
+              heading && /* @__PURE__ */ jsxRuntime.jsx(
+                Typography_default,
+                {
+                  variant: "h4",
+                  className: cn(
+                    "text-sm font-medium mb-1",
+                    type === "warning" ? "text-neutral-700 dark:text-[#121316]" : "text-neutral-700"
+                  ),
+                  children: heading
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Typography_default,
+                {
+                  variant: "p",
+                  className: cn(
+                    "text-sm leading-relaxed",
+                    type === "warning" ? "text-neutral-600 dark:text-[#121316]" : "text-neutral-600"
+                  ),
+                  children: message
+                }
+              )
             ] }),
             showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
@@ -1225,7 +1245,7 @@ var Badge = React22__namespace.default.forwardRef(
   }, ref) => {
     const variantClasses = {
       default: "bg-surface-3 text-neutral-400",
-      primary: "bg-brand-color text-neutral-500",
+      primary: "bg-brand-color text-neutral-500 dark:text-white",
       success: "bg-green-500 text-white",
       warning: "bg-yellow-500 text-white",
       danger: "bg-red-500 text-white",
@@ -1400,7 +1420,7 @@ var Tooltip = ({
           "div",
           {
             className: cn(
-              "absolute z-50 px-2 py-1 text-xs text-white bg-surface-1 rounded shadow-lg whitespace-nowrap",
+              "absolute z-50 px-2 py-1 text-xs tooltip-text bg-surface-1 rounded shadow-lg whitespace-nowrap",
               positionClasses[position],
               className
             ),
@@ -1660,11 +1680,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",
-      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"
+      default: "bg-primary input-text-default border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50 placeholder-light placeholder-default",
+      filled: "bg-surface-4 input-text-filled border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50 placeholder-light placeholder-filled",
+      outline: "bg-transparent input-text-outline border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50 placeholder-light placeholder-outline"
     };
     const sizeClasses = {
       sm: "h-8 text-sm leading-tight",
@@ -1822,10 +1842,12 @@ var FileUpload = ({
     md: "h-24 px-4 text-base",
     lg: "h-32 px-6 text-lg"
   };
+  const defaultTextClasses = variant === "default" || variant === "outline" ? "text-neutral-600" : "text-neutral-600";
+  const acceptTextClasses = variant === "default" || variant === "outline" ? "text-xs text-neutral-600" : "text-xs text-neutral-600";
   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("mb-2", defaultTextClasses) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: cn("text-sm", defaultTextClasses), children: dragAndDrop ? "Drag and drop files here" : "Click to upload files" }),
+    accept && /* @__PURE__ */ jsxRuntime.jsxs(Typography_default, { variant: "p", className: cn(acceptTextClasses, "mt-1"), children: [
       "Accepted: ",
       accept
     ] })
@@ -2082,7 +2104,7 @@ var Radio = React22__namespace.default.forwardRef(
     const baseClasses = "transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer rounded-[6px]";
     const variantClasses = {
       default: "bg-primary border border-surface-1 focus:border-brand-color focus:ring-brand-color/50 checked:bg-brand-color checked:border-brand-color",
-      filled: "bg-surface-4 border border-surface-4 focus:border-brand-color focus:ring-brand-color/50 checked:bg-brand-color checked:border-brand-color"
+      filled: "bg-surface-4 border border-surface-1 focus:border-brand-color focus:ring-brand-color/50 checked:bg-brand-color checked:border-brand-color"
     };
     const sizeClasses = {
       sm: "w-4 h-4",
@@ -2098,6 +2120,7 @@ var Radio = React22__namespace.default.forwardRef(
               ref,
               type: "radio",
               className: cn(
+                "peer",
                 baseClasses,
                 variantClasses[variant],
                 sizeClasses[size],
@@ -2109,7 +2132,7 @@ var Radio = React22__namespace.default.forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1/2 h-1/2 bg-white rounded-full opacity-0 checked:opacity-100" }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1/2 h-1/2 bg-white rounded-full opacity-0 peer-checked:opacity-100" }) })
         ] }),
         label && /* @__PURE__ */ jsxRuntime.jsx(
           "label",
@@ -3382,6 +3405,19 @@ var useSound = () => {
   };
 };
 
+// src/hooks/getFormattedDate.ts
+var getFormattedDate = (dateInput) => {
+  const timestamp = Number(dateInput);
+  if (isNaN(timestamp)) return "Invalid date";
+  const date = new Date(timestamp);
+  const formatter = new Intl.DateTimeFormat("en-GB", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric"
+  });
+  return formatter.format(date);
+};
+
 exports.Accordion = Accordion_default;
 exports.Alert = Alert_default;
 exports.Avatar = Avatar_default;
@@ -3419,6 +3455,7 @@ exports.Tooltip = Tooltip_default;
 exports.Typography = Typography_default;
 exports.WindowWithSideMenu = WindowWithSideMenu_default;
 exports.WindowWithoutSideMenu = WindowWithoutSideMenu_default;
+exports.getFormattedDate = getFormattedDate;
 exports.useDeviceSupport = useDeviceSupport;
 exports.useGridClasses = useGridClasses_default;
 exports.useShortcutFormatter = useShortcutFormatter_default;