@epilot/zenith-react 0.1.0 → 0.2.0-next.1

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

@@ -1,103 +1,108 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import * as Z from "react";
-import { SLOT_ATTR as _, mergeClasses as b } from "@epilot/zenith-runtime/v1";
-import { Field as q, FieldLabel as w, FieldError as z } from "../field/field.js";
-import { makeZenithStyles as B } from "../../styles/make-styles.js";
-import { DateTimePickerRoot as G } from "./date-time-picker-context.js";
-import { DateTimePickerInput as H } from "./date-time-picker-input.js";
-import { DateTimePickerPopover as J } from "./date-time-picker-popover.js";
-import { DateTimePickerPanel as K } from "./date-time-picker-panel.js";
-const Q = B({
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import * as o from "react";
+import { SLOT_ATTR as w, mergeClasses as z } from "@epilot/zenith-runtime/v1";
+import { Field as G, FieldLabel as H, FieldError as J } from "../field/field.js";
+import { makeZenithStyles as K } from "../../styles/make-styles.js";
+import { boxModel as Q } from "../../styles/host-reset.js";
+import { DateTimePickerRoot as U } from "./date-time-picker-context.js";
+import { DateTimePickerLabelProvider as W, DateTimePickerInput as X } from "./date-time-picker-input.js";
+import { DateTimePickerPopover as Y } from "./date-time-picker-popover.js";
+import { DateTimePickerPanel as $ } from "./date-time-picker-panel.js";
+const A = K({
   root: {
+    ...Q,
     width: "100%"
   }
-}), ie = Z.forwardRef(
+}), ce = o.forwardRef(
   function({
-    value: m,
-    onChange: a,
-    onBlur: d,
-    disabled: l = !1,
-    disablePast: s = !1,
-    label: o,
-    error: t,
-    placeholder: c,
-    format: n,
-    locale: f,
-    className: p,
-    keyboardIcon: y,
-    okLabel: h,
-    cancelLabel: k,
-    inputAriaLabel: v,
-    openPickerAriaLabel: P,
-    previousMonthLabel: T,
-    nextMonthLabel: u,
-    hoursLabel: D,
-    minutesLabel: F,
-    showTodayButton: M,
+    value: a,
+    onChange: c,
+    onBlur: n,
+    disabled: f = !1,
+    disablePast: p = !1,
+    label: t,
+    error: r,
+    placeholder: h,
+    format: y,
+    locale: u,
+    className: v,
+    keyboardIcon: P,
+    okLabel: k,
+    cancelLabel: T,
+    inputAriaLabel: i,
+    openPickerAriaLabel: D,
+    previousMonthLabel: M,
+    nextMonthLabel: F,
+    hoursLabel: I,
+    minutesLabel: g,
+    showTodayButton: x,
     todayLabel: R,
-    showWeekNumbers: g,
-    testId: x,
-    currentTimeInTimezone: S,
-    timePickerPosition: j,
-    showTimePicker: r = !0,
-    editable: L,
-    iconPosition: A,
-    minuteStep: C
-  }, E) {
-    const I = Q(), N = t ? "destructive" : "highlight", O = n ?? (r ? void 0 : "dd/MM/yyyy"), V = c ?? (r ? void 0 : "dd/MM/yyyy");
+    showWeekNumbers: S,
+    testId: j,
+    currentTimeInTimezone: L,
+    timePickerPosition: b,
+    showTimePicker: d = !0,
+    editable: B,
+    iconPosition: C,
+    minuteStep: E
+  }, N) {
+    const O = A(), V = r ? "destructive" : "highlight", m = o.useId(), l = o.useId(), Z = o.useMemo(
+      () => t ? { inputId: m, labelId: l, namedByLabel: i === void 0 } : null,
+      [t, m, l, i]
+    ), _ = y ?? (d ? void 0 : "dd/MM/yyyy"), q = h ?? (d ? void 0 : "dd/MM/yyyy");
     return /* @__PURE__ */ e(
-      G,
+      U,
       {
-        currentTimeInTimezone: S,
-        disabled: l,
-        disablePast: s,
-        format: O,
-        locale: f,
-        onBlur: d,
-        onChange: a,
-        value: m,
-        children: /* @__PURE__ */ i(
-          q,
+        currentTimeInTimezone: L,
+        disabled: f,
+        disablePast: p,
+        format: _,
+        locale: u,
+        onBlur: n,
+        onChange: c,
+        value: a,
+        children: /* @__PURE__ */ s(
+          G,
           {
-            className: b(I.root, p),
+            className: z(O.root, v),
             "data-slot": "datetimepicker",
-            [_]: "datetimepicker",
-            ref: E,
-            variant: N,
+            [w]: "datetimepicker",
+            ref: N,
+            variant: V,
             children: [
-              o && /* @__PURE__ */ e(w, { children: o }),
-              /* @__PURE__ */ i(J, { children: [
+              t && /* @__PURE__ */ e(H, { id: l, htmlFor: m, children: t }),
+              /* @__PURE__ */ e(W, { value: Z, children: /* @__PURE__ */ s(Y, { children: [
                 /* @__PURE__ */ e(
-                  H,
+                  X,
                   {
-                    editable: L,
-                    iconPosition: A,
-                    inputAriaLabel: v,
-                    keyboardIcon: y,
-                    openPickerAriaLabel: P,
-                    placeholder: V,
-                    testId: x
+                    editable: B,
+                    iconPosition: C,
+                    inputAriaLabel: i,
+                    keyboardIcon: P,
+                    openPickerAriaLabel: D,
+                    placeholder: q,
+                    testId: j
                   }
                 ),
                 /* @__PURE__ */ e(
-                  K,
+                  $,
                   {
-                    cancelLabel: k,
-                    hoursLabel: D,
-                    minuteStep: C,
-                    minutesLabel: F,
-                    nextMonthLabel: u,
-                    okLabel: h,
-                    previousMonthLabel: T,
-                    showTimePicker: r,
-                    showTodayButton: M,
-                    showWeekNumbers: g,
-                    timePickerPosition: j,
+                    cancelLabel: T,
+                    hoursLabel: I,
+                    minuteStep: E,
+                    minutesLabel: g,
+                    nextMonthLabel: F,
+                    okLabel: k,
+                    previousMonthLabel: M,
+                    showTimePicker: d,
+                    showTodayButton: x,
+                    showWeekNumbers: S,
+                    timePickerPosition: b,
                     todayLabel: R
                   }
                 )
-              ] }),
-              t && /* @__PURE__ */ e(z, { children: t })
+              ] }) }),
+              r && /* @__PURE__ */ e(J, { children: r })
             ]
           }
         )
@@ -106,10 +111,10 @@ const Q = B({
   }
 );
 export {
-  ie as DateTimePicker,
-  H as DateTimePickerInput,
-  K as DateTimePickerPanel,
-  J as DateTimePickerPopover,
-  G as DateTimePickerRoot
+  ce as DateTimePicker,
+  X as DateTimePickerInput,
+  $ as DateTimePickerPanel,
+  Y as DateTimePickerPopover,
+  U as DateTimePickerRoot
 };
 //# sourceMappingURL=date-time-picker.js.map

package/dist/components/date-time-picker/date-time-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-time-picker.js","sources":["../../../src/components/date-time-picker/date-time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { Field, FieldError, FieldLabel } from \"../field/field\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\n\nimport { DateTimePickerRoot } from \"./date-time-picker-context\"\nimport type { DateTimePickerRootProps } from \"./date-time-picker-context\"\nimport { DateTimePickerInput } from \"./date-time-picker-input\"\nimport type { DateTimePickerInputProps } from \"./date-time-picker-input\"\nimport { DateTimePickerPopover } from \"./date-time-picker-popover\"\nimport type { DateTimePickerPopoverProps } from \"./date-time-picker-popover\"\nimport { DateTimePickerPanel } from \"./date-time-picker-panel\"\nimport type { DateTimePickerPanelProps } from \"./date-time-picker-panel\"\nimport { Calendar } from \"./calendar\"\nimport type { CalendarProps } from \"./calendar\"\nimport { TimePicker } from \"./time-picker\"\nimport type { TimePickerProps } from \"./time-picker\"\nimport type { DateTimePickerLocale } from \"./date-time-picker-utils\"\n\ntype DateTimePickerProps = {\n  value: Date | null\n  onChange: (date: Date | null) => void\n  onBlur?: () => void\n  disabled?: boolean\n  disablePast?: boolean\n  label?: string\n  error?: string\n  placeholder?: string\n  format?: string\n  locale?: DateTimePickerLocale\n  className?: string\n  keyboardIcon?: React.ReactNode\n  okLabel?: string\n  cancelLabel?: string\n  inputAriaLabel?: string\n  openPickerAriaLabel?: string\n  previousMonthLabel?: string\n  nextMonthLabel?: string\n  hoursLabel?: string\n  minutesLabel?: string\n  showTodayButton?: boolean\n  todayLabel?: string\n  showWeekNumbers?: boolean\n  testId?: string\n  currentTimeInTimezone?: Date\n  timePickerPosition?: \"bottom\" | \"side\"\n  showTimePicker?: boolean\n  editable?: boolean\n  iconPosition?: \"start\" | \"end\"\n  minuteStep?: number\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    width: \"100%\",\n  },\n})\n\nconst DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(\n  function DateTimePicker(\n    {\n      value,\n      onChange,\n      onBlur,\n      disabled = false,\n      disablePast = false,\n      label,\n      error,\n      placeholder,\n      format,\n      locale,\n      className,\n      keyboardIcon,\n      okLabel,\n      cancelLabel,\n      inputAriaLabel,\n      openPickerAriaLabel,\n      previousMonthLabel,\n      nextMonthLabel,\n      hoursLabel,\n      minutesLabel,\n      showTodayButton,\n      todayLabel,\n      showWeekNumbers,\n      testId,\n      currentTimeInTimezone,\n      timePickerPosition,\n      showTimePicker = true,\n      editable,\n      iconPosition,\n      minuteStep,\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const fieldVariant = error ? \"destructive\" : \"highlight\"\n    const resolvedFormat = format ?? (showTimePicker ? undefined : \"dd/MM/yyyy\")\n    const resolvedPlaceholder =\n      placeholder ?? (showTimePicker ? undefined : \"dd/MM/yyyy\")\n\n    return (\n      <DateTimePickerRoot\n        currentTimeInTimezone={currentTimeInTimezone}\n        disabled={disabled}\n        disablePast={disablePast}\n        format={resolvedFormat}\n        locale={locale}\n        onBlur={onBlur}\n        onChange={onChange}\n        value={value}\n      >\n        <Field\n          className={mergeClasses(styles.root, className)}\n          data-slot=\"datetimepicker\"\n          {...{ [SLOT_ATTR]: \"datetimepicker\" }}\n          ref={ref}\n          variant={fieldVariant}\n        >\n          {label && <FieldLabel>{label}</FieldLabel>}\n          <DateTimePickerPopover>\n            <DateTimePickerInput\n              editable={editable}\n              iconPosition={iconPosition}\n              inputAriaLabel={inputAriaLabel}\n              keyboardIcon={keyboardIcon}\n              openPickerAriaLabel={openPickerAriaLabel}\n              placeholder={resolvedPlaceholder}\n              testId={testId}\n            />\n            <DateTimePickerPanel\n              cancelLabel={cancelLabel}\n              hoursLabel={hoursLabel}\n              minuteStep={minuteStep}\n              minutesLabel={minutesLabel}\n              nextMonthLabel={nextMonthLabel}\n              okLabel={okLabel}\n              previousMonthLabel={previousMonthLabel}\n              showTimePicker={showTimePicker}\n              showTodayButton={showTodayButton}\n              showWeekNumbers={showWeekNumbers}\n              timePickerPosition={timePickerPosition}\n              todayLabel={todayLabel}\n            />\n          </DateTimePickerPopover>\n          {error && <FieldError>{error}</FieldError>}\n        </Field>\n      </DateTimePickerRoot>\n    )\n  }\n)\n\nexport {\n  DateTimePicker,\n  DateTimePickerRoot,\n  DateTimePickerInput,\n  DateTimePickerPopover,\n  DateTimePickerPanel,\n  Calendar,\n  TimePicker,\n}\n\nexport type {\n  DateTimePickerProps,\n  DateTimePickerRootProps,\n  DateTimePickerInputProps,\n  DateTimePickerPopoverProps,\n  DateTimePickerPanelProps,\n  CalendarProps,\n  TimePickerProps,\n  DateTimePickerLocale,\n}\n"],"names":["useStyles","makeZenithStyles","DateTimePicker","React","value","onChange","onBlur","disabled","disablePast","label","error","placeholder","format","locale","className","keyboardIcon","okLabel","cancelLabel","inputAriaLabel","openPickerAriaLabel","previousMonthLabel","nextMonthLabel","hoursLabel","minutesLabel","showTodayButton","todayLabel","showWeekNumbers","testId","currentTimeInTimezone","timePickerPosition","showTimePicker","editable","iconPosition","minuteStep","ref","styles","fieldVariant","resolvedFormat","resolvedPlaceholder","jsx","DateTimePickerRoot","jsxs","Field","mergeClasses","SLOT_ATTR","FieldLabel","DateTimePickerPopover","DateTimePickerInput","DateTimePickerPanel","FieldError"],"mappings":";;;;;;;;;AAsDA,MAAMA,IAAYC,EAAiB;AAAA,EACjC,MAAM;AAAA,IACJ,OAAO;AAAA,EAAA;AAEX,CAAC,GAEKC,KAAiBC,EAAM;AAAA,EAC3B,SACE;AAAA,IACE,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,aAAAC,IAAc;AAAA,IACd,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,QAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,GAEFC,GACA;AACA,UAAMC,IAASnC,EAAA,GACToC,IAAe1B,IAAQ,gBAAgB,aACvC2B,IAAiBzB,MAAWkB,IAAiB,SAAY,eACzDQ,IACJ3B,MAAgBmB,IAAiB,SAAY;AAE/C,WACE,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,uBAAAZ;AAAA,QACA,UAAArB;AAAA,QACA,aAAAC;AAAA,QACA,QAAQ6B;AAAA,QACR,QAAAxB;AAAA,QACA,QAAAP;AAAA,QACA,UAAAD;AAAA,QACA,OAAAD;AAAA,QAEA,UAAA,gBAAAqC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAaR,EAAO,MAAMrB,CAAS;AAAA,YAC9C,aAAU;AAAA,YACJ,CAAC8B,CAAS,GAAG;AAAA,YACnB,KAAAV;AAAA,YACA,SAASE;AAAA,YAER,UAAA;AAAA,cAAA3B,KAAS,gBAAA8B,EAACM,KAAY,UAAApC,EAAA,CAAM;AAAA,gCAC5BqC,GAAA,EACC,UAAA;AAAA,gBAAA,gBAAAP;AAAA,kBAACQ;AAAA,kBAAA;AAAA,oBACC,UAAAhB;AAAA,oBACA,cAAAC;AAAA,oBACA,gBAAAd;AAAA,oBACA,cAAAH;AAAA,oBACA,qBAAAI;AAAA,oBACA,aAAamB;AAAA,oBACb,QAAAX;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEF,gBAAAY;AAAA,kBAACS;AAAA,kBAAA;AAAA,oBACC,aAAA/B;AAAA,oBACA,YAAAK;AAAA,oBACA,YAAAW;AAAA,oBACA,cAAAV;AAAA,oBACA,gBAAAF;AAAA,oBACA,SAAAL;AAAA,oBACA,oBAAAI;AAAA,oBACA,gBAAAU;AAAA,oBACA,iBAAAN;AAAA,oBACA,iBAAAE;AAAA,oBACA,oBAAAG;AAAA,oBACA,YAAAJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cACCf,KAAS,gBAAA6B,EAACU,GAAA,EAAY,UAAAvC,EAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC/B;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"date-time-picker.js","sources":["../../../src/components/date-time-picker/date-time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { Field, FieldError, FieldLabel } from \"../field/field\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\n\nimport { DateTimePickerRoot } from \"./date-time-picker-context\"\nimport type { DateTimePickerRootProps } from \"./date-time-picker-context\"\nimport {\n  DateTimePickerInput,\n  DateTimePickerLabelProvider,\n} from \"./date-time-picker-input\"\nimport type { DateTimePickerInputProps } from \"./date-time-picker-input\"\nimport { DateTimePickerPopover } from \"./date-time-picker-popover\"\nimport type { DateTimePickerPopoverProps } from \"./date-time-picker-popover\"\nimport { DateTimePickerPanel } from \"./date-time-picker-panel\"\nimport type { DateTimePickerPanelProps } from \"./date-time-picker-panel\"\nimport { Calendar } from \"./calendar\"\nimport type { CalendarProps } from \"./calendar\"\nimport { TimePicker } from \"./time-picker\"\nimport type { TimePickerProps } from \"./time-picker\"\nimport type { DateTimePickerLocale } from \"./date-time-picker-utils\"\n\ntype DateTimePickerProps = {\n  value: Date | null\n  onChange: (date: Date | null) => void\n  onBlur?: () => void\n  disabled?: boolean\n  disablePast?: boolean\n  label?: string\n  error?: string\n  placeholder?: string\n  format?: string\n  locale?: DateTimePickerLocale\n  className?: string\n  keyboardIcon?: React.ReactNode\n  okLabel?: string\n  cancelLabel?: string\n  inputAriaLabel?: string\n  openPickerAriaLabel?: string\n  previousMonthLabel?: string\n  nextMonthLabel?: string\n  hoursLabel?: string\n  minutesLabel?: string\n  showTodayButton?: boolean\n  todayLabel?: string\n  showWeekNumbers?: boolean\n  testId?: string\n  currentTimeInTimezone?: Date\n  timePickerPosition?: \"bottom\" | \"side\"\n  showTimePicker?: boolean\n  editable?: boolean\n  iconPosition?: \"start\" | \"end\"\n  minuteStep?: number\n}\n\nconst useStyles = makeZenithStyles({\n  root: {\n    ...boxModel,\n    width: \"100%\",\n  },\n})\n\nconst DateTimePicker = React.forwardRef<HTMLDivElement, DateTimePickerProps>(\n  function DateTimePicker(\n    {\n      value,\n      onChange,\n      onBlur,\n      disabled = false,\n      disablePast = false,\n      label,\n      error,\n      placeholder,\n      format,\n      locale,\n      className,\n      keyboardIcon,\n      okLabel,\n      cancelLabel,\n      inputAriaLabel,\n      openPickerAriaLabel,\n      previousMonthLabel,\n      nextMonthLabel,\n      hoursLabel,\n      minutesLabel,\n      showTodayButton,\n      todayLabel,\n      showWeekNumbers,\n      testId,\n      currentTimeInTimezone,\n      timePickerPosition,\n      showTimePicker = true,\n      editable,\n      iconPosition,\n      minuteStep,\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const fieldVariant = error ? \"destructive\" : \"highlight\"\n    // This component renders both the label and the input, so it connects them (#16).\n    const inputId = React.useId()\n    const labelId = React.useId()\n    const labelling = React.useMemo(\n      () =>\n        label\n          ? { inputId, labelId, namedByLabel: inputAriaLabel === undefined }\n          : null,\n      [label, inputId, labelId, inputAriaLabel]\n    )\n    const resolvedFormat = format ?? (showTimePicker ? undefined : \"dd/MM/yyyy\")\n    const resolvedPlaceholder =\n      placeholder ?? (showTimePicker ? undefined : \"dd/MM/yyyy\")\n\n    return (\n      <DateTimePickerRoot\n        currentTimeInTimezone={currentTimeInTimezone}\n        disabled={disabled}\n        disablePast={disablePast}\n        format={resolvedFormat}\n        locale={locale}\n        onBlur={onBlur}\n        onChange={onChange}\n        value={value}\n      >\n        <Field\n          className={mergeClasses(styles.root, className)}\n          data-slot=\"datetimepicker\"\n          {...{ [SLOT_ATTR]: \"datetimepicker\" }}\n          ref={ref}\n          variant={fieldVariant}\n        >\n          {label && (\n            <FieldLabel id={labelId} htmlFor={inputId}>\n              {label}\n            </FieldLabel>\n          )}\n          <DateTimePickerLabelProvider value={labelling}>\n            <DateTimePickerPopover>\n              <DateTimePickerInput\n                editable={editable}\n                iconPosition={iconPosition}\n                inputAriaLabel={inputAriaLabel}\n                keyboardIcon={keyboardIcon}\n                openPickerAriaLabel={openPickerAriaLabel}\n                placeholder={resolvedPlaceholder}\n                testId={testId}\n              />\n              <DateTimePickerPanel\n                cancelLabel={cancelLabel}\n                hoursLabel={hoursLabel}\n                minuteStep={minuteStep}\n                minutesLabel={minutesLabel}\n                nextMonthLabel={nextMonthLabel}\n                okLabel={okLabel}\n                previousMonthLabel={previousMonthLabel}\n                showTimePicker={showTimePicker}\n                showTodayButton={showTodayButton}\n                showWeekNumbers={showWeekNumbers}\n                timePickerPosition={timePickerPosition}\n                todayLabel={todayLabel}\n              />\n            </DateTimePickerPopover>\n          </DateTimePickerLabelProvider>\n          {error && <FieldError>{error}</FieldError>}\n        </Field>\n      </DateTimePickerRoot>\n    )\n  }\n)\n\nexport {\n  DateTimePicker,\n  DateTimePickerRoot,\n  DateTimePickerInput,\n  DateTimePickerPopover,\n  DateTimePickerPanel,\n  Calendar,\n  TimePicker,\n}\n\nexport type {\n  DateTimePickerProps,\n  DateTimePickerRootProps,\n  DateTimePickerInputProps,\n  DateTimePickerPopoverProps,\n  DateTimePickerPanelProps,\n  CalendarProps,\n  TimePickerProps,\n  DateTimePickerLocale,\n}\n"],"names":["useStyles","makeZenithStyles","boxModel","DateTimePicker","React","value","onChange","onBlur","disabled","disablePast","label","error","placeholder","format","locale","className","keyboardIcon","okLabel","cancelLabel","inputAriaLabel","openPickerAriaLabel","previousMonthLabel","nextMonthLabel","hoursLabel","minutesLabel","showTodayButton","todayLabel","showWeekNumbers","testId","currentTimeInTimezone","timePickerPosition","showTimePicker","editable","iconPosition","minuteStep","ref","styles","fieldVariant","inputId","labelId","labelling","resolvedFormat","resolvedPlaceholder","jsx","DateTimePickerRoot","jsxs","Field","mergeClasses","SLOT_ATTR","FieldLabel","DateTimePickerLabelProvider","DateTimePickerPopover","DateTimePickerInput","DateTimePickerPanel","FieldError"],"mappings":"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"}

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

@@ -1,45 +1,52 @@
-import { jsxs as O, jsx as d } from "react/jsx-runtime";
+import { jsxs as U, jsx as m } from "react/jsx-runtime";
 import * as n from "react";
-import { SLOT_ATTR as x, mergeClasses as h, shorthands as k } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as U } from "../../styles/make-styles.js";
-import { accentSolidHover as V, accentContrast as _, accentSolid as z, fontWeightSemibold as F, grayA4 as G, grayA11 as L, leadingSm as X, textSm as Z, grayA8 as J, leadingBase as K, textBase as P, grayA6 as Q, radiusMd as N, grayA5 as tt, spacingElement1 as et } from "../../tokens/index.js";
-import { getHours as rt, getMinutes as ot, updateTime as R, padNumber as nt } from "./date-time-picker-utils.js";
-const lt = Array.from({ length: 24 }, (w, e) => e), A = U({
+import { SLOT_ATTR as M, mergeClasses as g, shorthands as y } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as V } from "../../styles/make-styles.js";
+import { nativeControl as _, boxModel as h } from "../../styles/host-reset.js";
+import { accentSolidHover as z, accentContrast as G, accentSolid as L, fontWeightSemibold as N, grayA4 as X, grayA11 as Z, leadingSm as J, textSm as K, grayA8 as P, leadingBase as Q, textBase as tt, grayA6 as et, radiusMd as R, grayA5 as rt, spacingElement1 as ot } from "../../tokens/index.js";
+import { getHours as nt, getMinutes as lt, updateTime as A, padNumber as it } from "./date-time-picker-utils.js";
+const st = Array.from({ length: 24 }, (S, e) => e), I = V({
   root: {
     display: "flex",
     flexDirection: "row",
     alignItems: "stretch",
     justifyContent: "center",
-    ...k.gap(et)
+    ...y.gap(ot)
   },
   fillHeight: {
+    ...h,
     height: "100%"
   },
   column: {
+    ...h,
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     width: "3.5rem"
   },
   columnFillHeight: {
+    ...h,
     minHeight: "0"
   },
   scroll: {
+    ...h,
     display: "flex",
     flexDirection: "column",
     overflowY: "auto",
     overflowX: "hidden",
     width: "100%",
     alignItems: "center",
-    ...k.borderRadius(N),
-    ...k.border("1px", "solid", tt),
+    ...y.borderRadius(R),
+    ...y.border("1px", "solid", rt),
     scrollbarWidth: "thin",
-    scrollbarColor: `${Q} transparent`
+    scrollbarColor: `${et} transparent`
   },
   scrollFixed: {
+    ...h,
     height: "8rem"
   },
   scrollFill: {
+    ...h,
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "0%",
@@ -49,39 +56,40 @@ const lt = Array.from({ length: 24 }, (w, e) => e), A = U({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: P,
-    lineHeight: K,
-    fontWeight: F,
-    color: J
+    fontSize: tt,
+    lineHeight: Q,
+    fontWeight: N,
+    color: P
   },
   timeBtn: {
+    ..._,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: Z,
-    lineHeight: X,
-    ...k.borderRadius(N),
+    fontSize: K,
+    lineHeight: J,
+    ...y.borderRadius(R),
     transitionProperty: "background-color, color",
     transitionDuration: "150ms",
     minHeight: "2rem",
     width: "100%",
     maxWidth: "3rem",
-    ...k.border("0"),
+    ...y.border("0"),
     outlineStyle: "none"
   },
   timeBtnDefault: {
     backgroundColor: "transparent",
-    color: L,
+    color: Z,
     ":hover": {
-      backgroundColor: G
+      backgroundColor: X
     }
   },
   timeBtnSelected: {
-    fontWeight: F,
-    backgroundColor: z,
-    color: _,
+    fontWeight: N,
+    backgroundColor: L,
+    color: G,
     ":hover": {
-      backgroundColor: V
+      backgroundColor: z
     }
   },
   timeBtnDisabled: {
@@ -91,21 +99,21 @@ const lt = Array.from({ length: 24 }, (w, e) => e), A = U({
   timeBtnEnabled: {
     cursor: "pointer"
   }
-}), H = n.memo(function({
+}), w = n.memo(function({
   value: e,
   isSelected: a,
   isDisabled: l,
-  onClick: m
+  onClick: d
 }) {
-  const c = A(), f = n.useCallback(() => {
-    l || m(e);
-  }, [m, e, l]);
-  return /* @__PURE__ */ d(
+  const c = I(), f = n.useCallback(() => {
+    l || d(e);
+  }, [d, e, l]);
+  return /* @__PURE__ */ m(
     "button",
     {
       "aria-disabled": l,
       "aria-pressed": a,
-      className: h(
+      className: g(
         c.timeBtn,
         !a && c.timeBtnDefault,
         a && c.timeBtnSelected,
@@ -113,62 +121,62 @@ const lt = Array.from({ length: 24 }, (w, e) => e), A = U({
       ),
       "data-selected": a,
       "data-slot": "time-button",
-      [x]: "time-button",
+      [M]: "time-button",
       "data-value": e,
       disabled: l,
       onClick: f,
       type: "button",
-      children: nt(e)
+      children: it(e)
     }
   );
 });
-H.displayName = "TimeButton";
-const dt = n.forwardRef(
+w.displayName = "TimeButton";
+const ht = n.forwardRef(
   function({
     value: e,
     onChange: a,
     onTimeSelect: l,
-    disablePast: m = !1,
+    disablePast: d = !1,
     currentTimeInTimezone: c,
     fillHeight: f = !1,
-    minuteStep: I = 1,
-    className: j,
-    hoursLabel: W = "Hours",
-    minutesLabel: T = "Minutes"
+    minuteStep: j = 1,
+    className: W,
+    hoursLabel: T = "Hours",
+    minutesLabel: v = "Minutes"
   }, E) {
-    const r = A(), g = Math.max(1, Math.floor(I)), M = n.useMemo(() => {
+    const r = I(), p = Math.max(1, Math.floor(j)), C = n.useMemo(() => {
       const t = [];
-      for (let s = 0; s < 60; s += g) t.push(s);
+      for (let s = 0; s < 60; s += p) t.push(s);
       return t;
-    }, [g]), u = e !== null ? rt(e) : -1, S = e !== null ? ot(e) : -1, p = e === null ? -1 : g === 1 ? S : Math.min(
-      M[M.length - 1],
-      Math.round(S / g) * g
-    ), C = n.useRef(null), B = n.useRef(null), i = n.useMemo(
+    }, [p]), u = e !== null ? nt(e) : -1, D = e !== null ? lt(e) : -1, b = e === null ? -1 : p === 1 ? D : Math.min(
+      C[C.length - 1],
+      Math.round(D / p) * p
+    ), B = n.useRef(null), H = n.useRef(null), i = n.useMemo(
       () => c || /* @__PURE__ */ new Date(),
       [c]
-    ), y = n.useMemo(() => e ? e.getFullYear() === i.getFullYear() && e.getMonth() === i.getMonth() && e.getDate() === i.getDate() : !1, [e, i]), b = i.getHours(), D = i.getMinutes(), Y = n.useCallback(
-      (t) => !m || !y ? !1 : t < b,
-      [m, y, b]
+    ), x = n.useMemo(() => e ? e.getFullYear() === i.getFullYear() && e.getMonth() === i.getMonth() && e.getDate() === i.getDate() : !1, [e, i]), k = i.getHours(), F = i.getMinutes(), Y = n.useCallback(
+      (t) => !d || !x ? !1 : t < k,
+      [d, x, k]
     ), $ = n.useCallback(
-      (t) => !m || !y ? !1 : u < b ? !0 : u === b ? t < D : !1,
-      [m, y, u, b, D]
+      (t) => !d || !x ? !1 : u < k ? !0 : u === k ? t < F : !1,
+      [d, x, u, k, F]
     ), q = n.useCallback(
       (t) => {
-        const s = e || i, o = p >= 0 ? p : 0;
-        a(R(s, t, o));
+        const s = e || i, o = b >= 0 ? b : 0;
+        a(A(s, t, o));
       },
-      [a, e, i, p]
-    ), v = n.useCallback(
+      [a, e, i, b]
+    ), O = n.useCallback(
       (t) => {
         const s = e || i, o = u >= 0 ? u : 0;
-        a(R(s, o, t)), l == null || l();
+        a(A(s, o, t)), l == null || l();
       },
       [a, l, e, i, u]
     );
     return n.useEffect(() => {
       var t, s;
-      if (C.current) {
-        const o = C.current.querySelector(
+      if (B.current) {
+        const o = B.current.querySelector(
           `[data-value="${u}"]`
         );
         o && ((t = o.scrollIntoView) == null || t.call(o, {
@@ -176,48 +184,48 @@ const dt = n.forwardRef(
           behavior: "auto"
         }));
       }
-      if (B.current) {
-        const o = B.current.querySelector(
-          `[data-value="${p}"]`
+      if (H.current) {
+        const o = H.current.querySelector(
+          `[data-value="${b}"]`
         );
         o && ((s = o.scrollIntoView) == null || s.call(o, {
           block: "center",
           behavior: "auto"
         }));
       }
-    }, []), /* @__PURE__ */ O(
+    }, []), /* @__PURE__ */ U(
       "div",
       {
         ref: E,
-        className: h(
+        className: g(
           r.root,
           f && r.fillHeight,
-          j
+          W
         ),
         "data-slot": "timepicker",
-        [x]: "timepicker",
+        [M]: "timepicker",
         children: [
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ m(
             "div",
             {
-              className: h(
+              className: g(
                 r.column,
                 f && r.columnFillHeight
               ),
-              children: /* @__PURE__ */ d(
+              children: /* @__PURE__ */ m(
                 "div",
                 {
-                  className: h(
+                  className: g(
                     r.scroll,
                     f ? r.scrollFill : r.scrollFixed
                   ),
-                  "aria-label": W,
+                  "aria-label": T,
                   "data-slot": "timepicker-scroll",
                   role: "group",
-                  [x]: "timepicker-scroll",
-                  ref: C,
-                  children: lt.map((t) => /* @__PURE__ */ d(
-                    H,
+                  [M]: "timepicker-scroll",
+                  ref: B,
+                  children: st.map((t) => /* @__PURE__ */ m(
+                    w,
                     {
                       isDisabled: Y(t),
                       isSelected: t === u,
@@ -230,32 +238,32 @@ const dt = n.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ d("div", { className: r.separator, children: ":" }),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ m("div", { className: r.separator, children: ":" }),
+          /* @__PURE__ */ m(
             "div",
             {
-              className: h(
+              className: g(
                 r.column,
                 f && r.columnFillHeight
               ),
-              children: /* @__PURE__ */ d(
+              children: /* @__PURE__ */ m(
                 "div",
                 {
-                  className: h(
+                  className: g(
                     r.scroll,
                     f ? r.scrollFill : r.scrollFixed
                   ),
-                  "aria-label": T,
+                  "aria-label": v,
                   "data-slot": "timepicker-scroll",
                   role: "group",
-                  [x]: "timepicker-scroll",
-                  ref: B,
-                  children: M.map((t) => /* @__PURE__ */ d(
-                    H,
+                  [M]: "timepicker-scroll",
+                  ref: H,
+                  children: C.map((t) => /* @__PURE__ */ m(
+                    w,
                     {
                       isDisabled: $(t),
-                      isSelected: t === p,
-                      onClick: v,
+                      isSelected: t === b,
+                      onClick: O,
                       value: t
                     },
                     t
@@ -270,6 +278,6 @@ const dt = n.forwardRef(
   }
 );
 export {
-  dt as TimePicker
+  ht as TimePicker
 };
 //# sourceMappingURL=time-picker.js.map