@namroodinc/liquid-editorial 0.0.0-stage → 0.1.1

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,isGroup:o=!1,children:s}){let c=(0,e.useId)(),l=`${c}-hint`,u=`${c}-error`,d=i?u:r?l:void 0,f=`${c}-label`,p=o?`fieldset`:`div`,m=(0,t.jsxs)(t.Fragment,{children:[n,a&&(0,t.jsx)(`span`,{className:`ds-field__required`,"aria-hidden":`true`,children:`*`})]});return(0,t.jsxs)(p,{className:`ds-field`,children:[o?(0,t.jsx)(`legend`,{id:f,className:`ds-field__label`,children:m}):(0,t.jsx)(`label`,{id:f,className:`ds-field__label`,htmlFor:c,children:m}),s({id:c,"aria-describedby":d,"aria-labelledby":f,"aria-invalid":i?!0:void 0,required:a}),r&&!i&&(0,t.jsx)(`span`,{className:`ds-field__hint`,id:l,children:r}),i&&(0,t.jsx)(`span`,{className:`ds-field__error`,id:u,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","_Fragment","react","react_jsx_runtime","Field","id","hintId","errorId","describedBy","error","hint","labelId","Wrapper","isGroup","labelContent","label","isRequired","children"],"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  /** Use a legend for a field containing a group of controls. */\n  isGroup?: boolean;\n  /** Receives the ids and invalid flag the control must carry. */\n  children: (props: {\n    id: string;\n    \"aria-describedby\"?: string;\n    \"aria-labelledby\": 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, isGroup = false, 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  const labelId = `${id}-label`;\n  const Wrapper = isGroup ? \"fieldset\" : \"div\";\n  const labelContent = <>{label}{isRequired && <span className=\"ds-field__required\" aria-hidden=\"true\">*</span>}</>;\n\n  return (\n    <Wrapper className=\"ds-field\">\n      {isGroup\n        ? <legend id={labelId} className=\"ds-field__label\">{labelContent}</legend>\n        : <label id={labelId} className=\"ds-field__label\" htmlFor={id}>{labelContent}</label>}\n      {children({\n        id,\n        \"aria-describedby\": describedBy,\n        \"aria-labelledby\": labelId,\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    </Wrapper>\n  );\n}\n"],"mappings":"A,oKAwBA,SAAgBI,EAAM,CAAE,QAAO,OAAM,QAAO,aAAY,UAAU,GAAO,YAAwB,CAC/F,IAAMC,GAAA,EAAKL,EAAAA,MAAAA,CAAM,EACXM,EAAS,GAAGD,EAAG,OACfE,EAAU,GAAGF,EAAG,QAChBG,EAAcC,EAAQF,EAAUG,EAAOJ,EAAS,IAAA,GAChDK,EAAU,GAAGN,EAAG,QAChBO,EAAUC,EAAU,WAAa,MACjCC,GAAe,EAAAX,EAAA,KAAA,CAAAF,EAAAA,SAAA,CAAA,SAAA,CAAGc,EAAOC,IAAc,EAAAb,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,qBAAqB,cAAY,OAAO,SAAA,GAAO,CAAA,CAAI,CAAA,CAAA,EAEhH,OACE,EAAAA,EAAA,KAAA,CAACS,EAAD,CAAS,UAAU,WAAnB,SAAA,CACGC,GACG,EAAAV,EAAA,IAAA,CAAC,SAAD,CAAQ,GAAIQ,EAAS,UAAU,kBAAmB,SAAAG,CAAqB,CAAA,GACvE,EAAAX,EAAA,IAAA,CAAC,QAAD,CAAO,GAAIQ,EAAS,UAAU,kBAAkB,QAASN,EAAK,SAAAS,CAAoB,CAAA,EACrFG,EAAS,CACR,KACA,mBAAoBT,EACpB,kBAAmBG,EACnB,eAAgBF,EAAQ,GAAO,IAAA,GAC/B,SAAUO,CACZ,CAAC,EACAN,GAAQ,CAACD,IACR,EAAAN,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,iBAAiB,GAAIG,EAClC,SAAAI,CACG,CAAA,EAEPD,IACC,EAAAN,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,kBAAkB,GAAII,EACnC,SAAAE,CACG,CAAA,CAED,C,EAEb,C"}

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

@@ -0,0 +1,22 @@
+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;
+    /** Use a legend for a field containing a group of controls. */
+    isGroup?: boolean;
+    /** Receives the ids and invalid flag the control must carry. */
+    children: (props: {
+        id: string;
+        "aria-describedby"?: string;
+        "aria-labelledby": 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, isGroup, 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,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,EAAE,EAAE,MAAM,CAAC;QACX,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,EAAE,MAAM,CAAC;QAC1B,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,OAAe,EAAE,QAAQ,EAAE,EAAE,UAAU,+BAiC9F"}

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

@@ -0,0 +1,22 @@
+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;
+    /** Use a legend for a field containing a group of controls. */
+    isGroup?: boolean;
+    /** Receives the ids and invalid flag the control must carry. */
+    children: (props: {
+        id: string;
+        "aria-describedby"?: string;
+        "aria-labelledby": 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, isGroup, 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,+DAA+D;IAC/D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,QAAQ,EAAE,CAAC,KAAK,EAAE;QAChB,EAAE,EAAE,MAAM,CAAC;QACX,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,EAAE,MAAM,CAAC;QAC1B,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,OAAe,EAAE,QAAQ,EAAE,EAAE,UAAU,+BAiC9F"}

package/dist/components/Field/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","Field","id","useId","hintId","errorId","describedBy","error","hint","labelId","Wrapper","isGroup","labelContent","Fragment","label","isRequired","children"],"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  /** Use a legend for a field containing a group of controls. */\n  isGroup?: boolean;\n  /** Receives the ids and invalid flag the control must carry. */\n  children: (props: {\n    id: string;\n    \"aria-describedby\"?: string;\n    \"aria-labelledby\": 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, isGroup = false, 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  const labelId = `${id}-label`;\n  const Wrapper = isGroup ? \"fieldset\" : \"div\";\n  const labelContent = <>{label}{isRequired && <span className=\"ds-field__required\" aria-hidden=\"true\">*</span>}</>;\n\n  return (\n    <Wrapper className=\"ds-field\">\n      {isGroup\n        ? <legend id={labelId} className=\"ds-field__label\">{labelContent}</legend>\n        : <label id={labelId} className=\"ds-field__label\" htmlFor={id}>{labelContent}</label>}\n      {children({\n        id,\n        \"aria-describedby\": describedBy,\n        \"aria-labelledby\": labelId,\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    </Wrapper>\n  );\n}\n"],"mappings":";;;;AAwBA,SAAgBC,EAAM,EAAE,UAAO,SAAM,UAAO,eAAY,aAAU,IAAO,eAAwB;CAC/F,IAAMC,IAAKC,EAAM,GACXC,IAAS,GAAGF,EAAG,QACfG,IAAU,GAAGH,EAAG,SAChBI,IAAcC,IAAQF,IAAUG,IAAOJ,IAAS,KAAA,GAChDK,IAAU,GAAGP,EAAG,SAChBQ,IAAUC,IAAU,aAAa,OACjCC,IAAe,kBAAAZ,GAAA,EAAA,UAAA,CAAGc,GAAOC,KAAc,kBAAC,QAAD;EAAM,WAAU;EAAqB,eAAY;EAAO,UAAA;CAAO,CAAA,CAAI,EAAA,CAAA;CAEhH,OACE,kBAACL,GAAD;EAAS,WAAU;EAAnB,UAAA;GACGC,IACG,kBAAC,UAAD;IAAQ,IAAIF;IAAS,WAAU;IAAmB,UAAAG;GAAqB,CAAA,IACvE,kBAAC,SAAD;IAAO,IAAIH;IAAS,WAAU;IAAkB,SAASP;IAAK,UAAAU;GAAoB,CAAA;GACrFI,EAAS;IACR;IACA,oBAAoBV;IACpB,mBAAmBG;IACnB,gBAAgBF,IAAQ,KAAO,KAAA;IAC/B,UAAUQ;GACZ,CAAC;GACAP,KAAQ,CAACD,KACR,kBAAC,QAAD;IAAM,WAAU;IAAiB,IAAIH;IAClC,UAAAI;GACG,CAAA;GAEPD,KACC,kBAAC,QAAD;IAAM,WAAU;IAAkB,IAAIF;IACnC,UAAAE;GACG,CAAA;EAED;;AAEb"}

package/dist/components/Field/style.css

@@ -0,0 +1,112 @@
+@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);
+  }
+
+  fieldset.ds-field {
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  fieldset.ds-field > legend {
+    padding: 0;
+    margin-block-end: var(--space-2);
+  }
+
+  .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"}

package/dist/components/FieldAffix/index.js

@@ -0,0 +1,45 @@
+/* empty css                          */
+import { useLayoutEffect as e, useRef as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/FieldAffix/index.tsx
+function a(...e) {
+	return e.filter(Boolean).join(" ");
+}
+function o({ lead: o, trail: s, isTrailInteractive: c = !1, className: l, children: u }) {
+	let d = t(null), f = t(null), [p, m] = n({
+		start: 0,
+		end: 0
+	});
+	e(() => {
+		let e = () => m({
+			start: d.current?.offsetWidth ?? 0,
+			end: f.current?.offsetWidth ?? 0
+		});
+		if (e(), typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(e);
+		return d.current && t.observe(d.current), f.current && t.observe(f.current), () => t.disconnect();
+	}, [o, s]);
+	let h = {};
+	return o && (h["--field-pad-start"] = `calc(${p.start}px + var(--field-affix-gap) * 2)`), s && (h["--field-pad-end"] = `calc(${p.end}px + var(--field-affix-gap) * 2)`), /* @__PURE__ */ i("span", {
+		className: a("ds-field-affix", l),
+		style: h,
+		children: [
+			o && /* @__PURE__ */ r("span", {
+				className: "ds-field-affix__lead",
+				ref: d,
+				children: o
+			}),
+			u,
+			s && /* @__PURE__ */ r("span", {
+				className: "ds-field-affix__trail",
+				ref: f,
+				"data-interactive": c || void 0,
+				children: s
+			})
+		]
+	});
+}
+//#endregion
+export { o as FieldAffix };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["cx","parts","FieldAffix","leadRef","useRef","trailRef","pad","setPad","useState","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":";;;;AASA,SAASA,EAAG,GAAGC,GAAuC;CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAmBA,SAAgBC,EAAW,EACzB,SACA,UACA,wBAAqB,IACrB,cACA,eACkB;CAClB,IAAMC,IAAUC,EAA+B,IAAI,GAC7CC,IAAWD,EAA+B,IAAI,GAC9C,CAACE,GAAKC,KAAUC,EAAyC;EAAE,OAAO;EAAG,KAAK;CAAE,CAAC;CAEnF,QAAsB;EACpB,IAAMC,UACJF,EAAO;GACL,OAAOJ,EAAQ,SAAS,eAAe;GACvC,KAAKE,EAAS,SAAS,eAAe;EACxC,CAAC;EAEH,IADAI,EAAQ,GACJ,OAAO,iBAAmB,KAAa;EAC3C,IAAMC,IAAW,IAAI,eAAeD,CAAO;EAG3C,OAFIN,EAAQ,WAASO,EAAS,QAAQP,EAAQ,OAAO,GACjDE,EAAS,WAASK,EAAS,QAAQL,EAAS,OAAO,SAC1CK,EAAS,WAAW;CACnC,GAAG,CAACC,GAAMC,CAAK,CAAC;CAEhB,IAAMC,IAAgC,CAAC;CAIvC,OAHIF,MAAM,EAAM,uBAAuB,QAAQL,EAAI,MAAM,oCACrDM,MAAO,EAAM,qBAAqB,QAAQN,EAAI,IAAI,oCAGpD,kBAAC,QAAD;EAAM,WAAWN,EAAG,kBAAkBc,CAAS;EAAU;EAAzD,UAAA;GACGH,KACC,kBAAC,QAAD;IAAM,WAAU;IAAuB,KAAKR;IACzC,UAAAQ;GACG,CAAA;GAEPI;GACAH,KACC,kBAAC,QAAD;IACE,WAAU;IACV,KAAKP;IACL,oBAAkBW,KAAsB,KAAA;IAEvC,UAAAJ;GACG,CAAA;EAEJ;;AAEV"}

package/dist/components/FieldAffix/style.css

@@ -0,0 +1,54 @@
+@layer components {
+  .ds-field-affix {
+    --field-affix-gap: 10px;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  /* The measured reservation. Beats the sized padding on the field skin so a
+   * field with an affix never prints its text under one. */
+  .ds-field-affix > input.ds-field-skin[data-size],
+  .ds-field-affix > .ds-field-skin {
+    padding-inline: var(--field-pad-start, var(--field-affix-gap))
+      var(--field-pad-end, var(--field-affix-gap));
+  }
+
+  .ds-field-affix__lead,
+  .ds-field-affix__trail {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    color: var(--color-text-muted);
+    font-size: var(--field-font-size-md);
+    pointer-events: none;
+  }
+
+  .ds-field-affix:has(> .ds-field-skin[data-size="sm"]) .ds-field-affix__lead,
+  .ds-field-affix:has(> .ds-field-skin[data-size="sm"]) .ds-field-affix__trail {
+    font-size: var(--field-font-size-sm);
+  }
+
+  .ds-field-affix:has(> .ds-field-skin[data-size="md"]) .ds-field-affix__lead,
+  .ds-field-affix:has(> .ds-field-skin[data-size="md"]) .ds-field-affix__trail,
+  .ds-field-affix:has(> .ds-field-skin[data-size="lg"]) .ds-field-affix__lead,
+  .ds-field-affix:has(> .ds-field-skin[data-size="lg"]) .ds-field-affix__trail {
+    font-size: var(--field-font-size-md);
+  }
+
+  .ds-field-affix__lead {
+    inset-inline-start: var(--field-affix-gap);
+  }
+
+  .ds-field-affix__trail {
+    inset-inline-end: var(--field-affix-gap);
+  }
+
+  .ds-field-affix__trail[data-interactive] {
+    pointer-events: auto;
+  }
+}

package/dist/components/Grid/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");var n=(0,e.forwardRef)(function({columns:e=`auto`,gap:n=`md`,rowGap:r,minColumnWidth:i=`var(--asset-tile-min-width)`,align:a=`stretch`,as:o=`div`,className:s,style:c,...l},u){return(0,t.jsx)(o,{ref:u,className:[`ds-grid`,`ds-grid--cols-${e}`,`ds-grid--gap-${n}`,r?`ds-grid--row-gap-${r}`:null,`ds-grid--align-${a}`,s].filter(Boolean).join(` `),style:{"--grid-min-column":i,...c},...l})}),r=(0,e.forwardRef)(function({span:e=1,as:n=`div`,className:r,...i},a){return(0,t.jsx)(n,{ref:a,className:[`ds-grid__item`,`ds-grid__item--span-${e}`,r].filter(Boolean).join(` `),...i})}),i=(0,e.forwardRef)(function({direction:e=`vertical`,gap:n=`md`,align:r=`stretch`,justify:i=`start`,wrap:a=!1,as:o=`div`,className:s,...c},l){return(0,t.jsx)(o,{ref:l,className:[`ds-stack`,`ds-stack--${e}`,`ds-grid--gap-${n}`,`ds-stack--align-${r}`,`ds-stack--justify-${i}`,a?`ds-stack--wrap`:null,s].filter(Boolean).join(` `),...c})});exports.Grid=n,exports.GridItem=r,exports.Stack=i;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","TagEl","react","react_jsx_runtime","Grid","asTag","rest","columns","gap","rowGap","align","className","minColumnWidth","style","GridItem","span","Stack","direction","justify","wrap"],"sources":["../../../src/components/Grid/index.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type ElementType, type HTMLAttributes } from \"react\";\nimport \"./style.css\";\n\n/** Gap steps map onto the spacing scale — never a raw pixel value. */\nexport type GapSize = \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\n/** Column counts the system offers. `auto` fills by minimum column width. */\nexport type GridColumns = 1 | 2 | 3 | 4 | 6 | 12 | \"auto\";\n\nexport type GridAlign = \"start\" | \"center\" | \"end\" | \"stretch\";\n\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n  /** Columns at the widest. Narrow containers step down automatically. */\n  columns?: GridColumns;\n  /** Space between every child, in both axes. */\n  gap?: GapSize;\n  /** Override the row gap when rows should breathe differently. */\n  rowGap?: GapSize;\n  /** Smallest a column may get before the grid drops one, for `columns=\"auto\"`. */\n  minColumnWidth?: string;\n  align?: GridAlign;\n  /** Render as a different element — `ul`, `section`, and so on. */\n  as?: \"div\" | \"ul\" | \"ol\" | \"section\";\n}\n\n/**\n * A spacing wrapper. Put things inside it and they take their rhythm from the\n * wrapper's `gap` — no margins on the children, ever. Columns step down on\n * their own inside a narrow container, so a Grid is safe anywhere.\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(\n  {\n    columns = \"auto\",\n    gap = \"md\",\n    rowGap,\n    minColumnWidth = \"var(--asset-tile-min-width)\",\n    align = \"stretch\",\n    as: asTag = \"div\",\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const TagEl = asTag as ElementType;\n  return (\n    <TagEl\n      ref={ref as never}\n      className={[\n        \"ds-grid\",\n        `ds-grid--cols-${columns}`,\n        `ds-grid--gap-${gap}`,\n        rowGap ? `ds-grid--row-gap-${rowGap}` : null,\n        `ds-grid--align-${align}`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{ \"--grid-min-column\": minColumnWidth, ...style } as CSSProperties}\n      {...rest}\n    />\n  );\n});\n\nexport interface GridItemProps extends HTMLAttributes<HTMLDivElement> {\n  /** How many columns this child takes. `full` spans the whole row. */\n  span?: 1 | 2 | 3 | 4 | 6 | 12 | \"full\";\n  as?: \"div\" | \"li\" | \"article\" | \"section\";\n}\n\n/** Only needed when one child should be wider than the rest. */\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(function GridItem(\n  { span = 1, as: asTag = \"div\", className, ...rest },\n  ref,\n) {\n  const TagEl = asTag as ElementType;\n  return (\n    <TagEl\n      ref={ref as never}\n      className={[\"ds-grid__item\", `ds-grid__item--span-${span}`, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    />\n  );\n});\n\nexport type StackDirection = \"vertical\" | \"horizontal\";\n\nexport interface StackProps extends HTMLAttributes<HTMLDivElement> {\n  direction?: StackDirection;\n  gap?: GapSize;\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n  justify?: \"start\" | \"center\" | \"end\" | \"between\";\n  wrap?: boolean;\n  as?: \"div\" | \"ul\" | \"ol\" | \"section\" | \"header\" | \"footer\";\n}\n\n/** The one-axis version of Grid: same gap scale, no columns. */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(\n  {\n    direction = \"vertical\",\n    gap = \"md\",\n    align = \"stretch\",\n    justify = \"start\",\n    wrap = false,\n    as: asTag = \"div\",\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const TagEl = asTag as ElementType;\n  return (\n    <TagEl\n      ref={ref as never}\n      className={[\n        \"ds-stack\",\n        `ds-stack--${direction}`,\n        `ds-grid--gap-${gap}`,\n        `ds-stack--align-${align}`,\n        `ds-stack--justify-${justify}`,\n        wrap ? \"ds-stack--wrap\" : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    />\n  );\n});\n"],"mappings":"A,yHA8BA,IAAaI,GAAA,EAAOJ,EAAAA,WAAAA,CAAsC,SACxD,CACE,UAAU,OACV,MAAM,KACN,SACA,iBAAiB,8BACjB,QAAQ,UACR,GAAIK,EAAQ,MACZ,YACA,QACA,GAAGC,GAEL,EACA,CAEA,OACE,EAAAH,EAAA,IAAA,CAACF,EAAD,CACO,MACL,UAAW,CACT,UACA,iBAAiBM,IACjB,gBAAgBC,IAChBC,EAAS,oBAAoBA,IAAW,KACxC,kBAAkBC,IAClBC,CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,EACX,MAAO,CAAE,oBAAqBC,EAAgB,GAAGC,CAAM,EACvD,GAAIP,CACL,CAAA,CAEL,CAAC,EASYQ,GAAA,EAAWd,EAAAA,WAAAA,CAA0C,SAChE,CAAE,OAAO,EAAG,GAAIK,EAAQ,MAAO,YAAW,GAAGC,GAC7C,EACA,CAEA,OACE,EAAAH,EAAA,IAAA,CAACF,EAAD,CACO,MACL,UAAW,CAAC,gBAAiB,uBAAuBc,IAAQJ,CAAS,CAAC,CACnE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,EACX,GAAIL,CACL,CAAA,CAEL,CAAC,EAcYU,GAAA,EAAQhB,EAAAA,WAAAA,CAAuC,SAC1D,CACE,YAAY,WACZ,MAAM,KACN,QAAQ,UACR,UAAU,QACV,OAAO,GACP,GAAIK,EAAQ,MACZ,YACA,GAAGC,GAEL,EACA,CAEA,OACE,EAAAH,EAAA,IAAA,CAACF,EAAD,CACO,MACL,UAAW,CACT,WACA,aAAagB,IACb,gBAAgBT,IAChB,mBAAmBE,IACnB,qBAAqBQ,IACrBC,EAAO,iBAAmB,KAC1BR,CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,EACX,GAAIL,CACL,CAAA,CAEL,CAAC,E"}

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

@@ -0,0 +1,44 @@
+import { type HTMLAttributes } from "react";
+/** Gap steps map onto the spacing scale — never a raw pixel value. */
+export type GapSize = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+/** Column counts the system offers. `auto` fills by minimum column width. */
+export type GridColumns = 1 | 2 | 3 | 4 | 6 | 12 | "auto";
+export type GridAlign = "start" | "center" | "end" | "stretch";
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Columns at the widest. Narrow containers step down automatically. */
+    columns?: GridColumns;
+    /** Space between every child, in both axes. */
+    gap?: GapSize;
+    /** Override the row gap when rows should breathe differently. */
+    rowGap?: GapSize;
+    /** Smallest a column may get before the grid drops one, for `columns="auto"`. */
+    minColumnWidth?: string;
+    align?: GridAlign;
+    /** Render as a different element — `ul`, `section`, and so on. */
+    as?: "div" | "ul" | "ol" | "section";
+}
+/**
+ * A spacing wrapper. Put things inside it and they take their rhythm from the
+ * wrapper's `gap` — no margins on the children, ever. Columns step down on
+ * their own inside a narrow container, so a Grid is safe anywhere.
+ */
+export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface GridItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** How many columns this child takes. `full` spans the whole row. */
+    span?: 1 | 2 | 3 | 4 | 6 | 12 | "full";
+    as?: "div" | "li" | "article" | "section";
+}
+/** Only needed when one child should be wider than the rest. */
+export declare const GridItem: import("react").ForwardRefExoticComponent<GridItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export type StackDirection = "vertical" | "horizontal";
+export interface StackProps extends HTMLAttributes<HTMLDivElement> {
+    direction?: StackDirection;
+    gap?: GapSize;
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    justify?: "start" | "center" | "end" | "between";
+    wrap?: boolean;
+    as?: "div" | "ul" | "ol" | "section" | "header" | "footer";
+}
+/** The one-axis version of Grid: same gap scale, no columns. */
+export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Grid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC9F,OAAO,aAAa,CAAC;AAErB,sEAAsE;AACtE,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAExE,6EAA6E;AAC7E,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC;AAE1D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,wEAAwE;IACxE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iFAAiF;IACjF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;CACtC;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI,sGAgCf,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,qEAAqE;IACrE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC;IACvC,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC;CAC3C;AAED,gEAAgE;AAChE,eAAO,MAAM,QAAQ,0GAcnB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,YAAY,CAAC;AAEvD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;CAC5D;AAED,gEAAgE;AAChE,eAAO,MAAM,KAAK,uGA+BhB,CAAC"}