@wrdagency/blockout 0.0.11 → 0.0.13

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

@@ -1,6 +1,7 @@
 import { InputHTMLAttributes } from 'react';
 import { ControlFC } from '../base-control/props';
 interface TextControlProps extends InputHTMLAttributes<HTMLInputElement> {
+    onChangeValue?: (value: string) => void;
 }
 export declare const TextControl: ControlFC<TextControlProps>;
 export {};

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

@@ -1,12 +1,19 @@
-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, {
+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, {
     className: "component-text-control"
-  });
-  return /* @__PURE__ */ o(s, { ...t, children: /* @__PURE__ */ o("input", { ...n }) });
+  }), {
+    onChangeValue: a = r,
+    onChange: l = r,
+    ...p
+  } = s;
+  return /* @__PURE__ */ n(c, { ...e, children: /* @__PURE__ */ n("input", { onChange: (o) => {
+    a(o.currentTarget.value), l(o);
+  }, ...p }) });
 };
 export {
-  l as TextControl
+  f as TextControl
 };

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

@@ -1,6 +1,7 @@
 import { TextareaHTMLAttributes } from 'react';
 import { ControlFC } from '../base-control/props';
 interface TextareaControlProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    onChangeValue?: (value: string) => void;
 }
 export declare const TextareaControl: ControlFC<TextareaControlProps>;
 export {};

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

