twico-ui 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -193,6 +193,58 @@ type BarTone = Exclude<Tone, "neutral">;
193
193
  */
194
194
  type PolymorphicAs = React.ElementType;
195
195
 
196
+ /**
197
+ * The `sx` style-prop escape hatch (#53). Top-level CSS properties are applied as inline
198
+ * style (and win over the component's base style, MUI-style); any nested object — a
199
+ * selector key (`"&:hover"`, `":focus-visible"`, `"& > .child"`) or an at-rule
200
+ * (`"@media (min-width: 600px)"`, `"@supports …"`, `"@container …"`) — is compiled to a
201
+ * scoped stylesheet. Use design tokens for values, e.g. `color: "var(--color-primary)"`.
202
+ * See docs/sx.md.
203
+ */
204
+ type Sx = React.CSSProperties & {
205
+ [selector: string]: React.CSSProperties[keyof React.CSSProperties] | string | number | Sx | undefined;
206
+ };
207
+
208
+ // ── Polymorphic component type kit ────────────────────────────────────────────
209
+ // Powers the `as`-driven primitives (Box, Stack, Grid, Container, Text, Heading).
210
+ // Passing `as="a"` narrows the accepted props to that element's attributes (href,
211
+ // target, …) and types `ref` as the matching element (HTMLAnchorElement); the
212
+ // component's own style props always merge on top. `as={RouterLink}` accepts that
213
+ // component's props instead. See docs/polymorphic-types.md and docs/prop-conventions.md.
214
+
215
+ /** The `ref` type for a given `as` element `C` (e.g. `HTMLAnchorElement` for `"a"`). */
216
+ type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>["ref"];
217
+
218
+ /** Own props merged over `E`'s props — the component's own props win on a name clash. */
219
+ type Merge<E, Own> = Own & Omit<E, keyof Own>;
220
+
221
+ /** Own props + `as={C}`, merged with `C`'s intrinsic props (own props win on a name clash). */
222
+ type PolymorphicProps<C extends React.ElementType, Own = {}> =
223
+ Merge<React.ComponentPropsWithoutRef<C>, Own> & { as?: C };
224
+
225
+ /** {@link PolymorphicProps} plus a correctly-typed `ref` for the resolved element. */
226
+ type PolymorphicPropsWithRef<C extends React.ElementType, Own = {}> =
227
+ PolymorphicProps<C, Own> & { ref?: PolymorphicRef<C> };
228
+
229
+ /**
230
+ * The callable type of a polymorphic `forwardRef` component whose default element is `D`.
231
+ *
232
+ * Two overloads keep prop-checking strict in both directions: when `as` is omitted the
233
+ * default element `D` is used and its props (plus the own props) are enforced; when
234
+ * `as={C}` is given, `C`'s props and a matching `ref` are enforced instead. A single
235
+ * generic signature would let JSX fall back to the `ElementType` constraint and silently
236
+ * accept anything, so the overloads are deliberate.
237
+ */
238
+ interface PolymorphicComponent<Own, D extends React.ElementType> {
239
+ (
240
+ props: Merge<React.ComponentPropsWithoutRef<D>, Own> & { as?: never; ref?: PolymorphicRef<D> },
241
+ ): React.ReactElement | null;
242
+ <C extends React.ElementType>(
243
+ props: Merge<React.ComponentPropsWithoutRef<C>, Own> & { as: C; ref?: PolymorphicRef<C> },
244
+ ): React.ReactElement | null;
245
+ displayName?: string;
246
+ }
247
+
196
248
  /**
197
249
  * Inline message banner with semantic tones, optional title, icon, and dismiss.
198
250
  */
@@ -436,6 +488,8 @@ interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
436
488
  interactive?: boolean;
437
489
  /** Stretch to fill the parent cell (`height: 100%`) — equal-height cards in a grid/flex row. */
438
490
  fullHeight?: boolean;
