infinity-ui-elements 1.8.16 → 1.8.18

package/dist/index.esm.js

@@ -1621,7 +1621,7 @@ const Checkbox = React.forwardRef(({ label, errorText, size = "medium", validati
         },
         large: {
             gap: "gap-3",
-            labelSize: "text-body-large-regular",
+            labelSize: "text-body-medium-regular",
             iconSize: 14,
         },
     };
@@ -3677,7 +3677,7 @@ const switchVariants = cva("relative inline-flex items-center shrink-0 cursor-po
         isDisabled: false,
     },
 });
-const switchThumbVariants = cva("inline-block rounded-full bg-neutral-00 shadow-sm transition-transform duration-200", {
+const switchThumbVariants = cva("inline-block rounded-full bg-white shadow-sm transition-transform duration-200", {
     variants: {
         size: {
             small: "h-[8px] w-[8px]",
@@ -3762,11 +3762,11 @@ const Switch = React.forwardRef(({ label, size = "medium", isDisabled = false, c
         },
         medium: {
             gap: "gap-2.5",
-            labelSize: "text-body-medium-regular",
+            labelSize: "text-body-small-regular",
         },
         large: {
             gap: "gap-3",
-            labelSize: "text-body-large-regular",
+            labelSize: "text-body-medium-regular",
         },
     };
     const config = sizeConfig[size];
@@ -3794,6 +3794,7 @@ const tableVariants = cva("w-full border-collapse", {
             small: "text-body-small-medium",
             medium: "text-body-medium-medium",
             large: "text-body-large-medium",
+            auto: "text-body-medium-medium",
         },
     },
     defaultVariants: {
@@ -3801,24 +3802,26 @@ const tableVariants = cva("w-full border-collapse", {
         size: "medium",
     },
 });
-const tableHeaderVariants = cva("text-body-medium-regular text-left text-surface-ink-neutral-normal border-b border-surface-outline-neutral-muted", {
+const tableHeaderVariants = cva("text-body-medium-regular text-left text-surface-ink-neutral-normal border-b border-surface-outline-neutral-muted box-border", {
     variants: {
         size: {
             small: "px-3 py-2 h-[32px]",
             medium: "px-4 py-3 h-[40px]",
             large: "px-6 py-4 h-[48px]",
+            auto: "px-4 py-3 h-[56px]",
         },
     },
     defaultVariants: {
         size: "medium",
     },
 });
-const tableCellVariants = cva("text-body-medium-regular border-b border-surface-outline-neutral-muted text-surface-ink-neutral-normal transition-colors duration-150", {
+const tableCellVariants = cva("text-body-medium-regular border-b border-surface-outline-neutral-muted text-surface-ink-neutral-normal transition-colors duration-150 box-border", {
     variants: {
         size: {
             small: "px-3 py-2 h-[40px]",
             medium: "px-4 py-3 h-[72px]",
             large: "px-6 py-4 h-[56px]",
+            auto: "px-4 py-3",
         },
         state: {
             default: "",
@@ -3838,6 +3841,7 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
         small: 32,
         medium: 40,
         large: 48,
+        auto: 56,
     }[size] ?? 40;
     return (jsx("thead", { className: cn(showHeaderBackground ? "bg-surface-fill-neutral-moderate" : "bg-white", stickyHeader && "sticky top-0 z-10"), children: headerGroups.map((headerGroup, groupIndex) => {
             const stickyTop = stickyHeader ? groupIndex * headerHeight : undefined;
@@ -3939,6 +3943,7 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
         small: 16,
         medium: 20,
         large: 24,
+        auto: "auto",
     };
     const skeletonCellHeight = normalizeSizeValue(loadingSkeletonHeight ?? skeletonHeightMap[sizeKey]);
     const selectionSkeletonSize = sizeKey === "small" ? 14 : sizeKey === "large" ? 20 : 16;
@@ -3987,7 +3992,7 @@ function TableComponent({ className, wrapperClassName, containerClassName, varia
         return renderDefaultEmptyState({ colSpan: table.getAllColumns().length });
     };
     // ==================== Render ====================
-    return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsx("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size || "medium", headerClassName: headerClassName, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsx("tbody", { children: renderLoadingContent() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }) }) }));
+    return (jsx("div", { ref: ref, className: cn("w-full", wrapperClassName), ...props, children: jsx("div", { className: cn("relative", enableHorizontalScroll ? "overflow-x-auto" : "overflow-x-hidden", maxHeight && "overflow-y-auto", containerClassName), style: containerStyle, children: jsxs("table", { className: cn(tableVariants({ variant, size }), className), children: [jsx(TableHeader, { headerGroups: headerGroups, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, showHeaderBackground: showHeaderBackground, stickyHeader: stickyHeader, size: size, headerClassName: headerClassName, onToggleAllRows: (e) => table.getToggleAllRowsSelectedHandler()(e), isAllRowsSelected: table.getIsAllRowsSelected(), isSomeRowsSelected: table.getIsSomeRowsSelected(), getColumnStyle: getColumnStyle }), resolvedLoading ? (jsx("tbody", { children: renderLoadingContent() })) : !hasData ? (jsx("tbody", { children: renderEmptyState() })) : (jsx(TableBody, { rows: table.getRowModel().rows, enableRowSelection: enableRowSelection, size: size || "medium", variant: variant || "default", showRowHover: showRowHover, cellClassName: cellClassName, onRowClick: onRowClick, getRowClassName: getRowClassName, handleRowClick: handleRowClickInternal, getColumnStyle: getColumnStyle }))] }) }) }));
 }
 // ==================== Export ====================
 const Table = React.forwardRef(TableComponent);