@hexclave/dashboard-ui-components 1.0.0

package/dist/esm/components/data-grid/use-url-state.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-url-state.test.js","names":[],"sources":["../../../../src/components/data-grid/use-url-state.test.tsx"],"sourcesContent":["// @vitest-environment jsdom\n\nimport { act, renderHook } from \"@testing-library/react\";\nimport { afterEach, beforeEach, describe, expect, it } from \"vitest\";\nimport type { DataGridColumnDef } from \"./types\";\nimport { useDataGridUrlState } from \"./use-url-state\";\n\ntype Row = { id: string };\n\nconst columns: DataGridColumnDef<Row>[] = [\n  { id: \"name\", header: \"Name\", accessor: () => \"\", width: 160, minWidth: 80, type: \"string\" },\n  { id: \"email\", header: \"Email\", accessor: () => \"\", width: 200, minWidth: 80, type: \"string\" },\n];\n\nfunction setUrl(search: string) {\n  window.history.replaceState(null, \"\", `/${search ? `?${search}` : \"\"}`);\n}\n\nbeforeEach(() => {\n  setUrl(\"\");\n});\n\nafterEach(() => {\n  setUrl(\"\");\n});\n\ndescribe(\"useDataGridUrlState\", () => {\n  it(\"initializes from existing URL params\", () => {\n    setUrl(\"grid_w=name:240&grid_h=email\");\n    const { result } = renderHook(() => useDataGridUrlState(columns));\n    const [state] = result.current;\n    expect(state.columnWidths.name).toBe(240);\n    expect(state.columnVisibility.email).toBe(false);\n  });\n\n  it(\"writes width changes back to the URL (after debounce)\", async () => {\n    const { result } = renderHook(() => useDataGridUrlState(columns));\n\n    act(() => {\n      const [, setState] = result.current;\n      setState((prev) => ({\n        ...prev,\n        columnWidths: { ...prev.columnWidths, name: 250 },\n      }));\n    });\n\n    // Debounce is 100ms.\n    await new Promise((resolve) => setTimeout(resolve, 150));\n    const params = new URLSearchParams(window.location.search);\n    expect(params.get(\"grid_w\")).toBe(\"name:250\");\n  });\n\n  it(\"resets column widths to defaults when a popstate clears the URL\", () => {\n    setUrl(\"grid_w=name:300\");\n    const { result } = renderHook(() => useDataGridUrlState(columns));\n    expect(result.current[0].columnWidths.name).toBe(300);\n\n    act(() => {\n      setUrl(\"\");\n      window.dispatchEvent(new PopStateEvent(\"popstate\"));\n    });\n\n    // Default for \"name\" column is its declared width of 160.\n    expect(result.current[0].columnWidths.name).toBe(160);\n  });\n\n  it(\"isolates two grids on the same page via paramPrefix\", async () => {\n    const { result: a } = renderHook(() => useDataGridUrlState(columns, { paramPrefix: \"users\" }));\n    const { result: b } = renderHook(() => useDataGridUrlState(columns, { paramPrefix: \"teams\" }));\n\n    act(() => {\n      a.current[1]((prev) => ({ ...prev, columnWidths: { ...prev.columnWidths, name: 222 } }));\n    });\n    await new Promise((resolve) => setTimeout(resolve, 150));\n\n    const params = new URLSearchParams(window.location.search);\n    expect(params.get(\"users_w\")).toBe(\"name:222\");\n    expect(params.get(\"teams_w\")).toBeNull();\n    expect(b.current[0].columnWidths.name).toBe(160); // unaffected\n  });\n\n  it(\"ignores malformed entries in the URL param without throwing\", () => {\n    setUrl(\"grid_w=:,name:abc,name:240,bogusid:99\");\n    const { result } = renderHook(() => useDataGridUrlState(columns));\n    // Only the well-formed `name:240` should land; junk is dropped silently.\n    expect(result.current[0].columnWidths.name).toBe(240);\n  });\n});\n"],"mappings":";;;;;;AASA,MAAM,UAAoC,CACxC;CAAE,IAAI;CAAQ,QAAQ;CAAQ,gBAAgB;CAAI,OAAO;CAAK,UAAU;CAAI,MAAM;CAAU,EAC5F;CAAE,IAAI;CAAS,QAAQ;CAAS,gBAAgB;CAAI,OAAO;CAAK,UAAU;CAAI,MAAM;CAAU,CAC/F;AAED,SAAS,OAAO,QAAgB;AAC9B,QAAO,QAAQ,aAAa,MAAM,IAAI,IAAI,SAAS,IAAI,WAAW,KAAK;;AAGzE,iBAAiB;AACf,QAAO,GAAG;EACV;AAEF,gBAAgB;AACd,QAAO,GAAG;EACV;AAEF,SAAS,6BAA6B;AACpC,IAAG,8CAA8C;AAC/C,SAAO,+BAA+B;EACtC,MAAM,EAAE,WAAW,iBAAiB,oBAAoB,QAAQ,CAAC;EACjE,MAAM,CAAC,SAAS,OAAO;AACvB,SAAO,MAAM,aAAa,KAAK,CAAC,KAAK,IAAI;AACzC,SAAO,MAAM,iBAAiB,MAAM,CAAC,KAAK,MAAM;GAChD;AAEF,IAAG,yDAAyD,YAAY;EACtE,MAAM,EAAE,WAAW,iBAAiB,oBAAoB,QAAQ,CAAC;AAEjE,YAAU;GACR,MAAM,GAAG,YAAY,OAAO;AAC5B,aAAU,UAAU;IAClB,GAAG;IACH,cAAc;KAAE,GAAG,KAAK;KAAc,MAAM;KAAK;IAClD,EAAE;IACH;AAGF,QAAM,IAAI,SAAS,YAAY,WAAW,SAAS,IAAI,CAAC;AAExD,SADe,IAAI,gBAAgB,OAAO,SAAS,OAAO,CAC5C,IAAI,SAAS,CAAC,CAAC,KAAK,WAAW;GAC7C;AAEF,IAAG,yEAAyE;AAC1E,SAAO,kBAAkB;EACzB,MAAM,EAAE,WAAW,iBAAiB,oBAAoB,QAAQ,CAAC;AACjE,SAAO,OAAO,QAAQ,GAAG,aAAa,KAAK,CAAC,KAAK,IAAI;AAErD,YAAU;AACR,UAAO,GAAG;AACV,UAAO,cAAc,IAAI,cAAc,WAAW,CAAC;IACnD;AAGF,SAAO,OAAO,QAAQ,GAAG,aAAa,KAAK,CAAC,KAAK,IAAI;GACrD;AAEF,IAAG,uDAAuD,YAAY;EACpE,MAAM,EAAE,QAAQ,MAAM,iBAAiB,oBAAoB,SAAS,EAAE,aAAa,SAAS,CAAC,CAAC;EAC9F,MAAM,EAAE,QAAQ,MAAM,iBAAiB,oBAAoB,SAAS,EAAE,aAAa,SAAS,CAAC,CAAC;AAE9F,YAAU;AACR,KAAE,QAAQ,IAAI,UAAU;IAAE,GAAG;IAAM,cAAc;KAAE,GAAG,KAAK;KAAc,MAAM;KAAK;IAAE,EAAE;IACxF;AACF,QAAM,IAAI,SAAS,YAAY,WAAW,SAAS,IAAI,CAAC;EAExD,MAAM,SAAS,IAAI,gBAAgB,OAAO,SAAS,OAAO;AAC1D,SAAO,OAAO,IAAI,UAAU,CAAC,CAAC,KAAK,WAAW;AAC9C,SAAO,OAAO,IAAI,UAAU,CAAC,CAAC,UAAU;AACxC,SAAO,EAAE,QAAQ,GAAG,aAAa,KAAK,CAAC,KAAK,IAAI;GAChD;AAEF,IAAG,qEAAqE;AACtE,SAAO,wCAAwC;EAC/C,MAAM,EAAE,WAAW,iBAAiB,oBAAoB,QAAQ,CAAC;AAEjE,SAAO,OAAO,QAAQ,GAAG,aAAa,KAAK,CAAC,KAAK,IAAI;GACrD;EACF"}

