@devalok/shilp-sutra-karm 0.16.0 → 0.17.0

package/dist/_chunks/sidebar-scratchpad.js

@@ -0,0 +1,508 @@
+"use client";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import * as A from "react";
+import { useState as C, useRef as W, useEffect as P } from "react";
+import { cn as d } from "@devalok/shilp-sutra/ui/lib/utils";
+import { IconCheck as L, IconCoffee as Z, IconClock as z, IconArrowRight as F, IconSparkles as R, IconChevronDown as M, IconRefresh as U, IconX as H } from "@tabler/icons-react";
+import { springs as E } from "@devalok/shilp-sutra/ui/lib/motion";
+import { formatRelativeTime as X } from "@devalok/shilp-sutra/ui/lib/date-utils";
+import { A as B, m as S, M as q } from "./vendor.js";
+import { Checkbox as G } from "@devalok/shilp-sutra/ui/checkbox";
+import { Input as J } from "@devalok/shilp-sutra/ui/input";
+import { Button as Q } from "@devalok/shilp-sutra/ui/button";
+function V() {
+  const f = (/* @__PURE__ */ new Date()).getHours();
+  return f < 12 ? "Good morning" : f < 17 ? "Good afternoon" : "Good evening";
+}
+function Y() {
+  return (/* @__PURE__ */ new Date()).toLocaleDateString("en-IN", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+    timeZone: "Asia/Kolkata"
+  });
+}
+function ee(f) {
+  return new Date(f).toLocaleTimeString("en-IN", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: !0,
+    timeZone: "Asia/Kolkata"
+  });
+}
+const se = A.forwardRef(
+  function({
+    userName: a,
+    attendance: r,
+    canMarkAttendance: p,
+    onMarkAttendance: m,
+    isSubmitting: u = !1,
+    formatTime: v = ee,
+    className: h,
+    ...n
+  }, l) {
+    var w, k;
+    const c = ((w = r == null ? void 0 : r.attendance) == null ? void 0 : w.status) ?? "Not_Marked", g = c === "PRESENT" || u, y = c === "BREAK", N = (k = r == null ? void 0 : r.attendance) == null ? void 0 : k.timeIn, i = V(), o = (a == null ? void 0 : a.split(" ")[0]) || "there", x = Y();
+    return g && !y ? /* @__PURE__ */ e("div", { ref: l, className: d("relative overflow-hidden rounded-ds-2xl border border-surface-border-strong bg-surface-1 shadow-01", h), ...n, children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-ds-06 py-ds-05b sm:px-ds-07", children: [
+      /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-02", children: [
+        /* @__PURE__ */ s("h2", { className: "text-ds-2xl text-surface-fg", children: [
+          i,
+          ",",
+          " ",
+          /* @__PURE__ */ e("span", { className: "font-semibold italic text-accent-11", children: o })
+        ] }),
+        /* @__PURE__ */ e("p", { className: "text-ds-md text-surface-fg-subtle", children: x })
+      ] }),
+      /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03 rounded-ds-xl bg-success-3 px-ds-05 py-ds-03", children: [
+        /* @__PURE__ */ e("div", { className: "flex h-ico-md w-ico-md items-center justify-center rounded-ds-full bg-success-9", children: /* @__PURE__ */ e(L, { className: "h-ico-sm w-ico-sm text-accent-fg" }) }),
+        /* @__PURE__ */ s("span", { className: "text-ds-md font-semibold text-success-11", children: [
+          "Marked at",
+          " ",
+          N ? v(N) : "--:--"
+        ] })
+      ] })
+    ] }) }) : y ? /* @__PURE__ */ e("div", { ref: l, className: d("relative overflow-hidden rounded-ds-2xl border border-surface-border-strong bg-surface-1 shadow-01", h), ...n, children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-ds-06 py-ds-05b sm:px-ds-07", children: [
+      /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-02", children: [
+        /* @__PURE__ */ s("h2", { className: "text-ds-2xl text-surface-fg", children: [
+          i,
+          ",",
+          " ",
+          /* @__PURE__ */ e("span", { className: "font-semibold italic text-accent-11", children: o })
+        ] }),
+        /* @__PURE__ */ e("p", { className: "text-ds-md text-surface-fg-subtle", children: x })
+      ] }),
+      /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03 rounded-ds-xl bg-warning-3 px-ds-05 py-ds-03", children: [
+        /* @__PURE__ */ e(Z, { className: "h-ico-sm w-ico-sm text-warning-11" }),
+        /* @__PURE__ */ s("span", { className: "text-ds-md font-semibold text-warning-11", children: [
+          "On break",
+          r != null && r.breakReason ? ` — ${r.breakReason}` : ""
+        ] })
+      ] })
+    ] }) }) : p ? /* @__PURE__ */ e("div", { ref: l, className: d("relative overflow-hidden rounded-ds-2xl border border-surface-border-strong bg-gradient-to-br from-accent-2 via-surface-1 to-success-3", h), ...n, children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-ds-06 py-ds-07 sm:px-ds-07 sm:py-ds-08", children: [
+      /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-02b", children: [
+        /* @__PURE__ */ s("h2", { className: "text-ds-3xl text-surface-fg", children: [
+          i,
+          ",",
+          " ",
+          /* @__PURE__ */ e("span", { className: "font-semibold italic text-accent-11", children: o })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "flex items-center gap-ds-03", children: /* @__PURE__ */ e("p", { className: "text-ds-base text-surface-fg-subtle", children: x }) })
+      ] }),
+      /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          onClick: m,
+          disabled: u,
+          className: "flex items-center gap-ds-03 rounded-ds-xl bg-accent-9 px-ds-06 py-ds-04 font-semibold text-accent-fg shadow-02 transition-all duration-150 ease-out hover:-translate-y-0.5 hover:shadow-03 active:translate-y-0 active:scale-[0.98] disabled:opacity-action-disabled",
+          children: [
+            u ? "Marking..." : "Mark Attendance",
+            !u && /* @__PURE__ */ e(F, { className: "h-ico-sm w-ico-sm" })
+          ]
+        }
+      )
+    ] }) }) : /* @__PURE__ */ e("div", { ref: l, className: d("relative overflow-hidden rounded-ds-2xl border border-surface-border-strong bg-surface-1 shadow-01", h), ...n, children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-ds-06 py-ds-06 sm:px-ds-07 sm:py-ds-07", children: [
+      /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-02b", children: [
+        /* @__PURE__ */ s("h2", { className: "text-ds-3xl text-surface-fg", children: [
+          i,
+          ",",
+          " ",
+          /* @__PURE__ */ e("span", { className: "font-semibold italic text-accent-11", children: o })
+        ] }),
+        /* @__PURE__ */ e("p", { className: "text-ds-base text-surface-fg-subtle", children: x })
+      ] }),
+      /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03 rounded-ds-xl bg-surface-2 px-ds-05 py-ds-03", children: [
+        /* @__PURE__ */ e(z, { className: "h-ico-sm w-ico-sm text-surface-fg-subtle" }),
+        /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-subtle", children: "Attendance window closed" })
+      ] })
+    ] }) });
+  }
+);
+se.displayName = "AttendanceCTA";
+const _ = [
+  "bg-category-amber-9",
+  "bg-category-teal-9",
+  "bg-category-cyan-9",
+  "bg-accent-9",
+  "bg-accent-9"
+], te = A.forwardRef(
+  function({
+    data: a,
+    loading: r = !1,
+    onRefresh: p,
+    unavailable: m = !1,
+    collapsible: u = !0,
+    defaultCollapsed: v = !1,
+    title: h,
+    className: n,
+    ...l
+  }, c) {
+    const [g, y] = C(v), N = h ?? "Morning Brief";
+    if (r && !a)
+      return /* @__PURE__ */ s("div", { ref: c, className: d("flex flex-col gap-ds-04 rounded-ds-2xl border border-surface-border-strong bg-surface-1 shadow-01 p-ds-05b", n), ...l, children: [
+        /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
+          /* @__PURE__ */ e("div", { className: "h-ico-sm w-ico-sm animate-pulse rounded bg-surface-2" }),
+          /* @__PURE__ */ e("div", { className: "h-4 w-24 animate-pulse rounded bg-surface-2" })
+        ] }),
+        [1, 2, 3].map((o) => /* @__PURE__ */ s("div", { className: "flex items-start gap-ds-04", children: [
+          /* @__PURE__ */ e("div", { className: "mt-ds-02b h-2 w-2 shrink-0 animate-pulse rounded-ds-full bg-surface-2" }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: "h-4 animate-pulse rounded bg-surface-2",
+              style: { width: `${60 + o * 10}%` }
+            }
+          )
+        ] }, o))
+      ] });
+    if (m)
+      return /* @__PURE__ */ s("div", { ref: c, className: d("flex items-center gap-ds-03 rounded-ds-2xl border border-surface-border-strong bg-surface-1 shadow-01 px-ds-05b py-ds-05", n), ...l, children: [
+        /* @__PURE__ */ e(R, { className: "h-ico-sm w-ico-sm text-surface-fg-subtle" }),
+        /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-subtle", children: "AI brief unavailable" })
+      ] });
+    if (!a || a.brief.length === 0) return null;
+    const i = !u || !g;
+    return /* @__PURE__ */ s("div", { ref: c, className: d("flex flex-col rounded-ds-2xl border border-surface-border-strong bg-surface-1 shadow-01", n), ...l, children: [
+      /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-ds-05b py-ds-05", children: [
+        u ? /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Toggle brief",
+            "aria-expanded": i,
+            onClick: () => y(!g),
+            className: "flex flex-1 items-center gap-ds-03 transition-colors hover:opacity-80",
+            children: [
+              /* @__PURE__ */ e(R, { className: "h-ico-sm w-ico-sm text-accent-11" }),
+              /* @__PURE__ */ e("span", { className: "text-ds-base font-semibold text-surface-fg", children: N }),
+              /* @__PURE__ */ e(
+                M,
+                {
+                  className: d(
+                    "h-ico-sm w-ico-sm text-surface-fg-subtle transition-transform duration-200",
+                    i && "rotate-180"
+                  )
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
+          /* @__PURE__ */ e(R, { className: "h-ico-sm w-ico-sm text-accent-11" }),
+          /* @__PURE__ */ e("span", { className: "text-ds-base font-semibold text-surface-fg", children: N })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "flex items-center gap-ds-02", children: p && /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            onClick: p,
+            "aria-label": "Refresh brief",
+            className: "p-1.5 rounded hover:bg-surface-2 transition-colors",
+            children: /* @__PURE__ */ e(U, { className: d("h-ico-sm w-ico-sm text-surface-fg-subtle", r && "animate-spin") })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ e(B, { initial: !1, children: i && /* @__PURE__ */ e(
+        S.div,
+        {
+          initial: { height: 0, opacity: 0 },
+          animate: { height: "auto", opacity: 1 },
+          exit: { height: 0, opacity: 0 },
+          transition: E.smooth,
+          className: "overflow-hidden",
+          children: /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-03 border-t border-surface-border-strong px-ds-05b pb-ds-05b pt-ds-05", children: [
+            a.brief.map((o, x) => /* @__PURE__ */ s("div", { className: "flex items-start gap-ds-04", children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: d("mt-ds-02b h-2 w-2 shrink-0 rounded-ds-full", _[x % _.length])
+                }
+              ),
+              /* @__PURE__ */ e("div", { className: "text-ds-md text-surface-fg-muted [&_p]:mb-0 [&_strong]:font-semibold [&_code]:rounded [&_code]:bg-surface-3 [&_code]:px-1 [&_code]:py-ds-01 [&_code]:text-ds-sm [&_a]:text-accent-11 [&_a]:underline", children: /* @__PURE__ */ e(q, { children: o }) })
+            ] }, x)),
+            /* @__PURE__ */ s("div", { className: "mt-ds-02 text-ds-xs text-surface-fg-subtle", children: [
+              "Generated ",
+              X(a.generatedAt)
+            ] })
+          ] })
+        }
+      ) })
+    ] });
+  }
+);
+te.displayName = "DailyBrief";
+const b = 20, I = 2, D = (b - I) / 2, j = 2 * Math.PI * D;
+function ae({ count: f, max: a, allDone: r }) {
+  const p = a > 0 ? f / a : 0, m = j * (1 - p);
+  return /* @__PURE__ */ s(
+    S.div,
+    {
+      className: "relative flex items-center justify-center",
+      animate: r ? { scale: [1, 1.1, 1] } : {},
+      transition: { duration: 0.3 },
+      children: [
+        /* @__PURE__ */ s("svg", { width: b, height: b, viewBox: `0 0 ${b} ${b}`, className: "-rotate-90", children: [
+          /* @__PURE__ */ e(
+            "circle",
+            {
+              cx: b / 2,
+              cy: b / 2,
+              r: D,
+              fill: "none",
+              strokeWidth: I,
+              className: "stroke-surface-2"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "circle",
+            {
+              cx: b / 2,
+              cy: b / 2,
+              r: D,
+              fill: "none",
+              strokeWidth: I,
+              strokeLinecap: "round",
+              strokeDasharray: j,
+              strokeDashoffset: m,
+              className: d(
+                "transition-all duration-300",
+                r ? "stroke-success-9" : "stroke-accent-9"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s("span", { className: "absolute text-[8px] font-medium text-surface-fg-muted", "data-testid": "progress-count", children: [
+          f,
+          "/",
+          a
+        ] })
+      ]
+    }
+  );
+}
+const re = A.forwardRef(
+  function({
+    items: a,
+    maxItems: r = 5,
+    onToggle: p,
+    onAdd: m,
+    onDelete: u,
+    title: v = "My Scratchpad",
+    resetLabel: h,
+    emptyText: n = "Nothing here yet. Add a task!",
+    emptyIcon: l,
+    loading: c = !1,
+    className: g,
+    ...y
+  }, N) {
+    const [i, o] = C(!1), [x, w] = C(""), k = W(null), $ = a.length > 0 && a.every((t) => t.done);
+    P(() => {
+      i && k.current && k.current.focus();
+    }, [i]);
+    function T() {
+      const t = x.trim();
+      t && (m(t), w(""));
+    }
+    function O(t) {
+      t.key === "Enter" ? (t.preventDefault(), T()) : t.key === "Escape" && (o(!1), w(""));
+    }
+    return c ? /* @__PURE__ */ s(
+      "div",
+      {
+        ref: N,
+        className: d(
+          "flex flex-col gap-ds-04 rounded-ds-2xl border border-surface-border-strong bg-surface-1 shadow-01 p-ds-05b",
+          g
+        ),
+        ...y,
+        children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ e("div", { className: "h-4 w-28 animate-pulse rounded bg-surface-2" }),
+            /* @__PURE__ */ e("div", { className: "h-5 w-5 animate-pulse rounded-full bg-surface-2" })
+          ] }),
+          [1, 2, 3].map((t) => /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
+            /* @__PURE__ */ e("div", { className: "h-ico-md w-ico-md shrink-0 animate-pulse rounded-ds-sm bg-surface-2" }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "h-4 animate-pulse rounded bg-surface-2",
+                style: { width: `${50 + t * 12}%` }
+              }
+            )
+          ] }, t))
+        ]
+      }
+    ) : /* @__PURE__ */ s(
+      "div",
+      {
+        ref: N,
+        className: d(
+          "flex flex-col rounded-ds-2xl border border-surface-border-strong bg-surface-1 shadow-01",
+          g
+        ),
+        ...y,
+        children: [
+          /* @__PURE__ */ s("div", { className: "flex items-center justify-between px-ds-05b py-ds-05", children: [
+            /* @__PURE__ */ e("span", { className: "text-ds-base font-semibold text-surface-fg", children: v }),
+            /* @__PURE__ */ e(ae, { count: a.length, max: r, allDone: $ })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "flex flex-col border-t border-surface-border-strong px-ds-05b pb-ds-04 pt-ds-04", children: [
+            a.length === 0 && !i ? /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center gap-ds-03 py-ds-06 text-center", children: [
+              l && /* @__PURE__ */ e(l, { className: "h-ico-lg w-ico-lg text-surface-fg-subtle" }),
+              /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-subtle", children: n })
+            ] }) : /* @__PURE__ */ e("div", { className: "flex flex-col gap-ds-02b", children: /* @__PURE__ */ e(B, { initial: !1, children: a.map((t) => /* @__PURE__ */ s(
+              S.div,
+              {
+                initial: { opacity: 0, x: -10 },
+                animate: { opacity: 1, x: 0 },
+                exit: { opacity: 0, x: 20, height: 0 },
+                transition: E.snappy,
+                className: "group flex items-center gap-ds-03 rounded-ds-md px-ds-02 py-ds-02 transition-colors hover:bg-surface-2",
+                children: [
+                  /* @__PURE__ */ e(
+                    G,
+                    {
+                      checked: t.done,
+                      onCheckedChange: (K) => p(t.id, K === !0),
+                      "aria-label": `Toggle ${t.text}`
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: d(
+                        "flex-1 text-ds-md transition-all duration-200 ease-in-out",
+                        t.done && "text-surface-fg-subtle line-through"
+                      ),
+                      children: t.text
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => u(t.id),
+                      "aria-label": `Delete ${t.text}`,
+                      className: "flex h-ico-md w-ico-md items-center justify-center rounded-ds-sm opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 hover:bg-surface-3",
+                      children: /* @__PURE__ */ e(H, { className: "h-3 w-3 text-surface-fg-subtle" })
+                    }
+                  )
+                ]
+              },
+              t.id
+            )) }) }),
+            a.length < r && /* @__PURE__ */ e("div", { className: "mt-ds-02b", children: i ? /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
+              /* @__PURE__ */ e(
+                J,
+                {
+                  ref: k,
+                  size: "sm",
+                  value: x,
+                  onChange: (t) => w(t.target.value),
+                  onKeyDown: O,
+                  onBlur: () => {
+                    x.trim() || (o(!1), w(""));
+                  },
+                  placeholder: "What needs doing?",
+                  className: "flex-1"
+                }
+              ),
+              /* @__PURE__ */ e(
+                Q,
+                {
+                  size: "sm",
+                  onClick: T,
+                  onMouseDown: (t) => t.preventDefault(),
+                  children: "Add"
+                }
+              )
+            ] }) : /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => o(!0),
+                className: "w-full rounded-ds-md px-ds-02 py-ds-02 text-left text-ds-md text-surface-fg-subtle transition-colors hover:bg-surface-2",
+                children: "+ Add a task..."
+              }
+            ) }),
+            h && /* @__PURE__ */ e("span", { className: "mt-ds-03 text-ds-xs text-surface-fg-subtle", children: h })
+          ] })
+        ]
+      }
+    );
+  }
+);
+re.displayName = "ScratchpadWidget";
+const de = A.forwardRef(
+  function({ items: a, onToggle: r, defaultOpen: p = !0, badgeCount: m, className: u, ...v }, h) {
+    const [n, l] = C(p);
+    return /* @__PURE__ */ s("div", { ref: h, className: d("flex flex-col", u), ...v, children: [
+      /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          onClick: () => l((c) => !c),
+          "aria-expanded": n,
+          className: "flex w-full items-center gap-ds-02 px-ds-03 py-ds-02 text-left text-ds-xs font-semibold text-surface-fg-muted transition-colors hover:bg-surface-2",
+          children: [
+            /* @__PURE__ */ e(
+              M,
+              {
+                className: d(
+                  "h-3.5 w-3.5 shrink-0 transition-transform duration-200",
+                  !n && "-rotate-180"
+                )
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "flex-1", children: "Scratchpad" }),
+            m != null && m > 0 && /* @__PURE__ */ e("span", { className: "rounded-full bg-surface-2 px-1.5 text-ds-xs text-surface-fg-muted", children: m })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: d(
+            "grid transition-[grid-template-rows] duration-200",
+            n ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          ),
+          children: /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0.5 px-ds-03 pb-ds-02", children: a.map((c) => /* @__PURE__ */ s(
+            "label",
+            {
+              className: "flex cursor-pointer items-center gap-ds-02 rounded-ds-sm px-ds-02 py-0.5 transition-colors hover:bg-surface-2",
+              children: [
+                /* @__PURE__ */ e(
+                  G,
+                  {
+                    checked: c.done,
+                    onCheckedChange: (g) => r(c.id, g === !0),
+                    "aria-label": `Toggle ${c.text}`,
+                    className: "h-3.5 w-3.5"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: d(
+                      "flex-1 text-xs transition-all duration-200",
+                      c.done ? "text-surface-fg-subtle line-through" : "text-surface-fg"
+                    ),
+                    children: c.text
+                  }
+                )
+              ]
+            },
+            c.id
+          )) }) })
+        }
+      )
+    ] });
+  }
+);
+de.displayName = "SidebarScratchpad";
+export {
+  se as A,
+  te as D,
+  re as S,
+  de as a
+};