triafly-ui-kit 1.0.23 → 1.0.24

package/dist/components/Ui/TextInput/TextInput.stories.js

@@ -0,0 +1,225 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { TextInput as l } from "./TextInput.js";
+const y = {
+  title: "UIKit/TextInput",
+  component: l,
+  tags: ["autodocs"],
+  argTypes: {
+    iconType: {
+      control: {
+        type: "select",
+        options: [void 0, "email", "password", "search", "checkmark"]
+      }
+    },
+    type: {
+      control: {
+        type: "select",
+        options: ["text", "password", "email", "search"]
+      }
+    },
+    className: {
+      control: {
+        type: "text",
+        description: "Комбинируйте классы: 'sm', 'rounded' через пробел"
+      }
+    }
+  }
+}, f = {
+  args: {
+    placeholder: "Введите текст...",
+    label: "Текстовое поле"
+  }
+}, v = {
+  args: {
+    placeholder: "Поиск...",
+    iconType: "search"
+  }
+}, N = {
+  args: {
+    label: "Email",
+    placeholder: "Введите email",
+    hasError: !0,
+    errorMessage: "Неверный формат email",
+    iconType: "email"
+  }
+}, k = {
+  args: {
+    label: "Заблокированное поле",
+    value: "Нельзя изменить",
+    isDisabled: !0
+  }
+}, C = {
+  args: {
+    label: "Поле с очисткой",
+    placeholder: "Введите и очистите",
+    isClearable: !0,
+    value: "Пример текста"
+  }
+}, T = {
+  args: {
+    label: "Поле с загрузкой",
+    isLoading: !0
+  }
+}, I = {
+  args: {
+    placeholder: "Маленькое поле...",
+    label: "Текстовое поле (sm)",
+    className: "sm"
+  }
+}, D = {
+  args: {
+    placeholder: "Маленькое и круглое...",
+    label: "Поле (sm + rounded)",
+    className: "sm rounded"
+  }
+}, S = {
+  render: () => /* @__PURE__ */ a("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px" }, children: [
+    /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+      /* @__PURE__ */ e("h3", { children: "Обычный размер (44px)" }),
+      /* @__PURE__ */ e(l, { label: "Обычное поле", placeholder: "Просто текст" }),
+      /* @__PURE__ */ e(l, { label: "С иконкой", iconType: "email", placeholder: "email@example.com" }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          label: "С ошибкой",
+          hasError: !0,
+          errorMessage: "Ошибка валидации",
+          value: "Неверное значение"
+        }
+      ),
+      /* @__PURE__ */ e(l, { label: "С очисткой", isClearable: !0, value: "Можно очистить" }),
+      /* @__PURE__ */ e(l, { label: "Загрузка", isLoading: !0 }),
+      /* @__PURE__ */ e(l, { label: "Закругленное", className: "rounded", placeholder: "rounded" })
+    ] }),
+    /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+      /* @__PURE__ */ e("h3", { children: "Маленький размер (36px)" }),
+      /* @__PURE__ */ e(l, { label: "Поле sm", className: "sm", placeholder: "Маленькое поле" }),
+      /* @__PURE__ */ e(l, { label: "С иконкой", className: "sm", iconType: "search", placeholder: "Поиск..." }),
+      /* @__PURE__ */ e(
+        l,
+        {
+          label: "С ошибкой",
+          className: "sm",
+          hasError: !0,
+          errorMessage: "Маленькая ошибка",
+          value: "Ошибка"
+        }
+      ),
+      /* @__PURE__ */ e(l, { label: "С очисткой", className: "sm", isClearable: !0, value: "Можно очистить" }),
+      /* @__PURE__ */ e(l, { label: "Загрузка", className: "sm", isLoading: !0 }),
+      /* @__PURE__ */ e(l, { label: "Закругленное sm", className: "sm rounded", placeholder: "sm + rounded" })
+    ] })
+  ] })
+}, E = {
+  render: () => /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: "8px", maxWidth: "400px" }, children: [
+    /* @__PURE__ */ e(l, { label: "Обычный размер (44px)", value: "Текст" }),
+    /* @__PURE__ */ e(l, { label: "Маленький (36px)", className: "sm", value: "Текст" }),
+    /* @__PURE__ */ e(l, { label: "Обычный + rounded", className: "rounded", value: "Текст" }),
+    /* @__PURE__ */ e(l, { label: "Маленький + rounded", className: "sm rounded", value: "Текст" }),
+    /* @__PURE__ */ e("div", { style: { marginTop: "16px", height: "1px", background: "#eee" } }),
+    /* @__PURE__ */ e(
+      l,
+      {
+        label: "Комбинированный пример",
+        className: "sm rounded",
+        iconType: "password",
+        type: "password",
+        isClearable: !0,
+        value: "password123"
+      }
+    )
+  ] })
+}, w = {
+  render: function() {
+    const [i, p] = t(""), [r, m] = t(!1), [c, h] = t(!1), [o, n] = t(!1), d = [r ? "sm" : "", c ? "rounded" : ""].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ a("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          label: "Интерактивная демонстрация",
+          placeholder: "Попробуйте ввести текст",
+          value: i,
+          onChange: (s) => {
+            p(s.target.value), n(s.target.value.length > 0 && s.target.value.length < 3);
+          },
+          className: d,
+          hasError: o,
+          errorMessage: o ? "Слишком короткое значение" : "",
+          isClearable: !0,
+          iconType: "search"
+        }
+      ),
+      /* @__PURE__ */ a("div", { style: { display: "flex", flexWrap: "wrap", gap: "16px" }, children: [
+        /* @__PURE__ */ a("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "checkbox",
+              checked: r,
+              onChange: (s) => m(s.target.checked)
+            }
+          ),
+          "Маленький размер (sm)"
+        ] }),
+        /* @__PURE__ */ a("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "checkbox",
+              checked: c,
+              onChange: (s) => h(s.target.checked)
+            }
+          ),
+          "Закругленные углы"
+        ] }),
+        /* @__PURE__ */ a("label", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              type: "checkbox",
+              checked: o,
+              onChange: (s) => n(s.target.checked)
+            }
+          ),
+          "Показать ошибку"
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { style: { background: "#f5f5f5", padding: "12px", borderRadius: "4px" }, children: [
+        /* @__PURE__ */ e("h4", { children: "Текущие параметры:" }),
+        /* @__PURE__ */ a("ul", { children: [
+          /* @__PURE__ */ a("li", { children: [
+            "Классы: ",
+            /* @__PURE__ */ e("strong", { children: d || "default" })
+          ] }),
+          /* @__PURE__ */ a("li", { children: [
+            "Высота: ",
+            /* @__PURE__ */ e("strong", { children: r ? "36px" : "44px" })
+          ] }),
+          c && /* @__PURE__ */ a("li", { children: [
+            "Радиус: ",
+            /* @__PURE__ */ e("strong", { children: r ? "18px" : "22px" })
+          ] }),
+          /* @__PURE__ */ a("li", { children: [
+            "Состояние: ",
+            o ? "❌ Ошибка" : "✅ Нормальное"
+          ] })
+        ] })
+      ] })
+    ] });
+  }
+};
+export {
+  S as AllStates,
+  C as Clearable,
+  f as Default,
+  k as Disabled,
+  w as InteractiveDemo,
+  T as Loading,
+  E as SizeComparison,
+  D as SmallRounded,
+  I as SmallSize,
+  N as WithError,
+  v as WithIcon,
+  y as default
+};

