@carefully-built/ui 0.1.16 → 0.1.17

package/dist/index.mjs

@@ -44,7 +44,7 @@ function AvatarFallback({ className, ...props }) {
 
 //#endregion
 //#region src/primitives/button.tsx
-const buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground hover:brightness-90 [a]:hover:bg-primary/80",
@@ -56,12 +56,12 @@ const buttonVariants = cva("group/button inline-flex shrink-0 cursor-pointer ite
 		},
 		size: {
 			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-lg),12px)] px-2 text-xs in-data-[slot=button-group]:rounded-xl has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-lg),14px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-xl has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
 			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
 			icon: "size-8",
-			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-xs": "size-6 rounded-[min(var(--radius-lg),12px)] in-data-[slot=button-group]:rounded-xl [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-7 rounded-[min(var(--radius-lg),14px)] in-data-[slot=button-group]:rounded-xl",
 			"icon-lg": "size-9"
 		}
 	},
@@ -139,14 +139,14 @@ function Card({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card",
 		"data-size": size,
-		className: cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className),
+		className: cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-2xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-2xl *:[img:last-child]:rounded-b-2xl group/card flex flex-col", className),
 		...props
 	});
 }
 function CardHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-header",
-		className: cn("gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]", className),
+		className: cn("gap-1 rounded-t-2xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]", className),
 		...props
 	});
 }
@@ -174,7 +174,7 @@ function CardContent({ className, ...props }) {
 function CardFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-footer",
-		className: cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className),
+		className: cn("bg-muted/50 rounded-b-2xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className),
 		...props
 	});
 }
@@ -2353,12 +2353,12 @@ const actionIcons = {
 	edit: Pencil,
 	delete: Trash2
 };
-const actionLabels = {
-	view: "Visualizza",
+const defaultActionLabels = {
+	view: "View",
 	edit: "Edit",
 	delete: "Delete"
 };
-function SmartTableActions({ item, actions, actionHandlers, renderActions }) {
+function SmartTableActions({ item, actions, actionLabels, actionHandlers, renderActions }) {
 	if (renderActions) return /* @__PURE__ */ jsx("div", {
 		className: SMART_TABLE_ACTIONS_CONTAINER_CLASS,
 		children: renderActions(item)
@@ -2373,7 +2373,7 @@ function SmartTableActions({ item, actions, actionHandlers, renderActions }) {
 				variant: "ghost",
 				size: "icon",
 				className: "size-8",
-				"aria-label": actionLabels[action],
+				"aria-label": actionLabels?.[action] ?? defaultActionLabels[action],
 				onClick: (event) => {
 					event.stopPropagation();
 					handler?.(item);
@@ -2677,7 +2677,7 @@ function SortableHeaderContent({ column, sortState, onSortChange }) {
 		}), /* @__PURE__ */ jsx(SortIcon, { activeDirection })]
 	});
 }
-function DesktopView({ data, columns, isLoading, skeletonRows, actions, actionHandlers, renderActions, noDataMessage, noDataContent, getRowKey, onRowClick, pagination, stickyHeader = false, maxHeight = "calc(100vh - 300px)", fullHeight = false, sortState, onSortChange }) {
+function DesktopView({ data, columns, isLoading, skeletonRows, actions, actionLabels, actionHandlers, renderActions, noDataMessage, noDataContent, getRowKey, onRowClick, pagination, stickyHeader = false, maxHeight = "calc(100vh - 300px)", fullHeight = false, sortState, onSortChange }) {
 	const resolvedNoDataContent = noDataContent ?? noDataMessage;
 	const hasActions = (actions?.length ?? 0) > 0 || renderActions !== void 0;
 	const actionColumnWidth = hasActions ? `${String(ACTION_COLUMN_WIDTH_PX)}px` : void 0;
@@ -2792,6 +2792,7 @@ function DesktopView({ data, columns, isLoading, skeletonRows, actions, actionHa
 							children: /* @__PURE__ */ jsx(SmartTableActions, {
 								item,
 								actions,
+								actionLabels,
 								actionHandlers,
 								renderActions
 							})
@@ -2813,7 +2814,7 @@ function DesktopView({ data, columns, isLoading, skeletonRows, actions, actionHa
 
 //#endregion
 //#region src/smart-table/MobileView.tsx
-function MobileView({ data, columns, isLoading, skeletonRows, actions, actionHandlers, renderActions, noDataMessage, noDataContent, getRowKey, onRowClick, renderMobileCard, pagination, fullHeight = false }) {
+function MobileView({ data, columns, isLoading, skeletonRows, actions, actionLabels, actionHandlers, renderActions, noDataMessage, noDataContent, getRowKey, onRowClick, renderMobileCard, pagination, fullHeight = false }) {
 	const resolvedNoDataContent = noDataContent ?? noDataMessage;
 	const visibleColumns = columns.filter((col) => !col.hideOnMobile);
 	const hasActions = (actions?.length ?? 0) > 0 || renderActions !== void 0;
@@ -2893,6 +2894,7 @@ function MobileView({ data, columns, isLoading, skeletonRows, actions, actionHan
 							children: /* @__PURE__ */ jsx(SmartTableActions, {
 								item,
 								actions,
+								actionLabels,
 								actionHandlers,
 								renderActions
 							})
@@ -2906,7 +2908,7 @@ function MobileView({ data, columns, isLoading, skeletonRows, actions, actionHan
 
 //#endregion
 //#region src/smart-table/SmartTable.tsx
-function SmartTable({ data, columns, isLoading, skeletonRows = 5, actions, actionHandlers, renderActions, noDataMessage = "No data available", noDataContent, getRowKey = (item) => {
+function SmartTable({ data, columns, isLoading, skeletonRows = 5, actions, actionLabels, actionHandlers, renderActions, noDataMessage = "No data available", noDataContent, getRowKey = (item) => {
 	const record = item;
 	if ("_id" in record) return String(record._id);
 	if ("id" in record) return String(record.id);
@@ -2920,6 +2922,7 @@ function SmartTable({ data, columns, isLoading, skeletonRows = 5, actions, actio
 			isLoading,
 			skeletonRows,
 			actions,
+			actionLabels,
 			actionHandlers,
 			renderActions,
 			noDataMessage,
@@ -2939,6 +2942,7 @@ function SmartTable({ data, columns, isLoading, skeletonRows = 5, actions, actio
 			isLoading,
 			skeletonRows,
 			actions,
+			actionLabels,
 			actionHandlers,
 			renderActions,
 			noDataMessage,
@@ -3277,7 +3281,7 @@ function TableToolbar({ search, filters, textFilters, customFilters, rangeFilter
 									onChange: (event) => {
 										updateDraftFilterValue(minKey, event.target.value);
 									},
-									placeholder: filter.minPlaceholder ?? "Min"
+									placeholder: filter.minPlaceholder ?? resolvedLabels.rangeMinPlaceholder
 								}), /* @__PURE__ */ jsx(Input, {
 									type: filter.inputType ?? "text",
 									inputMode: filter.inputMode ?? "decimal",
@@ -3285,7 +3289,7 @@ function TableToolbar({ search, filters, textFilters, customFilters, rangeFilter
 									onChange: (event) => {
 										updateDraftFilterValue(maxKey, event.target.value);
 									},
-									placeholder: filter.maxPlaceholder ?? "Max"
+									placeholder: filter.maxPlaceholder ?? resolvedLabels.rangeMaxPlaceholder
 								})] })
 							})]
 						}, filter.key);