@sofya-ds/react 1.13.0 → 1.13.1

package/dist/index.d.ts

@@ -100,12 +100,12 @@ declare function Badge({ className, variant, alert, pillTone, ...props }: BadgeP
 declare const buttonLanguageLocaleOptions: readonly ["pt-BR", "en-US", "es-ES"];
 type ButtonLanguageLocale = (typeof buttonLanguageLocaleOptions)[number];
 
-declare const buttonVariantOptions: readonly ["default", "gradient", "dropdown", "icon", "language", "secondary", "outline", "ghost", "destructive"];
-declare const buttonSizeOptions: readonly ["default", "sm", "lg", "icon"];
+declare const buttonVariantOptions: readonly ["default", "gradient", "dropdown", "icon", "language", "secondary", "auth-outline", "outline", "ghost", "destructive"];
+declare const buttonSizeOptions: readonly ["default", "sm", "lg", "toolbar", "auth", "icon"];
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "destructive" | "icon" | "secondary" | "gradient" | "dropdown" | "language" | "outline" | "ghost" | null | undefined;
-    size?: "sm" | "default" | "lg" | "icon" | null | undefined;
+    variant?: "default" | "destructive" | "icon" | "secondary" | "gradient" | "dropdown" | "language" | "auth-outline" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "default" | "lg" | "toolbar" | "icon" | "auth" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     active?: boolean;
@@ -444,7 +444,7 @@ type UploadInputProps = InputBaseProps$1 & Omit<React.InputHTMLAttributes<HTMLIn
     variant: "upload";
 };
 
