@wrdagency/blockout 0.0.19 → 0.1.1

package/dist/components/progress/index.js

@@ -1,30 +1,47 @@
-import { jsx as p } from "react/jsx-runtime";
-import { cn as m } from "../../utils/css.js";
-import '../../assets/index8.css';const g = ({
-  className: s,
-  style: e,
-  steps: r = 0,
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { cn as c } from "../../utils/css.js";
+import "react";
+import '../../assets/style4.css';import '../../assets/style3.css';import '../../assets/style2.css';import '../../assets/index11.css';/* empty css                   */
+/* empty css                   */
+/* empty css                   */
+import { VisuallyHidden as d } from "../../primitives/visually-hidden/index.js";
+const N = ({
+  className: p,
+  steps: o = 0,
+  min: m = 0,
   max: t = 1,
-  value: o = void 0,
-  ...n
-}) => /* @__PURE__ */ p(
-  "progress",
-  {
-    className: m(
-      "component-progress",
-      r > 0 && "component-progress--with-steps",
-      s
-    ),
-    style: {
-      "--component-progress__steps": r,
-      ...e
-    },
-    max: t,
-    value: o,
-    ...n,
-    children: o !== void 0 ? o + "%" : "Indeterminate"
-  }
-);
+  value: r = void 0
+}) => {
+  const n = (r || 0) * o;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: c(
+        "component-progress",
+        o > 0 && "component-progress--with-steps",
+        r === void 0 && "component-progress--indeterminate",
+        p
+      ),
+      style: {
+        "--component-progress__steps": o,
+        "--component-progress__value": r,
+        "--component-progress__min": m,
+        "--component-progress__max": t
+      },
+      children: [
+        /* @__PURE__ */ s(d, { children: /* @__PURE__ */ s("progress", { max: t, value: r, children: r !== void 0 ? r + "%" : "Indeterminate" }) }),
+        Array.from({ length: o || 1 }, (g, e) => /* @__PURE__ */ s(
+          "div",
+          {
+            className: "component-progress__step",
+            "data-phase": e === n - 1 ? "present" : e < n - 1 ? "past" : "future"
+          },
+          e
+        ))
+      ]
+    }
+  );
+};
 export {
-  g as Progress
+  N as Progress
 };

package/dist/components/tabs/index.js

@@ -0,0 +1,12 @@
+import { List as o } from "./list.js";
+import { Panel as r } from "./panel.js";
+import { Tabs as m } from "./root.js";
+import { Tab as s } from "./tab.js";
+import '../../assets/index2.css';const p = Object.assign(m, {
+  Panel: r,
+  List: o,
+  Tab: s
+});
+export {
+  p as Tabs
+};

