@devalok/shilp-sutra 0.1.0

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

@@ -0,0 +1,192 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import * as m from "react";
+import { format as U, setHours as y, setMinutes as k, setMonth as W, setYear as X } from "date-fns";
+import { IconCalendarClock as Z } from "@tabler/icons-react";
+import { cn as A } from "../../ui/lib/utils.js";
+import { Popover as _, PopoverTrigger as F, PopoverContent as v } from "../../ui/popover.js";
+import { CalendarGrid as C } from "./calendar-grid.js";
+import { YearPicker as ee } from "./year-picker.js";
+import { MonthPicker as te } from "./month-picker.js";
+function Y(u) {
+  return u.toString().padStart(2, "0");
+}
+function w(u, e, s) {
+  const l = [];
+  for (let c = u; c <= e; c += s)
+    l.push(c);
+  return l;
+}
+const re = m.forwardRef(
+  function({
+    value: e,
+    onChange: s,
+    minDate: l,
+    maxDate: c,
+    disabledDates: T,
+    timeFormat: i = "12h",
+    minuteStep: D = 1,
+    placeholder: P = "Pick date & time",
+    className: R
+  }, O) {
+    const [b, j] = m.useState(!1), [M, g] = m.useState(e ?? /* @__PURE__ */ new Date()), [N, f] = m.useState("days");
+    m.useEffect(() => {
+      b || f("days");
+    }, [b]);
+    const d = e ? e.getHours() : 0, H = e ? e.getMinutes() : 0, S = d >= 12 ? "PM" : "AM", V = d === 0 ? 12 : d > 12 ? d - 12 : d, B = i === "12h" ? w(1, 12, 1) : w(0, 23, 1), E = w(0, 59, D), G = i === "12h" ? V : d, I = (t) => {
+      let o = y(t, e ? e.getHours() : d);
+      o = k(o, e ? e.getMinutes() : H), s == null || s(o);
+    }, $ = () => {
+      f((t) => t === "days" ? "months" : "years");
+    }, q = (t) => {
+      g((o) => W(o, t)), f("days");
+    }, z = (t) => {
+      g((o) => X(o, t)), f("months");
+    }, J = (t) => {
+      const o = e ? new Date(e) : /* @__PURE__ */ new Date();
+      let n = t;
+      i === "12h" && ((e ? S : "AM") === "AM" ? n = t === 12 ? 0 : t : n = t === 12 ? 12 : t + 12);
+      const p = y(o, n);
+      s == null || s(p);
+    }, K = (t) => {
+      const o = e ? new Date(e) : /* @__PURE__ */ new Date(), n = k(o, t);
+      s == null || s(n);
+    }, L = (t) => {
+      const o = e ? new Date(e) : /* @__PURE__ */ new Date(), n = o.getHours();
+      let p;
+      t === "AM" ? p = n >= 12 ? n - 12 : n : p = n < 12 ? n + 12 : n, s == null || s(y(o, p));
+    }, h = m.useMemo(() => e ? U(e, i === "12h" ? "MMM d, yyyy h:mm a" : "MMM d, yyyy HH:mm") : null, [e, i]), Q = () => {
+      switch (N) {
+        case "years":
+          return /* @__PURE__ */ r(
+            ee,
+            {
+              currentYear: M.getFullYear(),
+              selectedYear: e == null ? void 0 : e.getFullYear(),
+              onYearSelect: z,
+              minDate: l,
+              maxDate: c
+            }
+          );
+        case "months":
+          return /* @__PURE__ */ r(
+            te,
+            {
+              currentYear: M.getFullYear(),
+              selectedMonth: e == null ? void 0 : e.getMonth(),
+              onMonthSelect: q,
+              minDate: l,
+              maxDate: c
+            }
+          );
+        default:
+          return /* @__PURE__ */ r(
+            C,
+            {
+              currentMonth: M,
+              selected: e,
+              onSelect: I,
+              onMonthChange: g,
+              onHeaderClick: $,
+              disabledDates: T,
+              minDate: l,
+              maxDate: c
+            }
+          );
+      }
+    }, x = "h-ds-sm rounded-ds-md border border-border bg-layer-01 px-ds-02 text-ds-md text-text-primary transition-colors duration-fast-01 ease-productive-standard hover:border-border-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus cursor-pointer appearance-none";
+    return /* @__PURE__ */ a(_, { open: b, onOpenChange: j, children: [
+      /* @__PURE__ */ r(F, { asChild: !0, children: /* @__PURE__ */ a(
+        "button",
+        {
+          ref: O,
+          type: "button",
+          className: A(
+            "inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-border bg-layer-01 px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard",
+            "hover:border-border-strong",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2",
+            R
+          ),
+          "aria-label": h ? `Selected: ${h}` : P,
+          children: [
+            /* @__PURE__ */ r(
+              Z,
+              {
+                className: "h-ico-sm w-ico-sm text-text-placeholder",
+                stroke: 1.5
+              }
+            ),
+            /* @__PURE__ */ r(
+              "span",
+              {
+                className: A(
+                  "text-ds-md",
+                  h ? "text-text-primary" : "text-text-placeholder"
+                ),
+                children: h ?? P
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ r(
+        v,
+        {
+          className: "w-auto border-border bg-layer-01 p-ds-04",
+          align: "start",
+          sideOffset: 4,
+          children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-ds-04", children: [
+            Q(),
+            N === "days" && /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-02 border-t border-border pt-ds-04", children: [
+              /* @__PURE__ */ r("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-text-placeholder", children: "Time" }),
+              /* @__PURE__ */ a(
+                "select",
+                {
+                  value: G ?? "",
+                  onChange: (t) => J(Number(t.target.value)),
+                  className: x,
+                  "aria-label": "Hour",
+                  children: [
+                    !e && /* @__PURE__ */ r("option", { value: "", children: "--" }),
+                    B.map((t) => /* @__PURE__ */ r("option", { value: t, children: i === "24h" ? Y(t) : t }, t))
+                  ]
+                }
+              ),
+              /* @__PURE__ */ r("span", { className: "text-ds-md font-semibold text-text-placeholder", children: ":" }),
+              /* @__PURE__ */ a(
+                "select",
+                {
+                  value: e ? H : "",
+                  onChange: (t) => K(Number(t.target.value)),
+                  className: x,
+                  "aria-label": "Minute",
+                  children: [
+                    !e && /* @__PURE__ */ r("option", { value: "", children: "--" }),
+                    E.map((t) => /* @__PURE__ */ r("option", { value: t, children: Y(t) }, t))
+                  ]
+                }
+              ),
+              i === "12h" && /* @__PURE__ */ a(
+                "select",
+                {
+                  value: e ? S : "",
+                  onChange: (t) => L(t.target.value),
+                  className: x,
+                  "aria-label": "AM or PM",
+                  children: [
+                    !e && /* @__PURE__ */ r("option", { value: "", children: "--" }),
+                    /* @__PURE__ */ r("option", { value: "AM", children: "AM" }),
+                    /* @__PURE__ */ r("option", { value: "PM", children: "PM" })
+                  ]
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+re.displayName = "DateTimePicker";
+export {
+  re as DateTimePicker
+};

package/dist/composed/date-picker/index.d.ts

@@ -0,0 +1,18 @@
+export { CalendarGrid } from './calendar-grid';
+export type { CalendarGridProps } from './calendar-grid';
+export { DatePicker } from './date-picker';
+export type { DatePickerProps } from './date-picker';
+export { DateRangePicker } from './date-range-picker';
+export type { DateRangePickerProps } from './date-range-picker';
+export { YearPicker } from './year-picker';
+export type { YearPickerProps } from './year-picker';
+export { MonthPicker } from './month-picker';
+export type { MonthPickerProps } from './month-picker';
+export { TimePicker } from './time-picker';
+export type { TimePickerProps } from './time-picker';
+export { DateTimePicker } from './date-time-picker';
+export type { DateTimePickerProps } from './date-time-picker';
+export { useCalendar } from './use-calendar';
+export { Presets } from './presets';
+export type { PresetsProps, PresetKey } from './presets';
+//# sourceMappingURL=index.d.ts.map

package/dist/composed/date-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composed/date-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AACrD,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,YAAY,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA"}

package/dist/composed/date-picker/month-picker.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface MonthPickerProps {
+    currentYear: number;
+    selectedMonth?: number;
+    onMonthSelect: (month: number) => void;
+    minDate?: Date;
+    maxDate?: Date;
+}
+export declare const MonthPicker: React.ForwardRefExoticComponent<MonthPickerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=month-picker.d.ts.map

package/dist/composed/date-picker/month-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-picker.d.ts","sourceRoot":"","sources":["../../../src/composed/date-picker/month-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;CACf;AAED,eAAO,MAAM,WAAW,yFAkDvB,CAAA"}

package/dist/composed/date-picker/month-picker.js

@@ -0,0 +1,52 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import * as m from "react";
+import { cn as u } from "../../ui/lib/utils.js";
+const g = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+], h = m.forwardRef(
+  function({
+    currentYear: t,
+    selectedMonth: i,
+    onMonthSelect: c,
+    minDate: e,
+    maxDate: o
+  }, a) {
+    return /* @__PURE__ */ p("div", { ref: a, className: "w-[252px]", children: [
+      /* @__PURE__ */ r("div", { className: "text-center pb-ds-04 text-ds-md font-semibold text-text-primary", children: t }),
+      /* @__PURE__ */ r("div", { className: "grid grid-cols-4 gap-ds-02", children: g.map((n, s) => {
+        const d = s === i, l = e != null && (t < e.getFullYear() || t === e.getFullYear() && s < e.getMonth()) || o != null && (t > o.getFullYear() || t === o.getFullYear() && s > o.getMonth());
+        return /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            disabled: l || !1,
+            onClick: () => !l && c(s),
+            className: u(
+              "h-ds-sm-plus rounded-ds-md text-ds-md transition-colors",
+              l && "opacity-[0.38] pointer-events-none cursor-not-allowed",
+              d && "bg-interactive text-text-on-color",
+              !d && !l && "hover:bg-field text-text-primary"
+            ),
+            children: n
+          },
+          n
+        );
+      }) })
+    ] });
+  }
+);
+h.displayName = "MonthPicker";
+export {
+  h as MonthPicker
+};

package/dist/composed/date-picker/presets.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export type PresetKey = 'today' | 'yesterday' | 'last7days' | 'last30days' | 'thisMonth' | 'lastMonth' | 'thisYear';
+export interface PresetsProps {
+    presets: PresetKey[];
+    onSelect: (start: Date, end: Date) => void;
+    className?: string;
+}
+export declare const Presets: React.ForwardRefExoticComponent<PresetsProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=presets.d.ts.map

package/dist/composed/date-picker/presets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.d.ts","sourceRoot":"","sources":["../../../src/composed/date-picker/presets.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,MAAM,MAAM,SAAS,GACjB,OAAO,GACP,WAAW,GACX,WAAW,GACX,YAAY,GACZ,WAAW,GACX,WAAW,GACX,UAAU,CAAA;AAEd,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,SAAS,EAAE,CAAA;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,KAAK,IAAI,CAAA;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA4DD,eAAO,MAAM,OAAO,qFA6BnB,CAAA"}

package/dist/composed/date-picker/presets.js

@@ -0,0 +1,83 @@
+import { jsx as l } from "react/jsx-runtime";
+import * as b from "react";
+import { endOfDay as e, startOfYear as w, subMonths as h, endOfMonth as d, startOfMonth as i, startOfDay as s, subDays as r } from "date-fns";
+import { cn as c } from "../../ui/lib/utils.js";
+const p = {
+  today: {
+    label: "Today",
+    getRange: () => {
+      const t = /* @__PURE__ */ new Date();
+      return { start: s(t), end: e(t) };
+    }
+  },
+  yesterday: {
+    label: "Yesterday",
+    getRange: () => {
+      const t = r(/* @__PURE__ */ new Date(), 1);
+      return { start: s(t), end: e(t) };
+    }
+  },
+  last7days: {
+    label: "Last 7 days",
+    getRange: () => {
+      const t = /* @__PURE__ */ new Date();
+      return { start: s(r(t, 6)), end: e(t) };
+    }
+  },
+  last30days: {
+    label: "Last 30 days",
+    getRange: () => {
+      const t = /* @__PURE__ */ new Date();
+      return { start: s(r(t, 29)), end: e(t) };
+    }
+  },
+  thisMonth: {
+    label: "This month",
+    getRange: () => {
+      const t = /* @__PURE__ */ new Date();
+      return { start: i(t), end: d(t) };
+    }
+  },
+  lastMonth: {
+    label: "Last month",
+    getRange: () => {
+      const n = h(/* @__PURE__ */ new Date(), 1);
+      return { start: i(n), end: d(n) };
+    }
+  },
+  thisYear: {
+    label: "This year",
+    getRange: () => {
+      const t = /* @__PURE__ */ new Date();
+      return { start: w(t), end: e(t) };
+    }
+  }
+}, R = b.forwardRef(
+  function({ presets: n, onSelect: u, className: f }, g) {
+    return /* @__PURE__ */ l("div", { ref: g, className: c("flex flex-col gap-ds-01", f), children: n.map((o) => {
+      const a = p[o];
+      return a ? /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            const { start: m, end: y } = a.getRange();
+            u(m, y);
+          },
+          className: c(
+            "h-ds-sm w-full rounded-ds-md px-ds-03 text-left text-ds-sm",
+            "text-text-primary transition-colors",
+            "hover:bg-field",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus"
+          ),
+          children: a.label
+        },
+        o
+      ) : null;
+    }) });
+  }
+);
+R.displayName = "Presets";
+export {
+  R as Presets
+};

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface TimePickerProps {
+    /** The currently selected time (as a Date object). */
+    value?: Date | null;
+    /** Callback fired when the time changes. */
+    onChange?: (date: Date) => void;
+    /** Display format: 12-hour with AM/PM or 24-hour. */
+    format?: '12h' | '24h';
+    /** Step interval for minutes column. */
+    minuteStep?: number;
+    /** Step interval for seconds column. */
+    secondStep?: number;
+    /** Whether to show the seconds column. */
+    showSeconds?: boolean;
+    /** Placeholder text when no value is set. */
+    placeholder?: string;
+    /** Additional class names for the trigger button. */
+    className?: string;
+    /** Whether the picker is disabled. */
+    disabled?: boolean;
+}
+declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLButtonElement>>;
+export { TimePicker };
+//# sourceMappingURL=time-picker.d.ts.map

package/dist/composed/date-picker/time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/composed/date-picker/time-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,MAAM,WAAW,eAAe;IAC9B,sDAAsD;IACtD,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC/B,qDAAqD;IACrD,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACtB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAcD,QAAA,MAAM,UAAU,2FA4Qf,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,CAAA"}

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

@@ -0,0 +1,180 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import * as P from "react";
+import { format as O, setHours as S, setMinutes as $, setSeconds as j } from "date-fns";
+import { IconClock as X } from "@tabler/icons-react";
+import { cn as i } from "../../ui/lib/utils.js";
+import { Popover as Y, PopoverTrigger as Z, PopoverContent as _ } from "../../ui/popover.js";
+function w(f, s, c) {
+  const l = [];
+  for (let m = f; m <= s; m += c)
+    l.push(m);
+  return l;
+}
+function p(f) {
+  return f.toString().padStart(2, "0");
+}
+const F = P.forwardRef(
+  function({
+    value: s,
+    onChange: c,
+    format: l = "12h",
+    minuteStep: m = 1,
+    secondStep: B = 1,
+    showSeconds: x = !1,
+    placeholder: A = "Pick a time",
+    className: I,
+    disabled: T = !1
+  }, U) {
+    const [q, z] = P.useState(!1), o = s ? s.getHours() : null, v = s ? s.getMinutes() : null, D = s ? s.getSeconds() : null, k = o !== null ? o >= 12 ? "PM" : "AM" : null, E = o !== null ? o === 0 ? 12 : o > 12 ? o - 12 : o : null, G = l === "12h" ? w(1, 12, 1) : w(0, 23, 1), J = w(0, 59, m), K = w(0, 59, B), y = (e) => {
+      const t = s ? new Date(s) : /* @__PURE__ */ new Date();
+      let a = e.hours ?? t.getHours();
+      const H = e.minutes ?? t.getMinutes(), n = e.seconds ?? t.getSeconds();
+      l === "12h" && e.hours !== void 0 && ((e.ampm ?? k ?? "AM") === "AM" ? a = e.hours === 12 ? 0 : e.hours : a = e.hours === 12 ? 12 : e.hours + 12);
+      let u = S(t, a);
+      return u = $(u, H), u = j(u, n), u;
+    }, L = (e) => {
+      const t = y({ hours: e });
+      c == null || c(t);
+    }, Q = (e) => {
+      const t = y({ minutes: e });
+      c == null || c(t);
+    }, V = (e) => {
+      const t = y({ seconds: e });
+      c == null || c(t);
+    }, W = (e) => {
+      if (!s) {
+        const H = e === "AM" ? 0 : 12;
+        let n = /* @__PURE__ */ new Date();
+        n = S(n, H), n = $(n, 0), n = j(n, 0), c == null || c(n);
+        return;
+      }
+      const t = s.getHours();
+      let a;
+      e === "AM" ? a = t >= 12 ? t - 12 : t : a = t < 12 ? t + 12 : t, c == null || c(S(new Date(s), a));
+    }, b = P.useMemo(() => s ? l === "12h" ? O(s, x ? "h:mm:ss a" : "h:mm a") : O(s, x ? "HH:mm:ss" : "HH:mm") : null, [s, l, x]), R = l === "12h" ? E : o, M = "flex flex-col gap-ds-01 overflow-y-auto max-h-[200px] px-ds-01 scrollbar-thin", h = "flex h-ds-sm w-full items-center justify-center rounded-ds-md text-ds-md transition-colors duration-fast-01 ease-productive-standard cursor-pointer", N = "bg-interactive text-text-on-color", g = "text-text-primary hover:bg-field";
+    return /* @__PURE__ */ d(Y, { open: q, onOpenChange: z, children: [
+      /* @__PURE__ */ r(Z, { asChild: !0, children: /* @__PURE__ */ d(
+        "button",
+        {
+          ref: U,
+          type: "button",
+          disabled: T,
+          className: i(
+            "inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-border bg-layer-01 px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard",
+            "hover:border-border-strong",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2",
+            T && "opacity-[0.38] pointer-events-none",
+            I
+          ),
+          "aria-label": b ? `Selected time: ${b}` : A,
+          children: [
+            /* @__PURE__ */ r(
+              X,
+              {
+                className: "h-ico-sm w-ico-sm text-text-placeholder",
+                stroke: 1.5
+              }
+            ),
+            /* @__PURE__ */ r(
+              "span",
+              {
+                className: i(
+                  "text-ds-md",
+                  b ? "text-text-primary" : "text-text-placeholder"
+                ),
+                children: b ?? A
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ r(
+        _,
+        {
+          className: "w-auto border-border bg-layer-01 p-ds-04",
+          align: "start",
+          sideOffset: 4,
+          children: /* @__PURE__ */ d("div", { className: "flex gap-ds-03", role: "group", "aria-label": "Time picker", children: [
+            /* @__PURE__ */ d("div", { className: "flex flex-col items-center gap-ds-02", children: [
+              /* @__PURE__ */ r("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-text-placeholder", children: "Hr" }),
+              /* @__PURE__ */ r("div", { className: i(M, "min-w-[48px]"), children: G.map((e) => /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => L(e),
+                  className: i(
+                    h,
+                    R === e ? N : g
+                  ),
+                  "aria-label": `${e} hours`,
+                  "aria-selected": R === e || void 0,
+                  children: l === "24h" ? p(e) : e
+                },
+                e
+              )) })
+            ] }),
+            /* @__PURE__ */ d("div", { className: "flex flex-col items-center gap-ds-02", children: [
+              /* @__PURE__ */ r("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-text-placeholder", children: "Min" }),
+              /* @__PURE__ */ r("div", { className: i(M, "min-w-[48px]"), children: J.map((e) => /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => Q(e),
+                  className: i(
+                    h,
+                    v === e ? N : g
+                  ),
+                  "aria-label": `${p(e)} minutes`,
+                  "aria-selected": v === e || void 0,
+                  children: p(e)
+                },
+                e
+              )) })
+            ] }),
+            x && /* @__PURE__ */ d("div", { className: "flex flex-col items-center gap-ds-02", children: [
+              /* @__PURE__ */ r("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-text-placeholder", children: "Sec" }),
+              /* @__PURE__ */ r("div", { className: i(M, "min-w-[48px]"), children: K.map((e) => /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => V(e),
+                  className: i(
+                    h,
+                    D === e ? N : g
+                  ),
+                  "aria-label": `${p(e)} seconds`,
+                  "aria-selected": D === e || void 0,
+                  children: p(e)
+                },
+                e
+              )) })
+            ] }),
+            l === "12h" && /* @__PURE__ */ d("div", { className: "flex flex-col items-center gap-ds-02", children: [
+              /* @__PURE__ */ r("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-text-placeholder", children: " " }),
+              /* @__PURE__ */ r("div", { className: "flex flex-col gap-ds-01 px-ds-01", children: ["AM", "PM"].map((e) => /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => W(e),
+                  className: i(
+                    h,
+                    "min-w-[44px] font-semibold",
+                    k === e ? N : g
+                  ),
+                  "aria-label": e,
+                  "aria-selected": k === e || void 0,
+                  children: e
+                },
+                e
+              )) })
+            ] })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+F.displayName = "TimePicker";
+export {
+  F as TimePicker
+};

package/dist/composed/date-picker/use-calendar.d.ts

@@ -0,0 +1,9 @@
+export declare function useCalendar(initialMonth?: Date): {
+    currentMonth: Date;
+    setCurrentMonth: import('react').Dispatch<import('react').SetStateAction<Date>>;
+    goToPreviousMonth: () => void;
+    goToNextMonth: () => void;
+    goToMonth: (month: number) => void;
+    goToYear: (year: number) => void;
+};
+//# sourceMappingURL=use-calendar.d.ts.map

package/dist/composed/date-picker/use-calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-calendar.d.ts","sourceRoot":"","sources":["../../../src/composed/date-picker/use-calendar.ts"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,CAAC,YAAY,CAAC,EAAE,IAAI;;;;;uBAKnB,MAAM;qBAER,MAAM;EAW/B"}

package/dist/composed/date-picker/use-calendar.js

@@ -0,0 +1,16 @@
+import { useState as s } from "react";
+import { setYear as h, setMonth as M, addMonths as u, subMonths as a } from "date-fns";
+function f(e) {
+  const [r, t] = s(e ?? /* @__PURE__ */ new Date());
+  return {
+    currentMonth: r,
+    setCurrentMonth: t,
+    goToPreviousMonth: () => t((o) => a(o, 1)),
+    goToNextMonth: () => t((o) => u(o, 1)),
+    goToMonth: (o) => t((n) => M(n, o)),
+    goToYear: (o) => t((n) => h(n, o))
+  };
+}
+export {
+  f as useCalendar
+};

package/dist/composed/date-picker/year-picker.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface YearPickerProps {
+    currentYear: number;
+    selectedYear?: number;
+    onYearSelect: (year: number) => void;
+    minDate?: Date;
+    maxDate?: Date;
+}
+export declare const YearPicker: React.ForwardRefExoticComponent<YearPickerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=year-picker.d.ts.map

package/dist/composed/date-picker/year-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"year-picker.d.ts","sourceRoot":"","sources":["../../../src/composed/date-picker/year-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;CACf;AAED,eAAO,MAAM,UAAU,wFA+CtB,CAAA"}