package/dist/esm/components/dialog.d.ts

@@ -0,0 +1,67 @@
+import { Dialog } from "@hexclave/ui";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
+
+//#region src/components/dialog.d.ts
+type DesignDialogSize = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full";
+type DesignDialogVariant = "glassmorphic" | "plain";
+type DesignDialogIcon = React.ElementType<{
+  className?: string;
+}>;
+type DesignDialogRootProps = Omit<React.ComponentProps<typeof Dialog>, "children">;
+type DesignDialogProps = {
+  trigger?: React.ReactElement;
+  size?: DesignDialogSize;
+  variant?: DesignDialogVariant;
+  icon?: DesignDialogIcon | null;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  headerContent?: React.ReactNode;
+  customHeader?: React.ReactNode;
+  footer?: React.ReactNode;
+  noBodyPadding?: boolean;
+  hideTopCloseButton?: boolean;
+  className?: string;
+  overlayClassName?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+  footerClassName?: string;
+  children?: React.ReactNode;
+} & DesignDialogRootProps;
+/**
+ * Canonical dashboard modal surface. This wraps the base dialog primitives with
+ * a reusable glassmorphic shell and consistent header/body/footer regions.
+ */
+declare function DesignDialog({
+  trigger,
+  size,
+  variant,
+  icon: Icon,
+  title,
+  description,
+  headerContent,
+  customHeader,
+  footer,
+  noBodyPadding,
+  hideTopCloseButton,
+  className,
+  overlayClassName,
+  headerClassName,
+  bodyClassName,
+  footerClassName,
+  children,
+  ...dialogRootProps
+}: DesignDialogProps): react_jsx_runtime0.JSX.Element;
+declare const DesignDialogRoot: React.FC<_radix_ui_react_dialog0.DialogProps>;
+declare const DesignDialogTrigger: React.ForwardRefExoticComponent<_radix_ui_react_dialog0.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DesignDialogClose: React.ForwardRefExoticComponent<_radix_ui_react_dialog0.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DesignDialogTitle: React.FC<Omit<_radix_ui_react_dialog0.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {
+  ref?: React.Ref<HTMLHeadingElement> | undefined;
+}>;
+declare const DesignDialogDescription: React.FC<Omit<_radix_ui_react_dialog0.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & {
+  ref?: React.Ref<HTMLParagraphElement> | undefined;
+}>;
+//#endregion
+export { DesignDialog, DesignDialogClose, DesignDialogDescription, DesignDialogProps, DesignDialogRoot, DesignDialogSize, DesignDialogTitle, DesignDialogTrigger, DesignDialogVariant };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/esm/components/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../../src/components/dialog.tsx"],"mappings":";;;;;;KAgBY,gBAAA;AAAA,KAaA,mBAAA;AAAA,KA0BP,gBAAA,GAAmB,KAAA,CAAM,WAAA;EAAc,SAAA;AAAA;AAAA,KAEvC,qBAAA,GAAwB,IAAA,CAAK,KAAA,CAAM,cAAA,QAAsB,MAAA;AAAA,KAElD,iBAAA;EACV,OAAA,GAAU,KAAA,CAAM,YAAA;EAChB,IAAA,GAAO,gBAAA;EACP,OAAA,GAAU,mBAAA;EACV,IAAA,GAAO,gBAAA;EACP,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,aAAA,GAAgB,KAAA,CAAM,SAAA;EACtB,YAAA,GAAe,KAAA,CAAM,SAAA;EACrB,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,aAAA;EACA,kBAAA;EACA,SAAA;EACA,gBAAA;EACA,eAAA;EACA,aAAA;EACA,eAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA,IACf,qBAAA;;;;;iBAMY,YAAA,CAAA;EACd,OAAA;EACA,IAAA;EACA,OAAA;EACA,IAAA,EAAM,IAAA;EACN,KAAA;EACA,WAAA;EACA,aAAA;EACA,YAAA;EACA,MAAA;EACA,aAAA;EACA,kBAAA;EACA,SAAA;EACA,gBAAA;EACA,eAAA;EACA,aAAA;EACA,eAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAoGP,gBAAA,EAAgB,KAAA,CAAA,EAAA,CAAS,uBAAA,CAAT,WAAA;AAAA,cAChB,mBAAA,EAAmB,KAAA,CAAA,yBAAA,CAAgB,uBAAA,CAAhB,kBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,cACnB,iBAAA,EAAiB,KAAA,CAAA,yBAAA,CAAc,uBAAA,CAAd,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,cACjB,iBAAA,EAAiB,KAAA,CAAA,EAAA,CAAA,IAAA,CAAc,uBAAA,CAAd,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,kBAAA;;;cACjB,uBAAA,EAAuB,KAAA,CAAA,EAAA,CAAA,IAAA,CAAoB,uBAAA,CAApB,sBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,oBAAA"}

package/dist/esm/components/dialog.js

