@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

package/dist/components/Table/style.css

@@ -0,0 +1,122 @@
+@layer components {
+  /* The collection frame. Heavy outer stroke, hairline inner rules, a solid
+   * rail on the selected row — the house idea, in one component. */
+  .ds-table-frame {
+    --field-bg: var(--color-surface);
+
+    border: var(--frame-width) solid var(--frame-color);
+    border-radius: var(--radius-lg);
+    background: var(--color-surface);
+    overflow: hidden;
+  }
+
+  .ds-table-frame__scroll {
+    overflow-x: auto;
+  }
+
+  .ds-table-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+    padding: var(--space-4) var(--table-row-pad-inline);
+    background: var(--color-surface-subtle);
+    border-block-end: var(--rule-width) solid var(--rule-color);
+  }
+
+  .ds-table-toolbar__group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .ds-table-toolbar__title {
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--line-height-tight);
+  }
+
+  .ds-table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    font-size: var(--table-cell-size);
+    color: var(--color-text);
+  }
+
+  .ds-table th {
+    text-align: start;
+    font-size: var(--table-head-size);
+    font-weight: var(--table-head-weight);
+    letter-spacing: var(--table-head-tracking);
+    text-transform: uppercase;
+    color: var(--color-text-muted);
+    padding: var(--space-3) var(--table-row-pad-inline);
+    border-block-end: var(--rule-width) solid var(--rule-color);
+    white-space: nowrap;
+  }
+
+  .ds-table th[data-align="end"],
+  .ds-table td[data-align="end"] {
+    text-align: end;
+  }
+
+  .ds-table th[data-width="control"],
+  .ds-table td[data-width="control"] {
+    inline-size: var(--space-12);
+  }
+
+  .ds-table td {
+    padding: var(--table-row-pad-block) var(--table-row-pad-inline);
+    vertical-align: middle;
+  }
+
+  .ds-table td[data-emphasis="primary"] {
+    font-size: var(--table-cell-primary-size);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ds-table td[data-emphasis="muted"] {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+  }
+
+  .ds-table tbody tr {
+    border-block-end: var(--rule-width) solid var(--rule-color);
+    /* The rail exists at every row so selection never shifts the layout. */
+    box-shadow: inset var(--rail-width) 0 0 0 transparent;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+  }
+
+  .ds-table tbody tr:last-child {
+    border-block-end: none;
+  }
+
+  .ds-table tbody tr[data-interactive]:hover {
+    background: var(--field-hover);
+    cursor: pointer;
+  }
+
+  .ds-table tbody tr[data-selected] {
+    background: var(--color-primary-soft);
+    box-shadow: inset var(--rail-width) 0 0 0 var(--rail-color);
+  }
+
+  .ds-table tbody tr[data-selected]:hover {
+    background: var(--color-primary-soft-hover);
+  }
+
+  .ds-table tbody tr:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: -2px;
+  }
+
+  .ds-table-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-12) var(--space-6);
+    color: var(--color-text-muted);
+    text-align: center;
+  }
+}

