@sixthshift/design-system 0.2.1 → 0.4.0

package/dist/components/TagChip/TagChip.d.ts

@@ -1,21 +1,24 @@
+import * as React from "react";
+export type TagChipProps = {
+    tag: string;
+    /** When set, renders an × affordance. Omit for read-only / navigable chips. */
+    onRemove?: () => void;
+    /** `sm` (default) for rows; `md` for detail pages. */
+    size?: "sm" | "md";
+    className?: string;
+};
 /**
  * One tag, rendered prettily. A `namespace:value` tag (`project:website`)
  * shows the namespace muted; a plain tag (`urgent`) renders as-is.
  *
  * Pure presentation. Entity-reference tags (`person:per_…`) are NOT rendered
- * here — the web `TagRef` intercepts those and resolves them to a name chip
- * (identity-rendering.md); TagChip never shows a raw id.
+ * here — the consuming app is expected to intercept those and resolve them to
+ * a name chip; TagChip never shows a raw id.
  *
- * Two disjoint modes: navigable (no `onRemove`; the caller wraps it in a link)
- * or removable (`onRemove` renders an × — used by `TagInput` and edit surfaces).
+ * Two disjoint modes, chosen by whether `onRemove` is passed: navigable (no
+ * `onRemove`; the caller wraps it in a link) or removable (`onRemove` renders
+ * an × — used by `TagInput` and edit surfaces). Built on `Badge`
+ * (`variant="outline" intent="muted"`).
  */
-export type TagChipProps = {
-    tag: string;
-    /** When set, renders an × affordance. Omit for read-only / navigable chips. */
-    onRemove?: () => void;
-    /** `sm` (default) for rows; `default` for detail pages. */
-    size?: "sm" | "default";
-    className?: string;
-};
-export declare const TagChip: ({ tag, onRemove, size, className }: TagChipProps) => import("react").JSX.Element;
+export declare const TagChip: React.ForwardRefExoticComponent<TagChipProps & React.RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=TagChip.d.ts.map

package/dist/components/TagChip/TagChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagChip.d.ts","sourceRoot":"","sources":["../../../src/components/TagChip/TagChip.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,OAAO,uCAA+C,YAAY,gCAqB9E,CAAC"}
+{"version":3,"file":"TagChip.d.ts","sourceRoot":"","sources":["../../../src/components/TagChip/TagChip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,YAAY,GAAG;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,sDAAsD;IACtD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,OAAO,sFA0BlB,CAAC"}

package/dist/components/TagChip/TagChip.js

@@ -2,10 +2,25 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Badge } from "@sixthshift/design-system/badge";
 import { cn } from "@sixthshift/design-system/utils";
 import { X } from "lucide-react";