package/dist/components/Ui/TextInput/index.js

@@ -0,0 +1,4 @@
+import { TextInput as o } from "./TextInput.js";
+export {
+  o as TextInput
+};

package/dist/components/Ui/TextareaInput/TextareaInput.js

@@ -0,0 +1,68 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { forwardRef as C, useState as V } from "react";
+import { c as $ } from "../../../index-2QXL0WYc.js";
+import { IconX as b } from "../Icons/Icons.js";
+import '../../../assets/TextareaInput.css';const g = C(
+  ({
+    label: c,
+    name: f = "TextareaInput",
+    placeholder: p,
+    errorMessage: i,
+    hasError: u = !1,
+    isDisabled: x,
+    charLimit: a,
+    onChange: l,
+    value: o,
+    // Значение из пропсов
+    resize: v = !1,
+    isClearable: d,
+    spellCheck: N = !1
+  }, h) => {
+    const [I, m] = V(""), s = o !== void 0, t = s ? o : I, w = (z) => {
+      const n = z.target.value;
+      (!a || n.length <= a) && (s || m(n), l && l(n));
+    }, T = () => {
+      s && l ? l("") : m("");
+    }, j = $({
+      "no-resize": !v
+    });
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        className: `textarea-input 
+      ${u && "invalid"}
+      ${d && "clearable"}`,
+        children: [
+          c && /* @__PURE__ */ e("label", { children: c }),
+          /* @__PURE__ */ r("div", { className: "textarea-wrapper", children: [
+            /* @__PURE__ */ e(
+              "textarea",
+              {
+                ref: h,
+                className: j,
+                value: t,
+                onChange: w,
+                name: f,
+                placeholder: p,
+                disabled: x,
+                spellCheck: N
+              }
+            ),
+            d && t && /* @__PURE__ */ e("div", { className: "clear-value", onClick: T, children: /* @__PURE__ */ e(b, { size: 20 }) })
+          ] }),
+          a && /* @__PURE__ */ r("p", { className: "char-limit", children: [
+            t.length,
+            "/",
+            a
+          ] }),
+          i && /* @__PURE__ */ e("span", { className: "helper-text", children: i })
+        ]
+      }
+    );
+  }
+);
+g.displayName = "TextareaInput";
+export {
+  g as TextareaInput,
+  g as default
+};