package/dist/components/TagsInput/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");;/* empty css                            */let t=require("react"),n=require("react/jsx-runtime");function r(...e){return e.filter(Boolean).join(` `)}var i=(0,t.forwardRef)(function({value:i,defaultValue:a=[],onValueChange:o,placeholder:s=`Add a tag`,size:c=`md`,max:l,isDisabled:u=!1,isInvalid:d=!1,className:f,...p},m){let[h,g]=(0,t.useState)(a),_=i??h,[v,y]=(0,t.useState)(``),b=(0,t.useRef)(null),x=e=>{i===void 0&&g(e),o?.(e)},S=e=>{let t=e.trim();t&&!_.includes(t)&&(l!==void 0&&_.length>=l||x([..._,t]))};return(0,n.jsxs)(`div`,{className:r(`ds-field-skin`,`ds-tags`,f),"data-size":c,"data-disabled":u||void 0,"aria-invalid":d||void 0,onClick:()=>b.current?.focus(),children:[_.map(t=>(0,n.jsxs)(`span`,{className:`ds-tags__tag`,children:[t,(0,n.jsx)(`button`,{type:`button`,className:`ds-tags__remove`,"aria-label":`Remove ${t}`,disabled:u,onClick:e=>{e.stopPropagation(),x(_.filter(e=>e!==t))},children:(0,n.jsx)(e.t,{name:`x`,size:16})})]},t)),(0,n.jsx)(`input`,{ref:e=>{b.current=e,typeof m==`function`?m(e):m&&(m.current=e)},type:`text`,className:`ds-tags__input`,value:v,placeholder:_.length===0?s:``,disabled:u,onChange:e=>y(e.target.value),onKeyDown:e=>{e.key===`Enter`||e.key===`,`?(e.preventDefault(),S(v),y(``)):e.key===`Backspace`&&v===``&&_.length>0&&x(_.slice(0,-1))},onBlur:()=>{S(v),y(``)},...p})]})});exports.TagsInput=i;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useState","useRef","Icon","require_Icon","react","react_jsx_runtime","cx","parts","TagsInput","rest","internal","setInternal","defaultValue","current","value","draft","setDraft","inputRef","commit","next","onValueChange","add","tag","raw","max","className","size","isDisabled","isInvalid","event","item","node","ref","placeholder"],"sources":["../../../src/components/TagsInput/index.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, type KeyboardEvent } from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface TagsInputProps {\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  placeholder?: string;\n  size?: FieldSize;\n  /** Stop accepting new tags past this count. */\n  max?: number;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  id?: string;\n  className?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n}\n\n/**\n * Free-text keywords. Enter or comma commits a tag, Backspace on an empty\n * input removes the last one. Tags are plain strings — never status tones.\n */\nexport const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInput(\n  {\n    value,\n    defaultValue = [],\n    onValueChange,\n    placeholder = \"Add a tag\",\n    size = \"md\",\n    max,\n    isDisabled = false,\n    isInvalid = false,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState<string[]>(defaultValue);\n  const current = value ?? internal;\n  const [draft, setDraft] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const commit = (next: string[]) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const add = (raw: string) => {\n    const tag = raw.trim();\n    if (!tag || current.includes(tag)) return;\n    if (max !== undefined && current.length >= max) return;\n    commit([...current, tag]);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\" || event.key === \",\") {\n      event.preventDefault();\n      add(draft);\n      setDraft(\"\");\n    } else if (event.key === \"Backspace\" && draft === \"\" && current.length > 0) {\n      commit(current.slice(0, -1));\n    }\n  };\n\n  return (\n    <div\n      className={cx(\"ds-field-skin\", \"ds-tags\", className)}\n      data-size={size}\n      data-disabled={isDisabled || undefined}\n      aria-invalid={isInvalid || undefined}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {current.map((tag) => (\n        <span key={tag} className=\"ds-tags__tag\">\n          {tag}\n          <button\n            type=\"button\"\n            className=\"ds-tags__remove\"\n            aria-label={`Remove ${tag}`}\n            disabled={isDisabled}\n            onClick={(event) => {\n              event.stopPropagation();\n              commit(current.filter((item) => item !== tag));\n            }}\n          >\n            <Icon name=\"x\" size={16} />\n          </button>\n        </span>\n      ))}\n      <input\n        ref={(node) => {\n          inputRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"text\"\n        className=\"ds-tags__input\"\n        value={draft}\n        placeholder={current.length === 0 ? placeholder : \"\"}\n        disabled={isDisabled}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={onKeyDown}\n        onBlur={() => {\n          add(draft);\n          setDraft(\"\");\n        }}\n        {...rest}\n      />\n    </div>\n  );\n});\n"],"mappings":"A,sNAMA,SAASO,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAsBA,IAAaC,GAAA,EAAYT,EAAAA,WAAAA,CAA6C,SACpE,CACE,QACA,eAAe,CAAC,EAChB,gBACA,cAAc,YACd,OAAO,KACP,MACA,aAAa,GACb,YAAY,GACZ,YACA,GAAGU,GAEL,EACA,CACA,GAAM,CAACC,EAAUC,IAAA,EAAeX,EAAAA,SAAAA,CAAmBY,CAAY,EACzDC,EAAUC,GAASJ,EACnB,CAACK,EAAOC,IAAA,EAAYhB,EAAAA,SAAAA,CAAS,EAAE,EAC/BiB,GAAA,EAAWhB,EAAAA,OAAAA,CAAgC,IAAI,EAE/CiB,EAAU,GAAmB,CAC7BJ,IAAU,IAAA,IAAWH,EAAYQ,CAAI,EACzCC,IAAgBD,CAAI,CACtB,EAEME,EAAO,GAAgB,CAC3B,IAAMC,EAAMC,EAAI,KAAK,EAChBD,GAAO,GAAQ,SAASA,CAAG,IAC5BE,IAAQ,IAAA,IAAaX,EAAQ,QAAUW,GAC3CN,EAAO,CAAC,GAAGL,EAASS,CAAG,CAAC,EAC1B,EAYA,OACE,EAAAjB,EAAA,KAAA,CAAC,MAAD,CACE,UAAWC,EAAG,gBAAiB,UAAWmB,CAAS,EACnD,YAAWC,EACX,gBAAeC,GAAc,IAAA,GAC7B,eAAcC,GAAa,IAAA,GAC3B,YAAeX,EAAS,SAAS,MAAM,EALzC,SAAA,CAOGJ,EAAQ,IAAK,IACZ,EAAAR,EAAA,KAAA,CAAC,OAAD,CAAgB,UAAU,eAA1B,SAAA,CACGiB,GACD,EAAAjB,EAAA,IAAA,CAAC,SAAD,CACE,KAAK,SACL,UAAU,kBACV,aAAY,UAAUiB,IACtB,SAAUK,EACV,QAAU,GAAU,CAClBE,EAAM,gBAAgB,EACtBX,EAAOL,EAAQ,OAAQ,GAASiB,IAASR,CAAG,CAAC,CAC/C,EAEA,UAAA,EAAAjB,EAAA,IAAA,CAACH,EAAAA,EAAD,CAAM,KAAK,IAAI,KAAM,EAAK,CAAA,CACpB,CAAA,CACJ,CAdK,EAAAoB,CAcL,CACP,GACD,EAAAjB,EAAA,IAAA,CAAC,QAAD,CACE,IAAM,GAAS,CACb,EAAS,QAAU0B,EACf,OAAOC,GAAQ,WAAYA,EAAID,CAAI,EAC9BC,IAAK,EAAI,QAAUD,EAC9B,EACA,KAAK,OACL,UAAU,iBACV,MAAOhB,EACP,YAAaF,EAAQ,SAAW,EAAIoB,EAAc,GAClD,SAAUN,EACV,SAAW,GAAUX,EAASa,EAAM,OAAO,KAAK,EACrC,UA/CE,GAA2C,CACxDA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,KACzCA,EAAM,eAAe,EACrBR,EAAIN,CAAK,EACTC,EAAS,EAAE,GACFa,EAAM,MAAQ,aAAed,IAAU,IAAMF,EAAQ,OAAS,GACvEK,EAAOL,EAAQ,MAAM,EAAG,EAAE,CAAC,CAE/B,EAwCM,WAAc,CACZQ,EAAIN,CAAK,EACTC,EAAS,EAAE,CACb,EACA,GAAIP,CACL,CAAA,CACE,C,EAET,CAAC,E"}

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