491
+ /** Style escape hatch: flat CSS goes inline; nested selectors/at-rules (`"&:hover"`, `"@media …"`) compile to a scoped stylesheet. */
492
+ sx?: Sx;
439
493
  children?: React.ReactNode;
440
494
  }
441
495
 
@@ -568,6 +622,8 @@ interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "o
568
622
  presets?: string[];
569
623
  /** Disable all interaction (the popover cannot be opened). @default false */
570
624
  disabled?: boolean;
625
+ /** Show an alpha slider and emit 8-digit `#RRGGBBAA`; the hex input then accepts 3/6/8-digit hex. @default false */
626
+ alpha?: boolean;
571
627
  /** Color intent for the focus/open accent. @default "primary" */
572
628
  tone?: Tone;
573
629
  onChange?: (hex: string) => void;
@@ -644,6 +700,10 @@ interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
644
700
  emptyText?: string;
645
701
  /** Name for a hidden form field so the selected value participates in native form submission. */
646
702
  name?: string;
703
+ /** Virtualize the option list — render only the visible slice (plus `overscan`) for long lists. @default false */
704
+ virtualized?: boolean;
705
+ /** Extra option rows rendered above/below the viewport when `virtualized`, to smooth fast scrolling. @default 8 */
706
+ overscan?: number;
647
707
  /** Composed with the field's open-on-focus behavior — your handler runs first. */
648
708
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
649
709
  /** Composed with the field's keyboard navigation (Arrows/Enter/Escape) — your handler runs first; call `event.preventDefault()` to suppress it. */
@@ -819,10 +879,20 @@ interface DatatableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivEleme
819
879
  batchActions?: DatatableBatchAction<T>[];
820
880
  /** Row height preset. With `showDensity`, the toolbar density button cycles it locally; changing this prop re-applies it. @default "comfortable" */
821
881
  density?: "compact" | "standard" | "comfortable";
822
- /** Initial rows per page. 0 disables pagination. @default 10 */
882
+ /**
883
+ * Rows per page. 0 disables pagination. Uncontrolled by default (changing the prop
884
+ * re-applies it and resets to the first page); becomes **controlled** when
885
+ * `onPageSizeChange` is supplied. @default 10
886
+ */
823
887
  pageSize?: number;
824
888
  /** Options shown in the rows-per-page selector. @default [5, 10, 25, 50] */
825
889
  pageSizeOptions?: number[];
890
+ /** Controlled current page (0-based). When set, the table renders this page and reports changes via `onPageChange` instead of managing its own. */
891
+ page?: number;
892
+ /** Fires with the next 0-based page on user pagination (and when a page-size/query change resets to page 0). Required to control `page`. */
893
+ onPageChange?: (page: number) => void;
894
+ /** Fires with the next rows-per-page when the user picks one; supplying it makes `pageSize` controlled. */
895
+ onPageSizeChange?: (pageSize: number) => void;
826
896
  /** Max height of the scroll area in px (header/footer stay fixed). @default 440 */
827
897
  height?: number;
828
898
  /**
@@ -1085,6 +1155,10 @@ interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "on
1085
1155
  tone?: Tone;
1086
1156
  /** Show a clear (×) button when a date is set. @default true */
1087
1157
  clearable?: boolean;
1158
+ /** Render the trigger as a typeable text input with a trailing calendar toggle; typed text commits via `parse` on Enter/blur. @default false */
1159
+ editable?: boolean;
1160
+ /** Parse typed text into a Date (used when `editable`). Return a `Date` to commit, `null`/invalid to revert. Defaults to a lenient `Date.parse`. */
1161
+ parse?: (text: string) => Date | null;
1088
1162
  /** Custom display formatter (defaults to a localized medium date). */
1089
1163
  format?: (date: Date) => string;
1090
1164
  /** BCP-47 locale for month/weekday names + date formatting (Intl). Omit for the runtime default. @default undefined */
@@ -1137,6 +1211,10 @@ interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>
1137
1211
  disabled?: boolean;
1138
1212
  /** Color intent for the focus/open accent. @default "primary" */
1139
1213
  tone?: Tone;
