@wrdagency/blockout 0.1.10 → 1.0.0

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

@@ -3,10 +3,12 @@ export { CardNumberControl } from './card-number-control';
 export { CheckboxControl } from './checkbox-control';
 export { ChoiceControl } from './choice-control';
 export { DateControl } from './date-control';
+export { ListControl, type ListItem } from './list-control';
+export { MarkdownControl } from './markdown-control';
 export { NumberControl } from './number-control';
 export { PasswordControl } from './password-control';
 export { RecurrenceControl } from './recurrence-control';
-export { Options, SelectControl } from './select-control';
+export { Options, Select, SelectControl } from './select-control';
 export { TextControl } from './text-control';
 export { TextareaControl } from './textarea-control';
 export { ToggleControl } from './toggle-control';

package/dist/components/controls/index.js

@@ -1,31 +1,36 @@
-import { BaseControl as e } from "./base-control/index.js";
-import { CardNumberControl as p } from "./card-number-control/index.js";
-import { CheckboxControl as l } from "./checkbox-control/index.js";
+import { BaseControl as t } from "./base-control/index.js";
+import { CardNumberControl as x } from "./card-number-control/index.js";
+import { CheckboxControl as m } from "./checkbox-control/index.js";
 import { ChoiceControl as n } from "./choice-control/index.js";
-import { DateControl as a } from "./date-control/index.js";
-import { NumberControl as s } from "./number-control/index.js";
-import { PasswordControl as u } from "./password-control/index.js";
-import { RecurrenceControl as b } from "./recurrence-control/index.js";
-import '../../assets/style.css';/* empty css                   */
-import { SelectControl as d } from "./select-control/component.js";
-import { o as N } from "../../options-Cfoqhxw2.js";
-import { TextControl as w } from "./text-control/index.js";
-import { TextareaControl as D } from "./textarea-control/index.js";
-import { ToggleControl as O } from "./toggle-control/index.js";
-import { ToggleGroupControl as R } from "./toggle-group-control/index.js";
+import { DateControl as f } from "./date-control/index.js";
+import { ListControl as c } from "./list-control/index.js";
+import { MarkdownControl as g } from "./markdown-control/index.js";
+import { NumberControl as T } from "./number-control/index.js";
+import { PasswordControl as d } from "./password-control/index.js";
+import { RecurrenceControl as h } from "./recurrence-control/index.js";
+import { SelectControl as w } from "./select-control/control.js";
+import { o as S } from "../../options-Cfoqhxw2.js";
+import { Select as D } from "./select-control/select.js";
+import { TextControl as L } from "./text-control/index.js";
+import { TextareaControl as O } from "./textarea-control/index.js";
+import { ToggleControl as R } from "./toggle-control/index.js";
+import { ToggleGroupControl as q } from "./toggle-group-control/index.js";
 export {
-  e as BaseControl,
-  p as CardNumberControl,
-  l as CheckboxControl,
+  t as BaseControl,
+  x as CardNumberControl,
+  m as CheckboxControl,
   n as ChoiceControl,
-  a as DateControl,
-  s as NumberControl,
-  N as Options,
-  u as PasswordControl,
-  b as RecurrenceControl,
-  d as SelectControl,
-  w as TextControl,
-  D as TextareaControl,
-  O as ToggleControl,
-  R as ToggleGroupControl
+  f as DateControl,
+  c as ListControl,
+  g as MarkdownControl,
+  T as NumberControl,
+  S as Options,
+  d as PasswordControl,
+  h as RecurrenceControl,
+  D as Select,
+  w as SelectControl,
+  L as TextControl,
+  O as TextareaControl,
+  R as ToggleControl,
+  q as ToggleGroupControl
 };

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

@@ -0,0 +1,9 @@
+import { ControlProps } from '../base-control/props';
+import { ListItem } from './types';
+interface ListControlProps<T extends string = string> {
+    value: ListItem<T>[];
+    onChangeValue?: (value: ListItem<T>[]) => void;
+    multiple?: boolean;
+}
+export declare function ListControl<T extends string = string>(props: ControlProps<ListControlProps<T>>): import("react/jsx-runtime").JSX.Element;
+export type { ListItem } from './types';

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