package/dist/components/tabs/list.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, FC, PropsWithChildren } from 'react';
+interface ListProps extends PropsWithChildren {
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const List: FC<ListProps>;
+export {};

package/dist/components/tabs/list.js

@@ -0,0 +1,42 @@
+import { jsx as n } from "react/jsx-runtime";
+import { cn as m } from "../../utils/css.js";
+import { a as u, T as b } from "../../UYGDZTLQ-DcCmv5SE.js";
+import { u as f } from "../../5JTVDSTH-CG1NL6Fw.js";
+import { f as l, a as v, q as d, _ as T, i as _, l as L, o as i } from "../../LMDWO4NN--KEvZePp.js";
+var x = "div", E = v(
+  function(r) {
+    var e = r, { store: t } = e, o = T(e, ["store"]);
+    const p = u();
+    t = t || p, _(
+      t,
+      process.env.NODE_ENV !== "production" && "TabList must receive a `store` prop or be wrapped in a TabProvider component."
+    );
+    const c = t.useState(
+      (a) => a.orientation === "both" ? void 0 : a.orientation
+    );
+    return o = L(
+      o,
+      (a) => /* @__PURE__ */ n(b, { value: t, children: a }),
+      [t]
+    ), t.composite && (o = i({
+      focusable: !1
+    }, o)), o = i({
+      role: "tablist",
+      "aria-orientation": c
+    }, o), o = f(i({ store: t }, o)), o;
+  }
+), N = l(function(r) {
+  const e = E(r);
+  return d(x, e);
+});
+const R = ({ className: s, children: r, style: e }) => /* @__PURE__ */ n(
+  N,
+  {
+    className: m("component-tabs__list", s),
+    style: e,
+    children: r
+  }
+);
+export {
+  R as List
+};

package/dist/components/tabs/panel.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, FC, PropsWithChildren } from 'react';
+interface PanelProps extends PropsWithChildren {
+    value: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const Panel: FC<PanelProps>;
+export {};

package/dist/components/tabs/panel.js

@@ -0,0 +1,132 @@
+import { jsx as S } from "react/jsx-runtime";
+import { cn as A } from "../../utils/css.js";
+import { a as K, T as O } from "../../UYGDZTLQ-DcCmv5SE.js";
+import { u as j, a as V } from "../../WYCIER3C-DRn904Gy.js";
+import { u as q } from "../../RZ4GPYOB-13-5LlEb.js";
+import { g as F, u as W } from "../../PFRGBC2K-BEg8ahbY.js";
+import { a as T } from "../../YV4JVR4I-kvospPUa.js";
+import { f as z, a as B, q as G, _ as J, i as Q, s as U, e as h, m as _, o as d, l as X, n as Y } from "../../LMDWO4NN--KEvZePp.js";
+import { useRef as w, useEffect as R, useState as Z, useCallback as $ } from "react";
+var ee = "div", te = B(
+  function(c) {
+    var a = c, {
+      store: t,
+      unmountOnHide: C,
+      tabId: p,
+      getItem: b,
+      scrollRestoration: v,
+      scrollElement: l
+    } = a, r = J(a, [
+      "store",
+      "unmountOnHide",
+      "tabId",
+      "getItem",
+      "scrollRestoration",
+      "scrollElement"
+    ]);
+    const D = K();
+    t = t || D, Q(
+      t,
+      process.env.NODE_ENV !== "production" && "TabPanel must receive a `store` prop or be wrapped in a TabProvider component."
+    );
+    const I = w(null), m = U(r.id), s = T(
+      t.panels,
+      () => {
+        var e;
+        return p || ((e = t == null ? void 0 : t.panels.item(m)) == null ? void 0 : e.tabId);
+      }
+    ), k = T(
+      t,
+      (e) => !!s && e.selectedId === s
+    ), g = j({ open: k }), P = T(g, "mounted"), E = w(
+      /* @__PURE__ */ new Map()
+    ), x = h(() => {
+      const e = I.current;
+      return e ? l ? typeof l == "function" ? l(e) : "current" in l ? l.current : l : e : null;
+    });
+    R(() => {
+      var e, o;
+      if (!v || !P) return;
+      const n = x();
+      if (!n) return;
+      if (v === "reset") {
+        n.scroll(0, 0);
+        return;
+      }
+      if (!s) return;
+      const u = E.current.get(s);
+      n.scroll((e = u == null ? void 0 : u.x) != null ? e : 0, (o = u == null ? void 0 : u.y) != null ? o : 0);
+      const i = () => {
+        E.current.set(s, {
+          x: n.scrollLeft,
+          y: n.scrollTop
+        });
+      };
+      return n.addEventListener("scroll", i), () => {
+        n.removeEventListener("scroll", i);
+      };
+    }, [v, P, s, x, t]);
+    const [H, L] = Z(!1);
+    R(() => {
+      const e = I.current;
+      if (!e) return;
+      const o = F(e);
+      L(!!o.length);
+    }, []);
+    const M = $(
+      (e) => {
+        const o = _(d({}, e), { id: m || e.id, tabId: p });
+        return b ? b(o) : o;
+      },
+      [m, p, b]
+    ), y = r.onKeyDown, N = h((e) => {
+      if (y == null || y(e), e.defaultPrevented || !(t != null && t.composite)) return;
+      const n = {
+        ArrowLeft: t.previous,
+        ArrowRight: t.next,
+        Home: t.first,
+        End: t.last
+      }[e.key];
+      if (!n) return;
+      const { selectedId: u } = t.getState(), i = n({ activeId: u });
+      i && (e.preventDefault(), t.move(i));
+    });
+    return r = X(
+      r,
+      (e) => /* @__PURE__ */ S(O, { value: t, children: e }),
+      [t]
+    ), r = _(d({
+      id: m,
+      role: "tabpanel",
+      "aria-labelledby": s || void 0
+    }, r), {
+      children: C && !P ? null : r.children,
+      ref: Y(I, r.ref),
+      onKeyDown: N
+    }), r = W(d({
+      // If the tab panel is rendered as part of another composite widget such
+      // as combobox, it should not be focusable.
+      focusable: !t.composite && !H
+    }, r)), r = V(d({ store: g }, r)), r = q(_(d({ store: t.panels }, r), { getItem: M })), r;
+  }
+), re = z(function(c) {
+  const a = te(c);
+  return G(ee, a);
+});
+const me = ({
+  value: f,
+  className: c,
+  style: a,
+  children: t
+}) => /* @__PURE__ */ S(
+  re,
+  {
+    tabId: f,
+    className: A("component-tabs__panel", c),
+    style: a,
+    children: t
+  }
+);
+export {
+  me as Panel
+};

package/dist/components/tabs/root.d.ts

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+interface TabsProps extends PropsWithChildren {
+    value?: string | null;
+    onValueChange?: (value: string | null | undefined) => void;
+    defaultValue?: string | null;
+    className?: string;
+}
+export declare const Tabs: FC<TabsProps>;
+export {};

package/dist/components/tabs/root.js

@@ -0,0 +1,173 @@
+import { jsx as P } from "react/jsx-runtime";
+import { cn as F } from "../../utils/css.js";
+import { u as U } from "../../DG5U6ZEL-CVj-Czp2.js";
+import { c as k, a as z, b as A } from "../../4CMBR7SL-BAGv8IL2.js";
+import { u as K } from "../../S43UC3DV-Dn8EFLaT.js";
+import { m as N, o as O, c as R, s as f, b as l, g as W, e as y, f as M } from "../../YV4JVR4I-kvospPUa.js";
+import { $ as X, Y as p, X as I, U as S, a0 as T, m as B, o as L, Z as V } from "../../LMDWO4NN--KEvZePp.js";
+import { useMemo as Y } from "react";
+import { b as Z } from "../../UYGDZTLQ-DcCmv5SE.js";
+function q(e = {}) {
+  var n = e, {
+    composite: o,
+    combobox: c
+  } = n, d = X(n, [
+    "composite",
+    "combobox"
+  ]);
+  const g = [
+    "items",
+    "renderedItems",
+    "moves",
+    "orientation",
+    "virtualFocus",
+    "includesBaseElement",
+    "baseElement",
+    "focusLoop",
+    "focusShift",
+    "focusWrap"
+  ], v = N(
+    d.store,
+    O(o, g),
+    O(c, g)
+  ), r = v == null ? void 0 : v.getState(), b = k(p(S({}, d), {
+    store: v,
+    // We need to explicitly set the default value of `includesBaseElement` to
+    // `false` since we don't want the composite store to default it to `true`
+    // when the activeId state is null, which could be the case when rendering
+    // combobox with tab.
+    includesBaseElement: I(
+      d.includesBaseElement,
+      r == null ? void 0 : r.includesBaseElement,
+      !1
+    ),
+    orientation: I(
+      d.orientation,
+      r == null ? void 0 : r.orientation,
+      "horizontal"
+    ),
+    focusLoop: I(d.focusLoop, r == null ? void 0 : r.focusLoop, !0)
+  })), x = z(), j = p(S({}, b.getState()), {
+    selectedId: I(
+      d.selectedId,
+      r == null ? void 0 : r.selectedId,
+      d.defaultSelectedId
+    ),
+    selectOnMove: I(
+      d.selectOnMove,
+      r == null ? void 0 : r.selectOnMove,
+      !0
+    )
+  }), t = R(j, b, v);
+  f(
+    t,
+    () => l(t, ["moves"], () => {
+      const { activeId: s, selectOnMove: a } = t.getState();
+      if (!a || !s) return;
+      const i = b.item(s);
+      i && (i.dimmed || i.disabled || t.setState("selectedId", i.id));
+    })
+  );
+  let h = !0;
+  f(
+    t,
+    () => W(t, ["selectedId"], (s, a) => {
+      if (!h) {
+        h = !0;
+        return;
+      }
+      o && s.selectedId === a.selectedId || t.setState("activeId", s.selectedId);
+    })
+  ), f(
+    t,
+    () => l(t, ["selectedId", "renderedItems"], (s) => {
+      if (s.selectedId !== void 0) return;
+      const { activeId: a, renderedItems: i } = t.getState(), m = b.item(a);
+      if (m && !m.disabled && !m.dimmed)
+        t.setState("selectedId", m.id);
+      else {
+        const _ = i.find(
+          (u) => !u.disabled && !u.dimmed
+        );
+        t.setState("selectedId", _ == null ? void 0 : _.id);
+      }
+    })
+  ), f(
+    t,
+    () => l(t, ["renderedItems"], (s) => {
+      const a = s.renderedItems;
+      if (a.length)
+        return l(x, ["renderedItems"], (i) => {
+          const m = i.renderedItems;
+          m.some((u) => !u.tabId) && m.forEach((u, $) => {
+            if (u.tabId) return;
+            const E = a[$];
+            E && x.renderItem(p(S({}, u), { tabId: E.id }));
+          });
+        });
+    })
+  );
+  let C = null;
+  return f(t, () => {
+    const s = () => {
+      C = t.getState().selectedId;
+    }, a = () => {
+      h = !1, t.setState("selectedId", C);
+    };
+    if (o && "setSelectElement" in o)
+      return T(
+        l(o, ["value"], s),
+        l(o, ["mounted"], a)
+      );
+    if (c)
+      return T(
+        l(c, ["selectedValue"], s),
+        l(c, ["mounted"], a)
+      );
+  }), p(S(S({}, b), t), {
+    panels: x,
+    setSelectedId: (s) => t.setState("selectedId", s),
+    select: (s) => {
+      t.setState("selectedId", s), b.move(s);
+    }
+  });
+}
+function w(e, n, o) {
+  V(n, [o.composite, o.combobox]), e = A(e, n, o), M(e, o, "selectedId", "setSelectedId"), M(e, o, "selectOnMove");
+  const [c, d] = y(() => e.panels, {});
+  return V(d, [e, d]), Object.assign(
+    Y(() => B(L({}, e), { panels: c }), [e, c]),
+    { composite: o.composite, combobox: o.combobox }
+  );
+}
+function D(e = {}) {
+  const n = K(), o = U() || n;
+  e = B(L({}, e), {
+    composite: e.composite !== void 0 ? e.composite : o,
+    combobox: e.combobox !== void 0 ? e.combobox : n
+  });
+  const [c, d] = y(q, e);
+  return w(c, d, e);
+}
+function G(e = {}) {
+  const n = D(e);
+  return /* @__PURE__ */ P(Z, { value: n, children: e.children });
+}
+const ce = ({
+  value: e,
+  onValueChange: n,
+  defaultValue: o,
+  className: c,
+  children: d
+}) => /* @__PURE__ */ P(
+  G,
+  {
+    selectedId: e,
+    setSelectedId: n,
+    defaultSelectedId: o,
+    children: /* @__PURE__ */ P("div", { className: F("component-tabs", c), children: d })
+  }
+);
+export {
+  ce as Tabs
+};

package/dist/components/tabs/tab.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+interface TabProps extends PropsWithChildren {
+    value: string;
+    className?: string;
+}
+export declare const Tab: FC<TabProps>;
+export {};

package/dist/components/tabs/tab.js

@@ -0,0 +1,81 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as N } from "../../utils/css.js";
+import { u as w } from "../../UYGDZTLQ-DcCmv5SE.js";
+import { C, u as E } from "../../6VRAQV3D-2rb_aClP.js";
+import { a as F } from "../../YV4JVR4I-kvospPUa.js";
+import { r as V, f as W, a as D, q as j, _ as A, i as q, s as H, t as L, m as a, o as r, e as O } from "../../LMDWO4NN--KEvZePp.js";
+import { useCallback as $ } from "react";
+var y = "button", z = D(function(i) {
+  var n = i, {
+    store: e,
+    getItem: l
+  } = n, t = A(n, [
+    "store",
+    "getItem"
+  ]), p;
+  const h = w();
+  e = e || h, q(
+    e,
+    process.env.NODE_ENV !== "production" && "Tab must be wrapped in a TabList component."
+  );
+  const b = H(), s = t.id || b, I = L(t), x = $(
+    (o) => {
+      const c = a(r({}, o), { dimmed: I });
+      return l ? l(c) : c;
+    },
+    [I, l]
+  ), f = t.onClick, g = O((o) => {
+    f == null || f(o), !o.defaultPrevented && (e == null || e.setSelectedId(s));
+  }), T = e.panels.useState(
+    (o) => {
+      var c;
+      return (c = o.items.find((k) => k.tabId === s)) == null ? void 0 : c.id;
+    }
+  ), v = b ? t.shouldRegisterItem : !1, S = e.useState((o) => !!s && o.activeId === s), u = e.useState((o) => !!s && o.selectedId === s), P = e.useState((o) => !!e.item(o.activeId)), R = S || u && !P, _ = u || ((p = t.accessibleWhenDisabled) != null ? p : !0);
+  if (F(
+    e.combobox || e.composite,
+    "virtualFocus"
+  ) && (t = a(r({}, t), {
+    tabIndex: -1
+  })), t = a(r({
+    id: s,
+    role: "tab",
+    "aria-selected": u,
+    "aria-controls": T || void 0
+  }, t), {
+    onClick: g
+  }), e.composite) {
+    const o = {
+      id: s,
+      accessibleWhenDisabled: _,
+      store: e.composite,
+      shouldRegisterItem: R && v,
+      rowId: t.rowId,
+      render: t.render
+    };
+    t = a(r({}, t), {
+      render: /* @__PURE__ */ m(
+        C,
+        a(r({}, o), {
+          render: e.combobox && e.composite !== e.combobox ? /* @__PURE__ */ m(C, a(r({}, o), { store: e.combobox })) : o.render
+        })
+      )
+    });
+  }
+  return t = E(a(r({
+    store: e
+  }, t), {
+    accessibleWhenDisabled: _,
+    getItem: x,
+    shouldRegisterItem: v
+  })), t;
+}), B = V(
+  W(function(i) {
+    const n = z(i);
+    return j(y, n);
+  })
+);
+const Z = ({ className: d, value: i, children: n }) => /* @__PURE__ */ m(B, { id: i, className: N("component-tabs__tab", d), children: /* @__PURE__ */ m("div", { className: "component-tabs__tab__label", children: n }) });
+export {
+  Z as Tab
+};