@@ -0,0 +1,22 @@
+import type { FieldSize } from "../Field/index.cjs";
+export interface TagsInputProps {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    size?: FieldSize;
+    /** Stop accepting new tags past this count. */
+    max?: number;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+}
+/**
+ * Free-text keywords. Enter or comma commits a tag, Backspace on an empty
+ * input removes the last one. Tags are plain strings — never status tones.
+ */
+export declare const TagsInput: import("react").ForwardRefExoticComponent<TagsInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/TagsInput/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,6GAwFpB,CAAC"}

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

@@ -0,0 +1,22 @@
+import type { FieldSize } from "../Field/index.js";
+export interface TagsInputProps {
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    placeholder?: string;
+    size?: FieldSize;
+    /** Stop accepting new tags past this count. */
+    max?: number;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+}
+/**
+ * Free-text keywords. Enter or comma commits a tag, Backspace on an empty
+ * input removes the last one. Tags are plain strings — never status tones.
+ */
+export declare const TagsInput: import("react").ForwardRefExoticComponent<TagsInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagsInput/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,6GAwFpB,CAAC"}

package/dist/components/TagsInput/index.js

@@ -0,0 +1,60 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+/* empty css                          */
+import { forwardRef as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/TagsInput/index.tsx
+function o(...e) {
+	return e.filter(Boolean).join(" ");
+}
+var s = t(function({ value: t, defaultValue: s = [], onValueChange: c, placeholder: l = "Add a tag", size: u = "md", max: d, isDisabled: f = !1, isInvalid: p = !1, className: m, ...h }, g) {
+	let [_, v] = r(s), y = t ?? _, [b, x] = r(""), S = n(null), C = (e) => {
+		t === void 0 && v(e), c?.(e);
+	}, w = (e) => {
+		let t = e.trim();
+		t && !y.includes(t) && (d !== void 0 && y.length >= d || C([...y, t]));
+	};
+	return /* @__PURE__ */ a("div", {
+		className: o("ds-field-skin", "ds-tags", m),
+		"data-size": u,
+		"data-disabled": f || void 0,
+		"aria-invalid": p || void 0,
+		onClick: () => S.current?.focus(),
+		children: [y.map((t) => /* @__PURE__ */ a("span", {
+			className: "ds-tags__tag",
+			children: [t, /* @__PURE__ */ i("button", {
+				type: "button",
+				className: "ds-tags__remove",
+				"aria-label": `Remove ${t}`,
+				disabled: f,
+				onClick: (e) => {
+					e.stopPropagation(), C(y.filter((e) => e !== t));
+				},
+				children: /* @__PURE__ */ i(e, {
+					name: "x",
+					size: 16
+				})
+			})]
+		}, t)), /* @__PURE__ */ i("input", {
+			ref: (e) => {
+				S.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
+			},
+			type: "text",
+			className: "ds-tags__input",
+			value: b,
+			placeholder: y.length === 0 ? l : "",
+			disabled: f,
+			onChange: (e) => x(e.target.value),
+			onKeyDown: (e) => {
+				e.key === "Enter" || e.key === "," ? (e.preventDefault(), w(b), x("")) : e.key === "Backspace" && b === "" && y.length > 0 && C(y.slice(0, -1));
+			},
+			onBlur: () => {
+				w(b), x("");
+			},
+			...h
+		})]
+	});
+});
+//#endregion
+export { s as TagsInput };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Icon","cx","parts","TagsInput","forwardRef","rest","internal","setInternal","useState","defaultValue","current","value","draft","setDraft","inputRef","useRef","commit","next","onValueChange","add","tag","raw","max","className","size","isDisabled","isInvalid","event","item","node","ref","placeholder"],"sources":["../../../src/components/TagsInput/index.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, type KeyboardEvent } from \"react\";\nimport { Icon } from \"../Icon\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface TagsInputProps {\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  placeholder?: string;\n  size?: FieldSize;\n  /** Stop accepting new tags past this count. */\n  max?: number;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  id?: string;\n  className?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n}\n\n/**\n * Free-text keywords. Enter or comma commits a tag, Backspace on an empty\n * input removes the last one. Tags are plain strings — never status tones.\n */\nexport const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInput(\n  {\n    value,\n    defaultValue = [],\n    onValueChange,\n    placeholder = \"Add a tag\",\n    size = \"md\",\n    max,\n    isDisabled = false,\n    isInvalid = false,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState<string[]>(defaultValue);\n  const current = value ?? internal;\n  const [draft, setDraft] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const commit = (next: string[]) => {\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const add = (raw: string) => {\n    const tag = raw.trim();\n    if (!tag || current.includes(tag)) return;\n    if (max !== undefined && current.length >= max) return;\n    commit([...current, tag]);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\" || event.key === \",\") {\n      event.preventDefault();\n      add(draft);\n      setDraft(\"\");\n    } else if (event.key === \"Backspace\" && draft === \"\" && current.length > 0) {\n      commit(current.slice(0, -1));\n    }\n  };\n\n  return (\n    <div\n      className={cx(\"ds-field-skin\", \"ds-tags\", className)}\n      data-size={size}\n      data-disabled={isDisabled || undefined}\n      aria-invalid={isInvalid || undefined}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {current.map((tag) => (\n        <span key={tag} className=\"ds-tags__tag\">\n          {tag}\n          <button\n            type=\"button\"\n            className=\"ds-tags__remove\"\n            aria-label={`Remove ${tag}`}\n            disabled={isDisabled}\n            onClick={(event) => {\n              event.stopPropagation();\n              commit(current.filter((item) => item !== tag));\n            }}\n          >\n            <Icon name=\"x\" size={16} />\n          </button>\n        </span>\n      ))}\n      <input\n        ref={(node) => {\n          inputRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type=\"text\"\n        className=\"ds-tags__input\"\n        value={draft}\n        placeholder={current.length === 0 ? placeholder : \"\"}\n        disabled={isDisabled}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={onKeyDown}\n        onBlur={() => {\n          add(draft);\n          setDraft(\"\");\n        }}\n        {...rest}\n      />\n    </div>\n  );\n});\n"],"mappings":";;;;;AAMA,SAASC,EAAG,GAAGC,GAAuC;CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAsBA,IAAaC,IAAYC,EAA6C,SACpE,EACE,UACA,kBAAe,CAAC,GAChB,kBACA,iBAAc,aACd,UAAO,MACP,QACA,gBAAa,IACb,eAAY,IACZ,cACA,GAAGC,KAEL,GACA;CACA,IAAM,CAACC,GAAUC,KAAeC,EAAmBC,CAAY,GACzDC,IAAUC,KAASL,GACnB,CAACM,GAAOC,KAAYL,EAAS,EAAE,GAC/BM,IAAWC,EAAgC,IAAI,GAE/CC,KAAU,MAAmB;EAEjC,AADIL,MAAU,KAAA,KAAWJ,EAAYU,CAAI,GACzCC,IAAgBD,CAAI;CACtB,GAEME,KAAO,MAAgB;EAC3B,IAAMC,IAAMC,EAAI,KAAK;EACrB,AAAKD,KAAO,GAAQ,SAASA,CAAG,MAC5BE,MAAQ,KAAA,KAAaZ,EAAQ,UAAUY,KAC3CN,EAAO,CAAC,GAAGN,GAASU,CAAG,CAAC;CAC1B;CAYA,OACE,kBAAC,OAAD;EACE,WAAWnB,EAAG,iBAAiB,WAAWsB,CAAS;EACnD,aAAWC;EACX,iBAAeC,KAAc,KAAA;EAC7B,gBAAcC,KAAa,KAAA;EAC3B,eAAeZ,EAAS,SAAS,MAAM;EALzC,UAAA,CAOGJ,EAAQ,KAAK,MACZ,kBAAC,QAAD;GAAgB,WAAU;GAA1B,UAAA,CACGU,GACD,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,cAAY,UAAUA;IACtB,UAAUK;IACV,UAAU,MAAU;KAElB,AADAE,EAAM,gBAAgB,GACtBX,EAAON,EAAQ,QAAQ,MAASkB,MAASR,CAAG,CAAC;IAC/C;IAEA,UAAA,kBAACpB,GAAD;KAAM,MAAK;KAAI,MAAM;IAAK,CAAA;GACpB,CAAA,CACJ;EAdK,GAAAoB,CAcL,CACP,GACD,kBAAC,SAAD;GACE,MAAM,MAAS;IAEb,AADA,EAAS,UAAUS,GACf,OAAOC,KAAQ,aAAYA,EAAID,CAAI,IAC9BC,MAAK,EAAI,UAAUD;GAC9B;GACA,MAAK;GACL,WAAU;GACV,OAAOjB;GACP,aAAaF,EAAQ,WAAW,IAAIqB,IAAc;GAClD,UAAUN;GACV,WAAW,MAAUZ,EAASc,EAAM,OAAO,KAAK;GACrC,YA/CE,MAA2C;IAC5D,AAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,OACzCA,EAAM,eAAe,GACrBR,EAAIP,CAAK,GACTC,EAAS,EAAE,KACFc,EAAM,QAAQ,eAAef,MAAU,MAAMF,EAAQ,SAAS,KACvEM,EAAON,EAAQ,MAAM,GAAG,EAAE,CAAC;GAE/B;GAwCM,cAAc;IAEZ,AADAS,EAAIP,CAAK,GACTC,EAAS,EAAE;GACb;GACA,GAAIR;EACL,CAAA,CACE;;AAET,CAAC"}

