@companix/uikit 0.0.77 → 0.0.79

package/dist/Blank/Blank.scss

@@ -0,0 +1,66 @@
+@use '../mixins.scss';
+
+@mixin use-appearance($appearance) {
+  &[data-appearance='#{$appearance}'] {
+    @include mixins.use-styles(blank, $appearance);
+
+    .blank-icon {
+      @include mixins.use-styles(blank, $appearance, icon);
+    }
+
+    .blank-title {
+      @include mixins.use-styles(blank, $appearance, title);
+    }
+
+    .blank-description {
+      @include mixins.use-styles(blank, $appearance, description);
+    }
+  }
+}
+
+.blank {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: 100%;
+  width: 100%;
+  padding: 20px;
+
+  @include mixins.use-styles(blank);
+
+  @include use-appearance(neutral);
+  @include use-appearance(negative);
+
+  &-icon {
+    @include mixins.use-styles(blank, icon);
+
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+  }
+
+  &-text {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    @include mixins.use-styles(blank, text);
+
+    &:not(:last-child) {
+      margin-bottom: 20px;
+    }
+  }
+
+  &-title {
+    font-weight: 600;
+    font-size: 18px;
+
+    @include mixins.use-styles(blank, title);
+  }
+
+  &-description {
+    @include mixins.use-styles(blank, description);
+  }
+}

package/dist/Blank/index.d.ts

@@ -0,0 +1,12 @@
+import { IconDefinition, IconProps } from '../Icon';
+export interface BlankProps {
+    icon: IconDefinition;
+    iconSize?: IconProps['size'];
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    appearance?: 'neutral' | 'negative';
+}
+declare const Blank: ({ appearance, icon, className, iconSize, title, description, children }: BlankProps) => import("react/jsx-runtime").JSX.Element;
+export { Blank };

package/dist/FormGroup/index.d.ts

@@ -2,7 +2,7 @@ export interface FormGroupProps {
     label: React.ReactNode;
     children: React.ReactNode;
     caption?: React.ReactNode;
-    apperance?: 'neutral' | 'positive' | 'negative';
+    appearance?: 'neutral' | 'positive' | 'negative';
     fill?: boolean;
     className?: string;
 }

package/dist/ProgressRing/ProgressRing.scss

@@ -0,0 +1,64 @@
+@use '../mixins.scss';
+
+@mixin use-appearance($appearance) {
+  &[data-appearance='#{$appearance}'] {
+    .progress-ring-track {
+      @include mixins.use-styles(progress-ring, $appearance, track);
+    }
+
+    .progress-ring-indicator {
+      @include mixins.use-styles(progress-ring, $appearance, indicator);
+    }
+  }
+}
+
+.progress-ring {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @include use-appearance(neutral);
+  @include use-appearance(negative);
+  @include use-appearance(positive);
+  @include use-appearance(primary);
+
+  &-image {
+    width: var(--size);
+    height: var(--size);
+    rotate: -90deg;
+    transform-origin: 50% 50%;
+  }
+
+  &-track,
+  &-indicator {
+    --radius: calc(var(--size) / 2 - var(--track-width) * 0.5);
+    --circumference: calc(var(--radius) * 2 * 3.141592654);
+    fill: none;
+    // svg properties
+    r: var(--radius);
+    cx: calc(var(--size) / 2);
+    cy: calc(var(--size) / 2);
+  }
+
+  &-indicator {
+    stroke-width: var(--track-width);
+    stroke-linecap: round;
+    transition-property: stroke-dashoffset;
+    stroke-dasharray: var(--circumference) var(--circumference);
+    stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
+
+    @include mixins.use-styles(progress-ring, indicator);
+  }
+
+  &-track {
+    // stroke: var(--track-color);
+    stroke-width: var(--track-width);
+
+    @include mixins.use-styles(progress-ring, track);
+  }
+
+  &-hint {
+    position: absolute;
+  }
+}

package/dist/ProgressRing/index.d.ts

@@ -0,0 +1,9 @@
+export interface ProgressRingProps {
+    appearance?: 'primary' | 'neutral' | 'positive' | 'negative';
+    value: number;
+    size?: number;
+    width?: number;
+    hint?: boolean;
+}
+declare const ProgressRing: ({ appearance, hint, size, width, value }: ProgressRingProps) => import("react/jsx-runtime").JSX.Element;
+export { ProgressRing };

