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/CHANGELOG.md +12 -0
- package/dist/index.cjs +1282 -656
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +165 -69
- package/dist/index.d.ts +165 -69
- package/dist/index.mjs +1282 -656
- package/dist/index.mjs.map +1 -1
- package/llms.txt +21 -1
- package/package.json +1 -1
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
|
-
/**
|
|
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
|
-
/**
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2373
|
-
|
|
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
|
-
|
|
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
|
-
/**
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
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
|
-
|
|
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
|
-
/**
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
|
|
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
|
-
|
|
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
|
-
/**
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
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
|
-
|
|
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
|
|
2525
|
-
*
|
|
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
|
|
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
|
-
|
|
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
|
-
/**
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
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
|
-
|
|
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 };
|