twico-ui 1.42.0 → 1.43.0

package/dist/index.d.cts

@@ -222,6 +222,20 @@ interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   onOpenChange?: (values: string[]) => void;
   /** Heading level wrapping each trigger button (document-outline semantics). @default 3 */
   headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** #446: render each panel's `content` only once the item has first been opened, then keep it
+   *  mounted so BOTH the open and close animations still have something to animate (the panel
+   *  interpolates `grid-template-rows: 0fr -> 1fr` from its real content, so an emptied panel would
+   *  collapse instantly). Cuts the DOM/hook cost of a page full of collapsed panels. Seeded from
+   *  `open`/`defaultOpen`, so a restored "these were open last time" set is never open-but-blank.
+   *  @default false */
+  mountOnOpen?: boolean;
+  /** #446: additionally unmount a panel's `content` again when it closes, trading the memory back
+   *  for a slightly cheaper page. Implies `mountOnOpen`. The unmount waits out the collapse
+   *  transition (in lockstep with `--duration-base`), so the close animation still plays. The wait is
+   *  a fixed 240 ms matching the DEFAULT `--duration-base` (220 ms); if you override that token to
+   *  something materially longer, the content is dropped before the panel finishes collapsing.
+   *  @default false */
+  unmountOnClose?: boolean;
 }
 
 interface AccordionItem {
@@ -267,7 +281,7 @@ type PolymorphicAs = React.ElementType;
  * style (and win over the component's base style, MUI-style); any nested object — a
  * selector key (`"&:hover"`, `":focus-visible"`, `"& > .child"`) or an at-rule
  * (`"@media (min-width: 600px)"`, `"@supports …"`, `"@container …"`) — is compiled to a
- * scoped stylesheet. Use design tokens for values, e.g. `color: "var(--color-primary)"`.
+ * scoped stylesheet. Use design tokens for values, e.g. `color: "var(--color-primary-subtle-fg)"`.
  * See docs/sx.md.
  */
 type Sx = React.CSSProperties & {
@@ -410,7 +424,14 @@ interface MenuItemDef {
  * @startingPoint section="Overlay" subtitle="Dropdown menu with headings & shortcuts" viewport="700x360"
  */
 interface MenuProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** Clickable trigger (e.g. a Button or IconButton). */
+  /** Clickable trigger (e.g. a Button or IconButton). **Pass a single focusable control** (a `Button`/`IconButton`, or any element
+   *  that is already a button/link). A passed element is CLONED to carry `tabIndex`, `aria-expanded`,
+   *  `aria-haspopup`, `aria-controls` and the open handler, and those are only valid on a control:
+   *  `aria-expanded` is prohibited on a plain `div`'s implicit `role="generic"` (#447). A non-control
+   *  element still works - it is given `role="button"` and Enter/Space - but wrapping the real button in
+   *  a `Box`/`Stack` to overlay a badge produces TWO tab stops for one control, so put the decoration
+   *  outside the trigger instead. An explicit `role` you set is always preserved. A wrapping `Tooltip`
+   *  must go OUTSIDE this component, not inside `trigger` - see docs/overlays.md. */
   trigger: React.ReactNode;
   items: MenuItemDef[];
   /** Horizontal alignment to the trigger. @default "start" */
@@ -513,7 +534,11 @@ interface BreadcrumbItem {
 interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
   /** Ordered trail; the last item renders as the current page. */
   items: BreadcrumbItem[];
-  /** Custom separator node (defaults to a chevron). */
+  /**
+   * Custom separator node (defaults to a chevron). The built-in chevron mirrors itself under
+   * `dir="rtl"`; a custom separator does NOT (#465) — it is rendered as given, so supply a
+   * direction-neutral glyph or handle the mirroring yourself.
+   */
   separator?: React.ReactNode;
   /** Collapse to first + last items past this count (0 = never). @default 0 */
   maxItems?: number;
@@ -2301,7 +2326,14 @@ interface DatatableQuery {
   /** `field`s of the columns currently shown (in column order) — the built-in Columns menu
    *  is the source of truth. Use it to fetch/project only the visible columns server-side.
    *  Always populated by the grid in `onServerChange`; optional so a hand-built query passed
-   *  to `runDatatableQuery` (which ignores it) need not supply it. */
+   *  to `runDatatableQuery` (which ignores it) need not supply it.
+   *
+   *  **Don't project purely by this list if any column has a per-row `editable` predicate (#436).** Such a
+   *  predicate runs client-side against the row object you sent, and usually reads a *different* field from the
+   *  one it gates. Drop that source field from the payload and it reads `undefined`, which typically evaluates
+   *  truthy — so the rule silently stops holding and the column becomes editable on every row. Always include the
+   *  fields your predicates read, whatever the user has hidden. (Hiding the gated column too does not help: a
+   *  hidden column is still offered by the batch editor and still written.) */
   visibleColumns?: string[];
   /** `field`s of the columns currently hidden via the Columns menu. Always populated in
    *  `onServerChange`; optional for the same reason as `visibleColumns`. */
@@ -2445,7 +2477,17 @@ interface DatatableColumn<T = any> {
   /** Make this column's cells editable (double-click to edit). Overrides the grid `editMode`. #424: pass a
    *  predicate `(row, { field }) => boolean` to make it editable only on the rows that satisfy it (like
    *  `cellStyle`/`cellClassName`). A `false` result behaves exactly like `editable: false` for that cell — no
-   *  editor on double-click/Enter/F2, and the cell is skipped by paste, cut and the batch editor. */
+   *  editor on double-click/Enter/F2, and the cell is skipped by paste, cut and the batch editor.
+   *
+   *  **With server-side column projection (#436):** the predicate runs against the row object the grid holds, so
+   *  every field it *reads* must survive projection. A predicate typically gates one column from another
+   *  (`{ field: "B", editable: (row) => !isLocked(row.A) }`); if you project by `visibleColumns` and `A` is not
+   *  sent, `row.A` is `undefined` and the predicate usually evaluates truthy — i.e. **editable on every row**.
+   *  Keep the fields a predicate reads in the payload unconditionally, regardless of visibility.
+   *
+   *  Note hiding the gated column does **not** protect it: a hidden column is still offered by the batch editor
+   *  (its list comes from all `columns`, not the visible ones) and is still written. That is deliberate — batch
+   *  -setting a column you keep off-screen is a supported use — so the projection is the thing to get right. */
   editable?: boolean | ((row: T, ctx: { field: string }) => boolean);
   /** Editor type. "select" (or any column with `valueOptions`) renders a dropdown; else a text/number input by column type. */
   editType?: "text" | "number" | "select";
@@ -2660,10 +2702,17 @@ interface CardGridProps<Row = any> extends Omit<React.HTMLAttributes<HTMLDivElem
   pageSize?: number;
   /** Options for the "per page" selector. @default [12, 24, 48, 96] */
   pageSizeOptions?: number[];
-  /** Controlled 0-based page. */
+  /**
+   * Controlled 0-based page. If it points past the last page of the current result set — a refetch or
+   * a deletion shrank `rows` — the grid clamps: it renders the last real page and reports the clamped
+   * index through `onPageChange` (#461). Keep it controlled only if you apply that callback, otherwise
+   * the grid and your state disagree. The clamp is skipped while `loading`, and in `serverMode`
+   * without `rowCount`, because the total is not knowable there.
+   */
   page?: number;
   /** Initial 0-based page when uncontrolled. @default 0 */
   defaultPage?: number;
+  /** Fires on user paging AND when the grid clamps an out-of-range page back into range (#461). */
   onPageChange?: (page: number) => void;
   onPageSizeChange?: (pageSize: number) => void;
   /** Show the "per page" selector in the footer. @default true */
@@ -3617,7 +3666,14 @@ declare function Pagination(props: PaginationProps): React.JSX.Element;
  * outside-click / Esc. Use for rich content; for plain text use Tooltip.
  */
 interface PopoverProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** The clickable trigger element. */
+  /** The clickable trigger. **Pass a single focusable control** (a `Button`/`IconButton`, or any element
+   *  that is already a button/link). A passed element is CLONED to carry `tabIndex`, `aria-expanded`,
+   *  `aria-haspopup`, `aria-controls` and the open handler, and those are only valid on a control:
+   *  `aria-expanded` is prohibited on a plain `div`'s implicit `role="generic"` (#447). A non-control
+   *  element still works - it is given `role="button"` and Enter/Space - but wrapping the real button in
+   *  a `Box`/`Stack` to overlay a badge produces TWO tab stops for one control, so put the decoration
+   *  outside the trigger instead. An explicit `role` you set is always preserved. A wrapping `Tooltip`
+   *  must go OUTSIDE this component, not inside `trigger` - see docs/overlays.md. */
   trigger: React.ReactNode;
   /** Optional bold title inside the panel. */
   title?: React.ReactNode;
@@ -4322,7 +4378,13 @@ interface ToastApi {
 /** Access the imperative toast API. Must be under a <ToastProvider>. */
 declare function useToast(): ToastApi;
 
-interface ToastProviderProps {
+/**
+ * #469: extends the viewport's props because ToastProvider collects `...viewportProps` and spreads
+ * them onto the <ToastViewport> it renders. Declaring only children/limit/duration meant a TS
+ * consumer got TS2322 for `className` / `style` / `aria-label` - the usual way to re-position or
+ * restyle the toast stack - on props that have always worked at runtime.
+ */
+interface ToastProviderProps extends Omit<ToastViewportProps, "limit" | "children"> {
   children?: React.ReactNode;
   /** Max toasts shown at once (most recent kept). @default 4 */
   limit?: number;
@@ -4623,6 +4685,10 @@ interface HeadingOwnProps {
   size?: HeadingSize;
   /** Convenience: render at the display size (`var(--text-display)`) regardless of level. @default false */
   display?: boolean;
+  /**
+   * CSS `text-align`. Prefer the LOGICAL keywords `"start"` / `"end"` over `"left"` / `"right"` so the
+   * text mirrors under `dir="rtl"` like the rest of the library (#473); the physical values pin it.
+   */
   align?: React.CSSProperties["textAlign"];
   /** Single-line ellipsis truncation (adds min-width:0 so it shrinks in a flex parent). @default false */
   truncate?: boolean;
@@ -4649,6 +4715,10 @@ interface TextOwnProps {
   tone?: TextTone;
   /** Font-weight token suffix (e.g. "medium", "semibold", "bold"). */
   weight?: "medium" | "semibold" | "bold" | string;
+  /**
+   * CSS `text-align`. Prefer the LOGICAL keywords `"start"` / `"end"` over `"left"` / `"right"` so the
+   * text mirrors under `dir="rtl"` like the rest of the library (#473); the physical values pin it.
+   */
   align?: React.CSSProperties["textAlign"];
   /** Single-line ellipsis truncation (adds min-width:0 so it shrinks in a flex parent). @default false */
   truncate?: boolean;
@@ -4724,6 +4794,11 @@ interface UseColorSchemeOptions {
   element?: HTMLElement | null;
   /** Disable CSS transitions during the switch so the UI re-themes instantly. @default true */
   disableTransitionsOnChange?: boolean;
+  /**
+   * Read the stored theme eagerly in the initializer. Client-only apps with no SSR; under SSR this
+   * reintroduces the hydration mismatch #466 fixed. @default false
+   */
+  initializeWithValue?: boolean;
 }
 
 /** Light/dark theme state synced to `<html>` and persisted to localStorage. */
@@ -4764,10 +4839,22 @@ declare function useKeyPress(
   options?: UseKeyPressOptions
 ): void;
 
-/** State persisted to localStorage (JSON-serialized), SSR-safe. */
+interface UseLocalStorageOptions {
+  /**
+   * Read storage eagerly in the initializer. Client-only apps with no SSR; under SSR this
+   * reintroduces the hydration mismatch #466 fixed. @default false
+   */
+  initializeWithValue?: boolean;
+}
+
+/**
+ * State persisted to localStorage (JSON-serialized), SSR-safe: returns `initialValue` on the server
+ * AND on the first client render, then reads storage in a layout effect before paint (#466).
+ */
 declare function useLocalStorage<T>(
   key: string,
-  initialValue: T
+  initialValue: T,
+  options?: UseLocalStorageOptions
 ): [T, (value: T | ((prev: T) => T)) => void];
 
 /** Copy text to the clipboard with a `copied` flag that auto-resets. Uses the async Clipboard API in a
@@ -4793,8 +4880,19 @@ declare function useInterval(callback: () => void, delay: number | null): void;
 /** Run `callback` once after `delay` ms; pass `delay = null` to cancel. */
 declare function useTimeout(callback: () => void, delay: number | null): void;
 
-/** The current window dimensions (0×0 on the server). */
-declare function useWindowSize(): { width: number; height: number };
+interface UseWindowSizeOptions {
+  /**
+   * Measure eagerly in the initializer. Client-only apps with no SSR; under SSR this reintroduces
+   * the hydration mismatch #466 fixed. @default false
+   */
+  initializeWithValue?: boolean;
+}
+
+/**
+ * The current window dimensions. 0×0 on the server AND on the first client render, then measured in
+ * a layout effect before paint (#466) — so hydration never mismatches.
+ */
+declare function useWindowSize(options?: UseWindowSizeOptions): { width: number; height: number };
 
 /** `true` while the pointer is over the element referenced by `ref`. */
 declare function useHover<T extends HTMLElement = HTMLElement>(ref: React.RefObject<T | null>): boolean;
@@ -4863,4 +4961,4 @@ declare function useFilePicker(options?: UseFilePickerOptions): {
   getInputProps: () => React.InputHTMLAttributes<HTMLInputElement> & { ref: React.RefObject<HTMLInputElement | null> };
 };
 
-export { Accordion, type AccordionItem, type AccordionProps, type ActionTone, Alert, type AlertProps, Anchor, type AnchorProps, AppShell, type AppShellProps, Avatar, AvatarMenu, type AvatarMenuProps, type AvatarProps, Badge, type BadgeProps, type BarTone, Box, type BoxOwnProps, type BoxProps, Boxplot, type BoxplotDatum, type BoxplotProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BubbleChart, type BubbleChartProps, Button, type ButtonProps, Candlestick, type CandlestickDatum, type CandlestickProps, Card, CardGrid, type CardGridFilter, type CardGridProps, type CardGridQuery, type CardGridSort, type CardGridSortOption, type CardProps, Carousel, type CarouselProps, Chart, type ChartDatum, type ChartProps, Checkbox, type CheckboxProps, Code, type CodeProps, ColorPicker, type ColorPickerProps, ColorSchemeScript, type ColorSchemeScriptOptions, type ColorSchemeScriptProps, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, Container, type ContainerOwnProps, type ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableBatchActionContext, type DatatableBatchUpdateDetail, type DatatableColumn, type DatatableFilter, type DatatableFilterOp, type DatatableNumberOp, type DatatableProps, type DatatableQuery, type DatatableRowAction, type DatatableState, type DatatableStringOp, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, Dialog, type DialogProps, type DiffOp, DiffTable, type DiffTableColumn, type DiffTableProps, Divider, type DividerProps, DonutChart, type DonutChartDatum, type DonutChartProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, FilterBar, type FilterBarProps, type FilterClause, type FilterField, type FilterFieldType, type FilterValues, Form, type FormProps, FunnelChart, type FunnelChartProps, type FunnelDatum, Gauge, type GaugeProps, type GaugeSeries, Grid, type GridOwnProps, type GridProps, Heading, type HeadingOwnProps, type HeadingProps, type HeadingSize, Heatmap, type HeatmapDatum, type HeatmapProps, IconButton, type IconButtonProps, Image, type ImageProps, ImageViewer, type ImageViewerControlsApi, type ImageViewerProps, type ImageViewerState, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, Kbd, type KbdProps, Label, type LabelProps, List, type ListItemData, type ListProps, Menu, type MenuItemDef, type MenuProps, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarLink, type NavbarProps, type Option, type OptionGroup, Pagination, type PaginationProps, PieChart, type PieChartDatum, type PieChartProps, PolarAreaChart, type PolarAreaChartProps, type PolarAreaDatum, type PolymorphicAs, type PolymorphicComponent, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, Popover, type PopoverProps, Portal, type PortalProps, Pre, type PreProps, Progress, type ProgressProps, RadarChart, type RadarChartProps, type RadarDatum, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, RangeChart, type RangeChartProps, type RangeDatum, Rating, type RatingProps, type ResponsiveColumns, ScatterChart, type ScatterChartProps, type ScatterPoint, type ScatterSeries, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineDatum, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackOwnProps, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type Sx, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextOwnProps, type TextProps, type TextTone, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, type ThemeTokens, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastTone, ToastViewport, type ToastViewportProps, ToggleGroup, type ToggleGroupItem, type ToggleGroupProps, type Tone, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, Treemap, type TreemapDatum, type TreemapProps, TwicoProvider, type TwicoProviderProps, type UseColorSchemeOptions, type UseFilePickerOptions, type UseFocusTrapOptions, type UseKeyPressOptions, type UseMediaQueryOptions, VisuallyHidden, type VisuallyHiddenProps, type WithSx, createTheme, getColorSchemeScript, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFilePicker, useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };
+export { Accordion, type AccordionItem, type AccordionProps, type ActionTone, Alert, type AlertProps, Anchor, type AnchorProps, AppShell, type AppShellProps, Avatar, AvatarMenu, type AvatarMenuProps, type AvatarProps, Badge, type BadgeProps, type BarTone, Box, type BoxOwnProps, type BoxProps, Boxplot, type BoxplotDatum, type BoxplotProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BubbleChart, type BubbleChartProps, Button, type ButtonProps, Candlestick, type CandlestickDatum, type CandlestickProps, Card, CardGrid, type CardGridFilter, type CardGridProps, type CardGridQuery, type CardGridSort, type CardGridSortOption, type CardProps, Carousel, type CarouselProps, Chart, type ChartDatum, type ChartProps, Checkbox, type CheckboxProps, Code, type CodeProps, ColorPicker, type ColorPickerProps, ColorSchemeScript, type ColorSchemeScriptOptions, type ColorSchemeScriptProps, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, Container, type ContainerOwnProps, type ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableBatchActionContext, type DatatableBatchUpdateDetail, type DatatableColumn, type DatatableFilter, type DatatableFilterOp, type DatatableNumberOp, type DatatableProps, type DatatableQuery, type DatatableRowAction, type DatatableState, type DatatableStringOp, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, Dialog, type DialogProps, type DiffOp, DiffTable, type DiffTableColumn, type DiffTableProps, Divider, type DividerProps, DonutChart, type DonutChartDatum, type DonutChartProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, FilterBar, type FilterBarProps, type FilterClause, type FilterField, type FilterFieldType, type FilterValues, Form, type FormProps, FunnelChart, type FunnelChartProps, type FunnelDatum, Gauge, type GaugeProps, type GaugeSeries, Grid, type GridOwnProps, type GridProps, Heading, type HeadingOwnProps, type HeadingProps, type HeadingSize, Heatmap, type HeatmapDatum, type HeatmapProps, IconButton, type IconButtonProps, Image, type ImageProps, ImageViewer, type ImageViewerControlsApi, type ImageViewerProps, type ImageViewerState, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, Kbd, type KbdProps, Label, type LabelProps, List, type ListItemData, type ListProps, Menu, type MenuItemDef, type MenuProps, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarLink, type NavbarProps, type Option, type OptionGroup, Pagination, type PaginationProps, PieChart, type PieChartDatum, type PieChartProps, PolarAreaChart, type PolarAreaChartProps, type PolarAreaDatum, type PolymorphicAs, type PolymorphicComponent, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, Popover, type PopoverProps, Portal, type PortalProps, Pre, type PreProps, Progress, type ProgressProps, RadarChart, type RadarChartProps, type RadarDatum, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, RangeChart, type RangeChartProps, type RangeDatum, Rating, type RatingProps, type ResponsiveColumns, ScatterChart, type ScatterChartProps, type ScatterPoint, type ScatterSeries, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineDatum, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackOwnProps, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type Sx, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextOwnProps, type TextProps, type TextTone, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, type ThemeTokens, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastTone, ToastViewport, type ToastViewportProps, ToggleGroup, type ToggleGroupItem, type ToggleGroupProps, type Tone, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, Treemap, type TreemapDatum, type TreemapProps, TwicoProvider, type TwicoProviderProps, type UseColorSchemeOptions, type UseFilePickerOptions, type UseFocusTrapOptions, type UseKeyPressOptions, type UseLocalStorageOptions, type UseMediaQueryOptions, type UseWindowSizeOptions, VisuallyHidden, type VisuallyHiddenProps, type WithSx, createTheme, getColorSchemeScript, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFilePicker, useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };

package/dist/index.d.ts

@@ -222,6 +222,20 @@ interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
   onOpenChange?: (values: string[]) => void;
   /** Heading level wrapping each trigger button (document-outline semantics). @default 3 */
   headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  /** #446: render each panel's `content` only once the item has first been opened, then keep it
+   *  mounted so BOTH the open and close animations still have something to animate (the panel
+   *  interpolates `grid-template-rows: 0fr -> 1fr` from its real content, so an emptied panel would
+   *  collapse instantly). Cuts the DOM/hook cost of a page full of collapsed panels. Seeded from
+   *  `open`/`defaultOpen`, so a restored "these were open last time" set is never open-but-blank.
+   *  @default false */
+  mountOnOpen?: boolean;
+  /** #446: additionally unmount a panel's `content` again when it closes, trading the memory back
+   *  for a slightly cheaper page. Implies `mountOnOpen`. The unmount waits out the collapse
+   *  transition (in lockstep with `--duration-base`), so the close animation still plays. The wait is
+   *  a fixed 240 ms matching the DEFAULT `--duration-base` (220 ms); if you override that token to
+   *  something materially longer, the content is dropped before the panel finishes collapsing.
+   *  @default false */
+  unmountOnClose?: boolean;
 }
 
 interface AccordionItem {
@@ -267,7 +281,7 @@ type PolymorphicAs = React.ElementType;
  * style (and win over the component's base style, MUI-style); any nested object — a
  * selector key (`"&:hover"`, `":focus-visible"`, `"& > .child"`) or an at-rule
  * (`"@media (min-width: 600px)"`, `"@supports …"`, `"@container …"`) — is compiled to a
- * scoped stylesheet. Use design tokens for values, e.g. `color: "var(--color-primary)"`.
+ * scoped stylesheet. Use design tokens for values, e.g. `color: "var(--color-primary-subtle-fg)"`.
  * See docs/sx.md.
  */
 type Sx = React.CSSProperties & {
@@ -410,7 +424,14 @@ interface MenuItemDef {
  * @startingPoint section="Overlay" subtitle="Dropdown menu with headings & shortcuts" viewport="700x360"
  */
 interface MenuProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** Clickable trigger (e.g. a Button or IconButton). */
+  /** Clickable trigger (e.g. a Button or IconButton). **Pass a single focusable control** (a `Button`/`IconButton`, or any element
+   *  that is already a button/link). A passed element is CLONED to carry `tabIndex`, `aria-expanded`,
+   *  `aria-haspopup`, `aria-controls` and the open handler, and those are only valid on a control:
+   *  `aria-expanded` is prohibited on a plain `div`'s implicit `role="generic"` (#447). A non-control
+   *  element still works - it is given `role="button"` and Enter/Space - but wrapping the real button in
+   *  a `Box`/`Stack` to overlay a badge produces TWO tab stops for one control, so put the decoration
+   *  outside the trigger instead. An explicit `role` you set is always preserved. A wrapping `Tooltip`
+   *  must go OUTSIDE this component, not inside `trigger` - see docs/overlays.md. */
   trigger: React.ReactNode;
   items: MenuItemDef[];
   /** Horizontal alignment to the trigger. @default "start" */
@@ -513,7 +534,11 @@ interface BreadcrumbItem {
 interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
   /** Ordered trail; the last item renders as the current page. */
   items: BreadcrumbItem[];
-  /** Custom separator node (defaults to a chevron). */
+  /**
+   * Custom separator node (defaults to a chevron). The built-in chevron mirrors itself under
+   * `dir="rtl"`; a custom separator does NOT (#465) — it is rendered as given, so supply a
+   * direction-neutral glyph or handle the mirroring yourself.
+   */
   separator?: React.ReactNode;
   /** Collapse to first + last items past this count (0 = never). @default 0 */
   maxItems?: number;
@@ -2301,7 +2326,14 @@ interface DatatableQuery {
   /** `field`s of the columns currently shown (in column order) — the built-in Columns menu
    *  is the source of truth. Use it to fetch/project only the visible columns server-side.
    *  Always populated by the grid in `onServerChange`; optional so a hand-built query passed
-   *  to `runDatatableQuery` (which ignores it) need not supply it. */
+   *  to `runDatatableQuery` (which ignores it) need not supply it.
+   *
+   *  **Don't project purely by this list if any column has a per-row `editable` predicate (#436).** Such a
+   *  predicate runs client-side against the row object you sent, and usually reads a *different* field from the
+   *  one it gates. Drop that source field from the payload and it reads `undefined`, which typically evaluates
+   *  truthy — so the rule silently stops holding and the column becomes editable on every row. Always include the
+   *  fields your predicates read, whatever the user has hidden. (Hiding the gated column too does not help: a
+   *  hidden column is still offered by the batch editor and still written.) */
   visibleColumns?: string[];
   /** `field`s of the columns currently hidden via the Columns menu. Always populated in
    *  `onServerChange`; optional for the same reason as `visibleColumns`. */
@@ -2445,7 +2477,17 @@ interface DatatableColumn<T = any> {
   /** Make this column's cells editable (double-click to edit). Overrides the grid `editMode`. #424: pass a
    *  predicate `(row, { field }) => boolean` to make it editable only on the rows that satisfy it (like
    *  `cellStyle`/`cellClassName`). A `false` result behaves exactly like `editable: false` for that cell — no
-   *  editor on double-click/Enter/F2, and the cell is skipped by paste, cut and the batch editor. */
+   *  editor on double-click/Enter/F2, and the cell is skipped by paste, cut and the batch editor.
+   *
+   *  **With server-side column projection (#436):** the predicate runs against the row object the grid holds, so
+   *  every field it *reads* must survive projection. A predicate typically gates one column from another
+   *  (`{ field: "B", editable: (row) => !isLocked(row.A) }`); if you project by `visibleColumns` and `A` is not
+   *  sent, `row.A` is `undefined` and the predicate usually evaluates truthy — i.e. **editable on every row**.
+   *  Keep the fields a predicate reads in the payload unconditionally, regardless of visibility.
+   *
+   *  Note hiding the gated column does **not** protect it: a hidden column is still offered by the batch editor
+   *  (its list comes from all `columns`, not the visible ones) and is still written. That is deliberate — batch
+   *  -setting a column you keep off-screen is a supported use — so the projection is the thing to get right. */
   editable?: boolean | ((row: T, ctx: { field: string }) => boolean);
   /** Editor type. "select" (or any column with `valueOptions`) renders a dropdown; else a text/number input by column type. */
   editType?: "text" | "number" | "select";
@@ -2660,10 +2702,17 @@ interface CardGridProps<Row = any> extends Omit<React.HTMLAttributes<HTMLDivElem
   pageSize?: number;
   /** Options for the "per page" selector. @default [12, 24, 48, 96] */
   pageSizeOptions?: number[];
-  /** Controlled 0-based page. */
+  /**
+   * Controlled 0-based page. If it points past the last page of the current result set — a refetch or
+   * a deletion shrank `rows` — the grid clamps: it renders the last real page and reports the clamped
+   * index through `onPageChange` (#461). Keep it controlled only if you apply that callback, otherwise
+   * the grid and your state disagree. The clamp is skipped while `loading`, and in `serverMode`
+   * without `rowCount`, because the total is not knowable there.
+   */
   page?: number;
   /** Initial 0-based page when uncontrolled. @default 0 */
   defaultPage?: number;
+  /** Fires on user paging AND when the grid clamps an out-of-range page back into range (#461). */
   onPageChange?: (page: number) => void;
   onPageSizeChange?: (pageSize: number) => void;
   /** Show the "per page" selector in the footer. @default true */
@@ -3617,7 +3666,14 @@ declare function Pagination(props: PaginationProps): React.JSX.Element;
  * outside-click / Esc. Use for rich content; for plain text use Tooltip.
  */
 interface PopoverProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** The clickable trigger element. */
+  /** The clickable trigger. **Pass a single focusable control** (a `Button`/`IconButton`, or any element
+   *  that is already a button/link). A passed element is CLONED to carry `tabIndex`, `aria-expanded`,
+   *  `aria-haspopup`, `aria-controls` and the open handler, and those are only valid on a control:
+   *  `aria-expanded` is prohibited on a plain `div`'s implicit `role="generic"` (#447). A non-control
+   *  element still works - it is given `role="button"` and Enter/Space - but wrapping the real button in
+   *  a `Box`/`Stack` to overlay a badge produces TWO tab stops for one control, so put the decoration
+   *  outside the trigger instead. An explicit `role` you set is always preserved. A wrapping `Tooltip`
+   *  must go OUTSIDE this component, not inside `trigger` - see docs/overlays.md. */
   trigger: React.ReactNode;
   /** Optional bold title inside the panel. */
   title?: React.ReactNode;
@@ -4322,7 +4378,13 @@ interface ToastApi {
 /** Access the imperative toast API. Must be under a <ToastProvider>. */
 declare function useToast(): ToastApi;
 
-interface ToastProviderProps {
+/**
+ * #469: extends the viewport's props because ToastProvider collects `...viewportProps` and spreads
+ * them onto the <ToastViewport> it renders. Declaring only children/limit/duration meant a TS
+ * consumer got TS2322 for `className` / `style` / `aria-label` - the usual way to re-position or
+ * restyle the toast stack - on props that have always worked at runtime.
+ */
+interface ToastProviderProps extends Omit<ToastViewportProps, "limit" | "children"> {
   children?: React.ReactNode;
   /** Max toasts shown at once (most recent kept). @default 4 */
   limit?: number;
@@ -4623,6 +4685,10 @@ interface HeadingOwnProps {
   size?: HeadingSize;
   /** Convenience: render at the display size (`var(--text-display)`) regardless of level. @default false */
   display?: boolean;
+  /**
+   * CSS `text-align`. Prefer the LOGICAL keywords `"start"` / `"end"` over `"left"` / `"right"` so the
+   * text mirrors under `dir="rtl"` like the rest of the library (#473); the physical values pin it.
+   */
   align?: React.CSSProperties["textAlign"];
   /** Single-line ellipsis truncation (adds min-width:0 so it shrinks in a flex parent). @default false */
   truncate?: boolean;
@@ -4649,6 +4715,10 @@ interface TextOwnProps {
   tone?: TextTone;
   /** Font-weight token suffix (e.g. "medium", "semibold", "bold"). */
   weight?: "medium" | "semibold" | "bold" | string;
+  /**
+   * CSS `text-align`. Prefer the LOGICAL keywords `"start"` / `"end"` over `"left"` / `"right"` so the
+   * text mirrors under `dir="rtl"` like the rest of the library (#473); the physical values pin it.
+   */
   align?: React.CSSProperties["textAlign"];
   /** Single-line ellipsis truncation (adds min-width:0 so it shrinks in a flex parent). @default false */
   truncate?: boolean;
@@ -4724,6 +4794,11 @@ interface UseColorSchemeOptions {
   element?: HTMLElement | null;
   /** Disable CSS transitions during the switch so the UI re-themes instantly. @default true */
   disableTransitionsOnChange?: boolean;
+  /**
+   * Read the stored theme eagerly in the initializer. Client-only apps with no SSR; under SSR this
+   * reintroduces the hydration mismatch #466 fixed. @default false
+   */
+  initializeWithValue?: boolean;
 }
 
 /** Light/dark theme state synced to `<html>` and persisted to localStorage. */
@@ -4764,10 +4839,22 @@ declare function useKeyPress(
   options?: UseKeyPressOptions
 ): void;
 
-/** State persisted to localStorage (JSON-serialized), SSR-safe. */
+interface UseLocalStorageOptions {
+  /**
+   * Read storage eagerly in the initializer. Client-only apps with no SSR; under SSR this
+   * reintroduces the hydration mismatch #466 fixed. @default false
+   */
+  initializeWithValue?: boolean;
+}
+
+/**
+ * State persisted to localStorage (JSON-serialized), SSR-safe: returns `initialValue` on the server
+ * AND on the first client render, then reads storage in a layout effect before paint (#466).
+ */
 declare function useLocalStorage<T>(
   key: string,
-  initialValue: T
+  initialValue: T,
+  options?: UseLocalStorageOptions
 ): [T, (value: T | ((prev: T) => T)) => void];
 
 /** Copy text to the clipboard with a `copied` flag that auto-resets. Uses the async Clipboard API in a
@@ -4793,8 +4880,19 @@ declare function useInterval(callback: () => void, delay: number | null): void;
 /** Run `callback` once after `delay` ms; pass `delay = null` to cancel. */
 declare function useTimeout(callback: () => void, delay: number | null): void;
 
-/** The current window dimensions (0×0 on the server). */
-declare function useWindowSize(): { width: number; height: number };
+interface UseWindowSizeOptions {
+  /**
+   * Measure eagerly in the initializer. Client-only apps with no SSR; under SSR this reintroduces
+   * the hydration mismatch #466 fixed. @default false
+   */
+  initializeWithValue?: boolean;
+}
+
+/**
+ * The current window dimensions. 0×0 on the server AND on the first client render, then measured in
+ * a layout effect before paint (#466) — so hydration never mismatches.
+ */
+declare function useWindowSize(options?: UseWindowSizeOptions): { width: number; height: number };
 
 /** `true` while the pointer is over the element referenced by `ref`. */
 declare function useHover<T extends HTMLElement = HTMLElement>(ref: React.RefObject<T | null>): boolean;
@@ -4863,4 +4961,4 @@ declare function useFilePicker(options?: UseFilePickerOptions): {
   getInputProps: () => React.InputHTMLAttributes<HTMLInputElement> & { ref: React.RefObject<HTMLInputElement | null> };
 };
 
-export { Accordion, type AccordionItem, type AccordionProps, type ActionTone, Alert, type AlertProps, Anchor, type AnchorProps, AppShell, type AppShellProps, Avatar, AvatarMenu, type AvatarMenuProps, type AvatarProps, Badge, type BadgeProps, type BarTone, Box, type BoxOwnProps, type BoxProps, Boxplot, type BoxplotDatum, type BoxplotProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BubbleChart, type BubbleChartProps, Button, type ButtonProps, Candlestick, type CandlestickDatum, type CandlestickProps, Card, CardGrid, type CardGridFilter, type CardGridProps, type CardGridQuery, type CardGridSort, type CardGridSortOption, type CardProps, Carousel, type CarouselProps, Chart, type ChartDatum, type ChartProps, Checkbox, type CheckboxProps, Code, type CodeProps, ColorPicker, type ColorPickerProps, ColorSchemeScript, type ColorSchemeScriptOptions, type ColorSchemeScriptProps, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, Container, type ContainerOwnProps, type ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableBatchActionContext, type DatatableBatchUpdateDetail, type DatatableColumn, type DatatableFilter, type DatatableFilterOp, type DatatableNumberOp, type DatatableProps, type DatatableQuery, type DatatableRowAction, type DatatableState, type DatatableStringOp, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, Dialog, type DialogProps, type DiffOp, DiffTable, type DiffTableColumn, type DiffTableProps, Divider, type DividerProps, DonutChart, type DonutChartDatum, type DonutChartProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, FilterBar, type FilterBarProps, type FilterClause, type FilterField, type FilterFieldType, type FilterValues, Form, type FormProps, FunnelChart, type FunnelChartProps, type FunnelDatum, Gauge, type GaugeProps, type GaugeSeries, Grid, type GridOwnProps, type GridProps, Heading, type HeadingOwnProps, type HeadingProps, type HeadingSize, Heatmap, type HeatmapDatum, type HeatmapProps, IconButton, type IconButtonProps, Image, type ImageProps, ImageViewer, type ImageViewerControlsApi, type ImageViewerProps, type ImageViewerState, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, Kbd, type KbdProps, Label, type LabelProps, List, type ListItemData, type ListProps, Menu, type MenuItemDef, type MenuProps, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarLink, type NavbarProps, type Option, type OptionGroup, Pagination, type PaginationProps, PieChart, type PieChartDatum, type PieChartProps, PolarAreaChart, type PolarAreaChartProps, type PolarAreaDatum, type PolymorphicAs, type PolymorphicComponent, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, Popover, type PopoverProps, Portal, type PortalProps, Pre, type PreProps, Progress, type ProgressProps, RadarChart, type RadarChartProps, type RadarDatum, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, RangeChart, type RangeChartProps, type RangeDatum, Rating, type RatingProps, type ResponsiveColumns, ScatterChart, type ScatterChartProps, type ScatterPoint, type ScatterSeries, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineDatum, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackOwnProps, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type Sx, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextOwnProps, type TextProps, type TextTone, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, type ThemeTokens, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastTone, ToastViewport, type ToastViewportProps, ToggleGroup, type ToggleGroupItem, type ToggleGroupProps, type Tone, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, Treemap, type TreemapDatum, type TreemapProps, TwicoProvider, type TwicoProviderProps, type UseColorSchemeOptions, type UseFilePickerOptions, type UseFocusTrapOptions, type UseKeyPressOptions, type UseMediaQueryOptions, VisuallyHidden, type VisuallyHiddenProps, type WithSx, createTheme, getColorSchemeScript, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFilePicker, useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };
+export { Accordion, type AccordionItem, type AccordionProps, type ActionTone, Alert, type AlertProps, Anchor, type AnchorProps, AppShell, type AppShellProps, Avatar, AvatarMenu, type AvatarMenuProps, type AvatarProps, Badge, type BadgeProps, type BarTone, Box, type BoxOwnProps, type BoxProps, Boxplot, type BoxplotDatum, type BoxplotProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, BubbleChart, type BubbleChartProps, Button, type ButtonProps, Candlestick, type CandlestickDatum, type CandlestickProps, Card, CardGrid, type CardGridFilter, type CardGridProps, type CardGridQuery, type CardGridSort, type CardGridSortOption, type CardProps, Carousel, type CarouselProps, Chart, type ChartDatum, type ChartProps, Checkbox, type CheckboxProps, Code, type CodeProps, ColorPicker, type ColorPickerProps, ColorSchemeScript, type ColorSchemeScriptOptions, type ColorSchemeScriptProps, Combobox, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type Command, CommandPalette, type CommandPaletteProps, Container, type ContainerOwnProps, type ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableBatchActionContext, type DatatableBatchUpdateDetail, type DatatableColumn, type DatatableFilter, type DatatableFilterOp, type DatatableNumberOp, type DatatableProps, type DatatableQuery, type DatatableRowAction, type DatatableState, type DatatableStringOp, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, DateTimePicker, type DateTimePickerProps, Dialog, type DialogProps, type DiffOp, DiffTable, type DiffTableColumn, type DiffTableProps, Divider, type DividerProps, DonutChart, type DonutChartDatum, type DonutChartProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, FilterBar, type FilterBarProps, type FilterClause, type FilterField, type FilterFieldType, type FilterValues, Form, type FormProps, FunnelChart, type FunnelChartProps, type FunnelDatum, Gauge, type GaugeProps, type GaugeSeries, Grid, type GridOwnProps, type GridProps, Heading, type HeadingOwnProps, type HeadingProps, type HeadingSize, Heatmap, type HeatmapDatum, type HeatmapProps, IconButton, type IconButtonProps, Image, type ImageProps, ImageViewer, type ImageViewerControlsApi, type ImageViewerProps, type ImageViewerState, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, Kbd, type KbdProps, Label, type LabelProps, List, type ListItemData, type ListProps, Menu, type MenuItemDef, type MenuProps, MultiSelect, type MultiSelectGroup, type MultiSelectOption, type MultiSelectProps, Navbar, type NavbarLink, type NavbarProps, type Option, type OptionGroup, Pagination, type PaginationProps, PieChart, type PieChartDatum, type PieChartProps, PolarAreaChart, type PolarAreaChartProps, type PolarAreaDatum, type PolymorphicAs, type PolymorphicComponent, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, Popover, type PopoverProps, Portal, type PortalProps, Pre, type PreProps, Progress, type ProgressProps, RadarChart, type RadarChartProps, type RadarDatum, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, RangeChart, type RangeChartProps, type RangeDatum, Rating, type RatingProps, type ResponsiveColumns, ScatterChart, type ScatterChartProps, type ScatterPoint, type ScatterSeries, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Sparkline, type SparklineDatum, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackOwnProps, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type Sx, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextOwnProps, type TextProps, type TextTone, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, type ThemeTokens, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastTone, ToastViewport, type ToastViewportProps, ToggleGroup, type ToggleGroupItem, type ToggleGroupProps, type Tone, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, Treemap, type TreemapDatum, type TreemapProps, TwicoProvider, type TwicoProviderProps, type UseColorSchemeOptions, type UseFilePickerOptions, type UseFocusTrapOptions, type UseKeyPressOptions, type UseLocalStorageOptions, type UseMediaQueryOptions, type UseWindowSizeOptions, VisuallyHidden, type VisuallyHiddenProps, type WithSx, createTheme, getColorSchemeScript, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFilePicker, useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };