@sofya-ds/react 1.8.0 → 1.10.0

package/dist/index.d.ts

@@ -307,7 +307,9 @@ declare const legacyIconToTablerNameMap: {
     readonly "caret-up": "IconChevronUp";
     readonly "caret-left": "IconChevronLeft";
     readonly "caret-right": "IconChevronRight";
+    readonly copy: "IconCopy";
     readonly logout: "IconLogout";
+    readonly star: "IconStar";
     readonly "users-group": "IconUsersGroup";
     readonly archive: "IconArchive";
     readonly folder: "IconFolder";
@@ -683,33 +685,54 @@ interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimit
 }
 declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
 
+declare const tableDensityOptions: readonly ["default", "compact"];
 declare const tableCellVariantOptions: readonly ["default", "primary", "muted"];
-declare const tableStatusToneOptions: readonly ["active", "inactive", "warning"];
+declare const tableStatusToneOptions: readonly ["active", "inactive", "info", "warning"];
 declare const tableActionToneOptions: readonly ["primary", "neutral", "danger"];
+type TableDensity = (typeof tableDensityOptions)[number];
+type TableTextSize = "default" | "compact";
 declare const tableCellVariants: (props?: ({
+    density?: "default" | "compact" | null | undefined;
     variant?: "default" | "primary" | "muted" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const tableStatusBadgeVariants: (props?: ({
-    tone?: "warning" | "active" | "inactive" | null | undefined;
+    density?: "default" | "compact" | null | undefined;
+    tone?: "warning" | "active" | "inactive" | "info" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const tableActionButtonVariants: (props?: ({
     tone?: "primary" | "neutral" | "danger" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const Table: React.ForwardRefExoticComponent<React.TableHTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+    density?: TableDensity;
+}
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
 declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    density?: TableDensity;
+}
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
 declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
-interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement>, VariantProps<typeof tableCellVariants> {
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement>, Omit<VariantProps<typeof tableCellVariants>, "density"> {
+    density?: TableDensity;
     /** When true, truncates overflowing text with an ellipsis. */
     truncate?: boolean;
 }
 declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
-interface TableStatusBadgeProps extends Omit<React.ComponentPropsWithoutRef<typeof Badge>, "variant" | "pillTone">, VariantProps<typeof tableStatusBadgeVariants> {
+interface TableCellTitleProps extends React.HTMLAttributes<HTMLSpanElement> {
+    size?: TableTextSize;
+}
+declare const TableCellTitle: React.ForwardRefExoticComponent<TableCellTitleProps & React.RefAttributes<HTMLSpanElement>>;
+interface TableCellDescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {
+    size?: TableTextSize;
+}
+declare const TableCellDescription: React.ForwardRefExoticComponent<TableCellDescriptionProps & React.RefAttributes<HTMLSpanElement>>;
+interface TableStatusBadgeProps extends Omit<React.ComponentPropsWithoutRef<typeof Badge>, "variant" | "pillTone">, Omit<VariantProps<typeof tableStatusBadgeVariants>, "density"> {
+    density?: TableDensity;
 }
-declare function TableStatusBadge({ className, tone, children, ...props }: TableStatusBadgeProps): react_jsx_runtime.JSX.Element;
+declare function TableStatusBadge({ className, density, tone, children, ...props }: TableStatusBadgeProps): react_jsx_runtime.JSX.Element;
 interface TableActionButtonProps extends Omit<React.ComponentPropsWithoutRef<typeof Button>, "size" | "variant">, VariantProps<typeof tableActionButtonVariants> {
 }
 declare const TableActionButton: React.ForwardRefExoticComponent<TableActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
@@ -789,4 +812,4 @@ interface SofyaProviderProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function SofyaProvider({ preset, overrides, className, style, children, ...props }: SofyaProviderProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionAppearance, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDescription, type AlertProps, type AlertSize, AlertTitle, type AlertTone, Avatar, type AvatarProps, Badge, type BadgeAlert, type BadgePillTone, type BadgeProps, type BadgeVariant, Button, type ButtonLanguageLocale, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, Cluster, type ClusterProps, Container, type ContainerProps, Dialog, DialogBody, DialogCancel, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocumentCard, type DocumentCardProps, Dropdown, type DropdownAppearance, type DropdownItem, type DropdownProps, DropdownSearch, type DropdownSearchOption, type DropdownSearchProps, type DropdownSubItem, type DropdownTriggerSize, type DropdownVariant, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, type EmptyProps, EmptyTitle, Icon, type IconColor, type IconName, type IconProps, type IconSize, Inline, type InlineProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, type InputVariant, Label, Link, type LinkProps, Logo, type LogoProps, type LogoSize, type LogoVariant, type NotificationVariant, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Progress, type ProgressProps, type ProgressSize, ProseDialogBody, ProseDialogContent, type ProseDialogContentProps, ProseDialogDescription, ProseDialogHeader, ProseDialogTitle, RadioGroup, RadioGroupItem, type RadioGroupItemProps, RadioGroupOption, RadioGroupOptionAvatar, type RadioGroupOptionAvatarProps, RadioGroupOptionDescription, type RadioGroupOptionDescriptionProps, RadioGroupOptionIndicator, type RadioGroupOptionIndicatorProps, RadioGroupOptionLabel, type RadioGroupOptionLabelProps, type RadioGroupOptionProps, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupVariant, RightRailAction, type RightRailActionProps, ScrollArea, ScrollAreaCorner, type ScrollAreaOrientation, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, type SelectSize, SelectTrigger, SelectValue, Separator, Skeleton, type SkeletonProps, Slider, type SliderProps, SofyaProvider, type SofyaProviderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, Surface, type SurfaceVariant, Switch, type SwitchProps, type SwitchSize, Table, TableActionButton, type TableActionButtonProps, TableActions, TableBody, TableCaption, TableCell, type TableCellProps, TableFooter, TableHead, TableHeader, TableRow, TableStatusBadge, type TableStatusBadgeProps, Tabs, type TabsItem, type TabsProps, Text, type TextProps, type TextSize, type TextSplitType, type TextVariant, type TextWeight, Textarea, type TextareaProps, Toaster, type ToasterProps, Toggle, type ToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadKind, accordionAppearanceOptions, alertSizeOptions, alertToneOptions, avatarSizeOptions, avatarVariants, badgeAlertOptions, badgeAlertVariants, badgePillToneOptions, badgePillVariants, badgeVariantOptions, badgeVariants, buttonLanguageLocaleOptions, buttonSizeOptions, buttonVariantOptions, buttonVariants, cardVariants, dropdownAppearanceOptions, dropdownLanguageItems, dropdownTriggerSizeOptions, dropdownVariantOptions, emptyMediaVariantOptions, iconColorOptions, iconNames, iconSizeMap, iconSizeOptions, inputVariantOptions, isTextContent, logoSizeOptions, logoVariants, notificationVariantOptions, paginationLinkVariants, progressSizeOptions, radioGroupOrientationOptions, radioGroupVariantOptions, renderTextContent, scrollAreaOrientationOptions, selectSizeOptions, spinnerSizeOptions, surfaceVariantOptions, switchSizeOptions, tableActionToneOptions, tableCellVariantOptions, tableStatusToneOptions, textSizeOptions, textSplitTypeOptions, textVariantOptions, uploadKindOptions };
+export { Accordion, type AccordionAppearance, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDescription, type AlertProps, type AlertSize, AlertTitle, type AlertTone, Avatar, type AvatarProps, Badge, type BadgeAlert, type BadgePillTone, type BadgeProps, type BadgeVariant, Button, type ButtonLanguageLocale, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, Cluster, type ClusterProps, Container, type ContainerProps, Dialog, DialogBody, DialogCancel, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocumentCard, type DocumentCardProps, Dropdown, type DropdownAppearance, type DropdownItem, type DropdownProps, DropdownSearch, type DropdownSearchOption, type DropdownSearchProps, type DropdownSubItem, type DropdownTriggerSize, type DropdownVariant, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, type EmptyProps, EmptyTitle, Icon, type IconColor, type IconName, type IconProps, type IconSize, Inline, type InlineProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, type InputVariant, Label, Link, type LinkProps, Logo, type LogoProps, type LogoSize, type LogoVariant, type NotificationVariant, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Progress, type ProgressProps, type ProgressSize, ProseDialogBody, ProseDialogContent, type ProseDialogContentProps, ProseDialogDescription, ProseDialogHeader, ProseDialogTitle, RadioGroup, RadioGroupItem, type RadioGroupItemProps, RadioGroupOption, RadioGroupOptionAvatar, type RadioGroupOptionAvatarProps, RadioGroupOptionDescription, type RadioGroupOptionDescriptionProps, RadioGroupOptionIndicator, type RadioGroupOptionIndicatorProps, RadioGroupOptionLabel, type RadioGroupOptionLabelProps, type RadioGroupOptionProps, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupVariant, RightRailAction, type RightRailActionProps, ScrollArea, ScrollAreaCorner, type ScrollAreaOrientation, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, type SelectSize, SelectTrigger, SelectValue, Separator, Skeleton, type SkeletonProps, Slider, type SliderProps, SofyaProvider, type SofyaProviderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, Surface, type SurfaceVariant, Switch, type SwitchProps, type SwitchSize, Table, TableActionButton, type TableActionButtonProps, TableActions, TableBody, TableCaption, TableCell, TableCellDescription, type TableCellDescriptionProps, type TableCellProps, TableCellTitle, type TableCellTitleProps, type TableDensity, TableFooter, TableHead, TableHeader, type TableProps, TableRow, type TableRowProps, TableStatusBadge, type TableStatusBadgeProps, type TableTextSize, Tabs, type TabsItem, type TabsProps, Text, type TextProps, type TextSize, type TextSplitType, type TextVariant, type TextWeight, Textarea, type TextareaProps, Toaster, type ToasterProps, Toggle, type ToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadKind, accordionAppearanceOptions, alertSizeOptions, alertToneOptions, avatarSizeOptions, avatarVariants, badgeAlertOptions, badgeAlertVariants, badgePillToneOptions, badgePillVariants, badgeVariantOptions, badgeVariants, buttonLanguageLocaleOptions, buttonSizeOptions, buttonVariantOptions, buttonVariants, cardVariants, dropdownAppearanceOptions, dropdownLanguageItems, dropdownTriggerSizeOptions, dropdownVariantOptions, emptyMediaVariantOptions, iconColorOptions, iconNames, iconSizeMap, iconSizeOptions, inputVariantOptions, isTextContent, logoSizeOptions, logoVariants, notificationVariantOptions, paginationLinkVariants, progressSizeOptions, radioGroupOrientationOptions, radioGroupVariantOptions, renderTextContent, scrollAreaOrientationOptions, selectSizeOptions, spinnerSizeOptions, surfaceVariantOptions, switchSizeOptions, tableActionToneOptions, tableCellVariantOptions, tableDensityOptions, tableStatusToneOptions, textSizeOptions, textSplitTypeOptions, textVariantOptions, uploadKindOptions };

package/dist/index.js

@@ -118,6 +118,7 @@ import {
   IconChevronLeft,
   IconChevronDown,
   IconChevronUp,
+  IconCopy,
   IconEdit,
   IconFile,
   IconFolders,
@@ -133,6 +134,7 @@ import {
   IconSearch,
   IconSquareToggle,
   IconSparkles,
+  IconStar,
   IconUser,
   IconUserFilled,
   IconUserCircle,
@@ -161,6 +163,7 @@ var tablerIconRegistry = {
   IconChevronLeft,
   IconChevronDown,
   IconChevronUp,
+  IconCopy,
   IconEdit,
   IconFile,
   IconFolders,
@@ -176,6 +179,7 @@ var tablerIconRegistry = {
   IconSearch,
   IconSquareToggle,
   IconSparkles,
+  IconStar,
   IconUser,
   IconUserFilled,
   IconUserCircle,
@@ -232,7 +236,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",
@@ -5472,17 +5478,28 @@ Switch.displayName = SwitchPrimitives.Root.displayName;
 import { cva as cva8 } from "class-variance-authority";
 import * as React37 from "react";
 import { jsx as jsx39 } from "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 = cva8(
-  "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)]",
@@ -5490,24 +5507,31 @@ var tableCellVariants = cva8(
       }
     },
     defaultVariants: {
+      density: "default",
       variant: "default"
     }
   }
 );
 var tableStatusBadgeVariants = cva8("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 = cva8(
-  "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: {
@@ -5521,8 +5545,8 @@ var tableActionButtonVariants = cva8(
     }
   }
 );
-var Table = React37.forwardRef(function Table2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx39(
+var Table = React37.forwardRef(function Table2({ className, density = "default", ...props }, ref) {
+  return /* @__PURE__ */ jsx39(TableDensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx39(
     "div",
     {
       "data-slot": "table-container",
@@ -5530,31 +5554,32 @@ var Table = React37.forwardRef(function Table2({ className, ...props }, ref) {
       children: /* @__PURE__ */ jsx39(
         "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__ */ jsx39(
+  return /* @__PURE__ */ jsx39(TableDensityContext.Provider, { value: "default", children: /* @__PURE__ */ jsx39(
     "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__ */ jsx39(
@@ -5562,7 +5587,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
     }
   );
@@ -5581,20 +5606,25 @@ var TableFooter = React37.forwardRef(function TableFooter2({ className, ...props
     }
   );
 });
-var TableRow = React37.forwardRef(function TableRow2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx39(
-    "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__ */ jsx39(TableDensityContext.Provider, { value: resolvedDensity, children: /* @__PURE__ */ jsx39(
+      "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__ */ jsx39(
     "th",
@@ -5602,7 +5632,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,
@@ -5616,14 +5646,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__ */ jsx39(
       "td",
       {
+        "data-density": resolvedDensity,
         "data-slot": "table-cell",
         ref,
         className: cn(
-          tableCellVariants({ variant }),
+          tableCellVariants({ density: resolvedDensity, variant }),
           truncate && "max-w-0",
           className
         ),
@@ -5661,17 +5693,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__ */ jsx39(
+      "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__ */ jsx39(
+    "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__ */ jsx39(
     Badge,
     {
+      "data-density": resolvedDensity,
       variant: "pill",
-      className: cn(tableStatusBadgeVariants({ tone }), className),
+      className: cn(
+        tableStatusBadgeVariants({ density: resolvedDensity, tone }),
+        className
+      ),
       ...props,
       children: renderTextContent(children, {
         as: "span",
@@ -5719,6 +5806,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";
 
@@ -6218,6 +6307,8 @@ export {
   TableBody,
   TableCaption,
   TableCell,
+  TableCellDescription,
+  TableCellTitle,
   TableFooter,
   TableHead,
   TableHeader,
@@ -6292,6 +6383,7 @@ export {
   switchSizeOptions,
   tableActionToneOptions,
   tableCellVariantOptions,
+  tableDensityOptions,
   tableStatusToneOptions,
   textSizeOptions,
   textSplitTypeOptions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofya-ds/react",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Sofya React design system with official brand tokens, provider and UI components.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -59,7 +59,7 @@
     "motion": "^12.38.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "@sofya-ds/tokens": "1.8.0"
+    "@sofya-ds/tokens": "1.10.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",