@@ -0,0 +1,42 @@
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+import { noop as b } from "../../../utils/noop.js";
+import { useMemo as n } from "react";
+import { BaseControl as C } from "../base-control/index.js";
+import { useBaseControlProps as h } from "../base-control/props.js";
+import { List as d, SortableList as x } from "./list.js";
+import '../../../assets/style11.css';/* empty css                      */
+function V(l) {
+  const { baseProps: i, controlProps: m } = h(l, {
+    className: "component-list-control"
+  }), { value: t, onChangeValue: a = b, multiple: s = !1 } = m, p = n(
+    () => t.filter((o) => o.sortable),
+    [t]
+  ), c = n(
+    () => t.filter((o) => !o.sortable),
+    [t]
+  ), e = (o) => {
+    const f = typeof o == "function" ? o(t) : o;
+    a(f);
+  };
+  return /* @__PURE__ */ u(C, { as: "fieldset", ...i, children: [
+    /* @__PURE__ */ r(
+      d,
+      {
+        items: c,
+        multiple: s,
+        setItems: e
+      }
+    ),
+    /* @__PURE__ */ r(
+      x,
+      {
+        items: p,
+        multiple: s,
+        setItems: e
+      }
+    )
+  ] });
+}
+export {
+  V as ListControl
+};

package/dist/components/controls/list-control/item.d.ts