@@ -0,0 +1,92 @@
+"use client";
+
+import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, cn } from "@hexclave/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/dialog.tsx
+const dialogSizeClasses = new Map([
+	["sm", "max-w-sm"],
+	["md", "max-w-md"],
+	["lg", "max-w-lg"],
+	["xl", "max-w-xl"],
+	["2xl", "max-w-2xl"],
+	["3xl", "max-w-3xl"],
+	["4xl", "max-w-4xl"],
+	["5xl", "max-w-5xl"],
+	["6xl", "max-w-6xl"],
+	["7xl", "max-w-7xl"],
+	["full", "max-w-[calc(100vw-2rem)]"]
+]);
+const dialogSurfaceClasses = new Map([["glassmorphic", "border-0 sm:rounded-2xl bg-background/85 backdrop-blur-2xl ring-1 ring-foreground/[0.06] shadow-[0_24px_48px_-12px_rgba(0,0,0,0.25),0_4px_24px_-8px_rgba(0,0,0,0.12)] dark:bg-background/80 dark:ring-white/[0.06]"], ["plain", "border bg-background shadow-lg sm:rounded-lg"]]);
+const dialogOverlayClasses = new Map([["glassmorphic", "bg-black/50 backdrop-blur-sm"], ["plain", void 0]]);
+/**
+* Canonical dashboard modal surface. This wraps the base dialog primitives with
+* a reusable glassmorphic shell and consistent header/body/footer regions.
+*/
+function DesignDialog({ trigger, size = "lg", variant = "glassmorphic", icon: Icon = null, title, description, headerContent, customHeader, footer, noBodyPadding = false, hideTopCloseButton = false, className, overlayClassName, headerClassName, bodyClassName, footerClassName, children, ...dialogRootProps }) {
+	const resolvedSizeClass = dialogSizeClasses.get(size) ?? "max-w-lg";
+	const resolvedSurfaceClass = dialogSurfaceClasses.get(variant) ?? dialogSurfaceClasses.get("glassmorphic");
+	const resolvedOverlayClass = cn(dialogOverlayClasses.get(variant), overlayClassName);
+	const shouldRenderTopHeaderRow = Icon != null || title != null || description != null;
+	const shouldRenderHeader = customHeader != null || shouldRenderTopHeaderRow || headerContent != null;
+	const shouldRenderBody = React.Children.toArray(children).filter(Boolean).length > 0;
+	const needsAccessibleTitleFallback = !(title != null) && customHeader == null;
+	if (process.env.NODE_ENV !== "production" && needsAccessibleTitleFallback) console.warn("[DesignDialog] Rendered without a `title` or `customHeader`. Every dialog needs an accessible name — pass `title`, or render a `DialogTitle` inside `customHeader`.");
+	return /* @__PURE__ */ jsxs(Dialog, {
+		...dialogRootProps,
+		children: [trigger != null && /* @__PURE__ */ jsx(DialogTrigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsxs(DialogContent, {
+			className: cn("gap-0 p-0 overflow-hidden", resolvedSizeClass, resolvedSurfaceClass, className),
+			overlayProps: resolvedOverlayClass ? { className: resolvedOverlayClass } : void 0,
+			noCloseButton: hideTopCloseButton,
+			children: [
+				needsAccessibleTitleFallback && /* @__PURE__ */ jsx(DialogTitle, {
+					className: "sr-only",
+					children: "Dialog"
+				}),
+				shouldRenderHeader && /* @__PURE__ */ jsx(DialogHeader, {
+					className: cn("px-6 pt-6 pb-4 border-b border-foreground/[0.06]", headerClassName),
+					children: customHeader ?? /* @__PURE__ */ jsxs(Fragment, { children: [shouldRenderTopHeaderRow && /* @__PURE__ */ jsxs("div", {
+						className: cn("flex items-start gap-3", Icon == null && "gap-0"),
+						children: [Icon != null && /* @__PURE__ */ jsx("div", {
+							className: "h-9 w-9 rounded-xl bg-primary/10 ring-1 ring-primary/15 flex items-center justify-center shrink-0",
+							children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-primary" })
+						}), (title != null || description != null) && /* @__PURE__ */ jsxs("div", {
+							className: "flex-1 min-w-0 space-y-1",
+							children: [title != null ? /* @__PURE__ */ jsx(DialogTitle, {
+								className: "text-base",
+								children: title
+							}) : null, description != null ? /* @__PURE__ */ jsx(DialogDescription, {
+								className: "text-xs",
+								children: description
+							}) : null]
+						})]
+					}), headerContent != null ? /* @__PURE__ */ jsx("div", {
+						className: cn(shouldRenderTopHeaderRow && "mt-4"),
+						children: headerContent
+					}) : null] })
+				}),
+				shouldRenderBody && /* @__PURE__ */ jsx(DialogBody, {
+					className: cn("mx-0 my-0 w-auto", noBodyPadding ? "px-0 py-0" : "px-6 py-4", bodyClassName),
+					children
+				}),
+				footer != null ? /* @__PURE__ */ jsx(DialogFooter, {
+					className: cn("px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]", footerClassName),
+					children: footer
+				}) : null
+			]
+		})]
+	});
+}
+const DesignDialogRoot = Dialog;
+const DesignDialogTrigger = DialogTrigger;
+const DesignDialogClose = DialogClose;
+const DesignDialogTitle = DialogTitle;
+const DesignDialogDescription = DialogDescription;
+
+//#endregion
+export { DesignDialog, DesignDialogClose, DesignDialogDescription, DesignDialogRoot, DesignDialogTitle, DesignDialogTrigger };
+//# sourceMappingURL=dialog.js.map

package/dist/esm/components/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":[],"sources":["../../../src/components/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n  cn,\n} from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\nexport type DesignDialogSize =\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | \"3xl\"\n  | \"4xl\"\n  | \"5xl\"\n  | \"6xl\"\n  | \"7xl\"\n  | \"full\";\n\nexport type DesignDialogVariant = \"glassmorphic\" | \"plain\";\n\nconst dialogSizeClasses = new Map<DesignDialogSize, string>([\n  [\"sm\", \"max-w-sm\"],\n  [\"md\", \"max-w-md\"],\n  [\"lg\", \"max-w-lg\"],\n  [\"xl\", \"max-w-xl\"],\n  [\"2xl\", \"max-w-2xl\"],\n  [\"3xl\", \"max-w-3xl\"],\n  [\"4xl\", \"max-w-4xl\"],\n  [\"5xl\", \"max-w-5xl\"],\n  [\"6xl\", \"max-w-6xl\"],\n  [\"7xl\", \"max-w-7xl\"],\n  [\"full\", \"max-w-[calc(100vw-2rem)]\"],\n]);\n\nconst dialogSurfaceClasses = new Map<DesignDialogVariant, string>([\n  [\"glassmorphic\", \"border-0 sm:rounded-2xl bg-background/85 backdrop-blur-2xl ring-1 ring-foreground/[0.06] shadow-[0_24px_48px_-12px_rgba(0,0,0,0.25),0_4px_24px_-8px_rgba(0,0,0,0.12)] dark:bg-background/80 dark:ring-white/[0.06]\"],\n  [\"plain\", \"border bg-background shadow-lg sm:rounded-lg\"],\n]);\n\nconst dialogOverlayClasses = new Map<DesignDialogVariant, string | undefined>([\n  [\"glassmorphic\", \"bg-black/50 backdrop-blur-sm\"],\n  [\"plain\", undefined],\n]);\n\ntype DesignDialogIcon = React.ElementType<{ className?: string }>;\n\ntype DesignDialogRootProps = Omit<React.ComponentProps<typeof Dialog>, \"children\">;\n\nexport type DesignDialogProps = {\n  trigger?: React.ReactElement,\n  size?: DesignDialogSize,\n  variant?: DesignDialogVariant,\n  icon?: DesignDialogIcon | null,\n  title?: React.ReactNode,\n  description?: React.ReactNode,\n  headerContent?: React.ReactNode,\n  customHeader?: React.ReactNode,\n  footer?: React.ReactNode,\n  noBodyPadding?: boolean,\n  hideTopCloseButton?: boolean,\n  className?: string,\n  overlayClassName?: string,\n  headerClassName?: string,\n  bodyClassName?: string,\n  footerClassName?: string,\n  children?: React.ReactNode,\n} & DesignDialogRootProps;\n\n/**\n * Canonical dashboard modal surface. This wraps the base dialog primitives with\n * a reusable glassmorphic shell and consistent header/body/footer regions.\n */\nexport function DesignDialog({\n  trigger,\n  size = \"lg\",\n  variant = \"glassmorphic\",\n  icon: Icon = null,\n  title,\n  description,\n  headerContent,\n  customHeader,\n  footer,\n  noBodyPadding = false,\n  hideTopCloseButton = false,\n  className,\n  overlayClassName,\n  headerClassName,\n  bodyClassName,\n  footerClassName,\n  children,\n  ...dialogRootProps\n}: DesignDialogProps) {\n  const resolvedSizeClass = dialogSizeClasses.get(size) ?? \"max-w-lg\";\n  const resolvedSurfaceClass = dialogSurfaceClasses.get(variant) ?? dialogSurfaceClasses.get(\"glassmorphic\");\n  const resolvedOverlayClass = cn(dialogOverlayClasses.get(variant), overlayClassName);\n  const shouldRenderTopHeaderRow = Icon != null || title != null || description != null;\n  const shouldRenderHeader = customHeader != null || shouldRenderTopHeaderRow || headerContent != null;\n  // Use toArray + filter(Boolean) instead of Children.count so that\n  // expressions like `{condition && <Foo/>}` resolving to `false` don't\n  // produce an empty DialogBody (which would still render padding/borders).\n  const shouldRenderBody = React.Children.toArray(children).filter(Boolean).length > 0;\n  const hasStandardTitle = title != null;\n  const needsAccessibleTitleFallback = !hasStandardTitle && customHeader == null;\n\n  if (process.env.NODE_ENV !== \"production\" && needsAccessibleTitleFallback) {\n    console.warn(\n      \"[DesignDialog] Rendered without a `title` or `customHeader`. Every dialog needs an accessible name — pass `title`, or render a `DialogTitle` inside `customHeader`.\",\n    );\n  }\n\n  return (\n    <Dialog {...dialogRootProps}>\n      {trigger != null && (\n        <DialogTrigger asChild>\n          {trigger}\n        </DialogTrigger>\n      )}\n\n      <DialogContent\n        className={cn(\n          \"gap-0 p-0 overflow-hidden\",\n          resolvedSizeClass,\n          resolvedSurfaceClass,\n          className\n        )}\n        overlayProps={resolvedOverlayClass ? { className: resolvedOverlayClass } : undefined}\n        noCloseButton={hideTopCloseButton}\n      >\n        {needsAccessibleTitleFallback && (\n          <DialogTitle className=\"sr-only\">Dialog</DialogTitle>\n        )}\n        {shouldRenderHeader && (\n          <DialogHeader className={cn(\"px-6 pt-6 pb-4 border-b border-foreground/[0.06]\", headerClassName)}>\n            {customHeader ?? (\n              <>\n                {shouldRenderTopHeaderRow && (\n                  <div className={cn(\"flex items-start gap-3\", Icon == null && \"gap-0\")}>\n                    {Icon != null && (\n                      <div className=\"h-9 w-9 rounded-xl bg-primary/10 ring-1 ring-primary/15 flex items-center justify-center shrink-0\">\n                        <Icon className=\"h-4 w-4 text-primary\" />\n                      </div>\n                    )}\n                    {(title != null || description != null) && (\n                      <div className=\"flex-1 min-w-0 space-y-1\">\n                        {title != null ? (\n                          <DialogTitle className=\"text-base\">\n                            {title}\n                          </DialogTitle>\n                        ) : null}\n                        {description != null ? (\n                          <DialogDescription className=\"text-xs\">\n                            {description}\n                          </DialogDescription>\n                        ) : null}\n                      </div>\n                    )}\n                  </div>\n                )}\n\n                {headerContent != null ? (\n                  <div className={cn(shouldRenderTopHeaderRow && \"mt-4\")}>\n                    {headerContent}\n                  </div>\n                ) : null}\n              </>\n            )}\n          </DialogHeader>\n        )}\n\n        {shouldRenderBody && (\n          <DialogBody\n            className={cn(\n              \"mx-0 my-0 w-auto\",\n              noBodyPadding ? \"px-0 py-0\" : \"px-6 py-4\",\n              bodyClassName\n            )}\n          >\n            {children}\n          </DialogBody>\n        )}\n\n        {footer != null ? (\n          <DialogFooter className={cn(\"px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]\", footerClassName)}>\n            {footer}\n          </DialogFooter>\n        ) : null}\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nexport const DesignDialogRoot = Dialog;\nexport const DesignDialogTrigger = DialogTrigger;\nexport const DesignDialogClose = DialogClose;\nexport const DesignDialogTitle = DialogTitle;\nexport const DesignDialogDescription = DialogDescription;\n"],"mappings":";;;;;;;AA+BA,MAAM,oBAAoB,IAAI,IAA8B;CAC1D,CAAC,MAAM,WAAW;CAClB,CAAC,MAAM,WAAW;CAClB,CAAC,MAAM,WAAW;CAClB,CAAC,MAAM,WAAW;CAClB,CAAC,OAAO,YAAY;CACpB,CAAC,OAAO,YAAY;CACpB,CAAC,OAAO,YAAY;CACpB,CAAC,OAAO,YAAY;CACpB,CAAC,OAAO,YAAY;CACpB,CAAC,OAAO,YAAY;CACpB,CAAC,QAAQ,2BAA2B;CACrC,CAAC;AAEF,MAAM,uBAAuB,IAAI,IAAiC,CAChE,CAAC,gBAAgB,qNAAqN,EACtO,CAAC,SAAS,+CAA+C,CAC1D,CAAC;AAEF,MAAM,uBAAuB,IAAI,IAA6C,CAC5E,CAAC,gBAAgB,+BAA+B,EAChD,CAAC,SAAS,OAAU,CACrB,CAAC;;;;;AA8BF,SAAgB,aAAa,EAC3B,SACA,OAAO,MACP,UAAU,gBACV,MAAM,OAAO,MACb,OACA,aACA,eACA,cACA,QACA,gBAAgB,OAChB,qBAAqB,OACrB,WACA,kBACA,iBACA,eACA,iBACA,UACA,GAAG,mBACiB;CACpB,MAAM,oBAAoB,kBAAkB,IAAI,KAAK,IAAI;CACzD,MAAM,uBAAuB,qBAAqB,IAAI,QAAQ,IAAI,qBAAqB,IAAI,eAAe;CAC1G,MAAM,uBAAuB,GAAG,qBAAqB,IAAI,QAAQ,EAAE,iBAAiB;CACpF,MAAM,2BAA2B,QAAQ,QAAQ,SAAS,QAAQ,eAAe;CACjF,MAAM,qBAAqB,gBAAgB,QAAQ,4BAA4B,iBAAiB;CAIhG,MAAM,mBAAmB,MAAM,SAAS,QAAQ,SAAS,CAAC,OAAO,QAAQ,CAAC,SAAS;CAEnF,MAAM,+BAA+B,EADZ,SAAS,SACwB,gBAAgB;AAE1E,KAAI,QAAQ,IAAI,aAAa,gBAAgB,6BAC3C,SAAQ,KACN,sKACD;AAGH,QACE,qBAAC;EAAO,GAAI;aACT,WAAW,QACV,oBAAC;GAAc;aACZ;IACa,EAGlB,qBAAC;GACC,WAAW,GACT,6BACA,mBACA,sBACA,UACD;GACD,cAAc,uBAAuB,EAAE,WAAW,sBAAsB,GAAG;GAC3E,eAAe;;IAEd,gCACC,oBAAC;KAAY,WAAU;eAAU;MAAoB;IAEtD,sBACC,oBAAC;KAAa,WAAW,GAAG,oDAAoD,gBAAgB;eAC7F,gBACC,4CACG,4BACC,qBAAC;MAAI,WAAW,GAAG,0BAA0B,QAAQ,QAAQ,QAAQ;iBAClE,QAAQ,QACP,oBAAC;OAAI,WAAU;iBACb,oBAAC,QAAK,WAAU,yBAAyB;QACrC,GAEN,SAAS,QAAQ,eAAe,SAChC,qBAAC;OAAI,WAAU;kBACZ,SAAS,OACR,oBAAC;QAAY,WAAU;kBACpB;SACW,GACZ,MACH,eAAe,OACd,oBAAC;QAAkB,WAAU;kBAC1B;SACiB,GAClB;QACA;OAEJ,EAGP,iBAAiB,OAChB,oBAAC;MAAI,WAAW,GAAG,4BAA4B,OAAO;gBACnD;OACG,GACJ,QACH;MAEQ;IAGhB,oBACC,oBAAC;KACC,WAAW,GACT,oBACA,gBAAgB,cAAc,aAC9B,cACD;KAEA;MACU;IAGd,UAAU,OACT,oBAAC;KAAa,WAAW,GAAG,oEAAoE,gBAAgB;eAC7G;MACY,GACb;;IACU;GACT;;AAIb,MAAa,mBAAmB;AAChC,MAAa,sBAAsB;AACnC,MAAa,oBAAoB;AACjC,MAAa,oBAAoB;AACjC,MAAa,0BAA0B"}

