@carefully-built/widgets 0.1.0

package/README.md

@@ -0,0 +1,11 @@
+# @carefully-built/widgets
+
+Reusable dashboard and detail widgets for Carefully Built SaaS apps.
+
+## Components
+
+- `WidgetEmptyState`: dashed empty-state panel with optional action.
+- `EntityInfoWidget`: compact bordered info widget with icon, title, actions, content, and empty-state support.
+- `DashboardWidget`: dashboard card shell that keeps icon/title visible while loading and skeletonizes only the value/body.
+
+Use this package when a new app needs the same SaaS widget chrome without rewriting loading, empty, title, icon, and action behavior.

package/dist/index.d.mts

@@ -0,0 +1,87 @@
+import { LucideIcon } from "lucide-react";
+import { ReactNode } from "react";
+
+//#region src/widget-empty-state.d.ts
+interface WidgetEmptyStateAction {
+  readonly label: string;
+  readonly href?: string;
+  readonly onClick?: () => void;
+  readonly target?: "_blank" | "_self" | "_parent" | "_top";
+  readonly rel?: string;
+  readonly icon?: ReactNode;
+  readonly disabled?: boolean;
+}
+interface WidgetEmptyStateConfig {
+  readonly title: string;
+  readonly description: string;
+  readonly icon?: LucideIcon;
+  readonly minHeightClassName?: string;
+  readonly className?: string;
+  readonly action?: WidgetEmptyStateAction;
+}
+interface WidgetEmptyStateProps extends WidgetEmptyStateConfig {
+  readonly icon: LucideIcon;
+}
+declare function WidgetEmptyState({
+  icon: Icon,
+  title,
+  description,
+  minHeightClassName,
+  className,
+  action
+}: WidgetEmptyStateProps): React.ReactElement;
+//#endregion
+//#region src/dashboard-widget.d.ts
+interface DashboardWidgetProps {
+  readonly icon: LucideIcon;
+  readonly title: string;
+  readonly value?: ReactNode;
+  readonly actions?: ReactNode;
+  readonly children?: ReactNode;
+  readonly className?: string;
+  readonly contentClassName?: string;
+  readonly isLoading?: boolean;
+  readonly loadingFallback?: ReactNode;
+  readonly isEmpty?: boolean;
+  readonly emptyState?: WidgetEmptyStateConfig;
+}
+declare function DashboardWidget({
+  icon,
+  title,
+  value,
+  actions,
+  children,
+  className,
+  contentClassName,
+  isLoading,
+  loadingFallback,
+  isEmpty,
+  emptyState
+}: DashboardWidgetProps): React.ReactElement;
+//#endregion
+//#region src/entity-info-widget.d.ts
+interface EntityInfoWidgetProps {
+  readonly icon: LucideIcon;
+  readonly name: string;
+  readonly children: ReactNode;
+  readonly className?: string;
+  readonly contentClassName?: string;
+  readonly nameActions?: ReactNode;
+  readonly headerActions?: ReactNode;
+  readonly isEmpty?: boolean;
+  readonly emptyState?: WidgetEmptyStateConfig;
+}
+declare function EntityInfoWidget({
+  icon: Icon,
+  name,
+  children,
+  className,
+  contentClassName,
+  nameActions,
+  headerActions,
+  isEmpty,
+  emptyState
+}: EntityInfoWidgetProps): React.ReactElement;
+//#endregion
+export { DashboardWidget, type DashboardWidgetProps, EntityInfoWidget, type EntityInfoWidgetProps, WidgetEmptyState, type WidgetEmptyStateAction, type WidgetEmptyStateConfig, type WidgetEmptyStateProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/widget-empty-state.tsx","../src/dashboard-widget.tsx","../src/entity-info-widget.tsx"],"sourcesContent":[],"mappings":";;;;UAOiB,sBAAA;;EAAA,SAAA,IAAA,CAAA,EAAA,MAAA;EAUA,SAAA,OAAA,CAAA,EAAA,GAAA,GAAsB,IAAA;EAStB,SAAA,MAAA,CAAA,EAAA,QAAsB,GAAA,OACtB,GAAA,SAD8B,GAAA,MAAA;EAI/B,SAAA,GAAA,CAAA,EAAA,MAAgB;EACxB,SAAA,IAAA,CAAA,EAlBU,SAkBV;EACN,SAAA,QAAA,CAAA,EAAA,OAAA;;AAEA,UAjBe,sBAAA,CAiBf;EACA,SAAA,KAAA,EAAA,MAAA;EACA,SAAA,WAAA,EAAA,MAAA;EACC,SAAA,IAAA,CAAA,EAjBe,UAiBf;EAAwB,SAAM,kBAAA,CAAA,EAAA,MAAA;EAAY,SAAA,SAAA,CAAA,EAAA,MAAA;oBAdzB;;UAGH,qBAAA,SAA8B;EChB9B,SAAA,IAAA,EDiBA,UCjBoB;;AAGlB,iBDiBH,gBAAA,CCjBG;EAAA,IAAA,EDkBX,IClBW;EAAA,KAAA;EAAA,WAAA;EAAA,kBAAA;EAAA,SAAA;EAAA;AAAA,CAAA,EDwBhB,qBCxBgB,CAAA,EDwBQ,KAAA,CAAM,YCxBd;;;UAHF,oBAAA;EDHA,SAAA,IAAA,ECIA,UDJsB;EAUtB,SAAA,KAAA,EAAA,MAAA;EASA,SAAA,KAAA,CAAA,ECbE,SDaoB;EAIvB,SAAA,OAAA,CAAA,EChBK,SDgBW;EACxB,SAAA,QAAA,CAAA,EChBc,SDgBd;EACN,SAAA,SAAA,CAAA,EAAA,MAAA;EACA,SAAA,gBAAA,CAAA,EAAA,MAAA;EACA,SAAA,SAAA,CAAA,EAAA,OAAA;EACA,SAAA,eAAA,CAAA,EChB2B,SDgB3B;EACA,SAAA,OAAA,CAAA,EAAA,OAAA;EACC,SAAA,UAAA,CAAA,EChBqB,sBDgBrB;;AAA0C,iBCb7B,eAAA,CDa6B;EAAA,IAAA;EAAA,KAAA;EAAA,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,SAAA;EAAA,eAAA;EAAA,OAAA;EAAA;AAAA,CAAA,ECD1C,oBDC0C,CAAA,ECDnB,KAAA,CAAM,YDCa;;;UE3B5B,qBAAA;EFHA,SAAA,IAAA,EEIA,UFJsB;EAUtB,SAAA,IAAA,EAAA,MAAA;EASA,SAAA,QAAA,EEbI,SFakB;EAIvB,SAAA,SAAA,CAAgB,EAAA,MAAA;EACxB,SAAA,gBAAA,CAAA,EAAA,MAAA;EACN,SAAA,WAAA,CAAA,EEhBuB,SFgBvB;EACA,SAAA,aAAA,CAAA,EEhByB,SFgBzB;EACA,SAAA,OAAA,CAAA,EAAA,OAAA;EACA,SAAA,UAAA,CAAA,EEhBsB,sBFgBtB;;AAEC,iBEfa,gBAAA,CFeb;EAAA,IAAA,EEdK,IFcL;EAAA,IAAA;EAAA,QAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,WAAA;EAAA,aAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EELA,qBFKA,CAAA,EELwB,KAAA,CAAM,YFK9B"}

package/dist/index.mjs

@@ -0,0 +1,123 @@
+import { Button, Skeleton, cn } from "@carefully-built/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/widget-empty-state.tsx
+function WidgetEmptyState({ icon: Icon, title, description, minHeightClassName, className, action }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex h-full w-full items-center justify-center rounded-[16px] border border-dashed border-border/70 px-4 py-8 text-center", minHeightClassName ?? "min-h-[248px]", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "max-w-[280px] space-y-2",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "text-muted-foreground flex justify-center",
+					children: /* @__PURE__ */ jsx(Icon, {
+						className: "size-5",
+						strokeWidth: 1.75
+					})
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-foreground text-sm font-medium",
+					children: title
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs leading-5",
+					children: description
+				}),
+				action ? action.href ? /* @__PURE__ */ jsx(Button, {
+					asChild: true,
+					variant: "outline",
+					size: "sm",
+					className: "mt-4",
+					children: /* @__PURE__ */ jsxs("a", {
+						href: action.href,
+						target: action.target ?? "_self",
+						rel: action.rel,
+						children: [action.icon ? /* @__PURE__ */ jsx("span", {
+							className: "inline-flex items-center",
+							children: action.icon
+						}) : null, action.label]
+					})
+				}) : /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					variant: "outline",
+					size: "sm",
+					className: "mt-4",
+					onClick: action.onClick,
+					disabled: action.disabled,
+					children: [action.icon ? /* @__PURE__ */ jsx("span", {
+						className: "inline-flex items-center",
+						children: action.icon
+					}) : null, action.label]
+				}) : null
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/entity-info-widget.tsx
+function EntityInfoWidget({ icon: Icon, name, children, className, contentClassName, nameActions, headerActions, isEmpty = false, emptyState }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: cn("border-border flex min-w-0 flex-col gap-3 rounded-[12px] border bg-background p-1.5", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-wrap items-center justify-between gap-3 px-0.5 sm:flex-nowrap",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "text-muted-foreground flex min-w-0 items-center gap-[3px] text-[13px]",
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						className: "size-3.5 shrink-0",
+						strokeWidth: 1.75
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: name
+					}),
+					nameActions ? /* @__PURE__ */ jsx("span", {
+						className: "ml-1 shrink-0",
+						children: nameActions
+					}) : null
+				]
+			}), headerActions ? /* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 max-w-full items-center gap-2 sm:shrink-0",
+				children: headerActions
+			}) : null]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("min-w-0", contentClassName),
+			children: isEmpty && emptyState ? /* @__PURE__ */ jsx(WidgetEmptyState, {
+				icon: emptyState.icon ?? Icon,
+				title: emptyState.title,
+				description: emptyState.description,
+				minHeightClassName: emptyState.minHeightClassName,
+				className: emptyState.className,
+				action: emptyState.action
+			}) : children
+		})]
+	});
+}
+
+//#endregion
+//#region src/dashboard-widget.tsx
+function DashboardWidget({ icon, title, value, actions, children, className, contentClassName, isLoading = false, loadingFallback, isEmpty = false, emptyState }) {
+	const shouldRenderEmptyState = !isLoading && value === void 0 && isEmpty;
+	let defaultContentClassName = "pt-1";
+	if (value !== void 0) defaultContentClassName = "px-0.5 pt-2 pb-0.5";
+	else if (shouldRenderEmptyState) defaultContentClassName = "flex min-h-0 flex-1 pt-1";
+	return /* @__PURE__ */ jsx(EntityInfoWidget, {
+		icon,
+		name: title,
+		className: cn("h-full min-w-0 gap-0", className),
+		contentClassName: cn(defaultContentClassName, contentClassName),
+		headerActions: actions,
+		isEmpty: shouldRenderEmptyState,
+		emptyState: value === void 0 ? emptyState : void 0,
+		children: value !== void 0 ? /* @__PURE__ */ jsx("div", {
+			className: "text-foreground text-[24px] leading-none font-medium tracking-[-0.02em]",
+			"aria-busy": isLoading || void 0,
+			children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-16" }) : value
+		}) : isLoading ? loadingFallback ?? /* @__PURE__ */ jsx(Skeleton, { className: "h-[264px] w-full rounded-[10px]" }) : children
+	});
+}
+
+//#endregion
+export { DashboardWidget, EntityInfoWidget, WidgetEmptyState };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/widget-empty-state.tsx","../src/entity-info-widget.tsx","../src/dashboard-widget.tsx"],"sourcesContent":["\"use client\";\n\nimport type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\n\nimport { Button, cn } from \"@carefully-built/ui\";\n\nexport interface WidgetEmptyStateAction {\n  readonly label: string;\n  readonly href?: string;\n  readonly onClick?: () => void;\n  readonly target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n  readonly rel?: string;\n  readonly icon?: ReactNode;\n  readonly disabled?: boolean;\n}\n\nexport interface WidgetEmptyStateConfig {\n  readonly title: string;\n  readonly description: string;\n  readonly icon?: LucideIcon;\n  readonly minHeightClassName?: string;\n  readonly className?: string;\n  readonly action?: WidgetEmptyStateAction;\n}\n\nexport interface WidgetEmptyStateProps extends WidgetEmptyStateConfig {\n  readonly icon: LucideIcon;\n}\n\nexport function WidgetEmptyState({\n  icon: Icon,\n  title,\n  description,\n  minHeightClassName,\n  className,\n  action,\n}: WidgetEmptyStateProps): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex h-full w-full items-center justify-center rounded-[16px] border border-dashed border-border/70 px-4 py-8 text-center\",\n        minHeightClassName ?? \"min-h-[248px]\",\n        className,\n      )}\n    >\n      <div className=\"max-w-[280px] space-y-2\">\n        <div className=\"text-muted-foreground flex justify-center\">\n          <Icon className=\"size-5\" strokeWidth={1.75} />\n        </div>\n        <p className=\"text-foreground text-sm font-medium\">{title}</p>\n        <p className=\"text-muted-foreground text-xs leading-5\">{description}</p>\n        {action ? (\n          action.href ? (\n            <Button asChild variant=\"outline\" size=\"sm\" className=\"mt-4\">\n              <a href={action.href} target={action.target ?? \"_self\"} rel={action.rel}>\n                {action.icon ? <span className=\"inline-flex items-center\">{action.icon}</span> : null}\n                {action.label}\n              </a>\n            </Button>\n          ) : (\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"mt-4\"\n              onClick={action.onClick}\n              disabled={action.disabled}\n            >\n              {action.icon ? <span className=\"inline-flex items-center\">{action.icon}</span> : null}\n              {action.label}\n            </Button>\n          )\n        ) : null}\n      </div>\n    </div>\n  );\n}\n","\"use client\";\n\nimport type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@carefully-built/ui\";\n\nimport { WidgetEmptyState } from \"./widget-empty-state\";\nimport type { WidgetEmptyStateConfig } from \"./widget-empty-state\";\n\nexport interface EntityInfoWidgetProps {\n  readonly icon: LucideIcon;\n  readonly name: string;\n  readonly children: ReactNode;\n  readonly className?: string;\n  readonly contentClassName?: string;\n  readonly nameActions?: ReactNode;\n  readonly headerActions?: ReactNode;\n  readonly isEmpty?: boolean;\n  readonly emptyState?: WidgetEmptyStateConfig;\n}\n\nexport function EntityInfoWidget({\n  icon: Icon,\n  name,\n  children,\n  className,\n  contentClassName,\n  nameActions,\n  headerActions,\n  isEmpty = false,\n  emptyState,\n}: EntityInfoWidgetProps): React.ReactElement {\n  return (\n    <section\n      className={cn(\n        \"border-border flex min-w-0 flex-col gap-3 rounded-[12px] border bg-background p-1.5\",\n        className,\n      )}\n    >\n      <div className=\"flex min-w-0 flex-wrap items-center justify-between gap-3 px-0.5 sm:flex-nowrap\">\n        <div className=\"text-muted-foreground flex min-w-0 items-center gap-[3px] text-[13px]\">\n          <Icon className=\"size-3.5 shrink-0\" strokeWidth={1.75} />\n          <span className=\"truncate\">{name}</span>\n          {nameActions ? <span className=\"ml-1 shrink-0\">{nameActions}</span> : null}\n        </div>\n        {headerActions ? (\n          <div className=\"flex min-w-0 max-w-full items-center gap-2 sm:shrink-0\">\n            {headerActions}\n          </div>\n        ) : null}\n      </div>\n      <div className={cn(\"min-w-0\", contentClassName)}>\n        {isEmpty && emptyState ? (\n          <WidgetEmptyState\n            icon={emptyState.icon ?? Icon}\n            title={emptyState.title}\n            description={emptyState.description}\n            minHeightClassName={emptyState.minHeightClassName}\n            className={emptyState.className}\n            action={emptyState.action}\n          />\n        ) : (\n          children\n        )}\n      </div>\n    </section>\n  );\n}\n","\"use client\";\n\nimport type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\n\nimport { Skeleton, cn } from \"@carefully-built/ui\";\n\nimport { EntityInfoWidget } from \"./entity-info-widget\";\nimport type { WidgetEmptyStateConfig } from \"./widget-empty-state\";\n\nexport interface DashboardWidgetProps {\n  readonly icon: LucideIcon;\n  readonly title: string;\n  readonly value?: ReactNode;\n  readonly actions?: ReactNode;\n  readonly children?: ReactNode;\n  readonly className?: string;\n  readonly contentClassName?: string;\n  readonly isLoading?: boolean;\n  readonly loadingFallback?: ReactNode;\n  readonly isEmpty?: boolean;\n  readonly emptyState?: WidgetEmptyStateConfig;\n}\n\nexport function DashboardWidget({\n  icon,\n  title,\n  value,\n  actions,\n  children,\n  className,\n  contentClassName,\n  isLoading = false,\n  loadingFallback,\n  isEmpty = false,\n  emptyState,\n}: DashboardWidgetProps): React.ReactElement {\n  const shouldRenderEmptyState = !isLoading && value === undefined && isEmpty;\n  let defaultContentClassName = \"pt-1\";\n\n  if (value !== undefined) {\n    defaultContentClassName = \"px-0.5 pt-2 pb-0.5\";\n  } else if (shouldRenderEmptyState) {\n    defaultContentClassName = \"flex min-h-0 flex-1 pt-1\";\n  }\n\n  return (\n    <EntityInfoWidget\n      icon={icon}\n      name={title}\n      className={cn(\"h-full min-w-0 gap-0\", className)}\n      contentClassName={cn(defaultContentClassName, contentClassName)}\n      headerActions={actions}\n      isEmpty={shouldRenderEmptyState}\n      emptyState={value === undefined ? emptyState : undefined}\n    >\n      {value !== undefined ? (\n        <div\n          className=\"text-foreground text-[24px] leading-none font-medium tracking-[-0.02em]\"\n          aria-busy={isLoading || undefined}\n        >\n          {isLoading ? <Skeleton className=\"h-7 w-16\" /> : value}\n        </div>\n      ) : isLoading ? (\n        (loadingFallback ?? <Skeleton className=\"h-[264px] w-full rounded-[10px]\" />)\n      ) : (\n        children\n      )}\n    </EntityInfoWidget>\n  );\n}\n"],"mappings":";;;;AA8BA,SAAgB,iBAAiB,EAC/B,MAAM,MACN,OACA,aACA,oBACA,WACA,UAC4C;AAC5C,QACE,oBAAC;EACC,WAAW,GACT,6HACA,sBAAsB,iBACtB,UACD;YAED,qBAAC;GAAI,WAAU;;IACb,oBAAC;KAAI,WAAU;eACb,oBAAC;MAAK,WAAU;MAAS,aAAa;OAAQ;MAC1C;IACN,oBAAC;KAAE,WAAU;eAAuC;MAAU;IAC9D,oBAAC;KAAE,WAAU;eAA2C;MAAgB;IACvE,SACC,OAAO,OACL,oBAAC;KAAO;KAAQ,SAAQ;KAAU,MAAK;KAAK,WAAU;eACpD,qBAAC;MAAE,MAAM,OAAO;MAAM,QAAQ,OAAO,UAAU;MAAS,KAAK,OAAO;iBACjE,OAAO,OAAO,oBAAC;OAAK,WAAU;iBAA4B,OAAO;QAAY,GAAG,MAChF,OAAO;OACN;MACG,GAET,qBAAC;KACC,MAAK;KACL,SAAQ;KACR,MAAK;KACL,WAAU;KACV,SAAS,OAAO;KAChB,UAAU,OAAO;gBAEhB,OAAO,OAAO,oBAAC;MAAK,WAAU;gBAA4B,OAAO;OAAY,GAAG,MAChF,OAAO;MACD,GAET;;IACA;GACF;;;;;ACrDV,SAAgB,iBAAiB,EAC/B,MAAM,MACN,MACA,UACA,WACA,kBACA,aACA,eACA,UAAU,OACV,cAC4C;AAC5C,QACE,qBAAC;EACC,WAAW,GACT,uFACA,UACD;aAED,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;;KACb,oBAAC;MAAK,WAAU;MAAoB,aAAa;OAAQ;KACzD,oBAAC;MAAK,WAAU;gBAAY;OAAY;KACvC,cAAc,oBAAC;MAAK,WAAU;gBAAiB;OAAmB,GAAG;;KAClE,EACL,gBACC,oBAAC;IAAI,WAAU;cACZ;KACG,GACJ;IACA,EACN,oBAAC;GAAI,WAAW,GAAG,WAAW,iBAAiB;aAC5C,WAAW,aACV,oBAAC;IACC,MAAM,WAAW,QAAQ;IACzB,OAAO,WAAW;IAClB,aAAa,WAAW;IACxB,oBAAoB,WAAW;IAC/B,WAAW,WAAW;IACtB,QAAQ,WAAW;KACnB,GAEF;IAEE;GACE;;;;;AC1Cd,SAAgB,gBAAgB,EAC9B,MACA,OACA,OACA,SACA,UACA,WACA,kBACA,YAAY,OACZ,iBACA,UAAU,OACV,cAC2C;CAC3C,MAAM,yBAAyB,CAAC,aAAa,UAAU,UAAa;CACpE,IAAI,0BAA0B;AAE9B,KAAI,UAAU,OACZ,2BAA0B;UACjB,uBACT,2BAA0B;AAG5B,QACE,oBAAC;EACO;EACN,MAAM;EACN,WAAW,GAAG,wBAAwB,UAAU;EAChD,kBAAkB,GAAG,yBAAyB,iBAAiB;EAC/D,eAAe;EACf,SAAS;EACT,YAAY,UAAU,SAAY,aAAa;YAE9C,UAAU,SACT,oBAAC;GACC,WAAU;GACV,aAAW,aAAa;aAEvB,YAAY,oBAAC,YAAS,WAAU,aAAa,GAAG;IAC7C,GACJ,YACD,mBAAmB,oBAAC,YAAS,WAAU,oCAAoC,GAE5E;GAEe"}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@carefully-built/widgets",
+  "version": "0.1.0",
+  "description": "Reusable SaaS dashboard and detail widgets for Carefully Built apps.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Alessandro Dodi",
+  "homepage": "https://github.com/AlessandroDodi/carefully-built-saas-kit#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AlessandroDodi/carefully-built-saas-kit.git",
+    "directory": "packages/widgets"
+  },
+  "bugs": {
+    "url": "https://github.com/AlessandroDodi/carefully-built-saas-kit/issues"
+  },
+  "keywords": [
+    "react",
+    "widgets",
+    "dashboard",
+    "saas"
+  ],
+  "sideEffects": false,
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown src/index.ts --format esm --dts",
+    "prepublishOnly": "bun run typecheck && bun run build",
+    "typecheck": "tsc --noEmit"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@carefully-built/ui": ">=0.1.15",
+    "lucide-react": ">=0.400.0 || >=1.0.0",
+    "react": ">=18.2.0 || >=19.0.0",
+    "react-dom": ">=18.2.0 || >=19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@carefully-built/ui": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@carefully-built/ui": "workspace:*",
+    "lucide-react": "^1.8.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
+  }
+}