package/dist/components/TagsInput/style.css

@@ -0,0 +1,83 @@
+@layer components {
+  .ds-tags {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    min-block-size: var(--field-height-md);
+    padding: var(--space-1) var(--space-2);
+    cursor: text;
+  }
+
+  .ds-tags[data-size="sm"] {
+    min-block-size: var(--field-height-sm);
+  }
+
+  .ds-tags[data-size="lg"] {
+    min-block-size: var(--field-height-lg);
+  }
+
+  .ds-tags:focus-within {
+    background: var(--field-focus);
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  .ds-tags[data-disabled] {
+    opacity: 45%;
+    cursor: not-allowed;
+  }
+
+  .ds-tags__tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: 2px var(--space-1) 2px var(--space-2);
+    border: var(--badge-border-width) solid var(--control-border-color);
+    border-radius: var(--radius-pill);
+    background: var(--color-surface);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  .ds-tags__remove {
+    display: grid;
+    place-items: center;
+    inline-size: var(--space-5);
+    block-size: var(--space-5);
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-pill);
+    background: transparent;
+    color: var(--color-text-muted);
+    cursor: pointer;
+  }
+
+  .ds-tags__remove:hover:not(:disabled) {
+    background: var(--field-hover);
+    color: var(--color-text);
+  }
+
+  .ds-tags__remove:focus-visible {
+    outline: var(--control-border-width) solid var(--color-focus);
+    outline-offset: 1px;
+  }
+
+  .ds-tags__input {
+    flex: 1;
+    min-inline-size: 6rem;
+    border: none;
+    background: transparent;
+    color: var(--color-text);
+    font-family: var(--font-sans);
+    font-size: var(--field-font-size-md);
+  }
+
+  .ds-tags__input:focus {
+    outline: none;
+  }
+
+  .ds-tags__input::placeholder {
+    color: var(--color-text-muted);
+  }
+}