package/dist/bundle.es.js

@@ -2,16 +2,16 @@ import { Avatar as e } from "./bundle.es2.js";
 import { avatarSizes as p } from "./bundle.es3.js";
 import { Button as x } from "./bundle.es4.js";
 import { ButtonGroup as a } from "./bundle.es5.js";
-import { Spinner as l } from "./bundle.es6.js";
+import { Spinner as c } from "./bundle.es6.js";
 import { Scrollable as n } from "./bundle.es7.js";
 import { ImitateScroll as S } from "./bundle.es8.js";
-import { Segments as g } from "./bundle.es9.js";
+import { Segments as u } from "./bundle.es9.js";
 import { Popover as h } from "./bundle.es10.js";
-import { Tooltip as v } from "./bundle.es11.js";
-import { Select as P } from "./bundle.es12.js";
-import { SelectTags as A } from "./bundle.es13.js";
-import { Input as b } from "./bundle.es14.js";
-import { OptionItem as R } from "./bundle.es15.js";
+import { Tooltip as P } from "./bundle.es11.js";
+import { Select as B } from "./bundle.es12.js";
+import { SelectTags as d } from "./bundle.es13.js";
+import { Input as A } from "./bundle.es14.js";
+import { OptionItem as b } from "./bundle.es15.js";
 import { NumberInput as y } from "./bundle.es16.js";
 import { OptionsList as G } from "./bundle.es17.js";
 import { Checkbox as O } from "./bundle.es18.js";
@@ -29,66 +29,71 @@ import { DateInput as to } from "./bundle.es29.js";
 import { FileOverlay as mo } from "./bundle.es30.js";
 import { FormGroup as fo } from "./bundle.es31.js";
 import { TimePicker as io } from "./bundle.es32.js";
-import { Icon as co } from "./bundle.es33.js";
+import { Icon as lo } from "./bundle.es33.js";
 import { ProgressBar as so } from "./bundle.es34.js";
-import { Skeleton as uo } from "./bundle.es35.js";
-import { ThemeProvider as To, useTheme as ho } from "./bundle.es36.js";
-import { ColorSchemeScript as vo, colorSchemeScript as Io } from "./bundle.es37.js";
-import { useLocalStorage as Ao } from "./bundle.es38.js";
-import { useBooleanState as bo } from "./bundle.es39.js";
-import { createAlertAgent as Ro } from "./bundle.es40.js";
-import { createToaster as yo } from "./bundle.es41.js";
-import { Toast as Go } from "./bundle.es42.js";
-import { DialogShell as Oo, createDialogsRegistry as Fo } from "./bundle.es43.js";
-import { createPopoversRegistry as No } from "./bundle.es44.js";
-import { createScope as qo } from "./bundle.es45.js";
+import { Skeleton as go } from "./bundle.es35.js";
+import { Blank as To } from "./bundle.es36.js";
+import { ProgressRing as Do } from "./bundle.es37.js";
+import { ThemeProvider as vo, useTheme as Bo } from "./bundle.es38.js";
+import { ColorSchemeScript as ko, colorSchemeScript as Ao } from "./bundle.es39.js";
+import { useLocalStorage as bo } from "./bundle.es40.js";
+import { useBooleanState as yo } from "./bundle.es41.js";
+import { createAlertAgent as Go } from "./bundle.es42.js";
+import { createToaster as Oo } from "./bundle.es43.js";
+import { Toast as zo } from "./bundle.es44.js";
+import { DialogShell as jo, createDialogsRegistry as qo } from "./bundle.es45.js";
+import { createPopoversRegistry as Ho } from "./bundle.es46.js";
+import { createScope as Ko, createStaticScope as Mo } from "./bundle.es47.js";
 export {
   Q as AlertDialog,
   e as Avatar,
+  To as Blank,
   x as Button,
   a as ButtonGroup,
   O as Checkbox,
-  vo as ColorSchemeScript,
+  ko as ColorSchemeScript,
   Z as Countdown,
   to as DateInput,
   ro as DatePicker,
   K as Dialog,
-  Oo as DialogShell,
+  jo as DialogShell,
   H as Drawer,
   mo as FileOverlay,
   fo as FormGroup,
-  co as Icon,
+  lo as Icon,
   S as ImitateScroll,
-  b as Input,
+  A as Input,
   V as LoadingButton,
   y as NumberInput,
-  R as OptionItem,
+  b as OptionItem,
   G as OptionsList,
   h as Popover,
   so as ProgressBar,
+  Do as ProgressRing,
   j as Radio,
   q as RadioGroup,
   n as Scrollable,
-  g as Segments,
-  P as Select,
-  A as SelectTags,
-  uo as Skeleton,
-  l as Spinner,
+  u as Segments,
+  B as Select,
+  d as SelectTags,
+  go as Skeleton,
+  c as Spinner,
   z as Switch,
   X as Tabs,
   $ as TextArea,
-  To as ThemeProvider,
+  vo as ThemeProvider,
   io as TimePicker,
-  Go as Toast,
-  v as Tooltip,
+  zo as Toast,
+  P as Tooltip,
   p as avatarSizes,
-  Io as colorSchemeScript,
-  Ro as createAlertAgent,
-  Fo as createDialogsRegistry,
-  No as createPopoversRegistry,
-  qo as createScope,
-  yo as createToaster,
-  bo as useBooleanState,
-  Ao as useLocalStorage,
-  ho as useTheme
+  Ao as colorSchemeScript,
+  Go as createAlertAgent,
+  qo as createDialogsRegistry,
+  Ho as createPopoversRegistry,
+  Ko as createScope,
+  Mo as createStaticScope,
+  Oo as createToaster,
+  yo as useBooleanState,
+  bo as useLocalStorage,
+  Bo as useTheme
 };