-declare const inputVariantOptions: readonly ["default", "search", "otp", "upload"];
+declare const inputVariantOptions: readonly ["default", "auth-login", "search", "otp", "upload"];
 type InputVariant = (typeof inputVariantOptions)[number];
 
 type InputBaseProps = {
@@ -454,7 +454,7 @@ type InputBaseProps = {
 type DefaultInputProps = InputBaseProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "className"> & {
     label?: React.ReactNode;
     labelClassName?: string;
-    variant?: "default";
+    variant?: "default" | "auth-login";
 };
 type SearchInputProps = InputBaseProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, "className"> & {
     label?: never;
@@ -742,9 +742,22 @@ declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimit
 
 declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
+type SidebarNavItemAppearance = "settings" | "workspace";
+interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
+    /** Render as a different element/component. Defaults to nav. */
+    as?: React.ElementType;
+}
+type SidebarNavSectionProps = React.HTMLAttributes<HTMLDivElement>;
+interface SidebarNavSectionLabelProps extends React.HTMLAttributes<HTMLElement> {
+    /** Semantic heading element for the section label. Defaults to h5. */
+    as?: React.ElementType;
+}
+type SidebarNavSectionItemsProps = React.HTMLAttributes<HTMLDivElement>;
 interface SidebarNavItemProps extends React.HTMLAttributes<HTMLElement> {
     /** Render as a different element/component (e.g. a router Link). */
     as?: React.ElementType;
+    /** Visual treatment. `settings` keeps the legacy selected surface. */
+    appearance?: SidebarNavItemAppearance;
     /** Marks the item as the current/selected destination. */
     active?: boolean;
     disabled?: boolean;
@@ -752,6 +765,10 @@ interface SidebarNavItemProps extends React.HTMLAttributes<HTMLElement> {
     icon?: React.ReactNode;
     href?: string;
 }
+declare const SidebarNav: React.ForwardRefExoticComponent<SidebarNavProps & React.RefAttributes<HTMLElement>>;
+declare const SidebarNavSection: React.ForwardRefExoticComponent<SidebarNavSectionProps & React.RefAttributes<HTMLDivElement>>;
+declare const SidebarNavSectionLabel: React.ForwardRefExoticComponent<SidebarNavSectionLabelProps & React.RefAttributes<HTMLElement>>;
+declare const SidebarNavSectionItems: React.ForwardRefExoticComponent<SidebarNavSectionItemsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Lateral navigation item (settings / left sidebar).
  *
@@ -1100,7 +1117,7 @@ type TextWeight = React.CSSProperties["fontWeight"];
 type TextVariant = "default" | "gradient" | "shiny" | "split";
 type TextTone = "default" | "soft" | "subtle";
 type TextSplitType = "chars" | "words" | "words, chars";
-declare const textSizeOptions: readonly ["display-xl", "display-lg", "heading-xl", "heading-lg", "heading-md", "h1", "h2", "h3", "h4", "h5", "encounter-title", "title-md", "title-sm", "body-lg", "body-md", "body-sm", "body", "label-md", "section-label", "eyebrow-md", "overline-md", "sidebar-title", "sidebar-title-regular", "sidebar-title-strong", "sidebar-label", "sidebar-label-strong", "sidebar-body", "sidebar-tag", "encounter-chip", "encounter-history", "caption", "eyebrow", "tiny", "extra-tiny", "code-sm"];
+declare const textSizeOptions: readonly ["display-xl", "display-lg", "heading-xl", "heading-lg", "heading-md", "settings-page-title", "home-inline-encounter-title", "home-inline-encounter-action", "h1", "h2", "h3", "h4", "h5", "encounter-title", "title-md", "title-sm", "body-lg", "body-md", "body-sm", "body", "label-md", "settings-section-title", "section-label", "eyebrow-md", "overline-md", "sidebar-title", "sidebar-title-regular", "sidebar-title-strong", "sidebar-label", "sidebar-label-strong", "sidebar-body", "sidebar-tag", "encounter-chip", "encounter-history", "caption", "eyebrow", "tiny", "extra-tiny", "code-sm"];
 declare const textVariantOptions: readonly ["default", "gradient", "shiny", "split"];
 declare const textToneOptions: readonly ["default", "soft", "subtle"];
 declare const textSplitTypeOptions: readonly ["chars", "words", "words, chars"];
@@ -1136,4 +1153,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, CloseButton, type CloseButtonProps, 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, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, 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, type NotifyOptions, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverClose, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, PrivacyLabel, type PrivacyLabelProps, type PrivacyLevel, 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, RichTextToolbar, RichTextToolbarButton, type RichTextToolbarButtonProps, RichTextToolbarGroup, type RichTextToolbarProps, RichTextToolbarSeparator, RightRailAction, type RightRailActionProps, ScrollArea, ScrollAreaCorner, type ScrollAreaOrientation, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, type SelectSize, SelectTrigger, SelectValue, Separator, SettingsNavItem, SidebarNavItem, type SidebarNavItemProps, Skeleton, type SkeletonProps, Slider, type SliderProps, SofyaProvider, type SofyaProviderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StatusIndicator, type StatusIndicatorProps, StatusTooltip, type StatusTooltipProps, 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 TableHeaderProps, type TableProps, TableRow, type TableRowProps, TableStatusBadge, type TableStatusBadgeProps, type TableTextSize, Tabs, type TabsItem, type TabsProps, Tag, type TagProps, type TagStatusTone, type TagVariant, TemplateCard, type TemplateCardFavoriteDisplay, type TemplateCardLayout, type TemplateCardMetaPlacement, type TemplateCardProps, TemplateListItem, Text, type TextProps, type TextSize, type TextSplitType, type TextTone, type TextVariant, type TextWeight, Textarea, type TextareaProps, Toaster, type ToasterProps, Toggle, type ToggleProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, type TooltipTone, TooltipTrigger, type UploadKind, type WorkflowStatus, type WorkflowStatusDescriptor, accordionAppearanceOptions, alertSizeOptions, alertToneOptions, avatarSizeOptions, avatarVariants, badgeAlertOptions, badgeAlertVariants, badgePillToneOptions, badgePillVariants, badgeVariantOptions, badgeVariants, buttonLanguageLocaleOptions, buttonSizeOptions, buttonVariantOptions, buttonVariants, cardVariants, dropdownAppearanceOptions, dropdownLanguageItems, dropdownTriggerSizeOptions, dropdownVariantOptions, emptyMediaVariantOptions, iconButtonSizeOptions, iconButtonVariantOptions, iconColorOptions, iconNames, iconSizeMap, iconSizeOptions, inputVariantOptions, isTextContent, logoSizeOptions, logoVariants, notificationVariantOptions, notify, paginationLinkVariants, privacyLevelOptions, progressSizeOptions, radioGroupOrientationOptions, radioGroupVariantOptions, renderTextContent, resolveWorkflowStatus, scrollAreaOrientationOptions, selectSizeOptions, spinnerSizeOptions, surfaceVariantOptions, switchSizeOptions, tableActionToneOptions, tableCellVariantOptions, tableDensityOptions, tableStatusToneOptions, tagStatusToneOptions, tagVariantOptions, templateCardFavoriteDisplayOptions, templateCardLayoutOptions, templateCardMetaPlacementOptions, textSizeOptions, textSplitTypeOptions, textToneOptions, textVariantOptions, tooltipToneOptions, uploadKindOptions, workflowStatusOptions };
+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, CloseButton, type CloseButtonProps, 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, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, 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, type NotifyOptions, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverClose, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, PrivacyLabel, type PrivacyLabelProps, type PrivacyLevel, 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, RichTextToolbar, RichTextToolbarButton, type RichTextToolbarButtonProps, RichTextToolbarGroup, type RichTextToolbarProps, RichTextToolbarSeparator, RightRailAction, type RightRailActionProps, ScrollArea, ScrollAreaCorner, type ScrollAreaOrientation, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, type SelectSize, SelectTrigger, SelectValue, Separator, SettingsNavItem, SidebarNav, SidebarNavItem, type SidebarNavItemAppearance, type SidebarNavItemProps, type SidebarNavProps, SidebarNavSection, SidebarNavSectionItems, SidebarNavSectionLabel, type SidebarNavSectionLabelProps, Skeleton, type SkeletonProps, Slider, type SliderProps, SofyaProvider, type SofyaProviderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StatusIndicator, type StatusIndicatorProps, StatusTooltip, type StatusTooltipProps, 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 TableHeaderProps, type TableProps, TableRow, type TableRowProps, TableStatusBadge, type TableStatusBadgeProps, type TableTextSize, Tabs, type TabsItem, type TabsProps, Tag, type TagProps, type TagStatusTone, type TagVariant, TemplateCard, type TemplateCardFavoriteDisplay, type TemplateCardLayout, type TemplateCardMetaPlacement, type TemplateCardProps, TemplateListItem, Text, type TextProps, type TextSize, type TextSplitType, type TextTone, type TextVariant, type TextWeight, Textarea, type TextareaProps, Toaster, type ToasterProps, Toggle, type ToggleProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, type TooltipTone, TooltipTrigger, type UploadKind, type WorkflowStatus, type WorkflowStatusDescriptor, accordionAppearanceOptions, alertSizeOptions, alertToneOptions, avatarSizeOptions, avatarVariants, badgeAlertOptions, badgeAlertVariants, badgePillToneOptions, badgePillVariants, badgeVariantOptions, badgeVariants, buttonLanguageLocaleOptions, buttonSizeOptions, buttonVariantOptions, buttonVariants, cardVariants, dropdownAppearanceOptions, dropdownLanguageItems, dropdownTriggerSizeOptions, dropdownVariantOptions, emptyMediaVariantOptions, iconButtonSizeOptions, iconButtonVariantOptions, iconColorOptions, iconNames, iconSizeMap, iconSizeOptions, inputVariantOptions, isTextContent, logoSizeOptions, logoVariants, notificationVariantOptions, notify, paginationLinkVariants, privacyLevelOptions, progressSizeOptions, radioGroupOrientationOptions, radioGroupVariantOptions, renderTextContent, resolveWorkflowStatus, scrollAreaOrientationOptions, selectSizeOptions, spinnerSizeOptions, surfaceVariantOptions, switchSizeOptions, tableActionToneOptions, tableCellVariantOptions, tableDensityOptions, tableStatusToneOptions, tagStatusToneOptions, tagVariantOptions, templateCardFavoriteDisplayOptions, templateCardLayoutOptions, templateCardMetaPlacementOptions, textSizeOptions, textSplitTypeOptions, textToneOptions, textVariantOptions, tooltipToneOptions, uploadKindOptions, workflowStatusOptions };

package/dist/index.js

@@ -460,6 +460,9 @@ var defaultElements = {
   "heading-xl": "h1",
   "heading-lg": "h2",
   "heading-md": "h3",
+  "settings-page-title": "h1",
+  "home-inline-encounter-title": "h1",
+  "home-inline-encounter-action": "span",
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -473,6 +476,7 @@ var defaultElements = {
   "body-sm": "p",
   body: "p",
   "label-md": "span",
+  "settings-section-title": "span",
   "section-label": "span",
   "eyebrow-md": "span",
   "overline-md": "span",
@@ -499,7 +503,8 @@ var textSizeStyles = Object.fromEntries(
       fontSize: `var(--sofya-text-${size}-font-size)`,
       fontWeight: `var(--sofya-text-${size}-font-weight)`,
       lineHeight: `var(--sofya-text-${size}-line-height)`,
-      letterSpacing: `var(--sofya-text-${size}-letter-spacing)`
+      letterSpacing: `var(--sofya-text-${size}-letter-spacing)`,
+      ...size === "settings-section-title" ? { textTransform: "uppercase" } : {}
     }
   ])
 );