package/dist/esm/components/edit-mode.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/edit-mode.d.ts
+declare function DesignEditMode({
+  children
+}: {
+  children: React.ReactNode;
+}): react_jsx_runtime0.JSX.Element;
+declare function useDesignEditMode(): boolean;
+//#endregion
+export { DesignEditMode, useDesignEditMode };
+//# sourceMappingURL=edit-mode.d.ts.map

package/dist/esm/components/edit-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-mode.d.ts","names":[],"sources":["../../../src/components/edit-mode.tsx"],"mappings":";;;iBAMgB,cAAA,CAAA;EAAiB;AAAA;EAAc,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA,IAAW,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAQ1D,iBAAA,CAAA"}

package/dist/esm/components/edit-mode.js

@@ -0,0 +1,20 @@
+"use client";
+
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+
+//#region src/components/edit-mode.tsx
+const DesignEditModeContext = createContext(false);
+function DesignEditMode({ children }) {
+	return /* @__PURE__ */ jsx(DesignEditModeContext.Provider, {
+		value: true,
+		children
+	});
+}
+function useDesignEditMode() {
+	return useContext(DesignEditModeContext);
+}
+
+//#endregion
+export { DesignEditMode, useDesignEditMode };
+//# sourceMappingURL=edit-mode.js.map