package/dist/components/Ui/TextareaInput/TextareaInput.stories.js

@@ -0,0 +1,19 @@
+import { jsx as a } from "react/jsx-runtime";
+import { TextareaInput as e } from "./TextareaInput.js";
+const l = {
+  title: "UIKit/TextareaInput",
+  component: e
+}, r = {
+  render: (t) => /* @__PURE__ */ a(e, { ...t })
+}, m = {
+  ...r,
+  args: {
+    label: "Введите текст:",
+    name: "textarea",
+    placeholder: "Ваш текст"
+  }
+};
+export {
+  m as Default,
+  l as default
+};

package/dist/components/Ui/TextareaInput/index.js

@@ -0,0 +1,4 @@
+import { TextareaInput as t } from "./TextareaInput.js";
+export {
+  t as TextareaInput
+};

package/dist/components/Ui/Tooltip/Tooltip.js

@@ -0,0 +1,92 @@
+import { jsxs as I, jsx as O } from "react/jsx-runtime";
+import { useState as g, useRef as C, useCallback as u, useEffect as m } from "react";
+import '../../../assets/Tooltip2.css';const V = ({
+  content: E,
+  children: y,
+  position: n = "top",
+  trigger: l = "hover",
+  clickBehavior: d = "toggle",
+  className: L = ""
+}) => {
+  const [o, v] = g(!1), [P, T] = g(n), [k, w] = g(!1), f = C(null), c = C(null), b = u(() => {
+    if (!c.current || !f.current) return n;
+    const e = c.current.getBoundingClientRect(), r = f.current.getBoundingClientRect(), a = {
+      top: {
+        fits: e.top - r.height - 8 > 0,
+        space: e.top
+      },
+      bottom: {
+        fits: window.innerHeight - e.bottom - r.height - 8 > 0,
+        space: window.innerHeight - e.bottom
+      },
+      left: {
+        fits: e.left - r.width - 8 > 0,
+        space: e.left
+      },
+      right: {
+        fits: window.innerWidth - e.right - r.width - 8 > 0,
+        space: window.innerWidth - e.right
+      }
+    };
+    if (a[n].fits) return n;
+    const p = ["top", "right", "bottom", "left"], M = p.indexOf(n);
+    for (let s = 1; s <= p.length; s++) {
+      const h = p[(M + s) % p.length];
+      if (a[h].fits) return h;
+    }
+    return Object.entries(a).reduce(
+      (s, [h, { space: j }]) => j > a[s].space ? h : s,
+      n
+    );
+  }, [n]), i = u(() => {
+    w(!1), v(!0);
+  }, []), t = u(() => {
+    v(!1), w(!1);
+  }, []), R = u(() => {
+    o ? t() : i();
+  }, [o, t, i]), x = u(() => {
+    d === "toggle" ? R() : d === "show" ? i() : d === "hide" && t();
+  }, [d, R, i, t]);
+  return m(() => {
+    o && f.current && (T(b()), w(!0));
+  }, [o, b]), m(() => {
+    if (o) {
+      const e = () => t();
+      return window.addEventListener("scroll", e, !0), () => {
+        window.removeEventListener("scroll", e, !0);
+      };
+    }
+  }, [o, t]), m(() => {
+    if ((l === "click" || l === "mixed") && o) {
+      const e = (r) => {
+        c.current && !c.current.contains(r.target) && t();
+      };
+      return document.addEventListener("mousedown", e), () => {
+        document.removeEventListener("mousedown", e);
+      };
+    }
+  }, [o, l, t]), /* @__PURE__ */ I("div", { className: "tooltip-wrapper", ref: c, ...l === "hover" ? { onMouseEnter: i, onMouseLeave: t } : l === "click" ? { onClick: x } : {
+    onMouseEnter: i,
+    onMouseLeave: t,
+    onClick: x
+  }, children: [
+    y,
+    /* @__PURE__ */ O(
+      "div",
+      {
+        className: `tooltip-content ${L} tooltip-${P}`,
+        ref: f,
+        role: "tooltip",
+        style: {
+          visibility: o ? "visible" : "hidden",
+          opacity: k ? 1 : 0,
+          transition: "opacity 0.15s ease-out"
+        },
+        children: E
+      }
+    )
+  ] });
+};
+export {
+  V as Tooltip
+};

