@soybeanjs/headless 0.15.5 → 0.16.0

package/dist/components/time-field/time-field-input.js

@@ -0,0 +1 @@
+import{useDateField as e}from"../../date/use-date-field.js";import"../../date/index.js";import{Primitive as t}from"../primitive/primitive.js";import"../primitive/index.js";import{useTimeFieldRootContext as n,useTimeFieldUi as r}from"./context.js";import{computed as i,createBlock as a,defineComponent as o,mergeProps as s,openBlock as c,ref as l,renderSlot as u,toHandlers as d,unref as f,withCtx as p}from"vue";const m=o({name:`TimeFieldInput`,__name:`time-field-input`,props:{part:{},asChild:{type:Boolean},as:{default:`span`}},setup(o){let m=o,h=r(`input`),{disabled:g,readonly:_,placeholder:v,hourCycle:y,step:b,segmentValues:x,formatter:S,focusNext:C,modelValue:w,isInvalid:T,setFocusedElement:E}=n(`TimeFieldInput`),D=l(!0),O=l(!1),k=i(()=>!!g.value),A=i(()=>!!_.value),{attributes:j,handleSegmentClick:M,handleSegmentFocusOut:N,handleSegmentKeydown:P}=e({hasLeftFocus:D,lastKeyZero:O,placeholder:v,hourCycle:y,step:b,segmentValues:x,formatter:S,part:m.part,disabled:k,readonly:A,focusNext:C,modelValue:w}),F=i(()=>k.value||A.value?!1:m.part!==`literal`&&m.part!==`timeZoneName`),I=i(()=>m.part===`literal`?{}:{mousedown:M,keydown:P,focusout:()=>{D.value=!0,N()},focusin:e=>{E(e.target)}});return(e,n)=>(c(),a(f(t),s({as:o.as,"as-child":o.asChild},f(j),{"aria-disabled":k.value?!0:void 0,"aria-invalid":f(T)?!0:void 0,"aria-readonly":A.value||o.part===`timeZoneName`?!0:void 0,class:f(h),contenteditable:F.value,"data-disabled":k.value?``:void 0,"data-invalid":f(T)?``:void 0,"data-readonly":A.value||o.part===`timeZoneName`?``:void 0,"data-segment":o.part,"data-soybean-date-field-segment":o.part,"data-slot":`input`},d(I.value)),{default:p(()=>[u(e.$slots,`default`)]),_:3},16,[`as`,`as-child`,`aria-disabled`,`aria-invalid`,`aria-readonly`,`class`,`contenteditable`,`data-disabled`,`data-invalid`,`data-readonly`,`data-segment`,`data-soybean-date-field-segment`]))}});export{m as default};

package/dist/components/time-field/time-field-input.vue.d.ts