package/dist/esm/components/edit-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"edit-mode.js","names":[],"sources":["../../../src/components/edit-mode.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\nconst DesignEditModeContext = createContext(false);\n\nexport function DesignEditMode({ children }: { children: React.ReactNode }) {\n  return (\n    <DesignEditModeContext.Provider value={true}>\n      {children}\n    </DesignEditModeContext.Provider>\n  );\n}\n\nexport function useDesignEditMode(): boolean {\n  return useContext(DesignEditModeContext);\n}\n"],"mappings":";;;;;;AAIA,MAAM,wBAAwB,cAAc,MAAM;AAElD,SAAgB,eAAe,EAAE,YAA2C;AAC1E,QACE,oBAAC,sBAAsB;EAAS,OAAO;EACpC;GAC8B;;AAIrC,SAAgB,oBAA6B;AAC3C,QAAO,WAAW,sBAAsB"}

package/dist/esm/components/empty-state.d.ts

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/empty-state.d.ts
+type DesignEmptyStateProps = {
+  icon?: React.ElementType;
+  title?: string;
+  description?: string;
+  children?: React.ReactNode;
+  className?: string;
+};
+/**
+ * Centered "no data" placeholder. Show this inside a `DataGrid` via the
+ * `emptyState` prop, inside a chart when a query returns zero rows, or
+ * inside a card when a section has nothing to display.
+ *
+ * ```tsx
+ * <DesignEmptyState
+ *   icon={SearchIcon}
+ *   title="No results"
+ *   description="Try adjusting your filters."
+ * />
+ * ```
+ *
+ * Prefer this over a raw "No data" div — it handles spacing, typography,
+ * and the optional icon for you. `icon` is a component type, not a rendered node.
+ */
+declare function DesignEmptyState({
+  icon: Icon,
+  title,
+  description,
+  children,
+  className
+}: DesignEmptyStateProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignEmptyState, DesignEmptyStateProps };
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/esm/components/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","names":[],"sources":["../../../src/components/empty-state.tsx"],"mappings":";;;;KAKY,qBAAA;EACV,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,KAAA;EACA,WAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,SAAA;AAAA;;;;;;;;;;;;AAmBF;;;;;iBAAgB,gBAAA,CAAA;EACd,IAAA,EAAM,IAAA;EACN,KAAA;EACA,WAAA;EACA,QAAA;EACA;AAAA,GACC,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/empty-state.js

@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "@hexclave/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/empty-state.tsx
+/**
+* Centered "no data" placeholder. Show this inside a `DataGrid` via the
+* `emptyState` prop, inside a chart when a query returns zero rows, or
+* inside a card when a section has nothing to display.
+*
+* ```tsx
+* <DesignEmptyState
+*   icon={SearchIcon}
+*   title="No results"
+*   description="Try adjusting your filters."
+* />
+* ```
+*
+* Prefer this over a raw "No data" div — it handles spacing, typography,
+* and the optional icon for you. `icon` is a component type, not a rendered node.
+*/
+function DesignEmptyState({ icon: Icon, title = "No data available", description, children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col items-center justify-center py-12 px-6 text-center", className),
+		children: [
+			Icon && /* @__PURE__ */ jsx("div", {
+				className: "mb-4",
+				children: /* @__PURE__ */ jsx(Icon, { className: "h-10 w-10 text-muted-foreground/30" })
+			}),
+			/* @__PURE__ */ jsx("h3", {
+				className: "text-sm font-medium text-foreground",
+				children: title
+			}),
+			description && /* @__PURE__ */ jsx("p", {
+				className: "mt-1 text-xs text-muted-foreground max-w-[280px]",
+				children: description
+			}),
+			children && /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children
+			})
+		]
+	});
+}
+
+//#endregion
+export { DesignEmptyState };
+//# sourceMappingURL=empty-state.js.map

