@dowel-ui/react 0.2.0 → 0.4.0

package/dist/components/progress/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":["Progress","ProgressPrimitive"],"sources":["../../../src/components/progress/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Progress as ProgressPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst progressVariants = cva(\"relative w-full overflow-hidden rounded-full bg-muted\", {\n  variants: {\n    size: {\n      sm: \"h-1\",\n      md: \"h-2\",\n      lg: \"h-3\",\n    },\n    tone: {\n      primary: \"[--progress-fill:var(--color-primary)]\",\n      success: \"[--progress-fill:var(--color-success)]\",\n      warning: \"[--progress-fill:var(--color-warning)]\",\n      destructive: \"[--progress-fill:var(--color-destructive)]\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    tone: \"primary\",\n  },\n});\n\nexport interface ProgressProps\n  extends\n    ComponentPropsWithRef<typeof ProgressPrimitive.Root>,\n    VariantProps<typeof progressVariants> {}\n\n/**\n * Shows how far along a task is.\n *\n * Pass `value={null}` for work whose duration is unknown — that is a genuinely\n * different state from zero percent, and it is announced as such rather than as\n * \"no progress\". For a short wait with no measurable progress, a Spinner says\n * the same thing with less furniture.\n */\nexport function Progress({ className, size, tone, value, ...props }: ProgressProps) {\n  const indeterminate = value === null || value === undefined;\n  const percent = indeterminate ? 0 : Math.min(100, Math.max(0, value));\n\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      value={value}\n      className={cn(progressVariants({ size, tone }), className)}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className={cn(\n          \"h-full w-full flex-1 rounded-full bg-[var(--progress-fill)]\",\n          \"transition-transform duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n          // With no known value the bar sweeps instead of filling, so it reads\n          // as \"working\" rather than as a stalled 0%.\n          indeterminate && \"animate-pulse-soft\",\n        )}\n        style={\n          indeterminate ? undefined : { transform: `translateX(-${String(100 - percent)}%)` }\n        }\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { progressVariants };\n"],"mappings":";;;;;;AAQA,MAAM,mBAAmB,IAAI,yDAAyD;CACpF,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,MAAM;GACJ,SAAS;GACT,SAAS;GACT,SAAS;GACT,aAAa;EACf;CACF;CACA,iBAAiB;EACf,MAAM;EACN,MAAM;CACR;AACF,CAAC;;;;;;;;;AAeD,SAAgBA,WAAS,EAAE,WAAW,MAAM,MAAM,OAAO,GAAG,SAAwB;CAClF,MAAM,gBAAgB,UAAU,QAAQ,UAAU,KAAA;CAClD,MAAM,UAAU,gBAAgB,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;CAEpE,OACE,oBAACC,SAAkB,MAAnB;EACE,aAAU;EACH;EACP,WAAW,GAAG,iBAAiB;GAAE;GAAM;EAAK,CAAC,GAAG,SAAS;EACzD,GAAI;EAEJ,UAAA,oBAACA,SAAkB,WAAnB;GACE,aAAU;GACV,WAAW,GACT,+DACA,qFAGA,iBAAiB,oBACnB;GACA,OACE,gBAAgB,KAAA,IAAY,EAAE,WAAW,eAAe,OAAO,MAAM,OAAO,EAAE,IAAI;EAErF,CAAA;CACqB,CAAA;AAE5B"}
+{"version":3,"file":"progress.js","names":["Progress","ProgressPrimitive"],"sources":["../../../src/components/progress/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Progress as ProgressPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst progressVariants = cva(\"relative w-full overflow-hidden rounded-full bg-muted\", {\n  variants: {\n    size: {\n      sm: \"h-1\",\n      md: \"h-2\",\n      lg: \"h-3\",\n    },\n    tone: {\n      primary: \"[--progress-fill:var(--color-primary)]\",\n      success: \"[--progress-fill:var(--color-success)]\",\n      warning: \"[--progress-fill:var(--color-warning)]\",\n      destructive: \"[--progress-fill:var(--color-destructive)]\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    tone: \"primary\",\n  },\n});\n\nexport interface ProgressProps\n  extends\n    ComponentPropsWithRef<typeof ProgressPrimitive.Root>,\n    VariantProps<typeof progressVariants> {}\n\n/**\n * Shows how far along a task is.\n *\n * Pass `value={null}` for work whose duration is unknown — that is a genuinely\n * different state from zero percent, and it is announced as such rather than as\n * \"no progress\". For a short wait with no measurable progress, a Spinner says\n * the same thing with less furniture.\n */\nexport function Progress({ className, size, tone, value, ...props }: ProgressProps) {\n  const indeterminate = value === null || value === undefined;\n  const percent = indeterminate ? 0 : Math.min(100, Math.max(0, value));\n\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      value={value}\n      className={cn(progressVariants({ size, tone }), className)}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        // Only while indeterminate: the sweep is the signal that work is\n        // ongoing, and freezing it reads as a stalled zero percent.\n        data-motion={indeterminate ? \"indicator\" : undefined}\n        className={cn(\n          \"h-full w-full flex-1 rounded-full bg-[var(--progress-fill)]\",\n          \"transition-transform duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n          // With no known value the bar sweeps instead of filling, so it reads\n          // as \"working\" rather than as a stalled 0%.\n          indeterminate && \"animate-pulse-soft\",\n        )}\n        style={\n          indeterminate ? undefined : { transform: `translateX(-${String(100 - percent)}%)` }\n        }\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { progressVariants };\n"],"mappings":";;;;;;AAQA,MAAM,mBAAmB,IAAI,yDAAyD;CACpF,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,MAAM;GACJ,SAAS;GACT,SAAS;GACT,SAAS;GACT,aAAa;EACf;CACF;CACA,iBAAiB;EACf,MAAM;EACN,MAAM;CACR;AACF,CAAC;;;;;;;;;AAeD,SAAgBA,WAAS,EAAE,WAAW,MAAM,MAAM,OAAO,GAAG,SAAwB;CAClF,MAAM,gBAAgB,UAAU,QAAQ,UAAU,KAAA;CAClD,MAAM,UAAU,gBAAgB,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;CAEpE,OACE,oBAACC,SAAkB,MAAnB;EACE,aAAU;EACH;EACP,WAAW,GAAG,iBAAiB;GAAE;GAAM;EAAK,CAAC,GAAG,SAAS;EACzD,GAAI;EAEJ,UAAA,oBAACA,SAAkB,WAAnB;GACE,aAAU;GAGV,eAAa,gBAAgB,cAAc,KAAA;GAC3C,WAAW,GACT,+DACA,qFAGA,iBAAiB,oBACnB;GACA,OACE,gBAAgB,KAAA,IAAY,EAAE,WAAW,eAAe,OAAO,MAAM,OAAO,EAAE,IAAI;EAErF,CAAA;CACqB,CAAA;AAE5B"}

