@devalok/shilp-sutra 0.19.1 → 0.20.1

package/dist/composed/activity-feed.d.ts

@@ -12,6 +12,12 @@ export interface ActivityItem {
     color?: 'default' | 'success' | 'warning' | 'error' | 'info';
     detail?: React.ReactNode;
 }
+export interface GroupLabels {
+    today?: string;
+    yesterday?: string;
+    thisWeek?: string;
+    older?: string;
+}
 export interface ActivityFeedProps extends React.HTMLAttributes<HTMLDivElement> {
     items: ActivityItem[];
     onLoadMore?: () => void;
@@ -20,7 +26,17 @@ export interface ActivityFeedProps extends React.HTMLAttributes<HTMLDivElement>
     emptyState?: React.ReactNode;
     compact?: boolean;
     maxInitialItems?: number;
+    groupBy?: 'time' | 'none';
+    groupLabels?: GroupLabels;
 }
+/**
+ * Buckets items into time-based groups: today, yesterday, earlier this week (since Monday), older.
+ * Skips empty groups.
+ */
+export declare function groupItemsByTime(items: ActivityItem[], labels?: GroupLabels): {
+    label: string;
+    items: ActivityItem[];
+}[];
 declare const ActivityFeed: React.ForwardRefExoticComponent<ActivityFeedProps & React.RefAttributes<HTMLDivElement>>;
 export { ActivityFeed };
 //# sourceMappingURL=activity-feed.d.ts.map