@@ -993,6 +998,7 @@ var buttonRippleVariantClasses = {
   icon: "bg-[hsl(var(--sofya-primary)/0.34)]",
   language: "bg-[hsl(var(--sofya-background)/0.76)] mix-blend-screen",
   secondary: "bg-[hsl(var(--sofya-primary)/0.30)]",
+  "auth-outline": "bg-[hsl(var(--sofya-primary)/0.24)]",
   outline: "bg-[hsl(var(--sofya-primary)/0.32)]",
   ghost: "bg-[hsl(var(--sofya-primary)/0.28)]",
   destructive: "bg-[hsl(var(--sofya-destructive-foreground)/0.78)] mix-blend-screen"
@@ -1001,6 +1007,8 @@ var buttonRippleBaseSize = {
   default: 20,
   sm: 18,
   lg: 22,
+  toolbar: 20,
+  auth: 22,
   icon: 18
 };
 function useButtonRippleState({
@@ -1253,11 +1261,12 @@ var buttonVariantOptions = [
   "icon",
   "language",
   "secondary",
+  "auth-outline",
   "outline",
   "ghost",
   "destructive"
 ];
-var buttonSizeOptions = ["default", "sm", "lg", "icon"];
+var buttonSizeOptions = ["default", "sm", "lg", "toolbar", "auth", "icon"];
 var buttonVariants = cva2(
   "relative isolate inline-flex items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded-full font-medium tracking-[0.025em] transform-gpu transition-[width,transform,filter,background-color,border-color,color,box-shadow] duration-sofya ease-sofya motion-safe:active:scale-[0.985] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none data-[disabled=true]:cursor-not-allowed",
   {
@@ -1271,6 +1280,7 @@ var buttonVariants = cva2(
         icon: "border-0 bg-transparent text-[color:var(--sofya-text-soft)] shadow-none hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)] data-[disabled=true]:bg-transparent data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:shadow-none",
         language: "border-0 bg-muted bg-cover bg-center bg-no-repeat text-primary-foreground shadow-none hover:brightness-[1.03]",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/85 data-[disabled=true]:bg-muted data-[disabled=true]:text-[color:var(--sofya-text-subtle)]",
+        "auth-outline": "rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card text-[color:var(--sofya-text-default)] shadow-none hover:border-[color:var(--sofya-border-strong)] hover:bg-card active:bg-card data-[disabled=true]:border-[color:var(--sofya-border-soft)] data-[disabled=true]:text-[color:var(--sofya-text-subtle)]",
         outline: "border border-primary/15 bg-background text-foreground hover:border-primary/30 hover:bg-background active:bg-background data-[disabled=true]:border-[color:var(--sofya-border-soft)] data-[disabled=true]:text-[color:var(--sofya-text-subtle)]",
         ghost: "bg-transparent text-foreground hover:bg-muted data-[disabled=true]:text-[color:var(--sofya-text-subtle)]",
         destructive: "bg-destructive text-destructive-foreground hover:brightness-[1.04] data-[disabled=true]:bg-muted data-[disabled=true]:text-[color:var(--sofya-text-subtle)]"
@@ -1279,6 +1289,8 @@ var buttonVariants = cva2(
         default: "h-11 px-10",
         sm: "h-10 px-6",
         lg: "h-12 px-12",
+        toolbar: "h-[42px] px-7",
+        auth: "h-[46px] px-6",
         icon: "h-11 w-11"
       }
     },
@@ -1292,12 +1304,16 @@ var loadingSpinnerSizeClasses = {
   default: "h-4 w-4",
   sm: "h-3.5 w-3.5",
   lg: "h-[18px] w-[18px]",
+  toolbar: "h-4 w-4",
+  auth: "h-4 w-4",
   icon: "h-4 w-4"
 };
 var languageButtonSizeClasses = {
   default: "h-11 w-11 rounded-full p-0",
   sm: "h-10 w-10 rounded-full p-0",
   lg: "h-12 w-12 rounded-full p-0",
+  toolbar: "h-[42px] w-[42px] rounded-full p-0",
+  auth: "h-[46px] w-[46px] rounded-full p-0",
   icon: "h-11 w-11 rounded-full p-0"
 };
 function ButtonSpinner({
@@ -1341,6 +1357,7 @@ var Button = React7.forwardRef(
     const resolvedSize = size ?? (isIconOnly ? "icon" : "default");
     const resolvedVariant = variant ?? "default";
     const isLanguageButton = variant === "language";
+    const textSize = resolvedVariant === "auth-outline" ? "body-md" : "tiny";
     const resolvedLanguageLocale = isLanguageButton ? languageLocale ?? "en-US" : void 0;
     const resolvedLanguageFlagSrc = resolvedLanguageLocale ? buttonLanguageFlagSrc[resolvedLanguageLocale] : void 0;
     const resolvedLanguageLabel = resolvedLanguageLocale ? buttonLanguageLabels[resolvedLanguageLocale] : void 0;
@@ -1399,7 +1416,7 @@ var Button = React7.forwardRef(
       hasChildren ? renderTextContent(children, {
         as: "span",
         className: "inline-flex items-center text-current",
-        size: "tiny",
+        size: textSize,
         style: {
           fontWeight: "inherit",
           letterSpacing: "inherit"
@@ -3078,6 +3095,7 @@ InputOTPSeparator.displayName = "InputOTPSeparator";
 import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var inputVariantOptions = [
   "default",
+  "auth-login",
   "search",
   "otp",
   "upload"
@@ -3210,6 +3228,7 @@ var Input = React16.forwardRef((props, ref) => {
     ...nativeProps
   } = props;
   const isSearch = variant === "search";
+  const isAuthLogin = variant === "auth-login";
   const resolvedType = type ?? (isSearch ? "search" : void 0);
   const ariaLabel = nativeProps["aria-label"] ?? (typeof label === "string" ? label : isSearch ? "Search" : void 0);
   const nativeControl = isSearch ? /* @__PURE__ */ jsxs9("div", { className: "flex h-[88px] w-full items-center gap-6 rounded-full border border-[color:var(--sofya-border-strong)] bg-card px-8 shadow-none transition-[border-color,box-shadow,background-color] duration-sofya ease-sofya hover:border-[color:var(--sofya-border-hover)] hover:ring-2 hover:ring-[color:var(--sofya-focus-ring-soft)] focus-within:border-transparent focus-within:ring-2 focus-within:ring-[color:var(--sofya-focus-ring-soft)] has-[:active]:border-transparent has-[:active]:ring-2 has-[:active]:ring-[color:var(--sofya-focus-ring-soft)]", children: [
@@ -3245,7 +3264,8 @@ var Input = React16.forwardRef((props, ref) => {
       ref,
       type: resolvedType,
       className: cn(
-        "flex h-10 w-full rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card px-4 py-2 [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] [font-weight:var(--sofya-text-tiny-font-weight)] leading-[var(--sofya-text-tiny-line-height)] tracking-[var(--sofya-text-tiny-letter-spacing)] text-[color:var(--sofya-text-default)] shadow-none transition-[border-color,box-shadow,background-color,color] duration-sofya ease-sofya placeholder:text-[color:var(--sofya-text-placeholder)] hover:border-[color:var(--sofya-border-hover)] focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[color:var(--sofya-focus-ring-soft)] focus:ring-offset-0 active:border-transparent active:ring-2 active:ring-[color:var(--sofya-focus-ring-soft)] disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50",
+        "flex w-full rounded-[10px] border border-[color:var(--sofya-border-strong)] bg-card text-[color:var(--sofya-text-default)] shadow-none transition-[border-color,box-shadow,background-color,color] duration-sofya ease-sofya placeholder:text-[color:var(--sofya-text-placeholder)] hover:border-[color:var(--sofya-border-hover)] focus:border-transparent focus:outline-none focus:ring-2 focus:ring-[color:var(--sofya-focus-ring-soft)] focus:ring-offset-0 active:border-transparent active:ring-2 active:ring-[color:var(--sofya-focus-ring-soft)] disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50",
+        isAuthLogin ? "h-[46px] px-6 py-3 [font-family:var(--sofya-text-tiny-font-family)] text-[14px] [font-weight:500] leading-[24px] tracking-[var(--sofya-text-tiny-letter-spacing)] placeholder:font-medium" : "h-10 px-4 py-2 [font-family:var(--sofya-text-tiny-font-family)] text-[length:var(--sofya-text-tiny-font-size)] [font-weight:var(--sofya-text-tiny-font-weight)] leading-[var(--sofya-text-tiny-line-height)] tracking-[var(--sofya-text-tiny-letter-spacing)]",
         className
       ),
       ...nativeProps,
@@ -3255,10 +3275,12 @@ var Input = React16.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx17(
     FieldShell,
     {
-      containerClassName,
+      containerClassName: cn(isAuthLogin ? "gap-2.5" : void 0, containerClassName),
       control: nativeControl,
       label: isSearch ? void 0 : label,
       labelClassName: isSearch ? void 0 : labelClassName,
+      labelTextSize: isAuthLogin ? "body-md" : void 0,
+      labelTextStyle: isAuthLogin ? { fontWeight: 500 } : void 0,
       labelHtmlFor: isSearch ? void 0 : resolvedId
     }
   );
@@ -5267,8 +5289,88 @@ Separator2.displayName = SeparatorPrimitive.Root.displayName;
 // src/components/sidebar-nav-item.tsx
 import * as React36 from "react";
 import { jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
+var sidebarNavItemAppearanceClassNames = {
+  settings: "rounded-[var(--sofya-radius-md)] py-[var(--sofya-space-2)] pl-[var(--sofya-space-3)] pr-[var(--sofya-space-3)] text-[color:var(--sofya-text-soft)] hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)] data-[active=true]:bg-[color:var(--sofya-surface-selected)] data-[active=true]:text-[color:var(--sofya-text-default)] data-[active=true]:hover:bg-[color:var(--sofya-surface-selected-strong)] data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:hover:bg-transparent",
+  workspace: "rounded-[var(--sofya-radius-sm)] bg-transparent px-0 py-0 text-[color:var(--sofya-text-subtle)] hover:bg-transparent hover:text-[color:var(--sofya-text-default)] data-[active=true]:bg-transparent data-[active=true]:text-primary data-[active=true]:hover:bg-transparent data-[active=true]:hover:text-primary data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:hover:bg-transparent"
+};
+var sidebarNavItemIconClassNames = {
+  settings: "flex h-5 w-5 shrink-0 items-center justify-center [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0",
+  workspace: "flex h-[var(--sofya-text-sidebar-title-font-size)] w-[var(--sofya-text-sidebar-title-font-size)] shrink-0 items-center justify-center [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0"
+};
+var sidebarNavItemTextSize = {
+  settings: "sidebar-title",
+  workspace: "sidebar-title-regular"
+};
+var SidebarNav = React36.forwardRef(
+  ({ as, className, ...props }, ref) => {
+    const Comp = as ?? "nav";
+    return /* @__PURE__ */ jsx38(
+      Comp,
+      {
+        ref,
+        "data-slot": "sidebar-nav",
+        className: cn("flex w-full min-w-0 flex-col gap-[var(--sofya-rhythm-group)]", className),
+        ...props
+      }
+    );
+  }
+);
+SidebarNav.displayName = "SidebarNav";
+var SidebarNavSection = React36.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+    "div",
+    {
+      ref,
+      "data-slot": "sidebar-nav-section",
+      className: cn("flex min-w-0 flex-col gap-[var(--sofya-rhythm-group)]", className),
+      ...props
+    }
+  )
+);
+SidebarNavSection.displayName = "SidebarNavSection";
+var SidebarNavSectionLabel = React36.forwardRef(
+  ({ as, className, children, ...props }, ref) => {
+    const Comp = as ?? "h5";
+    return /* @__PURE__ */ jsx38(
+      Comp,
+      {
+        ref,
+        "data-slot": "sidebar-nav-section-label",
+        className: cn("m-0 min-w-0 text-muted-foreground uppercase", className),
+        ...props,
+        children: renderTextContent(children, {
+          as: "span",
+          className: "block min-w-0 truncate text-inherit",
+          size: "sidebar-title"
+        })
+      }
+    );
+  }
+);
+SidebarNavSectionLabel.displayName = "SidebarNavSectionLabel";
+var SidebarNavSectionItems = React36.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+    "div",
+    {
+      ref,
+      "data-slot": "sidebar-nav-section-items",
+      className: cn("flex min-w-0 flex-col gap-[var(--sofya-gap-comfortable)]", className),
+      ...props
+    }
+  )
+);
+SidebarNavSectionItems.displayName = "SidebarNavSectionItems";
 var SidebarNavItem = React36.forwardRef(
-  function SidebarNavItem2({ as, active = false, disabled = false, icon, className, children, ...props }, ref) {
+  function SidebarNavItem2({
+    as,
+    active = false,
+    appearance = "settings",
+    disabled = false,
+    icon,
+    className,
+    children,
+    ...props
+  }, ref) {
     const Comp = as ?? (props.href ? "a" : "button");
     const isNativeButton = Comp === "button";
     return /* @__PURE__ */ jsxs18(
@@ -5282,19 +5384,17 @@ var SidebarNavItem = React36.forwardRef(
         "aria-disabled": disabled || void 0,
         ...isNativeButton ? { type: "button", disabled } : {},
         className: cn(
-          "group relative flex w-full items-center gap-[var(--sofya-gap-compact)] rounded-[var(--sofya-radius-md)] py-[var(--sofya-space-2)] pl-[var(--sofya-space-3)] pr-[var(--sofya-space-3)] text-left no-underline outline-none",
+          "group relative flex w-full items-center gap-[var(--sofya-gap-compact)] text-left no-underline outline-none",
           "[font-family:var(--sofya-text-sidebar-title-font-family)] text-[length:var(--sofya-text-sidebar-title-font-size)] [font-weight:var(--sofya-text-sidebar-title-font-weight)] leading-[var(--sofya-text-sidebar-title-line-height)] tracking-[var(--sofya-text-sidebar-title-letter-spacing)]",
-          "text-[color:var(--sofya-text-soft)] transition-colors duration-sofya ease-sofya",
-          "hover:bg-[color:var(--sofya-surface-hover)] hover:text-[color:var(--sofya-text-default)]",
+          "transition-colors duration-sofya ease-sofya",
           "focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0",
-          "data-[active=true]:bg-[color:var(--sofya-surface-selected)] data-[active=true]:text-[color:var(--sofya-text-default)]",
-          "data-[active=true]:hover:bg-[color:var(--sofya-surface-selected-strong)]",
-          "data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:text-[color:var(--sofya-text-subtle)] data-[disabled=true]:hover:bg-transparent",
+          "data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed",
+          sidebarNavItemAppearanceClassNames[appearance],
           className
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx38(
+          appearance === "settings" ? /* @__PURE__ */ jsx38(
             "span",
             {
               "aria-hidden": "true",
@@ -5304,12 +5404,19 @@ var SidebarNavItem = React36.forwardRef(
                 active ? "opacity-100" : "opacity-0"
               )
             }
-          ),
-          icon ? /* @__PURE__ */ jsx38("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center [&_svg]:h-[1em] [&_svg]:w-[1em] [&_svg]:shrink-0", children: icon }) : null,
+          ) : null,
+          icon ? /* @__PURE__ */ jsx38(
+            "span",
+            {
+              "data-slot": "sidebar-nav-item-icon",
+              className: sidebarNavItemIconClassNames[appearance],
+              children: icon
+            }
+          ) : null,
           /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex-1 truncate", children: renderTextContent(children, {
             as: "span",
             className: "block min-w-0 truncate text-inherit",
-            size: "sidebar-title"
+            size: sidebarNavItemTextSize[appearance]
           }) })
         ]
       }
@@ -6117,7 +6224,8 @@ var Table = React43.forwardRef(function Table2({ className, density = "default",
           "data-slot": "table",
           ref,
           className: cn(
-            "w-full min-w-[1040px] caption-bottom border-separate border-spacing-0 bg-card",
+            "w-full min-w-[1040px] caption-bottom border-separate border-spacing-x-0 bg-card",
+            density === "compact" ? "border-spacing-y-2" : "border-spacing-y-0",
             className
           ),
           ...props
@@ -6197,7 +6305,7 @@ var TableHead = React43.forwardRef(function TableHead2({ className, children, ..
       ref,
       className: cn(
         "whitespace-nowrap px-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",
-        headerDensity === "compact" ? "py-2.5" : "py-4",
+        headerDensity === "compact" ? "h-[45px] py-0" : "py-4",
         className
       ),
       ...props,
@@ -7138,7 +7246,11 @@ export {
   SelectValue,
   Separator2 as Separator,
   SettingsNavItem,
+  SidebarNav,
   SidebarNavItem,
+  SidebarNavSection,
+  SidebarNavSectionItems,
+  SidebarNavSectionLabel,
   Skeleton,
   Slider,
   SofyaProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sofya-ds/react",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "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.13.0"
+    "@sofya-ds/tokens": "1.13.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",