package/dist/components/Ui/Tooltip/Tooltip.stories.js

@@ -0,0 +1,92 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { Tooltip as o } from "./Tooltip.js";
+import '../../../assets/Tooltip.css';const c = "_container_193w2_1", r = "_trigger_193w2_14", n = "_clickTrigger_193w2_29 _trigger_193w2_14", l = "_positionsContainer_193w2_38", s = "_positionGroup_193w2_42", t = {
+  container: c,
+  trigger: r,
+  clickTrigger: n,
+  positionsContainer: l,
+  positionGroup: s
+}, d = {
+  title: "UIKit/Tooltip",
+  component: o,
+  tags: ["autodocs"],
+  argTypes: {
+    position: {
+      control: "select",
+      options: ["top", "bottom", "left", "right"]
+    },
+    trigger: {
+      control: "select",
+      options: ["hover", "click", "mixed"]
+    },
+    clickBehavior: {
+      control: "select",
+      options: ["toggle", "show", "hide"]
+    }
+  }
+}, p = {
+  render: () => /* @__PURE__ */ e("div", { className: t.container, children: [
+    /* @__PURE__ */ i(o, { content: "Top-left tooltip", className: "white", position: "top", children: /* @__PURE__ */ i("div", { className: t.trigger, children: "Top-left (hover)" }) }),
+    /* @__PURE__ */ i(o, { content: "Top-right tooltip", position: "top", trigger: "click", clickBehavior: "toggle", children: /* @__PURE__ */ i("div", { className: t.clickTrigger, children: "Top-right (click toggle)" }) }),
+    /* @__PURE__ */ i(o, { content: "Center tooltip", position: "bottom", trigger: "mixed", clickBehavior: "hide", children: /* @__PURE__ */ i("div", { className: t.mixedTrigger, children: "Center (hover + click hide)" }) }),
+    /* @__PURE__ */ i(o, { content: "Bottom-left tooltip", position: "left", trigger: "click", clickBehavior: "show", children: /* @__PURE__ */ i("div", { className: t.clickTrigger, children: "Bottom-left (click show)" }) }),
+    /* @__PURE__ */ i(o, { content: "Bottom-right tooltip", position: "right", trigger: "mixed", clickBehavior: "hide", children: /* @__PURE__ */ i("div", { className: t.mixedTrigger, children: "Bottom-right (hover + click hide)" }) })
+  ] })
+}, a = {
+  render: () => /* @__PURE__ */ e("div", { className: t.positionsContainer, children: [
+    /* @__PURE__ */ i("h3", { children: "Hover Triggers" }),
+    /* @__PURE__ */ e("div", { className: t.positionGroup, children: [
+      /* @__PURE__ */ i(o, { content: "Top tooltip", position: "top", children: /* @__PURE__ */ i("div", { className: t.trigger, children: "Top" }) }),
+      /* @__PURE__ */ i(o, { content: "Right tooltip", position: "right", children: /* @__PURE__ */ i("div", { className: t.trigger, children: "Right" }) }),
+      /* @__PURE__ */ i(o, { content: "Bottom tooltip", position: "bottom", children: /* @__PURE__ */ i("div", { className: t.trigger, children: "Bottom" }) }),
+      /* @__PURE__ */ i(o, { content: "Left tooltip", position: "left", children: /* @__PURE__ */ i("div", { className: t.trigger, children: "Left" }) })
+    ] }),
+    /* @__PURE__ */ i("h3", { children: "Click Triggers" }),
+    /* @__PURE__ */ e("div", { className: t.positionGroup, children: [
+      /* @__PURE__ */ i(o, { content: "Top tooltip (click toggle)", position: "top", trigger: "click", children: /* @__PURE__ */ i("div", { className: t.clickTrigger, children: "Top (toggle)" }) }),
+      /* @__PURE__ */ i(
+        o,
+        {
+          content: "Right tooltip (click show)",
+          position: "right",
+          trigger: "click",
+          clickBehavior: "show",
+          children: /* @__PURE__ */ i("div", { className: t.clickTrigger, children: "Right (show)" })
+        }
+      ),
+      /* @__PURE__ */ i(
+        o,
+        {
+          content: "Bottom tooltip (click hide)",
+          position: "bottom",
+          trigger: "click",
+          clickBehavior: "hide",
+          children: /* @__PURE__ */ i("div", { className: t.clickTrigger, children: "Bottom (hide)" })
+        }
+      ),
+      /* @__PURE__ */ i(
+        o,
+        {
+          content: "Left tooltip (mixed)",
+          position: "left",
+          trigger: "mixed",
+          clickBehavior: "hide",
+          children: /* @__PURE__ */ i("div", { className: t.mixedTrigger, children: "Left (hover+click)" })
+        }
+      )
+    ] })
+  ] })
+}, m = {
+  args: {
+    content: "Interactive tooltip content",
+    children: /* @__PURE__ */ i("button", { style: { padding: "8px 16px" }, type: "button", children: "Hover or click me" }),
+    position: "top",
+    trigger: "hover"
+  }
+};
+export {
+  a as AllPositions,
+  p as EdgeCases,
+  m as InteractiveExample,
+  d as default
+};