package/dist/components/TextField/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});/* empty css                             */let e=require("react"),t=require("react/jsx-runtime");var n=(0,e.forwardRef)(function({size:e=`md`,className:n,type:r=`text`,...i},a){return(0,t.jsx)(`input`,{ref:a,type:r,"data-size":e,className:[`ds-field-skin`,n].filter(Boolean).join(` `),...i})}),r=(0,e.forwardRef)(function({rows:n=3,className:r,onInput:i,...a},o){let s=(0,e.useCallback)(e=>{let t=e.currentTarget;t.style.height=`auto`,t.style.height=`${t.scrollHeight}px`,i?.(e)},[i]);return(0,t.jsx)(`textarea`,{ref:o,rows:n,onInput:s,className:[`ds-field-skin`,r].filter(Boolean).join(` `),...a})});exports.TextArea=r,exports.TextField=n;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useCallback","react","react_jsx_runtime","TextField","rest","size","className","TextArea","autoGrow","el","event","onInput"],"sources":["../../../src/components/TextField/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  type FormEvent,\n  type InputHTMLAttributes,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\n\nexport interface TextFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n  size?: FieldSize;\n}\n\n/** Single-line input wearing the shared field skin. */\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField({ size = \"md\", className, type = \"text\", ...rest }, ref) {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        data-size={size}\n        className={[\"ds-field-skin\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;\n\n/** Multi-line input. Grows to its content and never scrolls. */\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea({ rows = 3, className, onInput, ...rest }, ref) {\n    const autoGrow = useCallback(\n      (event: FormEvent<HTMLTextAreaElement>) => {\n        const el = event.currentTarget;\n        el.style.height = \"auto\";\n        el.style.height = `${el.scrollHeight}px`;\n        onInput?.(event as Parameters<NonNullable<typeof onInput>>[0]);\n      },\n      [onInput],\n    );\n\n    return (\n      <textarea\n        ref={ref}\n        rows={rows}\n        onInput={autoGrow}\n        className={[\"ds-field-skin\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      />\n    );\n  },\n);\n"],"mappings":"A,oKAgBA,IAAaI,GAAA,EAAYJ,EAAAA,WAAAA,CACvB,SAAmB,CAAE,OAAO,KAAM,YAAW,OAAO,OAAQ,GAAGK,GAAQ,EAAK,CAC1E,OACE,EAAAF,EAAA,IAAA,CAAC,QAAD,CACO,MACC,OACN,YAAWG,EACX,UAAW,CAAC,gBAAiBC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAChE,GAAIF,CACL,CAAA,CAEL,CACF,EAKaG,GAAA,EAAWR,EAAAA,WAAAA,CACtB,SAAkB,CAAE,OAAO,EAAG,YAAW,UAAS,GAAGK,GAAQ,EAAK,CAChE,IAAMI,GAAA,EAAWR,EAAAA,YAAAA,CACd,GAA0C,CACzC,IAAMS,EAAKC,EAAM,cACjB,EAAG,MAAM,OAAS,OAClB,EAAG,MAAM,OAAS,GAAGD,EAAG,aAAa,IACrCE,IAAUD,CAAmD,CAC/D,EACA,CAACC,CAAO,CACV,EAEA,OACE,EAAAT,EAAA,IAAA,CAAC,WAAD,CACO,MACC,OACN,QAASM,EACT,UAAW,CAAC,gBAAiBF,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAChE,GAAIF,CACL,CAAA,CAEL,CACF,E"}

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

@@ -0,0 +1,11 @@
+import { type InputHTMLAttributes, type TextareaHTMLAttributes } from "react";
+import type { FieldSize } from "../Field/index.cjs";
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    size?: FieldSize;
+}
+/** Single-line input wearing the shared field skin. */
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+/** Multi-line input. Grows to its content and never scrolls. */
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/TextField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,uDAAuD;AACvD,eAAO,MAAM,SAAS,6GAYrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;AAExE,gEAAgE;AAChE,eAAO,MAAM,QAAQ,+GAsBpB,CAAC"}

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

@@ -0,0 +1,11 @@
+import { type InputHTMLAttributes, type TextareaHTMLAttributes } from "react";
+import type { FieldSize } from "../Field/index.js";
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    size?: FieldSize;
+}
+/** Single-line input wearing the shared field skin. */
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+/** Multi-line input. Grows to its content and never scrolls. */
+export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,mBAAmB,EACxB,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,uDAAuD;AACvD,eAAO,MAAM,SAAS,6GAYrB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;AAExE,gEAAgE;AAChE,eAAO,MAAM,QAAQ,+GAsBpB,CAAC"}

package/dist/components/TextField/index.js

