@epilot/volt-ui-experimental-griffel 0.1.0-experiment.1

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

@@ -0,0 +1,112 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import * as N from "react";
+import { Field as O, FieldLabel as _, FieldError as b } from "../field/field.js";
+import { SLOT_ATTR as q } from "../../renderer/contract.js";
+import { makeVoltStyles as w } from "../../styles/make-styles.js";
+import { DateTimePickerRoot as z } from "./date-time-picker-context.js";
+import { DateTimePickerInput as B } from "./date-time-picker-input.js";
+import { DateTimePickerPopover as G } from "./date-time-picker-popover.js";
+import { DateTimePickerPanel as H } from "./date-time-picker-panel.js";
+import { mergeClasses as J } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const K = w({
+  root: {
+    width: "100%"
+  }
+}), oe = N.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,
+    showTodayButton: D,
+    todayLabel: F,
+    showWeekNumbers: M,
+    testId: R,
+    currentTimeInTimezone: g,
+    timePickerPosition: x,
+    showTimePicker: r = !0,
+    editable: S,
+    iconPosition: j,
+    minuteStep: L
+  }, V) {
+    const A = K(), C = t ? "destructive" : "highlight", E = n ?? (r ? void 0 : "dd/MM/yyyy"), I = c ?? (r ? void 0 : "dd/MM/yyyy");
+    return /* @__PURE__ */ e(
+      z,
+      {
+        currentTimeInTimezone: g,
+        disabled: l,
+        disablePast: s,
+        format: E,
+        locale: f,
+        onBlur: d,
+        onChange: a,
+        value: m,
+        children: /* @__PURE__ */ i(
+          O,
+          {
+            className: J(A.root, p),
+            "data-slot": "datetimepicker",
+            [q]: "datetimepicker",
+            ref: V,
+            variant: C,
+            children: [
+              o && /* @__PURE__ */ e(_, { children: o }),
+              /* @__PURE__ */ i(G, { children: [
+                /* @__PURE__ */ e(
+                  B,
+                  {
+                    editable: S,
+                    iconPosition: j,
+                    inputAriaLabel: v,
+                    keyboardIcon: y,
+                    openPickerAriaLabel: P,
+                    placeholder: I,
+                    testId: R
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  H,
+                  {
+                    cancelLabel: k,
+                    minuteStep: L,
+                    nextMonthLabel: u,
+                    okLabel: h,
+                    previousMonthLabel: T,
+                    showTimePicker: r,
+                    showTodayButton: D,
+                    showWeekNumbers: M,
+                    timePickerPosition: x,
+                    todayLabel: F
+                  }
+                )
+              ] }),
+              t && /* @__PURE__ */ e(b, { children: t })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  oe as DateTimePicker,
+  B as DateTimePickerInput,
+  H as DateTimePickerPanel,
+  G as DateTimePickerPopover,
+  z as DateTimePickerRoot
+};
+//# sourceMappingURL=date-time-picker.js.map

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

@@ -0,0 +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 \"@griffel/core\"\n\nimport { Field, FieldError, FieldLabel } from \"../field/field\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } 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  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 = makeVoltStyles({\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      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              minuteStep={minuteStep}\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","makeVoltStyles","DateTimePicker","React","value","onChange","onBlur","disabled","disablePast","label","error","placeholder","format","locale","className","keyboardIcon","okLabel","cancelLabel","inputAriaLabel","openPickerAriaLabel","previousMonthLabel","nextMonthLabel","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":";;;;;;;;;;AAoDA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,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,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,IAASjC,EAAA,GACTkC,IAAexB,IAAQ,gBAAgB,aACvCyB,IAAiBvB,MAAWgB,IAAiB,SAAY,eACzDQ,IACJzB,MAAgBiB,IAAiB,SAAY;AAE/C,WACE,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,uBAAAZ;AAAA,QACA,UAAAnB;AAAA,QACA,aAAAC;AAAA,QACA,QAAQ2B;AAAA,QACR,QAAAtB;AAAA,QACA,QAAAP;AAAA,QACA,UAAAD;AAAA,QACA,OAAAD;AAAA,QAEA,UAAA,gBAAAmC;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAaR,EAAO,MAAMnB,CAAS;AAAA,YAC9C,aAAU;AAAA,YACJ,CAAC4B,CAAS,GAAG;AAAA,YACnB,KAAAV;AAAA,YACA,SAASE;AAAA,YAER,UAAA;AAAA,cAAAzB,KAAS,gBAAA4B,EAACM,KAAY,UAAAlC,EAAA,CAAM;AAAA,gCAC5BmC,GAAA,EACC,UAAA;AAAA,gBAAA,gBAAAP;AAAA,kBAACQ;AAAA,kBAAA;AAAA,oBACC,UAAAhB;AAAA,oBACA,cAAAC;AAAA,oBACA,gBAAAZ;AAAA,oBACA,cAAAH;AAAA,oBACA,qBAAAI;AAAA,oBACA,aAAaiB;AAAA,oBACb,QAAAX;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEF,gBAAAY;AAAA,kBAACS;AAAA,kBAAA;AAAA,oBACC,aAAA7B;AAAA,oBACA,YAAAc;AAAA,oBACA,gBAAAV;AAAA,oBACA,SAAAL;AAAA,oBACA,oBAAAI;AAAA,oBACA,gBAAAQ;AAAA,oBACA,iBAAAN;AAAA,oBACA,iBAAAE;AAAA,oBACA,oBAAAG;AAAA,oBACA,YAAAJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF,GACF;AAAA,cACCb,KAAS,gBAAA2B,EAACU,GAAA,EAAY,UAAArC,EAAA,CAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC/B;AAAA,IAAA;AAAA,EAGN;AACF;"}

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+export type TimePickerProps = {
+    value: Date | null;
+    onChange: (date: Date) => void;
+    onTimeSelect?: () => void;
+    disablePast?: boolean;
+    currentTimeInTimezone?: Date;
+    fillHeight?: boolean;
+    minuteStep?: number;
+    className?: string;
+};
+export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,269 @@
+import { jsxs as $, jsx as u } from "react/jsx-runtime";
+import * as n from "react";
+import { shorthands as k } from "../../node_modules/@griffel/core/src/index.js";
+import { SLOT_ATTR as x } from "../../renderer/contract.js";
+import { makeVoltStyles as q } from "../../styles/make-styles.js";
+import { grayA5 as v, semAccentSolidHover as O, semAccentContrast as U, semAccentSolid as _, fontWeightSemibold as S, grayA4 as z, grayA11 as G, textSm as L, grayA8 as X, textBase as J, grayA6 as K, radiusMd as A, spacingElement1 as P } from "../../tokens/index.js";
+import { getHours as Q, getMinutes as Z, updateTime as N, padNumber as tt } from "./date-time-picker-utils.js";
+import { mergeClasses as h } from "../../node_modules/@griffel/core/src/mergeClasses.js";
+const et = Array.from({ length: 24 }, (H, e) => e), R = q({
+  root: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "stretch",
+    justifyContent: "center",
+    ...k.gap(P)
+  },
+  fillHeight: {
+    height: "100%"
+  },
+  column: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    width: "3.5rem"
+  },
+  columnFillHeight: {
+    minHeight: "0"
+  },
+  scroll: {
+    display: "flex",
+    flexDirection: "column",
+    overflowY: "auto",
+    overflowX: "hidden",
+    width: "100%",
+    alignItems: "center",
+    ...k.borderRadius(A),
+    ...k.border("1px", "solid", v),
+    scrollbarWidth: "thin",
+    scrollbarColor: `${K} transparent`
+  },
+  scrollFixed: {
+    height: "8rem"
+  },
+  scrollFill: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    minHeight: "0"
+  },
+  separator: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: J,
+    fontWeight: S,
+    color: X
+  },
+  timeBtn: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: L,
+    ...k.borderRadius(A),
+    transitionProperty: "background-color, color",
+    transitionDuration: "150ms",
+    minHeight: "2rem",
+    width: "100%",
+    maxWidth: "3rem",
+    ...k.border("0"),
+    outlineStyle: "none"
+  },
+  timeBtnDefault: {
+    backgroundColor: "transparent",
+    color: G,
+    ":hover": {
+      backgroundColor: z
+    }
+  },
+  timeBtnSelected: {
+    fontWeight: S,
+    backgroundColor: _,
+    color: U,
+    ":hover": {
+      backgroundColor: O
+    }
+  },
+  timeBtnDisabled: {
+    cursor: "not-allowed",
+    opacity: 0.5
+  },
+  timeBtnEnabled: {
+    cursor: "pointer"
+  }
+}), w = n.memo(function({
+  value: e,
+  isSelected: c,
+  isDisabled: l,
+  onClick: d
+}) {
+  const a = R(), f = n.useCallback(() => {
+    l || d(e);
+  }, [d, e, l]);
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      "aria-disabled": l,
+      "aria-pressed": c,
+      className: h(
+        a.timeBtn,
+        !c && a.timeBtnDefault,
+        c && a.timeBtnSelected,
+        l ? a.timeBtnDisabled : a.timeBtnEnabled
+      ),
+      "data-selected": c,
+      "data-slot": "time-button",
+      [x]: "time-button",
+      "data-value": e,
+      disabled: l,
+      onClick: f,
+      type: "button",
+      children: tt(e)
+    }
+  );
+});
+w.displayName = "TimeButton";
+const at = n.forwardRef(
+  function({
+    value: e,
+    onChange: c,
+    onTimeSelect: l,
+    disablePast: d = !1,
+    currentTimeInTimezone: a,
+    fillHeight: f = !1,
+    minuteStep: I = 1,
+    className: j
+  }, W) {
+    const r = R(), p = Math.max(1, Math.floor(I)), M = n.useMemo(() => {
+      const t = [];
+      for (let i = 0; i < 60; i += p) t.push(i);
+      return t;
+    }, [p]), m = e !== null ? Q(e) : -1, D = e !== null ? Z(e) : -1, g = e === null ? -1 : p === 1 ? D : Math.min(
+      M[M.length - 1],
+      Math.round(D / p) * p
+    ), C = n.useRef(null), B = n.useRef(null), s = n.useMemo(
+      () => a || /* @__PURE__ */ new Date(),
+      [a]
+    ), y = n.useMemo(() => e ? e.getFullYear() === s.getFullYear() && e.getMonth() === s.getMonth() && e.getDate() === s.getDate() : !1, [e, s]), b = s.getHours(), F = s.getMinutes(), T = n.useCallback(
+      (t) => !d || !y ? !1 : t < b,
+      [d, y, b]
+    ), E = n.useCallback(
+      (t) => !d || !y ? !1 : m < b ? !0 : m === b ? t < F : !1,
+      [d, y, m, b, F]
+    ), V = n.useCallback(
+      (t) => {
+        const i = e || s, o = g >= 0 ? g : 0;
+        c(N(i, t, o));
+      },
+      [c, e, s, g]
+    ), Y = n.useCallback(
+      (t) => {
+        const i = e || s, o = m >= 0 ? m : 0;
+        c(N(i, o, t)), l == null || l();
+      },
+      [c, l, e, s, m]
+    );
+    return n.useEffect(() => {
+      var t, i;
+      if (C.current) {
+        const o = C.current.querySelector(
+          `[data-value="${m}"]`
+        );
+        o && ((t = o.scrollIntoView) == null || t.call(o, {
+          block: "center",
+          behavior: "auto"
+        }));
+      }
+      if (B.current) {
+        const o = B.current.querySelector(
+          `[data-value="${g}"]`
+        );
+        o && ((i = o.scrollIntoView) == null || i.call(o, {
+          block: "center",
+          behavior: "auto"
+        }));
+      }
+    }, []), /* @__PURE__ */ $(
+      "div",
+      {
+        ref: W,
+        className: h(
+          r.root,
+          f && r.fillHeight,
+          j
+        ),
+        "data-slot": "timepicker",
+        [x]: "timepicker",
+        children: [
+          /* @__PURE__ */ u(
+            "div",
+            {
+              className: h(
+                r.column,
+                f && r.columnFillHeight
+              ),
+              children: /* @__PURE__ */ u(
+                "div",
+                {
+                  className: h(
+                    r.scroll,
+                    f ? r.scrollFill : r.scrollFixed
+                  ),
+                  "data-slot": "timepicker-scroll",
+                  [x]: "timepicker-scroll",
+                  ref: C,
+                  children: et.map((t) => /* @__PURE__ */ u(
+                    w,
+                    {
+                      isDisabled: T(t),
+                      isSelected: t === m,
+                      onClick: V,
+                      value: t
+                    },
+                    t
+                  ))
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ u("div", { className: r.separator, children: ":" }),
+          /* @__PURE__ */ u(
+            "div",
+            {
+              className: h(
+                r.column,
+                f && r.columnFillHeight
+              ),
+              children: /* @__PURE__ */ u(
+                "div",
+                {
+                  className: h(
+                    r.scroll,
+                    f ? r.scrollFill : r.scrollFixed
+                  ),
+                  "data-slot": "timepicker-scroll",
+                  [x]: "timepicker-scroll",
+                  ref: B,
+                  children: M.map((t) => /* @__PURE__ */ u(
+                    w,
+                    {
+                      isDisabled: E(t),
+                      isSelected: t === g,
+                      onClick: Y,
+                      value: t
+                    },
+                    t
+                  ))
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  at as TimePicker
+};
+//# sourceMappingURL=time-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.js","sources":["../../../src/components/date-time-picker/time-picker.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@griffel/core\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nimport {\n  getHours,\n  getMinutes,\n  padNumber,\n  updateTime,\n} from \"./date-time-picker-utils\"\n\nconst HOURS = Array.from({ length: 24 }, (_, i) => i)\n\nexport type TimePickerProps = {\n  value: Date | null\n  onChange: (date: Date) => void\n  onTimeSelect?: () => void\n  disablePast?: boolean\n  currentTimeInTimezone?: Date\n  fillHeight?: boolean\n  minuteStep?: number\n  className?: string\n}\n\nconst useStyles = makeVoltStyles({\n  root: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"stretch\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n  },\n  fillHeight: {\n    height: \"100%\",\n  },\n  column: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    width: \"3.5rem\",\n  },\n  columnFillHeight: {\n    minHeight: \"0\",\n  },\n  scroll: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    overflowY: \"auto\",\n    overflowX: \"hidden\",\n    width: \"100%\",\n    alignItems: \"center\",\n    ...shorthands.borderRadius(tokens.radiusMd),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA5),\n    scrollbarWidth: \"thin\",\n    scrollbarColor: `${tokens.grayA6} transparent`,\n  },\n  scrollFixed: {\n    height: \"8rem\",\n  },\n  scrollFill: {\n    flexGrow: 1,\n    flexShrink: 1,\n    flexBasis: \"0%\",\n    minHeight: \"0\",\n  },\n  separator: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: tokens.textBase,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.grayA8,\n  },\n  timeBtn: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    fontSize: tokens.textSm,\n    ...shorthands.borderRadius(tokens.radiusMd),\n    transitionProperty: \"background-color, color\",\n    transitionDuration: \"150ms\",\n    minHeight: \"2rem\",\n    width: \"100%\",\n    maxWidth: \"3rem\",\n    ...shorthands.border(\"0\"),\n    outlineStyle: \"none\",\n  },\n  timeBtnDefault: {\n    backgroundColor: \"transparent\",\n    color: tokens.grayA11,\n    \":hover\": {\n      backgroundColor: tokens.grayA4,\n    },\n  },\n  timeBtnSelected: {\n    fontWeight: tokens.fontWeightSemibold,\n    backgroundColor: tokens.semAccentSolid,\n    color: tokens.semAccentContrast,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSolidHover,\n    },\n  },\n  timeBtnDisabled: {\n    cursor: \"not-allowed\",\n    opacity: 0.5,\n  },\n  timeBtnEnabled: {\n    cursor: \"pointer\",\n  },\n})\n\ntype TimeButtonProps = {\n  value: number\n  isSelected: boolean\n  isDisabled: boolean\n  onClick: (value: number) => void\n}\n\nconst TimeButton = React.memo(function TimeButton({\n  value,\n  isSelected,\n  isDisabled,\n  onClick,\n}: TimeButtonProps) {\n  const styles = useStyles()\n  const handleClick = React.useCallback(() => {\n    if (!isDisabled) {\n      onClick(value)\n    }\n  }, [onClick, value, isDisabled])\n\n  return (\n    <button\n      aria-disabled={isDisabled}\n      aria-pressed={isSelected}\n      className={mergeClasses(\n        styles.timeBtn,\n        !isSelected && styles.timeBtnDefault,\n        isSelected && styles.timeBtnSelected,\n        isDisabled ? styles.timeBtnDisabled : styles.timeBtnEnabled\n      )}\n      data-selected={isSelected}\n      data-slot=\"time-button\"\n      {...{ [SLOT_ATTR]: \"time-button\" }}\n      data-value={value}\n      disabled={isDisabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      {padNumber(value)}\n    </button>\n  )\n})\n\nTimeButton.displayName = \"TimeButton\"\n\nexport const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n  function TimePicker(\n    {\n      value,\n      onChange,\n      onTimeSelect,\n      disablePast = false,\n      currentTimeInTimezone,\n      fillHeight = false,\n      minuteStep = 1,\n      className,\n    },\n    ref\n  ) {\n    const styles = useStyles()\n    const step = Math.max(1, Math.floor(minuteStep))\n\n    // Enumerate buckets 0, step, 2·step… stopping at <60 so a step that\n    // doesn't divide 60 evenly (e.g. 7) can never produce an out-of-range\n    // value like 63.\n    const MINUTES = React.useMemo(() => {\n      const buckets: number[] = []\n      for (let m = 0; m < 60; m += step) buckets.push(m)\n\n      return buckets\n    }, [step])\n\n    const selectedHour = value !== null ? getHours(value) : -1\n    const rawMinute = value !== null ? getMinutes(value) : -1\n    const selectedMinute =\n      value === null\n        ? -1\n        : step === 1\n          ? rawMinute\n          : Math.min(\n              MINUTES[MINUTES.length - 1],\n              Math.round(rawMinute / step) * step\n            )\n\n    const hoursRef = React.useRef<HTMLDivElement>(null)\n    const minutesRef = React.useRef<HTMLDivElement>(null)\n\n    const now = React.useMemo(\n      () => currentTimeInTimezone || new Date(),\n      [currentTimeInTimezone]\n    )\n    const isToday = React.useMemo(() => {\n      if (!value) return false\n\n      return (\n        value.getFullYear() === now.getFullYear() &&\n        value.getMonth() === now.getMonth() &&\n        value.getDate() === now.getDate()\n      )\n    }, [value, now])\n\n    const currentHour = now.getHours()\n    const currentMinute = now.getMinutes()\n\n    const isHourDisabled = React.useCallback(\n      (hour: number) => {\n        if (!disablePast || !isToday) return false\n\n        return hour < currentHour\n      },\n      [disablePast, isToday, currentHour]\n    )\n\n    const isMinuteDisabled = React.useCallback(\n      (minute: number) => {\n        if (!disablePast || !isToday) return false\n        if (selectedHour < currentHour) return true\n        if (selectedHour === currentHour) return minute < currentMinute\n\n        return false\n      },\n      [disablePast, isToday, selectedHour, currentHour, currentMinute]\n    )\n\n    const handleHourChange = React.useCallback(\n      (hour: number) => {\n        const base = value || now\n        const minute = selectedMinute >= 0 ? selectedMinute : 0\n\n        onChange(updateTime(base, hour, minute))\n      },\n      [onChange, value, now, selectedMinute]\n    )\n\n    const handleMinuteChange = React.useCallback(\n      (minute: number) => {\n        const base = value || now\n        const hour = selectedHour >= 0 ? selectedHour : 0\n\n        onChange(updateTime(base, hour, minute))\n        onTimeSelect?.()\n      },\n      [onChange, onTimeSelect, value, now, selectedHour]\n    )\n\n    React.useEffect(() => {\n      if (hoursRef.current) {\n        const selectedElement = hoursRef.current.querySelector(\n          `[data-value=\"${selectedHour}\"]`\n        )\n\n        if (selectedElement) {\n          selectedElement.scrollIntoView?.({\n            block: \"center\",\n            behavior: \"auto\",\n          })\n        }\n      }\n      if (minutesRef.current) {\n        const selectedElement = minutesRef.current.querySelector(\n          `[data-value=\"${selectedMinute}\"]`\n        )\n\n        if (selectedElement) {\n          selectedElement.scrollIntoView?.({\n            block: \"center\",\n            behavior: \"auto\",\n          })\n        }\n      }\n    }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n    return (\n      <div\n        ref={ref}\n        className={mergeClasses(\n          styles.root,\n          fillHeight && styles.fillHeight,\n          className\n        )}\n        data-slot=\"timepicker\"\n        {...{ [SLOT_ATTR]: \"timepicker\" }}\n      >\n        <div\n          className={mergeClasses(\n            styles.column,\n            fillHeight && styles.columnFillHeight\n          )}\n        >\n          <div\n            className={mergeClasses(\n              styles.scroll,\n              fillHeight ? styles.scrollFill : styles.scrollFixed\n            )}\n            data-slot=\"timepicker-scroll\"\n            {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n            ref={hoursRef}\n          >\n            {HOURS.map((hour) => (\n              <TimeButton\n                isDisabled={isHourDisabled(hour)}\n                isSelected={hour === selectedHour}\n                key={hour}\n                onClick={handleHourChange}\n                value={hour}\n              />\n            ))}\n          </div>\n        </div>\n\n        <div className={styles.separator}>:</div>\n\n        <div\n          className={mergeClasses(\n            styles.column,\n            fillHeight && styles.columnFillHeight\n          )}\n        >\n          <div\n            className={mergeClasses(\n              styles.scroll,\n              fillHeight ? styles.scrollFill : styles.scrollFixed\n            )}\n            data-slot=\"timepicker-scroll\"\n            {...{ [SLOT_ATTR]: \"timepicker-scroll\" }}\n            ref={minutesRef}\n          >\n            {MINUTES.map((minute) => (\n              <TimeButton\n                isDisabled={isMinuteDisabled(minute)}\n                isSelected={minute === selectedMinute}\n                key={minute}\n                onClick={handleMinuteChange}\n                value={minute}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n"],"names":["HOURS","_","i","useStyles","makeVoltStyles","shorthands","tokens.spacingElement1","tokens.radiusMd","tokens.grayA5","tokens.grayA6","tokens.textBase","tokens.fontWeightSemibold","tokens.grayA8","tokens.textSm","tokens.grayA11","tokens.grayA4","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semAccentSolidHover","TimeButton","React","value","isSelected","isDisabled","onClick","styles","handleClick","jsx","mergeClasses","SLOT_ATTR","TimePicker","onChange","onTimeSelect","disablePast","currentTimeInTimezone","fillHeight","minuteStep","className","ref","step","MINUTES","buckets","m","selectedHour","getHours","rawMinute","getMinutes","selectedMinute","hoursRef","minutesRef","now","isToday","currentHour","currentMinute","isHourDisabled","hour","isMinuteDisabled","minute","handleHourChange","base","updateTime","handleMinuteChange","selectedElement","_a","_b","jsxs"],"mappings":"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"}

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+export type DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>;
+export declare const Dialog: React.ForwardRefExoticComponent<DialogPrimitive.DialogProps & React.RefAttributes<HTMLElement>>;
+export type DialogTriggerProps = React.ComponentProps<typeof DialogPrimitive.Trigger>;
+export declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type DialogPortalProps = React.ComponentProps<typeof DialogPrimitive.Portal>;
+export declare const DialogPortal: React.ForwardRefExoticComponent<DialogPrimitive.DialogPortalProps & React.RefAttributes<HTMLElement>>;
+export type DialogOverlayProps = React.ComponentProps<typeof DialogPrimitive.Overlay>;
+export declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DialogContentSize = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full-width";
+export type DialogContentProps = React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+    size?: DialogContentSize;
+    flush?: boolean;
+};
+export declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DialogCloseProps = React.ComponentProps<typeof DialogPrimitive.Close>;
+export declare const DialogClose: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type DialogHeaderProps = React.ComponentProps<"div">;
+export declare const DialogHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DialogFooterProps = React.ComponentProps<"div">;
+export declare const DialogFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type DialogTitleProps = React.ComponentProps<typeof DialogPrimitive.Title>;
+export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export type DialogDescriptionProps = React.ComponentProps<typeof DialogPrimitive.Description>;
+export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;