@devalok/shilp-sutra 0.48.0 → 0.49.0

package/dist/composed/page-header.js

@@ -1,54 +1,41 @@
 import { cn as e } from "../ui/lib/utils.js";
-import * as t from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Breadcrumb as t, BreadcrumbItem as n, BreadcrumbLink as r, BreadcrumbList as i, BreadcrumbPage as a, BreadcrumbSeparator as o } from "../ui/breadcrumb.js";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/composed/page-header.tsx
-var i = t.forwardRef(({ title: i, subtitle: a, actions: o, breadcrumbs: s, titleClassName: c, className: l, ...u }, d) => {
-	let f = i ?? s?.[s.length - 1]?.label ?? "";
-	return /* @__PURE__ */ r("div", {
-		ref: d,
-		className: e("flex flex-col gap-ds-05 border-b border-surface-border-strong pb-ds-06", l),
-		...u,
-		children: [s && s.length > 0 && /* @__PURE__ */ n("nav", {
-			"aria-label": "Breadcrumb",
-			className: "flex items-center gap-ds-02b",
-			children: s.map((i, a) => /* @__PURE__ */ r(t.Fragment, { children: [a > 0 && /* @__PURE__ */ n("svg", {
-				width: 16,
-				height: 16,
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: 1.5,
-				strokeLinecap: "round",
-				strokeLinejoin: "round",
-				"aria-hidden": "true",
-				className: "text-surface-fg-subtle",
-				children: /* @__PURE__ */ n("path", { d: "M9 6l6 6l-6 6" })
-			}), i.href ? /* @__PURE__ */ n("a", {
-				href: i.href,
-				className: "text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-control-inner",
-				children: i.label
-			}) : /* @__PURE__ */ n("span", {
-				className: e("text-ds-sm", a === s.length - 1 ? "text-surface-fg" : "text-surface-fg-subtle"),
-				children: i.label
-			})] }, a))
-		}), (f || a || o) && /* @__PURE__ */ r("div", {
-			className: "flex items-start justify-between gap-ds-05",
-			children: [/* @__PURE__ */ r("div", {
-				className: "flex flex-col gap-ds-02b",
-				children: [f && /* @__PURE__ */ n("h1", {
-					className: e("text-ds-2xl font-semibold text-surface-fg", c),
-					children: f
-				}), a && /* @__PURE__ */ n("p", {
+var u = s.forwardRef(({ title: u, subtitle: d, actions: f, breadcrumbs: p, titleClassName: m, className: h, ...g }, _) => {
+	let v = u ?? p?.[p.length - 1]?.label ?? "";
+	return /* @__PURE__ */ l("div", {
+		ref: _,
+		className: e("flex flex-col gap-ds-05 border-b border-surface-border-strong pb-ds-06", h),
+		...g,
+		children: [p && p.length > 0 && /* @__PURE__ */ c(t, {
+			className: "text-ds-sm",
+			children: /* @__PURE__ */ c(i, { children: p.map((e, t) => {
+				let i = t === p.length - 1;
+				return /* @__PURE__ */ l(s.Fragment, { children: [t > 0 && /* @__PURE__ */ c(o, {}), /* @__PURE__ */ c(n, { children: e.href && !i ? /* @__PURE__ */ c(r, {
+					href: e.href,
+					children: e.label
+				}) : /* @__PURE__ */ c(a, { children: e.label }) })] }, t);
+			}) })
+		}), (v || d || f) && /* @__PURE__ */ l("div", {
+			className: "flex flex-wrap items-start justify-between gap-ds-05",
+			children: [/* @__PURE__ */ l("div", {
+				className: "flex min-w-0 flex-col gap-ds-02b",
+				children: [v && /* @__PURE__ */ c("h1", {
+					className: e("text-ds-2xl font-semibold text-surface-fg", m),
+					children: v
+				}), d && /* @__PURE__ */ c("p", {
 					className: "text-ds-md text-surface-fg-subtle line-clamp-2",
-					children: a
+					children: d
 				})]
-			}), o && /* @__PURE__ */ n("div", {
-				className: "flex shrink-0 items-center gap-ds-03",
-				children: o
+			}), f && /* @__PURE__ */ c("div", {
+				className: "flex flex-wrap items-center gap-ds-03",
+				children: f
 			})]
 		})]
 	});
 });
-i.displayName = "PageHeader";
+u.displayName = "PageHeader";
 //#endregion
-export { i as PageHeader };
+export { u as PageHeader };

package/dist/composed/page-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.js","names":[],"sources":["../../src/composed/page-header.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\n\nexport interface Breadcrumb {\n  label: string\n  href?: string\n}\n\nexport interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string\n  subtitle?: string\n  actions?: React.ReactNode\n  breadcrumbs?: Breadcrumb[]\n  titleClassName?: string\n}\n\nconst PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    { title, subtitle, actions, breadcrumbs, titleClassName, className, ...props },\n    ref,\n  ) => {\n    const resolvedTitle =\n      title ?? breadcrumbs?.[breadcrumbs.length - 1]?.label ?? ''\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-col gap-ds-05 border-b border-surface-border-strong pb-ds-06',\n          className,\n        )}\n        {...props}\n      >\n        {breadcrumbs && breadcrumbs.length > 0 && (\n          <nav aria-label=\"Breadcrumb\" className=\"flex items-center gap-ds-02b\">\n            {breadcrumbs.map((crumb, index) => (\n              <React.Fragment key={index}>\n                {index > 0 && (\n                  <svg\n                    width={16}\n                    height={16}\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={1.5}\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    aria-hidden=\"true\"\n                    className=\"text-surface-fg-subtle\"\n                  >\n                    <path d=\"M9 6l6 6l-6 6\" />\n                  </svg>\n                )}\n                {crumb.href ? (\n                  <a\n                    href={crumb.href}\n                    className=\"text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 rounded-control-inner\"\n                  >\n                    {crumb.label}\n                  </a>\n                ) : (\n                  <span\n                    className={cn(\n                      'text-ds-sm',\n                      index === breadcrumbs.length - 1\n                        ? 'text-surface-fg'\n                        : 'text-surface-fg-subtle',\n                    )}\n                  >\n                    {crumb.label}\n                  </span>\n                )}\n              </React.Fragment>\n            ))}\n          </nav>\n        )}\n\n        {(resolvedTitle || subtitle || actions) && (\n          <div className=\"flex items-start justify-between gap-ds-05\">\n            <div className=\"flex flex-col gap-ds-02b\">\n              {resolvedTitle && (\n                <h1\n                  className={cn(\n                    'text-ds-2xl font-semibold text-surface-fg',\n                    titleClassName,\n                  )}\n                >\n                  {resolvedTitle}\n                </h1>\n              )}\n              {subtitle && (\n                <p className=\"text-ds-md text-surface-fg-subtle line-clamp-2\">\n                  {subtitle}\n                </p>\n              )}\n            </div>\n\n            {actions && (\n              <div className=\"flex shrink-0 items-center gap-ds-03\">{actions}</div>\n            )}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nPageHeader.displayName = 'PageHeader'\n\nexport { PageHeader }\n"],"mappings":";;;;AAkBA,IAAM,IAAa,EAAM,YAErB,EAAE,UAAO,aAAU,YAAS,gBAAa,mBAAgB,cAAW,GAAG,KACvE,MACG;CACH,IAAM,IACJ,KAAS,IAAc,EAAY,SAAS,IAAI,SAAS;AAE3D,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,0EACA,EACD;EACD,GAAI;YANN,CAQG,KAAe,EAAY,SAAS,KACnC,kBAAC,OAAD;GAAK,cAAW;GAAa,WAAU;aACpC,EAAY,KAAK,GAAO,MACvB,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,IAAQ,KACP,kBAAC,OAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,gBAAe;IACf,eAAY;IACZ,WAAU;cAEV,kBAAC,QAAD,EAAM,GAAE,iBAAkB,CAAA;IACtB,CAAA,EAEP,EAAM,OACL,kBAAC,KAAD;IACE,MAAM,EAAM;IACZ,WAAU;cAET,EAAM;IACL,CAAA,GAEJ,kBAAC,QAAD;IACE,WAAW,EACT,cACA,MAAU,EAAY,SAAS,IAC3B,oBACA,yBACL;cAEA,EAAM;IACF,CAAA,CAEM,EAAA,EApCI,EAoCJ,CACjB;GACE,CAAA,GAGN,KAAiB,KAAY,MAC7B,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KACC,kBAAC,MAAD;KACE,WAAW,EACT,6CACA,EACD;eAEA;KACE,CAAA,EAEN,KACC,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA,CAEF;OAEL,KACC,kBAAC,OAAD;IAAK,WAAU;cAAwC;IAAc,CAAA,CAEnE;KAEJ;;EAGX;AACD,EAAW,cAAc"}
+{"version":3,"file":"page-header.js","names":[],"sources":["../../src/composed/page-header.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport {\n  Breadcrumb as BreadcrumbNav,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '../ui/breadcrumb'\nimport { cn } from '../ui/lib/utils'\n\nexport interface Breadcrumb {\n  label: string\n  href?: string\n}\n\nexport interface PageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string\n  subtitle?: string\n  actions?: React.ReactNode\n  breadcrumbs?: Breadcrumb[]\n  titleClassName?: string\n}\n\nconst PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(\n  (\n    { title, subtitle, actions, breadcrumbs, titleClassName, className, ...props },\n    ref,\n  ) => {\n    const resolvedTitle =\n      title ?? breadcrumbs?.[breadcrumbs.length - 1]?.label ?? ''\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex flex-col gap-ds-05 border-b border-surface-border-strong pb-ds-06',\n          className,\n        )}\n        {...props}\n      >\n        {breadcrumbs && breadcrumbs.length > 0 && (\n          <BreadcrumbNav className=\"text-ds-sm\">\n            <BreadcrumbList>\n              {breadcrumbs.map((crumb, index) => {\n                const isLast = index === breadcrumbs.length - 1\n                return (\n                  <React.Fragment key={index}>\n                    {index > 0 && <BreadcrumbSeparator />}\n                    <BreadcrumbItem>\n                      {crumb.href && !isLast ? (\n                        <BreadcrumbLink href={crumb.href}>{crumb.label}</BreadcrumbLink>\n                      ) : (\n                        <BreadcrumbPage>{crumb.label}</BreadcrumbPage>\n                      )}\n                    </BreadcrumbItem>\n                  </React.Fragment>\n                )\n              })}\n            </BreadcrumbList>\n          </BreadcrumbNav>\n        )}\n\n        {(resolvedTitle || subtitle || actions) && (\n          <div className=\"flex flex-wrap items-start justify-between gap-ds-05\">\n            <div className=\"flex min-w-0 flex-col gap-ds-02b\">\n              {resolvedTitle && (\n                <h1\n                  className={cn(\n                    'text-ds-2xl font-semibold text-surface-fg',\n                    titleClassName,\n                  )}\n                >\n                  {resolvedTitle}\n                </h1>\n              )}\n              {subtitle && (\n                <p className=\"text-ds-md text-surface-fg-subtle line-clamp-2\">\n                  {subtitle}\n                </p>\n              )}\n            </div>\n\n            {actions && (\n              <div className=\"flex flex-wrap items-center gap-ds-03\">{actions}</div>\n            )}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nPageHeader.displayName = 'PageHeader'\n\nexport { PageHeader }\n"],"mappings":";;;;;AA0BA,IAAM,IAAa,EAAM,YAErB,EAAE,UAAO,aAAU,YAAS,gBAAa,mBAAgB,cAAW,GAAG,KACvE,MACG;CACH,IAAM,IACJ,KAAS,IAAc,EAAY,SAAS,IAAI,SAAS;AAE3D,QACE,kBAAC,OAAD;EACO;EACL,WAAW,EACT,0EACA,EACD;EACD,GAAI;YANN,CAQG,KAAe,EAAY,SAAS,KACnC,kBAAC,GAAD;GAAe,WAAU;aACvB,kBAAC,GAAD,EAAA,UACG,EAAY,KAAK,GAAO,MAAU;IACjC,IAAM,IAAS,MAAU,EAAY,SAAS;AAC9C,WACE,kBAAC,EAAM,UAAP,EAAA,UAAA,CACG,IAAQ,KAAK,kBAAC,GAAD,EAAuB,CAAA,EACrC,kBAAC,GAAD,EAAA,UACG,EAAM,QAAQ,CAAC,IACd,kBAAC,GAAD;KAAgB,MAAM,EAAM;eAAO,EAAM;KAAuB,CAAA,GAEhE,kBAAC,GAAD,EAAA,UAAiB,EAAM,OAAuB,CAAA,EAEjC,CAAA,CACF,EAAA,EATI,EASJ;KAEnB,EACa,CAAA;GACH,CAAA,GAGhB,KAAiB,KAAY,MAC7B,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,KACC,kBAAC,MAAD;KACE,WAAW,EACT,6CACA,EACD;eAEA;KACE,CAAA,EAEN,KACC,kBAAC,KAAD;KAAG,WAAU;eACV;KACC,CAAA,CAEF;OAEL,KACC,kBAAC,OAAD;IAAK,WAAU;cAAyC;IAAc,CAAA,CAEpE;KAEJ;;EAGX;AACD,EAAW,cAAc"}

package/dist/composed/page-skeletons.js

@@ -15,9 +15,9 @@ var a = "bg-surface-raised-hover", o = n.forwardRef(function({ className: n, ...
 				children: [
 					/* @__PURE__ */ i("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ r(t, { className: e("h-[12px] w-[80px]", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-surface", a) })]
+						children: [/* @__PURE__ */ r(t, { className: e("h-ds-04 w-ds-11", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-surface", a) })]
 					}),
-					/* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-[64px]", a) }),
+					/* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-10", a) }),
 					/* @__PURE__ */ r(t, { className: e("h-ds-03 w-[112px]", a) })
 				]
 			}, `stat-${o}`))
@@ -26,18 +26,18 @@ var a = "bg-surface-raised-hover", o = n.forwardRef(function({ className: n, ...
 			children: [
 				/* @__PURE__ */ i("div", {
 					className: "mb-ds-06 flex items-center justify-between",
-					children: [/* @__PURE__ */ r(t, { className: e("h-[20px] w-[128px]", a) }), /* @__PURE__ */ i("div", {
+					children: [/* @__PURE__ */ r(t, { className: e("h-ds-05b w-[128px]", a) }), /* @__PURE__ */ i("div", {
 						className: "flex items-center gap-ds-03",
 						children: [
 							/* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-surface", a) }),
-							/* @__PURE__ */ r(t, { className: e("h-[16px] w-[112px]", a) }),
+							/* @__PURE__ */ r(t, { className: e("h-ds-05 w-[112px]", a) }),
 							/* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-sm rounded-surface", a) })
 						]
 					})]
 				}),
 				/* @__PURE__ */ r("div", {
 					className: "mb-ds-03 grid grid-cols-7 gap-ds-03",
-					children: Array.from({ length: 7 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("mx-auto h-[12px] w-[32px]", a) }, `wh-${i}`))
+					children: Array.from({ length: 7 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("mx-auto h-ds-04 w-ds-07", a) }, `wh-${i}`))
 				}),
 				/* @__PURE__ */ r("div", {
 					className: "grid grid-cols-7 gap-ds-03",
@@ -58,14 +58,14 @@ var s = n.forwardRef(function({ className: n, ...o }, s) {
 				className: "flex flex-col gap-ds-05 sm:flex-row sm:items-center sm:justify-between",
 				children: [/* @__PURE__ */ i("div", {
 					className: "flex flex-col gap-ds-03",
-					children: [/* @__PURE__ */ r(t, { className: e("h-[24px] w-[112px]", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-04 w-[160px]", a) })]
+					children: [/* @__PURE__ */ r(t, { className: e("h-ds-06 w-[112px]", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-04 w-ds-13", a) })]
 				}), /* @__PURE__ */ r(t, { className: e("h-ds-sm-plus w-[128px] rounded-surface", a) })]
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "flex flex-col gap-ds-04 sm:flex-row sm:items-center",
 				children: [/* @__PURE__ */ r(t, { className: e("h-ds-sm-plus flex-1 rounded-surface", a) }), /* @__PURE__ */ r("div", {
 					className: "flex gap-ds-02b",
-					children: Array.from({ length: 4 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-sm w-[64px] rounded-surface", a) }, `f-${i}`))
+					children: Array.from({ length: 4 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-sm w-ds-10 rounded-surface", a) }, `f-${i}`))
 				})]
 			}),
 			/* @__PURE__ */ r("div", {
@@ -75,14 +75,14 @@ var s = n.forwardRef(function({ className: n, ...o }, s) {
 					children: [
 						/* @__PURE__ */ i("div", {
 							className: "flex items-center justify-between",
-							children: [/* @__PURE__ */ r(t, { className: e("h-[20px] w-[64px] rounded-pill", a) }), /* @__PURE__ */ r(t, { className: e("h-[16px] w-[80px] rounded-control", a) })]
+							children: [/* @__PURE__ */ r(t, { className: e("h-ds-05b w-ds-10 rounded-pill", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-05 w-ds-11 rounded-control", a) })]
 						}),
 						/* @__PURE__ */ i("div", {
 							className: "flex flex-col gap-ds-03",
 							children: [
-								/* @__PURE__ */ r(t, { className: e("h-[16px] w-3/4", a) }),
-								/* @__PURE__ */ r(t, { className: e("h-[12px] w-full", a) }),
-								/* @__PURE__ */ r(t, { className: e("h-[12px] w-2/3", a) })
+								/* @__PURE__ */ r(t, { className: e("h-ds-05 w-3/4", a) }),
+								/* @__PURE__ */ r(t, { className: e("h-ds-04 w-full", a) }),
+								/* @__PURE__ */ r(t, { className: e("h-ds-04 w-2/3", a) })
 							]
 						}),
 						/* @__PURE__ */ i("div", {
@@ -107,7 +107,7 @@ var c = n.forwardRef(function({ className: n, ...o }, s) {
 		children: [
 			/* @__PURE__ */ i("div", {
 				className: "flex items-center justify-between border-b border-surface-border-strong px-ds-05b py-ds-05",
-				children: [/* @__PURE__ */ r(t, { className: e("h-[20px] w-[192px]", a) }), /* @__PURE__ */ i("div", {
+				children: [/* @__PURE__ */ r(t, { className: e("h-ds-05b w-[192px]", a) }), /* @__PURE__ */ i("div", {
 					className: "flex items-center gap-ds-03",
 					children: [/* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-surface", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-xs-plus w-ds-xs-plus rounded-surface", a) })]
 				})]
@@ -116,24 +116,24 @@ var c = n.forwardRef(function({ className: n, ...o }, s) {
 				className: "flex flex-col gap-0 border-b border-surface-border-strong px-ds-05b py-ds-05",
 				children: Array.from({ length: 5 }).map((n, o) => /* @__PURE__ */ i("div", {
 					className: "flex items-center gap-ds-05 py-ds-03",
-					children: [/* @__PURE__ */ r(t, { className: e("h-[12px] w-[96px] shrink-0", a) }), /* @__PURE__ */ r(t, { className: e("h-[24px] w-[128px] rounded-control", a) })]
+					children: [/* @__PURE__ */ r(t, { className: e("h-ds-04 w-ds-12 shrink-0", a) }), /* @__PURE__ */ r(t, { className: e("h-ds-06 w-[128px] rounded-control", a) })]
 				}, `prop-${o}`))
 			}),
 			/* @__PURE__ */ r("div", {
 				className: "border-b border-surface-border-strong px-ds-05b",
 				children: /* @__PURE__ */ r("div", {
 					className: "flex gap-ds-05 py-ds-04",
-					children: Array.from({ length: 3 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-[16px] w-[64px]", a) }, `tab-${i}`))
+					children: Array.from({ length: 3 }).map((n, i) => /* @__PURE__ */ r(t, { className: e("h-ds-05 w-ds-10", a) }, `tab-${i}`))
 				})
 			}),
 			/* @__PURE__ */ i("div", {
 				className: "flex flex-1 flex-col gap-ds-04 px-ds-05b py-ds-05",
 				children: [
-					/* @__PURE__ */ r(t, { className: e("h-[12px] w-full", a) }),
-					/* @__PURE__ */ r(t, { className: e("h-[12px] w-4/5", a) }),
-					/* @__PURE__ */ r(t, { className: e("h-[12px] w-3/5", a) }),
-					/* @__PURE__ */ r(t, { className: e("mt-ds-03 h-[12px] w-full", a) }),
-					/* @__PURE__ */ r(t, { className: e("h-[12px] w-2/3", a) })
+					/* @__PURE__ */ r(t, { className: e("h-ds-04 w-full", a) }),
+					/* @__PURE__ */ r(t, { className: e("h-ds-04 w-4/5", a) }),
+					/* @__PURE__ */ r(t, { className: e("h-ds-04 w-3/5", a) }),
+					/* @__PURE__ */ r(t, { className: e("mt-ds-03 h-ds-04 w-full", a) }),
+					/* @__PURE__ */ r(t, { className: e("h-ds-04 w-2/3", a) })
 				]
 			})
 		]

package/dist/composed/page-skeletons.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-skeletons.js","names":[],"sources":["../../src/composed/page-skeletons.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\nconst shimmer = 'bg-surface-raised-hover'\n\n// --- Dashboard Skeleton ---\n\nexport interface DashboardSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst DashboardSkeleton = React.forwardRef<HTMLDivElement, DashboardSkeletonProps>(\n  function DashboardSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex flex-col gap-ds-06\", className)}>\n      {/* Stat cards grid */}\n      <div className=\"grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4\">\n        {Array.from({ length: 4 }).map((_, i) => (\n          <div\n            key={`stat-${i}`}\n            className=\"flex flex-col gap-ds-04 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-05b\"\n          >\n            <div className=\"flex items-center justify-between\">\n              <Skeleton className={cn('h-[12px] w-[80px]', shimmer)} />\n              <Skeleton className={cn('h-ds-sm w-ds-sm rounded-surface', shimmer)} />\n            </div>\n            <Skeleton className={cn('h-ds-xs-plus w-[64px]', shimmer)} />\n            <Skeleton className={cn('h-ds-03 w-[112px]', shimmer)} />\n          </div>\n        ))}\n      </div>\n\n      {/* Attendance calendar placeholder */}\n      <div className=\"rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-06\">\n        <div className=\"mb-ds-06 flex items-center justify-between\">\n          <Skeleton className={cn('h-[20px] w-[128px]', shimmer)} />\n          <div className=\"flex items-center gap-ds-03\">\n            <Skeleton className={cn('h-ds-sm w-ds-sm rounded-surface', shimmer)} />\n            <Skeleton className={cn('h-[16px] w-[112px]', shimmer)} />\n            <Skeleton className={cn('h-ds-sm w-ds-sm rounded-surface', shimmer)} />\n          </div>\n        </div>\n        {/* Weekday headers */}\n        <div className=\"mb-ds-03 grid grid-cols-7 gap-ds-03\">\n          {Array.from({ length: 7 }).map((_, i) => (\n            <Skeleton key={`wh-${i}`} className={cn('mx-auto h-[12px] w-[32px]', shimmer)} />\n          ))}\n        </div>\n        {/* Calendar grid */}\n        <div className=\"grid grid-cols-7 gap-ds-03\">\n          {Array.from({ length: 35 }).map((_, i) => (\n            <Skeleton\n              key={`cal-${i}`}\n              className={cn('mx-auto h-ds-md w-ds-md rounded-pill', shimmer)}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n},\n)\n\nDashboardSkeleton.displayName = 'DashboardSkeleton'\n\n// --- Project List Skeleton ---\n\nexport interface ProjectListSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst ProjectListSkeleton = React.forwardRef<HTMLDivElement, ProjectListSkeletonProps>(\n  function ProjectListSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex flex-col gap-ds-06\", className)}>\n      {/* Header */}\n      <div className=\"flex flex-col gap-ds-05 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"flex flex-col gap-ds-03\">\n          <Skeleton className={cn('h-[24px] w-[112px]', shimmer)} />\n          <Skeleton className={cn('h-ds-04 w-[160px]', shimmer)} />\n        </div>\n        <Skeleton className={cn('h-ds-sm-plus w-[128px] rounded-surface', shimmer)} />\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-col gap-ds-04 sm:flex-row sm:items-center\">\n        <Skeleton className={cn('h-ds-sm-plus flex-1 rounded-surface', shimmer)} />\n        <div className=\"flex gap-ds-02b\">\n          {Array.from({ length: 4 }).map((_, i) => (\n            <Skeleton key={`f-${i}`} className={cn('h-ds-sm w-[64px] rounded-surface', shimmer)} />\n          ))}\n        </div>\n      </div>\n\n      {/* Project cards grid */}\n      <div className=\"grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-3\">\n        {Array.from({ length: 6 }).map((_, i) => (\n          <div\n            key={`proj-${i}`}\n            className=\"flex flex-col gap-ds-05 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-05b\"\n          >\n            {/* Top row: status + org */}\n            <div className=\"flex items-center justify-between\">\n              <Skeleton className={cn('h-[20px] w-[64px] rounded-pill', shimmer)} />\n              <Skeleton className={cn('h-[16px] w-[80px] rounded-control', shimmer)} />\n            </div>\n            {/* Title + description */}\n            <div className=\"flex flex-col gap-ds-03\">\n              <Skeleton className={cn('h-[16px] w-3/4', shimmer)} />\n              <Skeleton className={cn('h-[12px] w-full', shimmer)} />\n              <Skeleton className={cn('h-[12px] w-2/3', shimmer)} />\n            </div>\n            {/* Bottom row: members + count */}\n            <div className=\"flex items-center justify-between pt-ds-02\">\n              <div className=\"flex -space-x-ds-03\">\n                {Array.from({ length: 3 }).map((_, j) => (\n                  <Skeleton\n                    key={`av-${i}-${j}`}\n                    className={cn('h-ds-xs-plus w-ds-xs-plus rounded-pill', shimmer)}\n                  />\n                ))}\n              </div>\n              <Skeleton className={cn('h-ds-04 w-ds-md', shimmer)} />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n},\n)\n\nProjectListSkeleton.displayName = 'ProjectListSkeleton'\n\n// --- Task Detail Skeleton ---\n\nexport interface TaskDetailSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst TaskDetailSkeleton = React.forwardRef<HTMLDivElement, TaskDetailSkeletonProps>(\n  function TaskDetailSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex h-full flex-col gap-0 rounded-overlay-lg border border-surface-border-strong bg-surface-raised\", className)}>\n      {/* Header */}\n      <div className=\"flex items-center justify-between border-b border-surface-border-strong px-ds-05b py-ds-05\">\n        <Skeleton className={cn('h-[20px] w-[192px]', shimmer)} />\n        <div className=\"flex items-center gap-ds-03\">\n          <Skeleton className={cn('h-ds-xs-plus w-ds-xs-plus rounded-surface', shimmer)} />\n          <Skeleton className={cn('h-ds-xs-plus w-ds-xs-plus rounded-surface', shimmer)} />\n        </div>\n      </div>\n\n      {/* Property rows */}\n      <div className=\"flex flex-col gap-0 border-b border-surface-border-strong px-ds-05b py-ds-05\">\n        {Array.from({ length: 5 }).map((_, i) => (\n          <div\n            key={`prop-${i}`}\n            className=\"flex items-center gap-ds-05 py-ds-03\"\n          >\n            <Skeleton className={cn('h-[12px] w-[96px] shrink-0', shimmer)} />\n            <Skeleton className={cn('h-[24px] w-[128px] rounded-control', shimmer)} />\n          </div>\n        ))}\n      </div>\n\n      {/* Tabs */}\n      <div className=\"border-b border-surface-border-strong px-ds-05b\">\n        <div className=\"flex gap-ds-05 py-ds-04\">\n          {Array.from({ length: 3 }).map((_, i) => (\n            <Skeleton key={`tab-${i}`} className={cn('h-[16px] w-[64px]', shimmer)} />\n          ))}\n        </div>\n      </div>\n\n      {/* Tab content */}\n      <div className=\"flex flex-1 flex-col gap-ds-04 px-ds-05b py-ds-05\">\n        <Skeleton className={cn('h-[12px] w-full', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-4/5', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-3/5', shimmer)} />\n        <Skeleton className={cn('mt-ds-03 h-[12px] w-full', shimmer)} />\n        <Skeleton className={cn('h-[12px] w-2/3', shimmer)} />\n      </div>\n    </div>\n  )\n},\n)\n\nTaskDetailSkeleton.displayName = 'TaskDetailSkeleton'\n\nexport {\n  DashboardSkeleton,\n  ProjectListSkeleton,\n  TaskDetailSkeleton,\n}\n"],"mappings":"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"}
+{"version":3,"file":"page-skeletons.js","names":[],"sources":["../../src/composed/page-skeletons.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\n\nconst shimmer = 'bg-surface-raised-hover'\n\n// --- Dashboard Skeleton ---\n\nexport interface DashboardSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst DashboardSkeleton = React.forwardRef<HTMLDivElement, DashboardSkeletonProps>(\n  function DashboardSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex flex-col gap-ds-06\", className)}>\n      {/* Stat cards grid */}\n      <div className=\"grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4\">\n        {Array.from({ length: 4 }).map((_, i) => (\n          <div\n            key={`stat-${i}`}\n            className=\"flex flex-col gap-ds-04 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-05b\"\n          >\n            <div className=\"flex items-center justify-between\">\n              <Skeleton className={cn('h-ds-04 w-ds-11', shimmer)} />\n              <Skeleton className={cn('h-ds-sm w-ds-sm rounded-surface', shimmer)} />\n            </div>\n            <Skeleton className={cn('h-ds-xs-plus w-ds-10', shimmer)} />\n            <Skeleton className={cn('h-ds-03 w-[112px]', shimmer)} />\n          </div>\n        ))}\n      </div>\n\n      {/* Attendance calendar placeholder */}\n      <div className=\"rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-06\">\n        <div className=\"mb-ds-06 flex items-center justify-between\">\n          <Skeleton className={cn('h-ds-05b w-[128px]', shimmer)} />\n          <div className=\"flex items-center gap-ds-03\">\n            <Skeleton className={cn('h-ds-sm w-ds-sm rounded-surface', shimmer)} />\n            <Skeleton className={cn('h-ds-05 w-[112px]', shimmer)} />\n            <Skeleton className={cn('h-ds-sm w-ds-sm rounded-surface', shimmer)} />\n          </div>\n        </div>\n        {/* Weekday headers */}\n        <div className=\"mb-ds-03 grid grid-cols-7 gap-ds-03\">\n          {Array.from({ length: 7 }).map((_, i) => (\n            <Skeleton key={`wh-${i}`} className={cn('mx-auto h-ds-04 w-ds-07', shimmer)} />\n          ))}\n        </div>\n        {/* Calendar grid */}\n        <div className=\"grid grid-cols-7 gap-ds-03\">\n          {Array.from({ length: 35 }).map((_, i) => (\n            <Skeleton\n              key={`cal-${i}`}\n              className={cn('mx-auto h-ds-md w-ds-md rounded-pill', shimmer)}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  )\n},\n)\n\nDashboardSkeleton.displayName = 'DashboardSkeleton'\n\n// --- Project List Skeleton ---\n\nexport interface ProjectListSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst ProjectListSkeleton = React.forwardRef<HTMLDivElement, ProjectListSkeletonProps>(\n  function ProjectListSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex flex-col gap-ds-06\", className)}>\n      {/* Header */}\n      <div className=\"flex flex-col gap-ds-05 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"flex flex-col gap-ds-03\">\n          <Skeleton className={cn('h-ds-06 w-[112px]', shimmer)} />\n          <Skeleton className={cn('h-ds-04 w-ds-13', shimmer)} />\n        </div>\n        <Skeleton className={cn('h-ds-sm-plus w-[128px] rounded-surface', shimmer)} />\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-col gap-ds-04 sm:flex-row sm:items-center\">\n        <Skeleton className={cn('h-ds-sm-plus flex-1 rounded-surface', shimmer)} />\n        <div className=\"flex gap-ds-02b\">\n          {Array.from({ length: 4 }).map((_, i) => (\n            <Skeleton key={`f-${i}`} className={cn('h-ds-sm w-ds-10 rounded-surface', shimmer)} />\n          ))}\n        </div>\n      </div>\n\n      {/* Project cards grid */}\n      <div className=\"grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-3\">\n        {Array.from({ length: 6 }).map((_, i) => (\n          <div\n            key={`proj-${i}`}\n            className=\"flex flex-col gap-ds-05 rounded-overlay-lg border border-surface-border-strong bg-surface-raised p-ds-05b\"\n          >\n            {/* Top row: status + org */}\n            <div className=\"flex items-center justify-between\">\n              <Skeleton className={cn('h-ds-05b w-ds-10 rounded-pill', shimmer)} />\n              <Skeleton className={cn('h-ds-05 w-ds-11 rounded-control', shimmer)} />\n            </div>\n            {/* Title + description */}\n            <div className=\"flex flex-col gap-ds-03\">\n              <Skeleton className={cn('h-ds-05 w-3/4', shimmer)} />\n              <Skeleton className={cn('h-ds-04 w-full', shimmer)} />\n              <Skeleton className={cn('h-ds-04 w-2/3', shimmer)} />\n            </div>\n            {/* Bottom row: members + count */}\n            <div className=\"flex items-center justify-between pt-ds-02\">\n              <div className=\"flex -space-x-ds-03\">\n                {Array.from({ length: 3 }).map((_, j) => (\n                  <Skeleton\n                    key={`av-${i}-${j}`}\n                    className={cn('h-ds-xs-plus w-ds-xs-plus rounded-pill', shimmer)}\n                  />\n                ))}\n              </div>\n              <Skeleton className={cn('h-ds-04 w-ds-md', shimmer)} />\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n},\n)\n\nProjectListSkeleton.displayName = 'ProjectListSkeleton'\n\n// --- Task Detail Skeleton ---\n\nexport interface TaskDetailSkeletonProps extends React.ComponentPropsWithoutRef<'div'> {}\n\nconst TaskDetailSkeleton = React.forwardRef<HTMLDivElement, TaskDetailSkeletonProps>(\n  function TaskDetailSkeleton({ className, ...props }, ref) {\n  return (\n    <div ref={ref} {...props} className={cn(\"flex h-full flex-col gap-0 rounded-overlay-lg border border-surface-border-strong bg-surface-raised\", className)}>\n      {/* Header */}\n      <div className=\"flex items-center justify-between border-b border-surface-border-strong px-ds-05b py-ds-05\">\n        <Skeleton className={cn('h-ds-05b w-[192px]', shimmer)} />\n        <div className=\"flex items-center gap-ds-03\">\n          <Skeleton className={cn('h-ds-xs-plus w-ds-xs-plus rounded-surface', shimmer)} />\n          <Skeleton className={cn('h-ds-xs-plus w-ds-xs-plus rounded-surface', shimmer)} />\n        </div>\n      </div>\n\n      {/* Property rows */}\n      <div className=\"flex flex-col gap-0 border-b border-surface-border-strong px-ds-05b py-ds-05\">\n        {Array.from({ length: 5 }).map((_, i) => (\n          <div\n            key={`prop-${i}`}\n            className=\"flex items-center gap-ds-05 py-ds-03\"\n          >\n            <Skeleton className={cn('h-ds-04 w-ds-12 shrink-0', shimmer)} />\n            <Skeleton className={cn('h-ds-06 w-[128px] rounded-control', shimmer)} />\n          </div>\n        ))}\n      </div>\n\n      {/* Tabs */}\n      <div className=\"border-b border-surface-border-strong px-ds-05b\">\n        <div className=\"flex gap-ds-05 py-ds-04\">\n          {Array.from({ length: 3 }).map((_, i) => (\n            <Skeleton key={`tab-${i}`} className={cn('h-ds-05 w-ds-10', shimmer)} />\n          ))}\n        </div>\n      </div>\n\n      {/* Tab content */}\n      <div className=\"flex flex-1 flex-col gap-ds-04 px-ds-05b py-ds-05\">\n        <Skeleton className={cn('h-ds-04 w-full', shimmer)} />\n        <Skeleton className={cn('h-ds-04 w-4/5', shimmer)} />\n        <Skeleton className={cn('h-ds-04 w-3/5', shimmer)} />\n        <Skeleton className={cn('mt-ds-03 h-ds-04 w-full', shimmer)} />\n        <Skeleton className={cn('h-ds-04 w-2/3', shimmer)} />\n      </div>\n    </div>\n  )\n},\n)\n\nTaskDetailSkeleton.displayName = 'TaskDetailSkeleton'\n\nexport {\n  DashboardSkeleton,\n  ProjectListSkeleton,\n  TaskDetailSkeleton,\n}\n"],"mappings":"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"}

package/dist/composed/responsive-modal.d.ts

@@ -0,0 +1,39 @@
+"use client";
+import * as DialogPrimitive from '../primitives/react-dialog';
+import * as React from 'react';
+export interface ResponsiveModalProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
+    /** When false, Escape/overlay/drag cannot dismiss — only an explicit Close/onOpenChange can. @default true */
+    dismissable?: boolean;
+}
+declare const ResponsiveModal: React.FC<ResponsiveModalProps>;
+declare const ResponsiveModalTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ResponsiveModalClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ResponsiveModalPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const ResponsiveModalOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ResponsiveModalContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * Mobile-only. Rest heights as ascending fractions of viewport height, e.g.
+     * `[0.5, 0.9]`. Omit for a content-height sheet. The largest fraction caps the
+     * sheet height. Ignored on desktop.
+     */
+    snapPoints?: number[];
+    /** Mobile-only. Index into `snapPoints` the sheet opens at. @default last (tallest) */
+    defaultSnapPoint?: number;
+}
+declare const ResponsiveModalContent: React.ForwardRefExoticComponent<ResponsiveModalContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Full-bleed layer painted behind the modal content (`-z-10`), clipped to the
+ * panel's rounded corners. Render whatever you want behind the content (a
+ * gradient, an aurora, an image). It is non-interactive by default.
+ */
+declare const ResponsiveModalBackground: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** Pinned header — sits above the scroll body and does not scroll with it. */
+declare const ResponsiveModalHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** Internal scroll region — grows to fill, scrolls when content exceeds the height cap. */
+declare const ResponsiveModalBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** Pinned footer action row. Stacks on mobile, right-aligned inline on desktop. */
+declare const ResponsiveModalFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const ResponsiveModalTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const ResponsiveModalDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { ResponsiveModal, ResponsiveModalBackground, ResponsiveModalBody, ResponsiveModalClose, ResponsiveModalContent, ResponsiveModalDescription, ResponsiveModalFooter, ResponsiveModalHeader, ResponsiveModalOverlay, ResponsiveModalPortal, ResponsiveModalTitle, ResponsiveModalTrigger, };
+//# sourceMappingURL=responsive-modal.d.ts.map

package/dist/composed/responsive-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-modal.d.ts","sourceRoot":"","sources":["../../src/composed/responsive-modal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAG3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqE9B,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC;IACnE,8GAA8G;IAC9G,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAoCnD,CAAA;AAGD,QAAA,MAAM,sBAAsB,8GAA0B,CAAA;AACtD,QAAA,MAAM,oBAAoB,4GAAwB,CAAA;AAClD,QAAA,MAAM,qBAAqB,6CAAyB,CAAA;AAEpD,QAAA,MAAM,sBAAsB,8JAU1B,CAAA;AAyBF,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;IACtE;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,uFAAuF;IACvF,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAKD,QAAA,MAAM,sBAAsB,oGA2K1B,CAAA;AAKF;;;;GAIG;AACH,QAAA,MAAM,yBAAyB,6GAS9B,CAAA;AAKD,8EAA8E;AAC9E,QAAA,MAAM,qBAAqB,6GAW1B,CAAA;AAGD,2FAA2F;AAC3F,QAAA,MAAM,mBAAmB,6GAQxB,CAAA;AAGD,mFAAmF;AACnF,QAAA,MAAM,qBAAqB,6GAW1B,CAAA;AAGD,QAAA,MAAM,oBAAoB,oKASxB,CAAA;AAGF,QAAA,MAAM,0BAA0B,8KAS9B,CAAA;AAGF,OAAO,EACL,eAAe,EACf,yBAAyB,EACzB,mBAAmB,EACnB,oBAAoB,EACpB,sBAAsB,EACtB,0BAA0B,EAC1B,qBAAqB,EACrB,qBAAqB,EACrB,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,EACpB,sBAAsB,GACvB,CAAA"}

package/dist/composed/responsive-modal.js

@@ -0,0 +1,212 @@
+"use client";
+import { An as e, Dn as t, En as n, Mn as r, On as i, Tn as a, jn as o, kn as s } from "../_chunks/primitives.js";
+import { springs as c, tweens as l } from "../ui/lib/motion.js";
+import { cn as u } from "../ui/lib/utils.js";
+import { Icon as d } from "../ui/icon.js";
+import { useIsMobile as f } from "../hooks/use-mobile.js";
+import * as p from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { IconX as g } from "@tabler/icons-react";
+import { AnimatePresence as _, motion as v, useDragControls as y, useReducedMotion as b } from "framer-motion";
+//#region src/composed/responsive-modal.tsx
+var x = p.createContext({
+	open: !1,
+	isMobile: !1,
+	dismissable: !0,
+	onClose: () => {}
+}), S = () => p.useContext(x), C = ({ open: t, defaultOpen: n = !1, onOpenChange: r, dismissable: i = !0, children: a, ...o }) => {
+	let [s, c] = p.useState(n), l = t !== void 0, u = l ? t : s, d = f(), h = p.useCallback((e) => {
+		!e && !i || (l || c(e), r?.(e));
+	}, [
+		l,
+		r,
+		i
+	]), g = p.useMemo(() => ({
+		open: u,
+		isMobile: d,
+		dismissable: i,
+		onClose: () => h(!1)
+	}), [
+		u,
+		d,
+		i,
+		h
+	]);
+	return /* @__PURE__ */ m(x.Provider, {
+		value: g,
+		children: /* @__PURE__ */ m(e, {
+			open: u,
+			onOpenChange: h,
+			...o,
+			children: a
+		})
+	});
+};
+C.displayName = "ResponsiveModal";
+var w = r, T = a, E = s, D = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(i, {
+	ref: n,
+	forceMount: !0,
+	className: u("fixed inset-0 z-overlay bg-overlay", e),
+	...t
+}));
+D.displayName = "ResponsiveModalOverlay";
+function O(e, t) {
+	let n = 0, r = Infinity;
+	for (let i = 0; i < t.length; i++) {
+		let a = Math.abs(t[i] - e);
+		a < r && (r = a, n = i);
+	}
+	return n;
+}
+var k = 120, A = 500, j = p.forwardRef(({ className: e, children: t, snapPoints: r, defaultSnapPoint: i, ...o }, s) => {
+	let { open: f, isMobile: x, dismissable: C, onClose: w } = S(), T = b(), j = y(), M = x && Array.isArray(r) && r.length > 0, N = p.useMemo(() => M ? [...r].sort((e, t) => e - t) : [], [M, r]), P = N.length ? N[N.length - 1] : 1, F = p.useMemo(() => {
+		if (!N.length) return 0;
+		let e = i ?? N.length - 1;
+		return Math.min(Math.max(e, 0), N.length - 1);
+	}, [N, i]), [I, L] = p.useState(F), [R, z] = p.useState(0), B = p.useRef(null);
+	p.useEffect(() => {
+		f && L(F);
+	}, [f, F]), p.useEffect(() => {
+		if (!x) return;
+		let e = B.current;
+		if (!e) return;
+		let t = () => z(e.getBoundingClientRect().height);
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [x, f]);
+	let V = p.useCallback((e) => {
+		B.current = e, typeof s == "function" ? s(e) : s && (s.current = e);
+	}, [s]), H = p.useCallback((e) => !N.length || !R ? 0 : (P - N[e]) / P * R, [
+		N,
+		R,
+		P
+	]), U = x && C && !T, W = p.useCallback((e, t) => {
+		if (!N.length) {
+			(t.offset.y > k || t.velocity.y > A) && w();
+			return;
+		}
+		let n = P - (H(I) + t.offset.y) / R * P, r = N[0] - n;
+		if (I === 0 && (r > .15 || t.velocity.y > A)) {
+			w();
+			return;
+		}
+		L(O(n, N));
+	}, [
+		N,
+		H,
+		I,
+		P,
+		R,
+		w
+	]), G = u("fixed inset-x-0 bottom-0 z-modal flex flex-col overflow-hidden rounded-t-overlay-lg border-t border-surface-border-strong bg-surface-overlay shadow-overlay", M ? void 0 : "max-h-[90dvh]"), K = C ? /* @__PURE__ */ h(a, {
+		title: "Close",
+		className: "absolute right-ds-05 top-ds-05 z-10 flex min-h-ds-xs min-w-ds-xs items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 active:scale-90 disabled:pointer-events-none",
+		children: [/* @__PURE__ */ m(d, {
+			icon: g,
+			size: "lg"
+		}), /* @__PURE__ */ m("span", {
+			className: "sr-only",
+			children: "Close"
+		})]
+	}) : null;
+	return /* @__PURE__ */ m(_, { children: f && /* @__PURE__ */ h(E, {
+		forceMount: !0,
+		children: [/* @__PURE__ */ m(D, {
+			asChild: !0,
+			children: /* @__PURE__ */ m(v.div, {
+				initial: { opacity: 0 },
+				animate: { opacity: 1 },
+				exit: { opacity: 0 },
+				transition: l.fade
+			})
+		}), /* @__PURE__ */ m(n, {
+			ref: V,
+			forceMount: !0,
+			asChild: !0,
+			onPointerDownOutside: C ? void 0 : (e) => e.preventDefault(),
+			...o,
+			children: /* @__PURE__ */ h(v.div, {
+				className: u(x ? G : "fixed left-[50%] top-[50%] z-modal flex max-h-[85dvh] w-full max-w-lg flex-col overflow-hidden rounded-overlay-lg bg-surface-overlay shadow-overlay", e),
+				style: M ? { height: `${P * 100}dvh` } : void 0,
+				initial: x ? { y: "100%" } : {
+					opacity: 0,
+					scale: .96,
+					x: "-50%",
+					y: "-50%"
+				},
+				animate: x ? { y: M ? H(I) : 0 } : {
+					opacity: 1,
+					scale: 1,
+					x: "-50%",
+					y: "-50%"
+				},
+				exit: x ? { y: "100%" } : {
+					opacity: 0,
+					scale: .96,
+					x: "-50%",
+					y: "-50%"
+				},
+				transition: x ? c.smooth : {
+					...c.smooth,
+					opacity: l.fade
+				},
+				drag: U ? "y" : !1,
+				dragListener: !1,
+				dragControls: j,
+				dragConstraints: { top: 0 },
+				dragElastic: .15,
+				onDragEnd: U ? W : void 0,
+				children: [
+					x && /* @__PURE__ */ m("div", {
+						className: u("flex shrink-0 justify-center pb-ds-01 pt-ds-03", U && "cursor-grab touch-none"),
+						onPointerDown: U ? (e) => j.start(e) : void 0,
+						children: /* @__PURE__ */ m("div", { className: "h-1 w-8 rounded-pill bg-surface-border" })
+					}),
+					K,
+					t
+				]
+			})
+		})]
+	}) });
+});
+j.displayName = "ResponsiveModalContent";
+var M = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m("div", {
+	ref: n,
+	"aria-hidden": !0,
+	className: u("pointer-events-none absolute inset-0 -z-10 overflow-hidden rounded-[inherit]", e),
+	...t
+}));
+M.displayName = "ResponsiveModalBackground";
+var N = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m("div", {
+	ref: n,
+	className: u("flex shrink-0 flex-col gap-ds-02b px-ds-06 pb-ds-04 pt-ds-05 text-center sm:text-left", e),
+	...t
+}));
+N.displayName = "ResponsiveModalHeader";
+var P = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m("div", {
+	ref: n,
+	className: u("min-h-0 flex-1 overflow-y-auto px-ds-06 py-ds-02", e),
+	...t
+}));
+P.displayName = "ResponsiveModalBody";
+var F = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m("div", {
+	ref: n,
+	className: u("flex shrink-0 flex-col-reverse gap-ds-03 px-ds-06 pb-ds-06 pt-ds-04 sm:flex-row sm:justify-end", e),
+	...t
+}));
+F.displayName = "ResponsiveModalFooter";
+var I = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(o, {
+	ref: n,
+	className: u("text-ds-lg font-semibold text-surface-fg", e),
+	...t
+}));
+I.displayName = "ResponsiveModalTitle";
+var L = p.forwardRef(({ className: e, ...n }, r) => /* @__PURE__ */ m(t, {
+	ref: r,
+	className: u("text-ds-md text-surface-fg-muted", e),
+	...n
+}));
+L.displayName = "ResponsiveModalDescription";
+//#endregion
+export { C as ResponsiveModal, M as ResponsiveModalBackground, P as ResponsiveModalBody, T as ResponsiveModalClose, j as ResponsiveModalContent, L as ResponsiveModalDescription, F as ResponsiveModalFooter, N as ResponsiveModalHeader, D as ResponsiveModalOverlay, E as ResponsiveModalPortal, I as ResponsiveModalTitle, w as ResponsiveModalTrigger };

package/dist/composed/responsive-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-modal.js","names":[],"sources":["../../src/composed/responsive-modal.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@primitives/react-dialog'\nimport { IconX } from '@tabler/icons-react'\nimport { AnimatePresence, motion, useDragControls, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { Icon } from '../ui/icon'\nimport { springs, tweens } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\n\n/**\n * ResponsiveModal — one overlay that is a centered **Dialog** on desktop (md+)\n * and a partial, content-height **bottom sheet** on mobile (drag-to-dismiss,\n * optional snap points). Built on the same accessible dialog primitive as\n * `Dialog` and `Sheet` (focus trap, Escape, scroll lock), so it is an\n * alternative-to both — not a re-roll.\n *\n * Why it exists: `DialogContent responsive` collapses to a full-screen takeover\n * on mobile (`inset-0`), which leaves dead space under short content and drops\n * the drawer affordances users expect. This composes the two correct halves and\n * owns the fiddly bits (pinned header, internal scroll body with sane height\n * caps, close-button stacking above an optional full-bleed background) so\n * consumers stop hand-rolling a `useIsMobile()` switch.\n *\n * **Parts (in composition order):**\n * - `ResponsiveModal` — open/close state (this root)\n * - `ResponsiveModalTrigger` — opens it (use `asChild`)\n * - `ResponsiveModalContent` — the switching panel (Dialog md+ / bottom sheet below)\n * - `ResponsiveModalBackground` — optional full-bleed layer painted behind content (`-z-10`)\n * - `ResponsiveModalHeader` — pinned; stays put while the body scrolls\n * - `ResponsiveModalTitle` — required for accessibility (labels the dialog)\n * - `ResponsiveModalDescription` — optional subtitle\n * - `ResponsiveModalBody` — internal scroll region (capped 85dvh desktop / 90dvh mobile)\n * - `ResponsiveModalFooter` — pinned action row\n * - `ResponsiveModalClose` — manual close (a close button is built into Content)\n *\n * @compound\n * @example\n * <ResponsiveModal>\n *   <ResponsiveModalTrigger asChild><Button>Open</Button></ResponsiveModalTrigger>\n *   <ResponsiveModalContent>\n *     <ResponsiveModalHeader>\n *       <ResponsiveModalTitle>Filters</ResponsiveModalTitle>\n *       <ResponsiveModalDescription>Narrow the result set.</ResponsiveModalDescription>\n *     </ResponsiveModalHeader>\n *     <ResponsiveModalBody>…form fields…</ResponsiveModalBody>\n *     <ResponsiveModalFooter>\n *       <ResponsiveModalClose asChild><Button variant=\"soft\">Cancel</Button></ResponsiveModalClose>\n *       <Button>Apply</Button>\n *     </ResponsiveModalFooter>\n *   </ResponsiveModalContent>\n * </ResponsiveModal>\n */\n\n// ── Context ──────────────────────────────────────────────────────────────────\n\ntype ResponsiveModalContextValue = {\n  open: boolean\n  isMobile: boolean\n  dismissable: boolean\n  onClose: () => void\n}\nconst ResponsiveModalContext = React.createContext<ResponsiveModalContextValue>({\n  open: false,\n  isMobile: false,\n  dismissable: true,\n  onClose: () => {},\n})\nconst useResponsiveModal = () => React.useContext(ResponsiveModalContext)\n\n// ── Root ──────────────────────────────────────────────────────────────────────\n\nexport interface ResponsiveModalProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {\n  /** When false, Escape/overlay/drag cannot dismiss — only an explicit Close/onOpenChange can. @default true */\n  dismissable?: boolean\n}\n\nconst ResponsiveModal: React.FC<ResponsiveModalProps> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  dismissable = true,\n  children,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n  const isMobile = useIsMobile()\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      // A non-dismissable modal ignores the primitive's implicit close attempts\n      // (Escape, outside-click); only value=true or an explicit close gets through.\n      if (!value && !dismissable) return\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange, dismissable],\n  )\n\n  const contextValue = React.useMemo<ResponsiveModalContextValue>(\n    () => ({ open, isMobile, dismissable, onClose: () => handleOpenChange(false) }),\n    [open, isMobile, dismissable, handleOpenChange],\n  )\n\n  return (\n    <ResponsiveModalContext.Provider value={contextValue}>\n      <DialogPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props}>\n        {children}\n      </DialogPrimitive.Root>\n    </ResponsiveModalContext.Provider>\n  )\n}\nResponsiveModal.displayName = 'ResponsiveModal'\n\nconst ResponsiveModalTrigger = DialogPrimitive.Trigger\nconst ResponsiveModalClose = DialogPrimitive.Close\nconst ResponsiveModalPortal = DialogPrimitive.Portal\n\nconst ResponsiveModalOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    forceMount\n    className={cn('fixed inset-0 z-overlay bg-overlay', className)}\n    {...props}\n  />\n))\nResponsiveModalOverlay.displayName = 'ResponsiveModalOverlay'\n\n// ── Snap points ────────────────────────────────────────────────────────────────\n// A snap point is a fraction (0,1] of the viewport height the sheet rests at.\n// Omitted → the sheet is content-height (capped at 90dvh) with a single rest at\n// its natural height. Provided → the sheet is tall enough for the largest snap\n// and rests at each fraction; dragging below the smallest past a threshold\n// dismisses (when dismissable).\n\nfunction nearestSnapIndex(currentVisibleFraction: number, snapPoints: number[]) {\n  let best = 0\n  let bestDist = Infinity\n  for (let i = 0; i < snapPoints.length; i++) {\n    const d = Math.abs(snapPoints[i] - currentVisibleFraction)\n    if (d < bestDist) {\n      bestDist = d\n      best = i\n    }\n  }\n  return best\n}\n\n// ── Content ──────────────────────────────────────────────────────────────────\n\nexport interface ResponsiveModalContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  /**\n   * Mobile-only. Rest heights as ascending fractions of viewport height, e.g.\n   * `[0.5, 0.9]`. Omit for a content-height sheet. The largest fraction caps the\n   * sheet height. Ignored on desktop.\n   */\n  snapPoints?: number[]\n  /** Mobile-only. Index into `snapPoints` the sheet opens at. @default last (tallest) */\n  defaultSnapPoint?: number\n}\n\nconst DRAG_DISMISS_THRESHOLD_PX = 120\nconst DRAG_DISMISS_VELOCITY = 500\n\nconst ResponsiveModalContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  ResponsiveModalContentProps\n>(({ className, children, snapPoints, defaultSnapPoint, ...props }, ref) => {\n  const { open, isMobile, dismissable, onClose } = useResponsiveModal()\n  const reduced = useReducedMotion()\n  const dragControls = useDragControls()\n\n  const hasSnaps = isMobile && Array.isArray(snapPoints) && snapPoints.length > 0\n  const sortedSnaps = React.useMemo(\n    () => (hasSnaps ? [...snapPoints!].sort((a, b) => a - b) : []),\n    [hasSnaps, snapPoints],\n  )\n  const maxSnap = sortedSnaps.length ? sortedSnaps[sortedSnaps.length - 1] : 1\n  const initialSnap = React.useMemo(() => {\n    if (!sortedSnaps.length) return 0\n    const d = defaultSnapPoint ?? sortedSnaps.length - 1\n    return Math.min(Math.max(d, 0), sortedSnaps.length - 1)\n  }, [sortedSnaps, defaultSnapPoint])\n\n  const [activeSnap, setActiveSnap] = React.useState(initialSnap)\n  const [sheetHeight, setSheetHeight] = React.useState(0)\n  const internalRef = React.useRef<HTMLDivElement>(null)\n\n  // Reset to the opening snap each time it re-opens.\n  React.useEffect(() => {\n    if (open) setActiveSnap(initialSnap)\n  }, [open, initialSnap])\n\n  // Measure the laid-out sheet height so snap rest positions can be expressed in px.\n  React.useEffect(() => {\n    if (!isMobile) return\n    const el = internalRef.current\n    if (!el) return\n    const measure = () => setSheetHeight(el.getBoundingClientRect().height)\n    measure()\n    const ro = new ResizeObserver(measure)\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [isMobile, open])\n\n  const composedRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      internalRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n    },\n    [ref],\n  )\n\n  // Rest translateY for a snap index: at the tallest snap y=0; smaller snaps push\n  // the sheet down so only that fraction of viewport height shows.\n  const restY = React.useCallback(\n    (index: number) => {\n      if (!sortedSnaps.length || !sheetHeight) return 0\n      const visible = sortedSnaps[index]\n      return ((maxSnap - visible) / maxSnap) * sheetHeight\n    },\n    [sortedSnaps, sheetHeight, maxSnap],\n  )\n\n  const canDrag = isMobile && dismissable && !reduced\n\n  const handleDragEnd = React.useCallback(\n    (\n      _e: unknown,\n      info: { offset: { y: number }; velocity: { y: number } },\n    ) => {\n      if (!sortedSnaps.length) {\n        // Content-height sheet: single rest; drag down past threshold dismisses.\n        if (info.offset.y > DRAG_DISMISS_THRESHOLD_PX || info.velocity.y > DRAG_DISMISS_VELOCITY) {\n          onClose()\n        }\n        return\n      }\n      // Snapped sheet: project the release point onto the visible-fraction axis.\n      const currentY = restY(activeSnap) + info.offset.y\n      const draggedVisible = maxSnap - (currentY / sheetHeight) * maxSnap\n      const belowLowest = sortedSnaps[0] - draggedVisible\n      if (\n        activeSnap === 0 &&\n        (belowLowest > 0.15 || info.velocity.y > DRAG_DISMISS_VELOCITY)\n      ) {\n        onClose()\n        return\n      }\n      setActiveSnap(nearestSnapIndex(draggedVisible, sortedSnaps))\n    },\n    [sortedSnaps, restY, activeSnap, maxSnap, sheetHeight, onClose],\n  )\n\n  // ── Desktop: centered Dialog ──\n  const desktopClasses =\n    'fixed left-[50%] top-[50%] z-modal flex max-h-[85dvh] w-full max-w-lg flex-col overflow-hidden rounded-overlay-lg bg-surface-overlay shadow-overlay'\n\n  // ── Mobile: bottom sheet ──\n  const mobileClasses = cn(\n    'fixed inset-x-0 bottom-0 z-modal flex flex-col overflow-hidden rounded-t-overlay-lg border-t border-surface-border-strong bg-surface-overlay shadow-overlay',\n    // Snap sheets are as tall as the largest snap; content sheets hug content up to 90dvh.\n    hasSnaps ? undefined : 'max-h-[90dvh]',\n  )\n\n  const closeButton = dismissable ? (\n    <DialogPrimitive.Close\n      title=\"Close\"\n      className=\"absolute right-ds-05 top-ds-05 z-10 flex min-h-ds-xs min-w-ds-xs items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:bg-surface-raised-hover hover:text-surface-fg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 active:scale-90 disabled:pointer-events-none\"\n    >\n      <Icon icon={IconX} size=\"lg\" />\n      <span className=\"sr-only\">Close</span>\n    </DialogPrimitive.Close>\n  ) : null\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <ResponsiveModalPortal forceMount>\n          <ResponsiveModalOverlay asChild>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            />\n          </ResponsiveModalOverlay>\n          <DialogPrimitive.Content\n            ref={composedRef}\n            forceMount\n            asChild\n            onPointerDownOutside={dismissable ? undefined : (e) => e.preventDefault()}\n            {...props}\n          >\n            <motion.div\n              className={cn(isMobile ? mobileClasses : desktopClasses, className)}\n              style={\n                hasSnaps\n                  ? { height: `${maxSnap * 100}dvh` }\n                  : undefined\n              }\n              initial={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.96, x: '-50%', y: '-50%' }}\n              animate={\n                isMobile\n                  ? { y: hasSnaps ? restY(activeSnap) : 0 }\n                  : { opacity: 1, scale: 1, x: '-50%', y: '-50%' }\n              }\n              exit={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.96, x: '-50%', y: '-50%' }}\n              transition={isMobile ? springs.smooth : { ...springs.smooth, opacity: tweens.fade }}\n              drag={canDrag ? 'y' : false}\n              dragListener={false}\n              dragControls={dragControls}\n              dragConstraints={{ top: 0 }}\n              dragElastic={0.15}\n              onDragEnd={canDrag ? handleDragEnd : undefined}\n            >\n              {/* Drag handle — the only surface that initiates a drag, so the\n                  scroll body below never fights the gesture (useDragControls). */}\n              {isMobile && (\n                <div\n                  className={cn('flex shrink-0 justify-center pb-ds-01 pt-ds-03', canDrag && 'cursor-grab touch-none')}\n                  onPointerDown={canDrag ? (e) => dragControls.start(e) : undefined}\n                >\n                  <div className=\"h-1 w-8 rounded-pill bg-surface-border\" />\n                </div>\n              )}\n              {closeButton}\n              {children}\n            </motion.div>\n          </DialogPrimitive.Content>\n        </ResponsiveModalPortal>\n      )}\n    </AnimatePresence>\n  )\n})\nResponsiveModalContent.displayName = 'ResponsiveModalContent'\n\n// ── Background slot ────────────────────────────────────────────────────────────\n\n/**\n * Full-bleed layer painted behind the modal content (`-z-10`), clipped to the\n * panel's rounded corners. Render whatever you want behind the content (a\n * gradient, an aurora, an image). It is non-interactive by default.\n */\nconst ResponsiveModalBackground = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      aria-hidden\n      className={cn('pointer-events-none absolute inset-0 -z-10 overflow-hidden rounded-[inherit]', className)}\n      {...props}\n    />\n  ),\n)\nResponsiveModalBackground.displayName = 'ResponsiveModalBackground'\n\n// ── Layout parts ───────────────────────────────────────────────────────────────\n\n/** Pinned header — sits above the scroll body and does not scroll with it. */\nconst ResponsiveModalHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex shrink-0 flex-col gap-ds-02b px-ds-06 pb-ds-04 pt-ds-05 text-center sm:text-left',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nResponsiveModalHeader.displayName = 'ResponsiveModalHeader'\n\n/** Internal scroll region — grows to fill, scrolls when content exceeds the height cap. */\nconst ResponsiveModalBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn('min-h-0 flex-1 overflow-y-auto px-ds-06 py-ds-02', className)}\n      {...props}\n    />\n  ),\n)\nResponsiveModalBody.displayName = 'ResponsiveModalBody'\n\n/** Pinned footer action row. Stacks on mobile, right-aligned inline on desktop. */\nconst ResponsiveModalFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex shrink-0 flex-col-reverse gap-ds-03 px-ds-06 pb-ds-06 pt-ds-04 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nResponsiveModalFooter.displayName = 'ResponsiveModalFooter'\n\nconst ResponsiveModalTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-ds-lg font-semibold text-surface-fg', className)}\n    {...props}\n  />\n))\nResponsiveModalTitle.displayName = 'ResponsiveModalTitle'\n\nconst ResponsiveModalDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-ds-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nResponsiveModalDescription.displayName = 'ResponsiveModalDescription'\n\nexport {\n  ResponsiveModal,\n  ResponsiveModalBackground,\n  ResponsiveModalBody,\n  ResponsiveModalClose,\n  ResponsiveModalContent,\n  ResponsiveModalDescription,\n  ResponsiveModalFooter,\n  ResponsiveModalHeader,\n  ResponsiveModalOverlay,\n  ResponsiveModalPortal,\n  ResponsiveModalTitle,\n  ResponsiveModalTrigger,\n}\n"],"mappings":"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"}

package/dist/composed/rich-chat-input.js

@@ -1,5 +1,5 @@
 "use client";
-import { ln as e, mn as t, pn as n, un as r } from "../_chunks/primitives.js";
+import { cn as e, fn as t, ln as n, pn as r } from "../_chunks/primitives.js";
 import { durations as i } from "../ui/lib/motion.js";
 import { cn as a } from "../ui/lib/utils.js";
 import { Spinner as o } from "../ui/spinner.js";
@@ -1479,9 +1479,9 @@ var xt = E.forwardRef(function({ onSubmit: o, placeholder: u = "Type a message..
 			e(i, a, {
 				placement: "top-end",
 				middleware: [
-					n(8),
-					r(),
-					t({ padding: 8 })
+					t(8),
+					n(),
+					r({ padding: 8 })
 				]
 			}).then(({ x: e, y: t }) => {
 				Object.assign(a.style, {