@@ -0,0 +1,29 @@
+/* empty css                          */
+import { forwardRef as e, useCallback as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/TextField/index.tsx
+var r = e(function({ size: e = "md", className: t, type: r = "text", ...i }, a) {
+	return /* @__PURE__ */ n("input", {
+		ref: a,
+		type: r,
+		"data-size": e,
+		className: ["ds-field-skin", t].filter(Boolean).join(" "),
+		...i
+	});
+}), i = e(function({ rows: e = 3, className: r, onInput: i, ...a }, o) {
+	let s = t((e) => {
+		let t = e.currentTarget;
+		t.style.height = "auto", t.style.height = `${t.scrollHeight}px`, i?.(e);
+	}, [i]);
+	return /* @__PURE__ */ n("textarea", {
+		ref: o,
+		rows: e,
+		onInput: s,
+		className: ["ds-field-skin", r].filter(Boolean).join(" "),
+		...a
+	});
+});
+//#endregion
+export { i as TextArea, r as TextField };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["TextField","forwardRef","rest","size","className","TextArea","autoGrow","useCallback","el","event","onInput"],"sources":["../../../src/components/TextField/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  type FormEvent,\n  type InputHTMLAttributes,\n  type TextareaHTMLAttributes,\n} from \"react\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\n\nexport interface TextFieldProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n  size?: FieldSize;\n}\n\n/** Single-line input wearing the shared field skin. */\nexport const TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  function TextField({ size = \"md\", className, type = \"text\", ...rest }, ref) {\n    return (\n      <input\n        ref={ref}\n        type={type}\n        data-size={size}\n        className={[\"ds-field-skin\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      />\n    );\n  },\n);\n\nexport type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;\n\n/** Multi-line input. Grows to its content and never scrolls. */\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  function TextArea({ rows = 3, className, onInput, ...rest }, ref) {\n    const autoGrow = useCallback(\n      (event: FormEvent<HTMLTextAreaElement>) => {\n        const el = event.currentTarget;\n        el.style.height = \"auto\";\n        el.style.height = `${el.scrollHeight}px`;\n        onInput?.(event as Parameters<NonNullable<typeof onInput>>[0]);\n      },\n      [onInput],\n    );\n\n    return (\n      <textarea\n        ref={ref}\n        rows={rows}\n        onInput={autoGrow}\n        className={[\"ds-field-skin\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      />\n    );\n  },\n);\n"],"mappings":";;;;AAgBA,IAAaA,IAAYC,EACvB,SAAmB,EAAE,UAAO,MAAM,cAAW,UAAO,QAAQ,GAAGC,KAAQ,GAAK;CAC1E,OACE,kBAAC,SAAD;EACO;EACC;EACN,aAAWC;EACX,WAAW,CAAC,iBAAiBC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAChE,GAAIF;CACL,CAAA;AAEL,CACF,GAKaG,IAAWJ,EACtB,SAAkB,EAAE,UAAO,GAAG,cAAW,YAAS,GAAGC,KAAQ,GAAK;CAChE,IAAMI,IAAWC,GACd,MAA0C;EACzC,IAAMC,IAAKC,EAAM;EAGjB,AAFA,EAAG,MAAM,SAAS,QAClB,EAAG,MAAM,SAAS,GAAGD,EAAG,aAAa,KACrCE,IAAUD,CAAmD;CAC/D,GACA,CAACC,CAAO,CACV;CAEA,OACE,kBAAC,YAAD;EACO;EACC;EACN,SAASJ;EACT,WAAW,CAAC,iBAAiBF,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAChE,GAAIF;CACL,CAAA;AAEL,CACF"}

package/dist/components/TextField/style.css

@@ -0,0 +1 @@
+/* TextField and TextArea use the shared field skin from ../Field/style.css. */