package/dist/bundle.es12.js

@@ -1,10 +1,10 @@
 import { jsx as l } from "react/jsx-runtime";
 import { useRef as L, useMemo as j, useImperativeHandle as k } from "react";
 import { Popover as q } from "./bundle.es10.js";
-import { useFroozeClosing as w } from "./bundle.es48.js";
-import { SelectInput as H } from "./bundle.es49.js";
-import { useScrollListController as M } from "./bundle.es50.js";
-import { OptionsPopover as N } from "./bundle.es51.js";
+import { useFroozeClosing as w } from "./bundle.es50.js";
+import { SelectInput as H } from "./bundle.es51.js";
+import { useScrollListController as M } from "./bundle.es52.js";
+import { OptionsPopover as N } from "./bundle.es53.js";
 import { mergeRefs as W } from "react-merge-refs";
 const Z = (t) => {
   const {

package/dist/bundle.es13.js

@@ -3,12 +3,12 @@ import { mergeRefs as T } from "react-merge-refs";
 import { useState as M, useRef as h, useMemo as j } from "react";
 import { matchPattern as q } from "@companix/utils-js";
 import { faXmark as V, faChevronDown as $ } from "@companix/icons-solid";
-import { useFroozeClosing as B } from "./bundle.es48.js";
+import { useFroozeClosing as B } from "./bundle.es50.js";
 import { Popover as L } from "./bundle.es10.js";
 import { Icon as g } from "./bundle.es33.js";
 import { attr as l, getActiveElementByAnotherElement as X, contains as G } from "@companix/utils-browser";
-import { OptionsPopover as H } from "./bundle.es51.js";
-import { arrays as v } from "./bundle.es52.js";
+import { OptionsPopover as H } from "./bundle.es53.js";
+import { arrays as v } from "./bundle.es54.js";
 const ne = (r) => {
   const {
     closeAfterSelect: C,

package/dist/bundle.es14.js

@@ -1,8 +1,8 @@
 import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as b, useRef as R } from "react";
 import { mergeRefs as c } from "react-merge-refs";
-import { InputElement as x } from "./bundle.es53.js";
-import { InputContainer as I } from "./bundle.es54.js";
+import { InputElement as x } from "./bundle.es55.js";
+import { InputContainer as I } from "./bundle.es56.js";
 import g from "classnames";
 const N = b(
   ({

package/dist/bundle.es16.js

@@ -2,7 +2,7 @@ import { jsx as t } from "react/jsx-runtime";
 import C from "classnames";
 import { forwardRef as j, useRef as w } from "react";
 import { mergeRefs as y } from "react-merge-refs";
-import { InputContainer as F } from "./bundle.es54.js";
+import { InputContainer as F } from "./bundle.es56.js";
 import { NumericFormat as V } from "react-number-format";
 const D = j(
   ({

package/dist/bundle.es2.js

@@ -1,6 +1,6 @@
 import { jsxs as I, jsx as a } from "react/jsx-runtime";
 import { box as g } from "@companix/utils-browser";
-import { getInitialsFontSize as h } from "./bundle.es46.js";
+import { getInitialsFontSize as h } from "./bundle.es48.js";
 const k = 24, y = ({
   alt: n,
   crossOrigin: i,

package/dist/bundle.es21.js

@@ -3,7 +3,7 @@ import d from "classnames";
 import * as e from "@radix-ui/react-dialog";
 import { VisuallyHidden as i } from "@radix-ui/react-visually-hidden";
 import { customCSS as p } from "@companix/utils-browser";
-import { RemoveListener as f } from "./bundle.es55.js";
+import { RemoveListener as f } from "./bundle.es57.js";
 const h = ({
   open: t,
   onClosed: l,

package/dist/bundle.es22.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import f from "classnames";
 import * as o from "@radix-ui/react-dialog";
 import { VisuallyHidden as a } from "@radix-ui/react-visually-hidden";
-import { RemoveListener as v } from "./bundle.es55.js";
+import { RemoveListener as v } from "./bundle.es57.js";
 const g = (l) => {
   const { size: n = "s", open: r, onOpenChange: s, children: c, onClosed: t, disableEsc: p, className: d } = l, m = (h) => {
     p && h.preventDefault();

package/dist/bundle.es23.js

@@ -1,7 +1,7 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import * as r from "@radix-ui/react-alert-dialog";
 import { Button as c } from "./bundle.es4.js";
-import { RemoveListener as N } from "./bundle.es55.js";
+import { RemoveListener as N } from "./bundle.es57.js";
 import { VisuallyHidden as u } from "@radix-ui/react-visually-hidden";
 const C = ({
   open: d,

package/dist/bundle.es24.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { Button as m } from "./bundle.es4.js";
-import { useLoading as p } from "./bundle.es56.js";
+import { useLoading as p } from "./bundle.es58.js";
 const g = ({ onClick: o, appearance: r = "primary", ...i }) => {
   const { isLoading: n, isError: t, handleClick: a } = p({ onClick: o });
   return /* @__PURE__ */ e(

package/dist/bundle.es25.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as d } from "react/jsx-runtime";
-import { useTabSlider as b, makeTabId as l } from "./bundle.es47.js";
+import { useTabSlider as b, makeTabId as l } from "./bundle.es49.js";
 import * as n from "@radix-ui/react-tabs";
 import { useRef as m, useId as f, createContext as T, useContext as c } from "react";
 const o = T({ baseId: "", containerRef: {} }), u = ({ children: s, value: e, onChange: r }) => {

package/dist/bundle.es27.js

@@ -1,5 +1,5 @@
 import { jsx as f } from "react/jsx-runtime";
-import { useResizeTextarea as x } from "./bundle.es57.js";
+import { useResizeTextarea as x } from "./bundle.es59.js";
 import { attr as e, callMultiple as u } from "@companix/utils-browser";
 import { useEffect as z } from "react";
 import { mergeRefs as R } from "react-merge-refs";

package/dist/bundle.es28.js

@@ -2,11 +2,11 @@ import { jsx as u } from "react/jsx-runtime";
 import { Popover as T } from "./bundle.es10.js";
 import { Input as w } from "./bundle.es14.js";
 import { useState as A, useRef as j } from "react";
-import { Calendar as E } from "./bundle.es58.js";
-import { useDayDisableCheker as N } from "./bundle.es59.js";
+import { Calendar as E } from "./bundle.es60.js";
+import { useDayDisableCheker as N } from "./bundle.es61.js";
 import { getNum as h, formatTime as v } from "@companix/utils-js";
-import { removeDigits as O } from "./bundle.es52.js";
-import { SelectRightElements as Y } from "./bundle.es60.js";
+import { removeDigits as O } from "./bundle.es54.js";
+import { SelectRightElements as Y } from "./bundle.es62.js";
 const i = {
   char: "-",
   toString: (e) => {

package/dist/bundle.es29.js

@@ -1,8 +1,8 @@
 import { jsxs as D, jsx as h } from "react/jsx-runtime";
 import { useMemo as M, useEffect as C } from "react";
 import { Select as c } from "./bundle.es12.js";
-import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es52.js";
-import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es61.js";
+import { createDateValidation as O, getMonthMaxDay as T } from "./bundle.es54.js";
+import { defaultMin as j, defaultMax as N, useCalendarOptions as V } from "./bundle.es63.js";
 const B = ({
   min: o = j,
   max: e = N,

package/dist/bundle.es31.js

@@ -2,7 +2,7 @@ import { jsxs as p, jsx as a } from "react/jsx-runtime";
 import t from "classnames";
 import { attr as n } from "@companix/utils-browser";
 const u = (o) => {
-  const { fill: e, className: l, label: c, children: i, caption: r, apperance: m = "neutral" } = o;
+  const { fill: e, className: l, label: c, children: i, caption: r, appearance: m = "neutral" } = o;
   return /* @__PURE__ */ p("div", { className: t("form-group", l), "data-fill": n(e), children: [
     /* @__PURE__ */ a("div", { className: "form-group-label", children: c }),
     i,

package/dist/bundle.es32.js

@@ -1,8 +1,8 @@
 import { jsx as g } from "react/jsx-runtime";
 import { useRef as b, useMemo as I, useState as E, useCallback as A } from "react";
 import { getNum as S } from "@companix/utils-js";
-import { getTimesOptions as W, getTimeValue as q, removeDigits as w, convertTimeToOption as y } from "./bundle.es52.js";
-import { SelectRightElements as z } from "./bundle.es60.js";
+import { getTimesOptions as W, getTimeValue as q, removeDigits as w, convertTimeToOption as y } from "./bundle.es54.js";
+import { SelectRightElements as z } from "./bundle.es62.js";
 import { Select as F } from "./bundle.es12.js";
 import { Input as G } from "./bundle.es14.js";
 const o = {

package/dist/bundle.es36.js

@@ -1,37 +1,14 @@
-import { jsx as u } from "react/jsx-runtime";
-import { useState as h, useEffect as c, createContext as f, useContext as w } from "react";
-import { getColorScheme as v, updateDOM as m } from "./bundle.es62.js";
-const i = f({
-  setColorScheme: () => {
-  }
-}), y = () => w(i), p = (d) => {
-  const { defaultColorScheme: o = "system", storageKey: n = "theme", children: l } = d, [r, a] = h(() => v(n, o)), s = (e) => {
-    a(e), localStorage.setItem(n, e);
-  };
-  return c(() => {
-    const e = window ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
-    if (!e)
-      return;
-    const t = () => {
-      r === "system" && m("system");
-    };
-    return e.addEventListener?.("change", t), t(), () => {
-      e.removeEventListener?.("change", t);
-    };
-  }, [r]), c(() => {
-    if (!window)
-      return;
-    const e = (t) => {
-      t.key === n && (t.newValue ? a(t.newValue) : s(o));
-    };
-    return window.addEventListener("storage", e), () => {
-      window.removeEventListener("storage", e);
-    };
-  }, [s, o]), c(() => {
-    m(r);
-  }, [r]), /* @__PURE__ */ u(i.Provider, { value: { colorScheme: r, setColorScheme: s }, children: l });
-};
+import { jsxs as e, jsx as a } from "react/jsx-runtime";
+import d from "classnames";
+import { Icon as o } from "./bundle.es33.js";
+const b = ({ appearance: r, icon: c, className: s, iconSize: i, title: n, description: l, children: m }) => /* @__PURE__ */ e("div", { className: d("blank", s), "data-appearance": r ?? "neutral", children: [
+  /* @__PURE__ */ a("div", { className: "blank-icon", children: /* @__PURE__ */ a(o, { icon: c, size: i }) }),
+  (n || l) && /* @__PURE__ */ e("div", { className: "blank-text", children: [
+    n && /* @__PURE__ */ a("h4", { className: "blank-title", children: n }),
+    l && /* @__PURE__ */ a("div", { className: "blank-description", children: l })
+  ] }),
+  m
+] });
 export {
-  p as ThemeProvider,
-  y as useTheme
+  b as Blank
 };

package/dist/bundle.es37.js

@@ -1,24 +1,54 @@
-import { jsx as l } from "react/jsx-runtime";
-import { memo as n } from "react";
-const i = n(({ storageKey: t, defaultColorScheme: o }) => /* @__PURE__ */ l(
-  "script",
-  {
-    suppressHydrationWarning: !0,
-    dangerouslySetInnerHTML: {
-      __html: `(${a.toString()})("${t}", "${o}")`
+import { jsxs as e, jsx as s } from "react/jsx-runtime";
+import { getInitialsFontSize as l } from "./bundle.es48.js";
+import { clamp as i, customCSS as m, px as n } from "@companix/utils-browser";
+const u = ({
+  appearance: o = "primary",
+  hint: t,
+  size: a = 80,
+  width: c = 6,
+  value: g
+}) => {
+  const r = 100 * i(g, 0, 1);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": r,
+      role: "progressbar",
+      className: "progress-ring",
+      "data-appearance": o,
+      children: [
+        /* @__PURE__ */ e(
+          "svg",
+          {
+            className: "progress-ring-image",
+            style: m({
+              "--percentage": r / 100,
+              "--size": n(a),
+              "--track-width": n(c)
+            }),
+            children: [
+              /* @__PURE__ */ s("circle", { className: "progress-ring-track" }),
+              /* @__PURE__ */ s("circle", { className: "progress-ring-indicator" })
+            ]
+          }
+        ),
+        t && /* @__PURE__ */ e(
+          "div",
+          {
+            className: "progress-ring-hint",
+            style: { fontSize: i(l(a) - 4, 0, 18) },
+            children: [
+              Math.round(r),
+              "%"
+            ]
+          }
+        )
+      ]
     }
-  }
-)), a = (t, o) => {
-  const [r, c] = ["theme-light", "theme-dark"];
-  try {
-    let e = localStorage.getItem(t) || o;
-    e === "system" && (e = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
-    const s = e === "dark" ? c : r;
-    document.documentElement.classList.remove(r, c), document.documentElement.classList.add(s), document.documentElement.style.colorScheme = e;
-  } catch {
-  }
+  );
 };
 export {
-  i as ColorSchemeScript,
-  a as colorSchemeScript
+  u as ProgressRing
 };

package/dist/bundle.es38.js

@@ -1,13 +1,37 @@
-import { useState as s, useEffect as c } from "react";
-const l = (e, a) => {
-  const [t, o] = s(() => {
-    const r = localStorage.getItem(e);
-    return r ? JSON.parse(r) : a;
-  });
+import { jsx as u } from "react/jsx-runtime";
+import { useState as h, useEffect as c, createContext as f, useContext as w } from "react";
+import { getColorScheme as v, updateDOM as m } from "./bundle.es64.js";
+const i = f({
+  setColorScheme: () => {
+  }
+}), y = () => w(i), p = (d) => {
+  const { defaultColorScheme: o = "system", storageKey: n = "theme", children: l } = d, [r, a] = h(() => v(n, o)), s = (e) => {
+    a(e), localStorage.setItem(n, e);
+  };
   return c(() => {
-    localStorage.setItem(e, JSON.stringify(t));
-  }, [t]), [t, o];
+    const e = window ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
+    if (!e)
+      return;
+    const t = () => {
+      r === "system" && m("system");
+    };
+    return e.addEventListener?.("change", t), t(), () => {
+      e.removeEventListener?.("change", t);
+    };
+  }, [r]), c(() => {
+    if (!window)
+      return;
+    const e = (t) => {
+      t.key === n && (t.newValue ? a(t.newValue) : s(o));
+    };
+    return window.addEventListener("storage", e), () => {
+      window.removeEventListener("storage", e);
+    };
+  }, [s, o]), c(() => {
+    m(r);
+  }, [r]), /* @__PURE__ */ u(i.Provider, { value: { colorScheme: r, setColorScheme: s }, children: l });
 };
 export {
-  l as useLocalStorage
+  p as ThemeProvider,
+  y as useTheme
 };