@@ -0,0 +1,21 @@
+import { AsTag } from "../primitive/types.js";
+import { TimeFieldInputProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/time-field/time-field-input.vue.d.ts
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<TimeFieldInputProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<TimeFieldInputProps> & Readonly<{}>, {
+  as: AsTag | _$vue.Component;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/time-field/time-field-root.js

@@ -0,0 +1 @@
+import{isNullish as e}from"../../shared/guard.js";import{getDefaultTime as t,isBefore as n,isEqualValue as ee}from"../../date/comparators.js";import{getTimeInputType as r,normalizeDateStep as i,normalizeHourCycle as te,normalizeTimeInputValue as a}from"../../date/utils.js";import{useDateFormatter as ne}from"../../date/formatter.js";import{createContent as re,syncTimeSegmentValues as o}from"../../date/parser.js";import{getSegmentElements as s}from"../../date/segment.js";import"../../date/index.js";import"../../shared/index.js";import{useControllableState as c}from"../../composables/use-controllable-state.js";import{useForwardElement as l}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{useDirection as u,useLocale as d}from"../config-provider/context.js";import{Primitive as f}from"../primitive/primitive.js";import"../primitive/index.js";import p from"../visually-hidden/visually-hidden.js";import"../visually-hidden/index.js";import{provideTimeFieldRootContext as m,useTimeFieldUi as h}from"./context.js";import{computed as g,createBlock as _,createVNode as v,defineComponent as y,nextTick as b,normalizeClass as x,onMounted as S,openBlock as C,renderSlot as w,shallowRef as T,unref as E,watch as D,withCtx as ie}from"vue";const O=y({name:`TimeFieldRoot`,__name:`time-field-root`,props:{defaultValue:{default:void 0},defaultPlaceholder:{default:void 0},placeholder:{default:void 0},modelValue:{},hourCycle:{default:void 0},step:{default:void 0},granularity:{default:void 0},hideTimeZone:{type:Boolean,default:!1},maxValue:{},minValue:{},locale:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},isTimeUnavailable:{type:Function,default:void 0},id:{},dir:{},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:placeholder`],setup(y,{emit:O}){let k=y,A=O,j=h(`root`),[M,N]=l(),P=d(()=>k.locale),F=u(()=>k.dir),I=ne(P.value,{hourCycle:te(k.hourCycle)}),L=c(()=>k.modelValue,e=>A(`update:modelValue`,e),k.defaultValue),R=t({defaultPlaceholder:k.placeholder,defaultValue:L.value}),z=c(()=>k.placeholder,e=>A(`update:placeholder`,e),k.defaultPlaceholder??R.copy()),B=g(()=>k.granularity??`minute`),V=g(()=>i(k)),H=g(()=>L.value?!!(k.isTimeUnavailable?.(L.value)||k.minValue&&n(L.value,k.minValue)||k.maxValue&&n(k.maxValue,L.value)):!1),U=T(L.value?{...o({value:L.value,formatter:I})}:{...o({value:z.value,formatter:I})}),W=g(()=>re({granularity:B.value,dateRef:z.value,formatter:I,hideTimeZone:k.hideTimeZone,hourCycle:k.hourCycle,segmentValues:U.value,locale:P,isTimeValue:!0}).arr),G=T([]),K=T(null),q=()=>{M.value&&(G.value=s(M.value))};D(P,e=>{I.getLocale()!==e&&I.setLocale(e),b(q)}),D(L,t=>{!e(t)&&!ee(z.value,t)&&(z.value=t.copy())}),D([L,P,B],([t])=>{if(!e(t)){U.value={...o({value:t,formatter:I})};return}U.value={...o({value:z.value,formatter:I})}});let J=g(()=>G.value.findIndex(e=>e.getAttribute(`data-soybean-date-field-segment`)===K.value?.getAttribute(`data-soybean-date-field-segment`))),Y=e=>{let t=F.value===`rtl`?-1:1,n=e===`next`?t:-t;G.value[J.value+n]?.focus()},X=g(()=>r(B.value)),Z=g(()=>a(L.value,B.value)),Q=g(()=>k.maxValue?a(k.maxValue,B.value):void 0),$=g(()=>k.minValue?a(k.minValue,B.value):void 0),ae=e=>{e.key!==`ArrowLeft`&&e.key!==`ArrowRight`||(e.preventDefault(),Y(e.key===`ArrowRight`?`next`:`prev`))};return m({locale:P,dir:F,modelValue:L,placeholder:z,isTimeUnavailable:k.isTimeUnavailable,isInvalid:H,disabled:g(()=>k.disabled),readonly:g(()=>k.readonly),formatter:I,hourCycle:k.hourCycle,step:V,segmentValues:U,segmentContents:W,inputType:X,inputValue:Z,inputMaxValue:Q,inputMinValue:$,elements:G,focusNext(){Y(`next`)},setFocusedElement(e){K.value=e}}),S(q),(e,t)=>(C(),_(E(f),{ref:E(N),as:y.as,"as-child":y.asChild,class:x(E(j)),"data-disabled":y.disabled?``:void 0,"data-invalid":H.value?``:void 0,"data-readonly":y.readonly?``:void 0,dir:E(F),"data-slot":`root`,role:`group`,onKeydown:ae},{default:ie(()=>[w(e.$slots,`default`,{isInvalid:H.value,modelValue:E(L),segments:W.value}),v(E(p),{id:y.id,as:`input`,feature:`focusable`,type:X.value,tabindex:`-1`,value:Z.value,name:y.name,disabled:y.disabled,required:y.required,max:Q.value,min:$.value,onFocus:t[0]||(t[0]=e=>G.value[0]?.focus())},null,8,[`id`,`type`,`value`,`name`,`disabled`,`required`,`max`,`min`])]),_:3},8,[`as`,`as-child`,`class`,`data-disabled`,`data-invalid`,`data-readonly`,`dir`]))}});export{O as default};

package/dist/components/time-field/time-field-root.vue.d.ts

@@ -0,0 +1,43 @@
+import { TimeValue } from "../../date/comparators.js";
+import { DateStep, SegmentPart, TimeGranularity, TimeMatcher } from "../../date/types.js";
+import { TimeFieldRootProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/time-field/time-field-root.vue.d.ts
+type __VLS_Slots = {
+  default?: (props: {
+    modelValue: TimeValue | undefined;
+    segments: {
+      part: SegmentPart;
+      value: string;
+    }[];
+    isInvalid: boolean;
+  }) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<TimeFieldRootProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (time: TimeValue | undefined) => any;
+  "update:placeholder": (time: TimeValue) => any;
+}, string, _$vue.PublicProps, Readonly<TimeFieldRootProps> & Readonly<{
+  "onUpdate:modelValue"?: ((time: TimeValue | undefined) => any) | undefined;
+  "onUpdate:placeholder"?: ((time: TimeValue) => any) | undefined;
+}>, {
+  placeholder: TimeValue;
+  disabled: boolean;
+  step: DateStep;
+  defaultValue: TimeValue;
+  defaultPlaceholder: TimeValue;
+  hourCycle: 12 | 24;
+  granularity: TimeGranularity;
+  hideTimeZone: boolean;
+  readonly: boolean;
+  isTimeUnavailable: TimeMatcher;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/time-field/types.d.ts

@@ -0,0 +1,63 @@
+import { Direction, UiClass } from "../../types/common.js";
+import { FormFieldCommonProps } from "../../types/component.js";
+import { PropsToContext } from "../../types/vue.js";
+import { PrimitiveProps } from "../primitive/types.js";
+import { TimeValue } from "../../date/comparators.js";
+import { DateStep, HourCycle, SegmentPart, SegmentValueObj, TimeGranularity, TimeInputType, TimeMatcher } from "../../date/types.js";
+import { Formatter } from "../../date/formatter.js";
+import { ComputedRef, HTMLAttributes, ShallowRef } from "vue";
+
+//#region src/components/time-field/types.d.ts
+interface TimeFieldRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */Omit<HTMLAttributes, 'placeholder'> {
+  defaultValue?: TimeValue;
+  defaultPlaceholder?: TimeValue;
+  placeholder?: TimeValue;
+  modelValue?: TimeValue;
+  hourCycle?: HourCycle;
+  step?: DateStep;
+  granularity?: TimeGranularity;
+  hideTimeZone?: boolean;
+  maxValue?: TimeValue;
+  minValue?: TimeValue;
+  locale?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  isTimeUnavailable?: TimeMatcher;
+  id?: string;
+  dir?: Direction;
+}
+type TimeFieldRootEmits = {
+  'update:modelValue': [time: TimeValue | undefined];
+  'update:placeholder': [time: TimeValue];
+};
+interface TimeFieldInputProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {
+  part: SegmentPart;
+}
+interface TimeFieldSegment {
+  part: SegmentPart;
+  value: string;
+}
+interface TimeFieldRootContext extends PropsToContext<TimeFieldRootProps, 'disabled' | 'readonly'> {
+  locale: ComputedRef<string>;
+  dir: ComputedRef<Direction>;
+  modelValue: ShallowRef<TimeValue | undefined>;
+  placeholder: ShallowRef<TimeValue>;
+  isTimeUnavailable?: TimeMatcher;
+  isInvalid: ComputedRef<boolean>;
+  formatter: Formatter;
+  hourCycle: HourCycle;
+  step: ComputedRef<DateStep>;
+  segmentValues: ShallowRef<SegmentValueObj>;
+  segmentContents: ComputedRef<TimeFieldSegment[]>;
+  inputType: ComputedRef<TimeInputType>;
+  inputValue: ComputedRef<string>;
+  inputMaxValue: ComputedRef<string | undefined>;
+  inputMinValue: ComputedRef<string | undefined>;
+  elements: ShallowRef<HTMLElement[]>;
+  focusNext: () => void;
+  setFocusedElement: (el: HTMLElement) => void;
+}
+type TimeFieldUiSlot = 'root' | 'input';
+type TimeFieldUi = UiClass<TimeFieldUiSlot>;
+//#endregion
+export { TimeFieldInputProps, TimeFieldRootContext, TimeFieldRootEmits, TimeFieldRootProps, TimeFieldUi, TimeFieldUiSlot };

package/dist/components/time-picker/context.d.ts

@@ -0,0 +1,9 @@
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
+import { TimePickerUiSlot } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/time-picker/context.d.ts
+declare const provideTimePickerUi: (ui: _$vue.ComputedRef<Partial<UiClass<TimePickerUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<TimePickerUiSlot>>>, useTimePickerUi: UseUiConsumer<TimePickerUiSlot>;
+//#endregion
+export { provideTimePickerUi };

package/dist/components/time-picker/context.js

@@ -0,0 +1 @@
+import{useContext as e}from"../../composables/use-context.js";import{useUiContext as t}from"../../composables/use-ui-context.js";import"../../composables/index.js";const[n,r]=e(`TimePickerRoot`),[i,a]=t(`TimePickerUi`);export{n as provideTimePickerRootContext,i as provideTimePickerUi,r as useTimePickerRootContext,a as useTimePickerUi};

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

@@ -0,0 +1,6 @@
+import { TimePickerPopupProps, TimePickerRootContext, TimePickerRootEmits, TimePickerRootProps, TimePickerTriggerProps, TimePickerUi, TimePickerUiSlot } from "./types.js";
+import { _default } from "./time-picker-popup.vue.js";
+import { _default as _default$1 } from "./time-picker-root.vue.js";
+import { _default as _default$2 } from "./time-picker-trigger.vue.js";
+import { provideTimePickerUi } from "./context.js";
+export { _default as TimePickerPopup, type TimePickerPopupProps, _default$1 as TimePickerRoot, type TimePickerRootContext, type TimePickerRootEmits, type TimePickerRootProps, _default$2 as TimePickerTrigger, type TimePickerTriggerProps, type TimePickerUi, type TimePickerUiSlot, provideTimePickerUi };

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

@@ -0,0 +1 @@
+import{provideTimePickerUi as e}from"./context.js";import t from"./time-picker-popup.js";import n from"./time-picker-root.js";import r from"./time-picker-trigger.js";export{t as TimePickerPopup,n as TimePickerRoot,r as TimePickerTrigger,e as provideTimePickerUi};

package/dist/components/time-picker/time-picker-popup.js

@@ -0,0 +1 @@
+import{findClosestTimeOption as e}from"../../shared/time-picker.js";import{useForwardElement as t}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{Primitive as n}from"../primitive/primitive.js";import"../primitive/index.js";import{useTimePickerRootContext as r,useTimePickerUi as i}from"./context.js";import{Fragment as a,createBlock as o,createCommentVNode as s,createElementBlock as c,createElementVNode as l,createTextVNode as u,defineComponent as d,nextTick as f,normalizeClass as p,openBlock as m,renderList as h,renderSlot as g,toDisplayString as _,unref as v,watch as y,withCtx as b}from"vue";const x=[`aria-label`,`aria-pressed`,`data-disabled`,`data-focused`,`data-selected`,`data-time-key`,`disabled`,`tabindex`,`onClick`,`onFocus`,`onKeydown`],S=d({name:`TimePickerPopup`,__name:`time-picker-popup`,props:{asChild:{type:Boolean},as:{default:`div`}},setup(d){let S=i(`popup`),C=i(`list`),w=i(`cellTrigger`),{focusedTime:T,isTimeDisabled:E,isTimeSelected:D,modelValue:O,onTimeChange:k,open:A,options:j,popupId:M,setFocusedTime:N}=r(`TimePickerPopup`),[P,F]=t(),I=e=>{let t=P.value?.querySelector(`[data-time-key='${e}']`);t?.focus(),t?.scrollIntoView({block:`nearest`})},L=(e,t)=>{let n=j.value,r=e;for(;r>=0&&r<n.length;){let e=n[r];if(!E(e.value))return N(e.value),f(()=>{I(e.key)}),!0;r+=t}return!1},R=()=>{let t=e(j.value,O.value??T.value);if(!t)return;let n=j.value.findIndex(e=>e.key===t.key);L(n===-1?0:n,1)},z=(e,t)=>{let n=e+t,r=t>=0?1:-1;n<0||n>=j.value.length||L(n,r)},B=e=>{E(e)||k(e)},V=e=>{N(e)},H=(e,t,n)=>{if(!E(e))switch(n.key){case`ArrowDown`:n.preventDefault(),z(t,1);break;case`ArrowUp`:n.preventDefault(),z(t,-1);break;case`Home`:n.preventDefault(),L(0,1);break;case`End`:n.preventDefault(),L(j.value.length-1,-1);break;case`Enter`:case` `:n.preventDefault(),k(e);break;default:break}};return y(()=>A.value,e=>{e&&f(()=>{R()})}),(e,t)=>v(A)?(m(),o(v(n),{key:0,id:v(M),ref:v(F),as:d.as,"as-child":d.asChild,"aria-label":`Time picker`,class:p(v(S)),"data-slot":`popup`,role:`dialog`},{default:b(()=>[l(`div`,{class:p(v(C)),"data-slot":`list`},[(m(!0),c(a,null,h(v(j),(t,n)=>(m(),c(`button`,{key:t.key,"aria-label":t.label,"aria-pressed":v(D)(t.value)?!0:void 0,class:p(v(w)),"data-disabled":v(E)(t.value)?``:void 0,"data-focused":t.value.toString()===v(T).toString()?``:void 0,"data-selected":v(D)(t.value)?``:void 0,"data-slot":`cell-trigger`,"data-time-key":t.key,disabled:v(E)(t.value),tabindex:t.value.toString()===v(T).toString()&&!v(E)(t.value)?0:-1,type:`button`,onClick:e=>B(t.value),onFocus:e=>V(t.value),onKeydown:e=>H(t.value,n,e)},[g(e.$slots,`time`,{disabled:v(E)(t.value),focused:t.value.toString()===v(T).toString(),label:t.label,selected:v(D)(t.value),time:t.value},()=>[u(_(t.label),1)])],42,x))),128))],2)]),_:3},8,[`id`,`as`,`as-child`,`class`])):s(`v-if`,!0)}});export{S as default};

package/dist/components/time-picker/time-picker-popup.vue.d.ts

@@ -0,0 +1,27 @@
+import { AsTag } from "../primitive/types.js";
+import { TimeValue } from "../../date/comparators.js";
+import { TimePickerPopupProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/time-picker/time-picker-popup.vue.d.ts
+type __VLS_Slots = {
+  time?: (props: {
+    disabled: boolean;
+    focused: boolean;
+    label: string;
+    selected: boolean;
+    time: TimeValue;
+  }) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<TimePickerPopupProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<TimePickerPopupProps> & Readonly<{}>, {
+  as: AsTag | _$vue.Component;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/time-picker/time-picker-root.js

@@ -0,0 +1 @@
+import{isNullish as e}from"../../shared/guard.js";import{getDefaultTime as t,isBefore as n}from"../../date/comparators.js";import{normalizeHourCycle as r}from"../../date/utils.js";import{useDateFormatter as i}from"../../date/formatter.js";import"../../date/index.js";import{createTimeOptions as a,formatTimeValue as o}from"../../shared/time-picker.js";import"../../shared/index.js";import{useControllableState as s}from"../../composables/use-controllable-state.js";import"../../composables/index.js";import{useDirection as c,useLocale as l}from"../config-provider/context.js";import{Primitive as u}from"../primitive/primitive.js";import"../primitive/index.js";import{provideTimePickerRootContext as d,useTimePickerUi as f}from"./context.js";import{computed as p,createBlock as m,defineComponent as h,normalizeClass as g,openBlock as _,renderSlot as v,unref as y,useId as b,watch as x,withCtx as S}from"vue";const C=h({name:`TimePickerRoot`,__name:`time-picker-root`,props:{defaultValue:{default:void 0},defaultPlaceholder:{default:void 0},placeholder:{default:void 0},modelValue:{},hourCycle:{default:void 0},step:{default:void 0},granularity:{default:void 0},hideTimeZone:{type:Boolean,default:!1},maxValue:{},minValue:{},locale:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},isTimeUnavailable:{type:Function,default:void 0},id:{},dir:{},defaultOpen:{type:Boolean,default:!1},open:{type:Boolean,default:void 0},modal:{type:Boolean,default:!1},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:placeholder`,`update:open`],setup(h,{emit:C}){let w=h,T=C,E=f(`root`),D=b(),O=l(()=>w.locale),k=c(()=>w.dir),A=i(O.value,{hourCycle:r(w.hourCycle)}),j=p(()=>w.granularity??`minute`),M=p(()=>w.hideTimeZone),N=s(()=>w.modelValue,e=>T(`update:modelValue`,e),w.defaultValue),P=t({defaultPlaceholder:w.placeholder,defaultValue:N.value}),F=s(()=>w.placeholder,e=>T(`update:placeholder`,e),w.defaultPlaceholder??P.copy()),I=s(()=>w.open,e=>T(`update:open`,e??!1),w.defaultOpen),L=p({get:()=>F.value,set:e=>{F.value=e.copy()}}),R=p(()=>w.minValue),z=p(()=>w.maxValue),B=e=>!!(w.disabled||w.isTimeUnavailable?.(e)||R.value&&n(e,R.value)||z.value&&n(z.value,e)),V=e=>N.value?N.value.toString()===e.toString():!1,H=p(()=>N.value?B(N.value):!1),U=p(()=>N.value?o({formatter:A,granularity:j.value,hideTimeZone:M.value,hourCycle:w.hourCycle,value:N.value}):``),W=p(()=>a({formatter:A,granularity:j.value,hideTimeZone:M.value,hourCycle:w.hourCycle,isTimeUnavailable:w.isTimeUnavailable,maxValue:z.value,minValue:R.value,reference:N.value??F.value,step:w.step})),G=e=>{F.value=e.copy()};return x(O,e=>{A.getLocale()!==e&&A.setLocale(e)}),x(N,t=>{if(e(t)){L.value=F.value.copy();return}F.value.toString()!==t.toString()&&(F.value=t.copy()),L.value=t.copy()}),d({locale:O,dir:k,modelValue:N,placeholder:F,isTimeUnavailable:w.isTimeUnavailable,isInvalid:H,formatter:A,granularity:j,hourCycle:w.hourCycle,hideTimeZone:M,open:I,popupId:D,displayValue:U,focusedTime:L,options:W,minValue:R,maxValue:z,onTimeChange:e=>{w.readonly||B(e)||(N.value=e.copy(),G(e),I.value=!1)},onPlaceholderChange:G,isTimeDisabled:B,isTimeSelected:V,setOpen(e){I.value=e},setFocusedTime:e=>{L.value=e.copy()},disabled:p(()=>w.disabled),readonly:p(()=>w.readonly)}),(e,t)=>(_(),m(y(u),{as:h.as,"as-child":h.asChild,class:g(y(E)),"data-disabled":h.disabled?``:void 0,"data-invalid":H.value?``:void 0,"data-readonly":h.readonly?``:void 0,dir:y(k),"data-slot":`root`},{default:S(()=>[v(e.$slots,`default`,{displayValue:U.value,modelValue:y(N),open:!!y(I)})]),_:3},8,[`as`,`as-child`,`class`,`data-disabled`,`data-invalid`,`data-readonly`,`dir`]))}});export{C as default};

package/dist/components/time-picker/time-picker-root.vue.d.ts

@@ -0,0 +1,45 @@
+import { TimeValue } from "../../date/comparators.js";
+import { DateStep, TimeGranularity, TimeMatcher } from "../../date/types.js";
+import { TimePickerRootProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/time-picker/time-picker-root.vue.d.ts
+type __VLS_Slots = {
+  default?: (props: {
+    displayValue: string;
+    modelValue: TimeValue | undefined;
+    open: boolean;
+  }) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<TimePickerRootProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (time: TimeValue | undefined) => any;
+  "update:placeholder": (time: TimeValue) => any;
+  "update:open": (open: boolean) => any;
+}, string, _$vue.PublicProps, Readonly<TimePickerRootProps> & Readonly<{
+  "onUpdate:modelValue"?: ((time: TimeValue | undefined) => any) | undefined;
+  "onUpdate:placeholder"?: ((time: TimeValue) => any) | undefined;
+  "onUpdate:open"?: ((open: boolean) => any) | undefined;
+}>, {
+  placeholder: TimeValue;
+  disabled: boolean;
+  step: DateStep;
+  defaultValue: TimeValue;
+  defaultPlaceholder: TimeValue;
+  hourCycle: 12 | 24;
+  granularity: TimeGranularity;
+  hideTimeZone: boolean;
+  readonly: boolean;
+  open: boolean;
+  defaultOpen: boolean;
+  modal: boolean;
+  isTimeUnavailable: TimeMatcher;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/time-picker/time-picker-trigger.js

@@ -0,0 +1 @@
+import{Primitive as e}from"../primitive/primitive.js";import"../primitive/index.js";import{useTimePickerRootContext as t,useTimePickerUi as n}from"./context.js";import{createBlock as r,defineComponent as i,normalizeClass as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";const u=i({name:`TimePickerTrigger`,__name:`time-picker-trigger`,props:{asChild:{type:Boolean},as:{default:`button`}},setup(i){let u=n(`trigger`),{disabled:d,readonly:f,open:p,setOpen:m,popupId:h}=t(`TimePickerTrigger`),g=()=>{d.value||f.value||m(!p.value)};return(t,n)=>(o(),r(c(e),{as:i.as,"as-child":i.asChild,"aria-controls":c(h),"aria-disabled":c(d)?!0:void 0,"aria-expanded":!!c(p),class:a(c(u)),"data-disabled":c(d)?``:void 0,"data-state":c(p)?`open`:`closed`,"data-slot":`trigger`,type:`button`,onClick:g},{default:l(()=>[s(t.$slots,`default`)]),_:3},8,[`as`,`as-child`,`aria-controls`,`aria-disabled`,`aria-expanded`,`class`,`data-disabled`,`data-state`]))}});export{u as default};

package/dist/components/time-picker/time-picker-trigger.vue.d.ts

@@ -0,0 +1,21 @@
+import { AsTag } from "../primitive/types.js";
+import { TimePickerTriggerProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/time-picker/time-picker-trigger.vue.d.ts
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<TimePickerTriggerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<TimePickerTriggerProps> & Readonly<{}>, {
+  as: AsTag | _$vue.Component;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/time-picker/types.d.ts

@@ -0,0 +1,68 @@
+import { Direction, UiClass } from "../../types/common.js";
+import { FormFieldCommonProps } from "../../types/component.js";
+import { PropsToContext } from "../../types/vue.js";
+import { PrimitiveProps } from "../primitive/types.js";
+import { TimeValue } from "../../date/comparators.js";
+import { DateStep, HourCycle, TimeGranularity, TimeMatcher } from "../../date/types.js";
+import { Formatter } from "../../date/formatter.js";
+import { TimePickerOption } from "../../shared/time-picker.js";
+import { ComputedRef, HTMLAttributes, ShallowRef } from "vue";
+
+//#region src/components/time-picker/types.d.ts
+interface TimePickerRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */Omit<HTMLAttributes, 'placeholder'> {
+  defaultValue?: TimeValue;
+  defaultPlaceholder?: TimeValue;
+  placeholder?: TimeValue;
+  modelValue?: TimeValue;
+  hourCycle?: HourCycle;
+  step?: DateStep;
+  granularity?: TimeGranularity;
+  hideTimeZone?: boolean;
+  maxValue?: TimeValue;
+  minValue?: TimeValue;
+  locale?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  isTimeUnavailable?: TimeMatcher;
+  id?: string;
+  dir?: Direction;
+  defaultOpen?: boolean;
+  open?: boolean;
+  modal?: boolean;
+}
+type TimePickerRootEmits = {
+  'update:modelValue': [time: TimeValue | undefined];
+  'update:placeholder': [time: TimeValue];
+  'update:open': [open: boolean];
+};
+interface TimePickerTriggerProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+interface TimePickerPopupProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+interface TimePickerRootContext extends PropsToContext<TimePickerRootProps, 'disabled' | 'readonly'> {
+  locale: ComputedRef<string>;
+  dir: ComputedRef<Direction>;
+  modelValue: ShallowRef<TimeValue | undefined>;
+  placeholder: ShallowRef<TimeValue>;
+  isTimeUnavailable?: TimeMatcher;
+  isInvalid: ComputedRef<boolean>;
+  formatter: Formatter;
+  granularity: ComputedRef<TimeGranularity>;
+  hourCycle: HourCycle;
+  hideTimeZone: ComputedRef<boolean>;
+  open: ShallowRef<boolean | undefined>;
+  popupId: string;
+  displayValue: ComputedRef<string>;
+  focusedTime: ShallowRef<TimeValue>;
+  options: ComputedRef<TimePickerOption[]>;
+  minValue: ComputedRef<TimeValue | undefined>;
+  maxValue: ComputedRef<TimeValue | undefined>;
+  onTimeChange: (time: TimeValue) => void;
+  onPlaceholderChange: (time: TimeValue) => void;
+  isTimeDisabled: (time: TimeValue) => boolean;
+  isTimeSelected: (time: TimeValue) => boolean;
+  setOpen: (value: boolean) => void;
+  setFocusedTime: (time: TimeValue) => void;
+}
+type TimePickerUiSlot = 'root' | 'trigger' | 'popup' | 'list' | 'cellTrigger';
+type TimePickerUi = UiClass<TimePickerUiSlot>;
+//#endregion
+export { TimePickerPopupProps, TimePickerRootContext, TimePickerRootEmits, TimePickerRootProps, TimePickerTriggerProps, TimePickerUi, TimePickerUiSlot };

package/dist/components/time-range-field/context.d.ts

@@ -0,0 +1,9 @@
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
+import { TimeRangeFieldUiSlot } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/time-range-field/context.d.ts
+declare const provideTimeRangeFieldUi: (ui: _$vue.ComputedRef<Partial<UiClass<TimeRangeFieldUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<TimeRangeFieldUiSlot>>>, useTimeRangeFieldUi: UseUiConsumer<TimeRangeFieldUiSlot>;
+//#endregion
+export { provideTimeRangeFieldUi };

package/dist/components/time-range-field/context.js

@@ -0,0 +1 @@
+import{useContext as e}from"../../composables/use-context.js";import{useUiContext as t}from"../../composables/use-ui-context.js";import"../../composables/index.js";const[n,r]=e(`TimeRangeFieldRoot`),[i,a]=t(`TimeRangeFieldUi`);export{n as provideTimeRangeFieldRootContext,i as provideTimeRangeFieldUi,r as useTimeRangeFieldRootContext,a as useTimeRangeFieldUi};

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

@@ -0,0 +1,6 @@
+import { TimeRangeFieldCompactEmits, TimeRangeFieldCompactProps, TimeRangeFieldCompactSlots, TimeRangeFieldInputProps, TimeRangeFieldRootContext, TimeRangeFieldRootEmits, TimeRangeFieldRootProps, TimeRangeFieldSegment, TimeRangeFieldUi, TimeRangeFieldUiSlot } from "./types.js";
+import { _default } from "./time-range-field-compact.vue.js";
+import { _default as _default$2 } from "./time-range-field-root.vue.js";
+import { _default as _default$1 } from "./time-range-field-input.vue.js";
+import { provideTimeRangeFieldUi } from "./context.js";
+export { _default as TimeRangeFieldCompact, type TimeRangeFieldCompactEmits, type TimeRangeFieldCompactProps, type TimeRangeFieldCompactSlots, _default$1 as TimeRangeFieldInput, type TimeRangeFieldInputProps, _default$2 as TimeRangeFieldRoot, type TimeRangeFieldRootContext, type TimeRangeFieldRootEmits, type TimeRangeFieldRootProps, type TimeRangeFieldSegment, type TimeRangeFieldUi, type TimeRangeFieldUiSlot, provideTimeRangeFieldUi };

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

@@ -0,0 +1 @@
+import{provideTimeRangeFieldUi as e}from"./context.js";import t from"./time-range-field-root.js";import n from"./time-range-field-input.js";import r from"./time-range-field-compact.js";export{r as TimeRangeFieldCompact,n as TimeRangeFieldInput,t as TimeRangeFieldRoot,e as provideTimeRangeFieldUi};

package/dist/components/time-range-field/time-range-field-compact.js

@@ -0,0 +1 @@
+import{useForwardListeners as e}from"../../composables/use-forward-listeners.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import{useTimeRangeFieldUi as n}from"./context.js";import r from"./time-range-field-root.js";import i from"./time-range-field-input.js";import{Fragment as a,createBlock as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,defineComponent as u,mergeProps as d,normalizeClass as f,normalizeProps as p,openBlock as m,renderList as h,renderSlot as g,toDisplayString as _,toHandlers as v,unref as y,withCtx as b}from"vue";const x={"data-time-range-field-part":`start`},S={"data-time-range-field-part":`end`},C=u({name:`TimeRangeFieldCompact`,__name:`time-range-field-compact`,props:{inputProps:{},separator:{default:`–`},defaultValue:{},defaultPlaceholder:{},placeholder:{},modelValue:{},hourCycle:{},step:{},granularity:{},hideTimeZone:{type:Boolean},maxValue:{},minValue:{},locale:{},disabled:{type:Boolean},readonly:{type:Boolean},isTimeUnavailable:{},id:{},dir:{},startName:{},endName:{},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:placeholder`,`update:startValue`,`update:endValue`],setup(u,{emit:C}){let w=u,T=C,E=t(w,[`inputProps`,`separator`]),D=e(T),O=n();return(e,t)=>(m(),o(r,d(y(E),v(y(D))),{default:b(t=>[e.$slots.default?g(e.$slots,`default`,p(d({key:0},t))):(m(),s(a,{key:1},[c(`div`,x,[(m(!0),s(a,null,h(t.startSegments,(e,t)=>(m(),o(i,d({key:`start-${e.part}-${t}`,part:e.part,type:`start`},{ref_for:!0},u.inputProps),{default:b(()=>[l(_(e.value),1)]),_:2},1040,[`part`]))),128))]),c(`div`,{class:f(y(O).separator)},[g(e.$slots,`separator`,{},()=>[l(_(u.separator),1)])],2),c(`div`,S,[(m(!0),s(a,null,h(t.endSegments,(e,t)=>(m(),o(i,d({key:`end-${e.part}-${t}`,part:e.part,type:`end`},{ref_for:!0},u.inputProps),{default:b(()=>[l(_(e.value),1)]),_:2},1040,[`part`]))),128))])],64))]),_:3},16))}});export{C as default};

package/dist/components/time-range-field/time-range-field-compact.vue.d.ts

@@ -0,0 +1,29 @@
+import { TimeValue } from "../../date/comparators.js";
+import { TimeRange } from "../../date/types.js";
+import { TimeRangeFieldCompactProps, TimeRangeFieldCompactSlots } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/time-range-field/time-range-field-compact.vue.d.ts
+type __VLS_Slots = TimeRangeFieldCompactSlots;
+declare const __VLS_base: _$vue.DefineComponent<TimeRangeFieldCompactProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (range: TimeRange) => any;
+  "update:placeholder": (time: TimeValue) => any;
+  "update:startValue": (time: TimeValue | undefined) => any;
+  "update:endValue": (time: TimeValue | undefined) => any;
+}, string, _$vue.PublicProps, Readonly<TimeRangeFieldCompactProps> & Readonly<{
+  "onUpdate:modelValue"?: ((range: TimeRange) => any) | undefined;
+  "onUpdate:placeholder"?: ((time: TimeValue) => any) | undefined;
+  "onUpdate:startValue"?: ((time: TimeValue | undefined) => any) | undefined;
+  "onUpdate:endValue"?: ((time: TimeValue | undefined) => any) | undefined;
+}>, {
+  separator: string;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/time-range-field/time-range-field-input.js

@@ -0,0 +1 @@
+import{useDateField as e}from"../../date/use-date-field.js";import"../../date/index.js";import{Primitive as t}from"../primitive/primitive.js";import"../primitive/index.js";import{useTimeRangeFieldRootContext as n,useTimeRangeFieldUi as r}from"./context.js";import{computed as i,createBlock as a,defineComponent as o,mergeProps as s,openBlock as c,ref as l,renderSlot as u,toHandlers as d,unref as f,withCtx as p}from"vue";const m=o({name:`TimeRangeFieldInput`,__name:`time-range-field-input`,props:{part:{},type:{default:`start`},asChild:{type:Boolean},as:{default:`span`}},setup(o){let m=o,h=r(`input`),{disabled:g,readonly:_,placeholder:v,hourCycle:y,step:b,startSegmentValues:x,endSegmentValues:S,formatter:C,focusNext:w,modelValue:T,isInvalid:E,setFocusedElement:D}=n(`TimeRangeFieldInput`),O=l(!0),k=l(!1),A=i(()=>!!g.value),j=i(()=>!!_.value),{attributes:M,handleSegmentClick:N,handleSegmentFocusOut:P,handleSegmentKeydown:F}=e({hasLeftFocus:O,lastKeyZero:k,placeholder:v,hourCycle:y,step:b,segmentValues:i(()=>m.type===`start`?x.value:S.value),formatter:C,part:m.part,disabled:A,readonly:j,focusNext:()=>w(m.type),modelValue:i({get:()=>m.type===`start`?T.value.start:T.value.end,set:e=>{m.type===`start`?T.value={...T.value,start:e}:T.value={...T.value,end:e}}})}),I=i(()=>A.value||j.value?!1:m.part!==`literal`&&m.part!==`timeZoneName`),L=i(()=>m.part===`literal`?{}:{mousedown:N,keydown:F,focusout:()=>{O.value=!0,P()},focusin:e=>{D(e.target,m.type)}});return(e,n)=>(c(),a(f(t),s({as:o.as,"as-child":o.asChild},f(M),{"aria-disabled":A.value?!0:void 0,"aria-invalid":f(E)?!0:void 0,"aria-readonly":j.value||o.part===`timeZoneName`?!0:void 0,class:f(h),contenteditable:I.value,"data-disabled":A.value?``:void 0,"data-invalid":f(E)?``:void 0,"data-readonly":j.value||o.part===`timeZoneName`?``:void 0,"data-segment":o.part,"data-soybean-date-field-segment":o.part,"data-slot":`input`},d(L.value)),{default:p(()=>[u(e.$slots,`default`)]),_:3},16,[`as`,`as-child`,`aria-disabled`,`aria-invalid`,`aria-readonly`,`class`,`contenteditable`,`data-disabled`,`data-invalid`,`data-readonly`,`data-segment`,`data-soybean-date-field-segment`]))}});export{m as default};

package/dist/components/time-range-field/time-range-field-input.vue.d.ts

@@ -0,0 +1,22 @@
+import { AsTag } from "../primitive/types.js";
+import { TimeRangeFieldInputProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/time-range-field/time-range-field-input.vue.d.ts
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<TimeRangeFieldInputProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<TimeRangeFieldInputProps> & Readonly<{}>, {
+  type: "start" | "end";
+  as: AsTag | _$vue.Component;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/time-range-field/time-range-field-root.js

@@ -0,0 +1 @@
+import{isNullish as e}from"../../shared/guard.js";import{getDefaultTime as t,isBefore as n,isEqualValue as r}from"../../date/comparators.js";import{getTimeInputType as i,normalizeDateStep as a,normalizeHourCycle as ee,normalizeTimeInputValue as o}from"../../date/utils.js";import{useDateFormatter as s}from"../../date/formatter.js";import{createContent as c,syncTimeSegmentValues as l}from"../../date/parser.js";import{getSegmentElements as u}from"../../date/segment.js";import"../../date/index.js";import"../../shared/index.js";import{useControllableState as d}from"../../composables/use-controllable-state.js";import{useForwardElement as te}from"../../composables/use-forward-element.js";import"../../composables/index.js";import{useDirection as f,useLocale as p}from"../config-provider/context.js";import{Primitive as ne}from"../primitive/primitive.js";import"../primitive/index.js";import m from"../visually-hidden/visually-hidden.js";import"../visually-hidden/index.js";import{provideTimeRangeFieldRootContext as re,useTimeRangeFieldUi as ie}from"./context.js";import{computed as h,createBlock as g,createVNode as _,defineComponent as v,nextTick as y,normalizeClass as b,onMounted as ae,openBlock as x,renderSlot as oe,shallowRef as S,unref as C,watch as w,withCtx as T}from"vue";const E=v({name:`TimeRangeFieldRoot`,__name:`time-range-field-root`,props:{defaultValue:{default:void 0},defaultPlaceholder:{default:void 0},placeholder:{default:void 0},modelValue:{},hourCycle:{default:void 0},step:{default:void 0},granularity:{default:void 0},hideTimeZone:{type:Boolean,default:!1},maxValue:{},minValue:{},locale:{},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},isTimeUnavailable:{type:Function,default:void 0},id:{},dir:{},startName:{default:void 0},endName:{default:void 0},asChild:{type:Boolean},as:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`update:placeholder`,`update:startValue`,`update:endValue`],setup(v,{emit:E}){let D=v,O=E,k=ie(`root`),[A,j]=te(),M=p(()=>D.locale),N=f(()=>D.dir),P=s(M.value,{hourCycle:ee(D.hourCycle)}),F=d(()=>D.modelValue,e=>{O(`update:modelValue`,e),O(`update:startValue`,e.start),O(`update:endValue`,e.end)},D.defaultValue??{}),se=t({defaultPlaceholder:D.placeholder,defaultValue:F.value.start}),I=d(()=>D.placeholder,e=>O(`update:placeholder`,e),D.defaultPlaceholder??se.copy()),ce=h(()=>a(D)),L=h(()=>D.granularity??`minute`),R=h(()=>{let{start:e,end:t}=F.value;return!!(e&&t&&n(t,e)||e&&(D.isTimeUnavailable?.(e)||D.minValue&&n(e,D.minValue)||D.maxValue&&n(D.maxValue,e))||t&&(D.isTimeUnavailable?.(t)||D.minValue&&n(t,D.minValue)||D.maxValue&&n(D.maxValue,t)))}),z=S(F.value.start?{...l({value:F.value.start,formatter:P})}:{...l({value:I.value,formatter:P})}),B=S(F.value.end?{...l({value:F.value.end,formatter:P})}:{...l({value:I.value,formatter:P})}),V=h(()=>c({granularity:L.value,dateRef:I.value,formatter:P,hideTimeZone:D.hideTimeZone,hourCycle:D.hourCycle,segmentValues:z.value,locale:M,isTimeValue:!0}).arr),H=h(()=>c({granularity:L.value,dateRef:I.value,formatter:P,hideTimeZone:D.hideTimeZone,hourCycle:D.hourCycle,segmentValues:B.value,locale:M,isTimeValue:!0}).arr),U=S([]),W=S([]),G=S(null),K=S(`start`),q=()=>{if(!A.value)return;let e=A.value.querySelector(`[data-time-range-field-part="start"]`),t=A.value.querySelector(`[data-time-range-field-part="end"]`);e&&(U.value=u(e)),t&&(W.value=u(t))};w(M,e=>{P.getLocale()!==e&&P.setLocale(e),y(q)}),w(()=>F.value.start,t=>{!e(t)&&!r(I.value,t)&&(I.value=t.copy())}),w([()=>F.value.start,M,L],([t])=>{if(!e(t)){z.value={...l({value:t,formatter:P})};return}z.value={...l({value:I.value,formatter:P})}}),w([()=>F.value.end,M,L],([t])=>{if(!e(t)){B.value={...l({value:t,formatter:P})};return}B.value={...l({value:I.value,formatter:P})}});let le=h(()=>(K.value===`start`?U.value:W.value).findIndex(e=>e.getAttribute(`data-soybean-date-field-segment`)===G.value?.getAttribute(`data-soybean-date-field-segment`))),J=(e,t)=>{let n=N.value===`rtl`?-1:1,r=t===`next`?n:-n,i=e===`start`?U.value:W.value,a=le.value+r;a>=0&&a<i.length?i[a]?.focus():t===`next`&&e===`start`&&W.value.length>0?(K.value=`end`,W.value[0]?.focus()):t===`prev`&&e===`end`&&U.value.length>0&&(K.value=`start`,U.value[U.value.length-1]?.focus())},Y=h(()=>i(L.value)),X=h(()=>o(F.value.start,L.value)),Z=h(()=>o(F.value.end,L.value)),Q=h(()=>D.maxValue?o(D.maxValue,L.value):void 0),$=h(()=>D.minValue?o(D.minValue,L.value):void 0),ue=e=>{e.key!==`ArrowLeft`&&e.key!==`ArrowRight`||(e.preventDefault(),J(K.value,e.key===`ArrowRight`?`next`:`prev`))};return re({locale:M,dir:N,modelValue:F,placeholder:I,isTimeUnavailable:D.isTimeUnavailable,isInvalid:R,disabled:h(()=>D.disabled),readonly:h(()=>D.readonly),formatter:P,hourCycle:D.hourCycle,step:ce,startSegmentValues:z,endSegmentValues:B,startSegmentContents:V,endSegmentContents:H,startInputType:Y,endInputType:Y,startInputValue:X,endInputValue:Z,inputMaxValue:Q,inputMinValue:$,startElements:U,endElements:W,focusedType:K,focusNext(e){J(e,`next`)},setFocusedElement(e,t){G.value=e,K.value=t}}),ae(q),(e,t)=>(x(),g(C(ne),{ref:C(j),as:v.as,"as-child":v.asChild,class:b(C(k)),"data-disabled":v.disabled?``:void 0,"data-invalid":R.value?``:void 0,"data-readonly":v.readonly?``:void 0,dir:C(N),"data-slot":`root`,role:`group`,onKeydown:ue},{default:T(()=>[oe(e.$slots,`default`,{endSegments:H.value,isInvalid:R.value,modelValue:C(F),startSegments:V.value}),_(C(m),{id:v.id,as:`input`,feature:`focusable`,type:Y.value,tabindex:`-1`,value:X.value,name:v.startName||v.name,disabled:v.disabled,required:v.required,max:Q.value,min:$.value,onFocus:t[0]||(t[0]=e=>U.value[0]?.focus())},null,8,[`id`,`type`,`value`,`name`,`disabled`,`required`,`max`,`min`]),_(C(m),{as:`input`,feature:`focusable`,type:Y.value,tabindex:`-1`,value:Z.value,name:v.endName,disabled:v.disabled,required:v.required,max:Q.value,min:$.value,onFocus:t[1]||(t[1]=e=>W.value[0]?.focus())},null,8,[`type`,`value`,`name`,`disabled`,`required`,`max`,`min`])]),_:3},8,[`as`,`as-child`,`class`,`data-disabled`,`data-invalid`,`data-readonly`,`dir`]))}});export{E as default};

package/dist/components/time-range-field/time-range-field-root.vue.d.ts

@@ -0,0 +1,53 @@
+import { TimeValue } from "../../date/comparators.js";
+import { DateStep, SegmentPart, TimeGranularity, TimeMatcher, TimeRange } from "../../date/types.js";
+import { TimeRangeFieldRootProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/time-range-field/time-range-field-root.vue.d.ts
+type __VLS_Slots = {
+  default?: (props: {
+    modelValue: TimeRange;
+    startSegments: {
+      part: SegmentPart;
+      value: string;
+    }[];
+    endSegments: {
+      part: SegmentPart;
+      value: string;
+    }[];
+    isInvalid: boolean;
+  }) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<TimeRangeFieldRootProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+  "update:modelValue": (range: TimeRange) => any;
+  "update:placeholder": (time: TimeValue) => any;
+  "update:startValue": (time: TimeValue | undefined) => any;
+  "update:endValue": (time: TimeValue | undefined) => any;
+}, string, _$vue.PublicProps, Readonly<TimeRangeFieldRootProps> & Readonly<{
+  "onUpdate:modelValue"?: ((range: TimeRange) => any) | undefined;
+  "onUpdate:placeholder"?: ((time: TimeValue) => any) | undefined;
+  "onUpdate:startValue"?: ((time: TimeValue | undefined) => any) | undefined;
+  "onUpdate:endValue"?: ((time: TimeValue | undefined) => any) | undefined;
+}>, {
+  placeholder: TimeValue;
+  disabled: boolean;
+  step: DateStep;
+  defaultValue: TimeRange;
+  defaultPlaceholder: TimeValue;
+  hourCycle: 12 | 24;
+  granularity: TimeGranularity;
+  hideTimeZone: boolean;
+  readonly: boolean;
+  isTimeUnavailable: TimeMatcher;
+  startName: string;
+  endName: string;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/time-range-field/types.d.ts

@@ -0,0 +1,88 @@
+import { Direction, UiClass } from "../../types/common.js";
+import { FormFieldCommonProps } from "../../types/component.js";
+import { PropsToContext } from "../../types/vue.js";
+import { PrimitiveProps } from "../primitive/types.js";
+import { TimeValue } from "../../date/comparators.js";
+import { DateStep, HourCycle, SegmentPart, SegmentValueObj, TimeGranularity, TimeInputType, TimeMatcher, TimeRange } from "../../date/types.js";
+import { Formatter } from "../../date/formatter.js";
+import { ComputedRef, HTMLAttributes, ShallowRef } from "vue";
+
+//#region src/components/time-range-field/types.d.ts
+interface TimeRangeFieldRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */Omit<HTMLAttributes, 'placeholder'> {
+  defaultValue?: TimeRange;
+  defaultPlaceholder?: TimeValue;
+  placeholder?: TimeValue;
+  modelValue?: TimeRange;
+  hourCycle?: HourCycle;
+  step?: DateStep;
+  granularity?: TimeGranularity;
+  hideTimeZone?: boolean;
+  maxValue?: TimeValue;
+  minValue?: TimeValue;
+  locale?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  isTimeUnavailable?: TimeMatcher;
+  id?: string;
+  dir?: Direction;
+  startName?: string;
+  endName?: string;
+}
+type TimeRangeFieldRootEmits = {
+  'update:modelValue': [range: TimeRange];
+  'update:placeholder': [time: TimeValue];
+  'update:startValue': [time: TimeValue | undefined];
+  'update:endValue': [time: TimeValue | undefined];
+};
+interface TimeRangeFieldInputProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {
+  part: SegmentPart;
+  type?: 'start' | 'end';
+}
+interface TimeRangeFieldSegment {
+  part: SegmentPart;
+  value: string;
+}
+interface TimeRangeFieldRootContext extends PropsToContext<TimeRangeFieldRootProps, 'disabled' | 'readonly'> {
+  locale: ComputedRef<string>;
+  dir: ComputedRef<Direction>;
+  modelValue: ShallowRef<TimeRange>;
+  placeholder: ShallowRef<TimeValue>;
+  isTimeUnavailable?: TimeMatcher;
+  isInvalid: ComputedRef<boolean>;
+  formatter: Formatter;
+  hourCycle: HourCycle;
+  step: ComputedRef<DateStep>;
+  startSegmentValues: ShallowRef<SegmentValueObj>;
+  endSegmentValues: ShallowRef<SegmentValueObj>;
+  startSegmentContents: ComputedRef<TimeRangeFieldSegment[]>;
+  endSegmentContents: ComputedRef<TimeRangeFieldSegment[]>;
+  startInputType: ComputedRef<TimeInputType>;
+  endInputType: ComputedRef<TimeInputType>;
+  startInputValue: ComputedRef<string>;
+  endInputValue: ComputedRef<string>;
+  inputMaxValue: ComputedRef<string | undefined>;
+  inputMinValue: ComputedRef<string | undefined>;
+  startElements: ShallowRef<HTMLElement[]>;
+  endElements: ShallowRef<HTMLElement[]>;
+  focusedType: ShallowRef<'start' | 'end'>;
+  focusNext: (type: 'start' | 'end') => void;
+  setFocusedElement: (el: HTMLElement, type: 'start' | 'end') => void;
+}
+type TimeRangeFieldUiSlot = 'root' | 'input' | 'separator';
+type TimeRangeFieldUi = UiClass<TimeRangeFieldUiSlot>;
+interface TimeRangeFieldCompactProps extends TimeRangeFieldRootProps {
+  inputProps?: Omit<TimeRangeFieldInputProps, 'part' | 'type'>;
+  separator?: string;
+}
+type TimeRangeFieldCompactEmits = TimeRangeFieldRootEmits;
+type TimeRangeFieldCompactSlots = {
+  default?: (props: {
+    startSegments: TimeRangeFieldSegment[];
+    endSegments: TimeRangeFieldSegment[];
+    modelValue: TimeRange;
+    isInvalid: boolean;
+  }) => any;
+  separator?: () => any;
+};
+//#endregion
+export { TimeRangeFieldCompactEmits, TimeRangeFieldCompactProps, TimeRangeFieldCompactSlots, TimeRangeFieldInputProps, TimeRangeFieldRootContext, TimeRangeFieldRootEmits, TimeRangeFieldRootProps, TimeRangeFieldSegment, TimeRangeFieldUi, TimeRangeFieldUiSlot };

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

@@ -0,0 +1,9 @@
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
+import { TimeRangePickerUiSlot } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/time-range-picker/context.d.ts
+declare const provideTimeRangePickerUi: (ui: _$vue.ComputedRef<Partial<UiClass<TimeRangePickerUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<TimeRangePickerUiSlot>>>, useTimeRangePickerUi: UseUiConsumer<TimeRangePickerUiSlot>;
+//#endregion
+export { provideTimeRangePickerUi };

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

@@ -0,0 +1 @@
+import{useContext as e}from"../../composables/use-context.js";import{useUiContext as t}from"../../composables/use-ui-context.js";import"../../composables/index.js";const[n,r]=e(`TimeRangePickerRoot`),[i,a]=t(`TimeRangePickerUi`);export{n as provideTimeRangePickerRootContext,i as provideTimeRangePickerUi,r as useTimeRangePickerRootContext,a as useTimeRangePickerUi};