package/dist/components/Time/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Popover/index.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(...e){return e.filter(Boolean).join(` `)}var i=[`Jan`,`Feb`,`Mar`,`Apr`,`May`,`Jun`,`Jul`,`Aug`,`Sep`,`Oct`,`Nov`,`Dec`],a=6e4,o=60*a,s=24*o,c=7*s;function l(e){return String(e).padStart(2,`0`)}function u(e,t={}){let{hasYear:n=!0}=t,r=`${e.getDate()} ${i[e.getMonth()]}`;return n?`${r} ${e.getFullYear()}`:r}function d(e,t={}){let{hasTimeZone:n=!0}=t,r=`${u(e)}, ${l(e.getHours())}:${l(e.getMinutes())}`;if(!n)return r;let i=new Intl.DateTimeFormat(void 0,{timeZoneName:`short`}).formatToParts(e).find(e=>e.type===`timeZoneName`)?.value;return i?`${r} ${i}`:r}function f(e,t=new Date){let n=t.getTime()-e.getTime();if(n<0)return u(e,{hasYear:e.getFullYear()!==t.getFullYear()});if(n<a)return`Just now`;if(n<o)return`${Math.floor(n/a)}m ago`;if(n<s)return`${Math.floor(n/o)}h ago`;if(n<c){let e=Math.floor(n/s);return`${e} ${e===1?`day`:`days`} ago`}return u(e,{hasYear:e.getFullYear()!==t.getFullYear()})}var p=(0,t.forwardRef)(function({value:i,format:a=`auto`,hasTooltip:o=!0,hasTimeZone:s=!0,now:c,refreshInterval:l=3e4,className:p,tabIndex:m,title:h,onMouseEnter:g,onMouseLeave:_,onFocus:v,onBlur:y,onKeyDown:b,"aria-describedby":x,...S},C){let w=i instanceof Date?i:new Date(i),T=(0,t.useRef)(null),[E,D]=(0,t.useState)(!1),O=(0,t.useId)(),[,k]=(0,t.useState)(0);if((0,t.useEffect)(()=>{if(a===`absolute`||c)return;let e=window.setInterval(()=>k(e=>e+1),l);return()=>window.clearInterval(e)},[a,c,l]),Number.isNaN(w.getTime()))return null;let A=a===`absolute`?u(w):f(w,c??new Date),j=d(w,{hasTimeZone:s}),M=o&&A!==j;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`time`,{ref:e=>{T.current=e,typeof C==`function`?C(e):C&&(C.current=e)},dateTime:w.toISOString(),suppressHydrationWarning:!0,className:r(`ds-time`,!M&&`ds-time--plain`,p),tabIndex:m??(M?0:void 0),"aria-describedby":[x,M&&E&&O].filter(Boolean).join(` `)||void 0,title:h??(M?void 0:j),onMouseEnter:e=>{g?.(e),M&&!e.defaultPrevented&&D(!0)},onMouseLeave:e=>{_?.(e),M&&!e.defaultPrevented&&D(!1)},onFocus:e=>{v?.(e),M&&!e.defaultPrevented&&D(!0)},onBlur:e=>{y?.(e),M&&!e.defaultPrevented&&D(!1)},onKeyDown:e=>{b?.(e),M&&!e.defaultPrevented&&e.key===`Escape`&&D(!1)},...S,children:A}),M&&(0,n.jsx)(e.Popover,{anchorRef:T,isOpen:E,id:O,role:`tooltip`,className:`ds-surface-raised ds-time-tooltip`,children:j})]})});exports.Time=p,exports.formatAbsoluteDate=u,exports.formatAbsoluteTime=d,exports.formatRelativeTime=f;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useRef","useState","useId","_Fragment","Popover","require_components_Popover_index","react","react_jsx_runtime","cx","parts","MONTHS","MINUTE","HOUR","DAY","WEEK","pad","value","formatAbsoluteDate","options","stem","date","hasYear","formatAbsoluteTime","stamp","hasTimeZone","zone","part","formatRelativeTime","delta","now","days","Time","describedBy","rest","anchorRef","isOpen","setIsOpen","tooltipId","setTick","format","id","t","refreshInterval","label","isTipped","hasTooltip","node","ref","className","tabIndex","title","onMouseEnter","event","onMouseLeave","onFocus","onBlur","onKeyDown"],"sources":["../../../src/components/Time/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { Popover } from \"../Popover\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nconst MONTHS = [\n  \"Jan\",\n  \"Feb\",\n  \"Mar\",\n  \"Apr\",\n  \"May\",\n  \"Jun\",\n  \"Jul\",\n  \"Aug\",\n  \"Sep\",\n  \"Oct\",\n  \"Nov\",\n  \"Dec\",\n];\n\nconst MINUTE = 60_000;\nconst HOUR = 60 * MINUTE;\nconst DAY = 24 * HOUR;\nconst WEEK = 7 * DAY;\n\nfunction pad(value: number) {\n  return String(value).padStart(2, \"0\");\n}\n\n/** Day before month, one order everywhere: `12 Jun 2026`. */\nexport function formatAbsoluteDate(date: Date, options: { hasYear?: boolean } = {}) {\n  const { hasYear = true } = options;\n  const stem = `${date.getDate()} ${MONTHS[date.getMonth()]}`;\n  return hasYear ? `${stem} ${date.getFullYear()}` : stem;\n}\n\n/** The tooltip form: `6 Aug 2026, 11:05`, with the reader's zone appended. */\nexport function formatAbsoluteTime(date: Date, options: { hasTimeZone?: boolean } = {}) {\n  const { hasTimeZone = true } = options;\n  const stamp = `${formatAbsoluteDate(date)}, ${pad(date.getHours())}:${pad(date.getMinutes())}`;\n  if (!hasTimeZone) return stamp;\n  const zone = new Intl.DateTimeFormat(undefined, { timeZoneName: \"short\" })\n    .formatToParts(date)\n    .find((part) => part.type === \"timeZoneName\")?.value;\n  return zone ? `${stamp} ${zone}` : stamp;\n}\n\n/**\n * Relative up to a week, absolute after. Future dates are always absolute — a\n * scheduled publish reads `12 Jun`, never `in 3 days`.\n */\nexport function formatRelativeTime(date: Date, now: Date = new Date()) {\n  const delta = now.getTime() - date.getTime();\n  if (delta < 0) {\n    return formatAbsoluteDate(date, { hasYear: date.getFullYear() !== now.getFullYear() });\n  }\n  if (delta < MINUTE) return \"Just now\";\n  if (delta < HOUR) return `${Math.floor(delta / MINUTE)}m ago`;\n  if (delta < DAY) return `${Math.floor(delta / HOUR)}h ago`;\n  if (delta < WEEK) {\n    const days = Math.floor(delta / DAY);\n    return `${days} ${days === 1 ? \"day\" : \"days\"} ago`;\n  }\n  return formatAbsoluteDate(date, { hasYear: date.getFullYear() !== now.getFullYear() });\n}\n\nexport type TimeFormat = \"auto\" | \"relative\" | \"absolute\";\n\nexport interface TimeProps extends Omit<HTMLAttributes<HTMLElement>, \"children\"> {\n  /** The instant to print — Date, epoch ms, or an ISO string. */\n  value: Date | string | number;\n  /** `auto` ages the value; `absolute` always prints the date. */\n  format?: TimeFormat;\n  /** Show the absolute stamp on hover and focus. */\n  hasTooltip?: boolean;\n  /** Append the reader's time zone to the tooltip. */\n  hasTimeZone?: boolean;\n  /** Pin \"now\" — useful for tests and stories. */\n  now?: Date;\n  /** Re-render interval in ms while the value is still relative. */\n  refreshInterval?: number;\n}\n\n/**\n * A machine-readable `<time>` that ages itself. One form per cell: relative or\n * absolute, never both side by side.\n */\nexport const Time = forwardRef<HTMLTimeElement, TimeProps>(function Time(\n  {\n    value,\n    format = \"auto\",\n    hasTooltip = true,\n    hasTimeZone = true,\n    now,\n    refreshInterval = 30_000,\n    className,\n    tabIndex,\n    title,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    \"aria-describedby\": describedBy,\n    ...rest\n  },\n  ref,\n) {\n  const date = value instanceof Date ? value : new Date(value);\n  const anchorRef = useRef<HTMLTimeElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const tooltipId = useId();\n  const [, setTick] = useState(0);\n\n  useEffect(() => {\n    if (format === \"absolute\" || now) return;\n    const id = window.setInterval(() => setTick((t) => t + 1), refreshInterval);\n    return () => window.clearInterval(id);\n  }, [format, now, refreshInterval]);\n\n  if (Number.isNaN(date.getTime())) return null;\n\n  const reference = now ?? new Date();\n  const label =\n    format === \"absolute\"\n      ? formatAbsoluteDate(date)\n      : formatRelativeTime(date, reference);\n  const stamp = formatAbsoluteTime(date, { hasTimeZone });\n  const isTipped = hasTooltip && label !== stamp;\n\n  return (\n    <>\n      <time\n        ref={(node) => {\n          anchorRef.current = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        dateTime={date.toISOString()}\n        suppressHydrationWarning\n        className={cx(\"ds-time\", !isTipped && \"ds-time--plain\", className)}\n        tabIndex={tabIndex ?? (isTipped ? 0 : undefined)}\n        aria-describedby={[describedBy, isTipped && isOpen && tooltipId].filter(Boolean).join(\" \") || undefined}\n        title={title ?? (isTipped ? undefined : stamp)}\n        onMouseEnter={(event) => {\n          onMouseEnter?.(event);\n          if (isTipped && !event.defaultPrevented) setIsOpen(true);\n        }}\n        onMouseLeave={(event) => {\n          onMouseLeave?.(event);\n          if (isTipped && !event.defaultPrevented) setIsOpen(false);\n        }}\n        onFocus={(event) => {\n          onFocus?.(event);\n          if (isTipped && !event.defaultPrevented) setIsOpen(true);\n        }}\n        onBlur={(event) => {\n          onBlur?.(event);\n          if (isTipped && !event.defaultPrevented) setIsOpen(false);\n        }}\n        onKeyDown={(event) => {\n          onKeyDown?.(event);\n          if (isTipped && !event.defaultPrevented && event.key === \"Escape\") setIsOpen(false);\n        }}\n        {...rest}\n      >\n        {label}\n      </time>\n      {isTipped && (\n        <Popover\n          anchorRef={anchorRef}\n          isOpen={isOpen}\n          id={tooltipId}\n          role=\"tooltip\"\n          className=\"ds-surface-raised ds-time-tooltip\"\n        >\n          {stamp}\n        </Popover>\n      )}\n    </>\n  );\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,35 @@
+import { type HTMLAttributes } from "react";
+/** Day before month, one order everywhere: `12 Jun 2026`. */
+export declare function formatAbsoluteDate(date: Date, options?: {
+    hasYear?: boolean;
+}): string;
+/** The tooltip form: `6 Aug 2026, 11:05`, with the reader's zone appended. */
+export declare function formatAbsoluteTime(date: Date, options?: {
+    hasTimeZone?: boolean;
+}): string;
+/**
+ * Relative up to a week, absolute after. Future dates are always absolute — a
+ * scheduled publish reads `12 Jun`, never `in 3 days`.
+ */
+export declare function formatRelativeTime(date: Date, now?: Date): string;
+export type TimeFormat = "auto" | "relative" | "absolute";
+export interface TimeProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The instant to print — Date, epoch ms, or an ISO string. */
+    value: Date | string | number;
+    /** `auto` ages the value; `absolute` always prints the date. */
+    format?: TimeFormat;
+    /** Show the absolute stamp on hover and focus. */
+    hasTooltip?: boolean;
+    /** Append the reader's time zone to the tooltip. */
+    hasTimeZone?: boolean;
+    /** Pin "now" — useful for tests and stories. */
+    now?: Date;
+    /** Re-render interval in ms while the value is still relative. */
+    refreshInterval?: number;
+}
+/**
+ * A machine-readable `<time>` that ages itself. One form per cell: relative or
+ * absolute, never both side by side.
+ */
+export declare const Time: import("react").ForwardRefExoticComponent<TimeProps & import("react").RefAttributes<HTMLTimeElement>>;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Time/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,aAAa,CAAC;AA8BrB,6DAA6D;AAC7D,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,UAIjF;AAED,8EAA8E;AAC9E,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAO,UAQrF;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,GAAE,IAAiB,UAapE;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC9E,+DAA+D;IAC/D,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9B,gEAAgE;IAChE,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,kEAAkE;IAClE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,uGA8Ff,CAAC"}

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