package/dist/composed/activity-feed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"activity-feed.d.ts","sourceRoot":"","sources":["../../src/composed/activity-feed.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACxC,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAChC,SAAS,EAAE,IAAI,GAAG,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AA4HD,QAAA,MAAM,YAAY,0FA4EjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"activity-feed.d.ts","sourceRoot":"","sources":["../../src/composed/activity-feed.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACxC,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAChC,SAAS,EAAE,IAAI,GAAG,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B;AAiBD;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,EAAE,EACrB,MAAM,CAAC,EAAE,WAAW,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,YAAY,EAAE,CAAA;CAAE,EAAE,CA6C5C;AA8ID,QAAA,MAAM,YAAY,0FAiGjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/composed/activity-feed.js

@@ -1,117 +1,168 @@
 "use client";
-import { jsx as a, jsxs as r } from "react/jsx-runtime";
-import * as g from "react";
-import { cn as t } from "../ui/lib/utils.js";
-import { IconChevronRight as b } from "@tabler/icons-react";
-import { Avatar as k, AvatarImage as y, AvatarFallback as A } from "../ui/avatar.js";
-import { Button as x } from "../ui/button.js";
-import { Skeleton as c } from "../ui/skeleton.js";
-import { getInitials as S } from "./lib/string-utils.js";
-import { formatRelativeTime as C } from "../ui/lib/date-utils.js";
-const j = {
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import * as N from "react";
+import { cn as r } from "../ui/lib/utils.js";
+import { IconChevronRight as S } from "@tabler/icons-react";
+import { Avatar as O, AvatarImage as C, AvatarFallback as F } from "../ui/avatar.js";
+import { Button as D } from "../ui/button.js";
+import { Skeleton as v } from "../ui/skeleton.js";
+import { getInitials as W } from "./lib/string-utils.js";
+import { formatRelativeTime as j } from "../ui/lib/date-utils.js";
+import { tweens as E } from "../ui/lib/motion.js";
+import { m as R } from "../_chunks/framer.js";
+const L = {
   default: "bg-surface-fg-subtle",
   success: "bg-success-9",
   warning: "bg-warning-9",
   error: "bg-error-9",
   info: "bg-info-9"
+}, z = {
+  today: "Today",
+  yesterday: "Yesterday",
+  thisWeek: "This Week",
+  older: "Older"
 };
-function D({ compact: e }) {
-  return /* @__PURE__ */ a("div", { className: t("flex flex-col", e ? "gap-1" : "gap-3"), children: [0, 1, 2].map((s) => /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-03", children: [
-    /* @__PURE__ */ a(c, { className: "h-2 w-2 shrink-0 rounded-ds-full" }),
-    !e && /* @__PURE__ */ a(c, { className: "h-4 w-4 shrink-0 rounded-ds-full" }),
-    /* @__PURE__ */ a(c, { className: t("flex-1", e ? "h-3" : "h-4") }),
-    /* @__PURE__ */ a(c, { className: "h-3 w-12" })
+function B(e, s) {
+  const o = { ...z, ...s }, d = /* @__PURE__ */ new Date(), c = new Date(d.getFullYear(), d.getMonth(), d.getDate()), n = new Date(c.getTime() - 24 * 60 * 60 * 1e3), l = d.getDay(), b = l === 0 ? 6 : l - 1, y = new Date(
+    c.getTime() - b * 24 * 60 * 60 * 1e3
+  ), f = [], m = [], u = [], p = [];
+  for (const i of e) {
+    const x = (typeof i.timestamp == "string" ? new Date(i.timestamp) : i.timestamp).getTime();
+    x >= c.getTime() ? f.push(i) : x >= n.getTime() ? m.push(i) : x >= y.getTime() ? u.push(i) : p.push(i);
+  }
+  const h = [];
+  return f.length > 0 && h.push({ label: o.today, items: f }), m.length > 0 && h.push({ label: o.yesterday, items: m }), u.length > 0 && h.push({ label: o.thisWeek, items: u }), p.length > 0 && h.push({ label: o.older, items: p }), h;
+}
+function G({ compact: e }) {
+  return /* @__PURE__ */ t("div", { className: r("flex flex-col", e ? "gap-1" : "gap-3"), children: [0, 1, 2].map((s) => /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
+    /* @__PURE__ */ t(v, { className: "h-2 w-2 shrink-0 rounded-ds-full" }),
+    !e && /* @__PURE__ */ t(v, { className: "h-4 w-4 shrink-0 rounded-ds-full" }),
+    /* @__PURE__ */ t(v, { className: r("flex-1", e ? "h-3" : "h-4") }),
+    /* @__PURE__ */ t(v, { className: "h-3 w-12" })
   ] }, s)) });
 }
-function R({
+function T({
   item: e,
   compact: s
 }) {
-  const [n, o] = g.useState(!1), d = e.color ?? "default", i = () => {
-    e.detail && o((l) => !l);
+  const [o, d] = N.useState(!1), c = e.color ?? "default", n = () => {
+    e.detail && d((l) => !l);
   };
-  return /* @__PURE__ */ r("div", { className: t("relative flex items-start", s ? "gap-ds-02" : "gap-ds-03"), children: [
-    /* @__PURE__ */ a(
+  return /* @__PURE__ */ a("div", { className: r("relative flex items-start", s ? "gap-ds-02" : "gap-ds-03"), children: [
+    /* @__PURE__ */ t(
       "div",
       {
-        className: t(
+        className: r(
           "relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-1",
-          j[d]
+          L[c]
         )
       }
     ),
-    !s && e.actor && /* @__PURE__ */ r(k, { className: "h-5 w-5 shrink-0 text-[9px]", children: [
-      e.actor.image && /* @__PURE__ */ a(y, { src: e.actor.image, alt: e.actor.name }),
-      /* @__PURE__ */ a(A, { className: "text-[9px]", children: S(e.actor.name) })
+    !s && e.actor && /* @__PURE__ */ a(O, { className: "h-5 w-5 shrink-0 text-[9px]", children: [
+      e.actor.image && /* @__PURE__ */ t(C, { src: e.actor.image, alt: e.actor.name }),
+      /* @__PURE__ */ t(F, { className: "text-[9px]", children: W(e.actor.name) })
     ] }),
-    /* @__PURE__ */ r("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-ds-02", children: [
-        /* @__PURE__ */ r("div", { className: t("min-w-0 flex-1 flex items-center gap-ds-01 flex-wrap", s ? "text-ds-xs" : "text-ds-sm"), children: [
-          e.actor && /* @__PURE__ */ r("span", { className: "font-medium text-surface-fg", children: [
+    /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-ds-02", children: [
+        /* @__PURE__ */ a("div", { className: r("min-w-0 flex-1 flex items-center gap-ds-01 flex-wrap", s ? "text-ds-xs" : "text-ds-sm"), children: [
+          e.actor && /* @__PURE__ */ a("span", { className: "font-medium text-surface-fg", children: [
             e.actor.name,
             " "
           ] }),
-          e.detail && /* @__PURE__ */ a(b, { className: t("h-3 w-3 shrink-0 text-surface-fg-subtle transition-transform", n && "rotate-90") }),
-          /* @__PURE__ */ a(
+          e.detail && /* @__PURE__ */ t(S, { className: r("h-3 w-3 shrink-0 text-surface-fg-subtle transition-transform", o && "rotate-90") }),
+          /* @__PURE__ */ t(
             "span",
             {
-              className: t(
+              className: r(
                 "text-surface-fg-muted",
                 e.detail && "cursor-pointer hover:underline"
               ),
-              onClick: i,
+              onClick: n,
               role: e.detail ? "button" : void 0,
               tabIndex: e.detail ? 0 : void 0,
               onKeyDown: e.detail ? (l) => {
-                (l.key === "Enter" || l.key === " ") && (l.preventDefault(), i());
+                (l.key === "Enter" || l.key === " ") && (l.preventDefault(), n());
               } : void 0,
               children: e.action
             }
           )
         ] }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ t(
           "time",
           {
-            className: t(
+            className: r(
               "shrink-0 whitespace-nowrap text-surface-fg-subtle",
               s ? "text-ds-xs" : "text-ds-sm"
             ),
             dateTime: (typeof e.timestamp == "string" ? new Date(e.timestamp) : e.timestamp).toISOString(),
-            children: C(e.timestamp)
+            children: j(e.timestamp)
           }
         )
       ] }),
-      n && e.detail && /* @__PURE__ */ a("div", { className: "mt-ds-02 animate-in fade-in slide-in-from-top-1 text-ds-sm text-surface-fg-muted", children: e.detail })
+      o && e.detail && /* @__PURE__ */ t("div", { className: "mt-ds-02 animate-in fade-in slide-in-from-top-1 text-ds-sm text-surface-fg-muted", children: e.detail })
     ] })
   ] });
 }
-const z = g.forwardRef(
+function I({
+  label: e,
+  isFirst: s
+}) {
+  return /* @__PURE__ */ a(
+    R.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: E.fade,
+      className: r(
+        "flex items-center gap-ds-03",
+        s ? "" : "mt-ds-06",
+        "mb-ds-03"
+      ),
+      children: [
+        /* @__PURE__ */ t("hr", { className: "flex-1 border-surface-border" }),
+        /* @__PURE__ */ t("span", { className: "bg-surface-1 px-ds-03 text-ds-xs font-medium uppercase tracking-wider text-surface-fg-subtle", children: e }),
+        /* @__PURE__ */ t("hr", { className: "flex-1 border-surface-border" })
+      ]
+    }
+  );
+}
+const Y = N.forwardRef(
   ({
     items: e,
     onLoadMore: s,
-    loading: n = !1,
-    hasMore: o = !1,
-    emptyState: d,
-    compact: i = !1,
+    loading: o = !1,
+    hasMore: d = !1,
+    emptyState: c,
+    compact: n = !1,
     maxInitialItems: l,
+    groupBy: b = "none",
+    groupLabels: y,
     className: f,
     ...m
-  }, h) => {
-    const [p, N] = g.useState(!1);
-    if (n)
-      return /* @__PURE__ */ a("div", { ref: h, className: t("relative", f), ...m, children: /* @__PURE__ */ a(D, { compact: i }) });
+  }, u) => {
+    const [p, h] = N.useState(!1);
+    if (o)
+      return /* @__PURE__ */ t("div", { ref: u, className: r("relative", f), ...m, children: /* @__PURE__ */ t(G, { compact: n }) });
     if (e.length === 0)
-      return d ? /* @__PURE__ */ a("div", { ref: h, className: f, ...m, children: d }) : null;
-    const u = l != null && !p && e.length > l, w = u ? e.slice(0, l) : e;
-    return /* @__PURE__ */ r("div", { ref: h, className: t("relative", f), ...m, children: [
-      /* @__PURE__ */ a("div", { className: "absolute bottom-0 left-[3px] top-0 w-px bg-surface-border" }),
-      /* @__PURE__ */ a("div", { className: t("relative flex flex-col", i ? "gap-1" : "gap-3"), children: w.map((v) => /* @__PURE__ */ a(R, { item: v, compact: i }, v.id)) }),
-      u && /* @__PURE__ */ a("div", { className: "relative mt-ds-03 flex justify-center", children: /* @__PURE__ */ r(
-        x,
+      return c ? /* @__PURE__ */ t("div", { ref: u, className: f, ...m, children: c }) : null;
+    const i = l != null && !p && e.length > l, w = i ? e.slice(0, l) : e, x = b === "time";
+    return /* @__PURE__ */ a("div", { ref: u, className: r("relative", f), ...m, children: [
+      x ? /* @__PURE__ */ t("div", { children: B(w, y).map((g, A) => /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ t(I, { label: g.label, isFirst: A === 0 }),
+        /* @__PURE__ */ a("div", { className: r("relative flex flex-col", n ? "gap-1" : "gap-3"), children: [
+          /* @__PURE__ */ t("div", { className: "absolute bottom-0 left-[3px] top-0 w-px bg-surface-border" }),
+          g.items.map((k) => /* @__PURE__ */ t(T, { item: k, compact: n }, k.id))
+        ] })
+      ] }, g.label)) }) : /* @__PURE__ */ a("div", { className: r("relative flex flex-col", n ? "gap-1" : "gap-3"), children: [
+        /* @__PURE__ */ t("div", { className: "absolute bottom-0 left-[3px] top-0 w-px bg-surface-border" }),
+        w.map((g) => /* @__PURE__ */ t(T, { item: g, compact: n }, g.id))
+      ] }),
+      i && /* @__PURE__ */ t("div", { className: "relative mt-ds-03 flex justify-center", children: /* @__PURE__ */ a(
+        D,
         {
           variant: "ghost",
           size: "sm",
-          onClick: () => N(!0),
+          onClick: () => h(!0),
           children: [
             "Show all (",
             e.length,
@@ -119,11 +170,12 @@ const z = g.forwardRef(
           ]
         }
       ) }),
-      o && s && !u && /* @__PURE__ */ a("div", { className: "relative mt-ds-03 flex justify-center", children: /* @__PURE__ */ a(x, { variant: "ghost", size: "sm", onClick: s, children: "Load more" }) })
+      d && s && !i && /* @__PURE__ */ t("div", { className: "relative mt-ds-03 flex justify-center", children: /* @__PURE__ */ t(D, { variant: "ghost", size: "sm", onClick: s, children: "Load more" }) })
     ] });
   }
 );
-z.displayName = "ActivityFeed";
+Y.displayName = "ActivityFeed";
 export {
-  z as ActivityFeed
+  Y as ActivityFeed,
+  B as groupItemsByTime
 };

package/dist/composed/content-card.js

@@ -7,7 +7,7 @@ const h = v(
   {
     variants: {
       variant: {
-        default: "border border-surface-border-strong bg-surface-1 shadow-01 hover:shadow-02",
+        default: "border border-surface-border-strong bg-surface-2 shadow-01 hover:shadow-02",
         outline: "border border-surface-border bg-transparent hover:border-surface-border-strong",
         ghost: "border border-transparent bg-transparent hover:bg-surface-2"
       },

package/dist/composed/error-boundary.js

@@ -66,7 +66,7 @@ const k = p.forwardRef(
     return /* @__PURE__ */ t("div", { ref: f, ...d, className: o("flex min-h-[60vh] items-center justify-center p-ds-05", l), children: /* @__PURE__ */ r(
       "div",
       {
-        className: "flex w-full max-w-lg flex-col items-center gap-ds-06 rounded-ds-xl border border-surface-border-strong bg-surface-1 p-ds-07 text-center shadow-01",
+        className: "flex w-full max-w-lg flex-col items-center gap-ds-06 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-07 text-center shadow-01",
         children: [
           /* @__PURE__ */ t(
             "div",

package/dist/composed/index.d.ts

@@ -46,7 +46,7 @@ export { ScheduleView } from './schedule-view';
 export type { ScheduleViewProps, ScheduleEvent } from './schedule-view';
 export { ConfirmDialog } from './confirm-dialog';
 export type { ConfirmDialogProps } from './confirm-dialog';
-export { ActivityFeed } from './activity-feed';
-export type { ActivityItem, ActivityFeedProps } from './activity-feed';
+export { ActivityFeed, groupItemsByTime } from './activity-feed';
+export type { ActivityItem, ActivityFeedProps, GroupLabels } from './activity-feed';
 export { getInitials } from './lib/string-utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/composed/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composed/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAEhE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACjE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACjE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAElE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,YAAY,EAAE,sBAAsB,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAE5E,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnE,YAAY,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAE/F,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AACpJ,YAAY,EAAE,eAAe,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,aAAa,EAAE,eAAe,EAAE,mBAAmB,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAE9M,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAC7F,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAA;AAEtH,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,kBAAkB,CAAA;AAEzB,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,YAAY,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAE1D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,YAAY,EAAE,mBAAmB,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEvF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAE5E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEvE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AAE1D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC9C,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAEtE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composed/index.ts"],"names":[],"mappings":"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"}

package/dist/composed/index.js

@@ -6,9 +6,9 @@ import { EmptyState as x } from "./empty-state.js";
 import { AvatarGroup as l } from "./avatar-group.js";
 import { PriorityIndicator as k } from "./priority-indicator.js";
 import { RichTextEditor as P, RichTextViewer as S } from "./rich-text-editor.js";
-import { C as D, D as T, a as g, b as u, M as b, P as h, T as y, Y as V, u as B } from "../_chunks/use-calendar.js";
-import { BoardSkeleton as G, CardSkeleton as L, ListSkeleton as M, TableSkeleton as R } from "./loading-skeleton.js";
-import { DashboardSkeleton as w, ProjectListSkeleton as A, TaskDetailSkeleton as I } from "./page-skeletons.js";
+import { C as T, D as g, a as D, b as u, M as b, P as h, T as y, Y as B, u as V } from "../_chunks/use-calendar.js";
+import { BoardSkeleton as G, CardSkeleton as I, ListSkeleton as L, TableSkeleton as M } from "./loading-skeleton.js";
+import { DashboardSkeleton as v, ProjectListSkeleton as w, TaskDetailSkeleton as A } from "./page-skeletons.js";
 import { ErrorDisplay as j } from "./error-boundary.js";
 import { GlobalLoading as H } from "./global-loading.js";
 import { CommandPalette as z } from "./command-palette.js";
@@ -16,42 +16,43 @@ import { MemberPicker as K } from "./member-picker.js";
 import { SimpleTooltip as O } from "./simple-tooltip.js";
 import { ScheduleView as U } from "./schedule-view.js";
 import { ConfirmDialog as X } from "./confirm-dialog.js";
-import { ActivityFeed as _ } from "./activity-feed.js";
-import { getInitials as ee } from "./lib/string-utils.js";
+import { ActivityFeed as _, groupItemsByTime as $ } from "./activity-feed.js";
+import { getInitials as re } from "./lib/string-utils.js";
 export {
   _ as ActivityFeed,
   l as AvatarGroup,
   G as BoardSkeleton,
-  D as CalendarGrid,
-  L as CardSkeleton,
+  T as CalendarGrid,
+  I as CardSkeleton,
   z as CommandPalette,
   X as ConfirmDialog,
   a as ContentCard,
-  w as DashboardSkeleton,
-  T as DatePicker,
-  g as DateRangePicker,
+  v as DashboardSkeleton,
+  g as DatePicker,
+  D as DateRangePicker,
   u as DateTimePicker,
   x as EmptyState,
   j as ErrorDisplay,
   H as GlobalLoading,
-  M as ListSkeleton,
+  L as ListSkeleton,
   K as MemberPicker,
   b as MonthPicker,
   o as PageHeader,
   h as Presets,
   k as PriorityIndicator,
-  A as ProjectListSkeleton,
+  w as ProjectListSkeleton,
   P as RichTextEditor,
   S as RichTextViewer,
   U as ScheduleView,
   O as SimpleTooltip,
   p as StatusBadge,
-  R as TableSkeleton,
-  I as TaskDetailSkeleton,
+  M as TableSkeleton,
+  A as TaskDetailSkeleton,
   y as TimePicker,
-  V as YearPicker,
+  B as YearPicker,
   i as contentCardVariants,
-  ee as getInitials,
+  re as getInitials,
+  $ as groupItemsByTime,
   s as statusBadgeVariants,
-  B as useCalendar
+  V as useCalendar
 };

package/dist/composed/loading-skeleton.js

@@ -10,7 +10,7 @@ const b = t.forwardRef(
         ref: o,
         ...l,
         className: c(
-          "rounded-ds-lg border border-surface-border-strong bg-surface-1 p-ds-05b",
+          "rounded-ds-lg border border-surface-border-strong bg-surface-2 p-ds-05b",
           d
         ),
         children: [
@@ -109,7 +109,7 @@ const h = t.forwardRef(
           Array.from({ length: l }).map((u, m) => /* @__PURE__ */ r(
             "div",
             {
-              className: "rounded-ds-lg border border-surface-border-strong bg-surface-1 p-ds-04",
+              className: "rounded-ds-lg border border-surface-border-strong bg-surface-2 p-ds-04",
               children: [
                 /* @__PURE__ */ r("div", { className: "space-y-ds-03", children: [
                   /* @__PURE__ */ e(s, { className: "h-[12px] w-4/5 bg-surface-3" }),

package/dist/composed/page-skeletons.js

@@ -8,7 +8,7 @@ const l = "bg-surface-3", t = n.forwardRef(
       /* @__PURE__ */ s("div", { className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4", children: Array.from({ length: 4 }).map((c, r) => /* @__PURE__ */ a(
         "div",
         {
-          className: "flex flex-col gap-ds-04 rounded-ds-xl border border-surface-border-strong bg-surface-1 p-ds-05b",
+          className: "flex flex-col gap-ds-04 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-05b",
           children: [
             /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ s(d, { className: e("h-[12px] w-[80px]", l) }),
@@ -20,7 +20,7 @@ const l = "bg-surface-3", t = n.forwardRef(
         },
         `stat-${r}`
       )) }),
-      /* @__PURE__ */ a("div", { className: "rounded-ds-xl border border-surface-border-strong bg-surface-1 p-ds-06", children: [
+      /* @__PURE__ */ a("div", { className: "rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-06", children: [
         /* @__PURE__ */ a("div", { className: "mb-ds-06 flex items-center justify-between", children: [
           /* @__PURE__ */ s(d, { className: e("h-[20px] w-[128px]", l) }),
           /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
@@ -59,7 +59,7 @@ const f = n.forwardRef(
       /* @__PURE__ */ s("div", { className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((c, r) => /* @__PURE__ */ a(
         "div",
         {
-          className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-1 p-ds-05b",
+          className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-05b",
           children: [
             /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ s(d, { className: e("h-[20px] w-[64px] rounded-ds-full", l) }),
@@ -90,7 +90,7 @@ const f = n.forwardRef(
 f.displayName = "ProjectListSkeleton";
 const h = n.forwardRef(
   function({ className: m, ...o }, i) {
-    return /* @__PURE__ */ a("div", { ref: i, ...o, className: e("flex h-full flex-col gap-0 rounded-ds-xl border border-surface-border-strong bg-surface-1", m), children: [
+    return /* @__PURE__ */ a("div", { ref: i, ...o, className: e("flex h-full flex-col gap-0 rounded-ds-xl border border-surface-border-strong bg-surface-2", m), children: [
       /* @__PURE__ */ a("div", { className: "flex items-center justify-between border-b border-surface-border-strong px-ds-05b py-ds-05", children: [
         /* @__PURE__ */ s(d, { className: e("h-[20px] w-[192px]", l) }),
         /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [

package/dist/composed/rich-text-editor.js

@@ -510,7 +510,7 @@ const Ke = o.forwardRef(
         "div",
         {
           className: p(
-            "overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-1",
+            "overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-2",
             "transition-colors focus-within:border-surface-border-strong"
           ),
           children: [

package/dist/composed/schedule-view.js

@@ -83,7 +83,7 @@ function j({
         {
           type: "button",
           className: x(
-            "block w-full border-b border-surface-border hover:bg-surface-2 transition-colors",
+            "block w-full border-b border-surface-border hover:bg-surface-3 transition-colors",
             n % 2 === 0 ? "border-surface-border-strong" : "border-surface-3"
           ),
           style: { height: `${100 / g}%` },
@@ -151,7 +151,7 @@ const R = $.forwardRef(
         role: "region",
         "aria-label": r === "day" ? `Schedule for ${u(s, "EEEE, MMMM d, yyyy")}` : `Week schedule starting ${u(b[0], "MMMM d, yyyy")}`,
         className: x(
-          "flex rounded-ds-md border border-surface-border-strong bg-surface-1 overflow-hidden",
+          "flex rounded-ds-md border border-surface-border-strong bg-surface-2 overflow-hidden",
           "h-[480px]",
           y
         ),

package/dist/ui/banner.d.ts

@@ -13,7 +13,8 @@ declare const bannerVariants: (props?: ({
  * **Banner vs Alert:** Banner spans the full width of its container (e.g., top of a page or section).
  * Alert is an inline block inside page content. Use Banner for system-level announcements.
  *
- * **`action` slot:** Accepts any React node — typically a `<Button variant="ghost" size="sm">` or a link.
+ * **`actions` slot:** Accepts any React node(s) — typically one or more `<Button variant="ghost" size="sm">`.
+ * Multiple actions wrap gracefully on narrow viewports. The singular `action` prop is deprecated.
  * **Dismissible:** Provide `onDismiss` to show an × button.
  *
  * @example
@@ -36,7 +37,10 @@ declare const bannerVariants: (props?: ({
  * // These are just a few ways — feel free to combine props creatively!
  */
 export interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>, VariantProps<typeof bannerVariants> {
+    /** @deprecated Use `actions` instead */
     action?: React.ReactNode;
+    /** Action slot — accepts any React node(s), typically ghost Buttons. Preferred over `action`. */
+    actions?: React.ReactNode;
     onDismiss?: () => void;
 }
 declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;8EAmBnB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFAuCX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,cAAc;;8EAmBnB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,wCAAwC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,iGAAiG;IACjG,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFA0CX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/ui/banner.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import { IconInfoCircle as o, IconAlertCircle as g, IconAlertTriangle as p, IconCircleCheck as h, IconX as x } from "@tabler/icons-react";
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { IconInfoCircle as n, IconAlertCircle as p, IconAlertTriangle as x, IconCircleCheck as v, IconX as w } from "@tabler/icons-react";
 import * as r from "react";
-import { ag as v } from "../_chunks/vendor-utils.js";
-import { cn as w } from "./lib/utils.js";
-import { springs as N, motionProps as I } from "./lib/motion.js";
-import { A as C, m as y } from "../_chunks/framer.js";
-const k = v(
-  "flex items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md font-medium border-b",
+import { ag as k } from "../_chunks/vendor-utils.js";
+import { cn as N } from "./lib/utils.js";
+import { springs as I, motionProps as C } from "./lib/motion.js";
+import { A as y, m as A } from "../_chunks/framer.js";
+const _ = k(
+  "flex flex-wrap items-center gap-ds-04 px-ds-06 py-ds-04 text-ds-md font-medium border-b",
   {
     variants: {
       color: {
@@ -20,39 +20,39 @@ const k = v(
     },
     defaultVariants: { color: "info" }
   }
-), A = {
-  info: o,
-  success: h,
-  warning: p,
-  error: g,
-  neutral: o
-}, V = r.forwardRef(
-  ({ className: t, color: s = "info", action: n, onDismiss: i, children: a, ...c }, l) => {
-    const m = A[s ?? "info"], [f, d] = r.useState(!0), u = r.useCallback(() => {
-      d(!1);
+), V = {
+  info: n,
+  success: v,
+  warning: x,
+  error: p,
+  neutral: n
+}, j = r.forwardRef(
+  ({ className: t, color: s = "info", action: a, actions: c, onDismiss: o, children: l, ...d }, m) => {
+    const i = c ?? a, f = V[s ?? "info"], [u, b] = r.useState(!0), g = r.useCallback(() => {
+      b(!1);
     }, []);
-    return /* @__PURE__ */ e(C, { onExitComplete: i, children: f && /* @__PURE__ */ b(
-      y.div,
+    return /* @__PURE__ */ e(y, { onExitComplete: o, children: u && /* @__PURE__ */ h(
+      A.div,
       {
-        ref: l,
+        ref: m,
         initial: { height: "auto", opacity: 1 },
         exit: { height: 0, opacity: 0 },
-        transition: N.snappy,
-        className: w(k({ color: s }), "overflow-hidden", t),
+        transition: I.snappy,
+        className: N(_({ color: s }), "overflow-hidden", t),
         role: "alert",
-        ...I(c),
+        ...C(d),
         children: [
-          /* @__PURE__ */ e(m, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ e("span", { className: "flex-1", children: a }),
-          n && /* @__PURE__ */ e("span", { className: "shrink-0", children: n }),
-          i && /* @__PURE__ */ e(
+          /* @__PURE__ */ e(f, { className: "h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: l }),
+          i && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-ds-02 [&_button]:transition-colors [&_button]:duration-150 [&_button:hover]:bg-black/10 [&_button:hover]:dark:bg-white/10", children: i }),
+          o && /* @__PURE__ */ e(
             "button",
             {
               type: "button",
-              onClick: u,
-              className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted hover:bg-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
+              onClick: g,
+              className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm transition-colors duration-150 hover:bg-black/10 dark:hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
               "aria-label": "Dismiss",
-              children: /* @__PURE__ */ e(x, { className: "h-ico-sm w-ico-sm" })
+              children: /* @__PURE__ */ e(w, { className: "h-ico-sm w-ico-sm" })
             }
           )
         ]
@@ -60,8 +60,8 @@ const k = v(
     ) });
   }
 );
-V.displayName = "Banner";
+j.displayName = "Banner";
 export {
-  V as Banner,
-  k as bannerVariants
+  j as Banner,
+  _ as bannerVariants
 };

package/dist/ui/card.js

@@ -10,8 +10,8 @@ const p = f(
   {
     variants: {
       variant: {
-        default: "bg-surface-1 border border-surface-border shadow-01",
-        elevated: "bg-surface-1 border border-surface-border shadow-02",
+        default: "bg-surface-2 border border-surface-border shadow-01",
+        elevated: "bg-surface-2 border border-surface-border shadow-02",
         outline: "bg-transparent border-2 border-surface-border-strong shadow-none",
         flat: "bg-surface-2 border-none shadow-none"
       }