1214
+ /** Render the trigger as a typeable input accepting "start – end"; typed text commits via `parse` on Enter/blur. @default false */
1215
+ editable?: boolean;
1216
+ /** Parse one side of the typed range into a Date (used when `editable`). Return a `Date` to accept, `null`/invalid to reject. Defaults to a lenient `Date.parse`. */
1217
+ parse?: (text: string) => Date | null;
1140
1218
  onChange?: (range: DateRange) => void;
1141
1219
  }
1142
1220
 
@@ -1493,6 +1571,10 @@ interface MultiSelectProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
1493
1571
  max?: number;
1494
1572
  /** Collapse chips after N into a "+K more" pill. */
1495
1573
  maxTagCount?: number;
1574
+ /** Virtualize the option list — render only the visible slice (plus `overscan`) for long lists. @default false */
1575
+ virtualized?: boolean;
1576
+ /** Extra option rows rendered above/below the viewport when `virtualized`, to smooth fast scrolling. @default 8 */
1577
+ overscan?: number;
1496
1578
  /** Composed with the field's open-on-focus behavior — your handler runs first. */
1497
1579
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
1498
1580
  /** Composed with the field's keyboard navigation (Arrows/Enter/Escape/Backspace) — your handler runs first; call `event.preventDefault()` to suppress it. */
@@ -1787,6 +1869,10 @@ interface SelectProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "onC
1787
1869
  emptyText?: string;
1788
1870
  /** Name for a hidden form field so the selected value participates in native form submission. */
1789
1871
  name?: string;
1872
+ /** Virtualize the option list — render only the visible slice (plus `overscan`) for long lists. @default false */
1873
+ virtualized?: boolean;
1874
+ /** Extra option rows rendered above/below the viewport when `virtualized`, to smooth fast scrolling. @default 8 */
1875
+ overscan?: number;
1790
1876
  }
1791
1877
 
1792
1878
  /** Alias of the shared {@link Option} type (kept for backward-compatible imports). */
@@ -2365,16 +2451,12 @@ interface AppShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "chil
2365
2451
 
2366
2452
  declare function AppShell(props: AppShellProps): React.JSX.Element;
2367
2453
 