package/dist/esm/components/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","names":[],"sources":["../../../src/components/empty-state.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\nexport type DesignEmptyStateProps = {\n  icon?: React.ElementType,\n  title?: string,\n  description?: string,\n  children?: React.ReactNode,\n  className?: string,\n};\n\n/**\n * Centered \"no data\" placeholder. Show this inside a `DataGrid` via the\n * `emptyState` prop, inside a chart when a query returns zero rows, or\n * inside a card when a section has nothing to display.\n *\n * ```tsx\n * <DesignEmptyState\n *   icon={SearchIcon}\n *   title=\"No results\"\n *   description=\"Try adjusting your filters.\"\n * />\n * ```\n *\n * Prefer this over a raw \"No data\" div — it handles spacing, typography,\n * and the optional icon for you. `icon` is a component type, not a rendered node.\n */\nexport function DesignEmptyState({\n  icon: Icon,\n  title = \"No data available\",\n  description,\n  children,\n  className,\n}: DesignEmptyStateProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center py-12 px-6 text-center\",\n        className\n      )}\n    >\n      {Icon && (\n        <div className=\"mb-4\">\n          <Icon className=\"h-10 w-10 text-muted-foreground/30\" />\n        </div>\n      )}\n      <h3 className=\"text-sm font-medium text-foreground\">\n        {title}\n      </h3>\n      {description && (\n        <p className=\"mt-1 text-xs text-muted-foreground max-w-[280px]\">\n          {description}\n        </p>\n      )}\n      {children && (\n        <div className=\"mt-4\">\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,iBAAiB,EAC/B,MAAM,MACN,QAAQ,qBACR,aACA,UACA,aACwB;AACxB,QACE,qBAAC;EACC,WAAW,GACT,oEACA,UACD;;GAEA,QACC,oBAAC;IAAI,WAAU;cACb,oBAAC,QAAK,WAAU,uCAAuC;KACnD;GAER,oBAAC;IAAG,WAAU;cACX;KACE;GACJ,eACC,oBAAC;IAAE,WAAU;cACV;KACC;GAEL,YACC,oBAAC;IAAI,WAAU;IACZ;KACG;;GAEJ"}

package/dist/esm/components/input.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+
+//#region src/components/input.d.ts
+type DesignInputProps = {
+  prefixItem?: React.ReactNode;
+  leadingIcon?: React.ReactNode;
+  size?: "sm" | "md" | "lg";
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+declare const DesignInput: React.FC<{
+  prefixItem?: React.ReactNode;
+  leadingIcon?: React.ReactNode;
+  size?: "sm" | "md" | "lg";
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+  ref?: React.Ref<HTMLInputElement> | undefined;
+}>;
+//#endregion
+export { DesignInput, DesignInputProps };
+//# sourceMappingURL=input.d.ts.map

package/dist/esm/components/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","names":[],"sources":["../../../src/components/input.tsx"],"mappings":";;;KAOY,gBAAA;EACV,UAAA,GAAa,KAAA,CAAM,SAAA;EACnB,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,IAAA;AAAA,IACE,IAAA,CAAK,KAAA,CAAM,mBAAA,CAAoB,gBAAA;AAAA,cAEtB,WAAA,EAAW,KAAA,CAAA,EAAA;eALT,KAAA,CAAM,SAAA;gBACL,KAAA,CAAM,SAAA"}

package/dist/esm/components/input.js

@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "@hexclave/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRefIfNeeded } from "@hexclave/shared/dist/utils/react";
+import React from "react";
+
+//#region src/components/input.tsx
+const DesignInput = forwardRefIfNeeded(({ className, type, prefixItem, leadingIcon, size = "md", ...props }, ref) => {
+	const sizeClasses = size === "sm" ? "h-7 px-2 text-xs" : size === "lg" ? "h-10 px-4 text-sm" : "h-9 px-3 text-sm";
+	const baseClasses = cn("stack-scope flex w-full rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]", "file:border-0 file:bg-transparent file:text-sm file:font-medium", "placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1]", "disabled:cursor-not-allowed disabled:opacity-50", "transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06]", sizeClasses);
+	if (prefixItem) return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-row items-center flex-1 rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06] overflow-hidden transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1]",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("flex self-stretch items-center justify-center select-none text-muted-foreground/70 border-r border-black/[0.06] dark:border-white/[0.06] bg-black/[0.03] dark:bg-white/[0.02]", size === "sm" ? "px-2.5 text-xs" : size === "lg" ? "px-3.5 text-sm" : "px-3 text-sm"),
+			children: prefixItem
+		}), /* @__PURE__ */ jsx("input", {
+			type,
+			className: cn("stack-scope flex w-full bg-transparent", "file:border-0 file:bg-transparent file:text-sm file:font-medium", "placeholder:text-muted-foreground/50 focus-visible:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", sizeClasses, "rounded-none border-0 shadow-none ring-0 focus-visible:ring-0", className),
+			ref,
+			...props
+		})]
+	});
+	if (leadingIcon) return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex flex-row items-center flex-1",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute left-2.5 flex items-center text-muted-foreground",
+			children: leadingIcon
+		}), /* @__PURE__ */ jsx("input", {
+			type,
+			className: cn(baseClasses, "pl-8", className),
+			ref,
+			...props
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-row items-center flex-1",
+		children: /* @__PURE__ */ jsx("input", {
+			type,
+			className: cn(baseClasses, className),
+			ref,
+			...props
+		})
+	});
+});
+DesignInput.displayName = "DesignInput";
+
+//#endregion
+export { DesignInput };
+//# sourceMappingURL=input.js.map

