@kanzo-tech/ui 0.12.0 → 0.13.0

package/dist/simples/date-picker.js

@@ -1,76 +1,207 @@
 "use client";
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { useDatePickerContext as m, DatePicker as i } from "@ark-ui/react/date-picker";
-import { useFieldContext as g } from "@ark-ui/react/field";
-import { Portal as k } from "@ark-ui/react/portal";
-import { CalendarIcon as h, ClockIcon as P } from "lucide-react";
-import { cn as s } from "../lib/cn.js";
-import { Button as x } from "./button.js";
-import { Calendar as f, CalendarPresetTrigger as C } from "./calendar.js";
-import { InputGroup as d, InputGroupInput as l, InputGroupAddon as p, InputGroupButton as v } from "./input-group.js";
-const j = m, V = (r) => {
-  const { positioning: a = { placement: "top" }, slot: n, ...o } = r, t = g();
-  return /* @__PURE__ */ e(
-    f,
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { useDatePickerContext as D, DatePicker as m } from "@ark-ui/react/date-picker";
+import { useFieldContext as P } from "@ark-ui/react/field";
+import { DateInput as y } from "@ark-ui/react/date-input";
+import { Portal as z } from "@ark-ui/react/portal";
+import { useLocale as S } from "./locale.js";
+import { ClockIcon as V, CalendarIcon as $ } from "lucide-react";
+import { toCalendarDateTime as C, parseDateTime as G, CalendarDate as L, CalendarDateTime as F } from "@internationalized/date";
+import { useContext as T, createContext as j } from "react";
+import { cn as x } from "../lib/cn.js";
+import { Calendar as B, CalendarPresetTrigger as H } from "./calendar.js";
+import { InputGroup as k, InputGroupInput as w, InputGroupAddon as I, InputGroupButton as A } from "./input-group.js";
+const oe = D, N = j(null), K = /(\d{1,2}):(\d{2})(?::(\d{2}))?(?:\s*([ap])\.?\s*m?\.?)?/i;
+function R(r, o, s) {
+  var h;
+  try {
+    return G(r.replace(/(Z|[+-]\d{2}:\d{2})$/, ""));
+  } catch {
+  }
+  const e = K.exec(r), c = (h = r.replace((e == null ? void 0 : e[0]) ?? "", " ").match(/\d+/g)) == null ? void 0 : h.map(Number);
+  if ((c == null ? void 0 : c.length) !== 3) return;
+  const t = /^\D*\d{4}\b/.test(r) ? ["year", "month", "day"] : new Intl.DateTimeFormat(o, { year: "numeric", month: "2-digit", day: "2-digit" }).formatToParts(new Date(2001, 10, 22)).map((u) => u.type).filter((u) => u === "year" || u === "month" || u === "day"), d = (u) => c[t.indexOf(u)], i = s && "hour" in s ? s : void 0;
+  let p = Number((e == null ? void 0 : e[1]) ?? (i == null ? void 0 : i.hour) ?? 0);
+  e != null && e[4] && (p = p % 12 + (e[4].toLowerCase() === "p" ? 12 : 0));
+  const g = Number((e == null ? void 0 : e[2]) ?? (i == null ? void 0 : i.minute) ?? 0), v = Number((e == null ? void 0 : e[3]) ?? (i == null ? void 0 : i.second) ?? 0), l = new L(d("year"), d("month"), d("day"));
+  if (!(l.month !== d("month") || l.day !== d("day") || p > 23 || g > 59))
+    return new F(l.year, l.month, l.day, p, g, v);
+}
+const ie = (r) => {
+  const {
+    granularity: o = "day",
+    positioning: s = { placement: "top" },
+    onValueChange: e,
+    slot: c,
+    ...n
+  } = r, t = P(), d = o !== "day", { locale: i } = S(), p = n.disabled ?? (t == null ? void 0 : t.disabled), g = n.invalid ?? (t == null ? void 0 : t.invalid), v = n.readOnly ?? (t == null ? void 0 : t.readOnly), l = n.required ?? (t == null ? void 0 : t.required);
+  return /* @__PURE__ */ a(
+    N,
     {
-      disabled: t == null ? void 0 : t.disabled,
-      inline: !1,
-      invalid: t == null ? void 0 : t.invalid,
-      positioning: a,
-      readOnly: t == null ? void 0 : t.readOnly,
-      required: t == null ? void 0 : t.required,
-      ...o,
-      slot: n ?? "date-picker"
+      value: d ? {
+        granularity: o,
+        locale: n.locale ?? i,
+        name: n.name,
+        disabled: p,
+        readOnly: v,
+        invalid: g,
+        required: l,
+        min: n.min,
+        max: n.max
+      } : null,
+      children: /* @__PURE__ */ a(
+        B,
+        {
+          closeOnSelect: !d,
+          disabled: t == null ? void 0 : t.disabled,
+          inline: !1,
+          invalid: t == null ? void 0 : t.invalid,
+          positioning: s,
+          readOnly: t == null ? void 0 : t.readOnly,
+          required: t == null ? void 0 : t.required,
+          ...n,
+          onValueChange: d ? (h) => e == null ? void 0 : e({
+            ...h,
+            value: h.value.map((u) => C(u))
+          }) : e,
+          slot: c ?? "date-picker"
+        }
+      )
     }
   );
-}, q = (r) => {
-  const { className: a, children: n, slot: o, ...t } = r;
-  return /* @__PURE__ */ e(i.Control, { "data-slot": "date-picker-control", children: /* @__PURE__ */ e(
-    i.Trigger,
+}, se = (r) => {
+  const { className: o, children: s, slot: e, ...c } = r;
+  return /* @__PURE__ */ a(m.Control, { "data-slot": "date-picker-control", children: /* @__PURE__ */ a(
+    m.Trigger,
     {
-      className: s(
+      className: x(
         "justify-start",
         "text-start data-placeholder-shown:[&>span]:text-muted-foreground",
         "active:scale-100",
         "[&_svg:not([class*='text-'])]:opacity-64",
-        a
+        o
       ),
-      ...t,
-      "data-slot": o ?? "date-picker-trigger",
-      children: n
+      ...c,
+      "data-slot": e ?? "date-picker-trigger",
+      children: s
     }
   ) });
-}, B = (r) => {
-  const { size: a, className: n, slot: o, ...t } = r;
-  return /* @__PURE__ */ e(i.Control, { "data-slot": "date-picker-control", children: /* @__PURE__ */ c(d, { size: a, children: [
-    /* @__PURE__ */ e(i.Input, { asChild: !0, ...t, children: /* @__PURE__ */ e(l, { slot: o ?? "date-picker-input" }) }),
-    /* @__PURE__ */ e(p, { align: "inline-end", children: /* @__PURE__ */ e(v, { asChild: !0, size: "icon-sm", variant: "ghost", children: /* @__PURE__ */ e(i.Trigger, { asChild: !0, children: /* @__PURE__ */ e(x, { slot: "date-picker-trigger", variant: "ghost", children: /* @__PURE__ */ e(h, { "aria-hidden": !0, className: "text-muted-foreground" }) }) }) }) })
+}, de = (r) => {
+  const o = T(N);
+  return o ? /* @__PURE__ */ a(Z, { ...r, timed: o }) : /* @__PURE__ */ a(W, { ...r });
+}, O = () => /* @__PURE__ */ a(I, { align: "inline-end", children: /* @__PURE__ */ a(m.Trigger, { asChild: !0, children: /* @__PURE__ */ a(A, { size: "icon-sm", slot: "date-picker-trigger", variant: "ghost", children: /* @__PURE__ */ a($, { "aria-hidden": !0, className: "text-muted-foreground" }) }) }) }), W = (r) => {
+  const { size: o, slot: s, ...e } = r;
+  return /* @__PURE__ */ a(m.Control, { "data-slot": "date-picker-control", children: /* @__PURE__ */ b(k, { size: o, children: [
+    /* @__PURE__ */ a(m.Input, { asChild: !0, ...e, children: /* @__PURE__ */ a(w, { slot: s ?? "date-picker-input" }) }),
+    /* @__PURE__ */ a(O, {})
+  ] }) });
+}, Z = (r) => {
+  const { size: o, slot: s, timed: e, className: c, "aria-label": n } = r, t = D();
+  return /* @__PURE__ */ a(m.Control, { "data-slot": "date-picker-control", children: /* @__PURE__ */ b(k, { size: o, children: [
+    /* @__PURE__ */ b(
+      y.Root,
+      {
+        "aria-invalid": e.invalid || void 0,
+        className: x(
+          "flex min-w-0 flex-1 items-center self-stretch px-3",
+          "text-base md:text-sm",
+          c
+        ),
+        "data-slot": s ?? "date-picker-input",
+        disabled: e.disabled,
+        granularity: e.granularity,
+        invalid: e.invalid,
+        locale: e.locale,
+        max: e.max,
+        min: e.min,
+        name: e.name,
+        onValueChange: (d) => {
+          const [i] = d.value;
+          t.setValue(i ? [C(i)] : []);
+        },
+        onPaste: (d) => {
+          const i = R(
+            d.clipboardData.getData("text/plain").trim(),
+            e.locale,
+            t.value[0]
+          );
+          i && t.setValue([i]);
+        },
+        readOnly: e.readOnly,
+        required: e.required,
+        value: t.value.map((d) => C(d)),
+        children: [
+          /* @__PURE__ */ a(y.Control, { className: "flex min-w-0 items-center", "data-slot": "date-picker-segments", children: /* @__PURE__ */ a(y.SegmentGroup, { "aria-label": n, className: "flex items-center gap-px", children: /* @__PURE__ */ a(y.SegmentContext, { children: (d) => /* @__PURE__ */ a(
+            y.Segment,
+            {
+              className: x(
+                "tabular-nums",
+                "rounded-sm px-0.5 outline-none",
+                "focus:bg-primary focus:text-primary-foreground",
+                "data-placeholder-shown:text-faint",
+                "data-[type=literal]:select-none data-[type=literal]:px-px data-[type=literal]:text-muted-foreground",
+                "data-readonly:cursor-default",
+                "group-data-invalid/input-group:text-destructive-foreground",
+                "group-data-invalid/input-group:focus:bg-destructive group-data-invalid/input-group:focus:text-destructive-content"
+              ),
+              "data-slot": "date-picker-segment",
+              segment: d,
+              suppressHydrationWarning: !0
+            }
+          ) }) }) }),
+          /* @__PURE__ */ a(y.HiddenInput, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ a(O, {})
   ] }) });
-}, O = (r) => {
-  const { id: a, value: n, defaultValue: o, className: t, ...u } = r;
-  return /* @__PURE__ */ c(d, { ...u, children: [
-    /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(P, {}) }),
-    /* @__PURE__ */ e(
-      l,
+}, f = (r) => String(r).padStart(2, "0"), ce = (r) => {
+  const o = T(N);
+  return o ? /* @__PURE__ */ a(_, { granularity: o.granularity, ...r }) : /* @__PURE__ */ a(q, { ...r });
+}, _ = (r) => {
+  const { granularity: o, step: s, onChange: e, ...c } = r, n = D(), t = n.value[0], d = (s ?? (o === "second" ? 1 : 60)) < 60, i = t && "hour" in t ? t : void 0, p = i ? `${f(i.hour)}:${f(i.minute)}${d ? `:${f(i.second)}` : ""}` : `00:00${d ? ":00" : ""}`;
+  return /* @__PURE__ */ a(
+    q,
+    {
+      ...c,
+      onChange: (g) => {
+        e == null || e(g);
+        const [v, l, h = 0] = g.target.value.split(":").map(Number);
+        v === void 0 || l === void 0 || n.setValue([
+          C(t ?? n.focusedValue).set({ hour: v, minute: l, second: h })
+        ]);
+      },
+      step: s ?? (o === "second" ? 1 : 60),
+      value: p
+    }
+  );
+}, q = (r) => {
+  const { size: o, step: s = 60, className: e, ...c } = r, n = P();
+  return /* @__PURE__ */ b(k, { size: o, children: [
+    /* @__PURE__ */ a(I, { children: /* @__PURE__ */ a(V, {}) }),
+    /* @__PURE__ */ a(
+      w,
       {
-        className: s(
+        "aria-invalid": (n == null ? void 0 : n.invalid) || void 0,
+        className: x(
           "[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none",
-          t
+          e
         ),
-        defaultValue: o,
-        id: a,
-        step: "1",
-        type: "time",
-        value: n
+        disabled: n == null ? void 0 : n.disabled,
+        readOnly: n == null ? void 0 : n.readOnly,
+        required: n == null ? void 0 : n.required,
+        ...c,
+        step: s,
+        type: "time"
       }
     )
   ] });
-}, A = (r) => {
-  const { className: a, slot: n, ...o } = r;
-  return /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(i.Positioner, { "data-slot": "date-picker-positioner", children: /* @__PURE__ */ e(
-    i.Content,
+}, le = (r) => {
+  const { className: o, slot: s, ...e } = r;
+  return /* @__PURE__ */ a(z, { children: /* @__PURE__ */ a(m.Positioner, { "data-slot": "date-picker-positioner", children: /* @__PURE__ */ a(
+    m.Content,
     {
-      className: s(
+      className: x(
         "[--cell-size:--spacing(8)]",
         "z-[calc(50+var(--layer-index,0))]",
         "w-fit min-w-72",
@@ -84,40 +215,40 @@ const j = m, V = (r) => {
         "data-[state=closed]:animate-out data-[state=open]:animate-in",
         "data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]",
         "motion-reduce:animate-none!",
-        a
+        o
       ),
-      ...o,
-      "data-slot": n ?? "date-picker-content"
+      ...e,
+      "data-slot": s ?? "date-picker-content"
     }
   ) }) });
-}, F = (r) => {
-  const { className: a, slot: n, ...o } = r;
-  return /* @__PURE__ */ e(
-    i.ValueText,
+}, ue = (r) => {
+  const { className: o, slot: s, ...e } = r;
+  return /* @__PURE__ */ a(
+    m.ValueText,
     {
-      className: s("font-medium text-sm", a),
-      ...o,
-      "data-slot": n ?? "date-picker-value"
+      className: x("font-medium text-sm", o),
+      ...e,
+      "data-slot": s ?? "date-picker-value"
     }
   );
-}, _ = ({
+}, me = ({
   slot: r,
-  ...a
-}) => /* @__PURE__ */ e(
-  C,
+  ...o
+}) => /* @__PURE__ */ a(
+  H,
   {
-    ...a,
+    ...o,
     slot: r ?? "date-picker-preset-trigger"
   }
 );
 export {
-  V as DatePicker,
-  A as DatePickerContent,
-  B as DatePickerInput,
-  _ as DatePickerPresetTrigger,
-  O as DatePickerTimer,
-  q as DatePickerTrigger,
-  F as DatePickerValue,
-  j as useDatePicker
+  ie as DatePicker,
+  le as DatePickerContent,
+  de as DatePickerInput,
+  me as DatePickerPresetTrigger,
+  ce as DatePickerTimer,
+  se as DatePickerTrigger,
+  ue as DatePickerValue,
+  oe as useDatePicker
 };
 //# sourceMappingURL=date-picker.js.map

package/dist/simples/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sources":["../../src/simples/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  DatePicker as ArkDatePicker,\n  useDatePickerContext,\n} from \"@ark-ui/react/date-picker\";\nimport { type UseFieldContext, useFieldContext } from \"@ark-ui/react/field\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { CalendarIcon, ClockIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport {\n  Calendar,\n  CalendarPresetTrigger,\n} from \"./calendar\";\nimport type { Input, InputProps } from \"./input\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"./input-group\";\n\nexport const useDatePicker = useDatePickerContext;\n\n// Ark's `useDatePicker` reads no `useFieldContext` (it takes environment and locale only), so a\n// `Field disabled` greyed the input while the popover still opened and a click still wrote a value.\n// Bridged here the way `RadioGroup` does it: state flags only, explicit props win, and with no\n// `Field` ancestor every flag is `undefined`, which Ark strips before the machine sees it.\nexport const DatePicker = (props: React.ComponentProps<typeof Calendar>) => {\n  const { positioning = { placement: \"top\" }, slot, ...rest } = props;\n\n  const field: UseFieldContext | undefined = useFieldContext();\n\n  return (\n    <Calendar\n      disabled={field?.disabled}\n      inline={false}\n      invalid={field?.invalid}\n      positioning={positioning}\n      readOnly={field?.readOnly}\n      required={field?.required}\n      {...rest}\n      slot={slot ?? \"date-picker\"}\n    />\n  );\n};\n\nexport const DatePickerTrigger = (\n  props: React.ComponentProps<typeof ArkDatePicker.Trigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.Control data-slot=\"date-picker-control\">\n      <ArkDatePicker.Trigger\n        className={cn(\n          \"justify-start\",\n          \"text-start data-placeholder-shown:[&>span]:text-muted-foreground\",\n          \"active:scale-100\",\n          \"[&_svg:not([class*='text-'])]:opacity-64\",\n          className\n        )}\n        {...rest}\n        data-slot={slot ?? \"date-picker-trigger\"}\n      >\n        {children}\n      </ArkDatePicker.Trigger>\n    </ArkDatePicker.Control>\n  );\n};\n\ninterface DatePickerInputProps\n  extends Omit<React.ComponentProps<typeof ArkDatePicker.Input>, \"size\">,\n    InputProps {}\n\nexport const DatePickerInput = (props: DatePickerInputProps) => {\n  const { size, className, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.Control data-slot=\"date-picker-control\">\n      <InputGroup size={size}>\n        <ArkDatePicker.Input asChild {...rest}>\n          <InputGroupInput slot={slot ?? \"date-picker-input\"} />\n        </ArkDatePicker.Input>\n\n        <InputGroupAddon align=\"inline-end\">\n          {/* One size for the chain, and it used to declare two: the outer `InputGroupButton` asked\n              for `icon-sm` and the inner `Button` — which exists only because Ark's Trigger needs a\n              child to hand its props to — overrode it with `icon-md`. The outer one is the size a\n              control inside a group has, so the inner declares none. */}\n          <InputGroupButton asChild size=\"icon-sm\" variant=\"ghost\">\n            <ArkDatePicker.Trigger asChild>\n              <Button slot=\"date-picker-trigger\" variant=\"ghost\">\n                <CalendarIcon aria-hidden className=\"text-muted-foreground\" />\n              </Button>\n            </ArkDatePicker.Trigger>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </ArkDatePicker.Control>\n  );\n};\n\nexport const DatePickerTimer = (props: React.ComponentProps<typeof Input>) => {\n  const { id, value, defaultValue, className, ...rest } = props;\n\n  return (\n    <InputGroup {...rest}>\n      <InputGroupAddon>\n        <ClockIcon />\n      </InputGroupAddon>\n      <InputGroupInput\n        className={cn(\n          \"[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\",\n          className\n        )}\n        defaultValue={defaultValue}\n        id={id}\n        step=\"1\"\n        type=\"time\"\n        value={value}\n      />\n    </InputGroup>\n  );\n};\n\nexport const DatePickerContent = (\n  props: React.ComponentProps<typeof ArkDatePicker.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <ArkDatePicker.Positioner data-slot=\"date-picker-positioner\">\n        <ArkDatePicker.Content\n          className={cn(\n            \"[--cell-size:--spacing(8)]\",\n            \"z-[calc(50+var(--layer-index,0))]\",\n            \"w-fit min-w-72\",\n            \"p-3\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"rounded-box border shadow-lg/5\",\n            \"outline-none\",\n            \"origin-(--transform-origin)\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"date-picker-content\"}\n        />\n      </ArkDatePicker.Positioner>\n    </Portal>\n  );\n};\n\nexport const DatePickerValue = (\n  props: React.ComponentProps<typeof ArkDatePicker.ValueText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.ValueText\n      className={cn(\"font-medium text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"date-picker-value\"}\n    />\n  );\n};\n\nexport const DatePickerPresetTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkDatePicker.PresetTrigger>) => (\n  <CalendarPresetTrigger\n    {...rest}\n    slot={slot ?? \"date-picker-preset-trigger\"}\n  />\n);\n"],"names":[],"mappings":";;;;;;;;;;AAwBO;AAOL;AAIA;AACE;AAAC;AAAA;AACkB;AACT;AACQ;AAChB;AACiB;AACA;AACb;AACU;AAAA;AAGpB;AAKE;AAEA;AAEI;AAAe;AAAd;AACY;AACT;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAAA;AAIT;AAOE;AAEA;AAGM;AAEA;AAcA;AAIR;AAGE;AAEA;AAEI;AAEA;AACA;AAAC;AAAA;AACY;AACT;AACA;AAAA;AAEF;AACA;AACK;AACA;AACL;AAAA;AAAA;AAIR;AAKE;AAEA;AAGM;AAAe;AAAd;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAK7B;AAKE;AAEA;AACE;AAAe;AAAd;AAC+C;AAC1C;AACe;AAAA;AAGzB;AAEwC;AACtC;AAEF;AACE;AAAC;AAAA;AACK;AACU;AAChB;;;;;;;;;;;"}
+{"version":3,"file":"date-picker.js","sources":["../../src/simples/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  DatePicker as ArkDatePicker,\n  useDatePickerContext,\n} from \"@ark-ui/react/date-picker\";\nimport { type UseFieldContext, useFieldContext } from \"@ark-ui/react/field\";\nimport { DateInput as ArkDateInput } from \"@ark-ui/react/date-input\";\nimport { Portal } from \"@ark-ui/react/portal\";\nimport { useLocale } from \"./locale\";\nimport { CalendarIcon, ClockIcon } from \"lucide-react\";\nimport {\n  CalendarDate,\n  CalendarDateTime,\n  type DateValue,\n  parseDateTime,\n  toCalendarDateTime,\n} from \"@internationalized/date\";\nimport { createContext, useContext } from \"react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport {\n  Calendar,\n  CalendarPresetTrigger,\n} from \"./calendar\";\nimport type { Input, InputProps } from \"./input\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"./input-group\";\n\nexport const useDatePicker = useDatePickerContext;\n\n/**\n * What the picker holds. `\"day\"` is a date; `\"minute\"` and `\"second\"` are a date **and** a time —\n * one value, one input, one popover.\n */\nexport type DatePickerGranularity = \"day\" | \"minute\" | \"second\";\n\n// Provided by `DatePicker` and read by `DatePickerInput` and `DatePickerTimer`, which is how they\n// know they are inside a timed picker (and so edit the picker's value) rather than standing alone.\n// A context of ours rather than a probe of Ark's, whose hook throws outside a picker.\nconst TimedContext = createContext<TimedPicker | null>(null);\n\n/**\n * What a timed picker's input needs from the picker around it: its own machine reads none of this,\n * because that input is Ark's segmented `DateInput`, a second machine bound to the picker's value.\n */\ninterface TimedPicker {\n  granularity: Exclude<DatePickerGranularity, \"day\">;\n  locale: string;\n  name?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  invalid?: boolean;\n  required?: boolean;\n  min?: DateValue;\n  max?: DateValue;\n}\n\nconst CLOCK = /(\\d{1,2}):(\\d{2})(?::(\\d{2}))?(?:\\s*([ap])\\.?\\s*m?\\.?)?/i;\n\n/**\n * A date and a time read from pasted text: an ISO string (`2026-03-14T18:30`), or the locale's own\n * order (`14/03/2026 18:30`, `3/14/2026, 6:30 PM`). Ark's segments take a paste only as a bare ISO\n * date and drop it silently otherwise, which is the one thing a segmented field owes a form that\n * receives a copied timestamp. A date with no time keeps the time of `kept`, and is midnight\n * without one. `undefined` for anything that is not a date.\n */\nfunction parsePasted(text: string, locale: string, kept?: DateValue): DateValue | undefined {\n  try {\n    return parseDateTime(text.replace(/(Z|[+-]\\d{2}:\\d{2})$/, \"\"));\n  } catch {\n    // Not ISO: read it in the locale's field order.\n  }\n  const clock = CLOCK.exec(text);\n  const numbers = text.replace(clock?.[0] ?? \"\", \" \").match(/\\d+/g)?.map(Number);\n  if (numbers?.length !== 3) return undefined;\n  const yearFirst = /^\\D*\\d{4}\\b/.test(text);\n  const order = yearFirst\n    ? [\"year\", \"month\", \"day\"]\n    : new Intl.DateTimeFormat(locale, { year: \"numeric\", month: \"2-digit\", day: \"2-digit\" })\n        .formatToParts(new Date(2001, 10, 22))\n        .map((part) => part.type)\n        .filter((type) => type === \"year\" || type === \"month\" || type === \"day\");\n  const at = (type: string) => numbers[order.indexOf(type)] as number;\n  const held = kept && \"hour\" in kept ? kept : undefined;\n  let hour = Number(clock?.[1] ?? held?.hour ?? 0);\n  if (clock?.[4]) hour = (hour % 12) + (clock[4].toLowerCase() === \"p\" ? 12 : 0);\n  const minute = Number(clock?.[2] ?? held?.minute ?? 0);\n  const second = Number(clock?.[3] ?? held?.second ?? 0);\n  const date = new CalendarDate(at(\"year\"), at(\"month\"), at(\"day\"));\n  if (date.month !== at(\"month\") || date.day !== at(\"day\") || hour > 23 || minute > 59) {\n    return undefined;\n  }\n  return new CalendarDateTime(date.year, date.month, date.day, hour, minute, second);\n}\n\nexport interface DatePickerProps extends React.ComponentProps<typeof Calendar> {\n  /**\n   * What the picker holds. With `\"minute\"` or `\"second\"` the value is a date **and** a time: the\n   * input is segmented — day, month, year, hour, minute in the locale's order and clock — so both can\n   * be typed from empty, picking a day keeps the time, a\n   * `DatePickerTimer` in the popover sets the time, and the popover stays open after a day is\n   * picked so the time can be set. The value is then a `CalendarDateTime` — build one with\n   * `parseDateTime` — and a day picked while there is none arrives at midnight.\n   *\n   * @default \"day\"\n   */\n  granularity?: DatePickerGranularity;\n}\n\n// Ark's `useDatePicker` reads no `useFieldContext` (it takes environment and locale only), so a\n// `Field disabled` greyed the input while the popover still opened and a click still wrote a value.\n// Bridged here the way `RadioGroup` does it: state flags only, explicit props win, and with no\n// `Field` ancestor every flag is `undefined`, which Ark strips before the machine sees it.\nexport const DatePicker = (props: DatePickerProps) => {\n  const {\n    granularity = \"day\",\n    positioning = { placement: \"top\" },\n    onValueChange,\n    slot,\n    ...rest\n  } = props;\n\n  const field: UseFieldContext | undefined = useFieldContext();\n  const timed = granularity !== \"day\";\n  const { locale: contextLocale } = useLocale();\n  const disabled = rest.disabled ?? field?.disabled;\n  const invalid = rest.invalid ?? field?.invalid;\n  const readOnly = rest.readOnly ?? field?.readOnly;\n  const required = rest.required ?? field?.required;\n\n  return (\n    <TimedContext\n      value={\n        timed\n          ? {\n              granularity,\n              locale: rest.locale ?? contextLocale,\n              name: rest.name,\n              disabled,\n              readOnly,\n              invalid,\n              required,\n              min: rest.min,\n              max: rest.max,\n            }\n          : null\n      }\n    >\n      <Calendar\n        closeOnSelect={!timed}\n        disabled={field?.disabled}\n        inline={false}\n        invalid={field?.invalid}\n        positioning={positioning}\n        readOnly={field?.readOnly}\n        required={field?.required}\n        {...rest}\n        onValueChange={\n          timed\n            ? (details) =>\n                onValueChange?.({\n                  ...details,\n                  value: details.value.map((v) => toCalendarDateTime(v)),\n                })\n            : onValueChange\n        }\n        slot={slot ?? \"date-picker\"}\n      />\n    </TimedContext>\n  );\n};\n\nexport const DatePickerTrigger = (\n  props: React.ComponentProps<typeof ArkDatePicker.Trigger>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.Control data-slot=\"date-picker-control\">\n      <ArkDatePicker.Trigger\n        className={cn(\n          \"justify-start\",\n          \"text-start data-placeholder-shown:[&>span]:text-muted-foreground\",\n          \"active:scale-100\",\n          \"[&_svg:not([class*='text-'])]:opacity-64\",\n          className\n        )}\n        {...rest}\n        data-slot={slot ?? \"date-picker-trigger\"}\n      >\n        {children}\n      </ArkDatePicker.Trigger>\n    </ArkDatePicker.Control>\n  );\n};\n\ninterface DatePickerInputProps\n  extends Omit<React.ComponentProps<typeof ArkDatePicker.Input>, \"size\">,\n    InputProps {}\n\n/**\n * The picker's field, and the calendar button beside it.\n *\n * In a date picker it is a text input that reads what is typed in the locale's date format. In one\n * with a `granularity` it is **segmented** — day, month, year, hour, minute and, in a 12-hour\n * locale, AM/PM, each its own editable part in the locale's order — because a date and a time cannot\n * be typed as one string: Ark's date input admits only digits and the date separator, so a `:` or\n * `PM` never gets in. The segments are Ark's `DateInput`, bound to the picker's value both ways.\n */\nexport const DatePickerInput = (props: DatePickerInputProps) => {\n  const timed = useContext(TimedContext);\n  return timed ? <SegmentedInput {...props} timed={timed} /> : <TextInput {...props} />;\n};\n\nconst CalendarButton = () => (\n  <InputGroupAddon align=\"inline-end\">\n    <ArkDatePicker.Trigger asChild>\n      <InputGroupButton size=\"icon-sm\" slot=\"date-picker-trigger\" variant=\"ghost\">\n        <CalendarIcon aria-hidden className=\"text-muted-foreground\" />\n      </InputGroupButton>\n    </ArkDatePicker.Trigger>\n  </InputGroupAddon>\n);\n\nconst TextInput = (props: DatePickerInputProps) => {\n  const { size, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.Control data-slot=\"date-picker-control\">\n      <InputGroup size={size}>\n        <ArkDatePicker.Input asChild {...rest}>\n          <InputGroupInput slot={slot ?? \"date-picker-input\"} />\n        </ArkDatePicker.Input>\n        <CalendarButton />\n      </InputGroup>\n    </ArkDatePicker.Control>\n  );\n};\n\nconst SegmentedInput = (props: DatePickerInputProps & { timed: TimedPicker }) => {\n  const { size, slot, timed, className, \"aria-label\": ariaLabel } = props;\n  const api = useDatePickerContext();\n\n  return (\n    <ArkDatePicker.Control data-slot=\"date-picker-control\">\n      <InputGroup size={size}>\n        <ArkDateInput.Root\n          aria-invalid={timed.invalid || undefined}\n          className={cn(\n            \"flex min-w-0 flex-1 items-center self-stretch px-3\",\n            \"text-base md:text-sm\",\n            className\n          )}\n          data-slot={slot ?? \"date-picker-input\"}\n          disabled={timed.disabled}\n          granularity={timed.granularity}\n          invalid={timed.invalid}\n          locale={timed.locale}\n          max={timed.max}\n          min={timed.min}\n          name={timed.name}\n          onValueChange={(details) => {\n            const [value] = details.value;\n            api.setValue(value ? [toCalendarDateTime(value)] : []);\n          }}\n          onPaste={(event) => {\n            const pasted = parsePasted(\n              event.clipboardData.getData(\"text/plain\").trim(),\n              timed.locale,\n              api.value[0]\n            );\n            if (pasted) api.setValue([pasted]);\n          }}\n          readOnly={timed.readOnly}\n          required={timed.required}\n          value={api.value.map((v) => toCalendarDateTime(v))}\n        >\n          <ArkDateInput.Control className=\"flex min-w-0 items-center\" data-slot=\"date-picker-segments\">\n            <ArkDateInput.SegmentGroup aria-label={ariaLabel} className=\"flex items-center gap-px\">\n              <ArkDateInput.SegmentContext>\n                {(segment) => (\n                  <ArkDateInput.Segment\n                    className={cn(\n                      \"tabular-nums\",\n                      \"rounded-sm px-0.5 outline-none\",\n                      \"focus:bg-primary focus:text-primary-foreground\",\n                      \"data-placeholder-shown:text-faint\",\n                      \"data-[type=literal]:select-none data-[type=literal]:px-px data-[type=literal]:text-muted-foreground\",\n                      \"data-readonly:cursor-default\",\n                      \"group-data-invalid/input-group:text-destructive-foreground\",\n                      \"group-data-invalid/input-group:focus:bg-destructive group-data-invalid/input-group:focus:text-destructive-content\"\n                    )}\n                    data-slot=\"date-picker-segment\"\n                    // The separators are the runtime's (`Intl`), and the server's and the browser's\n                    // ICU can disagree on which space one is.\n                    segment={segment}\n                    suppressHydrationWarning\n                  />\n                )}\n              </ArkDateInput.SegmentContext>\n            </ArkDateInput.SegmentGroup>\n          </ArkDateInput.Control>\n          <ArkDateInput.HiddenInput />\n        </ArkDateInput.Root>\n        <CalendarButton />\n      </InputGroup>\n    </ArkDatePicker.Control>\n  );\n};\n\nexport interface DatePickerTimerProps\n  extends Omit<React.ComponentProps<typeof Input>, \"size\" | \"step\" | \"type\"> {\n  /**\n   * The control height, one of the shared sizes.\n   *\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * The step of the time input **in seconds**, as on `<input type=\"time\">`: `60` shows hours and\n   * minutes, `1` adds seconds. Inside a `DatePicker` it follows the picker's `granularity`.\n   *\n   * @default 60\n   */\n  step?: number;\n}\n\nconst two = (n: number) => String(n).padStart(2, \"0\");\n\n/**\n * A time field: an `InputGroup` around `<input type=\"time\">` with a clock addon.\n *\n * **Inside a `DatePicker`'s `DatePickerContent` it is the picker's time**, and the picker is one\n * date-and-time field: the timer shows the hour and minute of the picker's value and setting it\n * sets the picker's value, so the input above and the calendar beside it follow. Choosing a time\n * before any date takes the day the calendar is showing. **Anywhere else it is a plain time input**\n * you control with `value` and `onChange`.\n *\n * Props go where they read naturally: `size` and the field state (`disabled`, `invalid`, `readOnly`,\n * `required`, taken from an ancestor `Field` unless given) apply to the field, `className` and every\n * other prop go to the `<input>` itself — so `aria-label`, `name` and `onChange` do what they say.\n * The group around it is `w-full`; size it with the element you put it in.\n */\nexport const DatePickerTimer = (props: DatePickerTimerProps) => {\n  const timed = useContext(TimedContext);\n  return timed ? (\n    <PickerTimer granularity={timed.granularity} {...props} />\n  ) : (\n    <TimeInput {...props} />\n  );\n};\n\nconst PickerTimer = (\n  props: DatePickerTimerProps & { granularity: DatePickerGranularity }\n) => {\n  const { granularity, step, onChange, ...rest } = props;\n  const api = useDatePickerContext();\n  const current = api.value[0];\n  const seconds = (step ?? (granularity === \"second\" ? 1 : 60)) < 60;\n  const time = current && \"hour\" in current ? current : undefined;\n  const text = time\n    ? `${two(time.hour)}:${two(time.minute)}${seconds ? `:${two(time.second)}` : \"\"}`\n    : `00:00${seconds ? \":00\" : \"\"}`;\n\n  return (\n    <TimeInput\n      {...rest}\n      onChange={(event) => {\n        onChange?.(event);\n        const [hour, minute, second = 0] = event.target.value.split(\":\").map(Number);\n        if (hour === undefined || minute === undefined) return;\n        api.setValue([\n          toCalendarDateTime(current ?? api.focusedValue).set({ hour, minute, second }),\n        ]);\n      }}\n      step={step ?? (granularity === \"second\" ? 1 : 60)}\n      value={text}\n    />\n  );\n};\n\nconst TimeInput = (props: DatePickerTimerProps) => {\n  const { size, step = 60, className, ...rest } = props;\n  const field: UseFieldContext | undefined = useFieldContext();\n\n  return (\n    <InputGroup size={size}>\n      <InputGroupAddon>\n        <ClockIcon />\n      </InputGroupAddon>\n      <InputGroupInput\n        // Not the field's `id`: the label of a `Field` names the date input, and a second element\n        // with that id would steal it.\n        aria-invalid={field?.invalid || undefined}\n        className={cn(\n          \"[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\",\n          className\n        )}\n        disabled={field?.disabled}\n        readOnly={field?.readOnly}\n        required={field?.required}\n        {...rest}\n        step={step}\n        type=\"time\"\n      />\n    </InputGroup>\n  );\n};\n\nexport const DatePickerContent = (\n  props: React.ComponentProps<typeof ArkDatePicker.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <ArkDatePicker.Positioner data-slot=\"date-picker-positioner\">\n        <ArkDatePicker.Content\n          className={cn(\n            \"[--cell-size:--spacing(8)]\",\n            \"z-[calc(50+var(--layer-index,0))]\",\n            \"w-fit min-w-72\",\n            \"p-3\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"rounded-box border shadow-lg/5\",\n            \"outline-none\",\n            \"origin-(--transform-origin)\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"date-picker-content\"}\n        />\n      </ArkDatePicker.Positioner>\n    </Portal>\n  );\n};\n\nexport const DatePickerValue = (\n  props: React.ComponentProps<typeof ArkDatePicker.ValueText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkDatePicker.ValueText\n      className={cn(\"font-medium text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"date-picker-value\"}\n    />\n  );\n};\n\nexport const DatePickerPresetTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkDatePicker.PresetTrigger>) => (\n  <CalendarPresetTrigger\n    {...rest}\n    slot={slot ?? \"date-picker-preset-trigger\"}\n  />\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AAiCO;AAsCP;;AACE;AACE;AAA6D;AACvD;AAGR;AAEA;AAEA;AAQA;AACA;AACA;AAGA;AAGA;AACF;AAoBO;AACL;AAAM;AACU;AACa;AAC3B;AACA;AACG;AAWL;AACE;AAAC;AAAA;AAGO;AACE;AACuB;AACZ;AACX;AACA;AACA;AACA;AACU;AACA;AAEZ;AAGN;AAAC;AAAA;AACiB;AACC;AACT;AACQ;AAChB;AACiB;AACA;AACb;AAIoB;AACX;AACkD;AAEzD;AAEQ;AAAA;AAAA;AAChB;AAGN;AAKE;AAEA;AAEI;AAAe;AAAd;AACY;AACT;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAAA;AAIT;AAgBE;AACA;AACF;AAaE;AAEA;AAGM;AAEA;AACgB;AAIxB;AAGE;AAGA;AAGM;AAAA;AAAc;AAAb;AACgC;AACpB;AACT;AACA;AACA;AAAA;AAEiB;AACH;AACG;AACJ;AACD;AACH;AACA;AACC;AAEV;AACA;AAAqD;AACvD;AAEE;AAAe;AAC6B;AACpC;AACK;AAEb;AAAiC;AACnC;AACgB;AACA;AACiC;AAEjD;AAIQ;AAAc;AAAb;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEQ;AAGV;AACwB;AAAA;AAKlC;AAC0B;AAAA;AAAA;AAAA;AAEZ;AAIxB;AAoCE;AACA;AAKF;AAKE;AASA;AACE;AAAC;AAAA;AACK;AAEF;AACA;AACA;AACa;AACiE;AAC7E;AACH;AAC8C;AACvC;AAAA;AAGb;AAGE;AAGA;AAEI;AAEA;AACA;AAAC;AAAA;AAGiC;AACrB;AACT;AACA;AAAA;AAEe;AACA;AACA;AACb;AACJ;AACK;AAAA;AAAA;AAIb;AAKE;AAEA;AAGM;AAAe;AAAd;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAK7B;AAKE;AAEA;AACE;AAAe;AAAd;AAC+C;AAC1C;AACe;AAAA;AAGzB;AAEwC;AACtC;AAEF;AACE;AAAC;AAAA;AACK;AACU;AAChB;;;;;;;;;;;"}

package/dist/simples/input-group.d.ts

@@ -6,21 +6,21 @@ import { Input } from './input';
 import { Textarea } from './textarea';
 declare const inpuGroupVariants: import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string[];
-        md: string[];
-        lg: string[];
+        readonly sm: "[--size:calc(var(--size-field)*7)]";
+        readonly md: "[--size:calc(var(--size-field)*8)]";
+        readonly lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, string[], {
     size: {
-        sm: string[];
-        md: string[];
-        lg: string[];
+        readonly sm: "[--size:calc(var(--size-field)*7)]";
+        readonly md: "[--size:calc(var(--size-field)*8)]";
+        readonly lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
-        sm: string[];
-        md: string[];
-        lg: string[];
+        readonly sm: "[--size:calc(var(--size-field)*7)]";
+        readonly md: "[--size:calc(var(--size-field)*8)]";
+        readonly lg: "[--size:calc(var(--size-field)*9)]";
     };
 }, undefined, string[], unknown, unknown, undefined>>;
 export interface InputGroupProps extends React.ComponentProps<typeof ark.div>, VariantProps<typeof inpuGroupVariants> {

package/dist/simples/input-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/simples/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;qDAqDrB,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,iBAAiB,CAAC;CAAG;AAE7C,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAYhD,CAAC;AAEF,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;qDA8C3B,CAAC;AAEH,UAAU,oBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,uBAAuB,CAAC;CAAG;AAEnD,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAkB1D,CAAC;AAEF,QAAA,MAAM,wBAAwB;;QAUxB;;;;;;;;;;;;WAYG;;;;;;QAZH;;;;;;;;;;;;WAYG;;;;;;QAZH;;;;;;;;;;;;WAYG;;;;qDAQP,CAAC;AAEH,UAAU,qBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,EACvD,YAAY,CAAC,OAAO,wBAAwB,CAAC;CAAG;AAEpD,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAoB5D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,sBAgB7C,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAiBxE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,sBAmB7C,CAAC"}
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/simples/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;qDAoCrB,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,iBAAiB,CAAC;CAAG;AAE7C,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAYhD,CAAC;AAEF,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;qDA8C3B,CAAC;AAEH,UAAU,oBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,uBAAuB,CAAC;CAAG;AAEnD,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAkB1D,CAAC;AAEF,QAAA,MAAM,wBAAwB;;QAUxB;;;;;;;;;;;;WAYG;;;;;;QAZH;;;;;;;;;;;;WAYG;;;;;;QAZH;;;;;;;;;;;;WAYG;;;;qDAWP,CAAC;AAEH,UAAU,qBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,EACvD,YAAY,CAAC,OAAO,wBAAwB,CAAC;CAAG;AAEpD,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAoB5D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,sBAgB7C,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAoBxE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,sBAmB7C,CAAC"}