2368
- /** Generic, token-styled element — the building block for non-flex layout. */
2369
- interface BoxProps extends React.HTMLAttributes<HTMLElement> {
2370
- /** Element/tag to render. @default "div" */
2371
- as?: PolymorphicAs;
2372
- /** Link destination — only used with as="a"; scheme-sanitized (javascript:/data:/vbscript: render without href). */
2373
- href?: string;
2374
- /** Anchor target — only used with as="a" (e.g. "_blank"). */
2375
- target?: React.HTMLAttributeAnchorTarget;
2376
- /** Anchor rel — only used with as="a"; pair "noopener noreferrer" with target="_blank". */
2377
- rel?: string;
2454
+ /**
2455
+ * Box's own (non-polymorphic) props. The rendered element's intrinsic attributes —
2456
+ * and `ref` — are added by the polymorphic wrapper based on `as` (e.g. `as="a"`
2457
+ * contributes `href`/`target`/`rel` and a `Ref<HTMLAnchorElement>`).
2458
+ */
2459
+ interface BoxOwnProps {
2378
2460
  /** Padding (all / x / y / individual) — spacing step (number) or CSS length. */
2379
2461
  p?: number | string;
2380
2462
  px?: number | string;
@@ -2399,41 +2481,47 @@ interface BoxProps extends React.HTMLAttributes<HTMLElement> {
2399
2481
  radius?: string;
2400
2482
  /** Box-shadow token suffix (e.g. "sm", "lg", "xl"). */
2401
2483
  shadow?: string;
2484
+ /** Style escape hatch: flat CSS goes inline (wins over base); nested selectors/at-rules (`"&:hover"`, `"@media …"`) compile to a scoped stylesheet. */
2485
+ sx?: Sx;
2402
2486
  }
2403
2487
 
2404
- declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
2488
+ /**
2489
+ * Box props for a given element `C` (defaults to `"div"`) — Box's own props plus
2490
+ * `C`'s intrinsic attributes and a matching `ref`. Name it directly when wrapping
2491
+ * Box in your own typed component.
2492
+ */
2493
+ type BoxProps<C extends React.ElementType = "div"> = PolymorphicPropsWithRef<C, BoxOwnProps>;
2405
2494
 
2406
- /** Centered, max-width content wrapper with responsive horizontal padding. */
2407
- interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
2408
- /** Element/tag to render. @default "div" */
2409
- as?: PolymorphicAs;
2410
- /** Link destination — only used with as="a"; scheme-sanitized (javascript:/data:/vbscript: render without href). */
2411
- href?: string;
2412
- /** Anchor target — only used with as="a" (e.g. "_blank"). */
2413
- target?: React.HTMLAttributeAnchorTarget;
2414
- /** Anchor rel — only used with as="a"; pair "noopener noreferrer" with target="_blank". */
2415
- rel?: string;
2495
+ /** Generic, token-styled element — the building block for non-flex layout. Polymorphic via `as`. */
2496
+ declare const Box: PolymorphicComponent<BoxOwnProps, "div">;
2497
+
2498
+ /**
2499
+ * Container's own props. Intrinsic attributes of the rendered element (and `ref`)
2500
+ * are added by the polymorphic wrapper based on `as`.
2501
+ */
2502
+ interface ContainerOwnProps {
2416
2503
  /** Max width: a named size (sm 640 / md 768 / lg 1024 / xl 1280 / full) or any CSS length. @default "lg" */
2417
2504
  size?: "sm" | "md" | "lg" | "xl" | "full" | string;
2418
2505
  /** Apply horizontal padding. @default true */
2419
2506
  padded?: boolean;
2507
+ /** Style escape hatch: flat CSS goes inline (wins over base); nested selectors/at-rules (`"&:hover"`, `"@media …"`) compile to a scoped stylesheet. */
2508
+ sx?: Sx;
2420
2509
  }
2421
2510
 
2422
- declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
2511
+ /** Container props for a given element `C` (defaults to `"div"`). */
2512
+ type ContainerProps<C extends React.ElementType = "div"> = PolymorphicPropsWithRef<C, ContainerOwnProps>;
2513
+
2514
+ /** Centered, max-width content wrapper with responsive horizontal padding. Polymorphic via `as`. */
2515
+ declare const Container: PolymorphicComponent<ContainerOwnProps, "div">;
2423
2516
 
2424
2517
  /** Responsive column counts per breakpoint (base + sm/md/lg/xl at 640/768/1024/1280px). */
2425
2518
  type ResponsiveColumns = { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
2426
2519
 
2427
- /** CSS grid primitive — fixed columns or a responsive auto-fill grid. */
2428
- interface GridProps extends React.HTMLAttributes<HTMLElement> {
2429
- /** Element/tag to render. @default "div" */
2430
- as?: PolymorphicAs;
2431
- /** Link destination — only used with as="a"; scheme-sanitized (javascript:/data:/vbscript: render without href). */
2432
- href?: string;
2433
- /** Anchor target — only used with as="a" (e.g. "_blank"). */
2434
- target?: React.HTMLAttributeAnchorTarget;
2435
- /** Anchor rel — only used with as="a"; pair "noopener noreferrer" with target="_blank". */
2436
- rel?: string;
2520
+ /**
2521
+ * Grid's own props. Intrinsic attributes of the rendered element (and `ref`) are
2522
+ * added by the polymorphic wrapper based on `as`.
2523
+ */
2524
+ interface GridOwnProps {
2437
2525
  /** Fixed column count, or a responsive object `{ base, sm, md, lg, xl }` (ignored when `minChildWidth` is set). */
2438
2526
  columns?: number | ResponsiveColumns;
2439
2527
  /** Responsive auto-fill: minimum child width (number = px, or any CSS length). */
@@ -2450,20 +2538,21 @@ interface GridProps extends React.HTMLAttributes<HTMLElement> {
2450
2538
  alignContent?: React.CSSProperties["alignContent"];
2451
2539
  /** Distribute the grid's columns within extra inline space. */
2452
2540
  justifyContent?: React.CSSProperties["justifyContent"];
2541
+ /** Style escape hatch: flat CSS goes inline (wins over base); nested selectors/at-rules (`"&:hover"`, `"@media …"`) compile to a scoped stylesheet. */
2542
+ sx?: Sx;
2453
2543
  }
2454
2544
 
2455
- declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
2545
+ /** Grid props for a given element `C` (defaults to `"div"`). */
2546
+ type GridProps<C extends React.ElementType = "div"> = PolymorphicPropsWithRef<C, GridOwnProps>;
2456
2547
 
2457
- /** Flex layout primitive — rows or columns with token-based gaps. */
2458
- interface StackProps extends React.HTMLAttributes<HTMLElement> {
2459
- /** Element/tag to render. @default "div" */
2460
- as?: PolymorphicAs;
2461
- /** Link destination — only used with as="a"; scheme-sanitized (javascript:/data:/vbscript: render without href). */
2462
- href?: string;
2463
- /** Anchor target — only used with as="a" (e.g. "_blank"). */
2464
- target?: React.HTMLAttributeAnchorTarget;
2465
- /** Anchor rel — only used with as="a"; pair "noopener noreferrer" with target="_blank". */
2466
- rel?: string;
2548
+ /** CSS grid primitive — fixed columns or a responsive auto-fill grid. Polymorphic via `as`. */
2549
+ declare const Grid: PolymorphicComponent<GridOwnProps, "div">;
2550
+
2551
+ /**
2552
+ * Stack's own props. Intrinsic attributes of the rendered element (and `ref`) are
2553
+ * added by the polymorphic wrapper based on `as` (e.g. `as="a"` adds `href`).
2554
+ */
2555
+ interface StackOwnProps {
2467
2556
  /** @default "column" */
2468
2557
  direction?: "row" | "column" | "row-reverse" | "column-reverse";
2469
2558
  /** Gap as a spacing-scale step (number) or any CSS length. @default 4 */
@@ -2490,9 +2579,15 @@ interface StackProps extends React.HTMLAttributes<HTMLElement> {
2490
2579
  pl?: number | string;
2491
2580
  /** Node rendered between each child (not before the first or after the last). Pass an orientation-appropriate `Divider`. */
2492
2581
  divider?: React.ReactNode;
2582
+ /** Style escape hatch: flat CSS goes inline (wins over base); nested selectors/at-rules (`"&:hover"`, `"@media …"`) compile to a scoped stylesheet. */
2583
+ sx?: Sx;
2493
2584
  }
2494
2585
 
2495
- declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
2586
+ /** Stack props for a given element `C` (defaults to `"div"`). */
2587
+ type StackProps<C extends React.ElementType = "div"> = PolymorphicPropsWithRef<C, StackOwnProps>;
2588
+
2589
+ /** Flex layout primitive — rows or columns with token-based gaps. Polymorphic via `as`. */
2590
+ declare const Stack: PolymorphicComponent<StackOwnProps, "div">;
2496
2591
 
2497
2592
  /** Inline code, or a scrollable multi-line block with an optional copy button. */
2498
2593
  interface CodeProps extends React.HTMLAttributes<HTMLElement> {
@@ -2521,18 +2616,12 @@ type HeadingSize =
2521
2616
  | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "display";
2522
2617
 
2523
2618
  /**
2524
- * Heading (h1–h6) with token typography. `level` sets the tag/semantics; `size` sets the visual
2525
- * scale — the two are intentionally independent (e.g. a semantic `<h1>` at a small size).
2619
+ * Heading's own props. `level` sets the tag/semantics; `size` sets the visual scale —
2620
+ * the two are intentionally independent (e.g. a semantic `<h1>` at a small size). The
2621
+ * rendered element's intrinsic attributes (and `ref`) are added by the polymorphic
2622
+ * wrapper based on `as`, which overrides the tag chosen by `level`.
2526
2623
  */
2527
- interface HeadingProps extends React.HTMLAttributes<HTMLElement> {
2528
- /** Override the rendered tag (e.g. render a visual h2 as an h1). */
2529
- as?: PolymorphicAs;
2530
- /** Link destination — only used with as="a"; scheme-sanitized (javascript:/data:/vbscript: render without href). */
2531
- href?: string;
2532
- /** Anchor target — only used with as="a" (e.g. "_blank"). */
2533
- target?: React.HTMLAttributeAnchorTarget;
2534
- /** Anchor rel — only used with as="a"; pair "noopener noreferrer" with target="_blank". */
2535
- rel?: string;
2624
+ interface HeadingOwnProps {
2536
2625
  /** Heading level 1–6 — sets the tag and the default size. @default 2 */
2537
2626
  level?: 1 | 2 | 3 | 4 | 5 | 6;
2538
2627
  /** Font-size token (xs…7xl or display), independent of `level`. */
@@ -2544,20 +2633,21 @@ interface HeadingProps extends React.HTMLAttributes<HTMLElement> {
2544
2633
  truncate?: boolean;
2545
2634
  /** Clamp to N lines with an ellipsis (multi-line, -webkit-line-clamp). Overrides `truncate`. */
2546
2635
  lineClamp?: number;
2636
+ /** Style escape hatch: flat CSS goes inline (wins over base); nested selectors/at-rules (`"&:hover"`, `"@media …"`) compile to a scoped stylesheet. */
2637
+ sx?: Sx;
2547
2638
  }
2548
2639
 
2549
- declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLElement>>;
2640
+ /** Heading props for a given element `C` (defaults to `"h2"`). */
2641
+ type HeadingProps<C extends React.ElementType = "h2"> = PolymorphicPropsWithRef<C, HeadingOwnProps>;
2550
2642
 
2551
- /** Body text with token sizes and semantic color tones. Renders <p> by default. */
2552
- interface TextProps extends React.HTMLAttributes<HTMLElement> {
2553
- /** Element/tag to render (e.g. "span", "p"). @default "p" */
2554
- as?: PolymorphicAs;
2555
- /** Link destination — only used with as="a"; scheme-sanitized (javascript:/data:/vbscript: render without href). */
2556
- href?: string;
2557
- /** Anchor target — only used with as="a" (e.g. "_blank"). */
2558
- target?: React.HTMLAttributeAnchorTarget;
2559
- /** Anchor rel — only used with as="a"; pair "noopener noreferrer" with target="_blank". */
2560
- rel?: string;
2643
+ /** Heading (h1–h6) with token typography. Polymorphic via `as` (overrides the `level` tag). */
2644
+ declare const Heading: PolymorphicComponent<HeadingOwnProps, "h2">;
2645
+
2646
+ /**
2647
+ * Text's own props. Intrinsic attributes of the rendered element (and `ref`) are
2648
+ * added by the polymorphic wrapper based on `as` (e.g. `as="a"` adds `href`).
2649
+ */
2650
+ interface TextOwnProps {
2561
2651
  /** Font-size token suffix. @default "base" */
2562
2652
  size?: "xs" | "sm" | "base" | "lg" | "xl" | string;
2563
2653
  /** Semantic color tone — text roles (default/muted/subtle), the color intents, or `"inherit"` to adopt the parent color. @default "default" */
@@ -2569,9 +2659,15 @@ interface TextProps extends React.HTMLAttributes<HTMLElement> {
2569
2659
  truncate?: boolean;
2570
2660
  /** Clamp to N lines with an ellipsis (multi-line, -webkit-line-clamp). Overrides `truncate`. */
2571
2661
  lineClamp?: number;
2662
+ /** Style escape hatch: flat CSS goes inline (wins over base); nested selectors/at-rules (`"&:hover"`, `"@media …"`) compile to a scoped stylesheet. */
2663
+ sx?: Sx;
2572
2664
  }
2573
2665
 
2574
- declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
2666
+ /** Text props for a given element `C` (defaults to `"p"`). */
2667
+ type TextProps<C extends React.ElementType = "p"> = PolymorphicPropsWithRef<C, TextOwnProps>;
2668
+
2669
+ /** Body text with token sizes and semantic color tones. Renders `<p>` by default; polymorphic via `as`. */
2670
+ declare const Text: PolymorphicComponent<TextOwnProps, "p">;
2575
2671
 
2576
2672
  /** SSR-safe `useLayoutEffect` (falls back to `useEffect` on the server). */
2577
2673
  declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
@@ -2744,4 +2840,4 @@ declare function useFocusTrap<T extends HTMLElement = HTMLElement>(
2744
2840
  */
2745
2841
  declare function usePortal(): (node: React.ReactNode) => React.ReactPortal | React.ReactNode | null;
2746
2842
 
2747
- 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 BoxProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, 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 ContainerProps, Currency, CurrencyField, type CurrencyFieldProps, type CurrencyOption, type CurrencyProps, Datatable, type DatatableBatchAction, type DatatableColumn, type DatatableFilter, type DatatableFilterOp, type DatatableNumberOp, type DatatableProps, type DatatableQuery, type DatatableRowAction, type DatatableStringOp, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, Form, type FormProps, Grid, type GridProps, Heading, type HeadingProps, type HeadingSize, IconButton, type IconButtonProps, Image, type ImageProps, 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, type PolymorphicAs, Popover, type PopoverProps, Portal, type PortalProps, Pre, type PreProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ResponsiveColumns, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, type TextTone, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, type ThemeTokens, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastTone, ToastViewport, type ToastViewportProps, type Tone, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, TwicoProvider, type TwicoProviderProps, type UseColorSchemeOptions, type UseFocusTrapOptions, type UseKeyPressOptions, type UseMediaQueryOptions, VisuallyHidden, type VisuallyHiddenProps, createTheme, getColorSchemeScript, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };
2843
+ 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, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, 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 DatatableColumn, type DatatableFilter, type DatatableFilterOp, type DatatableNumberOp, type DatatableProps, type DatatableQuery, type DatatableRowAction, type DatatableStringOp, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, Dialog, type DialogProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, Field, type FieldProps, FileUpload, type FileUploadProps, Form, type FormProps, Grid, type GridOwnProps, type GridProps, Heading, type HeadingOwnProps, type HeadingProps, type HeadingSize, IconButton, type IconButtonProps, Image, type ImageProps, 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, type PolymorphicAs, type PolymorphicComponent, type PolymorphicProps, type PolymorphicPropsWithRef, type PolymorphicRef, Popover, type PopoverProps, Portal, type PortalProps, Pre, type PreProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type ResponsiveColumns, Select, type SelectGroup, type SelectOption, type SelectProps, Sidebar, type SidebarItem, type SidebarProps, Skeleton, type SkeletonProps, Slider, type SliderProps, 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, Timeline, type TimelineItem, type TimelineProps, Toast, type ToastApi, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastTone, ToastViewport, type ToastViewportProps, type Tone, Tooltip, type TooltipProps, type TreeNode, TreeView, type TreeViewProps, TwicoProvider, type TwicoProviderProps, type UseColorSchemeOptions, type UseFocusTrapOptions, type UseKeyPressOptions, type UseMediaQueryOptions, VisuallyHidden, type VisuallyHiddenProps, createTheme, getColorSchemeScript, runDatatableQuery, useClickOutside, useColorScheme, useControllableState, useCopyToClipboard, useDebouncedCallback, useDebouncedValue, useDisclosure, useEventListener, useFocusTrap, useHover, useId, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyPress, useLocalStorage, useMediaQuery, useMounted, usePortal, usePrefersReducedMotion, usePrevious, useScrollLock, useTimeout, useToast, useToggle, useWindowSize };