@@ -1,18 +1,26 @@
-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/index3.css';const p = (r) => {
-  const { baseProps: t, controlProps: e } = n(r, {
+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 { useBaseControlProps as m } from "../base-control/props.js";
+import '../../../assets/index6.css';const x = (n) => {
+  const { baseProps: t, controlProps: a } = m(n, {
     className: "component-textarea-control"
-  });
-  return /* @__PURE__ */ o(a, { ...t, children: /* @__PURE__ */ o(
+  }), {
+    onChangeValue: s = e,
+    onChange: l = e,
+    ...c
+  } = a;
+  return /* @__PURE__ */ r(p, { ...t, children: /* @__PURE__ */ r(
     "textarea",
     {
       className: "component-textarea-control__input",
-      ...e
+      onChange: (o) => {
+        s(o.currentTarget.value), l(o);
+      },
+      ...c
     }
   ) });
 };
 export {
-  p as TextareaControl
+  x as TextareaControl
 };

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

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

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

@@ -1,49 +1,61 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import { useRef as p } from "react";
-import '../../../assets/style.css';import '../../../assets/index2.css';/* empty css                      */
-import { VisuallyHidden as m } from "../../../primitives/visually-hidden/index.js";
-import { BaseControl as u } from "../base-control/index.js";
-import { useBaseControlProps as d } from "../base-control/props.js";
-const w = (r) => {
-  const { baseProps: l, controlProps: c } = d(r, {
+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/style.css';import '../../../assets/index7.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 L = (c) => {
+  const { baseProps: s, controlProps: a } = C(c, {
     className: "component-toggle-control"
-  }), { onLabel: s = "On", offLabel: i = "Off", ...a } = c, e = p(null), n = (t) => {
-    e.current && (e.current.checked = t, e.current.focus());
+  }), {
+    onLabel: i = "On",
+    offLabel: f = "Off",
+    value: p = !1,
+    onChange: m = l,
+    onChangeValue: r = l,
+    ...u
+  } = a, n = d(null), t = (o) => {
+    n.current && (n.current.checked = o, n.current.focus(), r(o));
   };
-  return /* @__PURE__ */ o(u, { ...l, children: /* @__PURE__ */ f("div", { className: "component-toggle-control__buttons", children: [
-    /* @__PURE__ */ o(m, { children: /* @__PURE__ */ 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: (t) => {
-          t.key === "ArrowLeft" ? n(!1) : t.key === "ArrowRight" && n(!0);
+        onKeyDown: (o) => {
+          o.key === "ArrowLeft" ? t(!1) : o.key === "ArrowRight" && t(!0);
         },
-        ref: e,
-        ...a
+        ref: n,
+        checked: p,
+        onChange: (o) => {
+          r(o.currentTarget.checked), m(o);
+        },
+        ...u
       }
     ) }),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         className: "component-toggle-control__off",
-        onClick: () => n(!1),
+        onClick: () => t(!1),
         tabIndex: -1,
-        children: i
+        children: f
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ e(
       "button",
       {
         type: "button",
         className: "component-toggle-control__on",
-        onClick: () => n(!0),
+        onClick: () => t(!0),
         tabIndex: -1,
-        children: s
+        children: i
       }
     )
   ] }) });
 };
 export {
-  w as ToggleControl
+  L as ToggleControl
 };

package/dist/components/data-table/index.js

@@ -3,7 +3,7 @@ import { cn as c } from "../../utils/css.js";
 import { createDataTable as m, dataTableContext as p } from "./context.js";
 import { Footer as b } from "./footer.js";
 import { Th as _ } from "./header.js";
-import '../../assets/index8.css';const h = [
+import '../../assets/index9.css';const h = [
   {
     id: "123213213",
     title: "Complete my Tasks",

package/dist/components/form/components/description.d.ts

@@ -0,0 +1,2 @@
+import { FC, HTMLAttributes } from 'react';
+export declare const FormDescription: FC<HTMLAttributes<HTMLParagraphElement>>;

package/dist/components/form/components/description.js

@@ -0,0 +1,15 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as s } from "../../../utils/css.js";
+import { useForm as n } from "../types/form.js";
+const f = ({
+  className: r,
+  children: t,
+  ...e
+}) => {
+  var o;
+  const { step: i } = n();
+  return /* @__PURE__ */ m("p", { className: s("component-form-description", r), ...e, children: ((o = i.details) == null ? void 0 : o.description) || t });
+};
+export {
+  f as FormDescription
+};

package/dist/components/form/components/form.d.ts

@@ -0,0 +1,9 @@
+import { FormHTMLAttributes, ReactNode } from 'react';
+import { FieldsShape } from '../types/fields';
+import { FormContext, Form } from '../types/form';
+interface FormProps<TShape extends FieldsShape> extends Omit<FormHTMLAttributes<HTMLFormElement>, "children"> {
+    definition: Form<TShape>;
+    children: (args: FormContext<TShape>) => ReactNode;
+}
+export declare function Form<TShape extends FieldsShape>({ className, definition, children, ...formProps }: FormProps<TShape>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/form/components/form.js

@@ -0,0 +1,41 @@
+import { jsx as p } from "react/jsx-runtime";
+import { cn as d } from "../../../utils/css.js";
+import { useMemo as f, useState as x, useCallback as g } from "react";
+import { getDefaultValues as b } from "../types/fields.js";
+import { FormContext as k } from "../types/form.js";
+import '../../../assets/form.css';function N({
+  className: V,
+  definition: t,
+  children: v,
+  ...h
+}) {
+  const r = f(() => t.steps.length, [t.steps]), o = f(
+    () => b(t.fields),
+    [t.fields]
+  ), [l, a] = x(1), [u, c] = x(o), m = g(
+    (e, s) => c((C) => ({ ...C, [e]: s })),
+    [c]
+  ), n = {
+    step: {
+      all: t.steps,
+      current: l,
+      max: r,
+      details: t.steps[l - 1],
+      next: () => a((e) => e === r ? e : e + 1),
+      back: () => a((e) => e === 1 ? 1 : e - 1)
+    },
+    values: {
+      default: o,
+      current: u,
+      set: m
+    },
+    control: (e) => ({
+      value: u[e],
+      onChangeValue: (s) => m(e, s)
+    })
+  };
+  return /* @__PURE__ */ p(k.Provider, { value: n, children: /* @__PURE__ */ p("form", { className: d("component-form", V), ...h, children: v(n) }) });
+}
+export {
+  N as Form
+};

package/dist/components/form/components/index.js

@@ -0,0 +1,18 @@
+import { FormDescription as o } from "./description.js";
+import { FormPagination as r } from "./pagination.js";
+import { FormProgress as m } from "./progress.js";
+import { FormStep as i } from "./step.js";
+import { FormTitle as t } from "./title.js";
+import { Form as p } from "./form.js";
+import { FormRow as e } from "./row.js";
+const P = Object.assign(p, {
+  Title: t,
+  Description: o,
+  Pagination: r,
+  Progress: m,
+  Step: i,
+  Row: e
+});
+export {
+  P as Form
+};

package/dist/components/form/components/pagination.d.ts

@@ -0,0 +1,6 @@
+import { FC, HTMLAttributes } from 'react';
+interface FormPaginationProps extends HTMLAttributes<HTMLElement> {
+    submitText?: string;
+}
+export declare const FormPagination: FC<FormPaginationProps>;
+export {};

package/dist/components/form/components/pagination.js

@@ -0,0 +1,46 @@
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import { Button as i } from "../../button/index.js";
+import { cn as l } from "../../../utils/css.js";
+import { useForm as u } from "../types/form.js";
+const f = ({
+  className: o,
+  submitText: c = "Submit",
+  ...a
+}) => {
+  const { step: t } = u(), r = t.all[t.current - 2], e = t.all[t.current];
+  return /* @__PURE__ */ m("nav", { className: l("component-form-pagination", o), ...a, children: [
+    /* @__PURE__ */ n(
+      i,
+      {
+        wide: !0,
+        variant: "light",
+        disabled: t.current === 1,
+        onClick: t.back,
+        children: `Back${r != null && r.title ? `: ${r.title}` : ""}`
+      },
+      t.current + "back"
+    ),
+    t.current === t.max ? /* @__PURE__ */ n(
+      i,
+      {
+        wide: !0,
+        variant: "primary",
+        type: "submit",
+        children: c
+      },
+      t.current + "next"
+    ) : /* @__PURE__ */ n(
+      i,
+      {
+        wide: !0,
+        variant: "primary",
+        onClick: t.next,
+        children: `Next${e != null && e.title ? `: ${e.title}` : ""}`
+      },
+      t.current + "next"
+    )
+  ] });
+};
+export {
+  f as FormPagination
+};

package/dist/components/form/components/progress.d.ts

@@ -0,0 +1,5 @@
+import { FC, ProgressHTMLAttributes } from 'react';
+interface FormProgressProps extends ProgressHTMLAttributes<HTMLProgressElement> {
+}
+export declare const FormProgress: FC<FormProgressProps>;
+export {};

package/dist/components/form/components/progress.js

@@ -0,0 +1,22 @@
+import { jsx as s } from "react/jsx-runtime";
+import { Progress as e } from "../../progress/index.js";
+import { cn as t } from "../../../utils/css.js";
+import { useForm as p } from "../types/form.js";
+const i = ({
+  className: o,
+  ...m
+}) => {
+  const { step: r } = p();
+  return /* @__PURE__ */ s(
+    e,
+    {
+      ...m,
+      className: t("component-form-progress", o),
+      value: r.current / r.max,
+      steps: r.max
+    }
+  );
+};
+export {
+  i as FormProgress
+};

package/dist/components/form/components/row.d.ts

@@ -0,0 +1,6 @@
+import { FC, HTMLAttributes } from 'react';
+interface FormRowProps extends HTMLAttributes<HTMLDivElement> {
+    columns?: 1 | 2 | 3;
+}
+export declare const FormRow: FC<FormRowProps>;
+export {};

package/dist/components/form/components/row.js

@@ -0,0 +1,22 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cn as c } from "../../../utils/css.js";
+const s = ({
+  columns: o = 2,
+  className: r,
+  children: m,
+  ...n
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: c(
+      "component-form-row",
+      `component-form-row--${o}-cols`,
+      r
+    ),
+    ...n,
+    children: m
+  }
+);
+export {
+  s as FormRow
+};

package/dist/components/form/components/step.d.ts

@@ -0,0 +1,6 @@
+import { FC, HTMLAttributes } from 'react';
+interface FormStepProps extends HTMLAttributes<HTMLElement> {
+    index: number;
+}
+export declare const FormStep: FC<FormStepProps>;
+export {};

package/dist/components/form/components/step.js

@@ -0,0 +1,24 @@
+import { jsx as n } from "react/jsx-runtime";
+import { cn as p } from "../../../utils/css.js";
+import { useForm as s } from "../types/form.js";
+const u = ({
+  className: t,
+  index: r,
+  children: e,
+  ...m
+}) => {
+  const { step: o } = s();
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: p("component-form-step", t),
+      hidden: o.current !== r,
+      inert: o.current !== r,
+      ...m,
+      children: e
+    }
+  );
+};
+export {
+  u as FormStep
+};

package/dist/components/form/components/title.d.ts

@@ -0,0 +1,2 @@
+import { FC, HTMLAttributes } from 'react';
+export declare const FormTitle: FC<HTMLAttributes<HTMLHeadElement>>;

package/dist/components/form/components/title.js

@@ -0,0 +1,15 @@
+import { jsx as i } from "react/jsx-runtime";
+import { cn as s } from "../../../utils/css.js";
+import { useForm as n } from "../types/form.js";
+const f = ({
+  className: o,
+  children: r,
+  ...e
+}) => {
+  var t;
+  const { step: m } = n();
+  return /* @__PURE__ */ i("h1", { className: s("component-form-title", o), ...e, children: ((t = m.details) == null ? void 0 : t.title) || r });
+};
+export {
+  f as FormTitle
+};

package/dist/components/form/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * # TODO: Hitting the Next Step button should focus the first input of the next screen.
+ *
+ * # TODO: Conditional fields.
+ *
+ * # TODO: Calculated fields.
+ */
+export { Form } from './components';
+export { createForm } from './types/form';

package/dist/components/form/index.js

@@ -0,0 +1,6 @@
+import { Form as e } from "./components/index.js";
+import { createForm as t } from "./types/form.js";
+export {
+  e as Form,
+  t as createForm
+};

package/dist/components/form/types/fields.d.ts

@@ -0,0 +1,21 @@
+import { z } from 'zod';
+export type PrimitiveValue = string | number | boolean;
+export type Value = PrimitiveValue | PrimitiveValue[] | Record<string, PrimitiveValue>;
+export type FieldsShape = Record<string, Value>;
+export type Field<TSchema extends z.ZodTypeAny, TFields extends Fields<any>> = {
+    validation: TSchema;
+    default: z.infer<TSchema>;
+    calculate?: (values: FieldValues<TFields>) => z.infer<TSchema>;
+    condition?: (values: FieldValues<TFields>, fields: TFields) => boolean;
+};
+export type Fields<TShape extends FieldsShape> = {
+    [Key in keyof TShape]: Field<z.ZodType<TShape[Key]>, Fields<TShape>>;
+};
+export type FieldValues<TFields extends Fields<any>> = {
+    [Key in keyof TFields]: z.infer<TFields[Key]["validation"]>;
+};
+export type Values<TShape extends FieldsShape> = {
+    [Key in keyof TShape]: TShape[Key];
+};
+export declare const createFields: <TShape extends FieldsShape>(shape: Fields<TShape>) => Fields<TShape>;
+export declare const getDefaultValues: <TShape extends FieldsShape>(fields: Fields<TShape>) => Values<TShape>;

package/dist/components/form/types/fields.js

@@ -0,0 +1,11 @@
+const a = (e) => e, l = (e) => Object.entries(e).reduce(
+  (t, [c, s]) => ({
+    [c]: s.default,
+    ...t
+  }),
+  {}
+);
+export {
+  a as createFields,
+  l as getDefaultValues
+};

package/dist/components/form/types/form.d.ts

@@ -0,0 +1,28 @@
+import { Fields, FieldsShape, Values } from './fields';
+import { Step, Steps } from './steps';
+export type Form<TShape extends FieldsShape> = {
+    fields: Fields<TShape>;
+    steps: Steps;
+};
+export type FormContext<TShape extends FieldsShape, TKeys extends keyof TShape = keyof TShape, TValues extends Values<TShape> = Values<TShape>> = {
+    step: {
+        all: Steps;
+        current: number;
+        max: number;
+        details?: Step;
+        next: () => void;
+        back: () => void;
+    };
+    values: {
+        default: TValues;
+        current: TValues;
+        set: <TKey extends TKeys = TKeys>(key: TKey, value: TValues[TKey]) => void;
+    };
+    control: <TKey extends TKeys = TKeys, TValue extends TValues[TKey] = TValues[TKey]>(name: TKey) => {
+        value: TValue;
+        onChangeValue: (value: TValue) => void;
+    };
+};
+export declare const FormContext: import('react').Context<FormContext<any, string | number | symbol, Values<any>>>;
+export declare const useForm: <TShape extends FieldsShape>() => FormContext<TShape, keyof TShape, Values<TShape>>;
+export declare const createForm: <TShape extends FieldsShape>(definition: Form<TShape>) => Form<TShape>;

package/dist/components/form/types/form.js

@@ -0,0 +1,7 @@
+import { createContext as o, useContext as e } from "react";
+const r = o(null), c = () => e(r), m = (t) => t;
+export {
+  r as FormContext,
+  m as createForm,
+  c as useForm
+};

package/dist/components/form/types/steps.d.ts

@@ -0,0 +1,5 @@
+export type Step = {
+    title?: string;
+    description?: string;
+};
+export type Steps = Step[];

package/dist/components/form/types/steps.js

@@ -0,0 +1 @@
+

package/dist/components/index.d.ts

@@ -1,5 +1,7 @@
+export { Breadcrumbs } from './breadcrumbs';
 export { Button } from './button';
 export { BaseControl, ChoiceControl, NumberControl, SelectControl, TextareaControl, TextControl, ToggleControl, } from './controls';
 export { DataTable, ExampleDataTable } from './data-table';
+export { createForm, Form } from './form';
 export { Menu } from './menu';
 export { Progress } from './progress';

package/dist/components/index.js

@@ -1,25 +1,31 @@
-import { Button as e } from "./button/index.js";
-import { BaseControl as x } from "./controls/base-control/index.js";
-import { ChoiceControl as l } from "./controls/choice-control/index.js";
-import { NumberControl as f } from "./controls/number-control/index.js";
-import { SelectControl as n } from "./controls/select-control/index.js";
-import { TextControl as T } from "./controls/text-control/index.js";
-import { TextareaControl as g } from "./controls/textarea-control/index.js";
-import { ToggleControl as u } from "./controls/toggle-control/index.js";
-import { DataTable as B, ExampleDataTable as D } from "./data-table/index.js";
-import { Menu as i } from "./menu/index.js";
-import { Progress as M } from "./progress/index.js";
+import { Breadcrumbs as e } from "./breadcrumbs/index.js";
+import { Button as m } from "./button/index.js";
+import { BaseControl as p } from "./controls/base-control/index.js";
+import { ChoiceControl as a } from "./controls/choice-control/index.js";
+import { NumberControl as n } from "./controls/number-control/index.js";
+import { SelectControl as T } from "./controls/select-control/index.js";
+import { TextControl as c } from "./controls/text-control/index.js";
+import { TextareaControl as u } from "./controls/textarea-control/index.js";
+import { ToggleControl as B } from "./controls/toggle-control/index.js";
+import { DataTable as F, ExampleDataTable as d } from "./data-table/index.js";
+import { Form as i } from "./form/components/index.js";
+import { createForm as M } from "./form/types/form.js";
+import { Menu as P } from "./menu/index.js";
+import { Progress as j } from "./progress/index.js";
 export {
-  x as BaseControl,
-  e as Button,
-  l as ChoiceControl,
-  B as DataTable,
-  D as ExampleDataTable,
-  i as Menu,
-  f as NumberControl,
-  M as Progress,
-  n as SelectControl,
-  T as TextControl,
-  g as TextareaControl,
-  u as ToggleControl
+  p as BaseControl,
+  e as Breadcrumbs,
+  m as Button,
+  a as ChoiceControl,
+  F as DataTable,
+  d as ExampleDataTable,
+  i as Form,
+  P as Menu,
+  n as NumberControl,
+  j as Progress,
+  T as SelectControl,
+  c as TextControl,
+  u as TextareaControl,
+  B as ToggleControl,
+  M as createForm
 };

package/dist/components/markdown/formats.d.ts

@@ -0,0 +1,11 @@
+declare const bold: import('./types/format').Format;
+declare const italic: import('./types/format').Format;
+declare const strikethrough: import('./types/format').Format;
+declare const anchor: import('./types/format').Format;
+declare const heading: import('./types/format').Format;
+declare const orderedList: import('./types/format').Format;
+declare const unorderedList: import('./types/format').Format;
+declare const task: import('./types/format').Format;
+declare const callout: import('./types/format').Format;
+declare const topic: import('./types/format').Format;
+export { anchor, bold, callout, heading, italic, orderedList, strikethrough, task, topic, unorderedList, };