@hilum/ui 3.6.11 → 3.7.0

package/dist/index.d.ts

@@ -455,10 +455,12 @@ interface CardHeadingProps {
 }
 declare function CardHeading({ title, description, actions, children, className }: CardHeadingProps): react_jsx_runtime.JSX.Element;
 
+type CardMobileSurface = "default" | "flat" | "flush";
 declare const cardVariants: (props?: ({
-    variant?: "default" | "ghost" | "muted" | "responsive" | null | undefined;
+    variant?: "default" | "ghost" | "muted" | "outlined" | "elevated" | "responsive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CardProps extends React.ComponentProps<"div">, VariantProps<typeof cardVariants> {
+    mobileSurface?: CardMobileSurface;
 }
 declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CardHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -616,6 +618,18 @@ declare const CollapsibleRoot: React.ForwardRefExoticComponent<Collapsible.Colla
 declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Collapsible.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const CollapsibleContent: React.ForwardRefExoticComponent<Collapsible.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
 
+type ControlDensity = "default" | "compact";
+type ControlMobileSurface = "default" | "flush";
+interface InputProps extends React.ComponentProps<"input"> {
+    density?: ControlDensity;
+    mobileDensity?: ControlDensity;
+    mobileSurface?: ControlMobileSurface;
+}
+declare function Input({ className, type, density, mobileDensity, mobileSurface, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+declare namespace Input {
+    var displayName: string;
+}
+
 interface ColorInputProps {
     value: string;
     onChange: (next: string) => void;
@@ -625,12 +639,13 @@ interface ColorInputProps {
     className?: string;
     disabled?: boolean;
     presets?: string[];
+    mobileSurface?: ControlMobileSurface;
 }
 /**
  * Compact, inline color input designed for designer property panels.
  * Combines a swatch trigger (ColorPicker), a hex input, and an optional opacity field.
  */
-declare function ColorInput({ value, onChange, opacity, onOpacityChange, className, disabled, presets, }: ColorInputProps): react_jsx_runtime.JSX.Element;
+declare function ColorInput({ value, onChange, opacity, onOpacityChange, className, disabled, presets, mobileSurface, }: ColorInputProps): react_jsx_runtime.JSX.Element;
 declare namespace ColorInput {
     var displayName: string;
 }
@@ -1249,11 +1264,6 @@ declare const InputOTPSlot: React.ForwardRefExoticComponent<React.HTMLAttributes
 } & React.RefAttributes<HTMLDivElement>>;
 declare const InputOTPSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
-declare namespace Input {
-    var displayName: string;
-}
-
 declare const Kbd: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
 
 declare const Label: React.ForwardRefExoticComponent<Omit<Label$1.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
@@ -1676,6 +1686,9 @@ interface SelectTriggerProps extends HTMLAttributes<HTMLButtonElement>, VariantP
     icon?: IconComponent;
     placeholder?: string;
     error?: string;
+    density?: ControlDensity;
+    mobileDensity?: ControlDensity;
+    mobileSurface?: ControlMobileSurface;
 }
 declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 interface SelectContentProps {
@@ -1984,9 +1997,14 @@ interface SwitchProps extends Omit<HTMLAttributes<HTMLDivElement>, "onToggle"> {
 }
 declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLDivElement>>;
 
+type TableDensity = "default" | "compact";
+type TableMobileSurface = "default" | "flat";
 interface TableProps extends HTMLAttributes<HTMLTableElement> {
     children: ReactNode;
     containerClassName?: string;
+    density?: TableDensity;
+    mobileDensity?: TableDensity;
+    mobileSurface?: TableMobileSurface;
 }
 declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
@@ -2055,7 +2073,12 @@ interface TabsSubtlePanelProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const TabsSubtlePanel: React.ForwardRefExoticComponent<TabsSubtlePanelProps & React.RefAttributes<HTMLDivElement>>;
 
-declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
+interface TextareaProps extends React.ComponentProps<"textarea"> {
+    density?: ControlDensity;
+    mobileDensity?: ControlDensity;
+    mobileSurface?: ControlMobileSurface;
+}
+declare function Textarea({ className, density, mobileDensity, mobileSurface, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;
 
 interface ThinkingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
     label?: string;
@@ -2142,12 +2165,13 @@ interface TitledCardProps {
         className?: string;
     }>;
     contentPadding?: "default" | "flush-mobile" | "flush";
+    mobileSurface?: CardMobileSurface;
     className?: string;
     contentClassName?: string;
     containerClassName?: string;
     titleClassName?: string;
 }
-declare function TitledCard({ title, subtitle, children, actionButtons, icon: Icon, contentPadding, className, contentClassName, containerClassName, titleClassName, }: TitledCardProps): react_jsx_runtime.JSX.Element;
+declare function TitledCard({ title, subtitle, children, actionButtons, icon: Icon, contentPadding, mobileSurface, className, contentClassName, containerClassName, titleClassName, }: TitledCardProps): react_jsx_runtime.JSX.Element;
 declare namespace TitledCard {
     var displayName: string;
 }
@@ -2228,4 +2252,4 @@ interface UsageBarProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function UsageBar({ label, value, max, percent, valueLabel, showPercent, layout, tone, className, barClassName, indicatorClassName, ...props }: UsageBarProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionGroup, AccordionItem, AccordionTrigger, AccountMenuContent, AccountMenuHeader, AccountMenuItem, AccountMenuSection, AccountMenuSeparator, ActionPanel, ActivityFeed, Alert, AlertDescription, AlertDialogRoot as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, type AskUserAnswer, type AskUserOption, type AskUserQuestion, AskUserQuestions, type AskUserQuestionsProps, AspectRatioRoot as AspectRatio, Avatar, AvatarFallback, AvatarImage, AvatarStack, type AvatarStackItem, AvatarWithStatus, Badge, type BadgeColor, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem$1 as BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupItem, type ButtonProps, CHART_COLORS, Calendar, type CalendarProps, Callout, type CalloutProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardHeading, CardMedia, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatMessage, type ChatMessageProps, CheckboxRoot as Checkbox, CheckboxCard, type CheckboxCardProps, CheckboxGroup, CheckboxItem, CollapsibleRoot as Collapsible, CollapsibleContent, CollapsibleTrigger, type ColorFormat, ColorInput, type ColorInputProps, ColorPicker, ColorPickerPopover, type ColorPickerPopoverProps, ColorPickerPortalContainer, type ColorPickerProps, ColorSwatch, type ColorSwatchProps, ColorTile, Combobox, type ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, type CommandPaletteItem, CommandSeparator, CommandShortcut, ContextMenuRoot as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, type DataTransferAction, DataTransferControls, type DataTransferControlsProps, type DataTransferScopeOption, DatePicker, type DescriptionItem, DescriptionList, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DrawerRoot as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Dropdown, DropdownLabel, DropdownMenuRoot as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownSeparator, EmptyState, type FeedEvent, Field, FileDropzone, type FileDropzoneProps, type FileDropzoneSelectedFile, FileThumbnail, type FileThumbnailProps, GridList, GridListAccentCard, GridListCard, HelpTooltip, type HelpTooltipProps, HoverCardRoot as HoverCard, HoverCardContent, HoverCardTrigger, type IconComponent, type IconLibrary, type IconName, IconProvider, Input, InputCopy, type InputCopyProps, InputField, InputGroup, InputMessage, type InputMessageProps, type InputMessageSlotContext, InputNumber, type InputNumberProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label, MediaAssetCard, type MediaAssetCardProps, MediaAssetGrid, MediaAssetGridItem, type MediaAssetGridProps, MediaObject, MenuItem, MenubarRoot as Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MobileDrawer, type MobileDrawerProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavItem, type NavItemProps, NavMenu, type NavMenuItem, type NavMenuProps, NavigationMenuRoot as NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Notification, PageHeading, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type ParsedColor, PopoverRoot as Popover, PopoverClose, PopoverContent, PopoverTrigger, ProgressRoot as Progress, PropertyRow, type PropertyRowProps, type QueuedMessage, type RadioCardOption, RadioCards, RadioGroup, RadioGroupItem, RadioItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTextEditor, type RichTextEditorProps, type RichTextImageUrlHandler, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, ScrollAreaRoot as ScrollArea, SearchableTable, type SearchableTableColumn, type SearchableTableFilterOption, type SearchableTableProps, SectionHeading, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectProps, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, type ShapeClasses, ShapeProvider, type ShapeVariant, SheetRoot as Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SliderComfortable, type SliderComfortableProps, SliderControl, type SliderProps, type SliderValue, Spinner, StackedList, StackedListItem, StatCard, StatCardGrid, type StatCardGridProps, type StatCardProps, StatCardSlot, type StatCardSlotProps, StatusBadge, type StatusBadgeProps, type StatusBadgeVariant, StatusTile, StatusTileGrid, type StatusTileGridProps, type StatusTileProps, type Step, type StepStatus, Steps, SummaryTile, SummaryTileGrid, type SummaryTileGridProps, type SummaryTileProps, SurfaceProvider, Switch, type SwitchProps, TabItem, type TabItemProps, TabPanel, type TabPanelProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, type TabsListProps, type TabsProps, TabsSubtle, TabsSubtleItem, TabsSubtlePanel, TabsTrigger, Textarea, ThinkingIndicator, type ThinkingIndicatorProps, ThinkingStep, ThinkingStepDetails, type ThinkingStepDetailsProps, ThinkingStepImage, type ThinkingStepImageProps, type ThinkingStepProps, ThinkingStepSource, type ThinkingStepSourceProps, ThinkingStepSources, type ThinkingStepSourcesProps, type ThinkingStepStatus, ThinkingSteps, ThinkingStepsContent, type ThinkingStepsContentProps, ThinkingStepsHeader, type ThinkingStepsHeaderProps, type ThinkingStepsProps, TitledCard, type TitledCardProps, Toaster, ToggleRoot as Toggle, ToggleGroupRoot as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortalContainer, type TooltipProps, TooltipProvider, TooltipRoot, type TooltipSide, TooltipTrigger, UrlRedirectPrompt, type UrlRedirectPromptProps, UsageBar, type UsageBarLayout, type UsageBarProps, type UsageBarTone, type ValuePosition, badgeColors, badgeVariants, buildParsed, buttonVariants, cardVariants, cn, formatDate, formatFileSize, hasUrlHandleChanged, iconLibraryLabels, iconLibraryOrder, loadPdfjs, navigationMenuTriggerStyle, normalizeUrlHandle, parseColor, renderPdfFirstPage, shapeMap, spinnerVariants, statusBadgeVariantFor, statusLabel, toggleVariants, triggerVariants, urlResourcePath, useDropdown, useIcon, useIconLibrary, useIcons, useOptionalSidebar, useShape, useShapeContext, useSidebar, useSurface };
+export { Accordion, AccordionContent, AccordionGroup, AccordionItem, AccordionTrigger, AccountMenuContent, AccountMenuHeader, AccountMenuItem, AccountMenuSection, AccountMenuSeparator, ActionPanel, ActivityFeed, Alert, AlertDescription, AlertDialogRoot as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, type AskUserAnswer, type AskUserOption, type AskUserQuestion, AskUserQuestions, type AskUserQuestionsProps, AspectRatioRoot as AspectRatio, Avatar, AvatarFallback, AvatarImage, AvatarStack, type AvatarStackItem, AvatarWithStatus, Badge, type BadgeColor, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem$1 as BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupItem, type ButtonProps, CHART_COLORS, Calendar, type CalendarProps, Callout, type CalloutProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardHeading, CardMedia, type CardMobileSurface, type CardProps, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, ChatMessage, type ChatMessageProps, CheckboxRoot as Checkbox, CheckboxCard, type CheckboxCardProps, CheckboxGroup, CheckboxItem, CollapsibleRoot as Collapsible, CollapsibleContent, CollapsibleTrigger, type ColorFormat, ColorInput, type ColorInputProps, ColorPicker, ColorPickerPopover, type ColorPickerPopoverProps, ColorPickerPortalContainer, type ColorPickerProps, ColorSwatch, type ColorSwatchProps, ColorTile, Combobox, type ComboboxOption, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, type CommandPaletteItem, CommandSeparator, CommandShortcut, ContextMenuRoot as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type ControlDensity, type ControlMobileSurface, DataTable, type DataTransferAction, DataTransferControls, type DataTransferControlsProps, type DataTransferScopeOption, DatePicker, type DescriptionItem, DescriptionList, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DrawerRoot as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Dropdown, DropdownLabel, DropdownMenuRoot as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownSeparator, EmptyState, type FeedEvent, Field, FileDropzone, type FileDropzoneProps, type FileDropzoneSelectedFile, FileThumbnail, type FileThumbnailProps, GridList, GridListAccentCard, GridListCard, HelpTooltip, type HelpTooltipProps, HoverCardRoot as HoverCard, HoverCardContent, HoverCardTrigger, type IconComponent, type IconLibrary, type IconName, IconProvider, Input, InputCopy, type InputCopyProps, InputField, InputGroup, InputMessage, type InputMessageProps, type InputMessageSlotContext, InputNumber, type InputNumberProps, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Kbd, Label, MediaAssetCard, type MediaAssetCardProps, MediaAssetGrid, MediaAssetGridItem, type MediaAssetGridProps, MediaObject, MenuItem, MenubarRoot as Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MobileDrawer, type MobileDrawerProps, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavItem, type NavItemProps, NavMenu, type NavMenuItem, type NavMenuProps, NavigationMenuRoot as NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Notification, PageHeading, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type ParsedColor, PopoverRoot as Popover, PopoverClose, PopoverContent, PopoverTrigger, ProgressRoot as Progress, PropertyRow, type PropertyRowProps, type QueuedMessage, type RadioCardOption, RadioCards, RadioGroup, RadioGroupItem, RadioItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTextEditor, type RichTextEditorProps, type RichTextImageUrlHandler, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, ScrollAreaRoot as ScrollArea, SearchableTable, type SearchableTableColumn, type SearchableTableFilterOption, type SearchableTableProps, SectionHeading, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectProps, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, type ShapeClasses, ShapeProvider, type ShapeVariant, SheetRoot as Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, SliderComfortable, type SliderComfortableProps, SliderControl, type SliderProps, type SliderValue, Spinner, StackedList, StackedListItem, StatCard, StatCardGrid, type StatCardGridProps, type StatCardProps, StatCardSlot, type StatCardSlotProps, StatusBadge, type StatusBadgeProps, type StatusBadgeVariant, StatusTile, StatusTileGrid, type StatusTileGridProps, type StatusTileProps, type Step, type StepStatus, Steps, SummaryTile, SummaryTileGrid, type SummaryTileGridProps, type SummaryTileProps, SurfaceProvider, Switch, type SwitchProps, TabItem, type TabItemProps, TabPanel, type TabPanelProps, Table, TableBody, TableCaption, TableCell, type TableDensity, TableFooter, TableHead, TableHeader, type TableMobileSurface, type TableProps, TableRow, Tabs, TabsContent, TabsList, type TabsListProps, type TabsProps, TabsSubtle, TabsSubtleItem, TabsSubtlePanel, TabsTrigger, Textarea, type TextareaProps, ThinkingIndicator, type ThinkingIndicatorProps, ThinkingStep, ThinkingStepDetails, type ThinkingStepDetailsProps, ThinkingStepImage, type ThinkingStepImageProps, type ThinkingStepProps, ThinkingStepSource, type ThinkingStepSourceProps, ThinkingStepSources, type ThinkingStepSourcesProps, type ThinkingStepStatus, ThinkingSteps, ThinkingStepsContent, type ThinkingStepsContentProps, ThinkingStepsHeader, type ThinkingStepsHeaderProps, type ThinkingStepsProps, TitledCard, type TitledCardProps, Toaster, ToggleRoot as Toggle, ToggleGroupRoot as ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipPortalContainer, type TooltipProps, TooltipProvider, TooltipRoot, type TooltipSide, TooltipTrigger, UrlRedirectPrompt, type UrlRedirectPromptProps, UsageBar, type UsageBarLayout, type UsageBarProps, type UsageBarTone, type ValuePosition, badgeColors, badgeVariants, buildParsed, buttonVariants, cardVariants, cn, formatDate, formatFileSize, hasUrlHandleChanged, iconLibraryLabels, iconLibraryOrder, loadPdfjs, navigationMenuTriggerStyle, normalizeUrlHandle, parseColor, renderPdfFirstPage, shapeMap, spinnerVariants, statusBadgeVariantFor, statusLabel, toggleVariants, triggerVariants, urlResourcePath, useDropdown, useIcon, useIconLibrary, useIcons, useOptionalSidebar, useShape, useShapeContext, useSidebar, useSurface };

package/dist/index.js

@@ -3653,10 +3653,17 @@ function CardHeading({ title, description, actions, children, className }) {
     }
   );
 }
+var cardMobileSurfaceClasses = {
+  default: "",
+  flat: "max-sm:rounded-none max-sm:border-x-0 max-sm:border-y max-sm:bg-transparent max-sm:shadow-none",
+  flush: "max-sm:rounded-none max-sm:border-0 max-sm:bg-transparent max-sm:shadow-none"
+};
 var cardVariants = cva(["rounded-xl", motionClasses], {
   variants: {
     variant: {
       default: "bg-card shadow-natural",
+      outlined: "border border-border bg-card shadow-natural",
+      elevated: "border border-border bg-card shadow-elevated",
       muted: "bg-muted shadow-natural",
       ghost: "bg-transparent",
       responsive: "border border-border bg-card p-5 shadow-natural sm:rounded-xl max-sm:rounded-none max-sm:border-x-0 max-sm:border-y max-sm:bg-transparent max-sm:px-0 max-sm:py-5 max-sm:shadow-none"
@@ -3667,12 +3674,12 @@ var cardVariants = cva(["rounded-xl", motionClasses], {
   }
 });
 var Card = React17.forwardRef(
-  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ className, variant, mobileSurface = "default", ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       "data-slot": "card",
-      className: cn(cardVariants({ variant }), className),
+      className: cn(cardVariants({ variant }), cardMobileSurfaceClasses[mobileSurface], className),
       ...props
     }
   )
@@ -3982,7 +3989,8 @@ function ChartContainer({
       "data-slot": "chart",
       "data-chart": chartId,
       className: cn(
-        "flex aspect-video justify-center text-xs",
+        "flex justify-center text-xs",
+        height === void 0 ? "aspect-video" : "w-full",
         "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground",
         "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50",
         "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border",
@@ -7997,7 +8005,8 @@ function ColorInput2({
   onOpacityChange,
   className,
   disabled,
-  presets
+  presets,
+  mobileSurface = "default"
 }) {
   const shape3 = useShape();
   const [hex, setHex] = React17.useState(value);
@@ -8008,6 +8017,7 @@ function ColorInput2({
     if (/^#([0-9a-fA-F]{3}){1,2}$/.test(next)) onChange(next);
     else setHex(value);
   };
+  const mobileSurfaceClass = mobileSurface === "flush" ? "max-sm:rounded-none max-sm:border-x-0 max-sm:border-t-0 max-sm:bg-transparent max-sm:px-0 max-sm:shadow-none max-sm:focus-within:ring-0" : "";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -8016,18 +8026,21 @@ function ColorInput2({
         shape3.input,
         "focus-within:border-brand-primary focus-within:ring-2 focus-within:ring-brand-primary/20",
         motionClasses,
+        mobileSurfaceClass,
         disabled && "opacity-50 pointer-events-none",
         className
       ),
       children: [
         /* @__PURE__ */ jsx(
-          ColorPicker,
+          ColorPickerPopover,
           {
             value,
             onChange,
             ...presets !== void 0 && { presets },
             ...disabled !== void 0 && { disabled },
-            className: "h-full w-8 border-0 rounded-none focus-visible:ring-0"
+            triggerShowValue: false,
+            hideEyedropper: true,
+            triggerClassName: "h-full w-8 border-0 rounded-none bg-transparent px-1 hover:bg-hover focus-visible:ring-0"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -8832,18 +8845,30 @@ function ContextMenuShortcut({ className, ...props }) {
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 var TableContext = createContext(null);
 var Table = forwardRef(
-  ({ children, className, containerClassName, ...props }, ref) => {
+  ({
+    children,
+    className,
+    containerClassName,
+    density = "default",
+    mobileDensity = "default",
+    mobileSurface = "default",
+    ...props
+  }, ref) => {
     const containerRef = useRef(null);
     const { activeIndex, itemRects, sessionRef, handlers, registerItem, measureItems } = useProximityHover(containerRef);
     useEffect(() => {
       measureItems();
     }, [measureItems, children]);
     const activeRect = activeIndex !== null ? itemRects[activeIndex] : null;
-    return /* @__PURE__ */ jsx(TableContext.Provider, { value: { registerItem, activeIndex }, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(TableContext.Provider, { value: { registerItem, activeIndex, density, mobileDensity }, children: /* @__PURE__ */ jsxs(
       "div",
       {
         ref: containerRef,
-        className: cn("relative", containerClassName),
+        className: cn(
+          "relative",
+          mobileSurface === "flat" && "max-sm:-mx-4 max-sm:overflow-x-auto max-sm:rounded-none max-sm:border-x-0",
+          containerClassName
+        ),
         onMouseEnter: handlers.onMouseEnter,
         onMouseMove: handlers.onMouseMove,
         onMouseLeave: handlers.onMouseLeave,
@@ -8878,7 +8903,7 @@ var Table = forwardRef(
             "table",
             {
               ref,
-              className: cn("w-full text-[13px] border-collapse", className),
+              className: cn("w-full border-collapse text-[13px]", className),
               ...props,
               children
             }
@@ -8935,21 +8960,40 @@ var TableRow = forwardRef(
 );
 TableRow.displayName = "TableRow";
 var TableHead = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("th", { ref, className: cn("px-3 py-2 text-left text-foreground", className), ...props })
+  ({ className, ...props }, ref) => {
+    const ctx = useContext(TableContext);
+    const densityClass = ctx?.density === "compact" ? "px-2 py-1.5" : "px-3 py-2";
+    const mobileDensityClass = ctx?.mobileDensity === "compact" ? "max-sm:px-2 max-sm:py-1.5" : "";
+    return /* @__PURE__ */ jsx(
+      "th",
+      {
+        ref,
+        className: cn(densityClass, mobileDensityClass, "text-left text-foreground", className),
+        ...props
+      }
+    );
+  }
 );
 TableHead.displayName = "TableHead";
 var TableCell = forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "td",
-    {
-      ref,
-      className: cn(
-        "px-3 py-2 text-muted-foreground transition-colors duration-80 group-[.is-active]/row:text-foreground",
-        className
-      ),
-      ...props
-    }
-  )
+  ({ className, ...props }, ref) => {
+    const ctx = useContext(TableContext);
+    const densityClass = ctx?.density === "compact" ? "px-2 py-1.5" : "px-3 py-2";
+    const mobileDensityClass = ctx?.mobileDensity === "compact" ? "max-sm:px-2 max-sm:py-1.5" : "";
+    return /* @__PURE__ */ jsx(
+      "td",
+      {
+        ref,
+        className: cn(
+          densityClass,
+          mobileDensityClass,
+          "text-muted-foreground transition-colors duration-80 group-[.is-active]/row:text-foreground",
+          className
+        ),
+        ...props
+      }
+    );
+  }
 );
 TableCell.displayName = "TableCell";
 var TableFooter = forwardRef(
@@ -8967,7 +9011,26 @@ var TableCaption = forwardRef(
   )
 );
 TableCaption.displayName = "TableCaption";
-function Input({ className, type, ...props }) {
+var inputDensityClasses = {
+  default: "h-10 px-3 py-1",
+  compact: "h-8 px-2.5 py-1"
+};
+var inputMobileDensityClasses = {
+  default: "",
+  compact: "max-sm:h-8 max-sm:px-2.5 max-sm:py-1"
+};
+var controlMobileSurfaceClasses = {
+  default: "",
+  flush: "max-sm:rounded-none max-sm:border-x-0 max-sm:border-t-0 max-sm:bg-transparent max-sm:px-0 max-sm:shadow-none max-sm:focus-visible:ring-0 max-sm:focus-visible:ring-offset-0"
+};
+function Input({
+  className,
+  type,
+  density = "default",
+  mobileDensity = "default",
+  mobileSurface = "default",
+  ...props
+}) {
   const shape3 = useShape();
   return /* @__PURE__ */ jsx(
     "input",
@@ -8975,12 +9038,15 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "flex h-10 w-full px-3 py-1",
+        "flex w-full",
+        inputDensityClasses[density],
+        inputMobileDensityClasses[mobileDensity],
         shape3.input,
         "body text-foreground placeholder:text-muted-foreground",
         controlSurfaceClasses,
         motionClasses,
         focusRingClasses,
+        controlMobileSurfaceClasses[mobileSurface],
         "focus-visible:border-brand-primary",
         "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
         "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
@@ -9303,8 +9369,31 @@ var triggerVariants = cva(
     }
   }
 );
+var selectTriggerDensityClasses = {
+  default: "h-9 px-3",
+  compact: "h-8 px-2.5"
+};
+var selectTriggerMobileDensityClasses = {
+  default: "",
+  compact: "max-sm:h-8 max-sm:px-2.5"
+};
+var selectTriggerMobileSurfaceClasses = {
+  default: "",
+  flush: "max-sm:rounded-none max-sm:border-x-0 max-sm:border-t-0 max-sm:bg-transparent max-sm:px-0 max-sm:shadow-none max-sm:focus-visible:ring-0 max-sm:focus-visible:ring-offset-0"
+};
 var SelectTrigger = forwardRef(
-  ({ className, variant, icon: Icon, placeholder = "Select\u2026", error, children, ...props }, ref) => {
+  ({
+    className,
+    variant,
+    icon: Icon,
+    placeholder = "Select\u2026",
+    error,
+    children,
+    density = "default",
+    mobileDensity = "default",
+    mobileSurface = "default",
+    ...props
+  }, ref) => {
     const { value, open, setOpen, disabled, triggerRef, labelMap } = useSelectContext();
     const shape3 = useShape();
     const label = value ? labelMap.current.get(value) ?? value : void 0;
@@ -9332,6 +9421,9 @@ var SelectTrigger = forwardRef(
           "aria-invalid": !!error || void 0,
           className: cn(
             triggerVariants({ variant }),
+            selectTriggerDensityClasses[density],
+            selectTriggerMobileDensityClasses[mobileDensity],
+            selectTriggerMobileSurfaceClasses[mobileSurface],
             shape3.input,
             error && "border-destructive/50 hover:border-destructive/50",
             className
@@ -14127,13 +14219,16 @@ function SidebarGroupLabel({
   ...props
 }) {
   const Comp = asChild ? Slot$1.Root : "div";
+  const state = useOptionalSidebar()?.state ?? "expanded";
   return /* @__PURE__ */ jsx(
     Comp,
     {
       "data-sidebar": "group-label",
+      "data-state": state,
       className: cn(
         "flex h-8 shrink-0 items-center rounded-md px-2 label text-muted-foreground",
         "outline-none ring-ring transition-[margin,opacity] duration-200 ease-linear",
+        "data-[state=collapsed]:h-0 data-[state=collapsed]:m-0 data-[state=collapsed]:overflow-hidden data-[state=collapsed]:p-0 data-[state=collapsed]:opacity-0",
         "group-data-[state=collapsed]/sidebar-wrapper:opacity-0",
         "group-data-[state=collapsed]/sidebar-wrapper:h-0",
         "group-data-[state=collapsed]/sidebar-wrapper:m-0",
@@ -14191,10 +14286,12 @@ function SidebarMenuButton({
   ...props
 }) {
   const Comp = asChild ? Slot$1.Root : "button";
+  const state = useOptionalSidebar()?.state ?? "expanded";
   const button = /* @__PURE__ */ jsx(
     Comp,
     {
       "data-sidebar": "menu-button",
+      "data-state": state,
       "data-active": isActive,
       "data-size": size,
       className: cn(
@@ -14207,6 +14304,7 @@ function SidebarMenuButton({
         "active:bg-muted",
         "disabled:pointer-events-none disabled:opacity-50",
         "[&>svg]:size-4 [&>svg]:shrink-0",
+        "[&>span]:min-w-0 [&>span]:truncate",
         // Size variants
         size === "sm" && "h-7 text-xs",
         size === "lg" && "h-10",
@@ -14216,9 +14314,12 @@ function SidebarMenuButton({
           "hover:bg-brand-primary/15 hover:text-brand-primary"
         ],
         // Collapsed state
+        "data-[state=collapsed]:size-9 data-[state=collapsed]:justify-center data-[state=collapsed]:p-0",
+        "data-[state=collapsed]:[&>span]:hidden",
         "group-data-[state=collapsed]/sidebar-wrapper:justify-center",
         "group-data-[state=collapsed]/sidebar-wrapper:size-9",
         "group-data-[state=collapsed]/sidebar-wrapper:p-0",
+        "group-data-[state=collapsed]/sidebar-wrapper:[&>span]:hidden",
         className
       ),
       ...props,
@@ -14271,13 +14372,16 @@ function SidebarMenuAction({
   );
 }
 function SidebarMenuBadge({ className, ...props }) {
+  const state = useOptionalSidebar()?.state ?? "expanded";
   return /* @__PURE__ */ jsx(
     "div",
     {
       "data-sidebar": "menu-badge",
+      "data-state": state,
       className: cn(
         "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-full",
         "caption font-medium bg-muted text-muted-foreground px-1",
+        "data-[state=collapsed]:hidden",
         "group-data-[state=collapsed]/sidebar-wrapper:hidden",
         className
       ),
@@ -14313,12 +14417,15 @@ function SidebarMenuSkeleton({
   );
 }
 function SidebarMenuSub({ className, ...props }) {
+  const state = useOptionalSidebar()?.state ?? "expanded";
   return /* @__PURE__ */ jsx(
     "ul",
     {
       "data-sidebar": "menu-sub",
+      "data-state": state,
       className: cn(
         "mx-3.5 flex min-w-0 flex-col gap-1 border-l border-border pl-3",
+        "data-[state=collapsed]:hidden",
         "group-data-[state=collapsed]/sidebar-wrapper:hidden",
         className
       ),
@@ -15666,20 +15773,41 @@ var TabsSubtlePanel = forwardRef(
   }
 );
 TabsSubtlePanel.displayName = "TabsSubtlePanel";
-function Textarea({ className, ...props }) {
+var textareaDensityClasses = {
+  default: "min-h-[80px] px-3 py-2",
+  compact: "min-h-16 px-2.5 py-1.5"
+};
+var textareaMobileDensityClasses = {
+  default: "",
+  compact: "max-sm:min-h-16 max-sm:px-2.5 max-sm:py-1.5"
+};
+var textareaMobileSurfaceClasses = {
+  default: "",
+  flush: "max-sm:rounded-none max-sm:border-x-0 max-sm:border-t-0 max-sm:bg-transparent max-sm:px-0 max-sm:shadow-none max-sm:focus-visible:ring-0 max-sm:focus-visible:ring-offset-0"
+};
+function Textarea({
+  className,
+  density = "default",
+  mobileDensity = "default",
+  mobileSurface = "default",
+  ...props
+}) {
   const shape3 = useShape();
   return /* @__PURE__ */ jsx(
     "textarea",
     {
       "data-slot": "textarea",
       className: cn(
-        "flex min-h-[80px] w-full px-3 py-2",
+        "flex w-full",
+        textareaDensityClasses[density],
+        textareaMobileDensityClasses[mobileDensity],
         shape3.input,
         "body text-foreground placeholder:text-muted-foreground",
         "resize-none",
         controlSurfaceClasses,
         motionClasses,
         focusRingClasses,
+        textareaMobileSurfaceClasses[mobileSurface],
         "focus-visible:border-brand-primary",
         "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted",
         className
@@ -15992,6 +16120,7 @@ function TitledCard({
   actionButtons,
   icon: Icon,
   contentPadding = "default",
+  mobileSurface = "flush",
   className,
   contentClassName,
   containerClassName,
@@ -16000,12 +16129,13 @@ function TitledCard({
   const hasHeader = Boolean(title || subtitle || actionButtons);
   const canUseCardHeading = Boolean(title) && !actionButtons && !titleClassName;
   const contentPaddingClassName = contentPadding === "flush" ? "p-0" : contentPadding === "flush-mobile" ? "p-0 sm:p-5" : hasHeader ? "p-4 sm:p-5" : "p-0 sm:p-5";
+  const isMobileFlat = mobileSurface === "flat" || mobileSurface === "flush";
   return /* @__PURE__ */ jsxs(
     Card,
     {
+      mobileSurface,
       className: cn(
         "min-w-0 overflow-hidden border border-border bg-card shadow-natural",
-        "max-sm:rounded-none max-sm:border-0 max-sm:bg-transparent max-sm:shadow-none",
         containerClassName,
         className
       ),
@@ -16016,32 +16146,46 @@ function TitledCard({
           {
             title,
             ...subtitle ? { description: subtitle } : {},
-            className: "max-sm:border-b-0 max-sm:px-0 max-sm:pb-3",
+            className: cn(isMobileFlat && "max-sm:border-b-0 max-sm:px-0 max-sm:pb-3"),
             children: Icon && /* @__PURE__ */ jsx(Icon, { className: "size-5 shrink-0 text-muted-foreground" })
           }
-        ) : hasHeader ? /* @__PURE__ */ jsxs(CardHeader, { className: "flex flex-col gap-3 border-b border-border p-4 max-sm:border-b-0 max-sm:px-0 max-sm:pb-3 sm:flex-row sm:items-start sm:justify-between sm:p-5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            title && /* @__PURE__ */ jsxs(
-              CardTitle,
-              {
-                className: cn(
-                  "flex min-w-0 items-center gap-2 text-base leading-tight sm:text-lg",
-                  titleClassName
-                ),
-                children: [
-                  Icon && /* @__PURE__ */ jsx(Icon, { className: "size-5 shrink-0 text-muted-foreground" }),
-                  /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: title })
-                ]
-              }
+        ) : hasHeader ? /* @__PURE__ */ jsxs(
+          CardHeader,
+          {
+            className: cn(
+              "flex flex-col gap-3 border-b border-border p-4 sm:flex-row sm:items-start sm:justify-between sm:p-5",
+              isMobileFlat && "max-sm:border-b-0 max-sm:px-0 max-sm:pb-3"
             ),
-            subtitle && /* @__PURE__ */ jsx(CardDescription, { className: "mt-1 max-w-3xl text-sm leading-5", children: subtitle })
-          ] }),
-          actionButtons && /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 flex-wrap items-center gap-2 sm:w-auto sm:justify-end", children: actionButtons })
-        ] }) : null,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                title && /* @__PURE__ */ jsxs(
+                  CardTitle,
+                  {
+                    className: cn(
+                      "flex min-w-0 items-center gap-2 text-base leading-tight sm:text-lg",
+                      titleClassName
+                    ),
+                    children: [
+                      Icon && /* @__PURE__ */ jsx(Icon, { className: "size-5 shrink-0 text-muted-foreground" }),
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: title })
+                    ]
+                  }
+                ),
+                subtitle && /* @__PURE__ */ jsx(CardDescription, { className: "mt-1 max-w-3xl text-sm leading-5", children: subtitle })
+              ] }),
+              actionButtons && /* @__PURE__ */ jsx("div", { className: "flex w-full min-w-0 flex-wrap items-center gap-2 sm:w-auto sm:justify-end", children: actionButtons })
+            ]
+          }
+        ) : null,
         children && /* @__PURE__ */ jsx(
           CardContent,
           {
-            className: cn(contentPaddingClassName, "min-w-0 max-sm:px-0", contentClassName),
+            className: cn(
+              contentPaddingClassName,
+              "min-w-0",
+              isMobileFlat && "max-sm:px-0",
+              contentClassName
+            ),
             children
           }
         )