package/dist/components/Ui/Tooltip/index.js

@@ -0,0 +1,4 @@
+import { Tooltip as r } from "./Tooltip.js";
+export {
+  r as Tooltip
+};

package/dist/context/ToastContext/ToastContext.js

@@ -0,0 +1,40 @@
+import { jsxs as v, jsx as d } from "react/jsx-runtime";
+import { createContext as f, useState as h, useCallback as u, useMemo as _, useContext as w } from "react";
+import C from "react-dom";
+import '../../assets/ToastContext.css';const P = "_Wrapper_12sk9_1", W = "_Toast_12sk9_11", m = {
+  Wrapper: P,
+  Toast: W
+}, T = f(void 0), g = () => {
+  const o = w(T);
+  if (!o)
+    throw new Error("useToast must be used within a ToastProvider");
+  return o;
+}, j = ({ children: o }) => {
+  const [l, r] = h([]), p = 3, n = 4e3, c = u((t) => {
+    r((s) => s.filter((e) => e.id !== t));
+  }, []), i = u(
+    (t) => {
+      const s = {
+        id: Date.now(),
+        message: t,
+        duration: n
+      };
+      r((e) => {
+        const a = [...e, s];
+        return a.length > p ? a.slice(1) : a;
+      }), setTimeout(() => c(s.id), n);
+    },
+    [c]
+  ), x = _(() => ({ addToast: i }), [i]);
+  return /* @__PURE__ */ v(T.Provider, { value: x, children: [
+    o,
+    C.createPortal(
+      /* @__PURE__ */ d("div", { className: m.Wrapper, children: l.map((t) => /* @__PURE__ */ d("div", { className: m.Toast, children: t.message }, t.id)) }),
+      document.body
+    )
+  ] });
+};
+export {
+  j as ToastProvider,
+  g as useToast
+};

package/dist/context/ToastContext/index.js

@@ -0,0 +1,5 @@
+import { ToastProvider as e, useToast as s } from "./ToastContext.js";
+export {
+  e as ToastProvider,
+  s as useToast
+};

package/dist/context/TriaflyContext/TriaflyContext.types.js