package/dist/components/toolbar/index.js

@@ -0,0 +1,27 @@
+import { createComposite as n } from "../../utils/components.js";
+import { Button as c } from "../button/index.js";
+import { u, R as i } from "../../root-CaKPdqzv.js";
+import { u as l } from "../../6VRAQV3D-2rb_aClP.js";
+import { r as p, f as b, a as f, q as _, _ as I, o as T } from "../../LMDWO4NN--KEvZePp.js";
+import '../../assets/index12.css';var v = "button", R = f(
+  function(t) {
+    var o = t, { store: e } = o, r = I(o, ["store"]);
+    const m = u();
+    return e = e || m, r = l(T({ store: e }, r)), r;
+  }
+), a = p(
+  b(function(t) {
+    const o = R(t);
+    return _(v, o);
+  })
+);
+const B = Object.assign(i, {
+  Generic: a,
+  IconButton: n(a, c.Icon, {
+    size: "small",
+    className: "component-toolbar__icon-button"
+  })
+});
+export {
+  B as Toolbar
+};

package/dist/components/toolbar/root.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+interface RootProps extends PropsWithChildren {
+    className?: string;
+}
+export declare const Root: FC<RootProps>;
+export {};

package/dist/components/toolbar/root.js

@@ -0,0 +1,6 @@
+import "react/jsx-runtime";
+import "../../utils/css.js";
+import { R as p } from "../../root-CaKPdqzv.js";
+export {
+  p as Root
+};

