@devalok/shilp-sutra 0.1.0

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

@@ -0,0 +1,173 @@
+import { jsxs as w, jsx as i } from "react/jsx-runtime";
+import * as g from "react";
+import { startOfMonth as v, endOfMonth as S, startOfWeek as V, endOfWeek as X, addDays as f, subMonths as Z, format as m, addMonths as _, isSameMonth as D, isSameDay as y, lastDayOfMonth as H, isBefore as k, startOfDay as W, isAfter as M, isWithinInterval as T } from "date-fns";
+import { IconChevronLeft as ee, IconChevronRight as te } from "@tabler/icons-react";
+import { cn as G } from "../../ui/lib/utils.js";
+const se = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], re = g.forwardRef(
+  function({
+    currentMonth: a,
+    selected: N,
+    rangeStart: n,
+    rangeEnd: d,
+    hoverDate: l,
+    onSelect: R,
+    onHover: c,
+    onMonthChange: x,
+    onHeaderClick: j,
+    disabledDates: b,
+    minDate: A,
+    maxDate: C,
+    hidePrevNav: K,
+    hideNextNav: L
+  }, q) {
+    const h = g.useRef(null), B = v(a), F = S(a), P = V(B), U = X(F), E = [];
+    let p = P;
+    for (; p <= U; )
+      E.push(p), p = f(p, 1);
+    const I = (e) => !!(b != null && b(e) || A && k(e, W(A)) || C && M(e, W(C))), Y = (e) => {
+      if (n && d) {
+        const o = k(n, d) ? n : d, t = M(d, n) ? d : n;
+        return T(e, { start: o, end: t });
+      }
+      if (n && l) {
+        const o = k(n, l) ? n : l, t = M(l, n) ? l : n;
+        return T(e, { start: o, end: t });
+      }
+      return !1;
+    }, $ = (e) => !!(n && y(e, n) || d && y(e, d)), z = (e) => {
+      if (!h.current) return;
+      const o = m(e, "yyyy-MM-dd"), t = h.current.querySelector(
+        `[data-date="${o}"]`
+      );
+      t ? t.focus() : x(v(e));
+    }, J = (e) => {
+      const t = e.target.getAttribute("data-date");
+      if (!t) return;
+      const s = /* @__PURE__ */ new Date(t + "T00:00:00");
+      let r = null;
+      switch (e.key) {
+        case "ArrowLeft":
+          r = f(s, -1);
+          break;
+        case "ArrowRight":
+          r = f(s, 1);
+          break;
+        case "ArrowUp":
+          r = f(s, -7);
+          break;
+        case "ArrowDown":
+          r = f(s, 7);
+          break;
+        case "Home":
+          r = v(s);
+          break;
+        case "End":
+          r = H(s);
+          break;
+        case "Enter":
+        case " ": {
+          e.preventDefault(), !I(s) && D(s, a) && R(s);
+          return;
+        }
+        default:
+          return;
+      }
+      r && (e.preventDefault(), z(r));
+    };
+    return /* @__PURE__ */ w("div", { ref: q, className: "w-[252px]", children: [
+      /* @__PURE__ */ w("div", { className: "flex items-center justify-between px-ds-02 pb-ds-04", children: [
+        K ? /* @__PURE__ */ i("span", { className: "h-ds-xs-plus w-ds-xs-plus" }) : /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            onClick: () => x(Z(a, 1)),
+            className: "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md text-text-placeholder transition-colors duration-fast-01 ease-productive-standard hover:bg-field hover:text-text-secondary",
+            "aria-label": "Previous month",
+            children: /* @__PURE__ */ i(ee, { className: "h-ico-sm w-ico-sm", stroke: 1.5 })
+          }
+        ),
+        /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            onClick: j,
+            className: G(
+              "text-ds-md font-semibold text-text-primary",
+              j && "cursor-pointer rounded-ds-md px-ds-02 transition-colors duration-fast-01 ease-productive-standard hover:bg-field"
+            ),
+            "aria-label": "Switch to month/year view",
+            children: m(a, "MMMM yyyy")
+          }
+        ),
+        L ? /* @__PURE__ */ i("span", { className: "h-ds-xs-plus w-ds-xs-plus" }) : /* @__PURE__ */ i(
+          "button",
+          {
+            type: "button",
+            onClick: () => x(_(a, 1)),
+            className: "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md text-text-placeholder transition-colors duration-fast-01 ease-productive-standard hover:bg-field hover:text-text-secondary",
+            "aria-label": "Next month",
+            children: /* @__PURE__ */ i(te, { className: "h-ico-sm w-ico-sm", stroke: 1.5 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ w(
+        "div",
+        {
+          ref: h,
+          className: "grid grid-cols-7 gap-0",
+          role: "grid",
+          tabIndex: 0,
+          "aria-label": "Calendar",
+          onKeyDown: J,
+          children: [
+            se.map((e) => /* @__PURE__ */ i(
+              "div",
+              {
+                role: "columnheader",
+                className: "flex h-ds-sm items-center justify-center text-ds-xs font-semibold uppercase tracking-wider text-text-placeholder",
+                children: e
+              },
+              e
+            )),
+            E.map((e, o) => {
+              const t = D(e, a), s = I(e), r = N && y(e, N), O = Y(e), u = $(e), Q = y(e, /* @__PURE__ */ new Date());
+              return /* @__PURE__ */ i(
+                "button",
+                {
+                  type: "button",
+                  role: "gridcell",
+                  "data-date": m(e, "yyyy-MM-dd"),
+                  tabIndex: t && !s ? 0 : -1,
+                  disabled: !t || s,
+                  onClick: () => {
+                    t && !s && R(e);
+                  },
+                  onMouseEnter: () => c == null ? void 0 : c(e),
+                  onMouseLeave: () => c == null ? void 0 : c(null),
+                  "aria-label": m(e, "EEEE, MMMM d, yyyy"),
+                  "aria-selected": r || u || void 0,
+                  "aria-disabled": !t || s || void 0,
+                  className: G(
+                    "flex h-ds-sm w-ds-sm-plus items-center justify-center rounded-ds-md text-ds-md font-body transition-colors duration-fast-01 ease-productive-standard",
+                    !t && "pointer-events-none opacity-0",
+                    t && s && "opacity-[0.38] pointer-events-none cursor-not-allowed",
+                    t && !s && !r && !u && !O && "text-text-primary hover:bg-field",
+                    O && !u && "rounded-ds-none bg-field text-text-primary",
+                    (r || u) && "bg-interactive text-text-on-color hover:bg-interactive-hover",
+                    Q && !r && !u && !s && "font-semibold text-interactive"
+                  ),
+                  children: m(e, "d")
+                },
+                o
+              );
+            })
+          ]
+        }
+      )
+    ] });
+  }
+);
+re.displayName = "CalendarGrid";
+export {
+  re as CalendarGrid
+};

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface DatePickerProps {
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+    placeholder?: string;
+    className?: string;
+    formatStr?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: (date: Date) => boolean;
+}
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
+export { DatePicker };
+//# sourceMappingURL=date-picker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/composed/date-picker/date-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;CACxC;AAED,QAAA,MAAM,UAAU,2FAyHf,CAAA;AAID,OAAO,EAAE,UAAU,EAAE,CAAA"}

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

@@ -0,0 +1,123 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import * as o from "react";
+import { format as C, setMonth as N, setYear as F } from "date-fns";
+import { IconCalendarEvent as O } from "@tabler/icons-react";
+import { cn as h } from "../../ui/lib/utils.js";
+import { Popover as j, PopoverTrigger as E, PopoverContent as H } from "../../ui/popover.js";
+import { CalendarGrid as R } from "./calendar-grid.js";
+import { YearPicker as V } from "./year-picker.js";
+import { MonthPicker as G } from "./month-picker.js";
+const I = o.forwardRef(
+  function({
+    value: e,
+    onChange: n,
+    placeholder: u = "Pick a date",
+    className: b,
+    formatStr: y = "MMM d, yyyy",
+    minDate: c,
+    maxDate: i,
+    disabledDates: g
+  }, M) {
+    const [d, m] = o.useState(!1), [a, l] = o.useState(
+      e ?? /* @__PURE__ */ new Date()
+    ), [x, s] = o.useState("days");
+    o.useEffect(() => {
+      d || s("days");
+    }, [d]);
+    const Y = (t) => {
+      n == null || n(t), m(!1);
+    }, k = () => {
+      s((t) => t === "days" ? "months" : "years");
+    }, P = (t) => {
+      l((f) => N(f, t)), s("days");
+    }, S = (t) => {
+      l((f) => F(f, t)), s("months");
+    }, w = () => {
+      switch (x) {
+        case "years":
+          return /* @__PURE__ */ r(
+            V,
+            {
+              currentYear: a.getFullYear(),
+              selectedYear: e == null ? void 0 : e.getFullYear(),
+              onYearSelect: S,
+              minDate: c,
+              maxDate: i
+            }
+          );
+        case "months":
+          return /* @__PURE__ */ r(
+            G,
+            {
+              currentYear: a.getFullYear(),
+              selectedMonth: e == null ? void 0 : e.getMonth(),
+              onMonthSelect: P,
+              minDate: c,
+              maxDate: i
+            }
+          );
+        default:
+          return /* @__PURE__ */ r(
+            R,
+            {
+              currentMonth: a,
+              selected: e,
+              onSelect: Y,
+              onMonthChange: l,
+              onHeaderClick: k,
+              disabledDates: g,
+              minDate: c,
+              maxDate: i
+            }
+          );
+      }
+    };
+    return /* @__PURE__ */ p(j, { open: d, onOpenChange: m, children: [
+      /* @__PURE__ */ r(E, { asChild: !0, children: /* @__PURE__ */ p(
+        "button",
+        {
+          ref: M,
+          type: "button",
+          className: h(
+            "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",
+            b
+          ),
+          children: [
+            /* @__PURE__ */ r(
+              O,
+              {
+                className: "h-ico-sm w-ico-sm text-text-placeholder",
+                stroke: 1.5
+              }
+            ),
+            /* @__PURE__ */ r(
+              "span",
+              {
+                className: h(
+                  "text-ds-md",
+                  e ? "text-text-primary" : "text-text-placeholder"
+                ),
+                children: e ? C(e, y) : u
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ r(
+        H,
+        {
+          className: "w-auto border-border bg-layer-01 p-ds-04",
+          align: "start",
+          sideOffset: 4,
+          children: w()
+        }
+      )
+    ] });
+  }
+);
+I.displayName = "DatePicker";
+export {
+  I as DatePicker
+};

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

@@ -0,0 +1,23 @@
+import { PresetKey } from './presets';
+import * as React from 'react';
+export interface DateRangePickerProps {
+    startDate?: Date | null;
+    endDate?: Date | null;
+    onChange?: (range: {
+        start: Date | null;
+        end: Date | null;
+    }) => void;
+    placeholder?: string;
+    className?: string;
+    formatStr?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: (date: Date) => boolean;
+    /** Show a presets sidebar with quick date range selections */
+    presets?: PresetKey[];
+    /** Number of calendar months to display side by side (default: 1) */
+    numberOfMonths?: number;
+}
+declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;
+export { DateRangePicker };
+//# sourceMappingURL=date-range-picker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-picker.d.ts","sourceRoot":"","sources":["../../../src/composed/date-picker/date-range-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAI1C,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;QAAC,GAAG,EAAE,IAAI,GAAG,IAAI,CAAA;KAAE,KAAK,IAAI,CAAA;IACpE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;IACvC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,SAAS,EAAE,CAAA;IACrB,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,QAAA,MAAM,eAAe,gGA+MpB,CAAA;AAID,OAAO,EAAE,eAAe,EAAE,CAAA"}

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

@@ -0,0 +1,166 @@
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import * as s from "react";
+import { format as H, setMonth as z, setYear as J, addMonths as E, isBefore as K, isAfter as L } from "date-fns";
+import { IconCalendarEvent as Q } from "@tabler/icons-react";
+import { cn as C } from "../../ui/lib/utils.js";
+import { Popover as U, PopoverTrigger as W, PopoverContent as X } from "../../ui/popover.js";
+import { CalendarGrid as F } from "./calendar-grid.js";
+import { YearPicker as Z } from "./year-picker.js";
+import { MonthPicker as D } from "./month-picker.js";
+import { Presets as ee } from "./presets.js";
+const re = s.forwardRef(
+  function({
+    startDate: c,
+    endDate: v,
+    onChange: n,
+    placeholder: O = "Pick a date range",
+    className: j,
+    formatStr: P = "MMM d",
+    minDate: a,
+    maxDate: d,
+    disabledDates: S,
+    presets: x,
+    numberOfMonths: A = 1
+  }, G) {
+    const [b, g] = s.useState(!1), [i, u] = s.useState(
+      c ?? /* @__PURE__ */ new Date()
+    ), [e, f] = s.useState(
+      c ?? null
+    ), [l, h] = s.useState(
+      v ?? null
+    ), [w, N] = s.useState(null), [T, m] = s.useState("days"), M = Math.max(1, A);
+    s.useEffect(() => {
+      f(c ?? null), h(v ?? null);
+    }, [c, v]), s.useEffect(() => {
+      b || m("days");
+    }, [b]);
+    const k = (r) => {
+      if (!e || e && l)
+        f(r), h(null);
+      else {
+        const t = K(r, e) ? r : e, p = L(r, e) ? r : e;
+        f(t), h(p), n == null || n({ start: t, end: p }), g(!1);
+      }
+    }, V = (r, t) => {
+      f(r), h(t), n == null || n({ start: r, end: t }), g(!1);
+    }, Y = () => {
+      m((r) => r === "days" ? "months" : "years");
+    }, $ = (r) => {
+      u((t) => z(t, r)), m("days");
+    }, B = (r) => {
+      u((t) => J(t, r)), m("months");
+    }, I = () => e && l ? `${H(e, P)} - ${H(l, P)}` : O, _ = () => M === 1 ? /* @__PURE__ */ o(
+      F,
+      {
+        currentMonth: i,
+        rangeStart: e,
+        rangeEnd: l,
+        hoverDate: w,
+        onSelect: k,
+        onHover: N,
+        onMonthChange: u,
+        onHeaderClick: Y,
+        disabledDates: S,
+        minDate: a,
+        maxDate: d
+      }
+    ) : /* @__PURE__ */ o("div", { className: "flex flex-row gap-ds-04", children: Array.from({ length: M }, (r, t) => /* @__PURE__ */ o(
+      F,
+      {
+        currentMonth: E(i, t),
+        rangeStart: e,
+        rangeEnd: l,
+        hoverDate: w,
+        onSelect: k,
+        onHover: N,
+        onMonthChange: (p) => {
+          u(E(p, -t));
+        },
+        onHeaderClick: Y,
+        disabledDates: S,
+        minDate: a,
+        maxDate: d,
+        hidePrevNav: t > 0,
+        hideNextNav: t < M - 1
+      },
+      t
+    )) }), R = () => {
+      switch (T) {
+        case "years":
+          return /* @__PURE__ */ o(
+            Z,
+            {
+              currentYear: i.getFullYear(),
+              selectedYear: e == null ? void 0 : e.getFullYear(),
+              onYearSelect: B,
+              minDate: a,
+              maxDate: d
+            }
+          );
+        case "months":
+          return /* @__PURE__ */ o(
+            D,
+            {
+              currentYear: i.getFullYear(),
+              selectedMonth: e == null ? void 0 : e.getMonth(),
+              onMonthSelect: $,
+              minDate: a,
+              maxDate: d
+            }
+          );
+        default:
+          return _();
+      }
+    }, q = x && x.length > 0;
+    return /* @__PURE__ */ y(U, { open: b, onOpenChange: g, children: [
+      /* @__PURE__ */ o(W, { asChild: !0, children: /* @__PURE__ */ y(
+        "button",
+        {
+          ref: G,
+          type: "button",
+          className: C(
+            "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",
+            j
+          ),
+          children: [
+            /* @__PURE__ */ o(
+              Q,
+              {
+                className: "h-ico-sm w-ico-sm text-text-placeholder",
+                stroke: 1.5
+              }
+            ),
+            /* @__PURE__ */ o(
+              "span",
+              {
+                className: C(
+                  "text-ds-md",
+                  e && l ? "text-text-primary" : "text-text-placeholder"
+                ),
+                children: I()
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ o(
+        X,
+        {
+          className: "w-auto border-border bg-layer-01 p-ds-04",
+          align: "start",
+          sideOffset: 4,
+          children: q ? /* @__PURE__ */ y("div", { className: "flex flex-row gap-ds-04", children: [
+            /* @__PURE__ */ o("div", { className: "min-w-[140px] border-r border-border pr-ds-04", children: /* @__PURE__ */ o(ee, { presets: x, onSelect: V }) }),
+            /* @__PURE__ */ o("div", { children: R() })
+          ] }) : R()
+        }
+      )
+    ] });
+  }
+);
+re.displayName = "DateRangePicker";
+export {
+  re as DateRangePicker
+};

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface DateTimePickerProps {
+    /** The currently selected date and time. */
+    value?: Date | null;
+    /** Callback fired when the date/time changes. */
+    onChange?: (date: Date | null) => void;
+    /** Earliest selectable date. */
+    minDate?: Date;
+    /** Latest selectable date. */
+    maxDate?: Date;
+    /** Function to disable specific dates. */
+    disabledDates?: (date: Date) => boolean;
+    /** Display format for the time portion: 12-hour with AM/PM or 24-hour. */
+    timeFormat?: '12h' | '24h';
+    /** Step interval for the minute selector. */
+    minuteStep?: number;
+    /** Placeholder text when no value is set. */
+    placeholder?: string;
+    /** Additional class names for the trigger button. */
+    className?: string;
+}
+declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLButtonElement>>;
+export { DateTimePicker };
+//# sourceMappingURL=date-time-picker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-picker.d.ts","sourceRoot":"","sources":["../../../src/composed/date-picker/date-time-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,MAAM,WAAW,mBAAmB;IAClC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACnB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IACtC,gCAAgC;IAChC,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,8BAA8B;IAC9B,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;IACvC,0EAA0E;IAC1E,UAAU,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IAC1B,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAcD,QAAA,MAAM,cAAc,+FA6PnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA"}