@leavepulse/ui 0.37.6 → 0.37.7

package/dist/chunks/{LpDatePicker-BPbvu3cZ.js → LpDatePicker-CwOToxGq.js}

@@ -3,13 +3,13 @@ import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from "reka
 import { POPOVER_PANEL } from "../components/dropdown.js";
 import { _ as _sfc_main$2 } from "./LpCalendar-B7Ko5RdR.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$3 } from "./LpTimeField-K6nAGboX.js";
 const _hoisted_1 = ["disabled"];
 const _hoisted_2 = ["onKeydown"];
 const _hoisted_3 = {
   key: 0,
   class: "flex items-center gap-2 border-t border-line px-3 py-2"
 };
-const _hoisted_4 = ["value", "disabled"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpDatePicker",
   props: {
@@ -133,13 +133,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       size: 15,
                       class: "shrink-0 text-muted"
                     }),
-                    createElementVNode("input", {
-                      type: "time",
-                      value: minute.value,
+                    createVNode(_sfc_main$3, {
+                      "model-value": minute.value || void 0,
                       disabled: !day.value,
-                      class: "h-(--size-control-sm) flex-1 rounded-control border border-line bg-surface-soft px-2 text-sm text-ink outline-none transition-colors focus-visible:border-brand focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-55",
-                      onInput: _cache[0] || (_cache[0] = ($event) => onTime($event.target.value))
-                    }, null, 40, _hoisted_4),
+                      icon: false,
+                      size: "sm",
+                      class: "flex-1",
+                      "onUpdate:modelValue": _cache[0] || (_cache[0] = (at) => onTime(at || ""))
+                    }, null, 8, ["model-value", "disabled"]),
                     createElementVNode("button", {
                       type: "button",
                       class: "shrink-0 rounded-control px-2 py-1 text-xs text-muted transition-colors hover:text-ink",

package/dist/chunks/LpTimeField-K6nAGboX.js

@@ -0,0 +1,90 @@
+import { defineComponent, computed, openBlock, createBlock, unref, normalizeClass, withCtx, createCommentVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
+import { Time } from "@internationalized/date";
+import { TimeFieldRoot, TimeFieldInput } from "reka-ui";
+import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LpTimeField",
+  props: {
+    modelValue: {},
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    size: { default: "md" },
+    hourCycle: { default: 24 },
+    locale: {},
+    icon: { type: Boolean, default: true }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const value = computed(() => {
+      const match = /^(\d{2}):(\d{2})/.exec(props.modelValue || "");
+      return match ? new Time(Number(match[1]), Number(match[2])) : void 0;
+    });
+    function onUpdate(next) {
+      if (!next || typeof next !== "object" || !("hour" in next) || !("minute" in next)) {
+        emit("update:modelValue", void 0);
+        return;
+      }
+      const pad = (n) => String(n).padStart(2, "0");
+      emit("update:modelValue", `${pad(next.hour)}:${pad(next.minute)}`);
+    }
+    const shellSize = {
+      sm: "h-(--size-control-sm) text-xs",
+      md: "h-(--size-control-md) text-sm",
+      lg: "h-(--size-control-lg) text-sm"
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TimeFieldRoot), {
+        "model-value": value.value,
+        "hour-cycle": __props.hourCycle,
+        locale: __props.locale,
+        granularity: "minute",
+        disabled: __props.disabled,
+        class: normalizeClass(["flex w-full items-center gap-0.5 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55", [
+          shellSize[__props.size],
+          __props.invalid ? "border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand"
+        ]]),
+        "onUpdate:modelValue": onUpdate
+      }, {
+        default: withCtx(({ segments }) => [
+          __props.icon ? (openBlock(), createBlock(_sfc_main$1, {
+            key: 0,
+            name: "lucide:clock",
+            size: 15,
+            class: "mr-1.5 shrink-0 text-muted"
+          })) : createCommentVNode("", true),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(segments, (item) => {
+            return openBlock(), createElementBlock(Fragment, {
+              key: item.part
+            }, [
+              item.part === "literal" ? (openBlock(), createBlock(unref(TimeFieldInput), {
+                key: 0,
+                part: item.part,
+                class: "text-muted"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(item.value), 1)
+                ]),
+                _: 2
+              }, 1032, ["part"])) : (openBlock(), createBlock(unref(TimeFieldInput), {
+                key: 1,
+                part: item.part,
+                class: "rounded-sm px-0.5 tabular-nums outline-none focus:bg-brand-soft focus:text-brand data-[placeholder]:text-muted"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(item.value), 1)
+                ]),
+                _: 2
+              }, 1032, ["part"]))
+            ], 64);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["model-value", "hour-cycle", "locale", "disabled", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/component-names.d.ts

@@ -1 +1 @@
-export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpActionBar", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpColorPicker", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpDropzone", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpImageEditor", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpMediaGallery", "LpModal", "LpModalNav", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar", "LpWaypointEdge"];
+export declare const COMPONENT_NAMES: readonly ["LayoutCanvas", "LayoutNode", "LpActionBar", "LpAddressInput", "LpAlert", "LpAppShell", "LpAutocomplete", "LpAvatar", "LpBadge", "LpBreadcrumbs", "LpButton", "LpCalendar", "LpCard", "LpChart", "LpCheckbox", "LpCodeBlock", "LpColorPicker", "LpCommandPalette", "LpConfirmDialog", "LpContextMenu", "LpDatePicker", "LpDisclosure", "LpDivider", "LpDrawer", "LpDropdownMenu", "LpDropzone", "LpEmptyState", "LpFileTree", "LpFileTreeNode", "LpFormField", "LpIcon", "LpImageEditor", "LpInfraNode", "LpInput", "LpLaneNode", "LpLightbox", "LpLink", "LpLogViewer", "LpMapPicker", "LpMediaGallery", "LpModal", "LpModalNav", "LpNotificationBell", "LpNumberField", "LpNumberFlow", "LpOtpInput", "LpPagination", "LpPasswordInput", "LpPhoneInput", "LpPie", "LpPopover", "LpProgress", "LpRadio", "LpRadioGroup", "LpRollingText", "LpScrollArea", "LpSection", "LpSegmented", "LpSelect", "LpServiceNode", "LpShift", "LpShortcutsDialog", "LpSidebar", "LpSidebarNav", "LpSkeleton", "LpSlider", "LpSparkline", "LpStat", "LpStepper", "LpSwitch", "LpTable", "LpTableOfContents", "LpTabs", "LpTextarea", "LpThemeSwitcher", "LpTilt", "LpTimeField", "LpToaster", "LpTooltip", "LpTopologyCanvas", "LpUptimeBar", "LpWaypointEdge"];

package/dist/components/LpDatePicker.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpDatePicker-BPbvu3cZ.js";
+import { _ as _sfc_main } from "../chunks/LpDatePicker-CwOToxGq.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTimeField.vue.d.ts

@@ -0,0 +1,24 @@
+type __VLS_Props = {
+    /** Selected time "HH:mm" (v-model). */
+    modelValue?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: "sm" | "md" | "lg";
+    /** 24 or 12-hour clock, independent of the browser locale. */
+    hourCycle?: 12 | 24;
+    /** Locale for segment order and the AM/PM marker in 12-hour mode. */
+    locale?: string;
+    /** Show the clock icon at the start of the field. */
+    icon?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    size: "sm" | "md" | "lg";
+    icon: boolean;
+    hourCycle: 12 | 24;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/LpTimeField.vue.js

@@ -0,0 +1,4 @@
+import { _ as _sfc_main } from "../chunks/LpTimeField-K6nAGboX.js";
+export {
+  _sfc_main as default
+};

package/dist/index.d.ts

@@ -62,6 +62,7 @@ export { default as LpModalNav } from './components/LpModalNav.vue';
 export { default as LpNotificationBell } from './components/LpNotificationBell.vue';
 export type { NotificationItem, NotificationLabels, } from './components/LpNotificationBell.vue';
 export { default as LpNumberField } from './components/LpNumberField.vue';
+export { default as LpTimeField } from './components/LpTimeField.vue';
 export { default as LpNumberFlow } from './components/LpNumberFlow.vue';
 export { default as LpOtpInput } from './components/LpOtpInput.vue';
 export { default as LpPagination } from './components/LpPagination.vue';

package/dist/index.js

@@ -21,7 +21,7 @@ import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, n
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
 import { _ as _17 } from "./chunks/LpConfirmDialog-BH7az_E7.js";
 import { _ as _18 } from "./chunks/LpContextMenu-CwW1QXe_.js";
-import { _ as _19 } from "./chunks/LpDatePicker-BPbvu3cZ.js";
+import { _ as _19 } from "./chunks/LpDatePicker-CwOToxGq.js";
 import { _ as _20 } from "./chunks/LpDisclosure-ChQYmjlR.js";
 import { _ as _21 } from "./chunks/LpDivider-CUX46KR0.js";
 import { _ as _22 } from "./chunks/LpDrawer-E67O8fFP.js";
@@ -44,43 +44,44 @@ import { _ as _34 } from "./chunks/LpModal-Dq_qXN8-.js";
 import { _ as _35 } from "./chunks/LpModalNav-CqxXbTkl.js";
 import { _ as _36 } from "./chunks/LpNotificationBell-DyGGsMAM.js";
 import { _ as _37 } from "./chunks/LpNumberField-CWuX08iX.js";
-import { _ as _38 } from "./chunks/LpNumberFlow-amWYaeuA.js";
-import { _ as _39 } from "./chunks/LpOtpInput-y2v-pmiN.js";
-import { _ as _40 } from "./chunks/LpPagination-5FxjmmB5.js";
-import { _ as _41 } from "./chunks/LpPasswordInput--sjYCkLS.js";
-import { _ as _42 } from "./chunks/LpPie-D6OnzwlJ.js";
-import { _ as _43 } from "./chunks/LpPhoneInput-BDSKVl_z.js";
+import { _ as _38 } from "./chunks/LpTimeField-K6nAGboX.js";
+import { _ as _39 } from "./chunks/LpNumberFlow-amWYaeuA.js";
+import { _ as _40 } from "./chunks/LpOtpInput-y2v-pmiN.js";
+import { _ as _41 } from "./chunks/LpPagination-5FxjmmB5.js";
+import { _ as _42 } from "./chunks/LpPasswordInput--sjYCkLS.js";
+import { _ as _43 } from "./chunks/LpPie-D6OnzwlJ.js";
+import { _ as _44 } from "./chunks/LpPhoneInput-BDSKVl_z.js";
 import { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
-import { _ as _44 } from "./chunks/LpPopover-8268UmlC.js";
-import { _ as _45 } from "./chunks/LpProgress-Btq5W4Ut.js";
-import { _ as _46 } from "./chunks/LpRadio-B5AfqTpZ.js";
-import { _ as _47 } from "./chunks/LpRadioGroup-xPIuVDO_.js";
-import { _ as _48 } from "./chunks/LpRollingText-CM5gkSeF.js";
-import { _ as _49 } from "./chunks/LpScrollArea-D8xyKXcF.js";
-import { _ as _50 } from "./chunks/LpSegmented-fV0Sk92p.js";
-import { _ as _51 } from "./chunks/LpSection-aM6J_u51.js";
-import { _ as _52 } from "./chunks/LpSelect-ANIVtrpM.js";
-import { _ as _53 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
-import { _ as _54 } from "./chunks/LpShift-DXNsauQZ.js";
+import { _ as _45 } from "./chunks/LpPopover-8268UmlC.js";
+import { _ as _46 } from "./chunks/LpProgress-Btq5W4Ut.js";
+import { _ as _47 } from "./chunks/LpRadio-B5AfqTpZ.js";
+import { _ as _48 } from "./chunks/LpRadioGroup-xPIuVDO_.js";
+import { _ as _49 } from "./chunks/LpRollingText-CM5gkSeF.js";
+import { _ as _50 } from "./chunks/LpScrollArea-D8xyKXcF.js";
+import { _ as _51 } from "./chunks/LpSegmented-fV0Sk92p.js";
+import { _ as _52 } from "./chunks/LpSection-aM6J_u51.js";
+import { _ as _53 } from "./chunks/LpSelect-ANIVtrpM.js";
+import { _ as _54 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
+import { _ as _55 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default6 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _55 } from "./chunks/LpSidebar-B1wLj-B2.js";
-import { _ as _56 } from "./chunks/LpSkeleton-CTI-vBgW.js";
-import { _ as _57 } from "./chunks/LpSlider-BwNIBkAK.js";
-import { _ as _58 } from "./chunks/LpSparkline-C6xQ2dwv.js";
-import { _ as _59 } from "./chunks/LpStat-CQaW8R--.js";
-import { _ as _60 } from "./chunks/LpStepper-Bk-XaQYU.js";
-import { _ as _61 } from "./chunks/LpSwitch-xgnRU2k0.js";
+import { _ as _56 } from "./chunks/LpSidebar-B1wLj-B2.js";
+import { _ as _57 } from "./chunks/LpSkeleton-CTI-vBgW.js";
+import { _ as _58 } from "./chunks/LpSlider-BwNIBkAK.js";
+import { _ as _59 } from "./chunks/LpSparkline-C6xQ2dwv.js";
+import { _ as _60 } from "./chunks/LpStat-CQaW8R--.js";
+import { _ as _61 } from "./chunks/LpStepper-Bk-XaQYU.js";
+import { _ as _62 } from "./chunks/LpSwitch-xgnRU2k0.js";
 import { default as default7 } from "./components/LpTable.vue.js";
-import { _ as _62 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
-import { _ as _63 } from "./chunks/LpTabs-Cefe_lys.js";
-import { _ as _64 } from "./chunks/LpTextarea-t7F6gv8E.js";
+import { _ as _63 } from "./chunks/LpTableOfContents-CjvxPMpU.js";
+import { _ as _64 } from "./chunks/LpTabs-Cefe_lys.js";
+import { _ as _65 } from "./chunks/LpTextarea-t7F6gv8E.js";
 import { p as presets, a as parseTheme, s as serializeTheme } from "./chunks/LpThemeSwitcher-Cue-myST.js";
-import { D, _ as _65, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-Cue-myST.js";
-import { _ as _66 } from "./chunks/LpTilt-DuyKbpkA.js";
-import { _ as _67 } from "./chunks/LpToaster-gDB1EaU3.js";
-import { _ as _68 } from "./chunks/LpTooltip-hCLPAqMG.js";
-import { _ as _69 } from "./chunks/LpTopologyCanvas-Cm1L39uL.js";
-import { _ as _70 } from "./chunks/LpUptimeBar-DvAMno0S.js";
+import { D, _ as _66, N, T, b, c, d, e, f, g, i, l, h, j, n, r, t, k, m, u, v } from "./chunks/LpThemeSwitcher-Cue-myST.js";
+import { _ as _67 } from "./chunks/LpTilt-DuyKbpkA.js";
+import { _ as _68 } from "./chunks/LpToaster-gDB1EaU3.js";
+import { _ as _69 } from "./chunks/LpTooltip-hCLPAqMG.js";
+import { _ as _70 } from "./chunks/LpTopologyCanvas-Cm1L39uL.js";
+import { _ as _71 } from "./chunks/LpUptimeBar-DvAMno0S.js";
 import { deserializeLayout, serializeLayout } from "./layout/tree.js";
 import { addLeaf, addTab, countBlocks, countLeaves, makeLayout, moveLeaf, removeBlock, removeLeaf, reorderTab, resizeAt, setActiveTab } from "./layout/tree.js";
 import { blockTitle, defineBlocks } from "./layout/registry.js";
@@ -174,41 +175,42 @@ export {
   _35 as LpModalNav,
   _36 as LpNotificationBell,
   _37 as LpNumberField,
-  _38 as LpNumberFlow,
-  _39 as LpOtpInput,
-  _40 as LpPagination,
-  _41 as LpPasswordInput,
-  _43 as LpPhoneInput,
-  _42 as LpPie,
-  _44 as LpPopover,
-  _45 as LpProgress,
-  _46 as LpRadio,
-  _47 as LpRadioGroup,
-  _48 as LpRollingText,
-  _49 as LpScrollArea,
-  _51 as LpSection,
-  _50 as LpSegmented,
-  _52 as LpSelect,
-  _53 as LpServiceNode,
-  _54 as LpShift,
+  _39 as LpNumberFlow,
+  _40 as LpOtpInput,
+  _41 as LpPagination,
+  _42 as LpPasswordInput,
+  _44 as LpPhoneInput,
+  _43 as LpPie,
+  _45 as LpPopover,
+  _46 as LpProgress,
+  _47 as LpRadio,
+  _48 as LpRadioGroup,
+  _49 as LpRollingText,
+  _50 as LpScrollArea,
+  _52 as LpSection,
+  _51 as LpSegmented,
+  _53 as LpSelect,
+  _54 as LpServiceNode,
+  _55 as LpShift,
   default6 as LpShortcutsDialog,
-  _55 as LpSidebar,
-  _56 as LpSkeleton,
-  _57 as LpSlider,
-  _58 as LpSparkline,
-  _59 as LpStat,
-  _60 as LpStepper,
-  _61 as LpSwitch,
+  _56 as LpSidebar,
+  _57 as LpSkeleton,
+  _58 as LpSlider,
+  _59 as LpSparkline,
+  _60 as LpStat,
+  _61 as LpStepper,
+  _62 as LpSwitch,
   default7 as LpTable,
-  _62 as LpTableOfContents,
-  _63 as LpTabs,
-  _64 as LpTextarea,
-  _65 as LpThemeSwitcher,
-  _66 as LpTilt,
-  _67 as LpToaster,
-  _68 as LpTooltip,
-  _69 as LpTopologyCanvas,
-  _70 as LpUptimeBar,
+  _63 as LpTableOfContents,
+  _64 as LpTabs,
+  _65 as LpTextarea,
+  _66 as LpThemeSwitcher,
+  _67 as LpTilt,
+  _38 as LpTimeField,
+  _68 as LpToaster,
+  _69 as LpTooltip,
+  _70 as LpTopologyCanvas,
+  _71 as LpUptimeBar,
   N as NO_BACKDROP_ATTR,
   OSM_TILES,
   T as THEME_COOKIE,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.37.6",
+  "version": "0.37.7",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/component-names.ts

@@ -78,6 +78,7 @@ export const COMPONENT_NAMES = [
   "LpTextarea",
   "LpThemeSwitcher",
   "LpTilt",
+  "LpTimeField",
   "LpToaster",
   "LpTooltip",
   "LpTopologyCanvas",

package/src/components/LpDatePicker.vue

@@ -6,10 +6,10 @@
  * min/max + isDisabled forwarded to the calendar. Themed like the other inputs.
  *
  * With `time`, the model carries a minute too ("YYYY-MM-DDTHH:mm") and the
- * popover grows a time row under the calendar. Anything that needs a moment
- * rather than a day — an expiry, a scheduled start — would otherwise fall back
- * to a native `datetime-local`, which the browser paints in its own locale and
- * chrome, breaking the form it sits in. Picking a day keeps the time already
+ * popover grows a time row (LpTimeField) under the calendar. Anything that
+ * needs a moment rather than a day — an expiry, a scheduled start — would
+ * otherwise fall back to a native `datetime-local`, which the browser paints in
+ * its own locale and chrome, breaking the form it sits in. Picking a day keeps the time already
  * chosen (default `defaultTime`), so the popover closes on the first click for
  * the common case.
  */
@@ -18,6 +18,7 @@ import { computed, ref } from "vue"
 import { POPOVER_PANEL } from "./dropdown"
 import LpCalendar from "./LpCalendar.vue"
 import LpIcon from "./LpIcon.vue"
+import LpTimeField from "./LpTimeField.vue"
 
 const props = withDefaults(
   defineProps<{
@@ -152,12 +153,13 @@ function clear() {
         />
         <div v-if="time" class="flex items-center gap-2 border-t border-line px-3 py-2">
           <LpIcon name="lucide:clock" :size="15" class="shrink-0 text-muted" />
-          <input
-            type="time"
-            :value="minute"
+          <LpTimeField
+            :model-value="minute || undefined"
             :disabled="!day"
-            class="h-(--size-control-sm) flex-1 rounded-control border border-line bg-surface-soft px-2 text-sm text-ink outline-none transition-colors focus-visible:border-brand focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-55"
-            @input="onTime(($event.target as HTMLInputElement).value)"
+            :icon="false"
+            size="sm"
+            class="flex-1"
+            @update:model-value="(at) => onTime(at || '')"
           />
           <button
             type="button"

package/src/components/LpTimeField.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+/*
+ * Time-of-day field: hour and minute segments, typed or stepped with the arrow
+ * keys (reka TimeField). The model is "HH:mm" (v-model), the same shape a
+ * native `<input type="time">` produces, so it drops into a form that used one.
+ *
+ * It exists because the native input is painted by the browser in the user's
+ * system locale — a 24-hour app shows "--:-- --" with an AM/PM segment, in the
+ * browser's chrome rather than the kit's. Here the clock is fixed by
+ * `hourCycle` (24 by default) and the segments are themed like every other
+ * field.
+ */
+import { Time } from "@internationalized/date"
+import { TimeFieldInput, TimeFieldRoot } from "reka-ui"
+import { computed } from "vue"
+import LpIcon from "./LpIcon.vue"
+
+const props = withDefaults(
+  defineProps<{
+    /** Selected time "HH:mm" (v-model). */
+    modelValue?: string
+    disabled?: boolean
+    invalid?: boolean
+    size?: "sm" | "md" | "lg"
+    /** 24 or 12-hour clock, independent of the browser locale. */
+    hourCycle?: 12 | 24
+    /** Locale for segment order and the AM/PM marker in 12-hour mode. */
+    locale?: string
+    /** Show the clock icon at the start of the field. */
+    icon?: boolean
+  }>(),
+  { size: "md", hourCycle: 24, icon: true },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | undefined): void
+}>()
+
+const value = computed(() => {
+  const match = /^(\d{2}):(\d{2})/.exec(props.modelValue || "")
+  return match ? new Time(Number(match[1]), Number(match[2])) : undefined
+})
+
+function onUpdate(next: unknown) {
+  if (!next || typeof next !== "object" || !("hour" in next) || !("minute" in next)) {
+    emit("update:modelValue", undefined)
+    return
+  }
+  const pad = (n: unknown) => String(n).padStart(2, "0")
+  emit("update:modelValue", `${pad(next.hour)}:${pad(next.minute)}`)
+}
+
+const shellSize = {
+  sm: "h-(--size-control-sm) text-xs",
+  md: "h-(--size-control-md) text-sm",
+  lg: "h-(--size-control-lg) text-sm",
+}
+</script>
+
+<template>
+  <TimeFieldRoot
+    v-slot="{ segments }"
+    :model-value="value"
+    :hour-cycle="hourCycle"
+    :locale="locale"
+    granularity="minute"
+    :disabled="disabled"
+    class="flex w-full items-center gap-0.5 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55"
+    :class="[
+      shellSize[size],
+      invalid ? 'border-danger focus-within:ring-danger-soft' : 'border-line focus-within:border-brand',
+    ]"
+    @update:model-value="onUpdate"
+  >
+    <LpIcon v-if="icon" name="lucide:clock" :size="15" class="mr-1.5 shrink-0 text-muted" />
+    <template v-for="item in segments" :key="item.part">
+      <TimeFieldInput v-if="item.part === 'literal'" :part="item.part" class="text-muted">
+        {{ item.value }}
+      </TimeFieldInput>
+      <TimeFieldInput
+        v-else
+        :part="item.part"
+        class="rounded-sm px-0.5 tabular-nums outline-none focus:bg-brand-soft focus:text-brand data-[placeholder]:text-muted"
+      >
+        {{ item.value }}
+      </TimeFieldInput>
+    </template>
+  </TimeFieldRoot>
+</template>

package/src/index.ts

@@ -112,6 +112,7 @@ export type {
   NotificationLabels,
 } from "./components/LpNotificationBell.vue"
 export { default as LpNumberField } from "./components/LpNumberField.vue"
+export { default as LpTimeField } from "./components/LpTimeField.vue"
 export { default as LpNumberFlow } from "./components/LpNumberFlow.vue"
 export { default as LpOtpInput } from "./components/LpOtpInput.vue"
 export { default as LpPagination } from "./components/LpPagination.vue"