@carefully-built/widgets 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.mjs +3 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -4,6 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
4
4
|
//#region src/widget-empty-state.tsx
|
|
5
5
|
function WidgetEmptyState({ icon: Icon, title, description, minHeightClassName, className, action }) {
|
|
6
6
|
return /* @__PURE__ */ jsx("div", {
|
|
7
|
+
"data-empty-state": "",
|
|
7
8
|
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),
|
|
8
9
|
children: /* @__PURE__ */ jsxs("div", {
|
|
9
10
|
className: "max-w-[280px] space-y-2",
|
|
@@ -58,6 +59,7 @@ function WidgetEmptyState({ icon: Icon, title, description, minHeightClassName,
|
|
|
58
59
|
//#region src/entity-info-widget.tsx
|
|
59
60
|
function EntityInfoWidget({ icon: Icon, name, children, className, contentClassName, nameActions, headerActions, isEmpty = false, emptyState }) {
|
|
60
61
|
return /* @__PURE__ */ jsxs("section", {
|
|
62
|
+
"data-slot": "widget",
|
|
61
63
|
className: cn("border-border flex min-w-0 flex-col gap-3 rounded-[12px] border bg-background p-1.5", className),
|
|
62
64
|
children: [/* @__PURE__ */ jsxs("div", {
|
|
63
65
|
className: "flex min-w-0 flex-wrap items-center justify-between gap-3 px-0.5 sm:flex-nowrap",
|
|
@@ -111,6 +113,7 @@ function DashboardWidget({ icon, title, value, actions, children, className, con
|
|
|
111
113
|
isEmpty: shouldRenderEmptyState,
|
|
112
114
|
emptyState: value === void 0 ? emptyState : void 0,
|
|
113
115
|
children: value !== void 0 ? /* @__PURE__ */ jsx("div", {
|
|
116
|
+
"data-slot": "widget-value",
|
|
114
117
|
className: "text-foreground text-[24px] leading-none font-medium tracking-[-0.02em]",
|
|
115
118
|
"aria-busy": isLoading || void 0,
|
|
116
119
|
children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-16" }) : value
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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;;;;;
|
|
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 data-empty-state=\"\"\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 data-slot=\"widget\"\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 data-slot=\"widget-value\"\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,oBAAiB;EACjB,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;;;;;ACtDV,SAAgB,iBAAiB,EAC/B,MAAM,MACN,MACA,UACA,WACA,kBACA,aACA,eACA,UAAU,OACV,cAC4C;AAC5C,QACE,qBAAC;EACC,aAAU;EACV,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;;;;;AC3Cd,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,aAAU;GACV,WAAU;GACV,aAAW,aAAa;aAEvB,YAAY,oBAAC,YAAS,WAAU,aAAa,GAAG;IAC7C,GACJ,YACD,mBAAmB,oBAAC,YAAS,WAAU,oCAAoC,GAE5E;GAEe"}
|