-export const TagChip = ({ tag, onRemove, size = "sm", className }) => {
+import * as React from "react";
+/**
+ * One tag, rendered prettily. A `namespace:value` tag (`project:website`)
+ * shows the namespace muted; a plain tag (`urgent`) renders as-is.
+ *
+ * Pure presentation. Entity-reference tags (`person:per_…`) are NOT rendered
+ * here — the consuming app is expected to intercept those and resolve them to
+ * a name chip; TagChip never shows a raw id.
+ *
+ * Two disjoint modes, chosen by whether `onRemove` is passed: navigable (no
+ * `onRemove`; the caller wraps it in a link) or removable (`onRemove` renders
+ * an × — used by `TagInput` and edit surfaces). Built on `Badge`
+ * (`variant="outline" intent="muted"`).
+ */
+export const TagChip = React.forwardRef(({ tag, onRemove, size = "sm", className }, ref) => {
     const sep = tag.indexOf(":");
     const namespace = sep > 0 ? tag.slice(0, sep) : null;
     const value = sep > 0 ? tag.slice(sep + 1) : tag;
-    return (_jsxs(Badge, { variant: "outline", intent: "muted", className: cn("gap-1 font-normal", size === "sm" ? "px-1.5 py-0 text-[10px]" : "px-2 py-0.5 text-xs", className), children: [namespace && _jsxs("span", { className: "text-fg-subtle", children: [namespace, ":"] }), _jsx("span", { children: value }), onRemove && (_jsx("button", { type: "button", onClick: onRemove, "aria-label": `Remove ${tag}`, className: "-mr-0.5 ml-0.5 rounded-sm text-fg-subtle hover:text-fg-normal focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring", children: _jsx(X, { className: "h-3 w-3" }) }))] }));
-};
+    return (_jsxs(Badge, { ref: ref, variant: "outline", intent: "muted", className: cn("tag-chip gap-1 font-normal", size === "sm" ? "px-1.5 py-0 text-[10px]" : "px-2 py-0.5 text-xs", className), children: [namespace && _jsxs("span", { className: "text-(--tag-chip-namespace-fg)", children: [namespace, ":"] }), _jsx("span", { children: value }), onRemove && (_jsx("button", { type: "button", onClick: onRemove, "aria-label": `Remove ${tag}`, className: "focus-visible:ring-(color:--tag-chip-remove-ring) -mr-0.5 ml-0.5 rounded-sm text-(--tag-chip-remove-fg) hover:text-(--tag-chip-remove-fg-hovered) focus-visible:outline-none focus-visible:ring-2", children: _jsx(X, { className: "h-3 w-3" }) }))] }));
+});
+TagChip.displayName = "TagChip";
 //# sourceMappingURL=TagChip.js.map

