@mirror-physics/fractal-ui 0.2.0-next.75 → 0.2.0-next.77

package/dist/index.d.cts

@@ -2,13 +2,18 @@ import * as React from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
 import { ClassValue } from 'clsx';
 
+/** Shared density scale for single-line controls and their labels. */
+type ControlSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
 type ButtonType = 'primary' | 'secondary' | 'ghost' | 'danger';
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ButtonSize = ControlSize;
 type ButtonColor = 'blue' | 'pink' | 'orange' | 'green';
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Visual hierarchy. Primary = strongest action, Secondary = neutral bordered, Ghost = minimal, Danger = destructive. */
     buttonType?: ButtonType;
-    /** Size preset matching the component height scale. */
+    /** Shared visual density; takes precedence over the buttonSize alias. */
+    controlSize?: ControlSize;
+    /** Backward-compatible alias for controlSize. */
     buttonSize?: ButtonSize;
     /** Color theme — maps to the design system's color scales. */
     color?: ButtonColor;
@@ -99,6 +104,8 @@ interface PromptGridProps extends React.HTMLAttributes<HTMLDivElement> {
 declare const PromptGrid: React.ForwardRefExoticComponent<PromptGridProps & React.RefAttributes<HTMLDivElement>>;
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Visual density; native `size` still controls the character-width hint. */
+    controlSize?: ControlSize;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
@@ -113,7 +120,7 @@ declare const TableSearch: React.ForwardRefExoticComponent<TableSearchProps & Re
 interface NumberInputProps extends Omit<InputProps, 'type'> {
     unit?: string;
 }
-declare function NumberInput({ unit, className, value, defaultValue, disabled, readOnly, min, max, ...props }: NumberInputProps): React.JSX.Element;
+declare function NumberInput({ unit, controlSize, className, value, defaultValue, disabled, readOnly, min, max, ...props }: NumberInputProps): React.JSX.Element;
 
 type SliderBaseProps = {
     min?: number;
@@ -147,6 +154,7 @@ interface PasswordInputProps extends Omit<InputProps, 'type'> {
 declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
 
 interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    controlSize?: ControlSize;
 }
 declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
 
@@ -256,7 +264,12 @@ interface DropdownProps {
     /** Renders the trigger as a square icon button. Requires an accessible triggerLabel. */
     iconOnly?: boolean;
     noChevron?: boolean;
-    size?: 'sm' | 'md';
+    /** Shared visual density; takes precedence over size. */
+    controlSize?: ControlSize;
+    /** Backward-compatible size alias. */
+    size?: ControlSize;
+    /** Connect a persistent Label with htmlFor to the trigger. */
+    triggerId?: string;
     triggerVariant?: 'outline' | 'tertiary';
     className?: string;
     triggerClassName?: string;
@@ -264,7 +277,7 @@ interface DropdownProps {
     closeOnSelect?: boolean;
     disabled?: boolean;
 }
-declare function Dropdown({ items, selectedValue, onSelect, triggerLabel, direction, align, triggerOrientation, triggerContent, label, iconOnly, noChevron, size, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, disabled, }: DropdownProps): React.JSX.Element | null;
+declare function Dropdown({ items, selectedValue, onSelect, triggerLabel, direction, align, triggerOrientation, triggerContent, label, iconOnly, noChevron, size: sizeAlias, controlSize, triggerId, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, disabled, }: DropdownProps): React.JSX.Element | null;
 
 type LinkTheme = 'default' | 'muted' | 'accent';
 type LinkSize = 'sm' | 'md' | 'lg';
@@ -460,10 +473,11 @@ interface GhostLineProps extends Omit<GhostProps, 'height'> {
 declare function Ghost({ className, width, height, radius, style, ...props }: GhostProps): React.JSX.Element;
 declare function GhostLine({ className, size, width, ...props }: GhostLineProps): React.JSX.Element;
 interface ButtonGhostProps extends Omit<GhostProps, 'height'> {
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: ControlSize;
+    controlSize?: ControlSize;
     iconOnly?: boolean;
 }
-declare function ButtonGhost({ className, size, iconOnly, width, ...props }: ButtonGhostProps): React.JSX.Element;
+declare function ButtonGhost({ className, size, controlSize, iconOnly, width, ...props }: ButtonGhostProps): React.JSX.Element;
 interface CardGhostProps extends HTMLAttributes<HTMLDivElement> {
     lines?: number;
     showHeader?: boolean;
@@ -485,6 +499,7 @@ interface DataTableGhostProps extends HTMLAttributes<HTMLDivElement> {
 declare function DataTableGhost({ className, showHeader, headers, columns, rows, columnWidths, size, ...props }: DataTableGhostProps): React.JSX.Element;
 interface FormFieldGhostProps extends HTMLAttributes<HTMLDivElement> {
     labelWidth?: GhostLength;
+    controlSize?: ControlSize;
     multiline?: boolean;
 }
 declare function InputGhost({ className, labelWidth, ...props }: FormFieldGhostProps): React.JSX.Element;
@@ -496,7 +511,9 @@ declare const ToggleGhost: typeof CheckboxGhost;
 declare function ChipGhost({ className, width, ...props }: Omit<GhostProps, 'height'>): React.JSX.Element;
 declare function LinkGhost({ className, width, ...props }: Omit<GhostLineProps, 'size'>): React.JSX.Element;
 declare const TextButtonGhost: typeof LinkGhost;
-declare function DropdownGhost({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function DropdownGhost({ className, controlSize, ...props }: HTMLAttributes<HTMLDivElement> & {
+    controlSize?: ControlSize;
+}): React.JSX.Element;
 declare function ContentSwitcherGhost({ className, options, ...props }: HTMLAttributes<HTMLDivElement> & {
     options?: number;
 }): React.JSX.Element;
@@ -625,4 +642,4 @@ declare function useEscapeDismiss(priority: number, handler: () => void, enabled
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, AlertDescription, AlertGhost, AlertTitle, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonColor, ButtonGhost, type ButtonGhostProps, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardGhost, type CardGhostProps, CardHeader, CardTitle, Checkbox, CheckboxGhost, type CheckboxProps, Chip, ChipGhost, type ChipProps, type ChipTone, CodeBlock, type CodeBlockProps, ContentSwitcher, ContentSwitcherGhost, type ContentSwitcherItem, type ContentSwitcherProps, ConversationGhost, type ConversationGhostProps, DataTable, type DataTableColumn, DataTableGhost, type DataTableGhostProps, type DataTableProps, Disclosure, DisclosureGhost, type DisclosureProps, Dropdown, DropdownGhost, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, FileDropzoneGhost, type FileDropzoneProps, FolderCard, type FolderCardProps, type FormFieldGhostProps, Ghost, GhostLine, type GhostLineProps, type GhostProps, Input, InputGhost, type InputProps, Label, LabelGhost, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, LinkGhost, type LinkProps, type LinkSize, type LinkTheme, Modal, ModalGhost, type ModalProps, NumberInput, type NumberInputProps, Pagination, PaginationGhost, type PaginationProps, PasswordInput, type PasswordInputProps, PromptCard, PromptCardGhost, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, Radio, type RadioProps, type RangeSliderProps, SidePanel, SidePanelGhost, type SidePanelProps, Sidebar, SidebarAccountMenu, type SidebarAccountMenuProps, SidebarBrand, SidebarFooter, SidebarGhost, type SidebarGhostProps, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SingleSliderProps, Slider, type SliderProps, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, SortableTableGhost, type SortableTablePagination, type SortableTableProps, type SortableTableRowAction, type SortableTableSelection, type SurfaceGhostProps, type TabItem, TableSearch, type TableSearchProps, type TableSearchType, Tabs, TabsGhost, type TabsProps, type TabsVariant, TextButton, TextButtonGhost, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, TextareaGhost, type TextareaProps, Toast, type ToastPosition, type ToastProps, type ToastVariant, ToastViewport, type ToastViewportProps, Toggle, ToggleGhost, type ToggleProps, UILoader, type UILoaderProps, type UILoaderTone, cn, useEscapeDismiss };
+export { Alert, AlertDescription, AlertGhost, AlertTitle, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonColor, ButtonGhost, type ButtonGhostProps, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardGhost, type CardGhostProps, CardHeader, CardTitle, Checkbox, CheckboxGhost, type CheckboxProps, Chip, ChipGhost, type ChipProps, type ChipTone, CodeBlock, type CodeBlockProps, ContentSwitcher, ContentSwitcherGhost, type ContentSwitcherItem, type ContentSwitcherProps, type ControlSize, ConversationGhost, type ConversationGhostProps, DataTable, type DataTableColumn, DataTableGhost, type DataTableGhostProps, type DataTableProps, Disclosure, DisclosureGhost, type DisclosureProps, Dropdown, DropdownGhost, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, FileDropzoneGhost, type FileDropzoneProps, FolderCard, type FolderCardProps, type FormFieldGhostProps, Ghost, GhostLine, type GhostLineProps, type GhostProps, Input, InputGhost, type InputProps, Label, LabelGhost, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, LinkGhost, type LinkProps, type LinkSize, type LinkTheme, Modal, ModalGhost, type ModalProps, NumberInput, type NumberInputProps, Pagination, PaginationGhost, type PaginationProps, PasswordInput, type PasswordInputProps, PromptCard, PromptCardGhost, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, Radio, type RadioProps, type RangeSliderProps, SidePanel, SidePanelGhost, type SidePanelProps, Sidebar, SidebarAccountMenu, type SidebarAccountMenuProps, SidebarBrand, SidebarFooter, SidebarGhost, type SidebarGhostProps, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SingleSliderProps, Slider, type SliderProps, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, SortableTableGhost, type SortableTablePagination, type SortableTableProps, type SortableTableRowAction, type SortableTableSelection, type SurfaceGhostProps, type TabItem, TableSearch, type TableSearchProps, type TableSearchType, Tabs, TabsGhost, type TabsProps, type TabsVariant, TextButton, TextButtonGhost, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, TextareaGhost, type TextareaProps, Toast, type ToastPosition, type ToastProps, type ToastVariant, ToastViewport, type ToastViewportProps, Toggle, ToggleGhost, type ToggleProps, UILoader, type UILoaderProps, type UILoaderTone, cn, useEscapeDismiss };

package/dist/index.d.ts

@@ -2,13 +2,18 @@ import * as React from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties } from 'react';
 import { ClassValue } from 'clsx';
 
+/** Shared density scale for single-line controls and their labels. */
+type ControlSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
 type ButtonType = 'primary' | 'secondary' | 'ghost' | 'danger';
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ButtonSize = ControlSize;
 type ButtonColor = 'blue' | 'pink' | 'orange' | 'green';
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Visual hierarchy. Primary = strongest action, Secondary = neutral bordered, Ghost = minimal, Danger = destructive. */
     buttonType?: ButtonType;
-    /** Size preset matching the component height scale. */
+    /** Shared visual density; takes precedence over the buttonSize alias. */
+    controlSize?: ControlSize;
+    /** Backward-compatible alias for controlSize. */
     buttonSize?: ButtonSize;
     /** Color theme — maps to the design system's color scales. */
     color?: ButtonColor;
@@ -99,6 +104,8 @@ interface PromptGridProps extends React.HTMLAttributes<HTMLDivElement> {
 declare const PromptGrid: React.ForwardRefExoticComponent<PromptGridProps & React.RefAttributes<HTMLDivElement>>;
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Visual density; native `size` still controls the character-width hint. */
+    controlSize?: ControlSize;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
@@ -113,7 +120,7 @@ declare const TableSearch: React.ForwardRefExoticComponent<TableSearchProps & Re
 interface NumberInputProps extends Omit<InputProps, 'type'> {
     unit?: string;
 }
-declare function NumberInput({ unit, className, value, defaultValue, disabled, readOnly, min, max, ...props }: NumberInputProps): React.JSX.Element;
+declare function NumberInput({ unit, controlSize, className, value, defaultValue, disabled, readOnly, min, max, ...props }: NumberInputProps): React.JSX.Element;
 
 type SliderBaseProps = {
     min?: number;
@@ -147,6 +154,7 @@ interface PasswordInputProps extends Omit<InputProps, 'type'> {
 declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
 
 interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    controlSize?: ControlSize;
 }
 declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
 
@@ -256,7 +264,12 @@ interface DropdownProps {
     /** Renders the trigger as a square icon button. Requires an accessible triggerLabel. */
     iconOnly?: boolean;
     noChevron?: boolean;
-    size?: 'sm' | 'md';
+    /** Shared visual density; takes precedence over size. */
+    controlSize?: ControlSize;
+    /** Backward-compatible size alias. */
+    size?: ControlSize;
+    /** Connect a persistent Label with htmlFor to the trigger. */
+    triggerId?: string;
     triggerVariant?: 'outline' | 'tertiary';
     className?: string;
     triggerClassName?: string;
@@ -264,7 +277,7 @@ interface DropdownProps {
     closeOnSelect?: boolean;
     disabled?: boolean;
 }
-declare function Dropdown({ items, selectedValue, onSelect, triggerLabel, direction, align, triggerOrientation, triggerContent, label, iconOnly, noChevron, size, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, disabled, }: DropdownProps): React.JSX.Element | null;
+declare function Dropdown({ items, selectedValue, onSelect, triggerLabel, direction, align, triggerOrientation, triggerContent, label, iconOnly, noChevron, size: sizeAlias, controlSize, triggerId, triggerVariant, className, triggerClassName, panelClassName, closeOnSelect, disabled, }: DropdownProps): React.JSX.Element | null;
 
 type LinkTheme = 'default' | 'muted' | 'accent';
 type LinkSize = 'sm' | 'md' | 'lg';
@@ -460,10 +473,11 @@ interface GhostLineProps extends Omit<GhostProps, 'height'> {
 declare function Ghost({ className, width, height, radius, style, ...props }: GhostProps): React.JSX.Element;
 declare function GhostLine({ className, size, width, ...props }: GhostLineProps): React.JSX.Element;
 interface ButtonGhostProps extends Omit<GhostProps, 'height'> {
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: ControlSize;
+    controlSize?: ControlSize;
     iconOnly?: boolean;
 }
-declare function ButtonGhost({ className, size, iconOnly, width, ...props }: ButtonGhostProps): React.JSX.Element;
+declare function ButtonGhost({ className, size, controlSize, iconOnly, width, ...props }: ButtonGhostProps): React.JSX.Element;
 interface CardGhostProps extends HTMLAttributes<HTMLDivElement> {
     lines?: number;
     showHeader?: boolean;
@@ -485,6 +499,7 @@ interface DataTableGhostProps extends HTMLAttributes<HTMLDivElement> {
 declare function DataTableGhost({ className, showHeader, headers, columns, rows, columnWidths, size, ...props }: DataTableGhostProps): React.JSX.Element;
 interface FormFieldGhostProps extends HTMLAttributes<HTMLDivElement> {
     labelWidth?: GhostLength;
+    controlSize?: ControlSize;
     multiline?: boolean;
 }
 declare function InputGhost({ className, labelWidth, ...props }: FormFieldGhostProps): React.JSX.Element;
@@ -496,7 +511,9 @@ declare const ToggleGhost: typeof CheckboxGhost;
 declare function ChipGhost({ className, width, ...props }: Omit<GhostProps, 'height'>): React.JSX.Element;
 declare function LinkGhost({ className, width, ...props }: Omit<GhostLineProps, 'size'>): React.JSX.Element;
 declare const TextButtonGhost: typeof LinkGhost;
-declare function DropdownGhost({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function DropdownGhost({ className, controlSize, ...props }: HTMLAttributes<HTMLDivElement> & {
+    controlSize?: ControlSize;
+}): React.JSX.Element;
 declare function ContentSwitcherGhost({ className, options, ...props }: HTMLAttributes<HTMLDivElement> & {
     options?: number;
 }): React.JSX.Element;
@@ -625,4 +642,4 @@ declare function useEscapeDismiss(priority: number, handler: () => void, enabled
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { Alert, AlertDescription, AlertGhost, AlertTitle, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonColor, ButtonGhost, type ButtonGhostProps, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardGhost, type CardGhostProps, CardHeader, CardTitle, Checkbox, CheckboxGhost, type CheckboxProps, Chip, ChipGhost, type ChipProps, type ChipTone, CodeBlock, type CodeBlockProps, ContentSwitcher, ContentSwitcherGhost, type ContentSwitcherItem, type ContentSwitcherProps, ConversationGhost, type ConversationGhostProps, DataTable, type DataTableColumn, DataTableGhost, type DataTableGhostProps, type DataTableProps, Disclosure, DisclosureGhost, type DisclosureProps, Dropdown, DropdownGhost, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, FileDropzoneGhost, type FileDropzoneProps, FolderCard, type FolderCardProps, type FormFieldGhostProps, Ghost, GhostLine, type GhostLineProps, type GhostProps, Input, InputGhost, type InputProps, Label, LabelGhost, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, LinkGhost, type LinkProps, type LinkSize, type LinkTheme, Modal, ModalGhost, type ModalProps, NumberInput, type NumberInputProps, Pagination, PaginationGhost, type PaginationProps, PasswordInput, type PasswordInputProps, PromptCard, PromptCardGhost, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, Radio, type RadioProps, type RangeSliderProps, SidePanel, SidePanelGhost, type SidePanelProps, Sidebar, SidebarAccountMenu, type SidebarAccountMenuProps, SidebarBrand, SidebarFooter, SidebarGhost, type SidebarGhostProps, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SingleSliderProps, Slider, type SliderProps, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, SortableTableGhost, type SortableTablePagination, type SortableTableProps, type SortableTableRowAction, type SortableTableSelection, type SurfaceGhostProps, type TabItem, TableSearch, type TableSearchProps, type TableSearchType, Tabs, TabsGhost, type TabsProps, type TabsVariant, TextButton, TextButtonGhost, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, TextareaGhost, type TextareaProps, Toast, type ToastPosition, type ToastProps, type ToastVariant, ToastViewport, type ToastViewportProps, Toggle, ToggleGhost, type ToggleProps, UILoader, type UILoaderProps, type UILoaderTone, cn, useEscapeDismiss };
+export { Alert, AlertDescription, AlertGhost, AlertTitle, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonColor, ButtonGhost, type ButtonGhostProps, type ButtonProps, type ButtonSize, type ButtonType, Card, CardContent, CardDescription, CardFooter, CardGhost, type CardGhostProps, CardHeader, CardTitle, Checkbox, CheckboxGhost, type CheckboxProps, Chip, ChipGhost, type ChipProps, type ChipTone, CodeBlock, type CodeBlockProps, ContentSwitcher, ContentSwitcherGhost, type ContentSwitcherItem, type ContentSwitcherProps, type ControlSize, ConversationGhost, type ConversationGhostProps, DataTable, type DataTableColumn, DataTableGhost, type DataTableGhostProps, type DataTableProps, Disclosure, DisclosureGhost, type DisclosureProps, Dropdown, DropdownGhost, type DropdownItem, type DropdownProps, FeatureCard, type FeatureCardProps, FileDropzone, FileDropzoneGhost, type FileDropzoneProps, FolderCard, type FolderCardProps, type FormFieldGhostProps, Ghost, GhostLine, type GhostLineProps, type GhostProps, Input, InputGhost, type InputProps, Label, LabelGhost, type LabelProps, LatticeLoader, type LatticeLoaderProps, Link, LinkGhost, type LinkProps, type LinkSize, type LinkTheme, Modal, ModalGhost, type ModalProps, NumberInput, type NumberInputProps, Pagination, PaginationGhost, type PaginationProps, PasswordInput, type PasswordInputProps, PromptCard, PromptCardGhost, type PromptCardProps, type PromptCardTone, PromptGrid, type PromptGridProps, Radio, type RadioProps, type RangeSliderProps, SidePanel, SidePanelGhost, type SidePanelProps, Sidebar, SidebarAccountMenu, type SidebarAccountMenuProps, SidebarBrand, SidebarFooter, SidebarGhost, type SidebarGhostProps, SidebarHeader, SidebarNav, SidebarNavItem, type SidebarNavItemProps, type SidebarProps, SidebarSection, type SingleSliderProps, Slider, type SliderProps, type SortDirection, SortableTable, type SortableTableColumn, type SortableTableDefaultSort, SortableTableGhost, type SortableTablePagination, type SortableTableProps, type SortableTableRowAction, type SortableTableSelection, type SurfaceGhostProps, type TabItem, TableSearch, type TableSearchProps, type TableSearchType, Tabs, TabsGhost, type TabsProps, type TabsVariant, TextButton, TextButtonGhost, type TextButtonIconPosition, type TextButtonProps, type TextButtonSize, type TextButtonTone, Textarea, TextareaGhost, type TextareaProps, Toast, type ToastPosition, type ToastProps, type ToastVariant, ToastViewport, type ToastViewportProps, Toggle, ToggleGhost, type ToggleProps, UILoader, type UILoaderProps, type UILoaderTone, cn, useEscapeDismiss };

package/dist/index.js

@@ -47,31 +47,19 @@ var colorPalette = {
     700: "var(--green-700)"
   }
 };
-var sizeConfig = {
-  xs: { height: "28px", padding: "4px 8px", iconOnly: "28px", fontSize: "0.75rem" },
-  sm: { height: "32px", padding: "6px 12px", iconOnly: "32px", fontSize: "0.75rem" },
-  md: { height: "40px", padding: "8px 16px", iconOnly: "40px", fontSize: "0.875rem" },
-  lg: { height: "44px", padding: "10px 20px", iconOnly: "44px", fontSize: "1rem" },
-  xl: { height: "56px", padding: "14px 28px", iconOnly: "56px", fontSize: "1rem" }
-};
-function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled, color, hasIconOnly) {
+function getButtonStyles(buttonType, isHovered, isActive, disabled, color, hasIconOnly) {
   const palette = colorPalette[color];
-  const size = sizeConfig[buttonSize];
   const base = {
-    height: size.height,
-    padding: hasIconOnly ? "0" : size.padding,
     borderRadius: hasIconOnly ? "var(--radius-lg, 8px)" : "var(--radius-full, 9999px)",
     cursor: disabled ? "not-allowed" : "pointer",
-    fontSize: size.fontSize,
     transition: "background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease"
   };
   if (hasIconOnly) {
-    base.width = size.iconOnly;
     base.justifyContent = "center";
   }
   if (disabled) {
     if (buttonType === "ghost") {
-      return { ...base, backgroundColor: "transparent", border: "none", color: "var(--fg-disabled)" };
+      return { ...base, backgroundColor: "transparent", border: "1px solid transparent", color: "var(--fg-disabled)" };
     }
     return { ...base, backgroundColor: "transparent", border: "1px solid var(--fg-disabled)", color: "var(--fg-disabled)" };
   }
@@ -82,7 +70,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
         return {
           ...base,
           backgroundColor: isActive ? palette[700] : isHovered ? palette[500] : palette[600],
-          border: "none",
+          border: "1px solid transparent",
           color: "var(--fg-inverse)"
         };
       }
@@ -106,7 +94,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
       return {
         ...base,
         backgroundColor: isHovered || isActive ? "var(--bg-surface-1)" : "transparent",
-        border: "none",
+        border: "1px solid transparent",
         color: "var(--fg-primary)"
       };
     // Danger: low-intensity destructive action. Text stays steady; hover deepens the light red surface.
@@ -114,7 +102,7 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
       return {
         ...base,
         backgroundColor: isHovered || isActive ? "var(--danger-button-surface-hover)" : "var(--danger-button-surface)",
-        border: "none",
+        border: "1px solid transparent",
         color: "var(--danger-button-fg)"
       };
     default:
@@ -122,10 +110,10 @@ function getButtonStyles(buttonType, isHovered, isActive, buttonSize, disabled,
   }
 }
 var Button = React.forwardRef(
-  ({ className, buttonType = "primary", buttonSize = "md", color = "blue", icon, hasIconOnly, iconPosition = "left", style, disabled, children, ...props }, ref) => {
+  ({ className, buttonType = "primary", buttonSize = "md", controlSize, color = "blue", icon, hasIconOnly, iconPosition = "left", style, disabled, children, ...props }, ref) => {
     const [isHovered, setIsHovered] = React.useState(false);
     const [isActive, setIsActive] = React.useState(false);
-    const typeStyles = getButtonStyles(buttonType, isHovered, isActive, buttonSize, !!disabled, color, hasIconOnly);
+    const typeStyles = getButtonStyles(buttonType, isHovered, isActive, !!disabled, color, hasIconOnly);
     const hasIconAndText = icon && children && !hasIconOnly;
     const finalStyles = hasIconAndText ? { ...typeStyles, gap: "var(--space-2, 8px)", ...style } : { ...typeStyles, ...style };
     return /* @__PURE__ */ jsxs(
@@ -133,7 +121,9 @@ var Button = React.forwardRef(
       {
         ref,
         type: "button",
-        className: cn("fractal-button", `fractal-button--${buttonType}`, className),
+        "data-control-size": controlSize ?? buttonSize,
+        "data-icon-only": hasIconOnly || void 0,
+        className: cn("fractal-control", "fractal-button", `fractal-button--${buttonType}`, className),
         style: finalStyles,
         disabled,
         onMouseEnter: (e) => {
@@ -541,7 +531,7 @@ import * as React2 from "react";
 import { Folder as FolderIcon } from "@mirror-physics/fractal-icons";
 import { jsx as jsx3, jsxs as jsxs4 } from "react/jsx-runtime";
 var Card = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", { ref, className: cn("fractal-card", className), ...props })
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", { ref, "data-fractal-border-surface": "surface-1", className: cn("fractal-card", className), ...props })
 );
 Card.displayName = "Card";
 var CardHeader = React2.forwardRef(
@@ -671,12 +661,13 @@ PromptGrid.displayName = "PromptGrid";
 import * as React4 from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var Input = React4.forwardRef(
-  ({ className, type, ...props }, ref) => /* @__PURE__ */ jsx5(
+  ({ className, type, controlSize = "md", ...props }, ref) => /* @__PURE__ */ jsx5(
     "input",
     {
       type,
       ref,
-      className: cn("fractal-input", className),
+      "data-control-size": controlSize,
+      className: cn("fractal-control", "fractal-input", className),
       ...props
     }
   )
@@ -690,6 +681,7 @@ import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var TableSearch = React5.forwardRef(
   ({
     searchType = "text",
+    controlSize = "md",
     className,
     inputClassName,
     placeholder,
@@ -703,12 +695,14 @@ var TableSearch = React5.forwardRef(
       {
         className: cn("fractal-table-search", className),
         "data-search-type": searchType,
+        "data-control-size": controlSize,
         children: [
           /* @__PURE__ */ jsx6(SearchIcon, { className: "fractal-table-search__icon", size: 17, "aria-hidden": "true" }),
           /* @__PURE__ */ jsx6(
             Input,
             {
               ...props,
+              controlSize,
               ref,
               type: "search",
               className: cn("fractal-table-search__input", inputClassName),
@@ -729,6 +723,7 @@ import { Minus, Plus } from "@mirror-physics/fractal-icons";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function NumberInput({
   unit,
+  controlSize = "md",
   className,
   value,
   defaultValue,
@@ -752,11 +747,12 @@ function NumberInput({
     input.dispatchEvent(new Event("input", { bubbles: true }));
     input.focus();
   };
-  return /* @__PURE__ */ jsxs7("div", { className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
+  return /* @__PURE__ */ jsxs7("div", { "data-control-size": controlSize, className: cn("fractal-number-input", unit && "fractal-number-input--with-unit", className), children: [
     /* @__PURE__ */ jsx7(
       Input,
       {
         ref: inputRef,
+        controlSize,
         type: "number",
         value,
         defaultValue,
@@ -771,7 +767,7 @@ function NumberInput({
       "span",
       {
         className: "fractal-number-input-unit",
-        style: { left: `calc(var(--space-3, 12px) + ${characterCount}ch)` },
+        style: { left: `calc(var(--control-padding-inline) + ${characterCount}ch)` },
         "aria-hidden": "true",
         children: unit
       }
@@ -936,6 +932,7 @@ import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var PasswordInput = React7.forwardRef(
   ({
     className,
+    controlSize = "md",
     disabled,
     showPasswordLabel = "Show password",
     hidePasswordLabel = "Hide password",
@@ -947,12 +944,14 @@ var PasswordInput = React7.forwardRef(
       "div",
       {
         className: cn("fractal-password-input", className),
+        "data-control-size": controlSize,
         "data-password-visible": passwordVisible ? "" : void 0,
         children: [
           /* @__PURE__ */ jsx9(
             Input,
             {
               ...props,
+              controlSize,
               ref,
               className: "fractal-password-input-field",
               disabled,
@@ -983,10 +982,11 @@ PasswordInput.displayName = "PasswordInput";
 import * as React8 from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var Label = React8.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+  ({ className, controlSize = "md", ...props }, ref) => /* @__PURE__ */ jsx10(
     "label",
     {
       ref,
+      "data-control-size": controlSize,
       className: cn("fractal-label", className),
       ...props
     }
@@ -1341,7 +1341,9 @@ function Dropdown({
   label,
   iconOnly = false,
   noChevron = false,
-  size = "md",
+  size: sizeAlias = "md",
+  controlSize,
+  triggerId,
   triggerVariant = "outline",
   className,
   triggerClassName,
@@ -1349,6 +1351,7 @@ function Dropdown({
   closeOnSelect = true,
   disabled = false
 }) {
+  const size = controlSize ?? sizeAlias;
   const [open, setOpen] = React12.useState(false);
   const triggerRef = React12.useRef(null);
   const panelRef = React12.useRef(null);
@@ -1423,11 +1426,13 @@ function Dropdown({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  return /* @__PURE__ */ jsxs16("div", { className: cn("fractal-dropdown", className), children: [
+  return /* @__PURE__ */ jsxs16("div", { "data-control-size": size, className: cn("fractal-dropdown", className), children: [
     /* @__PURE__ */ jsxs16(
       "button",
       {
         ref: triggerRef,
+        id: triggerId,
+        "data-control-size": size,
         type: "button",
         disabled,
         "aria-haspopup": "listbox",
@@ -1435,6 +1440,7 @@ function Dropdown({
         "aria-label": triggerLabel,
         onClick: () => setOpen((o) => !o),
         className: cn(
+          "fractal-control",
           "fractal-dropdown-trigger",
           `fractal-dropdown-trigger--${size}`,
           `fractal-dropdown-trigger--${triggerVariant}`,
@@ -1524,6 +1530,7 @@ var Chip = React14.forwardRef(
     "span",
     {
       ref,
+      "data-fractal-border-surface": tone === "neutral" ? "surface-2" : void 0,
       className: cn("fractal-chip", `fractal-chip--${tone}`, className),
       ...props
     }
@@ -2203,8 +2210,8 @@ function Ghost({ className, width, height, radius, style, ...props }) {
 function GhostLine({ className, size = "md", width = "100%", ...props }) {
   return /* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-line", `fractal-ghost-line--${size}`, className), width, ...props });
 }
-function ButtonGhost({ className, size = "md", iconOnly = false, width, ...props }) {
-  return /* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
+function ButtonGhost({ className, size = "md", controlSize, iconOnly = false, width, ...props }) {
+  return /* @__PURE__ */ jsx27(Ghost, { "data-control-size": controlSize ?? size, className: cn("fractal-ghost-button", `fractal-ghost-button--${size}`, iconOnly && "fractal-ghost-button--icon-only", className), width, ...props });
 }
 function CardGhost({ className, lines = 3, showHeader = true, ...props }) {
   return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-card", className), ...props, children: [
@@ -2237,8 +2244,8 @@ function TextareaGhost({ className, labelWidth = "26%", ...props }) {
 function LabelGhost({ className, width = "26%", ...props }) {
   return /* @__PURE__ */ jsx27(GhostLine, { className: cn("fractal-ghost-label", className), size: "sm", width, ...props });
 }
-function FormFieldGhost({ className, labelWidth = "26%", multiline = false, ...props }) {
-  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-field", className), ...props, children: [
+function FormFieldGhost({ className, labelWidth = "26%", multiline = false, controlSize = "md", ...props }) {
+  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-field", className), ...props, children: [
     /* @__PURE__ */ jsx27(LabelGhost, { width: labelWidth }),
     /* @__PURE__ */ jsx27(Ghost, { className: cn("fractal-ghost-field__control", multiline && "fractal-ghost-field__control--multiline") })
   ] });
@@ -2263,8 +2270,8 @@ function LinkGhost({ className, width = 96, ...props }) {
   return /* @__PURE__ */ jsx27(GhostLine, { className: cn("fractal-ghost-link", className), size: "sm", width, ...props });
 }
 var TextButtonGhost = LinkGhost;
-function DropdownGhost({ className, ...props }) {
-  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", className: cn("fractal-ghost-dropdown", className), ...props, children: [
+function DropdownGhost({ className, controlSize = "md", ...props }) {
+  return /* @__PURE__ */ jsxs23("div", { "aria-hidden": "true", "data-control-size": controlSize, className: cn("fractal-ghost-dropdown", className), ...props, children: [
     /* @__PURE__ */ jsx27(GhostLine, { width: "38%" }),
     /* @__PURE__ */ jsx27(Ghost, { className: "fractal-ghost-dropdown__chevron" })
   ] });
@@ -2433,11 +2440,43 @@ var SidebarFooter = React16.forwardRef(
 SidebarFooter.displayName = "SidebarFooter";
 
 // src/components/SidePanel/SidePanel.tsx
+import * as React17 from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Close as Close2 } from "@mirror-physics/fractal-icons";
 import { jsx as jsx29, jsxs as jsxs25 } from "react/jsx-runtime";
 function SidePanel({ open, onClose, title, description, children, footer, size = "md", loading = false, loadingLabel = "Loading", className }) {
   useEscapeDismiss(80, onClose, open);
+  const bodyRef = React17.useRef(null);
+  const [scrollEdges, setScrollEdges] = React17.useState({ above: false, below: false });
+  React17.useLayoutEffect(() => {
+    const body = bodyRef.current;
+    if (!open || !body) return;
+    const measure = () => {
+      const maxScroll = Math.max(0, body.scrollHeight - body.clientHeight);
+      const top = Math.max(0, Math.min(body.scrollTop, maxScroll));
+      const above = maxScroll > 1 && top > 0;
+      const below = maxScroll - top > 1;
+      setScrollEdges((previous) => previous.above === above && previous.below === below ? previous : { above, below });
+    };
+    const resize = new ResizeObserver(measure);
+    const observeContent = () => {
+      resize.disconnect();
+      resize.observe(body);
+      for (const child of body.children) resize.observe(child);
+      measure();
+    };
+    const mutations = new MutationObserver(observeContent);
+    mutations.observe(body, { childList: true, subtree: true, characterData: true, attributes: true });
+    body.addEventListener("scroll", measure, { passive: true });
+    body.addEventListener("load", measure, true);
+    observeContent();
+    return () => {
+      resize.disconnect();
+      mutations.disconnect();
+      body.removeEventListener("scroll", measure);
+      body.removeEventListener("load", measure, true);
+    };
+  }, [open, loading]);
   if (!open) return null;
   return createPortal3(
     /* @__PURE__ */ jsx29("div", { className: "fractal-side-panel-overlay", onMouseDown: onClose, children: /* @__PURE__ */ jsxs25(
@@ -2449,15 +2488,15 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
         role: "dialog",
         onMouseDown: (event) => event.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsxs25("header", { className: "fractal-side-panel__header", children: [
+          /* @__PURE__ */ jsxs25("header", { className: "fractal-side-panel__header", "data-scroll-divider": scrollEdges.above, children: [
             /* @__PURE__ */ jsxs25("div", { className: "fractal-side-panel__heading", children: [
               typeof title === "string" ? /* @__PURE__ */ jsx29("h2", { className: "fractal-side-panel__title", children: title }) : /* @__PURE__ */ jsx29("div", { className: "fractal-side-panel__title", children: title }),
               description && /* @__PURE__ */ jsx29("p", { className: "fractal-side-panel__description", children: description })
             ] }),
             /* @__PURE__ */ jsx29("button", { type: "button", className: "fractal-side-panel__close", "aria-label": "Close panel", onClick: onClose, children: /* @__PURE__ */ jsx29(Close2, { size: 18 }) })
           ] }),
-          /* @__PURE__ */ jsx29("div", { "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx29(UILoader, { label: loadingLabel }) : children }),
-          footer && /* @__PURE__ */ jsx29("footer", { className: "fractal-side-panel__footer", children: footer })
+          /* @__PURE__ */ jsx29("div", { ref: bodyRef, "aria-busy": loading || void 0, className: cn("fractal-side-panel__body", loading && "fractal-side-panel__body--loading"), children: loading ? /* @__PURE__ */ jsx29(UILoader, { label: loadingLabel }) : children }),
+          footer && /* @__PURE__ */ jsx29("footer", { className: "fractal-side-panel__footer", "data-scroll-divider": scrollEdges.below, children: footer })
         ]
       }
     ) }),
@@ -2466,17 +2505,17 @@ function SidePanel({ open, onClose, title, description, children, footer, size =
 }
 
 // src/components/Textarea/Textarea.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
-var Textarea = React17.forwardRef(
+var Textarea = React18.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("textarea", { ref, className: cn("fractal-textarea", className), ...props })
 );
 Textarea.displayName = "Textarea";
 
 // src/components/TextButton/TextButton.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
-var TextButton = React18.forwardRef(
+var TextButton = React19.forwardRef(
   ({ className, icon, iconPosition = "start", size = "md", tone = "primary", children, ...props }, ref) => /* @__PURE__ */ jsxs26(
     "button",
     {
@@ -2495,7 +2534,7 @@ var TextButton = React18.forwardRef(
 TextButton.displayName = "TextButton";
 
 // src/components/FileDropzone/FileDropzone.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import { Close as Close3, FileArrowUp } from "@mirror-physics/fractal-icons";
 import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 function FileDropzone({
@@ -2508,9 +2547,9 @@ function FileDropzone({
   description = "Files stay attached to this record.",
   className
 }) {
-  const inputId = React19.useId();
-  const inputRef = React19.useRef(null);
-  const [isDragging, setIsDragging] = React19.useState(false);
+  const inputId = React20.useId();
+  const inputRef = React20.useRef(null);
+  const [isDragging, setIsDragging] = React20.useState(false);
   const addFiles = (nextFiles) => {
     if (disabled) return;
     const additions = Array.from(nextFiles);