triafly-ui-kit 1.0.23 → 1.0.25

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

@@ -0,0 +1,93 @@
+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/src/components/Ui/Tooltip/Tooltip.css';/* empty css                                              */
+const W = ({
+  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 {
+  W as Tooltip
+};

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

@@ -0,0 +1,87 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import t from "../../../src/components/Ui/Tooltip/Tooltip.stories.module.css.js";
+import { Tooltip as o } from "./Tooltip.js";
+const n = {
+  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"]
+    }
+  }
+}, s = {
+  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)" }) })
+  ] })
+}, h = {
+  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)" })
+        }
+      )
+    ] })
+  ] })
+}, g = {
+  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 {
+  h as AllPositions,
+  s as EdgeCases,
+  g as InteractiveExample,
+  n 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,38 @@
+import { jsxs as v, jsx as d } from "react/jsx-runtime";
+import { createContext as f, useState as h, useCallback as u, useMemo as w, useContext as C } from "react";
+import P from "react-dom";
+import m from "../../src/context/ToastContext/ToastContext.module.scss.js";
+const l = f(void 0), y = () => {
+  const e = C(l);
+  if (!e)
+    throw new Error("useToast must be used within a ToastProvider");
+  return e;
+}, M = ({ children: e }) => {
+  const [T, a] = h([]), p = 3, n = 4e3, c = u((t) => {
+    a((o) => o.filter((s) => s.id !== t));
+  }, []), i = u(
+    (t) => {
+      const o = {
+        id: Date.now(),
+        message: t,
+        duration: n
+      };
+      a((s) => {
+        const r = [...s, o];
+        return r.length > p ? r.slice(1) : r;
+      }), setTimeout(() => c(o.id), n);
+    },
+    [c]
+  ), x = w(() => ({ addToast: i }), [i]);
+  return /* @__PURE__ */ v(l.Provider, { value: x, children: [
+    e,
+    P.createPortal(
+      /* @__PURE__ */ d("div", { className: m.Wrapper, children: T.map((t) => /* @__PURE__ */ d("div", { className: m.Toast, children: t.message }, t.id)) }),
+      document.body
+    )
+  ] });
+};
+export {
+  M as ToastProvider,
+  y 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
+};

package/dist/context/TriaflyContext/index.js

@@ -0,0 +1,12 @@
+import { TriaflyContext as o, TriaflyProvider as t, useTriafly as a } from "./TriaflyProvider.js";
+import { useBreakpointValueTriafly as i } from "./hooks/useBreakpointValue/useBreakpointValue.js";
+import { useThemeLogic as m } from "./hooks/useTheme/useTheme.js";
+import { useModalState as u } from "./hooks/useModal/useModal.js";
+export {
+  o as TriaflyContext,
+  t as TriaflyProvider,
+  i as useBreakpointValueTriafly,
+  u as useModalState,
+  m as useThemeLogic,
+  a as useTriafly
+};