package/dist/esm/components/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../../../src/components/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRefIfNeeded } from \"@stackframe/stack-shared/dist/utils/react\";\nimport React from \"react\";\n\nimport { cn } from \"@stackframe/stack-ui\";\n\nexport type DesignInputProps = {\n  prefixItem?: React.ReactNode,\n  leadingIcon?: React.ReactNode,\n  size?: \"sm\" | \"md\" | \"lg\",\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">;\n\nexport const DesignInput = forwardRefIfNeeded<HTMLInputElement, DesignInputProps>(\n  ({ className, type, prefixItem, leadingIcon, size = \"md\", ...props }, ref) => {\n    const sizeClasses = size === \"sm\"\n      ? \"h-7 px-2 text-xs\"\n      : size === \"lg\"\n        ? \"h-10 px-4 text-sm\"\n        : \"h-9 px-3 text-sm\";\n    const baseClasses = cn(\n      \"stack-scope flex w-full rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]\",\n      \"file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n      \"placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/[0.1]\",\n      \"disabled:cursor-not-allowed disabled:opacity-50\",\n      \"transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06]\",\n      sizeClasses\n    );\n\n    if (prefixItem) {\n      return (\n        <div className=\"flex flex-row items-center flex-1 rounded-xl border border-black/[0.08] dark:border-white/[0.06] bg-white/80 dark:bg-foreground/[0.03] shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06] overflow-hidden transition-all duration-150 hover:transition-none hover:bg-white dark:hover:bg-foreground/[0.06] focus-within:ring-1 focus-within:ring-foreground/[0.1]\">\n          <div className={cn(\n            \"flex self-stretch items-center justify-center select-none text-muted-foreground/70 border-r border-black/[0.06] dark:border-white/[0.06] bg-black/[0.03] dark:bg-white/[0.02]\",\n            size === \"sm\" ? \"px-2.5 text-xs\" : size === \"lg\" ? \"px-3.5 text-sm\" : \"px-3 text-sm\"\n          )}>\n            {prefixItem}\n          </div>\n          <input\n            type={type}\n            className={cn(\n              \"stack-scope flex w-full bg-transparent\",\n              \"file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n              \"placeholder:text-muted-foreground/50 focus-visible:outline-none\",\n              \"disabled:cursor-not-allowed disabled:opacity-50\",\n              sizeClasses,\n              \"rounded-none border-0 shadow-none ring-0 focus-visible:ring-0\",\n              className\n            )}\n            ref={ref}\n            {...props}\n          />\n        </div>\n      );\n    }\n\n    if (leadingIcon) {\n      return (\n        <div className=\"relative flex flex-row items-center flex-1\">\n          <div className=\"pointer-events-none absolute left-2.5 flex items-center text-muted-foreground\">\n            {leadingIcon}\n          </div>\n          <input\n            type={type}\n            className={cn(baseClasses, \"pl-8\", className)}\n            ref={ref}\n            {...props}\n          />\n        </div>\n      );\n    }\n\n    return (\n      <div className=\"flex flex-row items-center flex-1\">\n        <input\n          type={type}\n          className={cn(baseClasses, className)}\n          ref={ref}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nDesignInput.displayName = \"DesignInput\";\n"],"mappings":";;;;;;;;AAaA,MAAa,cAAc,oBACxB,EAAE,WAAW,MAAM,YAAY,aAAa,OAAO,MAAM,GAAG,SAAS,QAAQ;CAC5E,MAAM,cAAc,SAAS,OACzB,qBACA,SAAS,OACP,sBACA;CACN,MAAM,cAAc,GAClB,0LACA,mEACA,4HACA,mDACA,oGACA,YACD;AAED,KAAI,WACF,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GAAI,WAAW,GACd,iLACA,SAAS,OAAO,mBAAmB,SAAS,OAAO,mBAAmB,eACvE;aACE;IACG,EACN,oBAAC;GACO;GACN,WAAW,GACT,0CACA,mEACA,mEACA,mDACA,aACA,iEACA,UACD;GACI;GACL,GAAI;IACJ;GACE;AAIV,KAAI,YACF,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GAAI,WAAU;aACZ;IACG,EACN,oBAAC;GACO;GACN,WAAW,GAAG,aAAa,QAAQ,UAAU;GACxC;GACL,GAAI;IACJ;GACE;AAIV,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GACO;GACN,WAAW,GAAG,aAAa,UAAU;GAChC;GACL,GAAI;IACJ;GACE;EAGX;AACD,YAAY,cAAc"}

package/dist/esm/components/metric-card.d.ts

@@ -0,0 +1,55 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/metric-card.d.ts
+type DesignMetricCardGradient = "blue" | "cyan" | "purple" | "green" | "orange" | "default";
+type DesignMetricCardTrend = {
+  value: number;
+  direction: "up" | "down";
+  label?: string;
+};
+type DesignMetricCardProps = {
+  label: string;
+  value: string | number;
+  description?: string;
+  trend?: DesignMetricCardTrend;
+  icon?: React.ElementType;
+  gradient?: DesignMetricCardGradient;
+} & Omit<React.ComponentProps<"div">, "children">;
+/**
+ * KPI card for big-number metrics (users, revenue, signups, etc.).
+ * Use this instead of a plain `DesignCard` when the value is the focal point.
+ *
+ * ```tsx
+ * <DesignMetricCard
+ *   label="Total Users"
+ *   value="1,234"
+ *   description="+12% from last month"
+ *   trend={{ direction: "up", value: 12, label: "vs. last period" }}
+ *   icon={UsersIcon}
+ *   gradient="blue"
+ * />
+ * ```
+ *
+ * Notes:
+ * - `label` is the short caption (NOT `title`).
+ * - `value` can be a pre-formatted string ("1,234") or a number — prefer
+ *   strings so you control the format.
+ * - `description` is the subline (NOT `subtitle`).
+ * - `trend.value` is a NUMBER, not a pre-formatted "12%" string. The card
+ *   renders the arrow and formatting.
+ * - `icon` is a component type (e.g. `UsersIcon`), not a rendered node.
+ */
+declare function DesignMetricCard({
+  label,
+  value,
+  description,
+  trend,
+  icon: Icon,
+  gradient,
+  className,
+  ...props
+}: DesignMetricCardProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DesignMetricCard, DesignMetricCardProps, DesignMetricCardTrend };
+//# sourceMappingURL=metric-card.d.ts.map

package/dist/esm/components/metric-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-card.d.ts","names":[],"sources":["../../../src/components/metric-card.tsx"],"mappings":";;;;KAKK,wBAAA;AAAA,KAWO,qBAAA;EACV,KAAA;EACA,SAAA;EACA,KAAA;AAAA;AAAA,KAGU,qBAAA;EACV,KAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA,GAAQ,qBAAA;EACR,IAAA,GAAO,KAAA,CAAM,WAAA;EACb,QAAA,GAAW,wBAAA;AAAA,IACT,IAAA,CAAK,KAAA,CAAM,cAAA;;;;AAPf;;;;;;;;;;;;;;;;;;;;;iBAiCgB,gBAAA,CAAA;EACd,KAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA;EACA,IAAA,EAAM,IAAA;EACN,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/metric-card.js

@@ -0,0 +1,109 @@
+"use client";
+
+import { cn } from "@hexclave/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/metric-card.tsx
+const hoverTintClasses = new Map([
+	["blue", "group-hover:bg-blue-500/[0.03]"],
+	["cyan", "group-hover:bg-cyan-500/[0.03]"],
+	["purple", "group-hover:bg-purple-500/[0.03]"],
+	["green", "group-hover:bg-emerald-500/[0.03]"],
+	["orange", "group-hover:bg-orange-500/[0.03]"],
+	["default", "group-hover:bg-slate-500/[0.02]"]
+]);
+/**
+* KPI card for big-number metrics (users, revenue, signups, etc.).
+* Use this instead of a plain `DesignCard` when the value is the focal point.
+*
+* ```tsx
+* <DesignMetricCard
+*   label="Total Users"
+*   value="1,234"
+*   description="+12% from last month"
+*   trend={{ direction: "up", value: 12, label: "vs. last period" }}
+*   icon={UsersIcon}
+*   gradient="blue"
+* />
+* ```
+*
+* Notes:
+* - `label` is the short caption (NOT `title`).
+* - `value` can be a pre-formatted string ("1,234") or a number — prefer
+*   strings so you control the format.
+* - `description` is the subline (NOT `subtitle`).
+* - `trend.value` is a NUMBER, not a pre-formatted "12%" string. The card
+*   renders the arrow and formatting.
+* - `icon` is a component type (e.g. `UsersIcon`), not a rendered node.
+*/
+function DesignMetricCard({ label, value, description, trend, icon: Icon, gradient = "default", className, ...props }) {
+	const hoverTintClass = hoverTintClasses.get(gradient) ?? "group-hover:bg-slate-500/[0.02]";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none overflow-hidden", "ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]", "shadow-sm hover:shadow-md", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl" }),
+			/* @__PURE__ */ jsx("div", { className: cn("absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl", hoverTintClass) }),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative p-5",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex items-start justify-between gap-3",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex-1 min-w-0",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-center gap-2",
+								children: [Icon && /* @__PURE__ */ jsx("div", {
+									className: "p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]",
+									children: /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground" })
+								}), /* @__PURE__ */ jsx("span", {
+									className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider",
+									children: label
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "mt-3 flex items-baseline gap-2",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-3xl font-bold tabular-nums text-foreground",
+									children: typeof value === "number" ? value.toLocaleString() : value
+								}), trend && /* @__PURE__ */ jsxs("span", {
+									className: cn("inline-flex items-center gap-0.5 text-xs font-medium", trend.direction === "up" ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400"),
+									children: [
+										/* @__PURE__ */ jsx("svg", {
+											className: cn("h-3 w-3", trend.direction === "down" && "rotate-180"),
+											viewBox: "0 0 12 12",
+											fill: "none",
+											xmlns: "http://www.w3.org/2000/svg",
+											children: /* @__PURE__ */ jsx("path", {
+												d: "M6 2.5V9.5M6 2.5L3 5.5M6 2.5L9 5.5",
+												stroke: "currentColor",
+												strokeWidth: "1.5",
+												strokeLinecap: "round",
+												strokeLinejoin: "round"
+											})
+										}),
+										trend.value,
+										"%",
+										trend.label && /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground ml-0.5",
+											children: trend.label
+										})
+									]
+								})]
+							}),
+							description && /* @__PURE__ */ jsx("p", {
+								className: "mt-1 text-xs text-muted-foreground",
+								children: description
+							})
+						]
+					})
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { DesignMetricCard };
+//# sourceMappingURL=metric-card.js.map

