@carefully-built/widgets 0.1.2 → 0.1.3
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.d.mts +27 -1
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +79 -2
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -83,5 +83,31 @@ declare function EntityInfoWidget({
|
|
|
83
83
|
emptyState
|
|
84
84
|
}: EntityInfoWidgetProps): React.ReactElement;
|
|
85
85
|
//#endregion
|
|
86
|
-
|
|
86
|
+
//#region src/period-select.d.ts
|
|
87
|
+
declare const PERIOD_PRESETS: readonly ["today", "7d", "30d", "90d", "month", "year"];
|
|
88
|
+
type PeriodPreset = (typeof PERIOD_PRESETS)[number];
|
|
89
|
+
interface PeriodRange {
|
|
90
|
+
/** Inclusive start, epoch ms. */
|
|
91
|
+
readonly from: number;
|
|
92
|
+
/** Exclusive end, epoch ms. */
|
|
93
|
+
readonly to: number;
|
|
94
|
+
}
|
|
95
|
+
declare function isPeriodPreset(value: string): value is PeriodPreset;
|
|
96
|
+
/** The time range a preset covers, in the browser's time zone, ending tomorrow at 00:00. */
|
|
97
|
+
declare function resolvePeriodRange(preset: PeriodPreset, now?: Date): PeriodRange;
|
|
98
|
+
interface PeriodSelectProps {
|
|
99
|
+
readonly value: PeriodPreset;
|
|
100
|
+
readonly onChange: (value: PeriodPreset) => void;
|
|
101
|
+
readonly presets?: readonly PeriodPreset[];
|
|
102
|
+
readonly className?: string;
|
|
103
|
+
}
|
|
104
|
+
/** Dashboard period filter: the same presets, labels and ranges in every app. */
|
|
105
|
+
declare function PeriodSelect({
|
|
106
|
+
value,
|
|
107
|
+
onChange,
|
|
108
|
+
presets,
|
|
109
|
+
className
|
|
110
|
+
}: PeriodSelectProps): React.ReactElement;
|
|
111
|
+
//#endregion
|
|
112
|
+
export { DashboardWidget, type DashboardWidgetProps, EntityInfoWidget, type EntityInfoWidgetProps, PERIOD_PRESETS, type PeriodPreset, type PeriodRange, PeriodSelect, WidgetEmptyState, type WidgetEmptyStateAction, type WidgetEmptyStateConfig, type WidgetEmptyStateProps, isPeriodPreset, resolvePeriodRange };
|
|
87
113
|
//# sourceMappingURL=index.d.mts.map
|
package/dist/index.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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"}
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/widget-empty-state.tsx","../src/dashboard-widget.tsx","../src/entity-info-widget.tsx","../src/period-select.tsx"],"sourcesContent":[],"mappings":"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"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import { Button, Skeleton, cn } from "@carefully-built/ui";
|
|
1
|
+
import { Button, SearchableSelect, Skeleton, cn, defineKitTexts, useKitTexts } from "@carefully-built/ui";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { CalendarRange } from "lucide-react";
|
|
3
4
|
|
|
4
5
|
//#region src/widget-empty-state.tsx
|
|
5
6
|
function WidgetEmptyState({ icon: Icon, title, description, minHeightClassName, className, action }) {
|
|
@@ -122,5 +123,81 @@ function DashboardWidget({ icon, title, value, actions, children, className, con
|
|
|
122
123
|
}
|
|
123
124
|
|
|
124
125
|
//#endregion
|
|
125
|
-
|
|
126
|
+
//#region src/period-select.tsx
|
|
127
|
+
const PERIOD_PRESETS = [
|
|
128
|
+
"today",
|
|
129
|
+
"7d",
|
|
130
|
+
"30d",
|
|
131
|
+
"90d",
|
|
132
|
+
"month",
|
|
133
|
+
"year"
|
|
134
|
+
];
|
|
135
|
+
const periodTexts = defineKitTexts({
|
|
136
|
+
en: {
|
|
137
|
+
today: "Today",
|
|
138
|
+
"7d": "Last 7 days",
|
|
139
|
+
"30d": "Last 30 days",
|
|
140
|
+
"90d": "Last 90 days",
|
|
141
|
+
month: "This month",
|
|
142
|
+
year: "This year",
|
|
143
|
+
ariaLabel: "Period"
|
|
144
|
+
},
|
|
145
|
+
it: {
|
|
146
|
+
today: "Oggi",
|
|
147
|
+
"7d": "Ultimi 7 giorni",
|
|
148
|
+
"30d": "Ultimi 30 giorni",
|
|
149
|
+
"90d": "Ultimi 90 giorni",
|
|
150
|
+
month: "Questo mese",
|
|
151
|
+
year: "Quest’anno",
|
|
152
|
+
ariaLabel: "Periodo"
|
|
153
|
+
}
|
|
154
|
+
});
|
|
155
|
+
function isPeriodPreset(value) {
|
|
156
|
+
return PERIOD_PRESETS.includes(value);
|
|
157
|
+
}
|
|
158
|
+
/** The time range a preset covers, in the browser's time zone, ending tomorrow at 00:00. */
|
|
159
|
+
function resolvePeriodRange(preset, now = /* @__PURE__ */ new Date()) {
|
|
160
|
+
const start = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
|
161
|
+
const to = start.getTime() + 1440 * 60 * 1e3;
|
|
162
|
+
const daysBack = {
|
|
163
|
+
today: 0,
|
|
164
|
+
"7d": 6,
|
|
165
|
+
"30d": 29,
|
|
166
|
+
"90d": 89
|
|
167
|
+
};
|
|
168
|
+
if (preset === "month") return {
|
|
169
|
+
from: new Date(now.getFullYear(), now.getMonth(), 1).getTime(),
|
|
170
|
+
to
|
|
171
|
+
};
|
|
172
|
+
if (preset === "year") return {
|
|
173
|
+
from: new Date(now.getFullYear(), 0, 1).getTime(),
|
|
174
|
+
to
|
|
175
|
+
};
|
|
176
|
+
return {
|
|
177
|
+
from: start.getTime() - daysBack[preset] * 24 * 60 * 60 * 1e3,
|
|
178
|
+
to
|
|
179
|
+
};
|
|
180
|
+
}
|
|
181
|
+
/** Dashboard period filter: the same presets, labels and ranges in every app. */
|
|
182
|
+
function PeriodSelect({ value, onChange, presets = PERIOD_PRESETS, className }) {
|
|
183
|
+
const texts = useKitTexts(periodTexts);
|
|
184
|
+
return /* @__PURE__ */ jsx(SearchableSelect, {
|
|
185
|
+
value,
|
|
186
|
+
onValueChange: (next) => {
|
|
187
|
+
if (isPeriodPreset(next)) onChange(next);
|
|
188
|
+
},
|
|
189
|
+
options: presets.map((preset) => ({
|
|
190
|
+
value: preset,
|
|
191
|
+
label: texts[preset]
|
|
192
|
+
})),
|
|
193
|
+
ariaLabel: texts.ariaLabel,
|
|
194
|
+
leadingIcon: CalendarRange,
|
|
195
|
+
searchThreshold: 99,
|
|
196
|
+
size: "sm",
|
|
197
|
+
className: className ?? "min-w-40"
|
|
198
|
+
});
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
//#endregion
|
|
202
|
+
export { DashboardWidget, EntityInfoWidget, PERIOD_PRESETS, PeriodSelect, WidgetEmptyState, isPeriodPreset, resolvePeriodRange };
|
|
126
203
|
//# sourceMappingURL=index.mjs.map
|
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 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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../src/widget-empty-state.tsx","../src/entity-info-widget.tsx","../src/dashboard-widget.tsx","../src/period-select.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","'use client';\n\nimport { SearchableSelect, defineKitTexts, useKitTexts } from '@carefully-built/ui';\nimport { CalendarRange } from 'lucide-react';\n\nexport const PERIOD_PRESETS = ['today', '7d', '30d', '90d', 'month', 'year'] as const;\n\nexport type PeriodPreset = (typeof PERIOD_PRESETS)[number];\n\nexport interface PeriodRange {\n /** Inclusive start, epoch ms. */\n readonly from: number;\n /** Exclusive end, epoch ms. */\n readonly to: number;\n}\n\nconst periodTexts = defineKitTexts<Record<PeriodPreset, string> & { readonly ariaLabel: string }>({\n en: {\n today: 'Today',\n '7d': 'Last 7 days',\n '30d': 'Last 30 days',\n '90d': 'Last 90 days',\n month: 'This month',\n year: 'This year',\n ariaLabel: 'Period',\n },\n it: {\n today: 'Oggi',\n '7d': 'Ultimi 7 giorni',\n '30d': 'Ultimi 30 giorni',\n '90d': 'Ultimi 90 giorni',\n month: 'Questo mese',\n year: 'Quest’anno',\n ariaLabel: 'Periodo',\n },\n});\n\nexport function isPeriodPreset(value: string): value is PeriodPreset {\n return (PERIOD_PRESETS as readonly string[]).includes(value);\n}\n\n/** The time range a preset covers, in the browser's time zone, ending tomorrow at 00:00. */\nexport function resolvePeriodRange(preset: PeriodPreset, now = new Date()): PeriodRange {\n const start = new Date(now.getFullYear(), now.getMonth(), now.getDate());\n const to = start.getTime() + 24 * 60 * 60 * 1000;\n const daysBack = { today: 0, '7d': 6, '30d': 29, '90d': 89 } as const;\n\n if (preset === 'month') return { from: new Date(now.getFullYear(), now.getMonth(), 1).getTime(), to };\n if (preset === 'year') return { from: new Date(now.getFullYear(), 0, 1).getTime(), to };\n return { from: start.getTime() - daysBack[preset] * 24 * 60 * 60 * 1000, to };\n}\n\ninterface PeriodSelectProps {\n readonly value: PeriodPreset;\n readonly onChange: (value: PeriodPreset) => void;\n readonly presets?: readonly PeriodPreset[];\n readonly className?: string;\n}\n\n/** Dashboard period filter: the same presets, labels and ranges in every app. */\nexport function PeriodSelect({\n value,\n onChange,\n presets = PERIOD_PRESETS,\n className,\n}: PeriodSelectProps): React.ReactElement {\n const texts = useKitTexts(periodTexts);\n\n return (\n <SearchableSelect\n value={value}\n onValueChange={(next) => {\n if (isPeriodPreset(next)) onChange(next);\n }}\n options={presets.map((preset) => ({ value: preset, label: texts[preset] }))}\n ariaLabel={texts.ariaLabel}\n leadingIcon={CalendarRange}\n searchThreshold={99}\n size=\"sm\"\n className={className ?? 'min-w-40'}\n />\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;;;;;AChEvB,MAAa,iBAAiB;CAAC;CAAS;CAAM;CAAO;CAAO;CAAS;CAAO;AAW5E,MAAM,cAAc,eAA8E;CAChG,IAAI;EACF,OAAO;EACP,MAAM;EACN,OAAO;EACP,OAAO;EACP,OAAO;EACP,MAAM;EACN,WAAW;EACZ;CACD,IAAI;EACF,OAAO;EACP,MAAM;EACN,OAAO;EACP,OAAO;EACP,OAAO;EACP,MAAM;EACN,WAAW;EACZ;CACF,CAAC;AAEF,SAAgB,eAAe,OAAsC;AACnE,QAAQ,eAAqC,SAAS,MAAM;;;AAI9D,SAAgB,mBAAmB,QAAsB,sBAAM,IAAI,MAAM,EAAe;CACtF,MAAM,QAAQ,IAAI,KAAK,IAAI,aAAa,EAAE,IAAI,UAAU,EAAE,IAAI,SAAS,CAAC;CACxE,MAAM,KAAK,MAAM,SAAS,GAAG,OAAU,KAAK;CAC5C,MAAM,WAAW;EAAE,OAAO;EAAG,MAAM;EAAG,OAAO;EAAI,OAAO;EAAI;AAE5D,KAAI,WAAW,QAAS,QAAO;EAAE,MAAM,IAAI,KAAK,IAAI,aAAa,EAAE,IAAI,UAAU,EAAE,EAAE,CAAC,SAAS;EAAE;EAAI;AACrG,KAAI,WAAW,OAAQ,QAAO;EAAE,MAAM,IAAI,KAAK,IAAI,aAAa,EAAE,GAAG,EAAE,CAAC,SAAS;EAAE;EAAI;AACvF,QAAO;EAAE,MAAM,MAAM,SAAS,GAAG,SAAS,UAAU,KAAK,KAAK,KAAK;EAAM;EAAI;;;AAW/E,SAAgB,aAAa,EAC3B,OACA,UACA,UAAU,gBACV,aACwC;CACxC,MAAM,QAAQ,YAAY,YAAY;AAEtC,QACE,oBAAC;EACQ;EACP,gBAAgB,SAAS;AACvB,OAAI,eAAe,KAAK,CAAE,UAAS,KAAK;;EAE1C,SAAS,QAAQ,KAAK,YAAY;GAAE,OAAO;GAAQ,OAAO,MAAM;GAAS,EAAE;EAC3E,WAAW,MAAM;EACjB,aAAa;EACb,iBAAiB;EACjB,MAAK;EACL,WAAW,aAAa;GACxB"}
|