package/dist/composite-provider-DNftbE5U.js

@@ -0,0 +1,10 @@
+import { u as e } from "./4CMBR7SL-BAGv8IL2.js";
+import { a as t } from "./P7GR5CS5-BoOYUfSQ.js";
+import { jsx as i } from "react/jsx-runtime";
+function a(o = {}) {
+  const r = e(o);
+  return /* @__PURE__ */ i(t, { value: r, children: o.children });
+}
+export {
+  a as C
+};

package/dist/hooks/state.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Fixes a typing bug in @uidotdev/usehooks.
+ */
+export declare function useObjectState<T>(initial: T): [T, (arg: Partial<T> | ((state: T) => Partial<T>)) => void];

package/dist/hooks/state.js

@@ -0,0 +1,7 @@
+import { b as e } from "../index-1AjPIqTN.js";
+function o(t) {
+  return e(t);
+}
+export {
+  o as useObjectState
+};

package/dist/hooks/theme.js

@@ -1,45 +1,14 @@
-import * as c from "react";
-import { useMemo as g, useEffect as d } from "react";
-function u(e, t) {
-  window.dispatchEvent(new StorageEvent("storage", { key: e, newValue: t }));
-}
-const l = (e, t) => {
-  const n = JSON.stringify(t);
-  window.localStorage.setItem(e, n), u(e, n);
-}, m = (e) => {
-  window.localStorage.removeItem(e), u(e, null);
-}, i = (e) => window.localStorage.getItem(e), S = (e) => (window.addEventListener("storage", e), () => window.removeEventListener("storage", e)), f = () => {
-  throw Error("useLocalStorage is a client-only hook");
-};
-function w(e, t) {
-  const n = () => i(e), r = c.useSyncExternalStore(
-    S,
-    n,
-    f
-  ), a = c.useCallback(
-    (o) => {
-      try {
-        const s = typeof o == "function" ? o(JSON.parse(r)) : o;
-        s == null ? m(e) : l(e, s);
-      } catch (s) {
-        console.warn(s);
-      }
-    },
-    [e, r]
-  );
-  return c.useEffect(() => {
-    i(e) === null && l(e, t);
-  }, [e, t]), [r ? JSON.parse(r) : t, a];
-}
-function p() {
-  const [e, t] = w("wrd__theme__dark", !1), n = g(() => e ? "dark" : "light", [e]), r = (o) => t(o === "dark"), a = () => t((o) => !o);
-  return d(() => {
+import { u as a } from "../index-1AjPIqTN.js";
+import { useMemo as c, useEffect as u } from "react";
+function h() {
+  const [e, o] = a("wrd__theme__dark", !1), r = c(() => e ? "dark" : "light", [e]), s = (t) => o(t === "dark"), m = () => o((t) => !t);
+  return u(() => {
     document && document.documentElement.setAttribute(
       "data-colour-scheme",
       e ? "dark" : "light"
     );
-  }, [e]), { isDark: e, theme: n, setTheme: r, toggleDarkTheme: a };
+  }, [e]), { isDark: e, theme: r, setTheme: s, toggleDarkTheme: m };
 }
 export {
-  p as useTheme
+  h as useTheme
 };