@wrdagency/blockout 0.1.9 → 1.0.0

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

@@ -1,19 +1,20 @@
 import { jsx as n } from "react/jsx-runtime";
 import { noop as r } from "../../../utils/noop.js";
-import { BaseControl as c } from "../base-control/index.js";
-import { useBaseControlProps as m } from "../base-control/props.js";
-const f = (t) => {
-  const { baseProps: e, controlProps: s } = m(t, {
+import { BaseControl as m } from "../base-control/index.js";
+import { useBaseControlProps as c } from "../base-control/props.js";
+import '../../../assets/style16.css';/* empty css                      */
+const x = (t) => {
+  const { baseProps: e, controlProps: s } = c(t, {
     className: "component-text-control"
   }), {
     onChangeValue: a = r,
-    onChange: l = r,
-    ...p
+    onChange: p = r,
+    ...l
   } = s;
-  return /* @__PURE__ */ n(c, { ...e, children: /* @__PURE__ */ n("input", { onChange: (o) => {
-    a(o.currentTarget.value), l(o);
-  }, ...p }) });
+  return /* @__PURE__ */ n(m, { ...e, children: /* @__PURE__ */ n("input", { onChange: (o) => {
+    a(o.currentTarget.value), p(o);
+  }, ...l }) });
 };
 export {
-  f as TextControl
+  x as TextControl
 };

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

@@ -1,26 +1,27 @@
 import { jsx as r } from "react/jsx-runtime";
 import { noop as e } from "../../../utils/noop.js";
-import { BaseControl as p } from "../base-control/index.js";
+import { BaseControl as c } from "../base-control/index.js";
 import { useBaseControlProps as m } from "../base-control/props.js";
-import '../../../assets/index8.css';const x = (n) => {
+import '../../../assets/styles3.css';/* empty css                       */
+const f = (n) => {
   const { baseProps: t, controlProps: a } = m(n, {
     className: "component-textarea-control"
   }), {
     onChangeValue: s = e,
     onChange: l = e,
-    ...c
+    ...p
   } = a;
-  return /* @__PURE__ */ r(p, { ...t, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(c, { ...t, children: /* @__PURE__ */ r(
     "textarea",
     {
       className: "component-textarea-control__input",
       onChange: (o) => {
         s(o.currentTarget.value), l(o);
       },
-      ...c
+      ...p
     }
   ) });
 };
 export {
-  x as TextareaControl
+  f as TextareaControl
 };

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

@@ -1,10 +1,11 @@
-import { InputHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
 import { ControlFC } from '../base-control/props';
 interface ToggleControlProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "checked"> {
     value?: boolean;
     onChangeValue?: (value: boolean) => void;
-    onLabel?: string;
-    offLabel?: string;
+    onLabel?: ReactNode;
+    offLabel?: ReactNode;
+    toggle?: boolean;
 }
 export declare const ToggleControl: ControlFC<ToggleControlProps>;
 export {};

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

@@ -1,63 +1,83 @@
-import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { noop as l } from "../../../utils/noop.js";
-import { useRef as d } from "react";
-import '../../../assets/style4.css';import '../../../assets/style3.css';import '../../../assets/style2.css';import '../../../assets/index9.css';/* empty css                      */
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { cn as _ } from "../../../utils/css.js";
+import '../../../assets/styles4.css';import '../../../assets/style6.css';import '../../../assets/style5.css';import '../../../assets/style4.css';import '../../../assets/style3.css';import '../../../assets/style2.css';import '../../../assets/style.css';import '../../../assets/style9.css';/* empty css                      */
+import { noop as c } from "../../../utils/noop.js";
+import { useRef as C } from "react";
 /* empty css                      */
 /* empty css                      */
-import { VisuallyHidden as g } from "../../../primitives/visually-hidden/index.js";
-import { BaseControl as b } from "../base-control/index.js";
-import { useBaseControlProps as C } from "../base-control/props.js";
-const A = (c) => {
-  const { baseProps: s, controlProps: a } = C(c, {
+import "../../../primitives/popover/index.js";
+/* empty css                      */
+import "../../../primitives/scroll-area/index.js";
+import "../../../primitives/symbol/index.js";
+/* empty css                      */
+/* empty css                      */
+/* empty css                      */
+import { VisuallyHidden as k } from "../../../primitives/visually-hidden/index.js";
+import { BaseControl as y } from "../base-control/index.js";
+import { useBaseControlProps as x } from "../base-control/props.js";
+/* empty css                       */
+const z = (s) => {
+  const { baseProps: m, controlProps: p } = x(s, {
     className: "component-toggle-control"
   }), {
     onLabel: i = "On",
-    offLabel: p = "Off",
-    value: m = !1,
-    onChange: f = l,
-    onChangeValue: r = l,
+    offLabel: a = "Off",
+    toggle: f = !1,
+    value: r = !1,
+    onChange: g = c,
+    onChangeValue: l = c,
     ...u
-  } = a, n = d(null), t = (o) => {
-    n.current && (n.current.checked = o, n.current.focus(), r(o));
+  } = p, e = C(null), n = (o) => {
+    e.current && (e.current.checked = o, e.current.focus(), l(o));
+  }, h = (o) => {
+    o.key === "ArrowLeft" ? n(!1) : o.key === "ArrowRight" && n(!0);
+  }, d = (o) => {
+    l(o.currentTarget.checked), g(o);
   };
-  return /* @__PURE__ */ e(b, { ...s, children: /* @__PURE__ */ h("div", { className: "component-toggle-control__buttons", children: [
-    /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(
-      "input",
-      {
-        type: "checkbox",
-        onKeyDown: (o) => {
-          o.key === "ArrowLeft" ? t(!1) : o.key === "ArrowRight" && t(!0);
-        },
-        ref: n,
-        checked: m,
-        onChange: (o) => {
-          r(o.currentTarget.checked), f(o);
-        },
-        ...u
-      }
-    ) }),
-    /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        className: "component-toggle-control__off",
-        onClick: () => t(!1),
-        tabIndex: -1,
-        children: p
-      }
-    ),
-    /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        className: "component-toggle-control__on",
-        onClick: () => t(!0),
-        tabIndex: -1,
-        children: i
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ t(y, { ...m, children: /* @__PURE__ */ b(
+    "div",
+    {
+      className: _(
+        "component-toggle-control__buttons",
+        r && "component-toggle-control__buttons--checked",
+        f && "component-toggle-control__buttons--toggle"
+      ),
+      children: [
+        /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(
+          "input",
+          {
+            type: "checkbox",
+            onKeyDown: h,
+            ref: e,
+            checked: r,
+            onChange: d,
+            ...u
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "component-toggle-control__off",
+            onClick: () => n(!1),
+            tabIndex: -1,
+            children: a
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "component-toggle-control__on",
+            onClick: () => n(!0),
+            tabIndex: -1,
+            children: i
+          }
+        )
+      ]
+    }
+  ) });
 };
 export {
-  A as ToggleControl
+  z as ToggleControl
 };

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

@@ -3,6 +3,7 @@ import { InputHTMLAttributes } from 'react';
 import { ControlProps } from '../base-control/props';
 type BaseProps<T extends string> = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "checked"> & {
     options: Optionable<T>[];
+    noLabels?: boolean;
 };
 type ValueSingleProps<T extends string> = {
     multiple?: false;

package/dist/components/controls/toggle-group-control/index.js

@@ -1,35 +1,44 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import '../../../assets/styles5.css';import '../../../assets/style6.css';import '../../../assets/style5.css';import '../../../assets/style4.css';import '../../../assets/style3.css';import '../../../assets/style2.css';import '../../../assets/style.css';import '../../../assets/style9.css';/* empty css                      */
 import { noop as s } from "../../../utils/noop.js";
-import { useMemo as b } from "react";
-import '../../../assets/style4.css';import '../../../assets/style3.css';import '../../../assets/style2.css';import '../../../assets/index10.css';/* empty css                      */
+import { useMemo as N } from "react";
 /* empty css                      */
 /* empty css                      */
-import { VisuallyHidden as N } from "../../../primitives/visually-hidden/index.js";
-import { normalizeOption as k } from "../../../types/options.js";
-import { BaseControl as v } from "../base-control/index.js";
-import { useBaseControlProps as x } from "../base-control/props.js";
-function M(a) {
-  const { baseProps: p, controlProps: m } = x(a, {
+import "../../../primitives/popover/index.js";
+/* empty css                      */
+import "../../../primitives/scroll-area/index.js";
+import "../../../primitives/symbol/index.js";
+/* empty css                      */
+/* empty css                      */
+/* empty css                      */
+import { VisuallyHidden as k } from "../../../primitives/visually-hidden/index.js";
+import { normalizeOption as v } from "../../../types/options.js";
+import { BaseControl as x } from "../base-control/index.js";
+import { useBaseControlProps as P } from "../base-control/props.js";
+/* empty css                       */
+function J(a) {
+  const { baseProps: c, controlProps: m } = P(a, {
     className: "component-toggle-group-control"
   }), {
     id: u,
     value: n,
-    options: t,
+    options: i,
+    noLabels: g = !1,
     multiple: r = !1,
-    onChange: g = s,
-    onChangeValue: l = s,
-    ...d
-  } = m, _ = (o) => {
-    g(o);
-    const i = o.currentTarget.value;
-    r ? o.currentTarget.checked ? l([...n, i]) : l(n.filter((C) => C !== i)) : l(o.target.value);
-  }, h = (o) => r ? n.includes(o) : n === o, f = b(() => t.map(k), [t]);
-  return /* @__PURE__ */ e(v, { ...p, children: /* @__PURE__ */ e("div", { className: "component-toggle-group-control__options", children: f.map((o) => /* @__PURE__ */ c(
+    onChange: d = s,
+    onChangeValue: t = s,
+    ..._
+  } = m, h = (o) => {
+    d(o);
+    const l = o.currentTarget.value;
+    r ? o.currentTarget.checked ? t([...n, l]) : t(n.filter((C) => C !== l)) : t(o.target.value);
+  }, f = (o) => r ? n.includes(o) : n === o, b = N(() => i.map(v), [i]);
+  return /* @__PURE__ */ e(x, { ...c, children: /* @__PURE__ */ e("div", { className: "component-toggle-group-control__options", children: b.map((o) => /* @__PURE__ */ p(
     "label",
     {
       className: "component-toggle-group-control__option",
       children: [
-        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(
           "input",
           {
             className: "component-toggle-group-control__option__input",
@@ -37,14 +46,14 @@ function M(a) {
             value: o.value,
             name: u,
             disabled: o.disabled,
-            checked: h(o.value),
-            onChange: _,
-            ...d
+            checked: f(o.value),
+            onChange: h,
+            ..._
           }
         ) }),
-        /* @__PURE__ */ c("span", { className: "component-toggle-group-control__option__label", children: [
+        /* @__PURE__ */ p("span", { className: "component-toggle-group-control__option__label", children: [
           o.icon,
-          o.label
+          !g && o.label
         ] }),
         o.description && /* @__PURE__ */ e("p", { className: "component-toggle-group-control__option__description", children: o.description })
       ]
@@ -53,5 +62,5 @@ function M(a) {
   )) }) });
 }
 export {
-  M as ToggleGroupControl
+  J as ToggleGroupControl
 };

package/dist/components/data-form/api.d.ts

@@ -0,0 +1,2 @@
+import { FormStore, FormStoreOpts, FormValues } from './types';
+export declare function createFormStore<T extends FormValues>(opts: FormStoreOpts<T>): FormStore<T>;