@situaction/traq-ui-ste 1.0.27 → 1.1.0

package/dist/components/tabs/Tabs.js

@@ -1,54 +1,67 @@
-import { jsxs as z, jsx as n } from "react/jsx-runtime";
-import { useState as u, useRef as a, useLayoutEffect as R } from "react";
-import { Button as y } from "../button/Button.js";
-import { IconButton as H } from "../icon-button/IconButton.js";
-import '../../styles/Tabs.css';const C = "_underline_118wv_33", o = {
-  "tab-container": "_tab-container_118wv_23",
-  "tab-items": "_tab-items_118wv_28",
-  underline: C,
-  "flexHorizontal-center": "_flexHorizontal-center_118wv_41",
-  "flexHorizontal-left": "_flexHorizontal-left_118wv_47",
-  "flexHorizontal-right": "_flexHorizontal-right_118wv_53"
-}, j = ({ listItems: r, type: d, onTabSelect: _, defaultActiveTab: m = 0, position: b = "left" }) => {
-  const [l, x] = u(m), [v, h] = u({}), c = a(null), p = a(null), s = a(new Array(r.length).fill(null)), f = (e) => {
-    x(e), _(r[e]);
-  }, w = (e) => {
-    if (c.current && e) {
-      const t = e.getBoundingClientRect(), i = c.current.getBoundingClientRect();
+import { jsxs as H, jsx as a } from "react/jsx-runtime";
+import { useState as d, useRef as s, useLayoutEffect as C } from "react";
+import { Button as $ } from "../button/Button.js";
+import { IconButton as B } from "../icon-button/IconButton.js";
+import '../../styles/Tabs.css';const N = "_underline_udv7v_50", n = {
+  "tab-container": "_tab-container_udv7v_23",
+  "tab-container-button": "_tab-container-button_udv7v_27",
+  "tab-container-icon": "_tab-container-icon_udv7v_32",
+  "tab-container-text": "_tab-container-text_udv7v_32",
+  "tab-items": "_tab-items_udv7v_35",
+  "tab-items-button": "_tab-items-button_udv7v_39",
+  "selected-button": "_selected-button_udv7v_44",
+  underline: N,
+  "flexHorizontal-center": "_flexHorizontal-center_udv7v_58",
+  "flexHorizontal-left": "_flexHorizontal-left_udv7v_64",
+  "flexHorizontal-right": "_flexHorizontal-right_udv7v_70"
+}, w = ({ listItems: r, type: o, onTabSelect: _, defaultActiveTab: f = 0, position: v = "left" }) => {
+  const [l, m] = d(f), [x, h] = d({}), c = s(null), g = s(null), u = s(new Array(r.length).fill(null)), b = (t) => {
+    m(t), _(r[t]);
+  }, z = (t) => {
+    if (c.current && t) {
+      const e = t.getBoundingClientRect(), i = c.current.getBoundingClientRect();
       h({
-        left: `${t.left - i.left}px`,
-        width: `${t.width}px`
+        left: `${e.left - i.left}px`,
+        width: `${e.width}px`
       });
     }
-  }, g = [
-    o[`flexHorizontal-${b}`],
-    o["tab-items"]
+  }, R = [
+    n[`flexHorizontal-${v}`],
+    o === "button" ? n["tab-items-button"] : n["tab-items"]
   ].filter(Boolean).join(" ");
-  return R(() => {
-    const e = s.current[l];
-    e && w(e);
-  }, [l]), /* @__PURE__ */ z("div", { className: `tab ${o["tab-container"]}`, ref: c, children: [
-    /* @__PURE__ */ n("div", { className: g, children: r.map((e, t) => /* @__PURE__ */ n("div", { ref: (i) => s.current[t] = i, children: d === "text" ? /* @__PURE__ */ n(
-      y,
+  return C(() => {
+    const t = u.current[l];
+    t && z(t);
+  }, [l]), /* @__PURE__ */ H("div", { className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]}`, ref: c, children: [
+    /* @__PURE__ */ a("div", { className: R, children: r.map((t, e) => /* @__PURE__ */ a(
+      "div",
       {
-        label: e,
-        mode: "text",
-        selected: t === l,
-        onClick: () => f(t)
-      }
-    ) : /* @__PURE__ */ n(
-      H,
-      {
-        mode: "icon",
-        size: "s",
-        selected: t === l,
-        onClick: () => f(t),
-        children: e
-      }
-    ) }, t)) }),
-    /* @__PURE__ */ n("div", { ref: p, className: o.underline, style: v })
+        ref: (i) => u.current[e] = i,
+        className: o === "button" && e === l ? n["selected-button"] : "",
+        children: o === "icon" ? /* @__PURE__ */ a(
+          B,
+          {
+            mode: "icon",
+            size: "s",
+            selected: e === l,
+            onClick: () => b(e),
+            children: t
+          }
+        ) : /* @__PURE__ */ a(
+          $,
+          {
+            label: t,
+            mode: o === "text" ? "text" : "ghost",
+            selected: e === l,
+            onClick: () => b(e)
+          }
+        )
+      },
+      e
+    )) }),
+    o !== "button" && /* @__PURE__ */ a("div", { ref: g, className: n.underline, style: x })
   ] });
 };
 export {
-  j as Tabs
+  w as Tabs
 };

package/dist/components/tag-counter/TagCounter.js

@@ -1,20 +1,17 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useTheme as u } from "../theme/ThemeContext.js";
-import '../../styles/TagCounter.css';const e = {
-  "tag-counter": "_tag-counter_1wqu5_23",
-  "dark-mode": "_dark-mode_1wqu5_34",
-  "tag-counter-size-xl": "_tag-counter-size-xl_1wqu5_38",
-  "tag-counter-size-l": "_tag-counter-size-l_1wqu5_45",
-  "tag-counter-size-m": "_tag-counter-size-m_1wqu5_52",
-  "tag-counter-size-s": "_tag-counter-size-s_1wqu5_59"
-}, _ = ({ label: t, size: o = "m" }) => {
-  const { mode: r } = u(), s = [
-    e["tag-counter"],
-    e[`tag-counter-size-${o}`],
-    r === "dark" && e["dark-mode"]
+import { jsx as n } from "react/jsx-runtime";
+import '../../styles/TagCounter.css';const t = {
+  "tag-counter": "_tag-counter_56oxp_23",
+  "tag-counter-size-xl": "_tag-counter-size-xl_56oxp_34",
+  "tag-counter-size-l": "_tag-counter-size-l_56oxp_41",
+  "tag-counter-size-m": "_tag-counter-size-m_56oxp_48",
+  "tag-counter-size-s": "_tag-counter-size-s_56oxp_55"
+}, a = ({ label: e, size: o = "m" }) => {
+  const s = [
+    t["tag-counter"],
+    t[`tag-counter-size-${o}`]
   ].join(" ");
-  return /* @__PURE__ */ a("div", { className: s, children: t });
+  return /* @__PURE__ */ n("div", { className: s, children: e });
 };
 export {
-  _ as TagCounter
+  a as TagCounter
 };

package/dist/components/theme/ThemeContext.d.ts

@@ -16,11 +16,13 @@ interface ThemeContextType {
     mode: Mode;
     toggleMode: () => void;
     setMode: Dispatch<SetStateAction<Mode>>;
+    customVariables: Record<string, string>[] | undefined;
 }
 interface ThemeProviderProps {
     children: ReactNode;
     theme?: Theme;
     mode?: Mode;
+    customVariables?: Record<string, string>[] | undefined;
 }
 export declare const ThemeProvider: FC<ThemeProviderProps>;
 export declare const useTheme: () => ThemeContextType;

package/dist/components/theme/ThemeContext.js

@@ -1,27 +1,32 @@
-import { jsx as h } from "react/jsx-runtime";
-import { createContext as S, useState as $, useContext as k } from "react";
-import { baseTheme as r } from "./createTheme.js";
-import '../../styles/ThemeContext.css';const x = S(void 0), V = ({ children: a, theme: t, mode: b }) => {
-  var c, s, p, d, e, m, n, v;
-  const [o] = $(t ?? r), [l, y] = $(b ?? "light"), C = () => {
-    y((i) => i === "light" ? "dark" : "light");
-  }, F = (i) => [950, 900, 800, 700, 600, 500, 400, 300, 200, 100, 50].reduce((g, f) => (g[`--primary-color-${f}`] = `var(--color-${i}-${f})`, g), {}), M = {
-    "--font-family": ((c = o == null ? void 0 : o.typography) == null ? void 0 : c.fontFamily) ?? r.typography.fontFamily,
-    "--font-family-secondary": ((s = o == null ? void 0 : o.typography) == null ? void 0 : s.fontFamilySecondary) ?? r.typography.fontFamilySecondary,
-    ...F(((p = o == null ? void 0 : o.color) == null ? void 0 : p.primary) ?? r.color.primary),
-    "--primary-dark-color-disabled": t === void 0 ? "var(--color-blue-grey-800)" : "var(--color-dark-10)",
-    "--primary-color": l === "light" ? `var(--color-${((d = o == null ? void 0 : o.color) == null ? void 0 : d.primary) ?? r.color.primary}-900)` : `var(--color-${((e = o == null ? void 0 : o.color) == null ? void 0 : e.primary) ?? r.color.primary}-200)`,
-    "--secondary-color": l === "light" ? `var(--color-${((m = o == null ? void 0 : o.color) == null ? void 0 : m.primary) ?? r.color.primary}-200)` : `var(--color-${((n = o == null ? void 0 : o.color) == null ? void 0 : n.primary) ?? r.color.primary}-900)`,
-    "--color-text": l === "light" ? `var(--color-${((v = o == null ? void 0 : o.color) == null ? void 0 : v.primary) ?? r.color.primary}-900)` : "var(--color-light-100)"
+import { jsx as l } from "react/jsx-runtime";
+import { createContext as b, useState as i, useEffect as w, useContext as E } from "react";
+import { baseTheme as m } from "./createTheme.js";
+import { variables_dark as P } from "./variables_dark.js";
+import { variables_light as p } from "./variables_light.js";
+import { primary as u } from "./primary.js";
+import '../../styles/ThemeContext.css';const c = b(void 0), q = ({ children: o, theme: g, mode: C, customVariables: r }) => {
+  var a, h;
+  const [t] = i(g ?? m), [n, s] = i(C ?? "light"), [v, x] = i(r ?? [u, p]);
+  w(() => {
+    x(r ?? [u, n === "light" ? p : P]);
+  }, [n]);
+  const F = () => {
+    s((e) => e === "light" ? "dark" : "light");
+  }, M = (e) => e.length ? e.reduce((y, d) => (Object.keys(d).forEach((f) => {
+    y[f] = d[f];
+  }), y), {}) : e, S = {
+    "--font-family": ((a = t == null ? void 0 : t.typography) == null ? void 0 : a.fontFamily) ?? m.typography.fontFamily,
+    "--font-family-secondary": ((h = t == null ? void 0 : t.typography) == null ? void 0 : h.fontFamilySecondary) ?? m.typography.fontFamilySecondary,
+    ...M(v)
   };
-  return /* @__PURE__ */ h(x.Provider, { value: { theme: o, mode: l, toggleMode: C, setMode: y }, children: /* @__PURE__ */ h("div", { style: { ...M, height: "100%" }, children: a }) });
-}, q = () => {
-  const a = k(x);
-  if (a === void 0)
+  return /* @__PURE__ */ l(c.Provider, { value: { theme: t, mode: n, toggleMode: F, setMode: s, customVariables: r }, children: /* @__PURE__ */ l("div", { style: { ...S, height: "100%" }, children: o }) });
+}, z = () => {
+  const o = E(c);
+  if (o === void 0)
     throw new Error("useTheme must be used within a ThemeProvider");
-  return a;
+  return o;
 };
 export {
-  V as ThemeProvider,
-  q as useTheme
+  q as ThemeProvider,
+  z as useTheme
 };

package/dist/components/theme/primary.d.ts

@@ -0,0 +1,229 @@
+export declare const primary: {
+    '--color-light-100': string;
+    '--color-light-90': string;
+    '--color-light-80': string;
+    '--color-light-70': string;
+    '--color-light-60': string;
+    '--color-light-50': string;
+    '--color-light-40': string;
+    '--color-light-30': string;
+    '--color-light-20': string;
+    '--color-light-10': string;
+    '--color-light-5': string;
+    '--color-light-0': string;
+    '--color-dark-100': string;
+    '--color-dark-90': string;
+    '--color-dark-80': string;
+    '--color-dark-70': string;
+    '--color-dark-60': string;
+    '--color-dark-50': string;
+    '--color-dark-40': string;
+    '--color-dark-30': string;
+    '--color-dark-20': string;
+    '--color-dark-10': string;
+    '--color-dark-5': string;
+    '--color-dark-0': string;
+    '--color-gray-50': string;
+    '--color-gray-100': string;
+    '--color-gray-200': string;
+    '--color-gray-300': string;
+    '--color-gray-400': string;
+    '--color-gray-500': string;
+    '--color-gray-600': string;
+    '--color-gray-700': string;
+    '--color-gray-800': string;
+    '--color-gray-900': string;
+    '--color-gray-950': string;
+    '--color-blue-trans-100': string;
+    '--color-blue-trans-90': string;
+    '--color-blue-trans-80': string;
+    '--color-blue-trans-70': string;
+    '--color-blue-trans-60': string;
+    '--color-blue-trans-50': string;
+    '--color-blue-trans-40': string;
+    '--color-blue-trans-30': string;
+    '--color-blue-trans-20': string;
+    '--color-blue-trans-10': string;
+    '--color-blue-trans-5': string;
+    '--color-blue-trans-0': string;
+    '--color-blue-gray-50': string;
+    '--color-blue-gray-100': string;
+    '--color-blue-gray-200': string;
+    '--color-blue-gray-300': string;
+    '--color-blue-gray-400': string;
+    '--color-blue-gray-500': string;
+    '--color-blue-gray-600': string;
+    '--color-blue-gray-700': string;
+    '--color-blue-gray-800': string;
+    '--color-blue-gray-900': string;
+    '--color-blue-gray-950': string;
+    '--color-blue-sky-50': string;
+    '--color-blue-sky-100': string;
+    '--color-blue-sky-200': string;
+    '--color-blue-sky-300': string;
+    '--color-blue-sky-400': string;
+    '--color-blue-sky-500': string;
+    '--color-blue-sky-600': string;
+    '--color-blue-sky-700': string;
+    '--color-blue-sky-800': string;
+    '--color-blue-sky-900': string;
+    '--color-blue-sky-950': string;
+    '--color-blue-dark-50': string;
+    '--color-blue-dark-100': string;
+    '--color-blue-dark-200': string;
+    '--color-blue-dark-300': string;
+    '--color-blue-dark-400': string;
+    '--color-blue-dark-500': string;
+    '--color-blue-dark-600': string;
+    '--color-blue-dark-700': string;
+    '--color-blue-dark-800': string;
+    '--color-blue-dark-900': string;
+    '--color-blue-dark-950': string;
+    '--color-blue-situaction-50': string;
+    '--color-blue-situaction-100': string;
+    '--color-blue-situaction-secondary-200': string;
+    '--color-blue-situaction-300': string;
+    '--color-blue-situaction-400': string;
+    '--color-blue-situaction-tertiary-500': string;
+    '--color-blue-situaction-600': string;
+    '--color-blue-situaction-700': string;
+    '--color-blue-situaction-800': string;
+    '--color-blue-situaction-900': string;
+    '--color-blue-situaction-950': string;
+    '--color-error-50': string;
+    '--color-error-100': string;
+    '--color-error-200': string;
+    '--color-error-300': string;
+    '--color-error-400': string;
+    '--color-error-500': string;
+    '--color-error-600': string;
+    '--color-error-700': string;
+    '--color-error-800': string;
+    '--color-error-900': string;
+    '--color-error-950': string;
+    '--color-succes-50': string;
+    '--color-succes-100': string;
+    '--color-succes-200': string;
+    '--color-succes-300': string;
+    '--color-succes-400': string;
+    '--color-succes-500': string;
+    '--color-succes-600': string;
+    '--color-succes-700': string;
+    '--color-succes-800': string;
+    '--color-succes-900': string;
+    '--color-succes-950': string;
+    '--color-brown-50': string;
+    '--color-brown-100': string;
+    '--color-brown-200': string;
+    '--color-brown-300': string;
+    '--color-brown-400': string;
+    '--color-brown-500': string;
+    '--color-brown-600': string;
+    '--color-brown-700': string;
+    '--color-brown-800': string;
+    '--color-brown-900': string;
+    '--color-brown-950': string;
+    '--color-emerald-50': string;
+    '--color-emerald-100': string;
+    '--color-emerald-200': string;
+    '--color-emerald-300': string;
+    '--color-emerald-400': string;
+    '--color-emerald-500': string;
+    '--color-emerald-600': string;
+    '--color-emerald-700': string;
+    '--color-emerald-800': string;
+    '--color-emerald-900': string;
+    '--color-emerald-950': string;
+    '--color-purple-50': string;
+    '--color-purple-100': string;
+    '--color-purple-200': string;
+    '--color-purple-300': string;
+    '--color-purple-400': string;
+    '--color-purple-500': string;
+    '--color-purple-600': string;
+    '--color-purple-700': string;
+    '--color-purple-800': string;
+    '--color-purple-900': string;
+    '--color-purple-950': string;
+    '--color-pink-50': string;
+    '--color-pink-100': string;
+    '--color-pink-200': string;
+    '--color-pink-300': string;
+    '--color-pink-400': string;
+    '--color-pink-500': string;
+    '--color-pink-600': string;
+    '--color-pink-700': string;
+    '--color-pink-800': string;
+    '--color-pink-900': string;
+    '--color-pink-950': string;
+    '--color-gold-50': string;
+    '--color-gold-100': string;
+    '--color-gold-200': string;
+    '--color-gold-300': string;
+    '--color-gold-400': string;
+    '--color-gold-500': string;
+    '--color-gold-600': string;
+    '--color-gold-700': string;
+    '--color-gold-800': string;
+    '--color-gold-900': string;
+    '--color-gold-950': string;
+    '--color-color': string;
+    '--color-sable-50': string;
+    '--color-sable-100': string;
+    '--color-sable-200': string;
+    '--color-sable-300': string;
+    '--color-sable-400': string;
+    '--color-sable-500': string;
+    '--color-sable-600': string;
+    '--color-sable-700': string;
+    '--color-sable-800': string;
+    '--color-sable-900': string;
+    '--color-sable-950': string;
+    '--color-purple-dark-50': string;
+    '--color-purple-dark-100': string;
+    '--color-purple-dark-200': string;
+    '--color-purple-dark-300': string;
+    '--color-purple-dark-400': string;
+    '--color-purple-dark-500': string;
+    '--color-purple-dark-600': string;
+    '--color-purple-dark-700': string;
+    '--color-purple-dark-800': string;
+    '--color-purple-dark-900': string;
+    '--color-purple-dark-950': string;
+    '--color-sable-trans-100': string;
+    '--color-sable-trans-90': string;
+    '--color-sable-trans-80': string;
+    '--color-sable-trans-70': string;
+    '--color-sable-trans-60': string;
+    '--color-sable-trans-50': string;
+    '--color-sable-trans-40': string;
+    '--color-sable-trans-30': string;
+    '--color-sable-trans-20': string;
+    '--color-sable-trans-10': string;
+    '--color-sable-trans-5': string;
+    '--color-sable-trans-0': string;
+    '--color-gray-trans-100': string;
+    '--color-gray-trans-90': string;
+    '--color-gray-trans-80': string;
+    '--color-gray-trans-70': string;
+    '--color-gray-trans-60': string;
+    '--color-gray-trans-50': string;
+    '--color-gray-trans-40': string;
+    '--color-gray-trans-30': string;
+    '--color-gray-trans-20': string;
+    '--color-gray-trans-10': string;
+    '--color-gray-trans-5': string;
+    '--color-gray-trans-0': string;
+    '--color-purple-trans-100': string;
+    '--color-purple-trans-90': string;
+    '--color-purple-trans-80': string;
+    '--color-purple-trans-70': string;
+    '--color-purple-trans-60': string;
+    '--color-purple-trans-50': string;
+    '--color-purple-trans-40': string;
+    '--color-purple-trans-30': string;
+    '--color-purple-trans-20': string;
+    '--color-purple-trans-10': string;
+    '--color-purple-trans-5': string;
+    '--color-purple-trans-0': string;
+};