package/dist/components/spinner/spinner.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/spinner/spinner.d.ts
 declare const spinnerVariants: (props?: ({
-  size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+  size?: "sm" | "md" | "xs" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SpinnerProps extends Omit<ComponentPropsWithRef<"svg">, "children">, VariantProps<typeof spinnerVariants> {
   /**

package/dist/components/spinner/spinner.js

@@ -18,6 +18,7 @@ function Spinner({ className, size, label, ...props }) {
 		viewBox: "0 0 24 24",
 		fill: "none",
 		"aria-hidden": "true",
+		"data-motion": "indicator",
 		className: cn(spinnerVariants({ size }), className),
 		...props,
 		children: [/* @__PURE__ */ jsx("circle", {

package/dist/components/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst spinnerVariants = cva(\"animate-spin text-current\", {\n  variants: {\n    size: {\n      xs: \"size-3\",\n      sm: \"size-3.5\",\n      md: \"size-4\",\n      lg: \"size-5\",\n      xl: \"size-6\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface SpinnerProps\n  extends Omit<ComponentPropsWithRef<\"svg\">, \"children\">, VariantProps<typeof spinnerVariants> {\n  /**\n   * Announced to assistive technology while the spinner is visible.\n   *\n   * Omit it when the spinner sits inside a control that already communicates\n   * its busy state (a loading Button, for example) — announcing twice is worse\n   * than not announcing at all.\n   */\n  label?: string;\n}\n\n/** Indeterminate loading indicator. */\nexport function Spinner({ className, size, label, ...props }: SpinnerProps) {\n  return (\n    <>\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className={cn(spinnerVariants({ size }), className)}\n        {...props}\n      >\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"9.5\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          opacity=\"0.22\"\n        />\n        <path\n          d=\"M12 2.5a9.5 9.5 0 0 1 9.5 9.5\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n      {label ? (\n        <span role=\"status\" className=\"sr-only\">\n          {label}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport { spinnerVariants };\n"],"mappings":";;;;AAKA,MAAM,kBAAkB,IAAI,6BAA6B;CACvD,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAeD,SAAgB,QAAQ,EAAE,WAAW,MAAM,OAAO,GAAG,SAAuB;CAC1E,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,eAAY;EACZ,WAAW,GAAG,gBAAgB,EAAE,KAAK,CAAC,GAAG,SAAS;EAClD,GAAI;EALN,UAAA,CAOE,oBAAC,UAAD;GACE,IAAG;GACH,IAAG;GACH,GAAE;GACF,QAAO;GACP,aAAY;GACZ,SAAQ;EACT,CAAA,GACD,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;EACf,CAAA,CACE;CACJ,CAAA,GAAA,QACC,oBAAC,QAAD;EAAM,MAAK;EAAS,WAAU;EAC3B,UAAA;CACG,CAAA,IACJ,IACJ,EAAA,CAAA;AAEN"}
+{"version":3,"file":"spinner.js","names":[],"sources":["../../../src/components/spinner/spinner.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst spinnerVariants = cva(\"animate-spin text-current\", {\n  variants: {\n    size: {\n      xs: \"size-3\",\n      sm: \"size-3.5\",\n      md: \"size-4\",\n      lg: \"size-5\",\n      xl: \"size-6\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface SpinnerProps\n  extends Omit<ComponentPropsWithRef<\"svg\">, \"children\">, VariantProps<typeof spinnerVariants> {\n  /**\n   * Announced to assistive technology while the spinner is visible.\n   *\n   * Omit it when the spinner sits inside a control that already communicates\n   * its busy state (a loading Button, for example) — announcing twice is worse\n   * than not announcing at all.\n   */\n  label?: string;\n}\n\n/** Indeterminate loading indicator. */\nexport function Spinner({ className, size, label, ...props }: SpinnerProps) {\n  return (\n    <>\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        // Exempt from the reduced-motion blanket: this is not decoration. A\n        // spinner that stops turning reports that the application has hung,\n        // which is a worse experience than the motion it was avoiding. It is\n        // slowed instead — see --motion-scale-indicator.\n        data-motion=\"indicator\"\n        className={cn(spinnerVariants({ size }), className)}\n        {...props}\n      >\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"9.5\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          opacity=\"0.22\"\n        />\n        <path\n          d=\"M12 2.5a9.5 9.5 0 0 1 9.5 9.5\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n      {label ? (\n        <span role=\"status\" className=\"sr-only\">\n          {label}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport { spinnerVariants };\n"],"mappings":";;;;AAKA,MAAM,kBAAkB,IAAI,6BAA6B;CACvD,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAeD,SAAgB,QAAQ,EAAE,WAAW,MAAM,OAAO,GAAG,SAAuB;CAC1E,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,eAAY;EAKZ,eAAY;EACZ,WAAW,GAAG,gBAAgB,EAAE,KAAK,CAAC,GAAG,SAAS;EAClD,GAAI;EAVN,UAAA,CAYE,oBAAC,UAAD;GACE,IAAG;GACH,IAAG;GACH,GAAE;GACF,QAAO;GACP,aAAY;GACZ,SAAQ;EACT,CAAA,GACD,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;EACf,CAAA,CACE;CACJ,CAAA,GAAA,QACC,oBAAC,QAAD;EAAM,MAAK;EAAS,WAAU;EAC3B,UAAA;CACG,CAAA,IACJ,IACJ,EAAA,CAAA;AAEN"}

package/dist/components/tags-input/index.d.ts

@@ -0,0 +1,2 @@
+import { TagValidator, TagsInput, TagsInputProps } from "./tags-input.js";
+export { type TagValidator, TagsInput, type TagsInputProps };

package/dist/components/tags-input/index.js

@@ -0,0 +1,2 @@
+import { TagsInput } from "./tags-input.js";
+export { TagsInput };

package/dist/components/tags-input/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/tags-input/meta.ts
+const meta = defineMeta({
+	name: "tags-input",
+	title: "Tags Input",
+	description: "A list of short values, where invalid entries stay visible instead of vanishing.",
+	category: "form",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: [],
+	files: ["tags-input.tsx"],
+	a11y: "No WAI-ARIA pattern covers a token field, and the near misses misdescribe it — these are committed values, not options being chosen, so calling the container a listbox would promise navigation that does not exist. It is a labelled group holding a list, with a remove button per token carrying the tag in its accessible name. An invalid token's reason is inside the token, so it is announced with it rather than as a detached error. Additions, removals and refusals all reach a polite live region, because a refusal that looks like nothing happening is the failure this component exists to prevent. Remove buttons sit in the natural tab order rather than behind a roving tabindex: it costs a tab stop per token, and buys a pattern every assistive technology already understands."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/tags-input/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/tags-input/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"tags-input\",\n  title: \"Tags Input\",\n  description:\n    \"A list of short values, where invalid entries stay visible instead of vanishing.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"tags-input.tsx\"],\n  a11y:\n    \"No WAI-ARIA pattern covers a token field, and the near misses misdescribe it — these are \" +\n    \"committed values, not options being chosen, so calling the container a listbox would promise \" +\n    \"navigation that does not exist. It is a labelled group holding a list, with a remove button \" +\n    \"per token carrying the tag in its accessible name. An invalid token's reason is inside the \" +\n    \"token, so it is announced with it rather than as a detached error. Additions, removals and \" +\n    \"refusals all reach a polite live region, because a refusal that looks like nothing happening \" +\n    \"is the failure this component exists to prevent. Remove buttons sit in the natural tab order \" +\n    \"rather than behind a roving tabindex: it costs a tab stop per token, and buys a pattern every \" +\n    \"assistive technology already understands.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,gBAAgB;CACxB,MACE;AASJ,CAAC"}

package/dist/components/tags-input/tags-input.d.ts

@@ -0,0 +1,47 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/tags-input/tags-input.d.ts
+/**
+ * A field whose value is a list of short strings: invited emails, allowed
+ * domains, labels, stop sequences.
+ *
+ * The behaviour that makes this worth shipping is what happens to input that
+ * fails validation. Every implementation surveyed either refuses to create the
+ * token, or creates it and silently throws it away — and both leave the reader
+ * staring at a field that did not do what they asked, with nothing to correct.
+ * Here an invalid entry becomes a token like any other, marked invalid and
+ * carrying its reason, so it can be seen, read out, and fixed by removing it.
+ * `value` holds every token including the invalid ones; the consumer runs the
+ * same `validate` to decide whether the field is submittable.
+ *
+ * Deliberately no suggestion list. A token field with an anchored listbox is a
+ * multi-select combobox, and this library already has 544 lines of hand-rolled
+ * combobox ARIA. A second copy of that would be the expensive kind of
+ * duplication — the kind that drifts. When multi-select is wanted, it belongs in
+ * Combobox.
+ */
+/** Returns `true` for a valid tag, or a reason it is not. */
+type TagValidator = (tag: string, existing: string[]) => true | string;
+interface TagsInputProps extends Omit<ComponentPropsWithRef<"div">, "onChange" | "children"> {
+  value: string[];
+  onValueChange: (tags: string[]) => void;
+  /** Names the field. Required — an unlabelled list of tokens is unreadable. */
+  label: string;
+  /** Characters that commit the token being typed, besides Enter. */
+  delimiters?: string[];
+  /**
+   * Decides whether a tag is acceptable. An invalid tag is still added, marked,
+   * and given its reason, rather than being refused or dropped.
+   */
+  validate?: TagValidator;
+  /** Rejects a tag already present. Rejections are announced, never silent. */
+  allowDuplicates?: boolean;
+  /** Refuses further tags once reached, and says so. */
+  max?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  inputProps?: Omit<ComponentPropsWithRef<"input">, "value" | "onChange" | "disabled">;
+}
+declare function TagsInput({ className, value, onValueChange, label, delimiters, validate, allowDuplicates, max, placeholder, disabled, inputProps, ...props }: TagsInputProps): import("react").JSX.Element;
+//#endregion
+export { TagValidator, TagsInput, TagsInputProps };
+//# sourceMappingURL=tags-input.d.ts.map

package/dist/components/tags-input/tags-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.d.ts","names":[],"sources":["../../../src/components/tags-input/tags-input.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;KAmCY,gBAAgB,aAAa;UAExB,uBAAuB,KACtC;EAGA;EACA,gBAAgB;;EAEhB;;EAEA;;;;;EAKA,WAAW;;EAEX;;EAEA;EACA;EACA;EACA,aAAa,KAAK;;iBAaJ,YACd,WACA,OACA,eACA,OACA,YACA,UACA,iBACA,KACA,aACA,UACA,eACG,SACF,iCAAc,IAAA"}

package/dist/components/tags-input/tags-input.js

@@ -0,0 +1,182 @@
+"use client";
+import { disabledStyles, focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+//#region src/components/tags-input/tags-input.tsx
+/** Splits pasted or typed text on any delimiter, dropping empty fragments. */
+function splitOn(text, delimiters) {
+	if (delimiters.length === 0) return [text];
+	const pattern = new RegExp(`[${delimiters.map((d) => `\\${d}`).join("")}]`);
+	return text.split(pattern).map((part) => part.trim()).filter((part) => part.length > 0);
+}
+function TagsInput({ className, value, onValueChange, label, delimiters = [",", ";"], validate, allowDuplicates = false, max, placeholder, disabled = false, inputProps, ...props }) {
+	const [draft, setDraft] = useState("");
+	const [announcement, setAnnouncement] = useState("");
+	const inputRef = useRef(null);
+	const labelId = useId();
+	const inputId = useId();
+	const hintId = useId();
+	const atLimit = max !== void 0 && value.length >= max;
+	function reasonFor(tag) {
+		if (!validate) return null;
+		const result = validate(tag, value);
+		return result === true ? null : result;
+	}
+	/** Adds tags, reporting anything refused rather than dropping it in silence. */
+	function commit(candidates) {
+		const accepted = [];
+		const refused = [];
+		for (const candidate of candidates.flatMap((part) => splitOn(part, delimiters))) {
+			const tag = candidate.trim();
+			if (tag.length === 0) continue;
+			if (!allowDuplicates && [...value, ...accepted].includes(tag)) {
+				refused.push(`${tag} is already added`);
+				continue;
+			}
+			if (max !== void 0 && value.length + accepted.length >= max) {
+				refused.push(`${tag} not added, limit of ${String(max)} reached`);
+				continue;
+			}
+			accepted.push(tag);
+		}
+		if (accepted.length > 0) onValueChange([...value, ...accepted]);
+		const parts = [];
+		if (accepted.length > 0) {
+			const invalid = accepted.filter((tag) => reasonFor(tag) !== null);
+			parts.push(`Added ${accepted.join(", ")}`);
+			if (invalid.length > 0) parts.push(`${String(invalid.length)} need attention`);
+		}
+		parts.push(...refused);
+		setAnnouncement(parts.join(". "));
+	}
+	function removeAt(index) {
+		const removed = value[index];
+		onValueChange(value.filter((_, position) => position !== index));
+		setAnnouncement(removed === void 0 ? "" : `Removed ${removed}`);
+		inputRef.current?.focus();
+	}
+	function handleKeyDown(event) {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			if (draft.trim().length > 0) {
+				commit([draft]);
+				setDraft("");
+			}
+			return;
+		}
+		if (delimiters.includes(event.key)) {
+			event.preventDefault();
+			if (draft.trim().length > 0) {
+				commit([draft]);
+				setDraft("");
+			}
+			return;
+		}
+		if (event.key === "Backspace" && draft.length === 0 && value.length > 0) {
+			event.preventDefault();
+			removeAt(value.length - 1);
+		}
+	}
+	function handlePaste(event) {
+		const parts = splitOn(event.clipboardData.getData("text"), delimiters);
+		if (parts.length <= 1) return;
+		event.preventDefault();
+		commit(parts);
+		setDraft("");
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tags-input",
+		className: cn("flex flex-col gap-1.5", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				id: labelId,
+				htmlFor: inputId,
+				className: "w-fit text-sm font-medium",
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-labelledby": labelId,
+				"data-disabled": disabled || void 0,
+				className: cn("flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-2 py-1.5", "focus-within:ring-2 focus-within:ring-ring/55", disabled && "pointer-events-none opacity-55"),
+				children: [value.length > 0 ? /* @__PURE__ */ jsx("ul", {
+					className: "contents",
+					children: value.map((tag, index) => {
+						const reason = reasonFor(tag);
+						return /* @__PURE__ */ jsxs("li", {
+							"data-slot": "tags-input-tag",
+							"data-invalid": reason !== null || void 0,
+							className: cn("inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium", reason === null ? "border-transparent bg-secondary text-secondary-foreground" : "border-destructive/40 bg-destructive/10 text-destructive"),
+							children: [
+								tag,
+								reason === null ? null : /* @__PURE__ */ jsxs("span", {
+									className: "sr-only",
+									children: [", invalid: ", reason]
+								}),
+								/* @__PURE__ */ jsx("button", {
+									type: "button",
+									"data-slot": "tags-input-remove",
+									disabled,
+									"aria-label": `Remove ${tag}`,
+									onClick: () => {
+										removeAt(index);
+									},
+									className: cn("-mr-0.5 grid size-4 place-items-center rounded-full", "transition-colors hover:bg-foreground/10", focusRing, disabledStyles),
+									children: /* @__PURE__ */ jsx("svg", {
+										viewBox: "0 0 24 24",
+										"aria-hidden": "true",
+										className: "size-2.5",
+										children: /* @__PURE__ */ jsx("path", {
+											d: "M6 6l12 12M18 6L6 18",
+											stroke: "currentColor",
+											strokeWidth: "3",
+											strokeLinecap: "round"
+										})
+									})
+								})
+							]
+						}, `${tag}-${String(index)}`);
+					})
+				}) : null, /* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					type: "text",
+					id: inputId,
+					"data-slot": "tags-input-field",
+					value: draft,
+					disabled,
+					placeholder: value.length === 0 ? placeholder : void 0,
+					"aria-describedby": hintId,
+					onChange: (event) => {
+						setDraft(event.target.value);
+					},
+					onKeyDown: handleKeyDown,
+					onPaste: handlePaste,
+					onBlur: () => {
+						if (draft.trim().length > 0) {
+							commit([draft]);
+							setDraft("");
+						}
+					},
+					className: cn("min-w-24 flex-1 self-stretch bg-transparent text-sm outline-none", "placeholder:text-muted-foreground"),
+					...inputProps
+				})]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				id: hintId,
+				className: "text-xs text-muted-foreground",
+				children: atLimit ? `Limit of ${String(max ?? 0)} reached` : `Press Enter${delimiters.length > 0 ? ` or ${delimiters.join(" ")}` : ""} to add`
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-live": "polite",
+				className: "sr-only",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+export { TagsInput };
+
+//# sourceMappingURL=tags-input.js.map

package/dist/components/tags-input/tags-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.js","names":[],"sources":["../../../src/components/tags-input/tags-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useRef,\n  useState,\n  type ClipboardEvent,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A field whose value is a list of short strings: invited emails, allowed\n * domains, labels, stop sequences.\n *\n * The behaviour that makes this worth shipping is what happens to input that\n * fails validation. Every implementation surveyed either refuses to create the\n * token, or creates it and silently throws it away — and both leave the reader\n * staring at a field that did not do what they asked, with nothing to correct.\n * Here an invalid entry becomes a token like any other, marked invalid and\n * carrying its reason, so it can be seen, read out, and fixed by removing it.\n * `value` holds every token including the invalid ones; the consumer runs the\n * same `validate` to decide whether the field is submittable.\n *\n * Deliberately no suggestion list. A token field with an anchored listbox is a\n * multi-select combobox, and this library already has 544 lines of hand-rolled\n * combobox ARIA. A second copy of that would be the expensive kind of\n * duplication — the kind that drifts. When multi-select is wanted, it belongs in\n * Combobox.\n */\n\n/** Returns `true` for a valid tag, or a reason it is not. */\nexport type TagValidator = (tag: string, existing: string[]) => true | string;\n\nexport interface TagsInputProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onChange\" | \"children\"\n> {\n  value: string[];\n  onValueChange: (tags: string[]) => void;\n  /** Names the field. Required — an unlabelled list of tokens is unreadable. */\n  label: string;\n  /** Characters that commit the token being typed, besides Enter. */\n  delimiters?: string[];\n  /**\n   * Decides whether a tag is acceptable. An invalid tag is still added, marked,\n   * and given its reason, rather than being refused or dropped.\n   */\n  validate?: TagValidator;\n  /** Rejects a tag already present. Rejections are announced, never silent. */\n  allowDuplicates?: boolean;\n  /** Refuses further tags once reached, and says so. */\n  max?: number;\n  placeholder?: string;\n  disabled?: boolean;\n  inputProps?: Omit<ComponentPropsWithRef<\"input\">, \"value\" | \"onChange\" | \"disabled\">;\n}\n\n/** Splits pasted or typed text on any delimiter, dropping empty fragments. */\nfunction splitOn(text: string, delimiters: string[]): string[] {\n  if (delimiters.length === 0) return [text];\n  const pattern = new RegExp(`[${delimiters.map((d) => `\\\\${d}`).join(\"\")}]`);\n  return text\n    .split(pattern)\n    .map((part) => part.trim())\n    .filter((part) => part.length > 0);\n}\n\nexport function TagsInput({\n  className,\n  value,\n  onValueChange,\n  label,\n  delimiters = [\",\", \";\"],\n  validate,\n  allowDuplicates = false,\n  max,\n  placeholder,\n  disabled = false,\n  inputProps,\n  ...props\n}: TagsInputProps) {\n  const [draft, setDraft] = useState(\"\");\n  const [announcement, setAnnouncement] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const labelId = useId();\n  const inputId = useId();\n  const hintId = useId();\n\n  const atLimit = max !== undefined && value.length >= max;\n\n  function reasonFor(tag: string): string | null {\n    if (!validate) return null;\n    const result = validate(tag, value);\n    return result === true ? null : result;\n  }\n\n  /** Adds tags, reporting anything refused rather than dropping it in silence. */\n  function commit(candidates: string[]) {\n    const accepted: string[] = [];\n    const refused: string[] = [];\n\n    // Split defensively rather than trusting the caller. A draft can arrive\n    // holding a delimiter from autofill, an IME commit, or a programmatic set,\n    // and a token with a comma inside it is never what was meant.\n    for (const candidate of candidates.flatMap((part) => splitOn(part, delimiters))) {\n      const tag = candidate.trim();\n      if (tag.length === 0) continue;\n\n      if (!allowDuplicates && [...value, ...accepted].includes(tag)) {\n        refused.push(`${tag} is already added`);\n        continue;\n      }\n      if (max !== undefined && value.length + accepted.length >= max) {\n        refused.push(`${tag} not added, limit of ${String(max)} reached`);\n        continue;\n      }\n      // An invalid tag is still added. It is the reader's text and they need to\n      // see it to fix it; refusing silently is how these fields lose input.\n      accepted.push(tag);\n    }\n\n    if (accepted.length > 0) onValueChange([...value, ...accepted]);\n\n    const parts: string[] = [];\n    if (accepted.length > 0) {\n      const invalid = accepted.filter((tag) => reasonFor(tag) !== null);\n      parts.push(`Added ${accepted.join(\", \")}`);\n      if (invalid.length > 0) parts.push(`${String(invalid.length)} need attention`);\n    }\n    parts.push(...refused);\n    setAnnouncement(parts.join(\". \"));\n  }\n\n  function removeAt(index: number) {\n    const removed = value[index];\n    onValueChange(value.filter((_, position) => position !== index));\n    setAnnouncement(removed === undefined ? \"\" : `Removed ${removed}`);\n    inputRef.current?.focus();\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    if (event.key === \"Enter\") {\n      // Never let a token commit submit the form as well.\n      event.preventDefault();\n      if (draft.trim().length > 0) {\n        commit([draft]);\n        setDraft(\"\");\n      }\n      return;\n    }\n\n    if (delimiters.includes(event.key)) {\n      event.preventDefault();\n      if (draft.trim().length > 0) {\n        commit([draft]);\n        setDraft(\"\");\n      }\n      return;\n    }\n\n    // Backspace on an empty field removes the last token — the expected\n    // shortcut, and the only way to correct without reaching for the mouse.\n    if (event.key === \"Backspace\" && draft.length === 0 && value.length > 0) {\n      event.preventDefault();\n      removeAt(value.length - 1);\n    }\n  }\n\n  function handlePaste(event: ClipboardEvent<HTMLInputElement>) {\n    const text = event.clipboardData.getData(\"text\");\n    const parts = splitOn(text, delimiters);\n    // Only intercept a paste that actually contains several tags; a single\n    // value should behave like an ordinary paste and stay editable.\n    if (parts.length <= 1) return;\n\n    event.preventDefault();\n    commit(parts);\n    setDraft(\"\");\n  }\n\n  return (\n    <div data-slot=\"tags-input\" className={cn(\"flex flex-col gap-1.5\", className)} {...props}>\n      <label id={labelId} htmlFor={inputId} className=\"w-fit text-sm font-medium\">\n        {label}\n      </label>\n\n      {/* A group rather than a listbox: these are committed values, not options\n          being chosen from, and calling it a listbox would promise navigation\n          semantics that do not exist here. */}\n      <div\n        role=\"group\"\n        aria-labelledby={labelId}\n        data-disabled={disabled || undefined}\n        className={cn(\n          \"flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-2 py-1.5\",\n          \"focus-within:ring-2 focus-within:ring-ring/55\",\n          disabled && \"pointer-events-none opacity-55\",\n        )}\n      >\n        {value.length > 0 ? (\n          <ul className=\"contents\">\n            {value.map((tag, index) => {\n              const reason = reasonFor(tag);\n              return (\n                <li\n                  key={`${tag}-${String(index)}`}\n                  data-slot=\"tags-input-tag\"\n                  data-invalid={reason !== null || undefined}\n                  className={cn(\n                    \"inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium\",\n                    reason === null\n                      ? \"border-transparent bg-secondary text-secondary-foreground\"\n                      : \"border-destructive/40 bg-destructive/10 text-destructive\",\n                  )}\n                >\n                  {tag}\n                  {/* The reason travels with the token, so it is announced when\n                      the token is, rather than as a detached error elsewhere. */}\n                  {reason === null ? null : (\n                    <span className=\"sr-only\">, invalid: {reason}</span>\n                  )}\n                  <button\n                    type=\"button\"\n                    data-slot=\"tags-input-remove\"\n                    disabled={disabled}\n                    aria-label={`Remove ${tag}`}\n                    onClick={() => {\n                      removeAt(index);\n                    }}\n                    className={cn(\n                      \"-mr-0.5 grid size-4 place-items-center rounded-full\",\n                      \"transition-colors hover:bg-foreground/10\",\n                      focusRing,\n                      disabledStyles,\n                    )}\n                  >\n                    <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" className=\"size-2.5\">\n                      <path\n                        d=\"M6 6l12 12M18 6L6 18\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"3\"\n                        strokeLinecap=\"round\"\n                      />\n                    </svg>\n                  </button>\n                </li>\n              );\n            })}\n          </ul>\n        ) : null}\n\n        <input\n          ref={inputRef}\n          type=\"text\"\n          id={inputId}\n          data-slot=\"tags-input-field\"\n          value={draft}\n          disabled={disabled}\n          placeholder={value.length === 0 ? placeholder : undefined}\n          aria-describedby={hintId}\n          onChange={(event) => {\n            setDraft(event.target.value);\n          }}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\n          onBlur={() => {\n            // Committing on blur stops a typed-but-uncommitted value being lost\n            // when the reader tabs away thinking they are done.\n            if (draft.trim().length > 0) {\n              commit([draft]);\n              setDraft(\"\");\n            }\n          }}\n          className={cn(\n            \"min-w-24 flex-1 self-stretch bg-transparent text-sm outline-none\",\n            \"placeholder:text-muted-foreground\",\n          )}\n          {...inputProps}\n        />\n      </div>\n\n      <span id={hintId} className=\"text-xs text-muted-foreground\">\n        {atLimit\n          ? `Limit of ${String(max ?? 0)} reached`\n          : `Press Enter${delimiters.length > 0 ? ` or ${delimiters.join(\" \")}` : \"\"} to add`}\n      </span>\n\n      {/* Additions, removals and refusals all land here. A refusal that is only\n          visible as \"nothing happened\" is the failure this component exists to\n          avoid. */}\n      <span aria-live=\"polite\" className=\"sr-only\">\n        {announcement}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/time-range-picker/index.d.ts

@@ -0,0 +1,3 @@
+import { DEFAULT_PRESETS, ResolveOptions, ResolvedRange, TimeExpressionError, TimeRangePreset, TimeUnit, absoluteExpression, describeTimeRange, formatResolvedRange, isValidTimeRange, resolveExpression, resolveTimeRange } from "./time-expression.js";
+import { TimeRange, TimeRangeCalendar, TimeRangeContent, TimeRangeContentProps, TimeRangeExpression, TimeRangePresets, TimeRangeProps, TimeRangeTrigger, TimeRangeTriggerProps } from "./time-range-picker.js";
+export { DEFAULT_PRESETS, type ResolveOptions, type ResolvedRange, TimeExpressionError, TimeRange, TimeRangeCalendar, TimeRangeContent, type TimeRangeContentProps, TimeRangeExpression, type TimeRangePreset, TimeRangePresets, type TimeRangeProps, TimeRangeTrigger, type TimeRangeTriggerProps, type TimeUnit, absoluteExpression, describeTimeRange, formatResolvedRange, isValidTimeRange, resolveExpression, resolveTimeRange };

package/dist/components/time-range-picker/index.js

@@ -0,0 +1,3 @@
+import { DEFAULT_PRESETS, TimeExpressionError, absoluteExpression, describeTimeRange, formatResolvedRange, isValidTimeRange, resolveExpression, resolveTimeRange } from "./time-expression.js";
+import { TimeRange, TimeRangeCalendar, TimeRangeContent, TimeRangeExpression, TimeRangePresets, TimeRangeTrigger } from "./time-range-picker.js";
+export { DEFAULT_PRESETS, TimeExpressionError, TimeRange, TimeRangeCalendar, TimeRangeContent, TimeRangeExpression, TimeRangePresets, TimeRangeTrigger, absoluteExpression, describeTimeRange, formatResolvedRange, isValidTimeRange, resolveExpression, resolveTimeRange };

package/dist/components/time-range-picker/meta.js

@@ -0,0 +1,22 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/time-range-picker/meta.ts
+const meta = defineMeta({
+	name: "time-range-picker",
+	title: "Time Range Picker",
+	description: "A time range whose value is an expression, so it stays relative across a reload.",
+	category: "form",
+	status: "stable",
+	dependencies: ["react-day-picker"],
+	registryDependencies: [
+		"button",
+		"calendar",
+		"input",
+		"popover"
+	],
+	files: ["time-expression.ts", "time-range-picker.tsx"],
+	a11y: "The trigger is named by the range it holds — \"Last 6 hours\" — and the window that resolves to is read after it, so the relative choice is not replaced by two timestamps. The popover carries role=\"dialog\" and is named. Presets are buttons rather than radios because choosing one both selects and dismisses, with aria-pressed carrying which matches the current expression. The expression field reports why an unparseable entry is invalid through one aria-describedby element that the preview and the error share, so a reader hears the error replace the preview rather than both at once; an invalid expression is never applied, because a chart silently re-scoping itself is worse than one that refuses."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/time-range-picker/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/time-range-picker/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"time-range-picker\",\n  title: \"Time Range Picker\",\n  description:\n    \"A time range whose value is an expression, so it stays relative across a reload.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"react-day-picker\"],\n  registryDependencies: [\"button\", \"calendar\", \"input\", \"popover\"],\n  files: [\"time-expression.ts\", \"time-range-picker.tsx\"],\n  a11y:\n    'The trigger is named by the range it holds — \"Last 6 hours\" — and the window that ' +\n    \"resolves to is read after it, so the relative choice is not replaced by two timestamps. \" +\n    'The popover carries role=\"dialog\" and is named. Presets are buttons rather than radios ' +\n    \"because choosing one both selects and dismisses, with aria-pressed carrying which matches \" +\n    \"the current expression. The expression field reports why an unparseable entry is invalid \" +\n    \"through one aria-describedby element that the preview and the error share, so a reader \" +\n    \"hears the error replace the preview rather than both at once; an invalid expression is \" +\n    \"never applied, because a chart silently re-scoping itself is worse than one that refuses.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,kBAAkB;CACjC,sBAAsB;EAAC;EAAU;EAAY;EAAS;CAAS;CAC/D,OAAO,CAAC,sBAAsB,uBAAuB;CACrD,MACE;AAQJ,CAAC"}

package/dist/components/time-range-picker/time-expression.d.ts

@@ -0,0 +1,88 @@
+//#region src/components/time-range-picker/time-expression.d.ts
+/**
+ * Time ranges as expressions, not as two frozen timestamps.
+ *
+ * `now-6h` is still the last six hours tomorrow; a resolved pair is six hours
+ * of last Tuesday forever. Storing the expression is what lets a dashboard URL
+ * survive being bookmarked and reloaded.
+ *
+ * The grammar is a deliberate subset of the one Grafana, Datadog and Kibana
+ * converged on, so the strings are already familiar:
+ *
+ *   range  := expr ".." expr
+ *   expr   := "now" offset* snap? | ISO-8601
+ *   offset := ("-" | "+") digits unit
+ *   snap   := "/" unit
+ *   unit   := s | m | h | d | w | M | y
+ *
+ *   now-6h..now          the last six hours
+ *   now-6h/h..now        the last six hours, starting on the hour
+ *   now/d..now/d         today, all of it
+ *   now-1d/d..now-1d/d   yesterday
+ *   2026-01-01..now      since a fixed instant
+ *
+ * Everything here is pure and takes `now` as an argument: reading the clock
+ * during render would disagree between the server and the browser.
+ */
+type TimeUnit = "s" | "m" | "h" | "d" | "w" | "M" | "y";
+interface ResolveOptions {
+  /** The instant `now` refers to. Required, so nothing here reads the clock. */
+  now: Date;
+  /**
+   * IANA zone the snapping happens in — "start of day" is a different instant
+   * in Auckland than in Denver. Defaults to the runtime zone.
+   */
+  timeZone?: string;
+}
+interface ResolvedRange {
+  from: Date;
+  to: Date;
+}
+/** Why an expression could not be resolved. Shown to the user verbatim. */
+declare class TimeExpressionError extends Error {
+  /** The part of the input at fault, for pointing at it. */
+  readonly input: string;
+  constructor(message: string,
+  /** The part of the input at fault, for pointing at it. */
+  input: string);
+}
+/** Resolves a single side of a range. Exported for the input's live feedback. */
+declare function resolveExpression(expression: string, edge: "start" | "end", options: ResolveOptions): Date;
+/**
+ * Turns a range expression into the two instants a query needs.
+ *
+ * Throws `TimeExpressionError` rather than returning a fallback range: a chart
+ * silently showing the wrong window is worse than one that says it cannot.
+ */
+declare function resolveTimeRange(expression: string, options: ResolveOptions): ResolvedRange;
+/** Whether an expression resolves, without the caller writing a try/catch. */
+declare function isValidTimeRange(expression: string, options: ResolveOptions): boolean;
+interface TimeRangePreset {
+  expression: string;
+  label: string;
+  /** Groups presets under a heading in the picker. */
+  group: string;
+}
+/** Relative windows first, for debugging; calendar periods after, for reporting. */
+declare const DEFAULT_PRESETS: TimeRangePreset[];
+/**
+ * A sentence for the trigger.
+ *
+ * An unnamed relative range is described in its own terms — "Last 90 minutes" —
+ * because showing it as two timestamps throws away what the user chose. Only an
+ * absolute range, which has no relative meaning left, is shown as dates.
+ */
+declare function describeTimeRange(expression: string, options: ResolveOptions & {
+  locale?: string;
+  presets?: TimeRangePreset[];
+}): string;
+/** The resolved window, spelled out. Pairs with the relative label, not replaces it. */
+declare function formatResolvedRange(range: ResolvedRange, options?: {
+  locale?: string;
+  timeZone?: string;
+}): string;
+/** Builds the expression for an absolute range chosen on a calendar. */
+declare function absoluteExpression(from: Date, to: Date): string;
+//#endregion
+export { DEFAULT_PRESETS, ResolveOptions, ResolvedRange, TimeExpressionError, TimeRangePreset, TimeUnit, absoluteExpression, describeTimeRange, formatResolvedRange, isValidTimeRange, resolveExpression, resolveTimeRange };
+//# sourceMappingURL=time-expression.d.ts.map

package/dist/components/time-range-picker/time-expression.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-expression.d.ts","names":[],"sources":["../../../src/components/time-range-picker/time-expression.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;KA0BY;UAEK;;EAEf,KAAK;;;;;EAKL;;UAGe;EACf,MAAM;EACN,IAAI;;;cAIO,4BAA4B;;WAI5B;EAFT,YAAA,iBAES;;EAAA;;;iBAwOG,kBACd,oBACA,uBACA,SAAS,iBACR;;;;;;;iBAwFa,iBAAiB,oBAAoB,SAAS,iBAAiB;;iBAoB/D,iBAAiB,oBAAoB,SAAS;UAa7C;EACf;EACA;;EAEA;;;cAIW,iBAAiB;;;;;;;;iBAyBd,kBACd,oBACA,SAAS;EAAmB;EAAiB,UAAU;;;iBA2BzC,oBACd,OAAO,eACP;EAAW;EAAiB;;;iBAWd,mBAAmB,MAAM,MAAM,IAAI"}