@sofya-ds/react 1.8.0 → 1.10.0

package/dist/index.cjs

@@ -138,6 +138,8 @@ __export(index_exports, {
   TableBody: () => TableBody,
   TableCaption: () => TableCaption,
   TableCell: () => TableCell,
+  TableCellDescription: () => TableCellDescription,
+  TableCellTitle: () => TableCellTitle,
   TableFooter: () => TableFooter,
   TableHead: () => TableHead,
   TableHeader: () => TableHeader,
@@ -212,6 +214,7 @@ __export(index_exports, {
   switchSizeOptions: () => switchSizeOptions,
   tableActionToneOptions: () => tableActionToneOptions,
   tableCellVariantOptions: () => tableCellVariantOptions,
+  tableDensityOptions: () => tableDensityOptions,
   tableStatusToneOptions: () => tableStatusToneOptions,
   textSizeOptions: () => textSizeOptions,
   textSplitTypeOptions: () => textSplitTypeOptions,
@@ -345,6 +348,7 @@ var tablerIconRegistry = {
   IconChevronLeft: import_icons_react.IconChevronLeft,
   IconChevronDown: import_icons_react.IconChevronDown,
   IconChevronUp: import_icons_react.IconChevronUp,
+  IconCopy: import_icons_react.IconCopy,
   IconEdit: import_icons_react.IconEdit,
   IconFile: import_icons_react.IconFile,
   IconFolders: import_icons_react.IconFolders,
@@ -360,6 +364,7 @@ var tablerIconRegistry = {
   IconSearch: import_icons_react.IconSearch,
   IconSquareToggle: import_icons_react.IconSquareToggle,
   IconSparkles: import_icons_react.IconSparkles,
+  IconStar: import_icons_react.IconStar,
   IconUser: import_icons_react.IconUser,
   IconUserFilled: import_icons_react.IconUserFilled,
   IconUserCircle: import_icons_react.IconUserCircle,
@@ -416,7 +421,9 @@ var legacyIconToTablerNameMap = {
   "caret-up": "IconChevronUp",
   "caret-left": "IconChevronLeft",
   "caret-right": "IconChevronRight",
+  "copy": "IconCopy",
   "logout": "IconLogout",
+  "star": "IconStar",
   "users-group": "IconUsersGroup",
   "archive": "IconArchive",
   "folder": "IconFolder",
@@ -5640,17 +5647,28 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 var import_class_variance_authority8 = require("class-variance-authority");
 var React37 = __toESM(require("react"), 1);
 var import_jsx_runtime39 = require("react/jsx-runtime");
+var tableDensityOptions = ["default", "compact"];
 var tableCellVariantOptions = ["default", "primary", "muted"];
 var tableStatusToneOptions = [
   "active",
   "inactive",
+  "info",
   "warning"
 ];
 var tableActionToneOptions = ["primary", "neutral", "danger"];
+var TableDensityContext = React37.createContext("default");
+function useTableDensity(density) {
+  const inheritedDensity = React37.useContext(TableDensityContext);
+  return density ?? inheritedDensity;
+}
 var tableCellVariants = (0, import_class_variance_authority8.cva)(
-  "px-2 py-6 align-middle [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] font-normal leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)]",
+  "px-4 align-middle [font-family:var(--sofya-text-body-font-family)] text-[length:var(--sofya-text-body-font-size)] font-normal leading-[var(--sofya-text-body-line-height)] tracking-[var(--sofya-text-body-letter-spacing)]",
   {
     variants: {
+      density: {
+        default: "py-5",
+        compact: "h-[72px] py-3"
+      },
       variant: {
         default: "text-[color:var(--sofya-text-soft)]",
         primary: "font-medium text-[color:var(--sofya-text-default)]",
@@ -5658,24 +5676,31 @@ var tableCellVariants = (0, import_class_variance_authority8.cva)(
       }
     },
     defaultVariants: {
+      density: "default",
       variant: "default"
     }
   }
 );
 var tableStatusBadgeVariants = (0, import_class_variance_authority8.cva)("normal-case", {
   variants: {
+    density: {
+      default: "",
+      compact: "h-6 min-h-6 px-4 py-1"
+    },
     tone: {
       active: "border-[color:var(--sofya-tone-success-border)] bg-[color:var(--sofya-tone-success-background)] text-[color:var(--sofya-tone-success-foreground)]",
       inactive: "border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tone-default-background)] text-[color:var(--sofya-text-subtle)]",
+      info: "border-transparent bg-primary/10 text-primary",
       warning: "border-[color:var(--sofya-tone-warning-border)] bg-[color:var(--sofya-tone-warning-background)] text-[color:var(--sofya-tone-warning-foreground)]"
     }
   },
   defaultVariants: {
+    density: "default",
     tone: "active"
   }
 });
 var tableActionButtonVariants = (0, import_class_variance_authority8.cva)(
-  "text-[length:var(--sofya-text-body-font-size)] leading-[var(--sofya-text-body-line-height)] shadow-none motion-safe:active:scale-[0.97] focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0 disabled:opacity-40 [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+  "h-8 w-8 text-[length:var(--sofya-text-body-font-size)] leading-[var(--sofya-text-body-line-height)] shadow-none motion-safe:active:scale-[0.97] focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0 disabled:opacity-40 [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
   {
     variants: {
       tone: {
@@ -5689,8 +5714,8 @@ var tableActionButtonVariants = (0, import_class_variance_authority8.cva)(
     }
   }
 );
-var Table = React37.forwardRef(function Table2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+var Table = React37.forwardRef(function Table2({ className, density = "default", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableDensityContext.Provider, { value: density, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       "data-slot": "table-container",
@@ -5698,31 +5723,32 @@ var Table = React37.forwardRef(function Table2({ className, ...props }, ref) {
       children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "table",
         {
+          "data-density": density,
           "data-slot": "table",
           ref,
           className: cn(
-            "w-full min-w-[1040px] caption-bottom border-collapse bg-card",
+            "w-full min-w-[1040px] caption-bottom border-separate border-spacing-0 bg-card",
             className
           ),
           ...props
         }
       )
     }
-  );
+  ) });
 });
 var TableHeader = React37.forwardRef(function TableHeader2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableDensityContext.Provider, { value: "default", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "thead",
     {
       "data-slot": "table-header",
       ref,
       className: cn(
-        "[&_tr]:border-b [&_tr]:border-[color:var(--sofya-border-strong)] [&_tr:hover]:bg-transparent",
+        "[&_tr]:border-0 [&_tr:hover]:bg-transparent [&_th]:bg-[color:var(--sofya-tone-default-background)] [&_th:first-child]:rounded-tl-[var(--sofya-radius-md)] [&_th:last-child]:rounded-tr-[var(--sofya-radius-md)]",
         className
       ),
       ...props
     }
-  );
+  ) });
 });
 var TableBody = React37.forwardRef(function TableBody2({ className, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -5730,7 +5756,7 @@ var TableBody = React37.forwardRef(function TableBody2({ className, ...props },
     {
       "data-slot": "table-body",
       ref,
-      className: cn("[&_tr:last-child]:border-0", className),
+      className: cn("[&_tr:last-child>td]:border-0", className),
       ...props
     }
   );
@@ -5749,20 +5775,25 @@ var TableFooter = React37.forwardRef(function TableFooter2({ className, ...props
     }
   );
 });
-var TableRow = React37.forwardRef(function TableRow2({ className, ...props }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-    "tr",
-    {
-      "data-slot": "table-row",
-      ref,
-      className: cn(
-        "border-b border-[color:var(--sofya-border-soft)] transition-colors duration-sofya ease-sofya hover:bg-[color:var(--sofya-tone-default-background)] data-[state=selected]:bg-[color:var(--sofya-tone-default-background)]",
-        className
-      ),
-      ...props
-    }
-  );
-});
+var TableRow = React37.forwardRef(
+  function TableRow2({ className, density, ...props }, ref) {
+    const resolvedDensity = useTableDensity(density);
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TableDensityContext.Provider, { value: resolvedDensity, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "tr",
+      {
+        "data-density": resolvedDensity,
+        "data-slot": "table-row",
+        ref,
+        className: cn(
+          "border-b border-[color:var(--sofya-border-soft)] transition-colors duration-sofya ease-sofya hover:bg-[color:var(--sofya-tone-default-background)] data-[state=selected]:bg-[color:var(--sofya-tone-default-background)] [&>td]:border-b [&>td]:border-[color:var(--sofya-border-soft)]",
+          resolvedDensity === "compact" && "h-[72px]",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
 var TableHead = React37.forwardRef(function TableHead2({ className, children, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "th",
@@ -5770,7 +5801,7 @@ var TableHead = React37.forwardRef(function TableHead2({ className, children, ..
       "data-slot": "table-head",
       ref,
       className: cn(
-        "whitespace-nowrap px-2 py-8 text-left align-middle [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] font-medium uppercase leading-4 tracking-[0.12em] text-[color:var(--sofya-text-default)] [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+        "whitespace-nowrap px-4 py-4 text-left align-middle [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] font-medium uppercase leading-4 tracking-[0.08em] text-[color:var(--sofya-text-default)] [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
         className
       ),
       ...props,
@@ -5784,14 +5815,16 @@ var TableHead = React37.forwardRef(function TableHead2({ className, children, ..
   );
 });
 var TableCell = React37.forwardRef(
-  function TableCell2({ className, variant, truncate, children, ...props }, ref) {
+  function TableCell2({ className, density, variant, truncate, children, ...props }, ref) {
+    const resolvedDensity = useTableDensity(density);
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "td",
       {
+        "data-density": resolvedDensity,
         "data-slot": "table-cell",
         ref,
         className: cn(
-          tableCellVariants({ variant }),
+          tableCellVariants({ density: resolvedDensity, variant }),
           truncate && "max-w-0",
           className
         ),
@@ -5829,17 +5862,72 @@ var TableCaption = React37.forwardRef(function TableCaption2({ className, childr
     }
   );
 });
+var TableCellTitle = React37.forwardRef(
+  function TableCellTitle2({ className, children, size, ...props }, ref) {
+    const density = useTableDensity();
+    const resolvedSize = size ?? (density === "compact" ? "compact" : "default");
+    const textSize = resolvedSize === "compact" ? "label-md" : "body";
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      "span",
+      {
+        "data-slot": "table-cell-title",
+        ref,
+        className: cn(
+          "block font-medium text-[color:var(--sofya-text-default)]",
+          className
+        ),
+        ...props,
+        children: renderTextContent(children, {
+          as: "span",
+          className: "block text-inherit",
+          size: textSize,
+          style: inheritedTypographyStyle
+        })
+      }
+    );
+  }
+);
+var TableCellDescription = React37.forwardRef(function TableCellDescription2({ className, children, size, ...props }, ref) {
+  const density = useTableDensity();
+  const resolvedSize = size ?? (density === "compact" ? "compact" : "default");
+  const textSize = resolvedSize === "compact" ? "body-sm" : "tiny";
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "span",
+    {
+      "data-slot": "table-cell-description",
+      ref,
+      className: cn(
+        "block text-[color:var(--sofya-text-subtle)]",
+        resolvedSize === "compact" ? "mt-0" : "mt-1",
+        className
+      ),
+      ...props,
+      children: renderTextContent(children, {
+        as: "span",
+        className: "block text-inherit",
+        size: textSize,
+        style: inheritedTypographyStyle
+      })
+    }
+  );
+});
 function TableStatusBadge({
   className,
+  density,
   tone,
   children,
   ...props
 }) {
+  const resolvedDensity = useTableDensity(density);
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Badge,
     {
+      "data-density": resolvedDensity,
       variant: "pill",
-      className: cn(tableStatusBadgeVariants({ tone }), className),
+      className: cn(
+        tableStatusBadgeVariants({ density: resolvedDensity, tone }),
+        className
+      ),
       ...props,
       children: renderTextContent(children, {
         as: "span",
@@ -5887,6 +5975,8 @@ TableRow.displayName = "TableRow";
 TableHead.displayName = "TableHead";
 TableCell.displayName = "TableCell";
 TableCaption.displayName = "TableCaption";
+TableCellTitle.displayName = "TableCellTitle";
+TableCellDescription.displayName = "TableCellDescription";
 TableActionButton.displayName = "TableActionButton";
 TableActions.displayName = "TableActions";
 
@@ -6361,6 +6451,8 @@ var import_tokens4 = require("@sofya-ds/tokens");
   TableBody,
   TableCaption,
   TableCell,
+  TableCellDescription,
+  TableCellTitle,
   TableFooter,
   TableHead,
   TableHeader,
@@ -6435,6 +6527,7 @@ var import_tokens4 = require("@sofya-ds/tokens");
   switchSizeOptions,
   tableActionToneOptions,
   tableCellVariantOptions,
+  tableDensityOptions,
   tableStatusToneOptions,
   textSizeOptions,
   textSplitTypeOptions,