@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

package/dist/components/EntryPicker/index.js

@@ -0,0 +1,178 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+import { Button as t } from "../Button/index.js";
+import { SortableList as n, SortableListItem as r } from "../SortableList/index.js";
+import { Badge as i } from "../Badge/index.js";
+import { Modal as a } from "../Modal/index.js";
+import { SearchField as o } from "../SearchField/index.js";
+import { useMemo as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/EntryPicker/index.tsx
+function f(...e) {
+	return e.filter(Boolean).join(" ");
+}
+function p(e, t) {
+	return !t || [
+		e.title,
+		e.subtitle,
+		...e.keywords ?? []
+	].filter(Boolean).join(" ").toLowerCase().includes(t.toLowerCase());
+}
+function m({ item: t }) {
+	return /* @__PURE__ */ u("span", {
+		className: "ds-entry__thumb",
+		children: t.imageUrl ? /* @__PURE__ */ u("img", {
+			src: t.imageUrl,
+			alt: "",
+			loading: "lazy"
+		}) : /* @__PURE__ */ u(e, {
+			name: "file-text",
+			size: 20
+		})
+	});
+}
+function h({ items: h, value: g, defaultValue: _ = [], onValueChange: v, mode: y = "multiple", max: b, label: x = "Entries", emptyLabel: S = "Nothing selected yet.", addLabel: C = "Choose entries", isReorderable: w = !0, isDisabled: T = !1, className: E }) {
+	let [D, O] = c(_), k = g ?? D, [A, j] = c(!1), [M, N] = c(""), P = s(() => new Map(h.map((e) => [e.id, e])), [h]), F = s(() => h.filter((e) => p(e, M)), [h, M]), I = y === "multiple" && b !== void 0 && k.length >= b, L = (e) => {
+		g === void 0 && O(e), v?.(e);
+	}, R = (e) => {
+		y === "single" ? (L(k[0] === e ? [] : [e]), j(!1)) : k.includes(e) ? L(k.filter((t) => t !== e)) : I || L([...k, e]);
+	}, z = k.map((e) => P.get(e)).filter(Boolean), B = w && y === "multiple" && z.length > 1, V = (e) => /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(m, { item: e }), /* @__PURE__ */ d("span", {
+		className: "ds-entry__body",
+		children: [/* @__PURE__ */ u("span", {
+			className: "ds-entry__title",
+			children: e.title
+		}), e.subtitle && /* @__PURE__ */ u("span", {
+			className: "ds-entry__subtitle",
+			children: e.subtitle
+		})]
+	})] });
+	return /* @__PURE__ */ d("div", {
+		className: f("ds-entry-picker", E),
+		children: [
+			/* @__PURE__ */ d("div", {
+				className: "ds-entry-picker__head",
+				children: [/* @__PURE__ */ u("span", {
+					className: "ds-entry-picker__label",
+					children: x
+				}), /* @__PURE__ */ u(i, {
+					shape: "count",
+					children: k.length
+				})]
+			}),
+			z.length === 0 ? /* @__PURE__ */ u("p", {
+				className: "ds-entry-picker__empty",
+				children: S
+			}) : B ? /* @__PURE__ */ u(n, {
+				items: k,
+				onReorder: L,
+				renderDragOverlay: (e) => {
+					let t = P.get(e);
+					return t ? /* @__PURE__ */ u("div", {
+						className: "ds-entry",
+						children: V(t)
+					}) : null;
+				},
+				children: z.map((e) => /* @__PURE__ */ u(r, {
+					id: e.id,
+					label: e.title,
+					action: /* @__PURE__ */ u(t, {
+						variant: "simple",
+						size: "sm",
+						isIconOnly: !0,
+						iconStart: "x",
+						"aria-label": `Remove ${e.title}`,
+						isDisabled: T,
+						onClick: () => L(k.filter((t) => t !== e.id))
+					}),
+					children: /* @__PURE__ */ u("div", {
+						className: "ds-entry",
+						children: V(e)
+					})
+				}, e.id))
+			}) : /* @__PURE__ */ u("ul", {
+				className: "ds-entry-picker__list",
+				children: z.map((e) => /* @__PURE__ */ d("li", {
+					className: "ds-entry-picker__row",
+					children: [/* @__PURE__ */ u("div", {
+						className: "ds-entry",
+						children: V(e)
+					}), /* @__PURE__ */ u(t, {
+						variant: "simple",
+						size: "sm",
+						isIconOnly: !0,
+						iconStart: "x",
+						"aria-label": `Remove ${e.title}`,
+						isDisabled: T,
+						onClick: () => L(k.filter((t) => t !== e.id))
+					})]
+				}, e.id))
+			}),
+			/* @__PURE__ */ d("div", {
+				className: "ds-entry-picker__actions",
+				children: [/* @__PURE__ */ u(t, {
+					variant: "neutral",
+					size: "sm",
+					iconStart: "plus",
+					isDisabled: T,
+					onClick: () => j(!0),
+					children: C
+				}), k.length > 0 && /* @__PURE__ */ u(t, {
+					variant: "simple",
+					size: "sm",
+					isDisabled: T,
+					onClick: () => L([]),
+					children: "Clear"
+				})]
+			}),
+			/* @__PURE__ */ d(a, {
+				isOpen: A,
+				onClose: () => j(!1),
+				title: C,
+				description: y === "single" ? "Choose one entry." : b === void 0 ? "Choose as many entries as you need." : `Choose up to ${b} entries.`,
+				footer: /* @__PURE__ */ u(t, {
+					variant: "primary",
+					onClick: () => j(!1),
+					children: "Done"
+				}),
+				children: [/* @__PURE__ */ u("div", {
+					className: "ds-entry-picker__search",
+					children: /* @__PURE__ */ u(o, {
+						value: M,
+						placeholder: "Search entries",
+						onChange: (e) => N(e.target.value),
+						onClear: () => N("")
+					})
+				}), /* @__PURE__ */ d("ul", {
+					className: "ds-entry-picker__results",
+					children: [F.map((t) => {
+						let n = k.includes(t.id), r = t.isDisabled || !n && I;
+						return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ d("button", {
+							type: "button",
+							className: "ds-entry-picker__result",
+							"aria-pressed": n,
+							disabled: r || void 0,
+							onClick: () => R(t.id),
+							children: [/* @__PURE__ */ u("div", {
+								className: "ds-entry",
+								children: V(t)
+							}), n && /* @__PURE__ */ u(e, {
+								name: "check",
+								size: 20
+							})]
+						}) }, t.id);
+					}), F.length === 0 && /* @__PURE__ */ d("li", {
+						className: "ds-entry-picker__no-results",
+						children: [
+							"No entries match “",
+							M,
+							"”."
+						]
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { h as EntryPicker };
+
+//# sourceMappingURL=index.js.map

package/dist/components/EntryPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","Icon","cx","parts","matches","query","item","Thumb","EntryPicker","internal","setInternal","useState","defaultValue","selected","value","isOpen","setOpen","setQuery","byId","useMemo","items","results","atMax","mode","max","commit","next","onValueChange","toggle","id","chosen","canReorder","isReorderable","row","Fragment","className","label","Badge","emptyLabel","SortableList","SortableListItem","Button","addLabel","Modal","SearchField","event","isSelected","isBlocked"],"sources":["../../../src/components/EntryPicker/index.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { Badge } from \"../Badge\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Modal } from \"../Modal\";\nimport { SearchField } from \"../SearchField\";\nimport { SortableList, SortableListItem } from \"../SortableList\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface EntryItem {\n  id: string;\n  title: string;\n  /** Second line — a content type, a path, a file size. */\n  subtitle?: string;\n  /** Main image: an asset thumbnail, or the entry's hero. */\n  imageUrl?: string;\n  /** Words the search matches on top of the title and subtitle. */\n  keywords?: string[];\n  isDisabled?: boolean;\n}\n\nexport type EntryPickerMode = \"single\" | \"multiple\";\n\nexport interface EntryPickerProps {\n  items: EntryItem[];\n  /** Selected ids, in the order they will be stored. */\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  mode?: EntryPickerMode;\n  /** Cap a multiple selection. Reaching it disables the unpicked rows. */\n  max?: number;\n  label?: string;\n  /** Copy shown when nothing is picked yet. */\n  emptyLabel?: string;\n  addLabel?: string;\n  /** Multiple selections are reorderable by default — the stored order is the shown order. */\n  isReorderable?: boolean;\n  isDisabled?: boolean;\n  className?: string;\n}\n\nfunction matches(item: EntryItem, query: string) {\n  if (!query) return true;\n  const haystack = [item.title, item.subtitle, ...(item.keywords ?? [])]\n    .filter(Boolean)\n    .join(\" \")\n    .toLowerCase();\n  return haystack.includes(query.toLowerCase());\n}\n\nfunction Thumb({ item }: { item: EntryItem }) {\n  return (\n    <span className=\"ds-entry__thumb\">\n      {item.imageUrl ? (\n        <img src={item.imageUrl} alt=\"\" loading=\"lazy\" />\n      ) : (\n        <Icon name=\"file-text\" size={20} />\n      )}\n    </span>\n  );\n}\n\n/**\n * Pick entries or assets out of a list. Search narrows it, a row toggles,\n * and a multiple selection keeps — and reorders — the order you chose.\n */\nexport function EntryPicker({\n  items,\n  value,\n  defaultValue = [],\n  onValueChange,\n  mode = \"multiple\",\n  max,\n  label = \"Entries\",\n  emptyLabel = \"Nothing selected yet.\",\n  addLabel = \"Choose entries\",\n  isReorderable = true,\n  isDisabled = false,\n  className,\n}: EntryPickerProps) {\n  const [internal, setInternal] = useState<string[]>(defaultValue);\n  const selected = value ?? internal;\n  const [isOpen, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n\n  const byId = useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);\n  const results = useMemo(() => items.filter((item) => matches(item, query)), [items, query]);\n  const atMax = mode === \"multiple\" && max !== undefined && selected.length >= max;\n\n  const commit = (next: string[]) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const toggle = (id: string) => {\n    if (mode === \"single\") {\n      commit(selected[0] === id ? [] : [id]);\n      setOpen(false);\n      return;\n    }\n    if (selected.includes(id)) commit(selected.filter((item) => item !== id));\n    else if (!atMax) commit([...selected, id]);\n  };\n\n  const chosen = selected.map((id) => byId.get(id)).filter(Boolean) as EntryItem[];\n  const canReorder = isReorderable && mode === \"multiple\" && chosen.length > 1;\n\n  const row = (item: EntryItem): ReactNode => (\n    <>\n      <Thumb item={item} />\n      <span className=\"ds-entry__body\">\n        <span className=\"ds-entry__title\">{item.title}</span>\n        {item.subtitle && <span className=\"ds-entry__subtitle\">{item.subtitle}</span>}\n      </span>\n    </>\n  );\n\n  return (\n    <div className={cx(\"ds-entry-picker\", className)}>\n      <div className=\"ds-entry-picker__head\">\n        <span className=\"ds-entry-picker__label\">{label}</span>\n        <Badge shape=\"count\">{selected.length}</Badge>\n      </div>\n\n      {chosen.length === 0 ? (\n        <p className=\"ds-entry-picker__empty\">{emptyLabel}</p>\n      ) : canReorder ? (\n        <SortableList\n          items={selected}\n          onReorder={commit}\n          renderDragOverlay={(id) => {\n            const item = byId.get(id);\n            return item ? <div className=\"ds-entry\">{row(item)}</div> : null;\n          }}\n        >\n          {chosen.map((item) => (\n            <SortableListItem\n              key={item.id}\n              id={item.id}\n              label={item.title}\n              action={\n                <Button\n                  variant=\"simple\"\n                  size=\"sm\"\n                  isIconOnly\n                  iconStart=\"x\"\n                  aria-label={`Remove ${item.title}`}\n                  isDisabled={isDisabled}\n                  onClick={() => commit(selected.filter((id) => id !== item.id))}\n                />\n              }\n            >\n              <div className=\"ds-entry\">{row(item)}</div>\n            </SortableListItem>\n          ))}\n        </SortableList>\n      ) : (\n        <ul className=\"ds-entry-picker__list\">\n          {chosen.map((item) => (\n            <li key={item.id} className=\"ds-entry-picker__row\">\n              <div className=\"ds-entry\">{row(item)}</div>\n              <Button\n                variant=\"simple\"\n                size=\"sm\"\n                isIconOnly\n                iconStart=\"x\"\n                aria-label={`Remove ${item.title}`}\n                isDisabled={isDisabled}\n                onClick={() => commit(selected.filter((id) => id !== item.id))}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n\n      <div className=\"ds-entry-picker__actions\">\n        <Button\n          variant=\"neutral\"\n          size=\"sm\"\n          iconStart=\"plus\"\n          isDisabled={isDisabled}\n          onClick={() => setOpen(true)}\n        >\n          {addLabel}\n        </Button>\n        {selected.length > 0 && (\n          <Button variant=\"simple\" size=\"sm\" isDisabled={isDisabled} onClick={() => commit([])}>\n            Clear\n          </Button>\n        )}\n      </div>\n\n      <Modal\n        isOpen={isOpen}\n        onClose={() => setOpen(false)}\n        title={addLabel}\n        description={\n          mode === \"single\"\n            ? \"Choose one entry.\"\n            : max !== undefined\n              ? `Choose up to ${max} entries.`\n              : \"Choose as many entries as you need.\"\n        }\n        footer={\n          <Button variant=\"primary\" onClick={() => setOpen(false)}>\n            Done\n          </Button>\n        }\n      >\n        <div className=\"ds-entry-picker__search\">\n          <SearchField\n            value={query}\n            placeholder=\"Search entries\"\n            onChange={(event) => setQuery(event.target.value)}\n            onClear={() => setQuery(\"\")}\n          />\n        </div>\n        <ul className=\"ds-entry-picker__results\">\n          {results.map((item) => {\n            const isSelected = selected.includes(item.id);\n            const isBlocked = item.isDisabled || (!isSelected && atMax);\n            return (\n              <li key={item.id}>\n                <button\n                  type=\"button\"\n                  className=\"ds-entry-picker__result\"\n                  aria-pressed={isSelected}\n                  disabled={isBlocked || undefined}\n                  onClick={() => toggle(item.id)}\n                >\n                  <div className=\"ds-entry\">{row(item)}</div>\n                  {isSelected && <Icon name=\"check\" size={20} />}\n                </button>\n              </li>\n            );\n          })}\n          {results.length === 0 && (\n            <li className=\"ds-entry-picker__no-results\">No entries match “{query}”.</li>\n          )}\n        </ul>\n      </Modal>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/EntryPicker/style.css

@@ -0,0 +1,162 @@
+@layer components {
+  .ds-entry-picker {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    inline-size: 100%;
+  }
+
+  .ds-entry-picker__head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .ds-entry-picker__label {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .ds-entry-picker__empty {
+    margin: 0;
+    padding: var(--space-4);
+    border: var(--rule-width) dashed var(--color-border-strong);
+    border-radius: var(--radius-md);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+  }
+
+  .ds-entry-picker__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ds-entry-picker__row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+  }
+
+  .ds-entry-picker__row .ds-entry {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .ds-entry-picker__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  /* One entry row: thumbnail, title, subtitle. Shared by the value list,
+   * the drag overlay and the picker results, so they never drift apart. */
+  .ds-entry {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    min-inline-size: 0;
+  }
+
+  .ds-entry__thumb {
+    display: grid;
+    place-items: center;
+    flex: none;
+    inline-size: var(--entry-thumb-size);
+    block-size: var(--entry-thumb-size);
+    overflow: hidden;
+    border: var(--rule-width) solid var(--rule-color);
+    border-radius: var(--field-radius);
+    background: var(--color-surface-subtle);
+    color: var(--color-text-muted);
+  }
+
+  .ds-entry__thumb img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  .ds-entry__body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-inline-size: 0;
+  }
+
+  .ds-entry__title {
+    overflow: hidden;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ds-entry__subtitle {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+  }
+
+  .ds-entry-picker__search {
+    margin-block-end: var(--space-4);
+  }
+
+  .ds-entry-picker__results {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    max-block-size: var(--entry-list-max-height);
+    overflow-y: auto;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ds-entry-picker__result {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    inline-size: 100%;
+    padding: var(--space-2) var(--space-3);
+    border: var(--control-border-width) solid transparent;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--color-text);
+    text-align: start;
+    cursor: pointer;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-entry-picker__result:hover:not(:disabled) {
+    background: var(--field-hover);
+  }
+
+  .ds-entry-picker__result:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .ds-entry-picker__result[aria-pressed="true"] {
+    background: var(--color-primary-soft);
+    box-shadow: inset var(--rail-width) 0 0 0 var(--rail-color);
+  }
+
+  .ds-entry-picker__result:disabled {
+    opacity: 45%;
+    cursor: not-allowed;
+  }
+
+  .ds-entry-picker__no-results {
+    padding: var(--space-4);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+  }
+}

package/dist/components/Field/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});/* empty css                             */let e=require("react"),t=require("react/jsx-runtime");function n({label:n,hint:r,error:i,isRequired:a,children:o}){let s=(0,e.useId)(),c=`${s}-hint`,l=`${s}-error`;return(0,t.jsxs)(`div`,{className:`ds-field`,children:[(0,t.jsxs)(`label`,{className:`ds-field__label`,htmlFor:s,children:[n,a&&(0,t.jsx)(`span`,{className:`ds-field__required`,"aria-hidden":`true`,children:`*`})]}),o({id:s,"aria-describedby":i?l:r?c:void 0,"aria-invalid":i?!0:void 0,required:a}),r&&!i&&(0,t.jsx)(`span`,{className:`ds-field__hint`,id:c,children:r}),i&&(0,t.jsx)(`span`,{className:`ds-field__error`,id:l,children:i})]})}exports.Field=n;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Field/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useId","react","react_jsx_runtime","Field","id","hintId","errorId","label","isRequired","children","error","hint"],"sources":["../../../src/components/Field/index.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport \"../Field/style.css\";\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface FieldProps {\n  label: string;\n  hint?: string;\n  /** Present means invalid: the message renders and the control is marked. */\n  error?: string;\n  isRequired?: boolean;\n  /** Receives the ids and invalid flag the control must carry. */\n  children: (props: {\n    id: string;\n    \"aria-describedby\"?: string;\n    \"aria-invalid\"?: true;\n    required?: boolean;\n  }) => ReactNode;\n}\n\n/** Label, hint, error and required marker around any control wearing the field skin. */\nexport function Field({ label, hint, error, isRequired, children }: FieldProps) {\n  const id = useId();\n  const hintId = `${id}-hint`;\n  const errorId = `${id}-error`;\n  const describedBy = error ? errorId : hint ? hintId : undefined;\n\n  return (\n    <div className=\"ds-field\">\n      <label className=\"ds-field__label\" htmlFor={id}>\n        {label}\n        {isRequired && (\n          <span className=\"ds-field__required\" aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </label>\n      {children({\n        id,\n        \"aria-describedby\": describedBy,\n        \"aria-invalid\": error ? true : undefined,\n        required: isRequired,\n      })}\n      {hint && !error && (\n        <span className=\"ds-field__hint\" id={hintId}>\n          {hint}\n        </span>\n      )}\n      {error && (\n        <span className=\"ds-field__error\" id={errorId}>\n          {error}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"A,oKAqBA,SAAgBG,EAAM,CAAE,QAAO,OAAM,QAAO,aAAY,YAAwB,CAC9E,IAAMC,GAAA,EAAKJ,EAAAA,MAAAA,CAAM,EACXK,EAAS,GAAGD,EAAG,OACfE,EAAU,GAAGF,EAAG,QAGtB,OACE,EAAAF,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,WAAf,SAAA,EACE,EAAAA,EAAA,KAAA,CAAC,QAAD,CAAO,UAAU,kBAAkB,QAASE,EAA5C,SAAA,CACGG,EACAC,IACC,EAAAN,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,cAAY,OAAO,SAAA,GAElD,CAAA,CAEH,C,GACNO,EAAS,CACR,KACA,mBAdcC,EAAQJ,EAAUK,EAAON,EAAS,IAAA,GAehD,eAAgBK,EAAQ,GAAO,IAAA,GAC/B,SAAUF,CACZ,CAAC,EACAG,GAAQ,CAACD,IACR,EAAAR,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,iBAAiB,GAAIG,EAClC,SAAAM,CACG,CAAA,EAEPD,IACC,EAAAR,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kBAAkB,GAAII,EACnC,SAAAI,CACG,CAAA,CAEL,C,EAET,C"}

package/dist/components/Field/index.d.cts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+export type FieldSize = "sm" | "md" | "lg";
+export interface FieldProps {
+    label: string;
+    hint?: string;
+    /** Present means invalid: the message renders and the control is marked. */
+    error?: string;
+    isRequired?: boolean;
+    /** Receives the ids and invalid flag the control must carry. */
+    children: (props: {
+        id: string;
+        "aria-describedby"?: string;
+        "aria-invalid"?: true;
+        required?: boolean;
+    }) => ReactNode;
+}
+/** Label, hint, error and required marker around any control wearing the field skin. */
+export declare function Field({ label, hint, error, isRequired, children }: FieldProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/Field/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,EAAE,EAAE,MAAM,CAAC;QACX,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,cAAc,CAAC,EAAE,IAAI,CAAC;QACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,KAAK,SAAS,CAAC;CACjB;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,UAAU,+BAkC7E"}

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

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+export type FieldSize = "sm" | "md" | "lg";
+export interface FieldProps {
+    label: string;
+    hint?: string;
+    /** Present means invalid: the message renders and the control is marked. */
+    error?: string;
+    isRequired?: boolean;
+    /** Receives the ids and invalid flag the control must carry. */
+    children: (props: {
+        id: string;
+        "aria-describedby"?: string;
+        "aria-invalid"?: true;
+        required?: boolean;
+    }) => ReactNode;
+}
+/** Label, hint, error and required marker around any control wearing the field skin. */
+export declare function Field({ label, hint, error, isRequired, children }: FieldProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,EAAE,EAAE,MAAM,CAAC;QACX,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,cAAc,CAAC,EAAE,IAAI,CAAC;QACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,KAAK,SAAS,CAAC;CACjB;AAED,wFAAwF;AACxF,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,UAAU,+BAkC7E"}

package/dist/components/Field/index.js

@@ -0,0 +1,41 @@
+/* empty css                          */
+import { useId as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/Field/index.tsx
+function r({ label: r, hint: i, error: a, isRequired: o, children: s }) {
+	let c = e(), l = `${c}-hint`, u = `${c}-error`;
+	return /* @__PURE__ */ n("div", {
+		className: "ds-field",
+		children: [
+			/* @__PURE__ */ n("label", {
+				className: "ds-field__label",
+				htmlFor: c,
+				children: [r, o && /* @__PURE__ */ t("span", {
+					className: "ds-field__required",
+					"aria-hidden": "true",
+					children: "*"
+				})]
+			}),
+			s({
+				id: c,
+				"aria-describedby": a ? u : i ? l : void 0,
+				"aria-invalid": a ? !0 : void 0,
+				required: o
+			}),
+			i && !a && /* @__PURE__ */ t("span", {
+				className: "ds-field__hint",
+				id: l,
+				children: i
+			}),
+			a && /* @__PURE__ */ t("span", {
+				className: "ds-field__error",
+				id: u,
+				children: a
+			})
+		]
+	});
+}
+//#endregion
+export { r as Field };
+
+//# sourceMappingURL=index.js.map

package/dist/components/Field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Field","id","useId","hintId","errorId","label","isRequired","children","error","hint"],"sources":["../../../src/components/Field/index.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport \"../Field/style.css\";\n\nexport type FieldSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface FieldProps {\n  label: string;\n  hint?: string;\n  /** Present means invalid: the message renders and the control is marked. */\n  error?: string;\n  isRequired?: boolean;\n  /** Receives the ids and invalid flag the control must carry. */\n  children: (props: {\n    id: string;\n    \"aria-describedby\"?: string;\n    \"aria-invalid\"?: true;\n    required?: boolean;\n  }) => ReactNode;\n}\n\n/** Label, hint, error and required marker around any control wearing the field skin. */\nexport function Field({ label, hint, error, isRequired, children }: FieldProps) {\n  const id = useId();\n  const hintId = `${id}-hint`;\n  const errorId = `${id}-error`;\n  const describedBy = error ? errorId : hint ? hintId : undefined;\n\n  return (\n    <div className=\"ds-field\">\n      <label className=\"ds-field__label\" htmlFor={id}>\n        {label}\n        {isRequired && (\n          <span className=\"ds-field__required\" aria-hidden=\"true\">\n            *\n          </span>\n        )}\n      </label>\n      {children({\n        id,\n        \"aria-describedby\": describedBy,\n        \"aria-invalid\": error ? true : undefined,\n        required: isRequired,\n      })}\n      {hint && !error && (\n        <span className=\"ds-field__hint\" id={hintId}>\n          {hint}\n        </span>\n      )}\n      {error && (\n        <span className=\"ds-field__error\" id={errorId}>\n          {error}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;AAqBA,SAAgBA,EAAM,EAAE,UAAO,SAAM,UAAO,eAAY,eAAwB;CAC9E,IAAMC,IAAKC,EAAM,GACXC,IAAS,GAAGF,EAAG,QACfG,IAAU,GAAGH,EAAG;CAGtB,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,kBAAC,SAAD;IAAO,WAAU;IAAkB,SAASA;IAA5C,UAAA,CACGI,GACAC,KACC,kBAAC,QAAD;KAAM,WAAU;KAAqB,eAAY;KAAO,UAAA;IAElD,CAAA,CAEH;;GACNC,EAAS;IACR;IACA,oBAdcC,IAAQJ,IAAUK,IAAON,IAAS,KAAA;IAehD,gBAAgBK,IAAQ,KAAO,KAAA;IAC/B,UAAUF;GACZ,CAAC;GACAG,KAAQ,CAACD,KACR,kBAAC,QAAD;IAAM,WAAU;IAAiB,IAAIL;IAClC,UAAAM;GACG,CAAA;GAEPD,KACC,kBAAC,QAAD;IAAM,WAAU;IAAkB,IAAIJ;IACnC,UAAAI;GACG,CAAA;EAEL;;AAET"}

package/dist/components/Field/style.css

@@ -0,0 +1,100 @@
+@layer components {
+  /* The one input surface. Everything the user can type into or choose from
+   * wears it. State moves on the fill; the stroke never changes width. */
+  .ds-field-skin {
+    inline-size: 100%;
+    border: var(--control-border-width) solid var(--control-border-color);
+    border-radius: var(--field-radius);
+    background: var(--field-rest);
+    color: var(--color-text);
+    font-family: var(--font-sans);
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-field-skin::placeholder {
+    color: var(--color-text-muted);
+  }
+
+  .ds-field-skin:hover:not(:disabled):not([readonly]) {
+    background: var(--field-hover);
+  }
+
+  .ds-field-skin:focus-visible {
+    background: var(--field-focus);
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .ds-field-skin[aria-invalid="true"] {
+    border-color: var(--color-danger);
+    background: var(--field-invalid);
+  }
+
+  .ds-field-skin[aria-invalid="true"]:focus-visible {
+    background: var(--field-invalid-focus);
+  }
+
+  .ds-field-skin:disabled {
+    opacity: 45%;
+    cursor: not-allowed;
+  }
+
+  .ds-field-skin[readonly] {
+    cursor: default;
+  }
+
+  input.ds-field-skin[data-size="sm"] {
+    block-size: var(--field-height-sm);
+    padding: 0 10px;
+    font-size: var(--field-font-size-sm);
+  }
+
+  input.ds-field-skin[data-size="md"] {
+    block-size: var(--field-height-md);
+    padding: 0 10px;
+    font-size: var(--field-font-size-md);
+  }
+
+  input.ds-field-skin[data-size="lg"] {
+    block-size: var(--field-height-lg);
+    padding: 0 10px;
+    font-size: var(--field-font-size-md);
+  }
+
+  textarea.ds-field-skin {
+    display: block;
+    padding: var(--space-2) 10px;
+    font-size: var(--field-font-size-md);
+    line-height: var(--line-height-body);
+    resize: none;
+    overflow: hidden;
+  }
+
+  /* Field wrapper — label, hint, error, required marker. */
+  .ds-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .ds-field__label {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .ds-field__required {
+    margin-inline-start: var(--space-1);
+    color: var(--color-danger);
+  }
+
+  .ds-field__hint {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-xs);
+  }
+
+  .ds-field__error {
+    color: var(--color-danger-text);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+  }
+}

package/dist/components/FieldAffix/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});/* empty css                             */let e=require("react"),t=require("react/jsx-runtime");function n(...e){return e.filter(Boolean).join(` `)}function r({lead:r,trail:i,isTrailInteractive:a=!1,className:o,children:s}){let c=(0,e.useRef)(null),l=(0,e.useRef)(null),[u,d]=(0,e.useState)({start:0,end:0});(0,e.useLayoutEffect)(()=>{let e=()=>d({start:c.current?.offsetWidth??0,end:l.current?.offsetWidth??0});if(e(),typeof ResizeObserver>`u`)return;let t=new ResizeObserver(e);return c.current&&t.observe(c.current),l.current&&t.observe(l.current),()=>t.disconnect()},[r,i]);let f={};return r&&(f[`--field-pad-start`]=`calc(${u.start}px + var(--field-affix-gap) * 2)`),i&&(f[`--field-pad-end`]=`calc(${u.end}px + var(--field-affix-gap) * 2)`),(0,t.jsxs)(`span`,{className:n(`ds-field-affix`,o),style:f,children:[r&&(0,t.jsx)(`span`,{className:`ds-field-affix__lead`,ref:c,children:r}),s,i&&(0,t.jsx)(`span`,{className:`ds-field-affix__trail`,ref:l,"data-interactive":a||void 0,children:i})]})}exports.FieldAffix=r;
+//# sourceMappingURL=index.cjs.map

package/dist/components/FieldAffix/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useRef","useState","react","react_jsx_runtime","cx","parts","FieldAffix","leadRef","trailRef","pad","setPad","measure","observer","lead","trail","style","className","children","isTrailInteractive"],"sources":["../../../src/components/FieldAffix/index.tsx"],"sourcesContent":["import {\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface FieldAffixProps {\n  /** Node pinned to the start of the field — a glyph, a currency mark. */\n  lead?: ReactNode;\n  /** Node pinned to the end of the field — a unit, a clear button. */\n  trail?: ReactNode;\n  /** Set when the trailing node is interactive, so it can take the pointer. */\n  isTrailInteractive?: boolean;\n  className?: string;\n  /** The field itself — one `.ds-field-skin` control. */\n  children: ReactNode;\n}\n\n/**\n * The one way a field carries something beside its text. Both affixes are\n * measured, and the control's inline padding is reserved from that measurement\n * — so content never runs under a glyph, whatever the affix holds.\n */\nexport function FieldAffix({\n  lead,\n  trail,\n  isTrailInteractive = false,\n  className,\n  children,\n}: FieldAffixProps) {\n  const leadRef = useRef<HTMLSpanElement | null>(null);\n  const trailRef = useRef<HTMLSpanElement | null>(null);\n  const [pad, setPad] = useState<{ start: number; end: number }>({ start: 0, end: 0 });\n\n  useLayoutEffect(() => {\n    const measure = () =>\n      setPad({\n        start: leadRef.current?.offsetWidth ?? 0,\n        end: trailRef.current?.offsetWidth ?? 0,\n      });\n    measure();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measure);\n    if (leadRef.current) observer.observe(leadRef.current);\n    if (trailRef.current) observer.observe(trailRef.current);\n    return () => observer.disconnect();\n  }, [lead, trail]);\n\n  const style: Record<string, string> = {};\n  if (lead) style[\"--field-pad-start\"] = `calc(${pad.start}px + var(--field-affix-gap) * 2)`;\n  if (trail) style[\"--field-pad-end\"] = `calc(${pad.end}px + var(--field-affix-gap) * 2)`;\n\n  return (\n    <span className={cx(\"ds-field-affix\", className)} style={style}>\n      {lead && (\n        <span className=\"ds-field-affix__lead\" ref={leadRef}>\n          {lead}\n        </span>\n      )}\n      {children}\n      {trail && (\n        <span\n          className=\"ds-field-affix__trail\"\n          ref={trailRef}\n          data-interactive={isTrailInteractive || undefined}\n        >\n          {trail}\n        </span>\n      )}\n    </span>\n  );\n}\n"],"mappings":"A,oKASA,SAASI,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAmBA,SAAgBC,EAAW,CACzB,OACA,QACA,qBAAqB,GACrB,YACA,YACkB,CAClB,IAAMC,GAAA,EAAUP,EAAAA,OAAAA,CAA+B,IAAI,EAC7CQ,GAAA,EAAWR,EAAAA,OAAAA,CAA+B,IAAI,EAC9C,CAACS,EAAKC,IAAA,EAAUT,EAAAA,SAAAA,CAAyC,CAAE,MAAO,EAAG,IAAK,CAAE,CAAC,GAEnF,EAAAC,EAAA,gBAAA,KAAsB,CACpB,IAAMS,MACJD,EAAO,CACL,MAAOH,EAAQ,SAAS,aAAe,EACvC,IAAKC,EAAS,SAAS,aAAe,CACxC,CAAC,EAEH,GADAG,EAAQ,EACJ,OAAO,eAAmB,IAAa,OAC3C,IAAMC,EAAW,IAAI,eAAeD,CAAO,EAG3C,OAFIJ,EAAQ,SAASK,EAAS,QAAQL,EAAQ,OAAO,EACjDC,EAAS,SAASI,EAAS,QAAQJ,EAAS,OAAO,MAC1CI,EAAS,WAAW,CACnC,EAAG,CAACC,EAAMC,CAAK,CAAC,EAEhB,IAAMC,EAAgC,CAAC,EAIvC,OAHIF,IAAM,EAAM,qBAAuB,QAAQJ,EAAI,MAAM,mCACrDK,IAAO,EAAM,mBAAqB,QAAQL,EAAI,IAAI,oCAGpD,EAAAN,EAAA,KAAA,CAAC,OAAD,CAAM,UAAWC,EAAG,iBAAkBY,CAAS,EAAU,QAAzD,SAAA,CACGH,IACC,EAAAV,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,uBAAuB,IAAKI,EACzC,SAAAM,CACG,CAAA,EAEPI,EACAH,IACC,EAAAX,EAAA,IAAA,CAAC,OAAD,CACE,UAAU,wBACV,IAAKK,EACL,mBAAkBU,GAAsB,IAAA,GAEvC,SAAAJ,CACG,CAAA,CAEJ,C,EAEV,C"}

package/dist/components/FieldAffix/index.d.cts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+export interface FieldAffixProps {
+    /** Node pinned to the start of the field — a glyph, a currency mark. */
+    lead?: ReactNode;
+    /** Node pinned to the end of the field — a unit, a clear button. */
+    trail?: ReactNode;
+    /** Set when the trailing node is interactive, so it can take the pointer. */
+    isTrailInteractive?: boolean;
+    className?: string;
+    /** The field itself — one `.ds-field-skin` control. */
+    children: ReactNode;
+}
+/**
+ * The one way a field carries something beside its text. Both affixes are
+ * measured, and the control's inline padding is reserved from that measurement
+ * — so content never runs under a glyph, whatever the affix holds.
+ */
+export declare function FieldAffix({ lead, trail, isTrailInteractive, className, children, }: FieldAffixProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/FieldAffix/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/FieldAffix/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,kBAA0B,EAC1B,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BA0CjB"}

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

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+export interface FieldAffixProps {
+    /** Node pinned to the start of the field — a glyph, a currency mark. */
+    lead?: ReactNode;
+    /** Node pinned to the end of the field — a unit, a clear button. */
+    trail?: ReactNode;
+    /** Set when the trailing node is interactive, so it can take the pointer. */
+    isTrailInteractive?: boolean;
+    className?: string;
+    /** The field itself — one `.ds-field-skin` control. */
+    children: ReactNode;
+}
+/**
+ * The one way a field carries something beside its text. Both affixes are
+ * measured, and the control's inline padding is reserved from that measurement
+ * — so content never runs under a glyph, whatever the affix holds.
+ */
+export declare function FieldAffix({ lead, trail, isTrailInteractive, className, children, }: FieldAffixProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FieldAffix/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldAffix/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,kBAA0B,EAC1B,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BA0CjB"}