@yourbestsoft/studio-screen-ui-kit 0.0.1

package/dist/index.js

@@ -0,0 +1,821 @@
+import { D as H, B as F, u as J } from "./ToolIconButton-Be6zefbX.js";
+import { a as an, d as ln, b as rn, c as dn, C as hn, e as _n, g as un, S as mn, h as pn, T as gn, i as fn, j as yn, f as kn } from "./ToolIconButton-Be6zefbX.js";
+import { jsx as s, jsxs as g, Fragment as Q } from "react/jsx-runtime";
+import m from "classnames";
+import { useState as k, useEffect as K, useCallback as M, useRef as G } from "react";
+import { ClipboardCopy as X, ChevronLeft as Y, ChevronRight as Z, ChevronDown as ee, Sun as te, Moon as ne, Computer as oe } from "lucide-react";
+const se = "_buttonGroup_ejhd6_1", ce = "_button_ejhd6_1", ae = "_label_ejhd6_37", le = "_single_ejhd6_42", ie = "_first_ejhd6_46", re = "_last_ejhd6_50", de = "_selected_ejhd6_54", B = {
+  buttonGroup: se,
+  button: ce,
+  label: ae,
+  single: le,
+  first: ie,
+  last: re,
+  selected: de
+}, Jt = ({ buttons: n, className: o }) => /* @__PURE__ */ s("div", { className: m(B.buttonGroup, o), children: n.map((t, e) => {
+  const a = n.length === 1, l = e === 0 && !a, c = e === n.length - 1 && !a;
+  return /* @__PURE__ */ g(
+    "button",
+    {
+      onClick: t.onClick,
+      disabled: t.disabled,
+      className: m(B.button, {
+        [B.first]: l,
+        [B.last]: c,
+        [B.selected]: t.selected,
+        [B.single]: a
+      }),
+      ...t,
+      children: [
+        t.icon && t.icon,
+        t.label && /* @__PURE__ */ s("span", { className: B.label, children: t.label })
+      ]
+    },
+    e
+  );
+}) }), he = (n, o, t, e) => [
+  Math.min(255, Math.round(n + (255 - n) * e)),
+  Math.min(255, Math.round(o + (255 - o) * e)),
+  Math.min(255, Math.round(t + (255 - t) * e))
+], O = (n, o) => {
+  if (o === 5 || n === "transparent" || n === "#ffffff" || n === "#1e1e1e")
+    return n;
+  const [t, e, a] = q(n), l = (5 - o) * 0.2, [c, i, h] = he(t, e, a, l);
+  return _e(c, i, h);
+}, q = (n) => {
+  const o = n.replace("#", ""), t = parseInt(o, 16);
+  return [t >> 16 & 255, t >> 8 & 255, t & 255];
+}, _e = (n, o, t) => "#" + [n, o, t].map((e) => {
+  const a = e.toString(16);
+  return a.length === 1 ? "0" + a : a;
+}).join(""), ue = (n) => {
+  if (n === "transparent")
+    return "#000";
+  const [o, t, e] = q(n);
+  return (o * 299 + t * 587 + e * 114) / 1e3 > 128 ? "#000" : "#fff";
+}, me = "_colorButton_wldf2_1", pe = "_hotkey_wldf2_22", ge = "_selected_wldf2_26", fe = "_disabled_wldf2_33", ye = "_transparent_wldf2_41", ke = "_small_wldf2_46", be = "_medium_wldf2_52", ve = "_large_wldf2_58", I = {
+  colorButton: me,
+  hotkey: pe,
+  selected: ge,
+  disabled: fe,
+  transparent: ye,
+  small: ke,
+  medium: be,
+  large: ve
+}, P = (n) => {
+  const {
+    className: o,
+    color: t,
+    disabled: e,
+    hotkey: a,
+    selected: l,
+    size: c = "small",
+    ...i
+  } = n;
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      className: m(
+        I.colorButton,
+        I[c],
+        e && I.disabled,
+        l && I.selected,
+        t === "transparent" && I.transparent,
+        o
+      ),
+      style: { "--swatch-color": t },
+      disabled: e,
+      ...i,
+      children: /* @__PURE__ */ s("p", { className: I.hotkey, style: { color: ue(t) }, children: a })
+    }
+  );
+}, we = "_content_1ybrq_1", Ce = "_section_1ybrq_11", Ne = "_title_1ybrq_17", S = {
+  content: we,
+  section: Ce,
+  title: Ne
+}, xe = [
+  {
+    color: "transparent",
+    hotkey: "q",
+    name: "transparent"
+  },
+  {
+    color: "#ffffff",
+    hotkey: "w",
+    name: "white"
+  },
+  {
+    color: "#343a40",
+    hotkey: "e",
+    name: "gray"
+  },
+  {
+    color: "#1e1e1e",
+    hotkey: "r",
+    name: "black"
+  },
+  {
+    color: "#846358",
+    hotkey: "t",
+    name: "bronze"
+  },
+  {
+    color: "#0c8599",
+    hotkey: "a",
+    name: "cyan"
+  },
+  {
+    color: "#1971c2",
+    hotkey: "s",
+    name: "blue"
+  },
+  {
+    color: "#6741d9",
+    hotkey: "d",
+    name: "violet"
+  },
+  {
+    color: "#9c36b5",
+    hotkey: "f",
+    name: "grape"
+  },
+  {
+    color: "#c2255c",
+    hotkey: "g",
+    name: "pink"
+  },
+  {
+    color: "#2f9e44",
+    hotkey: "z",
+    name: "green"
+  },
+  {
+    color: "#099268",
+    hotkey: "x",
+    name: "teal"
+  },
+  {
+    color: "#f08c00",
+    hotkey: "c",
+    name: "yellow"
+  },
+  {
+    color: "#e8590c",
+    hotkey: "v",
+    name: "orange"
+  },
+  {
+    color: "#e03131",
+    hotkey: "b",
+    name: "red"
+  }
+], Be = ({
+  colors: n,
+  selectedColor: o,
+  selectedShadeIndex: t
+}) => {
+  const [e, a] = k(t), [l, c] = k(
+    () => j(n, t)
+  ), [i, h] = k(() => ({
+    ...o ?? { ...n[0], index: 0 },
+    index: o?.index ?? 0
+  })), r = (_) => {
+    const u = j(n, _);
+    console.log(u), c(u), h(Se(u, i));
+  }, d = (_, u = 999) => {
+    h({ ...W(_, e), index: u });
+  };
+  return K(() => {
+    r(e);
+  }, [e, n, i.index]), {
+    activeColor: i,
+    activeShade: e,
+    palette: l,
+    setActiveColorHandler: d,
+    setActiveShade: a
+  };
+}, W = (n, o) => ({
+  ...n,
+  color: O(n.color, o)
+}), j = (n, o) => n.map((t) => W(t, o)), Se = (n, o) => ({
+  ...n[o.index] ?? n[0],
+  index: o.index ?? 0
+}), Ie = ({
+  onSelect: n,
+  options: o,
+  selectedId: t
+}) => {
+  const [e, a] = k(!1), [l, c] = k(null), [i, h] = k(
+    t && o.find((u) => u.value === t) || null
+  );
+  K(() => {
+    if (t) {
+      const u = o.find((f) => f.value === t);
+      h(u || null);
+    }
+  }, [t, o]);
+  const r = M(
+    (u) => {
+      h(u), n && n(u.value), a(!1), c(null);
+    },
+    [n]
+  ), d = M(
+    (u) => {
+      if (!e) {
+        (u.key === "Enter" || u.key === " ") && (a(!0), c(0));
+        return;
+      }
+      switch (u.key) {
+        case "ArrowDown": {
+          c(
+            (f) => f === null ? 0 : Math.min(f + 1, o.length - 1)
+          );
+          break;
+        }
+        case "ArrowUp": {
+          c(
+            (f) => f === null ? o.length - 1 : Math.max(f - 1, 0)
+          );
+          break;
+        }
+        case "Enter": {
+          l !== null && r(o[l]);
+          break;
+        }
+        case "Escape": {
+          a(!1);
+          break;
+        }
+      }
+    },
+    [e, l, o, r]
+  ), _ = M(() => {
+    a(!1), c(null);
+  }, []);
+  return {
+    handleChange: r,
+    handleKeyDown: d,
+    handleOutsideClick: _,
+    highlightedIndex: l,
+    isOpen: e,
+    selectedItem: i,
+    setIsOpen: a
+  };
+}, Te = (n) => {
+  K(() => {
+    const o = (t) => {
+      n.forEach((e) => e(t));
+    };
+    return window.addEventListener("keydown", o), () => {
+      window.removeEventListener("keydown", o);
+    };
+  }, [n]);
+}, Le = (n) => {
+  const { palette: o, setActiveColorHandler: t, setActiveShade: e } = n;
+  Te([(c) => {
+    if (c.shiftKey && c.code.startsWith("Digit")) {
+      const i = parseInt(c.code.replace("Digit", ""), 10);
+      i >= 1 && i <= 5 && e(i);
+    }
+  }, (c) => {
+    const i = c.key.toLowerCase(), h = o.findIndex(
+      (d) => d?.hotkey?.toLowerCase() === i
+    ), r = o[h];
+    h !== -1 && t(r, h);
+  }]);
+}, Ke = "_iconButton_yk1r1_14", Re = "_primary_yk1r1_34", $e = "_secondary_yk1r1_46", ze = "_transparent_yk1r1_54", He = "_selected_yk1r1_65", Me = "_disabled_yk1r1_74", R = {
+  iconButton: Ke,
+  primary: Re,
+  secondary: $e,
+  transparent: ze,
+  selected: He,
+  disabled: Me
+}, T = (n) => {
+  const {
+    className: o,
+    disabled: t,
+    icon: e,
+    selected: a,
+    variants: l = "primary",
+    ...c
+  } = n;
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      className: m(
+        R.iconButton,
+        R[l],
+        a && R.selected,
+        t && R.disabled,
+        o
+      ),
+      disabled: t,
+      ...c,
+      children: e
+    }
+  );
+}, Ae = "_hexInput_x3rtz_1", De = "_inputContainer_x3rtz_11", Ve = "_hash_x3rtz_18", Pe = "_input_x3rtz_11", je = "_error_x3rtz_39", Ee = "_copyButton_x3rtz_42", Fe = "_slot_x3rtz_48", Ge = "_copiedMessage_x3rtz_55", Oe = "_fadeInOut_x3rtz_1", w = {
+  hexInput: Ae,
+  inputContainer: De,
+  hash: Ve,
+  input: Pe,
+  error: je,
+  copyButton: Ee,
+  slot: Fe,
+  copiedMessage: Ge,
+  fadeInOut: Oe
+}, qe = (n) => {
+  const {
+    children: o,
+    className: t,
+    color: e,
+    onChange: a,
+    placeholder: l = "RRGGBB",
+    ...c
+  } = n, [i, h] = k(
+    e.startsWith("#") ? e.slice(1) : e
+  ), [r, d] = k(!1);
+  K(() => {
+    h(e.startsWith("#") ? e.slice(1) : e);
+  }, [e]);
+  const _ = (b) => /^#([0-9A-F]{3}|[0-9A-F]{6})$/i.test("#" + b), u = (b) => {
+    const y = b.target.value;
+    h(y), _(y) && a("#" + y);
+  }, f = () => {
+    const b = "#" + i;
+    navigator.clipboard.writeText(b), d(!0), setTimeout(() => d(!1), 1e3);
+  };
+  return /* @__PURE__ */ g("div", { className: w.hexInput, children: [
+    /* @__PURE__ */ s(
+      T,
+      {
+        icon: /* @__PURE__ */ s(X, {}),
+        onClick: f,
+        className: w.copyButton
+      }
+    ),
+    /* @__PURE__ */ g("div", { className: w.inputContainer, children: [
+      /* @__PURE__ */ s("span", { className: w.hash, children: "#" }),
+      /* @__PURE__ */ s(
+        "input",
+        {
+          ...c,
+          className: m(
+            w.input,
+            _(i) ? "" : w.error,
+            t
+          ),
+          value: i,
+          onChange: u,
+          placeholder: l,
+          "aria-label": "Hex code"
+        }
+      )
+    ] }),
+    r && /* @__PURE__ */ s("div", { className: w.copiedMessage, children: /* @__PURE__ */ s("span", { children: "Copied!" }) }),
+    o && /* @__PURE__ */ s("div", { className: w.slot, children: o })
+  ] });
+}, We = "_colorsList_1brrj_1", Ue = {
+  colorsList: We
+}, Je = ({
+  activeColor: n,
+  palette: o,
+  setActiveColorHandler: t
+}) => /* @__PURE__ */ s("div", { className: Ue.colorsList, children: o.map((e, a) => /* @__PURE__ */ s(
+  P,
+  {
+    color: e.color,
+    hotkey: e.hotkey,
+    selected: n.index === a,
+    onClick: () => t(e, a),
+    size: "large"
+  },
+  e.name
+)) }), Qe = "_shadowList_1srdv_1", Xe = "_shadowText_1srdv_6", E = {
+  shadowList: Qe,
+  shadowText: Xe
+}, Ye = ({
+  activeColor: n,
+  activeShade: o,
+  colors: t,
+  setActiveShade: e
+}) => {
+  const a = [1, 2, 3, 4, 5], l = t[n.index];
+  return ["#ffffff", "transparent", "#000000", "#1e1e1e"].includes(
+    n?.color
+  ) || !t[n.index] ? /* @__PURE__ */ s("div", { className: E.shadowText, children: /* @__PURE__ */ s("p", { children: "No shades available for this color" }) }) : /* @__PURE__ */ s("div", { className: E.shadowList, children: a.map((c) => /* @__PURE__ */ s(
+    P,
+    {
+      color: O(l.color, c),
+      hotkey: `⇧+${c}`,
+      selected: o === c,
+      onClick: () => e(c),
+      size: "large"
+    },
+    c
+  )) });
+}, Qt = (n) => {
+  const { changeColor: o, colors: t, selectedColor: e, selectedShadeIndex: a = 5 } = n, l = xe || t, {
+    activeColor: c,
+    activeShade: i,
+    palette: h,
+    setActiveColorHandler: r,
+    setActiveShade: d
+  } = Be({ colors: l, selectedColor: e, selectedShadeIndex: a });
+  return Le({
+    palette: h,
+    setActiveColorHandler: r,
+    setActiveShade: d
+  }), /* @__PURE__ */ g(H.Root, { children: [
+    /* @__PURE__ */ s(H.Trigger, { children: /* @__PURE__ */ s(P, { size: "medium", color: c.color }) }),
+    /* @__PURE__ */ g(H.Content, { className: S.content, children: [
+      /* @__PURE__ */ g("div", { className: S.section, children: [
+        /* @__PURE__ */ s("h3", { className: S.title, children: "Colors" }),
+        /* @__PURE__ */ s(
+          Je,
+          {
+            palette: h,
+            activeColor: c,
+            setActiveColorHandler: (_, u) => {
+              r(_, u), o && o(_);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ g("div", { className: S.section, children: [
+        /* @__PURE__ */ s("h3", { className: S.title, children: "Shades" }),
+        /* @__PURE__ */ s(
+          Ye,
+          {
+            colors: l,
+            activeShade: i,
+            activeColor: c,
+            setActiveShade: d
+          }
+        )
+      ] }),
+      /* @__PURE__ */ g("div", { className: S.section, children: [
+        /* @__PURE__ */ s("h3", { className: S.title, children: "Hex code" }),
+        /* @__PURE__ */ s(
+          qe,
+          {
+            color: c.color,
+            onChange: (_) => {
+              r({ ...c, color: _ }), o && o({ ...c, color: _ });
+            }
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, Ze = "_pagination_3kmd4_1", et = "_pages_3kmd4_13", $ = {
+  pagination: Ze,
+  pages: et
+};
+function tt({
+  boundaryCount: n,
+  currentPage: o,
+  siblingCount: t,
+  totalPages: e
+}) {
+  const a = n * 2 + t * 2 + 1;
+  if (e <= a)
+    return Array.from({ length: e }, (d, _) => _ + 1);
+  const l = [], c = Array.from({ length: n }, (d, _) => _ + 1), i = Array.from(
+    { length: n },
+    (d, _) => e - n + _ + 1
+  ), h = Math.max(o - t, n + 1), r = Math.min(
+    o + t,
+    e - n
+  );
+  l.push(...c), h > n + 1 && l.push("...");
+  for (let d = h; d <= r; d++)
+    l.push(d);
+  return r < e - n && l.push("..."), l.push(...i), l;
+}
+const Xt = (n) => {
+  const {
+    boundaryCount: o = 2,
+    currentPage: t,
+    onPageChange: e,
+    siblingCount: a = 1,
+    totalPages: l
+  } = n, c = tt({
+    boundaryCount: o,
+    currentPage: t,
+    siblingCount: a,
+    totalPages: l
+  }), i = () => {
+    t > 1 && e(t - 1);
+  }, h = () => {
+    t < l && e(t + 1);
+  };
+  return /* @__PURE__ */ g("div", { className: $.pagination, children: [
+    /* @__PURE__ */ s(
+      T,
+      {
+        onClick: i,
+        disabled: t === 1,
+        icon: /* @__PURE__ */ s(Y, { size: 16 }),
+        variants: "transparent"
+      }
+    ),
+    /* @__PURE__ */ s("div", { className: $.pages, children: c.map((r, d) => r === "..." ? /* @__PURE__ */ s("span", { className: $.ellipsis, children: "..." }, `ellipsis-${d}`) : /* @__PURE__ */ s(
+      T,
+      {
+        onClick: () => e(Number(r)),
+        icon: r,
+        selected: t === r
+      },
+      r
+    )) }),
+    /* @__PURE__ */ s(
+      T,
+      {
+        onClick: h,
+        disabled: t === l,
+        className: $.nextButton,
+        icon: /* @__PURE__ */ s(Z, { size: 16 }),
+        variants: "transparent"
+      }
+    )
+  ] });
+}, nt = "_selectContainer_1kdni_1", ot = "_selectButton_1kdni_5", st = "_selectIcon_1kdni_10", ct = "_selectIconOpen_1kdni_14", at = "_selectMenu_1kdni_18", lt = "_positionBottomRight_1kdni_44", it = "_positionBottomLeft_1kdni_50", rt = "_positionTopRight_1kdni_56", dt = "_positionTopLeft_1kdni_62", ht = "_positionRight_1kdni_68", _t = "_positionLeft_1kdni_74", ut = "_positionBottom_1kdni_44", mt = "_positionTop_1kdni_56", pt = "_menuItem_1kdni_92", gt = "_menuItemSelected_1kdni_102", ft = "_menuItemHover_1kdni_106", yt = "_menuItemHighlighted_1kdni_110", p = {
+  selectContainer: nt,
+  selectButton: ot,
+  selectIcon: st,
+  selectIconOpen: ct,
+  selectMenu: at,
+  positionBottomRight: lt,
+  positionBottomLeft: it,
+  positionTopRight: rt,
+  positionTopLeft: dt,
+  positionRight: ht,
+  positionLeft: _t,
+  positionBottom: ut,
+  positionTop: mt,
+  menuItem: pt,
+  menuItemSelected: gt,
+  menuItemHover: ft,
+  menuItemHighlighted: yt
+}, Yt = ({
+  fullWidth: n = !0,
+  onSelect: o,
+  options: t,
+  position: e = "bottom-left",
+  selectedId: a,
+  slot_left: l,
+  slot_right: c,
+  style: i,
+  title: h = "Select",
+  value: r
+}) => {
+  const d = G(null), {
+    handleChange: _,
+    handleKeyDown: u,
+    handleOutsideClick: f,
+    highlightedIndex: b,
+    isOpen: y,
+    selectedItem: N,
+    setIsOpen: v
+  } = Ie({ onSelect: o, options: t, selectedId: a });
+  K(() => {
+    const x = (z) => {
+      d.current && !d.current.contains(z.target) && f();
+    };
+    return document.addEventListener("mousedown", x), () => {
+      document.removeEventListener("mousedown", x);
+    };
+  }, [f]);
+  const U = m(p.selectMenu, {
+    [p.positionBottom]: e === "bottom",
+    [p.positionBottomLeft]: e === "bottom-left",
+    [p.positionBottomRight]: e === "bottom-right",
+    [p.positionLeft]: e === "left",
+    [p.positionRight]: e === "right",
+    [p.positionTop]: e === "top",
+    [p.positionTopLeft]: e === "top-left",
+    [p.positionTopRight]: e === "top-right"
+  });
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ref: d,
+      className: p.selectContainer,
+      onKeyDown: u,
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ g(
+          F,
+          {
+            id: r,
+            "aria-label": "Toggle select",
+            variant: "tertiary",
+            "aria-haspopup": "true",
+            "aria-expanded": y,
+            type: "button",
+            onClick: () => v(!y),
+            className: m(p.selectButton, i),
+            fullWidth: n,
+            children: [
+              /* @__PURE__ */ s("span", { children: N?.label || h }),
+              /* @__PURE__ */ s(
+                ee,
+                {
+                  size: 20,
+                  className: m(p.selectIcon, {
+                    [p.selectIconOpen]: y
+                  })
+                }
+              )
+            ]
+          }
+        ),
+        y && /* @__PURE__ */ s("div", { "aria-label": "Select menu", className: U, children: /* @__PURE__ */ s("ul", { role: "menu", "aria-labelledby": r, "aria-orientation": "vertical", children: t?.map((x, z) => /* @__PURE__ */ g(
+          "li",
+          {
+            onClick: () => _(x),
+            className: m(p.menuItem, p.menuItemHover, {
+              [p.menuItemHighlighted]: b === z,
+              [p.menuItemSelected]: N?.value === x.value
+            }),
+            children: [
+              l,
+              /* @__PURE__ */ s("span", { children: x.label }),
+              c
+            ]
+          },
+          x.value
+        )) }) })
+      ]
+    }
+  );
+}, kt = "_groupTitle_eelpn_23", bt = "_list_eelpn_30", vt = "_item_eelpn_35", wt = "_itemKeysVariants_eelpn_45", Ct = "_itemKeysSeparator_eelpn_50", Nt = "_itemDescription_eelpn_54", xt = "_itemKey_eelpn_45", C = {
+  groupTitle: kt,
+  list: bt,
+  item: vt,
+  itemKeysVariants: wt,
+  itemKeysSeparator: Ct,
+  itemDescription: Nt,
+  itemKey: xt
+}, Bt = (n) => {
+  const { children: o, className: t, title: e } = n;
+  return /* @__PURE__ */ g("div", { className: m(C.group, t), children: [
+    /* @__PURE__ */ s("h4", { className: C.groupTitle, children: e }),
+    o
+  ] });
+}, St = (n) => {
+  const { children: o, className: t } = n;
+  return /* @__PURE__ */ s("div", { className: m(C.list, t), children: o });
+}, It = (n) => {
+  const { className: o, description: t, keysVariants: e } = n, a = (l) => l.map((c, i) => /* @__PURE__ */ s("span", { className: C.itemKey, children: c }, i));
+  return /* @__PURE__ */ g("div", { className: m(C.item, o), children: [
+    /* @__PURE__ */ s("div", { className: C.itemDescription, children: t }),
+    /* @__PURE__ */ s("div", { className: C.itemKeysVariants, children: e.map(
+      (l, c) => c === 0 ? a(l) : /* @__PURE__ */ g(Q, { children: [
+        /* @__PURE__ */ s("span", { className: C.itemKeysSeparator, children: "or" }),
+        a(l)
+      ] })
+    ) })
+  ] });
+}, Zt = { Group: Bt, Item: It, List: St }, Tt = "_slider_1b9o2_1", Lt = "_focused_1b9o2_37", A = {
+  "slider-container": "_slider-container_1b9o2_1",
+  slider: Tt,
+  focused: Lt
+}, en = (n) => {
+  const { initialValue: o = 50, max: t = 100, min: e = 0, onChange: a, step: l = 1 } = n, [c, i] = k(o), [h, r] = k(!1), d = G(null), _ = (N) => {
+    const v = Number(N.target.value);
+    i(v), a && a(v);
+  }, u = (N) => {
+    N.key === "ArrowRight" ? i((v) => Math.min(v + l, t)) : N.key === "ArrowLeft" && i((v) => Math.max(v - l, e));
+  }, f = () => r(!0), b = () => r(!1), y = (c - e) / (t - e) * 100;
+  return /* @__PURE__ */ s("div", { className: m(A.container, h && A.focused), children: /* @__PURE__ */ s(
+    "input",
+    {
+      type: "range",
+      min: e,
+      max: t,
+      step: l,
+      value: c,
+      onChange: _,
+      onKeyDown: u,
+      ref: d,
+      onFocus: f,
+      onBlur: b,
+      tabIndex: 0,
+      className: A.slider,
+      style: {
+        "--slider-background-color": "#ddd",
+        "--slider-fill-color": "#6965db",
+        background: h ? `linear-gradient(to right, #363399 ${y}%, #ccc ${y}%)` : `linear-gradient(to right, var(--slider-fill-color) ${y}%, var(--slider-background-color) ${y}%)`
+      }
+    }
+  ) });
+}, Kt = "_themeSwitcher_11ggx_18", Rt = "_themeButton_11ggx_27", $t = "_background_11ggx_31", zt = "_selectedButton_11ggx_42", D = {
+  themeSwitcher: Kt,
+  themeButton: Rt,
+  background: $t,
+  selectedButton: zt
+}, tn = () => {
+  const { setTheme: n, theme: o } = J(), t = [
+    { icon: /* @__PURE__ */ s(te, {}), label: "Light", value: "light" },
+    { icon: /* @__PURE__ */ s(ne, {}), label: "Dark", value: "dark" },
+    { icon: /* @__PURE__ */ s(oe, {}), label: "System", value: "system" }
+  ];
+  return /* @__PURE__ */ s("div", { className: D.themeSwitcher, children: t.map((e) => /* @__PURE__ */ s(
+    T,
+    {
+      icon: e.icon,
+      variants: "transparent",
+      onClick: () => n(e.value),
+      "aria-label": e.label,
+      selected: e.value === o,
+      className: m(
+        D.themeButton,
+        e.value === o && D.selectedButton
+      )
+    },
+    e.value
+  )) });
+}, Ht = "_toggleSwitch_1w0s9_14", Mt = "_button_1w0s9_24", At = "_selected_1w0s9_41", L = {
+  toggleSwitch: Ht,
+  button: Mt,
+  selected: At
+}, nn = (n) => {
+  const { defaultValue: o, options: t, ...e } = n, [a, l] = k(
+    o || t[0].value
+  ), c = (i) => {
+    l(i);
+  };
+  return /* @__PURE__ */ s("div", { className: m(L.toggleSwitch), ...e, children: t.map(({ icon: i, leftSlot: h, rightSlot: r, value: d, ..._ }) => h || r ? /* @__PURE__ */ g(
+    F,
+    {
+      variant: "text",
+      className: m(
+        L.button,
+        a === d && L.selected
+      ),
+      onClick: () => c(d),
+      children: [
+        h,
+        i,
+        r
+      ]
+    }
+  ) : /* @__PURE__ */ s(
+    T,
+    {
+      variants: "transparent",
+      className: m(
+        L.button,
+        a === d && L.selected
+      ),
+      onClick: () => c(d),
+      icon: i,
+      ..._
+    }
+  )) });
+}, Dt = "_toolbar_18q11_1", Vt = "_separator_18q11_11", Pt = "_vertical_18q11_16", jt = "_horizontal_18q11_28", V = {
+  toolbar: Dt,
+  separator: Vt,
+  vertical: Pt,
+  horizontal: jt
+}, Et = (n) => {
+  const { children: o, className: t, direction: e = "horizontal" } = n;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: m(V.toolbar, e && V[e], t),
+      children: o
+    }
+  );
+}, Ft = ({}) => /* @__PURE__ */ s("div", { className: V.separator }), on = { Root: Et, Separator: Ft };
+export {
+  F as Button,
+  an as ButtonRender,
+  Jt as ButtonsGroup,
+  ln as Card,
+  rn as CardContent,
+  dn as CardHeader,
+  hn as CardRoot,
+  P as ColorButton,
+  Qt as ColorPicker,
+  _n as Dialog,
+  H as DropDown,
+  T as IconButton,
+  Xt as Pagination,
+  Yt as Select,
+  Zt as Shortcut,
+  un as Sidebar,
+  mn as SidebarContext,
+  en as Slider,
+  pn as SwitcherButtons,
+  gn as Table,
+  fn as TextField,
+  tn as ThemeSwitcher,
+  nn as ToggleSwitch,
+  yn as ToolIconButton,
+  on as Toolbar,
+  kn as useSidebarContext
+};
+//# sourceMappingURL=index.js.map