@@ -0,0 +1,10 @@
+import { ChangeEventHandler } from 'react';
+import { ListItem } from './types';
+interface ItemProps<T extends string = string> {
+    id: string;
+    item: ListItem<T>;
+    multiple: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+}
+export declare const Item: <T extends string = string>({ id, item, multiple, onChange, }: ItemProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/controls/list-control/item.js

@@ -0,0 +1,108 @@
+import { jsxs as l, jsx as a, Fragment as h } from "react/jsx-runtime";
+import { cn as u } from "../../../utils/css.js";
+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 * as e from "react";
+/* empty css                      */
+/* empty css                      */
+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 f } from "../../../primitives/visually-hidden/index.js";
+import { d as g, C as E } from "../../../sortable.esm-De3H-_AA.js";
+import { w as b } from "../../../SSRBase.es-BUXS72ra.js";
+import { o as N } from "../../../DotsSixVertical.es-Ixbhxg7Z.js";
+const k = /* @__PURE__ */ new Map([
+  [
+    "bold",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z" }))
+  ],
+  [
+    "duotone",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+      "path",
+      {
+        d: "M232,56V200a16,16,0,0,1-16,16H40a16,16,0,0,1-16-16V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Z",
+        opacity: "0.2"
+      }
+    ), /* @__PURE__ */ e.createElement("path", { d: "M205.66,85.66l-96,96a8,8,0,0,1-11.32,0l-40-40a8,8,0,0,1,11.32-11.32L104,164.69l90.34-90.35a8,8,0,0,1,11.32,11.32Z" }))
+  ],
+  [
+    "fill",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM205.66,85.66l-96,96a8,8,0,0,1-11.32,0l-40-40a8,8,0,0,1,11.32-11.32L104,164.69l90.34-90.35a8,8,0,0,1,11.32,11.32Z" }))
+  ],
+  [
+    "light",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M228.24,76.24l-128,128a6,6,0,0,1-8.48,0l-56-56a6,6,0,0,1,8.48-8.48L96,191.51,219.76,67.76a6,6,0,0,1,8.48,8.48Z" }))
+  ],
+  [
+    "regular",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z" }))
+  ],
+  [
+    "thin",
+    /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("path", { d: "M226.83,74.83l-128,128a4,4,0,0,1-5.66,0l-56-56a4,4,0,0,1,5.66-5.66L96,194.34,221.17,69.17a4,4,0,1,1,5.66,5.66Z" }))
+  ]
+]), r = e.forwardRef((n, t) => /* @__PURE__ */ e.createElement(b, { ref: t, ...n, weights: k }));
+r.displayName = "CheckIcon";
+const R = ({
+  id: n,
+  item: t,
+  multiple: c,
+  onChange: m
+}) => {
+  const { attributes: o, listeners: i, setNodeRef: s, transform: p, transition: d } = g({ id: t.value }), _ = {
+    transform: E.Transform.toString(p),
+    transition: d
+  };
+  return /* @__PURE__ */ l(
+    "li",
+    {
+      className: u(
+        "component-list-control__item",
+        `component-list-control__item--${t.checked ? "checked" : "unchecked"}`,
+        `component-list-control__item--${o["aria-pressed"] ? "dragging" : "static"}`
+      ),
+      ref: s,
+      style: _,
+      children: [
+        /* @__PURE__ */ l("label", { className: "component-list-control__item__target", children: [
+          t.selectable && /* @__PURE__ */ l(h, { children: [
+            /* @__PURE__ */ a(f, { children: /* @__PURE__ */ a(
+              "input",
+              {
+                className: "component-list-control__item__input",
+                type: c ? "checkbox" : "radio",
+                value: t.value,
+                name: n,
+                disabled: t.disabled,
+                checked: t.checked,
+                onChange: m
+              }
+            ) }),
+            /* @__PURE__ */ a(r, { className: "component-list-control__item__checkmark" })
+          ] }),
+          /* @__PURE__ */ l("div", { className: "component-list-control__item__content", children: [
+            /* @__PURE__ */ a("span", { className: "component-list-control__item__label", children: t.label }),
+            t.description && /* @__PURE__ */ a("p", { className: "component-list-control__item__description", children: t.description })
+          ] })
+        ] }),
+        t.sortable && /* @__PURE__ */ a(
+          "button",
+          {
+            className: "component-list-control__item__handle",
+            ...o,
+            ...i,
+            children: /* @__PURE__ */ a(N, { className: "component-list-control__item__handle__icon" })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  R as Item
+};

package/dist/components/controls/list-control/list.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+import { ListItem } from './types';
+interface ListProps<T extends string = string> extends PropsWithChildren {
+    items: ListItem<T>[];
+    multiple: boolean;
+    setItems: (items: ListItem<T>[] | ((items: ListItem<T>[]) => ListItem<T>[])) => void;
+}
+export declare const List: <T extends string = string>({ items, multiple, setItems, }: ListProps<T>) => import("react/jsx-runtime").JSX.Element | undefined;
+export declare const SortableList: <T extends string = string>({ items, setItems, ...restProps }: ListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/controls/list-control/list.js

@@ -0,0 +1,89 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as v } from "../../../utils/css.js";
+import { useMemo as p } from "react";
+import { Item as g } from "./item.js";
+import { u as x, a as h, D as m, c as S, S as b, v as k, b as C, s as y, K as D, P as I } from "../../../sortable.esm-De3H-_AA.js";
+import '../../../assets/style11.css';/* empty css                      */
+const _ = (o) => {
+  let {
+    transform: r
+  } = o;
+  return {
+    ...r,
+    x: 0
+  };
+}, E = ({
+  items: o,
+  multiple: r,
+  setItems: s
+}) => {
+  const c = p(
+    () => o.some((e) => e.checked),
+    [o]
+  ), i = (e) => {
+    s(
+      (t) => t.map((n) => ({
+        ...n,
+        checked: n.selectable ? n.value === e.target.value ? !n.checked : r ? n.checked : !1 : !1
+      }))
+    );
+  };
+  if (o.length)
+    return /* @__PURE__ */ a(
+      "ol",
+      {
+        className: v(
+          "component-list-control__list",
+          `component-list-control__list--${c ? "has-checked" : "not-has-checked"}`
+        ),
+        children: o.map((e) => /* @__PURE__ */ a(
+          g,
+          {
+            id: e.value,
+            item: e,
+            multiple: r,
+            onChange: i
+          },
+          e.value
+        ))
+      }
+    );
+}, w = ({
+  items: o,
+  setItems: r,
+  ...s
+}) => {
+  const c = x(
+    h(I),
+    h(D, {
+      coordinateGetter: y
+    })
+  );
+  return /* @__PURE__ */ a(
+    m,
+    {
+      sensors: c,
+      collisionDetection: S,
+      onDragEnd: (e) => {
+        const { active: t, over: n } = e;
+        n && t.id !== n.id && r((d) => {
+          const u = d.findIndex((l) => l.value === t.id), f = d.findIndex((l) => l.value === n.id);
+          return C(d, u, f);
+        });
+      },
+      modifiers: [_],
+      children: /* @__PURE__ */ a(
+        b,
+        {
+          items: o.map((e) => e.value),
+          strategy: k,
+          children: /* @__PURE__ */ a(E, { items: o, setItems: r, ...s })
+        }
+      )
+    }
+  );
+};
+export {
+  E as List,
+  w as SortableList
+};

package/dist/components/controls/list-control/types.d.ts

@@ -0,0 +1,6 @@
+import { Option } from '../../../types/options';
+export type ListItem<T extends string = string> = Option<T> & {
+    checked?: boolean;
+    sortable?: boolean;
+    selectable?: boolean;
+};

package/dist/components/controls/markdown-control/commands.d.ts

@@ -0,0 +1 @@
+export declare const wrapInTaskListCommand: import('@milkdown/utils').$Command<unknown>;

package/dist/components/controls/markdown-control/commands.js

@@ -0,0 +1,5 @@
+import "../../../index-EPj3dCzl.js";
+import { w as r } from "../../../commands-IQnqt4xL.js";
+export {
+  r as wrapInTaskListCommand
+};

package/dist/components/controls/markdown-control/editor.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface MarkdownEditorProps {
+    className?: string;
+    value: string;
+    onChangeValue: (value: string) => void;
+}
+export declare const MarkdownEditor: FC<MarkdownEditorProps>;
+export {};