@sixthshift/design-system 0.3.0 → 0.5.0

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

@@ -1,22 +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: 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":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;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,sFA0BlB,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

@@ -3,11 +3,24 @@ import { Badge } from "@sixthshift/design-system/badge";
 import { cn } from "@sixthshift/design-system/utils";
 import { X } from "lucide-react";
 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, { ref: ref, 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;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,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,mBAAmB,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,qBAAqB,EAAE,SAAS,CAAC,aAE/G,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,CAAC;AACH,OAAO,CAAC,WAAW,GAAG,SAAS,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;
 };
+/**
+ * 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,0GAwCnB,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

@@ -2,6 +2,17 @@ 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 { 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 = () => {

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,EAAE,UAAU,EAAsB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAkBjE,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"}
+{"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 * as React from "react";
 import type { TimePickerProps } from "./timepicker.types.js";
 export type { TimePickerProps };
+/**
+ * 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,MAAM,OAAO,CAAC;AAoB/B,OAAO,KAAK,EAA0B,eAAe,EAAoB,MAAM,oBAAoB,CAAC;AAEpG,YAAY,EAAE,eAAe,EAAE,CAAC;AAEhC,eAAO,MAAM,UAAU,wFAuTrB,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"}

package/dist/components/TimePicker/TimePicker.js

@@ -2,17 +2,51 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { autoUpdate, FloatingPortal, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
 import { useControllableState } from "@sixthshift/design-system/hooks";
 import { cn } from "@sixthshift/design-system/utils";
-import { Clock, X } from "lucide-react";
+import { Clock } from "lucide-react";
 import * as React from "react";
 import { useCallback, useId, useMemo, useState } from "react";
 import { fromISOTime, fromISOTimeOrUndefined, toISOTimeOrUndefined } from "../../date-time/index.js";
+import { PickerField } from "../../internal/index.js";
 import { Button } from "../Button/index.js";
 import { Separator } from "../Separator/index.js";
 import { PeriodSelector } from "./PeriodSelector.js";
 import { TimeColumn } from "./TimeColumn.js";
-import { formatTimeDisplay, generateHours, generateMinutes, generateSeconds, getCurrentTime, isTimeDisabled, parsedToTemporal, temporalTimeToISO, temporalToParsed, to12Hour, to24Hour, } from "./timepicker.hooks.js";
+import { TimeSegments } from "./TimeSegments.js";
+import { generateHours, generateMinutes, generateSeconds, getCurrentTime, isTimeDisabled, parsedToTemporal, temporalTimeToISO, temporalToParsed, to12Hour, to24Hour, } from "./timepicker.hooks.js";
+/**
+ * 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 const TimePicker = React.forwardRef((props, ref) => {
-    const { value, defaultValue, onChange, format = "HH:mm", clockFormat = "12h", minuteStep = 1, minTime, maxTime, presets, placeholder = "Select time", name, isDisabled = false, isInvalid = false, className, } = props;
+    const { value, defaultValue, onChange, format = "HH:mm", clockFormat = "12h", minuteStep = 1, minTime, maxTime, presets, name, isDisabled = false, isInvalid = false, className, } = props;
     // Open state
     const [open, setOpen] = useState(false);
     // ---------------------------------------------------------------------------
@@ -46,9 +80,19 @@ export const TimePicker = React.forwardRef((props, ref) => {
         }
         return "AM";
     });
+    // Whether the hour column should take focus when the popover mounts — true
+    // only when it was opened from the keyboard. See `openWithColumnFocus`.
+    const [autoFocusHour, setAutoFocusHour] = useState(false);
+    // The draft is three numbers, so it cannot represent "no time". This does:
+    // clearing a segment while the popover is open has to stick rather than being
+    // instantly resynced back from the draft.
+    const [draftCleared, setDraftCleared] = useState(false);
     // Sync draft when popup opens
     const handleOpenChange = useCallback((newOpen) => {
+        if (!newOpen)
+            setAutoFocusHour(false);
         if (newOpen) {
+            setDraftCleared(false);
             if (committedValue) {
                 const parsed = temporalToParsed(committedValue);
                 setDraftHour(clockFormat === "12h" ? to12Hour(parsed.hour).hour12 : parsed.hour);
@@ -79,6 +123,11 @@ export const TimePicker = React.forwardRef((props, ref) => {
     }, [clockFormat, draftHour, draftMinute, draftSecond, draftPeriod]);
     // Apply changes
     const handleApply = useCallback(() => {
+        if (draftCleared) {
+            setCommittedValue(undefined);
+            setOpen(false);
+            return;
+        }
         const parsed = getDraftTime();
         const temporalTime = parsedToTemporal(parsed);
         // Check if disabled
@@ -87,7 +136,7 @@ export const TimePicker = React.forwardRef((props, ref) => {
         }
         setCommittedValue(temporalTime);
         setOpen(false);
-    }, [getDraftTime, temporalMinTime, temporalMaxTime, setCommittedValue]);
+    }, [draftCleared, getDraftTime, temporalMinTime, temporalMaxTime, setCommittedValue]);
     // Cancel changes
     const handleCancel = useCallback(() => {
         setOpen(false);
@@ -137,13 +186,51 @@ export const TimePicker = React.forwardRef((props, ref) => {
     const contentId = `timepicker-content-${id}`;
     const inputId = `timepicker-input-${id}`;
     // Display value
-    const displayValue = committedValue ? formatTimeDisplay(committedValue, clockFormat, format) : "";
     const hasValue = Boolean(committedValue);
+    // ---------------------------------------------------------------------------
+    // The typeable field.
+    //
+    // One value, two ways to move it: the segments show the draft while the
+    // popover is open and the committed value while it is closed, so typing a time
+    // moves the columns and scrolling a column shows up in the segments. The
+    // commit contract stays single — open means Apply/Cancel owns it, closed means
+    // a complete time commits as soon as it is complete.
+    // ---------------------------------------------------------------------------
+    const draftTime = parsedToTemporal(getDraftTime());
+    const segmentValue = open ? (draftCleared ? undefined : draftTime) : committedValue;
+    // A typed time can fall outside `minTime`/`maxTime`, which the columns would
+    // refuse. The field says so rather than silently clamping. See DatePicker.
+    const outOfBounds = segmentValue !== undefined && isTimeDisabled(segmentValue, temporalMinTime, temporalMaxTime);
+    const handleSegmentsChange = useCallback((time) => {
+        if (!open) {
+            setCommittedValue(time);
+            return;
+        }
+        if (!time) {
+            setDraftCleared(true);
+            return;
+        }
+        setDraftCleared(false);
+        setDraftHour(clockFormat === "12h" ? to12Hour(time.hour).hour12 : time.hour);
+        setDraftMinute(time.minute);
+        setDraftSecond(time.second);
+        setDraftPeriod(to12Hour(time.hour).period);
+    }, [clockFormat, open, setCommittedValue]);
+    /** `Alt+ArrowDown` from a segment: open the columns *and* go there. */
+    const openWithColumnFocus = useCallback(() => {
+        setAutoFocusHour(true);
+        handleOpenChange(true);
+    }, [handleOpenChange]);
+    /** `Enter` in a segment commits the draft, matching the popover's Apply. */
+    const handleFieldSubmit = useCallback(() => {
+        if (open)
+            handleApply();
+    }, [handleApply, open]);
     // Generate column values
     const hours = generateHours(clockFormat);
     const minutes = generateMinutes(minuteStep);
     const seconds = generateSeconds();
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: ref, className: "relative flex items-center", children: [_jsx(Clock, { className: "pointer-events-none absolute left-3 h-4 w-4 text-fg-subtle" }), _jsx("input", { ref: refs.setReference, id: inputId, type: "text", readOnly: true, value: displayValue, placeholder: placeholder, disabled: isDisabled, role: "combobox", "aria-invalid": isInvalid, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? contentId : undefined, className: cn(`flex h-9 w-full cursor-pointer rounded-md border border-border-normal bg-transparent py-1 pl-9 text-sm shadow-xs transition-colors placeholder:text-fg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50`, hasValue ? "pr-9" : "pr-3", isInvalid && "border-border-danger", className), ...getReferenceProps() }), hasValue && !isDisabled && (_jsx("button", { type: "button", onClick: handleClear, className: "absolute right-3 rounded-sm p-0.5 text-fg-subtle hover:bg-bg-subtle hover:text-fg-normal focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring", "aria-label": "Clear time", children: _jsx(X, { className: "h-3.5 w-3.5" }) })), name && committedValue && _jsx("input", { type: "hidden", name: name, value: temporalTimeToISO(committedValue, format) })] }), open && (_jsx(FloatingPortal, { children: _jsx("div", { ref: refs.setFloating, id: contentId, role: "dialog", "aria-modal": "true", style: floatingStyles, className: "z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg", ...getFloatingProps(), children: _jsxs("div", { className: "flex", children: [presets && presets.length > 0 && (_jsx("div", { className: "mr-3 flex flex-col gap-1 border-border-normal border-r pr-3", children: presets.map((preset) => (_jsx("button", { type: "button", onClick: () => handlePresetClick(preset), className: cn(`rounded-md px-3 py-1.5 text-left text-sm transition-colors`, `hover:bg-bg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset`, isPresetActive(preset) && "bg-bg-brand-subtle text-fg-brand"), children: preset.label }, preset.label))) })), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("div", { className: "w-14 text-center font-medium text-fg-subtle text-xs", children: "Hour" }), _jsx("div", { className: "w-14 text-center font-medium text-fg-subtle text-xs", children: "Min" }), format === "HH:mm:ss" && _jsx("div", { className: "w-14 text-center font-medium text-fg-subtle text-xs", children: "Sec" }), clockFormat === "12h" && _jsx("div", { className: "w-12 text-center font-medium text-fg-subtle text-xs" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(TimeColumn, { values: hours, selected: draftHour, onSelect: setDraftHour, formatValue: clockFormat === "12h" ? (v) => String(v) : (v) => String(v).padStart(2, "0") }), _jsx(TimeColumn, { values: minutes, selected: draftMinute, onSelect: setDraftMinute }), format === "HH:mm:ss" && _jsx(TimeColumn, { values: seconds, selected: draftSecond, onSelect: setDraftSecond }), clockFormat === "12h" && _jsx(PeriodSelector, { value: draftPeriod, onChange: setDraftPeriod })] }), _jsx(Separator, {}), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleNow, children: "Now" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { type: "button", variant: "solid", size: "sm", onClick: handleApply, children: "Apply" })] })] })] })] }) }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: ref, className: "relative flex items-center", children: [_jsx(PickerField, { ref: refs.setReference, className: cn("w-full min-w-45", className), icon: _jsx(Clock, { className: "h-4 w-4" }), toggleLabel: "Open time picker", toggleProps: getReferenceProps(), isOpen: open, contentId: contentId, isDisabled: isDisabled, isInvalid: isInvalid || outOfBounds, onClear: hasValue && !isDisabled ? handleClear : undefined, clearLabel: "Clear time", children: _jsx(TimeSegments, { className: "h-full flex-1", id: inputId, value: segmentValue, onChange: handleSegmentsChange, format: format, clockFormat: clockFormat, isDisabled: isDisabled, isInvalid: isInvalid || outOfBounds, onOpenRequest: openWithColumnFocus, onSubmit: handleFieldSubmit }) }), name && committedValue && _jsx("input", { type: "hidden", name: name, value: temporalTimeToISO(committedValue, format) })] }), open && (_jsx(FloatingPortal, { children: _jsx("div", { ref: refs.setFloating, id: contentId, role: "dialog", "aria-label": "Choose time", style: floatingStyles, className: "z-popover rounded-xl border border-border-normal bg-bg-normal p-4 shadow-lg", ...getFloatingProps(), children: _jsxs("div", { className: "flex", children: [presets && presets.length > 0 && (_jsx("div", { className: "mr-3 flex flex-col gap-1 border-border-normal border-r pr-3", children: presets.map((preset) => (_jsx("button", { type: "button", onClick: () => handlePresetClick(preset), className: cn(`rounded-md px-3 py-1.5 text-left text-sm transition-colors`, `hover:bg-bg-subtle focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-inset`, isPresetActive(preset) && "bg-bg-brand-subtle text-fg-brand"), children: preset.label }, preset.label))) })), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("div", { className: "w-14 text-center font-medium text-fg-subtle text-xs", children: "Hour" }), _jsx("div", { className: "w-14 text-center font-medium text-fg-subtle text-xs", children: "Min" }), format === "HH:mm:ss" && _jsx("div", { className: "w-14 text-center font-medium text-fg-subtle text-xs", children: "Sec" }), clockFormat === "12h" && _jsx("div", { className: "w-12 text-center font-medium text-fg-subtle text-xs" })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(TimeColumn, { values: hours, selected: draftHour, onSelect: setDraftHour, formatValue: clockFormat === "12h" ? (v) => String(v) : (v) => String(v).padStart(2, "0"), autoFocusSelected: autoFocusHour }), _jsx(TimeColumn, { values: minutes, selected: draftMinute, onSelect: setDraftMinute }), format === "HH:mm:ss" && _jsx(TimeColumn, { values: seconds, selected: draftSecond, onSelect: setDraftSecond }), clockFormat === "12h" && _jsx(PeriodSelector, { value: draftPeriod, onChange: setDraftPeriod })] }), _jsx(Separator, {}), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleNow, children: "Now" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { type: "button", variant: "solid", intent: "brand", size: "sm", onClick: handleApply, children: "Apply" })] })] })] })] }) }) }))] }));
 });
 TimePicker.displayName = "TimePicker";
 //# sourceMappingURL=TimePicker.js.map