package/dist/components/TagChip/TagChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagChip.js","sourceRoot":"","sources":["../../../src/components/TagChip/TagChip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAsBjC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAgB,EAAE,EAAE;IACjF,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAEjD,OAAO,CACL,MAAC,KAAK,IAAC,OAAO,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,EAAE,SAAS,CAAC,aACrJ,SAAS,IAAI,gBAAM,SAAS,EAAC,gBAAgB,aAAE,SAAS,SAAS,EAClE,yBAAO,KAAK,GAAQ,EACnB,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,gBACL,UAAU,GAAG,EAAE,EAC3B,SAAS,EAAC,6IAA6I,YAEvJ,KAAC,CAAC,IAAC,SAAS,EAAC,SAAS,GAAG,GAClB,CACV,IACK,CACT,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"TagChip.js","sourceRoot":"","sources":["../../../src/components/TagChip/TagChip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAgC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IACxH,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7B,MAAM,SAAS,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAEjD,OAAO,CACL,MAAC,KAAK,IACJ,GAAG,EAAE,GAAG,EACR,OAAO,EAAC,SAAS,EACjB,MAAM,EAAC,OAAO,EACd,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,EAAE,SAAS,CAAC,aAExH,SAAS,IAAI,gBAAM,SAAS,EAAC,gCAAgC,aAAE,SAAS,SAAS,EAClF,yBAAO,KAAK,GAAQ,EACnB,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,gBACL,UAAU,GAAG,EAAE,EAC3B,SAAS,EAAC,mMAAmM,YAE7M,KAAC,CAAC,IAAC,SAAS,EAAC,SAAS,GAAG,GAClB,CACV,IACK,CACT,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/components/TagInput/TagInput.d.ts

@@ -1,11 +1,3 @@
-/**
- * Token input for tags: existing tags render as removable chips, typing plus
- * Enter or comma commits a new one, Backspace on an empty field removes the
- * last. Duplicates are ignored. Controlled — the parent owns `value`.
- *
- * The chrome matches `Input` (same border/focus tokens) so it sits naturally
- * among other form fields.
- */
 export type TagInputProps = {
     value: string[];
     onChange: (tags: string[]) => void;
@@ -13,5 +5,16 @@ export type TagInputProps = {
     id?: string;
     className?: string;
 };
-export declare const TagInput: ({ value, onChange, placeholder, id, className }: TagInputProps) => import("react").JSX.Element;
+/**
+ * Token input for tags: existing tags render as removable `TagChip`s, typing
+ * plus Enter or comma commits a new one, Backspace on an empty field removes
+ * the last. Duplicates are ignored. Controlled only — there is no
+ * `defaultValue`, the parent always owns `value`.
+ *
+ * The chrome matches `Input` (same border/focus tokens) so it sits naturally
+ * among other form fields; the field has no visible label of its own, so
+ * give it an accessible name via a `<label htmlFor={id}>` (pass `id`) or
+ * `aria-label`.
+ */
+export declare const TagInput: import("react").ForwardRefExoticComponent<TagInputProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=TagInput.d.ts.map

package/dist/components/TagInput/TagInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TagInput.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/TagInput.tsx"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,QAAQ,oDAAoE,aAAa,gCAuCrG,CAAC"}
+{"version":3,"file":"TagInput.d.ts","sourceRoot":"","sources":["../../../src/components/TagInput/TagInput.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,0GAwCnB,CAAC"}

package/dist/components/TagInput/TagInput.js

@@ -1,8 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TagChip } from "@sixthshift/design-system/tag-chip";
 import { cn } from "@sixthshift/design-system/utils";
-import { useState } from "react";
-export const TagInput = ({ value, onChange, placeholder = "Add a tag…", id, className }) => {
+import { forwardRef, useState } from "react";
+/**
+ * Token input for tags: existing tags render as removable `TagChip`s, typing
+ * plus Enter or comma commits a new one, Backspace on an empty field removes
+ * the last. Duplicates are ignored. Controlled only — there is no
+ * `defaultValue`, the parent always owns `value`.
+ *
+ * The chrome matches `Input` (same border/focus tokens) so it sits naturally
+ * among other form fields; the field has no visible label of its own, so
+ * give it an accessible name via a `<label htmlFor={id}>` (pass `id`) or
+ * `aria-label`.
+ */
+export const TagInput = forwardRef(({ value, onChange, placeholder = "Add a tag…", id, className }, ref) => {
     const [draft, setDraft] = useState("");
     const commit = () => {
         const tag = draft.trim();
@@ -19,6 +30,7 @@ export const TagInput = ({ value, onChange, placeholder = "Add a tag…", id, cl
             onChange(value.slice(0, -1));
         }
     };
-    return (_jsxs("div", { className: cn("flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-border-normal bg-bg-normal px-2 py-1.5 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-focus-ring", className), children: [value.map((tag) => (_jsx(TagChip, { tag: tag, onRemove: () => onChange(value.filter((t) => t !== tag)) }, tag))), _jsx("input", { id: id, value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: handleKeyDown, onBlur: commit, placeholder: value.length > 0 ? "" : placeholder, className: "min-w-[8ch] flex-1 bg-transparent outline-none placeholder:text-fg-subtle" })] }));
-};
+    return (_jsxs("div", { ref: ref, className: cn("flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-border-normal bg-bg-normal px-2 py-1.5 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-focus-ring", className), children: [value.map((tag) => (_jsx(TagChip, { tag: tag, onRemove: () => onChange(value.filter((t) => t !== tag)) }, tag))), _jsx("input", { id: id, value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: handleKeyDown, onBlur: commit, placeholder: value.length > 0 ? "" : placeholder, className: "min-w-[8ch] flex-1 bg-transparent outline-none placeholder:text-fg-subtle" })] }));
+});
+TagInput.displayName = "TagInput";
 //# sourceMappingURL=TagInput.js.map

package/dist/components/TagInput/TagInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagInput.js","sourceRoot":"","sources":["../../../src/components/TagInput/TagInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAsB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAkBrD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,GAAG,YAAY,EAAE,EAAE,EAAE,SAAS,EAAiB,EAAE,EAAE;IACxG,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;QACzB,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC;YAAE,QAAQ,CAAC,CAAC,GAAG,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;QAC3D,QAAQ,CAAC,EAAE,CAAC,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAkC,EAAE,EAAE;QAC3D,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,EAAE,CAAC;QACX,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,KAAK,EAAE,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACrE,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,kMAAkM,EAClM,SAAS,CACV,aAEA,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAClB,KAAC,OAAO,IAAW,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,IAAvE,GAAG,CAAwE,CAC1F,CAAC,EACF,gBACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAChD,SAAS,EAAC,2EAA2E,GACrF,IACE,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"TagInput.js","sourceRoot":"","sources":["../../../src/components/TagInput/TagInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oCAAoC,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,UAAU,EAAsB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAUjE;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAgC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,GAAG,YAAY,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IACxI,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;QACzB,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC;YAAE,QAAQ,CAAC,CAAC,GAAG,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC;QAC3D,QAAQ,CAAC,EAAE,CAAC,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAkC,EAAE,EAAE;QAC3D,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,EAAE,CAAC;QACX,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,KAAK,EAAE,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACrE,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,kMAAkM,EAClM,SAAS,CACV,aAEA,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAClB,KAAC,OAAO,IAAW,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,IAAvE,GAAG,CAAwE,CAC1F,CAAC,EACF,gBACE,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,SAAS,EAAE,aAAa,EACxB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,EAChD,SAAS,EAAC,2EAA2E,GACrF,IACE,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/components/Text/Text.d.ts

@@ -3,6 +3,15 @@ export type TextElement = "span" | "p" | "div" | "label" | "code" | "h1" | "h2"
 export type TextProps = React.HTMLAttributes<HTMLElement> & {
     as?: TextElement;
 };
+/**
+ * The polymorphic base every typography preset (`Heading`, `Body`,
+ * `Emphasis`, ...) is built on: renders as `as` (default `span`) and applies
+ * no styling of its own beyond `className`.
+ *
+ * Reach for a preset first — the typographic ramp (docs/visual-hierarchy.md)
+ * is what keeps text sizing and color consistent across the app. Use `Text`
+ * directly only for one-off text that doesn't fit an existing preset.
+ */
 declare const Text: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & {
     as?: TextElement;
 } & React.RefAttributes<HTMLElement>>;

package/dist/components/Text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5G,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IAC1D,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,IAAI;SAHH,WAAW;qCAUhB,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5G,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;IAC1D,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,CAAC;AAEF;;;;;;;;GAQG;AACH,QAAA,MAAM,IAAI;SAZH,WAAW;qCAmBhB,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Text/Text.js

@@ -1,6 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
+/**
+ * The polymorphic base every typography preset (`Heading`, `Body`,
+ * `Emphasis`, ...) is built on: renders as `as` (default `span`) and applies
+ * no styling of its own beyond `className`.
+ *
+ * Reach for a preset first — the typographic ramp (docs/visual-hierarchy.md)
+ * is what keeps text sizing and color consistent across the app. Use `Text`
+ * directly only for one-off text that doesn't fit an existing preset.
+ */
 const Text = React.forwardRef(({ as: Comp = "span", className, ...props }, ref) => (_jsx(Comp
 // biome-ignore lint/suspicious/noExplicitAny: polymorphic ref requires any
 , { 

package/dist/components/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAyB,CAAC,EAAE,EAAE,EAAE,IAAI,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACzG,KAAC,IAAI;AACH,2EAA2E;;IAA3E,2EAA2E;IAC3E,GAAG,EAAE,GAAU,EACf,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,KACpB,KAAK,GACT,CACH,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAuB/B;;;;;;;;GAQG;AACH,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAyB,CAAC,EAAE,EAAE,EAAE,IAAI,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACzG,KAAC,IAAI;AACH,2EAA2E;;IAA3E,2EAA2E;IAC3E,GAAG,EAAE,GAAU,EACf,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,KACpB,KAAK,GACT,CACH,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/TextInline/TextInline.d.ts

@@ -1,13 +1,24 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const textInlineVariants: (props?: ({
-    gap?: "none" | "xs" | "sm" | "lg" | "xl" | "md" | null | undefined;
-    align?: "center" | "end" | "start" | "baseline" | null | undefined;
+    gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    align?: "center" | "start" | "end" | "baseline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type TextInlineProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof textInlineVariants>;
+/**
+ * Lays out several inline fragments — typically `Text` nodes, but any inline
+ * content works — in a single flex row with a consistent gap and cross-axis
+ * alignment, so a label/value pair or a value/badge pair doesn't need one-off
+ * spacing classes at every call site.
+ *
+ * Renders a single `<span>`. `gap` (default `sm`) and `align` (default
+ * `baseline`) are the only two axes; there's no `as` polymorphism, and this
+ * is not a variant of `Text` — `TextInline` is about spacing *between*
+ * inline children, not about styling the text itself.
+ */
 declare const TextInline: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    gap?: "none" | "xs" | "sm" | "lg" | "xl" | "md" | null | undefined;
-    align?: "center" | "end" | "start" | "baseline" | null | undefined;
+    gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    align?: "center" | "start" | "end" | "baseline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLSpanElement>>;
 export { TextInline, textInlineVariants };
 //# sourceMappingURL=TextInline.d.ts.map

package/dist/components/TextInline/TextInline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInline.d.ts","sourceRoot":"","sources":["../../../src/components/TextInline/TextInline.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,QAAA,MAAM,kBAAkB;;;8EAqBtB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAE9G,QAAA,MAAM,UAAU;;;uHAEd,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"TextInline.d.ts","sourceRoot":"","sources":["../../../src/components/TextInline/TextInline.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,QAAA,MAAM,kBAAkB;;;8EAqBtB,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAE9G;;;;;;;;;;GAUG;AACH,QAAA,MAAM,UAAU;;;uHAEd,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/TextInline/TextInline.js

@@ -24,6 +24,17 @@ const textInlineVariants = cva("inline-flex items-center", {
         align: "baseline",
     },
 });
+/**
+ * Lays out several inline fragments — typically `Text` nodes, but any inline
+ * content works — in a single flex row with a consistent gap and cross-axis
+ * alignment, so a label/value pair or a value/badge pair doesn't need one-off
+ * spacing classes at every call site.
+ *
+ * Renders a single `<span>`. `gap` (default `sm`) and `align` (default
+ * `baseline`) are the only two axes; there's no `as` polymorphism, and this
+ * is not a variant of `Text` — `TextInline` is about spacing *between*
+ * inline children, not about styling the text itself.
+ */
 const TextInline = React.forwardRef(({ className, gap, align, ...props }, ref) => (_jsx("span", { ref: ref, className: cn(textInlineVariants({ gap, align }), className), ...props })));
 TextInline.displayName = "TextInline";
 export { TextInline, textInlineVariants };

package/dist/components/TextInline/TextInline.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInline.js","sourceRoot":"","sources":["../../../src/components/TextInline/TextInline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,kBAAkB,GAAG,GAAG,CAAC,0BAA0B,EAAE;IACzD,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,IAAI,EAAE,OAAO;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,OAAO;YACX,EAAE,EAAE,OAAO;YACX,EAAE,EAAE,OAAO;YACX,EAAE,EAAE,OAAO;SACZ;QACD,KAAK,EAAE;YACL,KAAK,EAAE,aAAa;YACpB,MAAM,EAAE,cAAc;YACtB,GAAG,EAAE,WAAW;YAChB,QAAQ,EAAE,gBAAgB;SAC3B;KACF;IACD,eAAe,EAAE;QACf,GAAG,EAAE,IAAI;QACT,KAAK,EAAE,UAAU;KAClB;CACF,CAAC,CAAC;AAIH,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAmC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClH,eAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,kBAAkB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAC5F,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"TextInline.js","sourceRoot":"","sources":["../../../src/components/TextInline/TextInline.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,kBAAkB,GAAG,GAAG,CAAC,0BAA0B,EAAE;IACzD,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,IAAI,EAAE,OAAO;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,OAAO;YACX,EAAE,EAAE,OAAO;YACX,EAAE,EAAE,OAAO;YACX,EAAE,EAAE,OAAO;SACZ;QACD,KAAK,EAAE;YACL,KAAK,EAAE,aAAa;YACpB,MAAM,EAAE,cAAc;YACtB,GAAG,EAAE,WAAW;YAChB,QAAQ,EAAE,gBAAgB;SAC3B;KACF;IACD,eAAe,EAAE;QACf,GAAG,EAAE,IAAI;QACT,KAAK,EAAE,UAAU;KAClB;CACF,CAAC,CAAC;AAIH;;;;;;;;;;GAUG;AACH,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAmC,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClH,eAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,kBAAkB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAC5F,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/Textarea/Textarea.d.ts

@@ -1,5 +1,17 @@
 import * as React from "react";
 export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+/**
+ * Multi-line text input for longer free-form text.
+ *
+ * A thin styled wrapper around `<textarea>` — no custom props beyond
+ * `React.TextareaHTMLAttributes`, no auto-resize, and no maximum-length UI of
+ * its own. Height comes from a `min-h-[60px]` default plus whatever `rows`
+ * or `className` the caller passes; growing with content is the caller's
+ * responsibility. Controlled or uncontrolled exactly like a native textarea.
+ *
+ * Meant to be wrapped by `FormField` for label, description and validation
+ * wiring.
+ */
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea };
 //# sourceMappingURL=Textarea.d.ts.map

package/dist/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;AAE9E,QAAA,MAAM,QAAQ,2FAWZ,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;AAE9E;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,QAAQ,2FAWZ,CAAC;AAGH,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Textarea/Textarea.js

@@ -1,8 +1,20 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@sixthshift/design-system/utils";
 import * as React from "react";
+/**
+ * Multi-line text input for longer free-form text.
+ *
+ * A thin styled wrapper around `<textarea>` — no custom props beyond
+ * `React.TextareaHTMLAttributes`, no auto-resize, and no maximum-length UI of
+ * its own. Height comes from a `min-h-[60px]` default plus whatever `rows`
+ * or `className` the caller passes; growing with content is the caller's
+ * responsibility. Controlled or uncontrolled exactly like a native textarea.
+ *
+ * Meant to be wrapped by `FormField` for label, description and validation
+ * wiring.
+ */
 const Textarea = React.forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("textarea", { className: cn("flex min-h-[60px] w-full rounded-md border border-border-normal bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref, ...props }));
+    return (_jsx("textarea", { className: cn("textarea border-(color:--textarea-border) focus-visible:ring-(color:--textarea-ring) flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs placeholder:text-(--textarea-placeholder-fg) focus-visible:outline-hidden focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref, ...props }));
 });
 Textarea.displayName = "Textarea";
 export { Textarea };

package/dist/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAqC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrG,OAAO,CACL,mBACE,SAAS,EAAE,EAAE,CACX,uQAAuQ,EACvQ,SAAS,CACV,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;GAWG;AACH,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAqC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrG,OAAO,CACL,mBACE,SAAS,EAAE,EAAE,CACX,2TAA2T,EAC3T,SAAS,CACV,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AACH,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/TimePicker/TimeColumn.d.ts

@@ -4,6 +4,15 @@ export type TimeColumnProps = {
     onSelect: (value: number) => void;
     formatValue?: (value: number) => string;
     disabled?: (value: number) => boolean;
+    /**
+     * Move DOM focus to the selected option on mount.
+     *
+     * Off by default: a column that grabs focus when it appears is wrong for a
+     * pointer user who clicked a trigger. `TimePicker` turns it on only when the
+     * popover was opened from the keyboard (`Alt+ArrowDown`), where the whole
+     * point of opening it was to pick an hour.
+     */
+    autoFocusSelected?: boolean;
 };
-export declare const TimeColumn: ({ values, selected, onSelect, formatValue, disabled }: TimeColumnProps) => import("react").JSX.Element;
+export declare const TimeColumn: ({ values, selected, onSelect, formatValue, disabled, autoFocusSelected, }: TimeColumnProps) => import("react").JSX.Element;
 //# sourceMappingURL=TimeColumn.d.ts.map

package/dist/components/TimePicker/TimeColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeColumn.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimeColumn.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,UAAU,0DAA+F,eAAe,gCAkDpI,CAAC"}
+{"version":3,"file":"TimeColumn.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimeColumn.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACtC;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,UAAU,8EAOpB,eAAe,gCAyDjB,CAAC"}

package/dist/components/TimePicker/TimeColumn.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@sixthshift/design-system/utils";
 import { useEffect, useRef } from "react";
-export const TimeColumn = ({ values, selected, onSelect, formatValue = (v) => String(v).padStart(2, "0"), disabled }) => {
+export const TimeColumn = ({ values, selected, onSelect, formatValue = (v) => String(v).padStart(2, "0"), disabled, autoFocusSelected = false, }) => {
     const containerRef = useRef(null);
     const selectedRef = useRef(null);
     // Scroll selected item into view on mount and when selection changes
@@ -15,6 +15,13 @@ export const TimeColumn = ({ values, selected, onSelect, formatValue = (v) => St
             container.scrollTo({ top: scrollTop, behavior: "smooth" });
         }
     }, []);
+    // Seed focus once, when the caller asked for it. Keyed on the flag alone:
+    // `selected` changes as the user picks, and re-running then would drag focus
+    // back to the option they started from.
+    useEffect(() => {
+        if (autoFocusSelected)
+            selectedRef.current?.focus();
+    }, [autoFocusSelected]);
     return (_jsxs("div", { ref: containerRef, role: "listbox", className: "h-48 w-14 overflow-y-auto overscroll-contain rounded-lg border border-border-subtle bg-bg-subtle/50", children: [_jsx("div", { className: "h-19", "aria-hidden": "true" }), _jsx("div", { className: "flex flex-col gap-0.5", children: values.map((value) => {
                     const isSelected = value === selected;
                     const isDisabled = disabled?.(value) ?? false;

package/dist/components/TimePicker/TimeColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeColumn.js","sourceRoot":"","sources":["../../../src/components/TimePicker/TimeColumn.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAU1C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAmB,EAAE,EAAE;IACvI,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEpD,qEAAqE;IACrE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YAChD,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;YACvC,MAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC;YACjC,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;YACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,SAAS,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YACxG,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAK,GAAG,EAAE,YAAY,EAAE,IAAI,EAAC,SAAS,EAAC,SAAS,EAAC,qGAAqG,aAEpJ,cAAK,SAAS,EAAC,MAAM,iBAAa,MAAM,GAAG,EAC3C,cAAK,SAAS,EAAC,uBAAuB,YACnC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;oBACpB,MAAM,UAAU,GAAG,KAAK,KAAK,QAAQ,CAAC;oBACtC,MAAM,UAAU,GAAG,QAAQ,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;oBAE9C,OAAO,CACL,iBAEE,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACzC,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,UAAU,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,QAAQ,CAAC,KAAK,CAAC,EAC7C,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,EAAE,CACX,0GAA0G,EAC1G,gGAAgG,EAChG,UAAU,IAAI,uDAAuD,EACrE,UAAU,IAAI,+BAA+B,CAC9C,YAEA,WAAW,CAAC,KAAK,CAAC,IAdd,KAAK,CAeH,CACV,CAAC;gBACJ,CAAC,CAAC,GACE,EAEN,cAAK,SAAS,EAAC,MAAM,iBAAa,MAAM,GAAG,IACvC,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"TimeColumn.js","sourceRoot":"","sources":["../../../src/components/TimePicker/TimeColumn.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAmB1C,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAC/C,QAAQ,EACR,iBAAiB,GAAG,KAAK,GACT,EAAE,EAAE;IACpB,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEpD,qEAAqE;IACrE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,CAAC,OAAO,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YAChD,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;YACvC,MAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC;YACjC,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;YACxD,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC9C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC,SAAS,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;YACxG,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,0EAA0E;IAC1E,6EAA6E;IAC7E,wCAAwC;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,iBAAiB;YAAE,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACtD,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAExB,OAAO,CACL,eAAK,GAAG,EAAE,YAAY,EAAE,IAAI,EAAC,SAAS,EAAC,SAAS,EAAC,qGAAqG,aAEpJ,cAAK,SAAS,EAAC,MAAM,iBAAa,MAAM,GAAG,EAC3C,cAAK,SAAS,EAAC,uBAAuB,YACnC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;oBACpB,MAAM,UAAU,GAAG,KAAK,KAAK,QAAQ,CAAC;oBACtC,MAAM,UAAU,GAAG,QAAQ,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC;oBAE9C,OAAO,CACL,iBAEE,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EACzC,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,UAAU,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,QAAQ,CAAC,KAAK,CAAC,EAC7C,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,EAAE,CACX,0GAA0G,EAC1G,gGAAgG,EAChG,UAAU,IAAI,uDAAuD,EACrE,UAAU,IAAI,+BAA+B,CAC9C,YAEA,WAAW,CAAC,KAAK,CAAC,IAdd,KAAK,CAeH,CACV,CAAC;gBACJ,CAAC,CAAC,GACE,EAEN,cAAK,SAAS,EAAC,MAAM,iBAAa,MAAM,GAAG,IACvC,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/TimePicker/TimePicker.d.ts

@@ -1,5 +1,37 @@
-import type * as React from "react";
+import * as React from "react";
 import type { TimePickerProps } from "./timepicker.types.js";
 export type { TimePickerProps };
-export declare const TimePicker: (props: TimePickerProps) => React.JSX.Element;
+/**
+ * A typeable time field and a popover of scrollable hour/minute(/second)
+ * columns, as one control. The value is an `ISOTime` string — `"09:30"` and
+ * `"09:30:00"` are both accepted as input, and `onChange` always emits the
+ * canonical `HH:MM:SS` form regardless of `format`. There is no timezone
+ * conversion: the value is a plain time, not an instant.
+ *
+ * The field is spinbutton segments rather than a text box, and is built to be
+ * typed straight through: `0230p` is half past two in the afternoon, `345` in a
+ * 24-hour field is 03:45 (there is no 30th hour, so the digit rolls into the
+ * minute). `a`/`p` set the meridiem, arrows step any segment, `Alt+ArrowDown`
+ * opens the columns and moves focus to the hour, and `Enter` is Apply. See
+ * `SegmentedField` for the full keyboard model. `minuteStep` sets the column's
+ * increment and deliberately does not constrain typing.
+ *
+ * Typing and picking move one value: the segments show the draft while the
+ * popover is open and the committed value while it is closed. A partial time is
+ * never reported — clearing a segment reports `undefined`.
+ *
+ * Supports both controlled (`value`/`onChange`) and uncontrolled
+ * (`defaultValue`) use. Opening the popover seeds the draft columns from the
+ * committed value (or the current time, if none); scrolling the columns only
+ * updates the draft, and the footer's Apply commits it and closes, Cancel
+ * discards it. A "Now" button resets the draft to the current time without
+ * closing the popover.
+ *
+ * `format` (`"HH:mm" | "HH:mm:ss"`) shows or hides the seconds column;
+ * `clockFormat` (`"12h" | "24h"`) shows or hides the AM/PM selector.
+ * `minTime`/`maxTime` bound the selectable time inclusively — Apply is a
+ * no-op while the draft falls outside them. `minuteStep` controls the minute
+ * column's increment. `presets` renders a sidebar of quick picks.
+ */
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=TimePicker.d.ts.map

package/dist/components/TimePicker/TimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAmBpC,OAAO,KAAK,EAA0B,eAAe,EAAoB,MAAM,oBAAoB,CAAC;AAEpG,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC,eAAO,MAAM,UAAU,UAAW,eAAe,sBAuShD,CAAC"}
+{"version":3,"file":"TimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/TimePicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,OAAO,KAAK,EAA0B,eAAe,EAAoB,MAAM,oBAAoB,CAAC;AAEpG,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,UAAU,wFA8WrB,CAAC"}