@@ -0,0 +1,35 @@
+import { type HTMLAttributes } from "react";
+/** Day before month, one order everywhere: `12 Jun 2026`. */
+export declare function formatAbsoluteDate(date: Date, options?: {
+    hasYear?: boolean;
+}): string;
+/** The tooltip form: `6 Aug 2026, 11:05`, with the reader's zone appended. */
+export declare function formatAbsoluteTime(date: Date, options?: {
+    hasTimeZone?: boolean;
+}): string;
+/**
+ * Relative up to a week, absolute after. Future dates are always absolute — a
+ * scheduled publish reads `12 Jun`, never `in 3 days`.
+ */
+export declare function formatRelativeTime(date: Date, now?: Date): string;
+export type TimeFormat = "auto" | "relative" | "absolute";
+export interface TimeProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The instant to print — Date, epoch ms, or an ISO string. */
+    value: Date | string | number;
+    /** `auto` ages the value; `absolute` always prints the date. */
+    format?: TimeFormat;
+    /** Show the absolute stamp on hover and focus. */
+    hasTooltip?: boolean;
+    /** Append the reader's time zone to the tooltip. */
+    hasTimeZone?: boolean;
+    /** Pin "now" — useful for tests and stories. */
+    now?: Date;
+    /** Re-render interval in ms while the value is still relative. */
+    refreshInterval?: number;
+}
+/**
+ * A machine-readable `<time>` that ages itself. One form per cell: relative or
+ * absolute, never both side by side.
+ */
+export declare const Time: import("react").ForwardRefExoticComponent<TimeProps & import("react").RefAttributes<HTMLTimeElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Time/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAEf,OAAO,aAAa,CAAC;AA8BrB,6DAA6D;AAC7D,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAO,UAIjF;AAED,8EAA8E;AAC9E,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,GAAE;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAO,UAQrF;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,IAAI,EAAE,GAAG,GAAE,IAAiB,UAapE;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC9E,+DAA+D;IAC/D,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;IAC9B,gEAAgE;IAChE,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gDAAgD;IAChD,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,kEAAkE;IAClE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,uGA8Ff,CAAC"}