@woobee/ui 0.3.0 → 0.3.1

package/dist/index.mjs

@@ -89,7 +89,7 @@ function Tag({
     {
       className: classNames({
         "inline-flex items-center rounded font-medium whitespace-nowrap": true,
-        "bg-cream-200 dark:bg-charcoal-700 text-content-title dark:text-content-primary": !color,
+        "bg-cream-200 dark:bg-charcoal-700 text-content-title": !color,
         "text-white": !!color,
         // medium size
         "text-sm": size === "medium",
@@ -140,7 +140,7 @@ function TagGroup({
           children: tag.name
         },
         tag.id || tag.name
-      )) : placeholder && /* @__PURE__ */ jsx("span", { className: "text-content-disabled dark:text-content-placeholder text-sm flex items-center", children: placeholder })
+      )) : placeholder && /* @__PURE__ */ jsx("span", { className: "text-content-placeholder text-sm flex items-center", children: placeholder })
     }
   );
 }
@@ -165,8 +165,8 @@ function Tabs({
         {
           className: classNames({
             "px-3 py-2 transition-colors rounded-lg": true,
-            "bg-white text-brown-500 dark:text-primary-500 dark:bg-charcoal-600": value === option.id,
-            "hover:text-brown-500 dark:text-content-secondary dark:hover:text-primary-500": value !== option.id
+            "bg-white text-content-link dark:bg-charcoal-600": value === option.id,
+            "text-content-secondary": value !== option.id
           }),
           onClick: () => onChange(option.id),
           children: option.label
@@ -275,7 +275,7 @@ function CheckboxList({
   };
   const renderPlaceholder = () => {
     if (typeof placeholder === "string") {
-      return /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-content-secondary dark:text-content-placeholder", children: placeholder });
+      return /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-content-placeholder", children: placeholder });
     }
     return placeholder;
   };
@@ -301,7 +301,7 @@ function CheckboxList({
               className: classNames({
                 "w-5 h-5 rounded border flex items-center justify-center transition-colors cursor-pointer": true,
                 "border-gray-300 bg-white dark:border-charcoal-700 dark:bg-charcoal-700": !checked,
-                "border-brown-500 bg-brown-500 dark:bg-primary-500 dark:border-primary-500 dark:text-black text-white": checked
+                "border-brown-500 bg-brown-500 dark:bg-primary-500 dark:border-primary-500 text-content-primary-button": checked
               }),
               children: checked && /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z" }) })
             }
@@ -311,8 +311,8 @@ function CheckboxList({
             {
               className: classNames({
                 "text-sm": true,
-                "text-content-title dark:text-content-primary": !checked,
-                "dark:text-primary-400": checked
+                "text-content-secondary": !checked,
+                "text-content-title": checked
               }),
               children: label
             }
@@ -910,7 +910,7 @@ function Drawer({
                               "div",
                               {
                                 "aria-label": "Close",
-                                className: "-mr-3 text-primary-700 dark:text-content-title hover:text-primary-500 p-1.5 rounded-lg hover:bg-primary-100 transition ease-in-out duration-150",
+                                className: "-mr-3 text-content-title hover:text-primary-500 p-1.5 rounded-lg hover:bg-primary-100 transition ease-in-out duration-150",
                                 onClick: handleClose,
                                 children: /* @__PURE__ */ jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
                               }
@@ -1192,10 +1192,10 @@ function ButtonItem({
     "div",
     {
       className: classNames({
-        "p-3 rounded-xl mx-auto text-content-primary/70 dark:text-content-title/50 flex justify-center cursor-pointer": true,
+        "p-3 rounded-xl mx-auto flex justify-center cursor-pointer": true,
         "w-full": direction === "vertical",
         "w-full overflow-hidden": direction === "horizontal",
-        "!text-content-primary dark:!text-primary-500 bg-white/50 dark:bg-charcoal-800/90 dark:backdrop-filter dark:backdrop-blur-sm border border-white lg:border-transparent dark:border-charcoal-700 shadow-xs dark:shadow-none": active,
+        "text-content-link bg-white/50 dark:bg-charcoal-800/90 dark:backdrop-filter dark:backdrop-blur-sm border border-white lg:border-transparent dark:border-charcoal-700 shadow-xs dark:shadow-none": active,
         ...classNameObject(className)
       }),
       children: /* @__PURE__ */ jsxs(
@@ -1318,7 +1318,7 @@ function H1({ className, children }) {
     "h1",
     {
       className: classNames({
-        "text-lg sm:text-xl font-title text-primary-500 font-semibold": true,
+        "text-lg sm:text-3xl font-title font-semibold": true,
         ...classNameObject(className)
       }),
       children
@@ -1549,7 +1549,7 @@ var Input = forwardRef((props, ref) => {
           id,
           className: classNames({
             ...classNameObject(className),
-            "px-3 group form-input placeholder-gray-300 dark:placeholder-charcoal-400 focus:outline-none block transition ease-in-out duration-150 text-black dark:text-content-primary dark:bg-charcoal-800 shadow-sm focus:dark:text-primary-500 focus:dark:border-primary-500 focus:dark:ring-primary-500": true,
+            "text-content-primary px-3 group form-input placeholder-gray-300 dark:placeholder-charcoal-400 focus:outline-none block transition ease-in-out duration-150 dark:bg-charcoal-800 shadow-sm focus:dark:text-content-link focus:dark:border-primary-500 focus:dark:ring-primary-500": true,
             "!text-white !border-charcoal-400 !placeholder-charcoal-400 focus:!text-primary-500 focus:!border-primary-500 focus:!ring-primary-500": !!darkMode,
             "h-11": !className || !className.includes("h-"),
             "text-sm": type !== "tel",
@@ -1565,7 +1565,7 @@ var Input = forwardRef((props, ref) => {
             "w-full": type !== "radio" && (!className || className.includes("w-full") || !className.includes("w-")),
             "sm:leading-normal": !className || !className.includes("leading-"),
             "cursor-pointer": type === "checkbox" || type === "button",
-            "text-black h-4 w-4": type === "radio",
+            "h-4 w-4": type === "radio",
             "pr-10": type === "search"
           }),
           ...type === "button" ? { value: label } : {},
@@ -1636,6 +1636,7 @@ Input.displayName = "Input";
 var Input_default = Input;
 function Label({
   className,
+  active = false,
   error = false,
   htmlFor,
   info,
@@ -1649,8 +1650,8 @@ function Label({
       {
         htmlFor,
         className: classNames({
-          "block text-sm font-medium mb-1.5 text-black dark:text-content-title": true,
-          "text-black dark:text-content-title/80": !error,
+          "block text-sm font-medium mb-1.5": true,
+          "text-content-link": active,
           "text-red-600": error,
           ...classNameObject(className)
         }),
@@ -1664,7 +1665,7 @@ function Label({
       "span",
       {
         className: classNames({
-          "text-sm leading-5 text-black mb-1.5": true,
+          "text-sm leading-5 mb-1.5": true,
           "text-red-600": error
         }),
         children: info
@@ -1779,7 +1780,7 @@ var Textarea = forwardRef((props, ref) => {
           placeholder,
           className: classNames({
             ...classNameObject(className),
-            "form-input border block w-full placeholder-gray-300 dark:placeholder-white/50 dark:focus:placeholder-charcoal-400 text-sm transition ease-in-out duration-150 px-3 py-2 border-gray-200 dark:border-charcoal-700 text-black dark:text-content-primary dark:bg-charcoal-800 rounded-lg": true,
+            "form-input border block w-full placeholder-gray-300 dark:placeholder-white/50 dark:focus:placeholder-charcoal-400 text-sm transition ease-in-out duration-150 px-3 py-2 border-gray-200 dark:border-charcoal-700 dark:bg-charcoal-800 rounded-lg": true,
             "focus:ring-white dark:focus:ring-1 dark:focus:border-primary-600 dark:focus:ring-primary-500": !error,
             "focus:outline-none focus:ring-0 focus:ring-offset-0 dark:focus:border-primary-500": true,
             "border-red-300 text-red-900 placeholder-red-300 dark:placeholder-red-600 focus:border-red-300 focus:shadow-outline-red": error
@@ -1916,7 +1917,7 @@ function NoData({ className }) {
     ),
     /* @__PURE__ */ jsxs("div", { className: "max-w-[90%] flex flex-col text-center", children: [
       /* @__PURE__ */ jsx("h4", { className: "text-6 font-medium text-content-title mt-3 /50", children: "It's empty." }),
-      /* @__PURE__ */ jsx("p", { className: "text-4 text-content-primary dark:text-content-title/60", children: "Nothing to do for now." })
+      /* @__PURE__ */ jsx("p", { className: "text-4", children: "Nothing to do for now." })
     ] })
   ] });
 }
@@ -2059,7 +2060,7 @@ function useThemeContext() {
 }
 function ThemeToggle() {
   const { theme, handleToggleTheme } = useThemeContext();
-  return /* @__PURE__ */ jsxs("div", { className: "text-content-primary dark:text-content-title z-30 flex space-x-1.5 items-center", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "text-content-primary z-30 flex space-x-1.5 items-center", children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -2174,7 +2175,7 @@ function PopoverCard({
             !!description && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 opacity-70", children: description }),
             actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1.5 w-full", children: actions.filter((action) => (action.items || []).length > 0).map((action, actionIndex) => /* @__PURE__ */ jsxs("div", { children: [
               actionIndex > 0 && /* @__PURE__ */ jsx("div", { className: "w-full h-px bg-gray-100 dark:bg-charcoal-800 mb-3" }),
-              action.section && /* @__PURE__ */ jsx("p", { className: "px-3 text-xxs sm:text-xs uppercase text-content-secondary dark:text-content-title dark:hover", children: action.section }),
+              action.section && /* @__PURE__ */ jsx("p", { className: "px-3 text-xxs sm:text-xs uppercase text-content-secondary dark:hover", children: action.section }),
               /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -2184,7 +2185,7 @@ function PopoverCard({
                   children: (action.items || []).map((item) => /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: "text-sm sm:text-base px-3 py-1.5 text-content-primary dark:text-content-secondary hover:text-content-title hover:bg-gray-200 hover:dark:text-content-disabled hover:dark:bg-charcoal-700 cursor-pointer whitespace-normal",
+                      className: "text-sm sm:text-base px-3 py-1.5 text-content-primary hover:text-content-title hover:bg-gray-200 hover:dark:bg-charcoal-700 cursor-pointer whitespace-normal",
                       onClick: () => handleMenuClick(item.action || item.onClick),
                       children: item.label
                     },
@@ -2250,7 +2251,7 @@ function PopoverCard({
                   /* @__PURE__ */ jsx("div", { className: "space-y-1", children: (action.items || []).map((item) => /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: "py-1.5 px-2 -mx-2 flex items-center text-base text-content-title dark:text-content-primary active:bg-gray-50 dark:active:bg-charcoal-700 rounded-lg cursor-pointer",
+                      className: "py-1.5 px-2 -mx-2 flex items-center text-base text-content-title active:bg-gray-50 dark:active:bg-charcoal-700 rounded-lg cursor-pointer",
                       onClick: () => handleMenuClick(item.action || item.onClick),
                       children: item.label
                     },
@@ -3426,7 +3427,7 @@ function DataTable({
     "table",
     {
       className: classNames({
-        "w-full text-sm dark:text-content-primary rounded-xl border-separate border-spacing-0": true,
+        "w-full text-sm rounded-xl border-separate border-spacing-0": true,
         "text-charcoal-100": !!darkMode,
         "text-content-secondary": !darkMode
       }),
@@ -3685,7 +3686,7 @@ function DataGridHeader({ sort, onClick, opts, children }) {
           "!text-right": align === "right",
           "whitespace-nowrap": !!noWrap,
           "sticky top-0 z-10 dark:bg-charcoal-800": !!stickyHeader,
-          "bg-cream-50": !darkMode,
+          "bg-white dark:bg-charcoal-800": !darkMode,
           "bg-charcoal-800": !!darkMode
         }),
         onClick,
@@ -3708,7 +3709,7 @@ function DataGridHeader({ sort, onClick, opts, children }) {
         "!text-left": align === "left",
         "whitespace-nowrap": !!noWrap,
         "sticky top-0 z-10 dark:bg-charcoal-800": !!stickyHeader,
-        "bg-cream-50": !darkMode,
+        "bg-white dark:bg-charcoal-800": !darkMode,
         "bg-charcoal-800": !!darkMode
       }),
       children