@woobee/ui 0.2.3 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +52 -53
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +52 -53
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -49,15 +49,15 @@ function Button({
49
49
  "border bg-brown-500 border-transparent text-white": variant === "primary" && !darkMode,
50
50
  "dark:bg-primary-500 dark:hover:bg-primary-600 dark:text-black": variant === "primary" && !darkMode,
51
51
  "border bg-primary-500 hover:bg-primary-600 border-transparent text-black": variant === "primary" && !!darkMode,
52
- "text-gray-700 bg-white border border-gray-300 hover:text-gray-500": variant === "secondary" && !darkMode,
52
+ "text-content-primary bg-white border border-gray-300 hover:text-content-secondary": variant === "secondary" && !darkMode,
53
53
  "text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-charcoal-700": variant === "secondary" && !!darkMode,
54
- "!rounded-md text-left w-full text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 hover:text-gray-500": variant === "form-input" && !darkMode,
54
+ "!rounded-md text-left w-full text-content-primary bg-white border border-gray-200 hover:bg-gray-50 hover:text-content-secondary": variant === "form-input" && !darkMode,
55
55
  "!rounded-md text-left w-full text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-charcoal-700": variant === "form-input" && !!darkMode,
56
- "dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-charcoal-100 dark:border-charcoal-700": (variant === "secondary" || variant === "form-input") && !darkMode,
56
+ "dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-content-primary dark:border-charcoal-700": (variant === "secondary" || variant === "form-input") && !darkMode,
57
57
  "hover:text-brown-500 !shadow-none": variant === "flat" && !darkMode,
58
- "dark:text-charcoal-100 dark:hover:text-primary-500": variant === "flat" && !darkMode,
58
+ "dark:text-content-primary dark:hover:text-primary-500": variant === "flat" && !darkMode,
59
59
  "text-charcoal-100 hover:text-primary-500 !shadow-none": variant === "flat" && !!darkMode,
60
- "!text-gray-300 hover:!text-gray-400": !children && !darkMode,
60
+ "!text-content-disabled hover:!text-content-placeholder": !children && !darkMode,
61
61
  "dark:!text-charcoal-400": !children && !darkMode,
62
62
  "!text-charcoal-400": !children && !!darkMode,
63
63
  ...classNameObject(className)
@@ -89,7 +89,7 @@ function Tag({
89
89
  {
90
90
  className: classNames({
91
91
  "inline-flex items-center rounded font-medium whitespace-nowrap": true,
92
- "bg-cream-200 dark:bg-charcoal-700 text-gray-800 dark:text-gray-200": !color,
92
+ "bg-cream-200 dark:bg-charcoal-700 text-content-title dark:text-content-primary": !color,
93
93
  "text-white": !!color,
94
94
  // medium size
95
95
  "text-sm": size === "medium",
@@ -140,7 +140,7 @@ function TagGroup({
140
140
  children: tag.name
141
141
  },
142
142
  tag.id || tag.name
143
- )) : placeholder && /* @__PURE__ */ jsx("span", { className: "text-gray-300 dark:text-charcoal-400 text-sm flex items-center", children: placeholder })
143
+ )) : placeholder && /* @__PURE__ */ jsx("span", { className: "text-content-disabled dark:text-content-placeholder text-sm flex items-center", children: placeholder })
144
144
  }
145
145
  );
146
146
  }
@@ -166,7 +166,7 @@ function Tabs({
166
166
  className: classNames({
167
167
  "px-3 py-2 transition-colors rounded-lg": true,
168
168
  "bg-white text-brown-500 dark:text-primary-500 dark:bg-charcoal-600": value === option.id,
169
- "hover:text-brown-500 dark:text-charcoal-300 dark:hover:text-primary-500": value !== option.id
169
+ "hover:text-brown-500 dark:text-content-secondary dark:hover:text-primary-500": value !== option.id
170
170
  }),
171
171
  onClick: () => onChange(option.id),
172
172
  children: option.label
@@ -275,7 +275,7 @@ function CheckboxList({
275
275
  };
276
276
  const renderPlaceholder = () => {
277
277
  if (typeof placeholder === "string") {
278
- return /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-gray-500 dark:text-charcoal-400", children: placeholder });
278
+ return /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-content-secondary dark:text-content-placeholder", children: placeholder });
279
279
  }
280
280
  return placeholder;
281
281
  };
@@ -311,7 +311,7 @@ function CheckboxList({
311
311
  {
312
312
  className: classNames({
313
313
  "text-sm": true,
314
- "text-gray-900 dark:text-gray-100": !checked,
314
+ "text-content-title dark:text-content-primary": !checked,
315
315
  "dark:text-primary-400": checked
316
316
  }),
317
317
  children: label
@@ -633,16 +633,15 @@ function Modal({
633
633
  }
634
634
  if (!mounted) return null;
635
635
  return createPortal(
636
- /* @__PURE__ */ jsx(Transition, { show: open, onExited, children: /* @__PURE__ */ jsx("div", { className: "fixed inset-x-0 text-sm bottom-0 z-[1300] px-0 bg-opacity-30 lg:px-6 lg:inset-0 lg:flex lg:items-center lg:justify-center", children: /* @__PURE__ */ jsxs(
636
+ /* @__PURE__ */ jsx(Transition, { show: open, onExited, children: /* @__PURE__ */ jsx("div", { className: "fixed inset-x-0 text-sm bottom-0 z-[1300] px-0 bg-opacity-30 md:px-6 md:inset-0 md:flex md:items-center md:justify-center", children: /* @__PURE__ */ jsxs(
637
637
  "div",
638
638
  {
639
639
  className: classNames({
640
640
  "max-h-[100dvh] overflow-y-auto sm:w-full": true,
641
- "lg:max-w-2xl": !size,
642
- "lg:max-w-md": size === "small",
643
- "lg:max-w-3xl": size === "medium",
644
- "lg:max-w-6xl": size === "large",
645
- "h-[100dvh] lg:h-auto lg:max-w-3xl": size === "full"
641
+ "md:max-w-2xl": !size || size === "medium",
642
+ "md:max-w-md": size === "small",
643
+ "md:max-w-4xl": size === "large",
644
+ "h-[100dvh] md:h-auto md:max-w-3xl": size === "full"
646
645
  }),
647
646
  children: [
648
647
  /* @__PURE__ */ jsx(
@@ -694,7 +693,7 @@ function Modal({
694
693
  }),
695
694
  children: [
696
695
  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
697
- /* @__PURE__ */ jsx("h3", { className: "my-0 text-base font-semibold leading-tight text-gray-900 dark:text-white", children: title }),
696
+ /* @__PURE__ */ jsx("h3", { className: "my-0 text-base font-semibold leading-tight text-content-title ", children: title }),
698
697
  !!description && description.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-700", children: description })
699
698
  ] }),
700
699
  /* @__PURE__ */ jsx(Button, { variant: "flat", compact: true, onClick: handleClose, children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-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" }) }) })
@@ -811,7 +810,7 @@ function ConfirmationBox({
811
810
  disabled,
812
811
  children: /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-4", children: [
813
812
  iconSvg && /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full ${iconContainerClass}`, children: iconSvg }),
814
- /* @__PURE__ */ jsx("div", { className: "flex-1 pt-1.5", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 font-medium", children: description }) })
813
+ /* @__PURE__ */ jsx("div", { className: "flex-1 pt-1.5", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-content-secondary font-medium", children: description }) })
815
814
  ] })
816
815
  }
817
816
  );
@@ -911,7 +910,7 @@ function Drawer({
911
910
  "div",
912
911
  {
913
912
  "aria-label": "Close",
914
- className: "-mr-3 text-primary-700 dark:text-white hover:text-primary-500 p-1.5 rounded-lg hover:bg-primary-100 transition ease-in-out duration-150",
913
+ 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",
915
914
  onClick: handleClose,
916
915
  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" }) })
917
916
  }
@@ -992,7 +991,7 @@ function InlinePrompt({
992
991
  className: classNames({
993
992
  "inline-flex justify-center w-full rounded-md bg-transparent font-medium focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 transition ease-in-out duration-150 cursor-pointer": true,
994
993
  "leading-5 px-4 py-2": !condensed,
995
- "text-gray-700 hover:text-gray-500 active:text-gray-800 text-md": !className.includes("text-"),
994
+ "text-content-primary hover:text-content-secondary active:text-content-title text-md": !className.includes("text-"),
996
995
  ...classNameObject(className)
997
996
  }),
998
997
  "aria-haspopup": "true",
@@ -1071,9 +1070,9 @@ function Breadcrumb({
1071
1070
  "a",
1072
1071
  {
1073
1072
  onClick: clickBack,
1074
- className: "flex items-center text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out cursor-pointer",
1073
+ className: "flex items-center text-sm leading-5 font-medium text-content-secondary hover:text-content-primary transition duration-150 ease-in-out cursor-pointer",
1075
1074
  children: [
1076
- /* @__PURE__ */ jsx("svg", { className: "flex-shrink-0 -ml-1 mr-1 h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
1075
+ /* @__PURE__ */ jsx("svg", { className: "flex-shrink-0 -ml-1 mr-1 h-5 w-5 text-content-placeholder", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
1077
1076
  "path",
1078
1077
  {
1079
1078
  fillRule: "evenodd",
@@ -1086,8 +1085,8 @@ function Breadcrumb({
1086
1085
  }
1087
1086
  ) }),
1088
1087
  /* @__PURE__ */ jsx("nav", { className: "hidden sm:flex items-center text-sm leading-5 font-medium", children: links && links.length > 0 && links.map((link, index) => /* @__PURE__ */ jsxs("span", { className: "inline-flex", children: [
1089
- /* @__PURE__ */ jsx(LinkComponent, { href: link.href, className: "text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out", children: link.name }),
1090
- index !== links.length - 1 && /* @__PURE__ */ jsx("svg", { className: "flex-shrink-0 mx-2 h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
1088
+ /* @__PURE__ */ jsx(LinkComponent, { href: link.href, className: "text-content-secondary hover:text-content-primary transition duration-150 ease-in-out", children: link.name }),
1089
+ index !== links.length - 1 && /* @__PURE__ */ jsx("svg", { className: "flex-shrink-0 mx-2 h-5 w-5 text-content-placeholder", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
1091
1090
  "path",
1092
1091
  {
1093
1092
  fillRule: "evenodd",
@@ -1193,10 +1192,10 @@ function ButtonItem({
1193
1192
  "div",
1194
1193
  {
1195
1194
  className: classNames({
1196
- "p-3 rounded-xl mx-auto text-charcoal-700/70 dark:text-charcoal-50/50 flex justify-center cursor-pointer": true,
1195
+ "p-3 rounded-xl mx-auto text-content-primary/70 dark:text-content-title/50 flex justify-center cursor-pointer": true,
1197
1196
  "w-full": direction === "vertical",
1198
1197
  "w-full overflow-hidden": direction === "horizontal",
1199
- "!text-charcoal-700 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,
1198
+ "!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,
1200
1199
  ...classNameObject(className)
1201
1200
  }),
1202
1201
  children: /* @__PURE__ */ jsxs(
@@ -1421,7 +1420,7 @@ function Th({ condensed, className, children, sticky, ...opts }) {
1421
1420
  className: classNames({
1422
1421
  ...classNameObject(className),
1423
1422
  "sticky z-10 top-0": !!sticky,
1424
- "border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider": true,
1423
+ "border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-content-secondary uppercase tracking-wider": true,
1425
1424
  "px-6": !condensed,
1426
1425
  "py-4": !condensed && (!className || !className.includes("py-")),
1427
1426
  "px-2.5": !!condensed,
@@ -1550,7 +1549,7 @@ var Input = forwardRef((props, ref) => {
1550
1549
  id,
1551
1550
  className: classNames({
1552
1551
  ...classNameObject(className),
1553
- "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-charcoal-100 dark:bg-charcoal-800 shadow-sm focus:dark:text-primary-500 focus:dark:border-primary-500 focus:dark:ring-primary-500": true,
1552
+ "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,
1554
1553
  "!text-white !border-charcoal-400 !placeholder-charcoal-400 focus:!text-primary-500 focus:!border-primary-500 focus:!ring-primary-500": !!darkMode,
1555
1554
  "h-11": !className || !className.includes("h-"),
1556
1555
  "text-sm": type !== "tel",
@@ -1615,7 +1614,7 @@ var Input = forwardRef((props, ref) => {
1615
1614
  className: classNames({
1616
1615
  "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none focus:outline-none active:outline-none": true,
1617
1616
  "!text-white": !!darkMode,
1618
- "text-gray-600": !focused,
1617
+ "text-content-secondary": !focused,
1619
1618
  "!text-primary-500": focused
1620
1619
  }),
1621
1620
  children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
@@ -1630,7 +1629,7 @@ var Input = forwardRef((props, ref) => {
1630
1629
  )
1631
1630
  ] }),
1632
1631
  error && errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
1633
- info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
1632
+ info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-content-secondary", children: info })
1634
1633
  ] });
1635
1634
  });
1636
1635
  Input.displayName = "Input";
@@ -1650,8 +1649,8 @@ function Label({
1650
1649
  {
1651
1650
  htmlFor,
1652
1651
  className: classNames({
1653
- "block text-sm font-medium mb-1.5 text-black dark:text-white": true,
1654
- "text-black dark:text-white/80": !error,
1652
+ "block text-sm font-medium mb-1.5 text-black dark:text-content-title": true,
1653
+ "text-black dark:text-content-title/80": !error,
1655
1654
  "text-red-600": error,
1656
1655
  ...classNameObject(className)
1657
1656
  }),
@@ -1708,7 +1707,7 @@ var Select = forwardRef((props, ref) => {
1708
1707
  ) }),
1709
1708
  loading && /* @__PURE__ */ jsx("span", { className: "inline-flex relative w-6 loading" }),
1710
1709
  error && errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
1711
- info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
1710
+ info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-content-secondary", children: info })
1712
1711
  ] });
1713
1712
  });
1714
1713
  Select.displayName = "Select";
@@ -1780,7 +1779,7 @@ var Textarea = forwardRef((props, ref) => {
1780
1779
  placeholder,
1781
1780
  className: classNames({
1782
1781
  ...classNameObject(className),
1783
- "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-charcoal-100 dark:bg-charcoal-800 rounded-lg": true,
1782
+ "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,
1784
1783
  "focus:ring-white dark:focus:ring-1 dark:focus:border-primary-600 dark:focus:ring-primary-500": !error,
1785
1784
  "focus:outline-none focus:ring-0 focus:ring-offset-0 dark:focus:border-primary-500": true,
1786
1785
  "border-red-300 text-red-900 placeholder-red-300 dark:placeholder-red-600 focus:border-red-300 focus:shadow-outline-red": error
@@ -1804,7 +1803,7 @@ var Textarea = forwardRef((props, ref) => {
1804
1803
  ) }) })
1805
1804
  ] }),
1806
1805
  error && errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
1807
- info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
1806
+ info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-content-secondary", children: info })
1808
1807
  ] });
1809
1808
  });
1810
1809
  Textarea.displayName = "Textarea";
@@ -1916,8 +1915,8 @@ function NoData({ className }) {
1916
1915
  }
1917
1916
  ),
1918
1917
  /* @__PURE__ */ jsxs("div", { className: "max-w-[90%] flex flex-col text-center", children: [
1919
- /* @__PURE__ */ jsx("h4", { className: "text-6 font-medium text-gray-900 mt-3 dark:text-white/50", children: "It's empty." }),
1920
- /* @__PURE__ */ jsx("p", { className: "text-4 text-gray-700 dark:text-white/60", children: "Nothing to do for now." })
1918
+ /* @__PURE__ */ jsx("h4", { className: "text-6 font-medium text-content-title mt-3 /50", children: "It's empty." }),
1919
+ /* @__PURE__ */ jsx("p", { className: "text-4 text-content-primary dark:text-content-title/60", children: "Nothing to do for now." })
1921
1920
  ] })
1922
1921
  ] });
1923
1922
  }
@@ -2060,7 +2059,7 @@ function useThemeContext() {
2060
2059
  }
2061
2060
  function ThemeToggle() {
2062
2061
  const { theme, handleToggleTheme } = useThemeContext();
2063
- return /* @__PURE__ */ jsxs("div", { className: "text-charcoal-700 dark:text-white z-30 flex space-x-1.5 items-center", children: [
2062
+ return /* @__PURE__ */ jsxs("div", { className: "text-content-primary dark:text-content-title z-30 flex space-x-1.5 items-center", children: [
2064
2063
  /* @__PURE__ */ jsx(
2065
2064
  "div",
2066
2065
  {
@@ -2175,7 +2174,7 @@ function PopoverCard({
2175
2174
  !!description && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 opacity-70", children: description }),
2176
2175
  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: [
2177
2176
  actionIndex > 0 && /* @__PURE__ */ jsx("div", { className: "w-full h-px bg-gray-100 dark:bg-charcoal-800 mb-3" }),
2178
- action.section && /* @__PURE__ */ jsx("p", { className: "px-3 text-xxs sm:text-xs uppercase text-gray-500 dark:text-white dark:hover", children: action.section }),
2177
+ 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 }),
2179
2178
  /* @__PURE__ */ jsx(
2180
2179
  "div",
2181
2180
  {
@@ -2185,7 +2184,7 @@ function PopoverCard({
2185
2184
  children: (action.items || []).map((item) => /* @__PURE__ */ jsx(
2186
2185
  "div",
2187
2186
  {
2188
- className: "text-sm sm:text-base px-3 py-1.5 text-charcoal-700 dark:text-charcoal-300 hover:text-gray-900 hover:bg-gray-200 hover:dark:text-charcoal-200 hover:dark:bg-charcoal-700 cursor-pointer whitespace-normal",
2187
+ 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",
2189
2188
  onClick: () => handleMenuClick(item.action || item.onClick),
2190
2189
  children: item.label
2191
2190
  },
@@ -2234,24 +2233,24 @@ function PopoverCard({
2234
2233
  }),
2235
2234
  children: [
2236
2235
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
2237
- /* @__PURE__ */ jsx("h3", { className: "font-semibold text-gray-900 dark:text-white", children: "Menu" }),
2236
+ /* @__PURE__ */ jsx("h3", { className: "font-semibold text-content-title ", children: "Menu" }),
2238
2237
  /* @__PURE__ */ jsx(
2239
2238
  "div",
2240
2239
  {
2241
2240
  onClick: handleCloseMenu,
2242
- className: "p-1 -mr-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-charcoal-700 rounded-full",
2241
+ className: "p-1 -mr-1 text-content-secondary hover:bg-gray-100 dark:hover:bg-charcoal-700 rounded-full",
2243
2242
  children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/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" }) })
2244
2243
  }
2245
2244
  )
2246
2245
  ] }),
2247
2246
  /* @__PURE__ */ jsxs("div", { className: "px-4 pb-6 max-h-[70vh] overflow-y-auto", children: [
2248
- !!description && /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-gray-500 dark:text-gray-400", children: description }),
2247
+ !!description && /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-content-secondary ", children: description }),
2249
2248
  /* @__PURE__ */ jsx("div", { className: "space-y-4", children: actions && actions.filter((action) => (action.items || []).length > 0).map((action, actionIndex) => /* @__PURE__ */ jsxs("div", { children: [
2250
- action.section && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase text-gray-500 dark:text-gray-400 mb-2", children: action.section }),
2249
+ action.section && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase text-content-secondary mb-2", children: action.section }),
2251
2250
  /* @__PURE__ */ jsx("div", { className: "space-y-1", children: (action.items || []).map((item) => /* @__PURE__ */ jsx(
2252
2251
  "div",
2253
2252
  {
2254
- className: "py-1.5 px-2 -mx-2 flex items-center text-base text-gray-900 dark:text-gray-200 active:bg-gray-50 dark:active:bg-charcoal-700 rounded-lg cursor-pointer",
2253
+ 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",
2255
2254
  onClick: () => handleMenuClick(item.action || item.onClick),
2256
2255
  children: item.label
2257
2256
  },
@@ -2981,7 +2980,7 @@ function ExcelTable({
2981
2980
  "th",
2982
2981
  {
2983
2982
  className: classNames({
2984
- "border-b border-r border-gray-200 dark:border-charcoal-600 bg-gray-50 dark:bg-charcoal-800 px-3 py-2 text-xs font-semibold text-gray-500": true,
2983
+ "border-b border-r border-gray-200 dark:border-charcoal-600 bg-gray-50 dark:bg-charcoal-800 px-3 py-2 text-xs font-semibold text-content-secondary": true,
2985
2984
  "w-auto": !col.width,
2986
2985
  [col.width || ""]: !!col.width,
2987
2986
  "text-left": !col.align,
@@ -3016,7 +3015,7 @@ function ExcelTable({
3016
3015
  "data-row": rowIdx,
3017
3016
  "data-col": colIdx,
3018
3017
  placeholder: typeof placeholder === "function" ? placeholder(rowIdx) : placeholder,
3019
- className: "excel-table-textarea w-full min-h-[38px] px-3 py-2 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-gray-900 dark:text-white placeholder-gray-400 resize-none overflow-hidden leading-normal block",
3018
+ className: "excel-table-textarea w-full min-h-[38px] px-3 py-2 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-content-title placeholder-gray-400 resize-none overflow-hidden leading-normal block",
3020
3019
  style: { height: "auto" }
3021
3020
  }
3022
3021
  ) : col.type === "checkbox" ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[38px]", children: /* @__PURE__ */ jsx(
@@ -3042,7 +3041,7 @@ function ExcelTable({
3042
3041
  "data-row": rowIdx,
3043
3042
  "data-col": colIdx,
3044
3043
  className: classNames({
3045
- "w-full h-full min-h-[38px] px-3 py-1 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-gray-900 dark:text-white": true,
3044
+ "w-full h-full min-h-[38px] px-3 py-1 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-content-title ": true,
3046
3045
  "text-left": col.align !== "center" && col.align !== "right",
3047
3046
  "text-center": col.align === "center",
3048
3047
  "text-right": col.align === "right"
@@ -3062,7 +3061,7 @@ function ExcelTable({
3062
3061
  "data-row": rowIdx,
3063
3062
  "data-col": columns.length,
3064
3063
  tabIndex: 0,
3065
- className: "cursor-pointer text-gray-300 hover:text-red-500 w-full h-[38px] flex items-center justify-center transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
3064
+ className: "cursor-pointer text-content-disabled hover:text-red-500 w-full h-[38px] flex items-center justify-center transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
3066
3065
  children: "\xD7"
3067
3066
  }
3068
3067
  ) })
@@ -3074,7 +3073,7 @@ function ExcelTable({
3074
3073
  onClick: onRowAdd,
3075
3074
  onKeyDown: (e) => handleCellNavigation(e, data.length, 0),
3076
3075
  tabIndex: 0,
3077
- className: "w-full cursor-pointer text-left px-3 py-2 text-gray-400 text-xs font-medium hover:text-primary-500 hover:bg-gray-50 dark:hover:bg-charcoal-800 transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
3076
+ className: "w-full cursor-pointer text-left px-3 py-2 text-content-placeholder text-xs font-medium hover:text-primary-500 hover:bg-gray-50 dark:hover:bg-charcoal-800 transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
3078
3077
  children: addRowLabel
3079
3078
  }
3080
3079
  ) }) })
@@ -3271,7 +3270,7 @@ function Coverflow({ images = [], onClose }) {
3271
3270
  ),
3272
3271
  (img.imageTitle || img.imageDescription) && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/90 via-black/50 to-transparent text-white text-center pointer-events-none", children: [
3273
3272
  img.imageTitle && /* @__PURE__ */ jsx(H3, { className: "!text-base mb-1", children: img.imageTitle }),
3274
- img.imageDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-charcoal-200 max-w-2xl mx-auto", children: img.imageDescription })
3273
+ img.imageDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-content-disabled max-w-2xl mx-auto", children: img.imageDescription })
3275
3274
  ] })
3276
3275
  ] })
3277
3276
  },
@@ -3427,9 +3426,9 @@ function DataTable({
3427
3426
  "table",
3428
3427
  {
3429
3428
  className: classNames({
3430
- "w-full text-sm dark:text-charcoal-100 rounded-xl border-separate border-spacing-0": true,
3429
+ "w-full text-sm dark:text-content-primary rounded-xl border-separate border-spacing-0": true,
3431
3430
  "text-charcoal-100": !!darkMode,
3432
- "text-charcoal-500": !darkMode
3431
+ "text-content-secondary": !darkMode
3433
3432
  }),
3434
3433
  children: [
3435
3434
  /* @__PURE__ */ jsxs("thead", { children: [