@sofya-ds/react 1.12.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).
  *
@@ -990,8 +1007,8 @@ interface TagProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<t
 }
 /**
  * Compact semantic label. Variants: `neutral`, `organization`, `brand`,
- * `privacy` and `status` (with a `tone`). `brand` reuses the `organization`
- * primary-tinted look for generic content labels. Text is not truncated by
+ * `privacy` and `status` (with a `tone`). `brand` is a soft secondary-tinted
+ * pill with primary text for generic content labels. Text is not truncated by
  * default.
  */
 declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
@@ -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,
@@ -6403,10 +6511,11 @@ var tagVariants = cva9(
       variant: {
         neutral: "border-[color:var(--sofya-tone-default-border)] bg-[color:var(--sofya-tone-default-background)] text-[color:var(--sofya-tone-default-foreground)]",
         organization: "border-[color:var(--sofya-tone-info-border)] bg-[color:var(--sofya-tone-info-background)] text-[color:var(--sofya-tone-info-foreground)]",
-        // Brand/content label: same primary-tinted pill as `organization`, but
-        // semantically named so consumers don't borrow `organization` for
-        // non-org content (e.g. a clinical-domain label).
-        brand: "border-[color:var(--sofya-tone-info-border)] bg-[color:var(--sofya-tone-info-background)] text-[color:var(--sofya-tone-info-foreground)]",
+        // Brand/content label (e.g. a clinical-domain pill): a soft
+        // secondary-tinted fill (`--sofya-secondary` @ 10%) with primary text.
+        // Distinct from `organization`'s primary-tinted info look, and roomier
+        // padding (16/4) to match the content-label spec. Borderless filled pill.
+        brand: "border-[color:var(--sofya-tone-brand-border)] bg-[color:var(--sofya-tone-brand-background)] text-[color:var(--sofya-tone-brand-foreground)] px-[var(--sofya-space-4)] py-[var(--sofya-space-1)]",
         privacy: "border-transparent bg-[color:var(--sofya-surface-muted)] text-[color:var(--sofya-text-subtle)]",
         status: ""
       }
@@ -6549,7 +6658,11 @@ var TemplateCard = React45.forwardRef(
     const titleNode = renderTextContent(title, {
       as: "span",
       className: "block min-w-0 truncate font-semibold text-[color:var(--sofya-text-default)]",
-      size: "title-sm"
+      size: "title-sm",
+      // Selectable rows use the exact picker-title ramp (15/26, semibold). The
+      // size tokens are applied via inline style by `Text`, so the precise
+      // values must be passed as `style` to win over the `title-sm` defaults.
+      style: selectable ? { fontSize: "15px", lineHeight: "26px", fontWeight: 600 } : void 0
     });
     const hasInlineTitleExtras = showInlineStar || showInlineMeta;
     const titleRow = hasInlineTitleExtras ? /* @__PURE__ */ jsxs24("div", { className: "flex min-w-0 items-center gap-[var(--sofya-gap-tight)]", children: [
@@ -6569,10 +6682,17 @@ var TemplateCard = React45.forwardRef(
       description ? renderTextContent(description, {
         as: "span",
         className: cn(
-          "block min-w-0 text-[color:var(--sofya-text-soft)]",
+          "block min-w-0",
+          // Selectable rows use the full foreground tone (not the softer
+          // ramp) to match the picker spec.
+          selectable ? "text-[color:var(--sofya-text-default)]" : "text-[color:var(--sofya-text-soft)]",
           (isList || selectable) && "truncate"
         ),
-        size: descriptionSize
+        size: descriptionSize,
+        // Exact picker-description ramp (14/18, regular). Passed as inline
+        // style so it wins over the line-height/weight applied by `Text`,
+        // independent of which size ramp `descriptionSize` resolves to.
+        style: selectable ? { fontSize: "14px", lineHeight: "18px", fontWeight: 400 } : void 0
       }) : null
     ] });
     const blockMeta = showBlockMeta ? /* @__PURE__ */ jsx47(
@@ -6616,8 +6736,12 @@ var TemplateCard = React45.forwardRef(
         className: cn(
           "group rounded-[var(--sofya-radius-md)] border border-[color:var(--sofya-border-soft)] bg-card transition-colors duration-sofya ease-sofya",
           "hover:border-[color:var(--sofya-border-strong)] hover:bg-[color:var(--sofya-surface-hover)]",
-          "data-[selected=true]:border-primary data-[selected=true]:bg-[color:var(--sofya-surface-selected)]",
-          selectable ? "flex cursor-pointer items-center gap-[var(--sofya-gap-default)] p-[var(--sofya-space-4)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0" : isList ? "flex items-center gap-[var(--sofya-gap-default)] px-[var(--sofya-space-4)] py-[var(--sofya-space-3)]" : "flex flex-col gap-[var(--sofya-space-3)] p-[var(--sofya-space-4)]",
+          "data-[selected=true]:bg-[color:var(--sofya-surface-selected)]",
+          // In card/list usage the selected state also strengthens the border.
+          // Selectable picker rows are distinguished by the fill alone and keep
+          // the same soft border in every state.
+          !selectable && "data-[selected=true]:border-primary",
+          selectable ? "flex cursor-pointer items-center gap-[var(--sofya-space-6)] rounded-[var(--sofya-radius-sm)] p-[var(--sofya-space-4)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--sofya-focus-ring-soft)] focus-visible:ring-offset-0" : isList ? "flex items-center gap-[var(--sofya-gap-default)] px-[var(--sofya-space-4)] py-[var(--sofya-space-3)]" : "flex flex-col gap-[var(--sofya-space-3)] p-[var(--sofya-space-4)]",
           className
         ),
         ...props,
@@ -7122,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.12.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.12.0"
+    "@sofya-ds/tokens": "1.13.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",