@@ -0,0 +1 @@
+

package/dist/context/TriaflyContext/TriaflyProvider.js

@@ -0,0 +1,27 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as s, useMemo as m, useContext as a } from "react";
+import { useBreakpointValueTriafly as u } from "./hooks/useBreakpointValue/useBreakpointValue.js";
+import { useThemeLogic as f } from "./hooks/useTheme/useTheme.js";
+import { useModalState as l } from "./hooks/useModal/useModal.js";
+const t = s(void 0), y = () => {
+  const e = a(t);
+  if (!e)
+    throw new Error("useTriafly must be used within a TriaflyProvider");
+  return e;
+}, h = ({ children: e }) => {
+  const { theme: o, toggleTheme: r } = f(), i = m(
+    () => ({
+      theme: o,
+      toggleTheme: r,
+      useBreakpointValueTriafly: u,
+      useModalState: l
+    }),
+    [o, r]
+  );
+  return /* @__PURE__ */ n(t.Provider, { value: i, children: e });
+};
+export {
+  t as TriaflyContext,
+  h as TriaflyProvider,
+  y as useTriafly
+};

package/dist/context/TriaflyContext/hooks/index.js

@@ -0,0 +1,8 @@
+import { useBreakpointValueTriafly as r } from "./useBreakpointValue/useBreakpointValue.js";
+import { useThemeLogic as a } from "./useTheme/useTheme.js";
+import { useModalState as m } from "./useModal/useModal.js";
+export {
+  r as useBreakpointValueTriafly,
+  m as useModalState,
+  a as useThemeLogic
+};

package/dist/context/TriaflyContext/hooks/useBreakpointValue/index.js

@@ -0,0 +1,4 @@
+import { useBreakpointValueTriafly as a } from "./useBreakpointValue.js";
+export {
+  a as useBreakpointValueTriafly
+};

package/dist/context/TriaflyContext/hooks/useBreakpointValue/useBreakpointValue.js

@@ -0,0 +1,11 @@
+import { useState as t, useEffect as d } from "react";
+const w = (i) => {
+  const [n, r] = t(window.innerWidth);
+  return d(() => {
+    const e = () => r(window.innerWidth);
+    return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+  }, []), n >= 1280 && i.xl !== void 0 ? i.xl : n >= 1024 && i.lg !== void 0 ? i.lg : n >= 768 && i.md !== void 0 ? i.md : n >= 480 && i.sm !== void 0 ? i.sm : i.base !== void 0 ? i.base : null;
+};
+export {
+  w as useBreakpointValueTriafly
+};

package/dist/context/TriaflyContext/hooks/useModal/index.js

@@ -0,0 +1,4 @@
+import { useModalState as t } from "./useModal.js";
+export {
+  t as useModalState
+};

package/dist/context/TriaflyContext/hooks/useModal/useModal.js

@@ -0,0 +1,16 @@
+import { useState as a, useCallback as s } from "react";
+const r = () => {
+  const [t, e] = a(!1), o = s(() => {
+    e(!0);
+  }, []), n = s(() => {
+    e(!1);
+  }, []);
+  return {
+    isOpen: t,
+    onOpen: o,
+    onClose: n
+  };
+};
+export {
+  r as useModalState
+};

package/dist/context/TriaflyContext/hooks/useTheme/index.js

@@ -0,0 +1,4 @@
+import { useThemeLogic as m } from "./useTheme.js";
+export {
+  m as useThemeLogic
+};

package/dist/context/TriaflyContext/hooks/useTheme/useTheme.js

@@ -0,0 +1,17 @@
+import { useSyncExternalStore as n } from "react";
+const o = () => {
+  const t = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return localStorage.getItem("theme") || (t ? "dark" : "light");
+}, m = o();
+document.documentElement.setAttribute("data-theme", m);
+const c = () => {
+  const t = n((e) => (window.addEventListener("storage", e), () => window.removeEventListener("storage", e)), o), r = (e) => {
+    localStorage.setItem("theme", e), localStorage.setItem("chakra-ui-color-mode", e), document.documentElement.setAttribute("data-theme", e), window.dispatchEvent(new Event("storage"));
+  };
+  return { theme: t, toggleTheme: () => {
+    r(t === "light" ? "dark" : "light");
+  } };
+};
+export {
+  c as useThemeLogic
+};