package/dist/esm/components/metric-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-card.js","names":[],"sources":["../../../src/components/metric-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\ntype DesignMetricCardGradient = \"blue\" | \"cyan\" | \"purple\" | \"green\" | \"orange\" | \"default\";\n\nconst hoverTintClasses = new Map<DesignMetricCardGradient, string>([\n  [\"blue\", \"group-hover:bg-blue-500/[0.03]\"],\n  [\"cyan\", \"group-hover:bg-cyan-500/[0.03]\"],\n  [\"purple\", \"group-hover:bg-purple-500/[0.03]\"],\n  [\"green\", \"group-hover:bg-emerald-500/[0.03]\"],\n  [\"orange\", \"group-hover:bg-orange-500/[0.03]\"],\n  [\"default\", \"group-hover:bg-slate-500/[0.02]\"],\n]);\n\nexport type DesignMetricCardTrend = {\n  value: number,\n  direction: \"up\" | \"down\",\n  label?: string,\n};\n\nexport type DesignMetricCardProps = {\n  label: string,\n  value: string | number,\n  description?: string,\n  trend?: DesignMetricCardTrend,\n  icon?: React.ElementType,\n  gradient?: DesignMetricCardGradient,\n} & Omit<React.ComponentProps<\"div\">, \"children\">;\n\n/**\n * KPI card for big-number metrics (users, revenue, signups, etc.).\n * Use this instead of a plain `DesignCard` when the value is the focal point.\n *\n * ```tsx\n * <DesignMetricCard\n *   label=\"Total Users\"\n *   value=\"1,234\"\n *   description=\"+12% from last month\"\n *   trend={{ direction: \"up\", value: 12, label: \"vs. last period\" }}\n *   icon={UsersIcon}\n *   gradient=\"blue\"\n * />\n * ```\n *\n * Notes:\n * - `label` is the short caption (NOT `title`).\n * - `value` can be a pre-formatted string (\"1,234\") or a number — prefer\n *   strings so you control the format.\n * - `description` is the subline (NOT `subtitle`).\n * - `trend.value` is a NUMBER, not a pre-formatted \"12%\" string. The card\n *   renders the arrow and formatting.\n * - `icon` is a component type (e.g. `UsersIcon`), not a rendered node.\n */\nexport function DesignMetricCard({\n  label,\n  value,\n  description,\n  trend,\n  icon: Icon,\n  gradient = \"default\",\n  className,\n  ...props\n}: DesignMetricCardProps) {\n  const hoverTintClass = hoverTintClasses.get(gradient) ?? \"group-hover:bg-slate-500/[0.02]\";\n\n  return (\n    <div\n      className={cn(\n        \"group relative rounded-2xl bg-white/90 dark:bg-background/60 backdrop-blur-xl transition-all duration-150 hover:transition-none overflow-hidden\",\n        \"ring-1 ring-black/[0.06] hover:ring-black/[0.1] dark:ring-white/[0.06] dark:hover:ring-white/[0.1]\",\n        \"shadow-sm hover:shadow-md\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"absolute inset-0 bg-gradient-to-br from-foreground/[0.04] dark:from-foreground/[0.02] to-transparent pointer-events-none rounded-2xl\" />\n      <div\n        className={cn(\n          \"absolute inset-0 transition-colors duration-150 group-hover:transition-none pointer-events-none rounded-2xl\",\n          hoverTintClass\n        )}\n      />\n      <div className=\"relative p-5\">\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex-1 min-w-0\">\n            <div className=\"flex items-center gap-2\">\n              {Icon && (\n                <div className=\"p-1.5 rounded-lg bg-foreground/[0.06] dark:bg-foreground/[0.04]\">\n                  <Icon className=\"h-3.5 w-3.5 text-foreground/70 dark:text-muted-foreground\" />\n                </div>\n              )}\n              <span className=\"text-xs font-semibold text-muted-foreground uppercase tracking-wider\">\n                {label}\n              </span>\n            </div>\n            <div className=\"mt-3 flex items-baseline gap-2\">\n              <span className=\"text-3xl font-bold tabular-nums text-foreground\">\n                {typeof value === \"number\" ? value.toLocaleString() : value}\n              </span>\n              {trend && (\n                <span\n                  className={cn(\n                    \"inline-flex items-center gap-0.5 text-xs font-medium\",\n                    trend.direction === \"up\"\n                      ? \"text-emerald-600 dark:text-emerald-400\"\n                      : \"text-red-600 dark:text-red-400\"\n                  )}\n                >\n                  <svg\n                    className={cn(\"h-3 w-3\", trend.direction === \"down\" && \"rotate-180\")}\n                    viewBox=\"0 0 12 12\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                  >\n                    <path\n                      d=\"M6 2.5V9.5M6 2.5L3 5.5M6 2.5L9 5.5\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                  {trend.value}%\n                  {trend.label && (\n                    <span className=\"text-muted-foreground ml-0.5\">{trend.label}</span>\n                  )}\n                </span>\n              )}\n            </div>\n            {description && (\n              <p className=\"mt-1 text-xs text-muted-foreground\">\n                {description}\n              </p>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAM,mBAAmB,IAAI,IAAsC;CACjE,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,QAAQ,iCAAiC;CAC1C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,SAAS,oCAAoC;CAC9C,CAAC,UAAU,mCAAmC;CAC9C,CAAC,WAAW,kCAAkC;CAC/C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;AAyCF,SAAgB,iBAAiB,EAC/B,OACA,OACA,aACA,OACA,MAAM,MACN,WAAW,WACX,WACA,GAAG,SACqB;CACxB,MAAM,iBAAiB,iBAAiB,IAAI,SAAS,IAAI;AAEzD,QACE,qBAAC;EACC,WAAW,GACT,mJACA,sGACA,6BACA,UACD;EACD,GAAI;;GAEJ,oBAAC,SAAI,WAAU,yIAAyI;GACxJ,oBAAC,SACC,WAAW,GACT,+GACA,eACD,GACD;GACF,oBAAC;IAAI,WAAU;cACb,oBAAC;KAAI,WAAU;eACb,qBAAC;MAAI,WAAU;;OACb,qBAAC;QAAI,WAAU;mBACZ,QACC,oBAAC;SAAI,WAAU;mBACb,oBAAC,QAAK,WAAU,8DAA8D;UAC1E,EAER,oBAAC;SAAK,WAAU;mBACb;UACI;SACH;OACN,qBAAC;QAAI,WAAU;mBACb,oBAAC;SAAK,WAAU;mBACb,OAAO,UAAU,WAAW,MAAM,gBAAgB,GAAG;UACjD,EACN,SACC,qBAAC;SACC,WAAW,GACT,wDACA,MAAM,cAAc,OAChB,2CACA,iCACL;;UAED,oBAAC;WACC,WAAW,GAAG,WAAW,MAAM,cAAc,UAAU,aAAa;WACpE,SAAQ;WACR,MAAK;WACL,OAAM;qBAEN,oBAAC;YACC,GAAE;YACF,QAAO;YACP,aAAY;YACZ,eAAc;YACd,gBAAe;aACf;YACE;UACL,MAAM;UAAM;UACZ,MAAM,SACL,oBAAC;WAAK,WAAU;qBAAgC,MAAM;YAAa;;UAEhE;SAEL;OACL,eACC,oBAAC;QAAE,WAAU;kBACV;SACC;;OAEF;MACF;KACF;;GACF"}