@wrdagency/blockout 0.0.0

package/dist/components/controls/select-control/index.js

@@ -0,0 +1,591 @@
+import { jsx as v, jsxs as R, Fragment as ve } from "react/jsx-runtime";
+import { e as _e } from "../../../CaretDown.es-eySGHzTJ.js";
+import { BaseControl as Oe } from "../base-control/index.js";
+import { useBaseControlProps as Ie } from "../base-control/props.js";
+import { normalizeOption as Ae } from "./options.js";
+import { c as De, a as ke, t as ge, u as Ve, b as Ne, d as Ke, e as Me, f as Le, g as Pe, i as Re, h as Te, j as Be, k as Fe } from "../../../T7VMP3TM--1s529fr.js";
+import { m as He, o as je, t as $e, c as ze, s as G, d as re, e as qe, f as Ue, g as fe, i as We, a as Ge, b as Je, u as Qe } from "../../../UQQRIHDV-Bfi_RJby.js";
+import { c as Xe, P as Ye, C as Ze, o as et, a as tt, b as T, _ as B, q as ot, i as Z, h as O, j as S, t as nt, f as F, d as H, x as rt, y as J, z as E, A as k, B as lt, u as V, e as se, D as st, E as Y, s as we, F as at, m as it, r as ye, G as ct, g as ut, k as dt, l as mt, H as pt, I as vt, J as ft } from "../../../P7GR5CS5-BryEvRCz.js";
+import { createContext as ae, useMemo as ie, useState as X, useRef as St, useEffect as le, useCallback as bt, useContext as Se } from "react";
+import '../../../assets/index11.css';var $ = Xe(
+  [et, tt],
+  [Ye, Ze]
+), ce = $.useContext, ht = $.useScopedContext, ue = $.useProviderContext, gt = $.ContextProvider, Ce = $.ScopedContextProvider, Pt = ae(!1), be = ae(null), wt = "span", yt = {
+  top: "4,10 8,6 12,10",
+  right: "6,4 10,8 6,12",
+  bottom: "4,6 8,10 12,6",
+  left: "10,4 6,8 10,12"
+}, xe = T(function(n) {
+  var o = n, { store: e, placement: t } = o, s = B(o, ["store", "placement"]);
+  const p = ot();
+  e = e || p, Z(
+    e,
+    process.env.NODE_ENV !== "production" && "PopoverDisclosureArrow must be wrapped in a PopoverDisclosure component."
+  );
+  const C = e.useState((l) => t || l.placement).split("-")[0], c = yt[C], a = ie(
+    () => /* @__PURE__ */ v(
+      "svg",
+      {
+        display: "block",
+        fill: "none",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 1.5,
+        viewBox: "0 0 16 16",
+        height: "1em",
+        width: "1em",
+        children: /* @__PURE__ */ v("polyline", { points: c })
+      }
+    ),
+    [c]
+  );
+  return s = O(S({
+    children: a,
+    "aria-hidden": !0
+  }, s), {
+    style: S({
+      width: "1em",
+      height: "1em",
+      pointerEvents: "none"
+    }, s.style)
+  }), nt(s);
+});
+F(
+  function(n) {
+    const o = xe(n);
+    return H(wt, o);
+  }
+);
+function Ct(r = {}) {
+  var n = r, {
+    combobox: o
+  } = n, e = rt(n, [
+    "combobox"
+  ]);
+  const t = He(
+    e.store,
+    je(o, [
+      "value",
+      "items",
+      "renderedItems",
+      "baseElement",
+      "arrowElement",
+      "anchorElement",
+      "contentElement",
+      "popoverElement",
+      "disclosureElement"
+    ])
+  );
+  $e(e, t);
+  const s = t.getState(), p = De(J(k({}, e), {
+    store: t,
+    virtualFocus: E(
+      e.virtualFocus,
+      s.virtualFocus,
+      !0
+    ),
+    includesBaseElement: E(
+      e.includesBaseElement,
+      s.includesBaseElement,
+      !1
+    ),
+    activeId: E(
+      e.activeId,
+      s.activeId,
+      e.defaultActiveId,
+      null
+    ),
+    orientation: E(
+      e.orientation,
+      s.orientation,
+      "vertical"
+    )
+  })), m = ke(J(k({}, e), {
+    store: t,
+    placement: E(
+      e.placement,
+      s.placement,
+      "bottom-start"
+    )
+  })), C = new String(""), c = J(k(k({}, p.getState()), m.getState()), {
+    value: E(
+      e.value,
+      s.value,
+      e.defaultValue,
+      C
+    ),
+    setValueOnMove: E(
+      e.setValueOnMove,
+      s.setValueOnMove,
+      !1
+    ),
+    labelElement: E(s.labelElement, null),
+    selectElement: E(s.selectElement, null),
+    listElement: E(s.listElement, null)
+  }), a = ze(c, p, m, t);
+  return G(
+    a,
+    () => re(a, ["value", "items"], (l) => {
+      if (l.value !== C || !l.items.length) return;
+      const b = l.items.find(
+        (h) => !h.disabled && h.value != null
+      );
+      (b == null ? void 0 : b.value) != null && a.setState("value", b.value);
+    })
+  ), G(
+    a,
+    () => re(a, ["mounted"], (l) => {
+      l.mounted || a.setState("activeId", c.activeId);
+    })
+  ), G(
+    a,
+    () => re(a, ["mounted", "items", "value"], (l) => {
+      if (o || l.mounted) return;
+      const b = ge(l.value), h = b[b.length - 1];
+      if (h == null) return;
+      const w = l.items.find(
+        (P) => !P.disabled && P.value === h
+      );
+      w && a.setState("activeId", w.id);
+    })
+  ), G(
+    a,
+    () => qe(a, ["setValueOnMove", "moves"], (l) => {
+      const { mounted: b, value: h, activeId: w } = a.getState();
+      if (!l.setValueOnMove && b || Array.isArray(h) || !l.moves || !w) return;
+      const P = p.item(w);
+      !P || P.disabled || P.value == null || a.setState("value", P.value);
+    })
+  ), J(k(k(k({}, p), m), a), {
+    combobox: o,
+    setValue: (l) => a.setState("value", l),
+    setLabelElement: (l) => a.setState("labelElement", l),
+    setSelectElement: (l) => a.setState("selectElement", l),
+    setListElement: (l) => a.setState("listElement", l)
+  });
+}
+function xt(r) {
+  const n = Ve();
+  return r = O(S({}, r), {
+    combobox: r.combobox !== void 0 ? r.combobox : n
+  }), Ne(r);
+}
+function Et(r, n, o) {
+  return lt(n, [o.combobox]), fe(r, o, "value", "setValue"), fe(r, o, "setValueOnMove"), Object.assign(
+    Ke(
+      Me(r, n, o),
+      n,
+      o
+    ),
+    { combobox: o.combobox }
+  );
+}
+function _t(r = {}) {
+  r = xt(r);
+  const [n, o] = Ue(Ct, r);
+  return Et(n, o, r);
+}
+var Ot = "span", It = T(
+  function(n) {
+    var o = n, { store: e } = o, t = B(o, ["store"]);
+    const s = ce();
+    return e = e || s, t = xe(S({ store: e }, t)), t;
+  }
+), At = F(function(n) {
+  const o = It(n);
+  return H(Ot, o);
+}), Dt = "button";
+function kt(r) {
+  return Array.from(r.selectedOptions).map((n) => n.value);
+}
+function Q(r, n) {
+  return () => {
+    const o = n();
+    if (!o) return;
+    let e = 0, t = r.item(o);
+    const s = t;
+    for (; t && t.value == null; ) {
+      const p = n(++e);
+      if (!p) return;
+      if (t = r.item(p), t === s) break;
+    }
+    return t == null ? void 0 : t.id;
+  };
+}
+var Vt = T(function(n) {
+  var o = n, {
+    store: e,
+    name: t,
+    form: s,
+    required: p,
+    showOnKeyDown: m = !0,
+    moveOnKeyDown: C = !0,
+    toggleOnPress: c = !0,
+    toggleOnClick: a = c
+  } = o, l = B(o, [
+    "store",
+    "name",
+    "form",
+    "required",
+    "showOnKeyDown",
+    "moveOnKeyDown",
+    "toggleOnPress",
+    "toggleOnClick"
+  ]);
+  const b = ue();
+  e = e || b, Z(
+    e,
+    process.env.NODE_ENV !== "production" && "Select must receive a `store` prop or be wrapped in a SelectProvider component."
+  );
+  const h = l.onKeyDown, w = V(m), P = V(C), y = e.useState("placement").split("-")[0], x = e.useState("value"), A = Array.isArray(x), K = se((u) => {
+    var d;
+    if (h == null || h(u), u.defaultPrevented || !e) return;
+    const { orientation: te, items: oe, activeId: q } = e.getState(), U = te !== "horizontal", W = te !== "vertical", f = !!((d = oe.find((pe) => !pe.disabled && pe.value != null)) != null && d.rowId), de = {
+      ArrowUp: (f || U) && Q(e, e.up),
+      ArrowRight: (f || W) && Q(e, e.next),
+      ArrowDown: (f || U) && Q(e, e.down),
+      ArrowLeft: (f || W) && Q(e, e.previous)
+    }[u.key];
+    de && P(u) && (u.preventDefault(), e.move(de()));
+    const me = y === "top" || y === "bottom";
+    ({
+      ArrowDown: me,
+      ArrowUp: me,
+      ArrowLeft: y === "left",
+      ArrowRight: y === "right"
+    })[u.key] && w(u) && (u.preventDefault(), e.move(q), st(u.currentTarget, "keyup", e.show));
+  });
+  l = Y(
+    l,
+    (u) => /* @__PURE__ */ v(Ce, { value: e, children: u }),
+    [e]
+  );
+  const [j, M] = X(!1), _ = St(!1);
+  le(() => {
+    const u = _.current;
+    _.current = !1, !u && M(!1);
+  }, [x]);
+  const L = e.useState((u) => {
+    var d;
+    return (d = u.labelElement) == null ? void 0 : d.id;
+  }), i = l["aria-label"], g = l["aria-labelledby"] || L, D = e.useState((u) => {
+    if (t)
+      return u.items;
+  }), I = ie(() => [...new Set(D == null ? void 0 : D.map((u) => u.value).filter((u) => u != null))], [D]);
+  l = Y(
+    l,
+    (u) => t ? /* @__PURE__ */ R(ve, { children: [
+      /* @__PURE__ */ R(
+        "select",
+        {
+          style: {
+            border: 0,
+            clip: "rect(0 0 0 0)",
+            height: "1px",
+            margin: "-1px",
+            overflow: "hidden",
+            padding: 0,
+            position: "absolute",
+            whiteSpace: "nowrap",
+            width: "1px"
+          },
+          tabIndex: -1,
+          "aria-hidden": !0,
+          "aria-label": i,
+          "aria-labelledby": g,
+          name: t,
+          form: s,
+          required: p,
+          disabled: l.disabled,
+          value: x,
+          multiple: A,
+          onFocus: () => {
+            var d;
+            return (d = e == null ? void 0 : e.getState().selectElement) == null ? void 0 : d.focus();
+          },
+          onChange: (d) => {
+            _.current = !0, M(!0), e == null || e.setValue(
+              A ? kt(d.target) : d.target.value
+            );
+          },
+          children: [
+            ge(x).map((d) => d == null || I.includes(d) ? null : /* @__PURE__ */ v("option", { value: d, children: d }, d)),
+            I.map((d) => /* @__PURE__ */ v("option", { value: d, children: d }, d))
+          ]
+        }
+      ),
+      u
+    ] }) : u,
+    [
+      e,
+      i,
+      g,
+      t,
+      s,
+      p,
+      x,
+      A,
+      I,
+      l.disabled
+    ]
+  );
+  const z = /* @__PURE__ */ R(ve, { children: [
+    x,
+    /* @__PURE__ */ v(At, {})
+  ] }), ee = e.useState("contentElement");
+  return l = O(S({
+    role: "combobox",
+    "aria-autocomplete": "none",
+    "aria-labelledby": L,
+    "aria-haspopup": at(ee, "listbox"),
+    "data-autofill": j || void 0,
+    "data-name": t,
+    children: z
+  }, l), {
+    ref: we(e.setSelectElement, l.ref),
+    onKeyDown: K
+  }), l = Le(S({ store: e, toggleOnClick: a }, l)), l = Pe(S({ store: e }, l)), l;
+}), Nt = F(function(n) {
+  const o = Vt(n);
+  return H(Dt, o);
+});
+function Kt(r = {}) {
+  const n = _t(r);
+  return /* @__PURE__ */ v(gt, { value: n, children: r.children });
+}
+var Mt = "div";
+function Lt(r, n) {
+  if (n != null)
+    return r == null ? !1 : Array.isArray(r) ? r.includes(n) : r === n;
+}
+var Rt = T(
+  function(n) {
+    var o = n, {
+      store: e,
+      value: t,
+      getItem: s,
+      hideOnClick: p,
+      setValueOnClick: m = t != null,
+      preventScrollOnKeyDown: C = !0,
+      focusOnHover: c = !0
+    } = o, a = B(o, [
+      "store",
+      "value",
+      "getItem",
+      "hideOnClick",
+      "setValueOnClick",
+      "preventScrollOnKeyDown",
+      "focusOnHover"
+    ]), l;
+    const b = ht();
+    e = e || b, Z(
+      e,
+      process.env.NODE_ENV !== "production" && "SelectItem must be wrapped in a SelectList or SelectPopover component."
+    );
+    const h = ye(a.id), w = ct(a), { listElement: P, multiSelectable: N, selected: y, autoFocus: x } = We(e, {
+      listElement: "listElement",
+      multiSelectable(i) {
+        return Array.isArray(i.value);
+      },
+      selected(i) {
+        return Lt(i.value, t);
+      },
+      autoFocus(i) {
+        return t == null || i.value == null || i.activeId !== h && (e != null && e.item(i.activeId)) ? !1 : Array.isArray(i.value) ? i.value[i.value.length - 1] === t : i.value === t;
+      }
+    }), A = bt(
+      (i) => {
+        const g = O(S({}, i), {
+          value: w ? void 0 : t,
+          children: t
+        });
+        return s ? s(g) : g;
+      },
+      [w, t, s]
+    );
+    p = p ?? (t != null && !N);
+    const K = a.onClick, j = V(m), M = V(p), _ = se((i) => {
+      K == null || K(i), !i.defaultPrevented && (dt(i) || mt(i) || (j(i) && t != null && (e == null || e.setValue((g) => Array.isArray(g) ? g.includes(t) ? g.filter((D) => D !== t) : [...g, t] : t)), M(i) && (e == null || e.hide())));
+    });
+    a = Y(
+      a,
+      (i) => /* @__PURE__ */ v(Pt.Provider, { value: y ?? !1, children: i }),
+      [y]
+    ), a = O(S({
+      id: h,
+      role: ut(P),
+      "aria-selected": y,
+      children: t
+    }, a), {
+      autoFocus: (l = a.autoFocus) != null ? l : x,
+      onClick: _
+    }), a = Ge(S({
+      store: e,
+      getItem: A,
+      preventScrollOnKeyDown: C
+    }, a));
+    const L = V(c);
+    return a = Je(O(S({
+      store: e
+    }, a), {
+      // We have to disable focusOnHover when the popup is closed, otherwise
+      // the active item will change to null (the container) when the popup is
+      // closed by clicking on an item.
+      focusOnHover(i) {
+        if (!L(i)) return !1;
+        const g = e == null ? void 0 : e.getState();
+        return !!(g != null && g.open);
+      }
+    })), a;
+  }
+), Tt = it(
+  F(function(n) {
+    const o = Rt(n);
+    return H(Mt, o);
+  })
+), Bt = "div", he = ae(null), Ee = T(
+  function(n) {
+    var o = n, {
+      store: e,
+      resetOnEscape: t = !0,
+      hideOnEnter: s = !0,
+      focusOnMove: p = !0,
+      composite: m,
+      alwaysVisible: C
+    } = o, c = B(o, [
+      "store",
+      "resetOnEscape",
+      "hideOnEnter",
+      "focusOnMove",
+      "composite",
+      "alwaysVisible"
+    ]);
+    const a = ce();
+    e = e || a, Z(
+      e,
+      process.env.NODE_ENV !== "production" && "SelectList must receive a `store` prop or be wrapped in a SelectProvider component."
+    );
+    const l = ye(c.id), b = e.useState("value"), h = Array.isArray(b), [w, P] = X(b), N = e.useState("mounted");
+    le(() => {
+      N || P(b);
+    }, [N, b]), t = t && !h;
+    const y = c.onKeyDown, x = V(t), A = V(s), K = se((f) => {
+      y == null || y(f), !f.defaultPrevented && (f.key === "Escape" && x(f) && (e == null || e.setValue(w)), (f.key === " " || f.key === "Enter") && pt(f) && A(f) && (f.preventDefault(), e == null || e.hide()));
+    }), j = Se(be), M = X(), [_, L] = j || M, i = ie(
+      () => [_, L],
+      [_]
+    ), [g, D] = X(null), I = Se(he);
+    le(() => {
+      if (I)
+        return I(e), () => I(null);
+    }, [I, e]), c = Y(
+      c,
+      (f) => /* @__PURE__ */ v(Ce, { value: e, children: /* @__PURE__ */ v(he.Provider, { value: D, children: /* @__PURE__ */ v(be.Provider, { value: i, children: f }) }) }),
+      [e, i]
+    );
+    const z = !!e.combobox;
+    m = m ?? (!z && g !== e);
+    const [ee, u] = vt(
+      m ? e.setListElement : null
+    ), d = ft(ee, "role", c.role), oe = (m || (d === "listbox" || d === "menu" || d === "tree" || d === "grid")) && h || void 0, q = Re(N, c.hidden, C), U = q ? O(S({}, c.style), { display: "none" }) : c.style;
+    m && (c = S({
+      role: "listbox",
+      "aria-multiselectable": oe
+    }, c));
+    const W = e.useState(
+      (f) => {
+        var ne;
+        return _ || ((ne = f.labelElement) == null ? void 0 : ne.id);
+      }
+    );
+    return c = O(S({
+      id: l,
+      "aria-labelledby": W,
+      hidden: q
+    }, c), {
+      ref: we(u, c.ref),
+      style: U,
+      onKeyDown: K
+    }), c = Te(O(S({ store: e }, c), { composite: m })), c = Pe(S({ store: e, typeahead: !z }, c)), c;
+  }
+);
+F(function(n) {
+  const o = Ee(n);
+  return H(Bt, o);
+});
+var Ft = "div", Ht = T(
+  function(n) {
+    var o = n, { store: e, alwaysVisible: t } = o, s = B(o, ["store", "alwaysVisible"]);
+    const p = ue();
+    return e = e || p, s = Ee(S({ store: e, alwaysVisible: t }, s)), s = Fe(S({ store: e, alwaysVisible: t }, s)), s;
+  }
+), jt = Be(
+  F(function(n) {
+    const o = Ht(n);
+    return H(Ft, o);
+  }),
+  ue
+);
+function $t({
+  store: r,
+  fallback: n,
+  children: o
+} = {}) {
+  const e = ce();
+  r = r || e;
+  const t = Qe(r, (s) => s != null && s.value.length ? s.value : n);
+  return o ? o(t || "") : t;
+}
+const no = (r) => {
+  const { baseProps: n, controlProps: o } = Ie(r, {
+    className: "component-select-control"
+  }), {
+    options: e,
+    placeholder: t = "Choose an option...",
+    ...s
+  } = o, p = (e || []).map(Ae);
+  return /* @__PURE__ */ v(Kt, { children: /* @__PURE__ */ R(Oe, { ...n, children: [
+    /* @__PURE__ */ R(
+      Nt,
+      {
+        className: "component-select-control__input",
+        ...s,
+        children: [
+          /* @__PURE__ */ v("div", { className: "component-select-control__value", children: /* @__PURE__ */ v($t, { fallback: t }) }),
+          /* @__PURE__ */ v("div", { className: "component-select-control__caret", children: /* @__PURE__ */ v(_e, {}) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ v(
+      jt,
+      {
+        className: "component-select-control__popover",
+        wrapperProps: {
+          className: "component-select-control__popover__wrapper"
+        },
+        fitViewport: !0,
+        flip: !1,
+        gutter: 0,
+        overflowPadding: 4,
+        shift: -1,
+        children: p.map((m) => /* @__PURE__ */ R(
+          Tt,
+          {
+            disabled: m.disabled,
+            value: m.value,
+            className: "component-select-control__option",
+            children: [
+              /* @__PURE__ */ v("div", { className: "component-select-control__option__label", children: m.label }),
+              m.description && /* @__PURE__ */ v("div", { className: "component-select-control__option__description", children: m.description })
+            ]
+          },
+          m.value
+        ))
+      }
+    )
+  ] }) });
+};
+export {
+  no as SelectControl
+};

package/dist/components/controls/select-control/options.d.ts

@@ -0,0 +1,11 @@
+export type Option = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    description?: string;
+};
+export type PartialOption = Partial<Option> & {
+    value: string;
+};
+export type Optionable = Option | PartialOption | string;
+export declare function normalizeOption(opt: Optionable): Option;

package/dist/components/controls/select-control/options.js

@@ -0,0 +1,12 @@
+function l(e) {
+  return typeof e == "string" ? {
+    value: e,
+    label: e
+  } : {
+    label: e.label || e.value,
+    ...e
+  };
+}
+export {
+  l as normalizeOption
+};

package/dist/components/controls/text-control/index.d.ts

@@ -0,0 +1,6 @@
+import { InputHTMLAttributes } from 'react';
+import { ControlFC } from '../base-control/props';
+interface TextControlProps extends InputHTMLAttributes<HTMLInputElement> {
+}
+export declare const TextControl: ControlFC<TextControlProps>;
+export {};

package/dist/components/controls/text-control/index.js

@@ -0,0 +1,12 @@
+import { jsx as o } from "react/jsx-runtime";
+import { BaseControl as s } from "../base-control/index.js";
+import { useBaseControlProps as e } from "../base-control/props.js";
+const l = (r) => {
+  const { baseProps: t, controlProps: n } = e(r, {
+    className: "component-text-control"
+  });
+  return /* @__PURE__ */ o(s, { ...t, children: /* @__PURE__ */ o("input", { ...n }) });
+};
+export {
+  l as TextControl
+};

package/dist/components/controls/textarea-control/index.d.ts

@@ -0,0 +1,6 @@
+import { TextareaHTMLAttributes } from 'react';
+import { ControlFC } from '../base-control/props';
+interface TextareaControlProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+export declare const TextareaControl: ControlFC<TextareaControlProps>;
+export {};

package/dist/components/controls/textarea-control/index.js

@@ -0,0 +1,18 @@
+import { jsx as o } from "react/jsx-runtime";
+import { BaseControl as a } from "../base-control/index.js";
+import { useBaseControlProps as n } from "../base-control/props.js";
+import '../../../assets/index4.css';const p = (r) => {
+  const { baseProps: t, controlProps: e } = n(r, {
+    className: "component-textarea-control"
+  });
+  return /* @__PURE__ */ o(a, { ...t, children: /* @__PURE__ */ o(
+    "textarea",
+    {
+      className: "component-textarea-control__input",
+      ...e
+    }
+  ) });
+};
+export {
+  p as TextareaControl
+};

package/dist/components/controls/toggle-control/index.d.ts

@@ -0,0 +1,8 @@
+import { InputHTMLAttributes } from 'react';
+import { ControlFC } from '../base-control/props';
+interface ToggleControlProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    onLabel?: string;
+    offLabel?: string;
+}
+export declare const ToggleControl: ControlFC<ToggleControlProps>;
+export {};