twico-ui 1.6.0 → 1.7.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 +251 -0
- package/README.md +4 -0
- package/dist/index.cjs +939 -630
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +145 -7
- package/dist/index.d.ts +145 -7
- package/dist/index.mjs +927 -631
- package/dist/index.mjs.map +1 -1
- package/package.json +9 -2
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,141 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
+
interface TwicoProviderProps {
|
|
4
|
+
/** CSP nonce stamped on every injected `<style>` (for `style-src 'nonce-…'` without `unsafe-inline`). */
|
|
5
|
+
nonce?: string;
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
declare function TwicoProvider(props: TwicoProviderProps): React.JSX.Element;
|
|
10
|
+
|
|
11
|
+
/** A friendly, partial token surface. Each entry maps to a `--<group>-<key>` CSS variable. */
|
|
12
|
+
interface ThemeTokens {
|
|
13
|
+
/** `--color-*` (e.g. `{ primary: "#5b5bd6" }`). */
|
|
14
|
+
colors?: Record<string, string>;
|
|
15
|
+
/** `--space-*`. */
|
|
16
|
+
space?: Record<string, string>;
|
|
17
|
+
/** `--radius-*`. */
|
|
18
|
+
radius?: Record<string, string>;
|
|
19
|
+
/** `--font-*`. */
|
|
20
|
+
font?: Record<string, string>;
|
|
21
|
+
/** `--shadow-*`. */
|
|
22
|
+
shadow?: Record<string, string>;
|
|
23
|
+
/** Motion vars (e.g. `{ "ease-out": "…", "duration-base": "…" }`) — keyed by the full var suffix. */
|
|
24
|
+
motion?: Record<string, string>;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/** A CSS custom-property style object (`{ "--color-primary": "…" }`). */
|
|
28
|
+
type Theme = Record<`--${string}`, string>;
|
|
29
|
+
|
|
30
|
+
/** Map a partial token object onto a `--*` CSS-variable style object. */
|
|
31
|
+
declare function createTheme(partial: ThemeTokens): Theme;
|
|
32
|
+
|
|
33
|
+
interface ThemeProviderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
34
|
+
/** A `createTheme()` result, or a raw partial token object. */
|
|
35
|
+
theme?: Theme | ThemeTokens;
|
|
36
|
+
/** `"inline"` sets the vars inline (SSR-safe); `"stylesheet"` injects a scoped, nonce-aware rule. @default "inline" */
|
|
37
|
+
mode?: "inline" | "stylesheet";
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element;
|
|
41
|
+
|
|
42
|
+
interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
|
|
43
|
+
/** Submit handler — runs after `preventDefault()` (unless `preventDefault={false}`). */
|
|
44
|
+
onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
|
|
45
|
+
/** Call `event.preventDefault()` before `onSubmit`. @default true */
|
|
46
|
+
preventDefault?: boolean;
|
|
47
|
+
/** Disable every control (via a `<fieldset disabled>`) and set `aria-busy`. @default false */
|
|
48
|
+
loading?: boolean;
|
|
49
|
+
/** Disable every control (via a `<fieldset disabled>`). @default false */
|
|
50
|
+
disabled?: boolean;
|
|
51
|
+
/** Vertical gap between children as a spacing-scale step (e.g. 4 → var(--space-4)). */
|
|
52
|
+
gap?: number;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
|
|
56
|
+
|
|
57
|
+
interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLElement> {
|
|
58
|
+
/** Element to render. @default "span" */
|
|
59
|
+
as?: React.ElementType;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
declare const VisuallyHidden: React.ForwardRefExoticComponent<
|
|
63
|
+
VisuallyHiddenProps & React.RefAttributes<HTMLElement>
|
|
64
|
+
>;
|
|
65
|
+
|
|
66
|
+
interface PortalProps {
|
|
67
|
+
children?: React.ReactNode;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
declare function Portal(props: PortalProps): React.ReactPortal | React.ReactNode | null;
|
|
71
|
+
|
|
72
|
+
interface ColorSchemeScriptOptions {
|
|
73
|
+
/** localStorage key holding the theme (matches useColorScheme). @default "twico-theme" */
|
|
74
|
+
storageKey?: string;
|
|
75
|
+
/** How the scheme is applied: the `dark` class, or a `[data-…]` attribute value. @default "class" */
|
|
76
|
+
attribute?: string;
|
|
77
|
+
/** Scheme to use when nothing is stored (skips the prefers-color-scheme probe). */
|
|
78
|
+
defaultScheme?: "light" | "dark";
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
interface ColorSchemeScriptProps extends ColorSchemeScriptOptions {
|
|
82
|
+
/** CSP nonce for the inline `<script>`. */
|
|
83
|
+
nonce?: string;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/** The theme-init IIFE as a string, for consumers who inject the script themselves. */
|
|
87
|
+
declare function getColorSchemeScript(options?: ColorSchemeScriptOptions): string;
|
|
88
|
+
|
|
89
|
+
/** A `<script>` for the SSR `<head>` that applies the persisted color scheme before first paint. */
|
|
90
|
+
declare function ColorSchemeScript(props: ColorSchemeScriptProps): React.JSX.Element;
|
|
91
|
+
|
|
92
|
+
type KbdProps = React.HTMLAttributes<HTMLElement>;
|
|
93
|
+
|
|
94
|
+
declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
|
|
95
|
+
|
|
96
|
+
type PreProps = React.HTMLAttributes<HTMLPreElement>;
|
|
97
|
+
|
|
98
|
+
declare const Pre: React.ForwardRefExoticComponent<PreProps & React.RefAttributes<HTMLPreElement>>;
|
|
99
|
+
|
|
100
|
+
interface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
101
|
+
/** Element to render (e.g. a router Link). @default "a" */
|
|
102
|
+
as?: React.ElementType;
|
|
103
|
+
/** Open in a new tab with rel="noopener noreferrer" and a ↗ affix. @default false */
|
|
104
|
+
external?: boolean;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
declare const Anchor: React.ForwardRefExoticComponent<AnchorProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
108
|
+
|
|
109
|
+
interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
110
|
+
/** Id of the control this labels. */
|
|
111
|
+
htmlFor?: string;
|
|
112
|
+
/** Append a danger-colored asterisk. @default false */
|
|
113
|
+
required?: boolean;
|
|
114
|
+
/** @default "md" */
|
|
115
|
+
size?: "sm" | "md" | "lg";
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
|
|
119
|
+
|
|
120
|
+
interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt"> {
|
|
121
|
+
/** Image source URL. */
|
|
122
|
+
src?: string;
|
|
123
|
+
/** Alternative text (required for accessibility; pass "" for decorative images). */
|
|
124
|
+
alt: string;
|
|
125
|
+
/** object-fit value. */
|
|
126
|
+
fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
|
|
127
|
+
/** Border radius token (e.g. "md", "lg", "full"). */
|
|
128
|
+
radius?: string;
|
|
129
|
+
/** CSS aspect-ratio (e.g. "16/9"). */
|
|
130
|
+
aspectRatio?: string;
|
|
131
|
+
/** Source swapped in if the image fails to load. */
|
|
132
|
+
fallback?: string;
|
|
133
|
+
/** @default "lazy" */
|
|
134
|
+
loading?: "lazy" | "eager";
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
|
|
138
|
+
|
|
3
139
|
/**
|
|
4
140
|
* Vertically stacked, expandable disclosure panels with smooth height animation.
|
|
5
141
|
*
|
|
@@ -2265,7 +2401,7 @@ interface BoxProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
2265
2401
|
shadow?: string;
|
|
2266
2402
|
}
|
|
2267
2403
|
|
|
2268
|
-
declare
|
|
2404
|
+
declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
|
|
2269
2405
|
|
|
2270
2406
|
/** Centered, max-width content wrapper with responsive horizontal padding. */
|
|
2271
2407
|
interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
|
|
@@ -2283,7 +2419,7 @@ interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
2283
2419
|
padded?: boolean;
|
|
2284
2420
|
}
|
|
2285
2421
|
|
|
2286
|
-
declare
|
|
2422
|
+
declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
|
|
2287
2423
|
|
|
2288
2424
|
/** Responsive column counts per breakpoint (base + sm/md/lg/xl at 640/768/1024/1280px). */
|
|
2289
2425
|
type ResponsiveColumns = { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
|
|
@@ -2316,7 +2452,7 @@ interface GridProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
2316
2452
|
justifyContent?: React.CSSProperties["justifyContent"];
|
|
2317
2453
|
}
|
|
2318
2454
|
|
|
2319
|
-
declare
|
|
2455
|
+
declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
|
|
2320
2456
|
|
|
2321
2457
|
/** Flex layout primitive — rows or columns with token-based gaps. */
|
|
2322
2458
|
interface StackProps extends React.HTMLAttributes<HTMLElement> {
|
|
@@ -2356,7 +2492,7 @@ interface StackProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
2356
2492
|
divider?: React.ReactNode;
|
|
2357
2493
|
}
|
|
2358
2494
|
|
|
2359
|
-
declare
|
|
2495
|
+
declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
|
|
2360
2496
|
|
|
2361
2497
|
/** Inline code, or a scrollable multi-line block with an optional copy button. */
|
|
2362
2498
|
interface CodeProps extends React.HTMLAttributes<HTMLElement> {
|
|
@@ -2410,7 +2546,7 @@ interface HeadingProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
2410
2546
|
lineClamp?: number;
|
|
2411
2547
|
}
|
|
2412
2548
|
|
|
2413
|
-
declare
|
|
2549
|
+
declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLElement>>;
|
|
2414
2550
|
|
|
2415
2551
|
/** Body text with token sizes and semantic color tones. Renders <p> by default. */
|
|
2416
2552
|
interface TextProps extends React.HTMLAttributes<HTMLElement> {
|
|
@@ -2435,7 +2571,7 @@ interface TextProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
2435
2571
|
lineClamp?: number;
|
|
2436
2572
|
}
|
|
2437
2573
|
|
|
2438
|
-
declare
|
|
2574
|
+
declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
|
|
2439
2575
|
|
|
2440
2576
|
/** SSR-safe `useLayoutEffect` (falls back to `useEffect` on the server). */
|
|
2441
2577
|
declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
|
|
@@ -2586,6 +2722,8 @@ declare function useId(prefix?: string): string;
|
|
|
2586
2722
|
interface UseFocusTrapOptions {
|
|
2587
2723
|
/** Restore focus to the previously-focused element when the trap deactivates. @default true */
|
|
2588
2724
|
restoreFocus?: boolean;
|
|
2725
|
+
/** Element to focus on activate instead of the first focusable — a ref or a `() => Element | null`. */
|
|
2726
|
+
initialFocus?: React.RefObject<HTMLElement | null> | (() => HTMLElement | null | undefined);
|
|
2589
2727
|
}
|
|
2590
2728
|
|
|
2591
2729
|
/**
|
|
@@ -2606,4 +2744,4 @@ declare function useFocusTrap<T extends HTMLElement = HTMLElement>(
|
|
|
2606
2744
|
*/
|
|
2607
2745
|
declare function usePortal(): (node: React.ReactNode) => React.ReactPortal | React.ReactNode | null;
|
|
2608
2746
|
|
|
2609
|
-
export { Accordion, type AccordionItem, type AccordionProps, type ActionTone, Alert, type AlertProps, 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, 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, Grid, type GridProps, Heading, type HeadingProps, type HeadingSize, IconButton, type IconButtonProps, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, 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, 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, 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, type UseColorSchemeOptions, type UseFocusTrapOptions, type UseKeyPressOptions, type UseMediaQueryOptions, 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 };
|
|
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 };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,141 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
|
+
interface TwicoProviderProps {
|
|
4
|
+
/** CSP nonce stamped on every injected `<style>` (for `style-src 'nonce-…'` without `unsafe-inline`). */
|
|
5
|
+
nonce?: string;
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
declare function TwicoProvider(props: TwicoProviderProps): React.JSX.Element;
|
|
10
|
+
|
|
11
|
+
/** A friendly, partial token surface. Each entry maps to a `--<group>-<key>` CSS variable. */
|
|
12
|
+
interface ThemeTokens {
|
|
13
|
+
/** `--color-*` (e.g. `{ primary: "#5b5bd6" }`). */
|
|
14
|
+
colors?: Record<string, string>;
|
|
15
|
+
/** `--space-*`. */
|
|
16
|
+
space?: Record<string, string>;
|
|
17
|
+
/** `--radius-*`. */
|
|
18
|
+
radius?: Record<string, string>;
|
|
19
|
+
/** `--font-*`. */
|
|
20
|
+
font?: Record<string, string>;
|
|
21
|
+
/** `--shadow-*`. */
|
|
22
|
+
shadow?: Record<string, string>;
|
|
23
|
+
/** Motion vars (e.g. `{ "ease-out": "…", "duration-base": "…" }`) — keyed by the full var suffix. */
|
|
24
|
+
motion?: Record<string, string>;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/** A CSS custom-property style object (`{ "--color-primary": "…" }`). */
|
|
28
|
+
type Theme = Record<`--${string}`, string>;
|
|
29
|
+
|
|
30
|
+
/** Map a partial token object onto a `--*` CSS-variable style object. */
|
|
31
|
+
declare function createTheme(partial: ThemeTokens): Theme;
|
|
32
|
+
|
|
33
|
+
interface ThemeProviderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
34
|
+
/** A `createTheme()` result, or a raw partial token object. */
|
|
35
|
+
theme?: Theme | ThemeTokens;
|
|
36
|
+
/** `"inline"` sets the vars inline (SSR-safe); `"stylesheet"` injects a scoped, nonce-aware rule. @default "inline" */
|
|
37
|
+
mode?: "inline" | "stylesheet";
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element;
|
|
41
|
+
|
|
42
|
+
interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
|
|
43
|
+
/** Submit handler — runs after `preventDefault()` (unless `preventDefault={false}`). */
|
|
44
|
+
onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
|
|
45
|
+
/** Call `event.preventDefault()` before `onSubmit`. @default true */
|
|
46
|
+
preventDefault?: boolean;
|
|
47
|
+
/** Disable every control (via a `<fieldset disabled>`) and set `aria-busy`. @default false */
|
|
48
|
+
loading?: boolean;
|
|
49
|
+
/** Disable every control (via a `<fieldset disabled>`). @default false */
|
|
50
|
+
disabled?: boolean;
|
|
51
|
+
/** Vertical gap between children as a spacing-scale step (e.g. 4 → var(--space-4)). */
|
|
52
|
+
gap?: number;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
|
|
56
|
+
|
|
57
|
+
interface VisuallyHiddenProps extends React.HTMLAttributes<HTMLElement> {
|
|
58
|
+
/** Element to render. @default "span" */
|
|
59
|
+
as?: React.ElementType;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
declare const VisuallyHidden: React.ForwardRefExoticComponent<
|
|
63
|
+
VisuallyHiddenProps & React.RefAttributes<HTMLElement>
|
|
64
|
+
>;
|
|
65
|
+
|
|
66
|
+
interface PortalProps {
|
|
67
|
+
children?: React.ReactNode;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
declare function Portal(props: PortalProps): React.ReactPortal | React.ReactNode | null;
|
|
71
|
+
|
|
72
|
+
interface ColorSchemeScriptOptions {
|
|
73
|
+
/** localStorage key holding the theme (matches useColorScheme). @default "twico-theme" */
|
|
74
|
+
storageKey?: string;
|
|
75
|
+
/** How the scheme is applied: the `dark` class, or a `[data-…]` attribute value. @default "class" */
|
|
76
|
+
attribute?: string;
|
|
77
|
+
/** Scheme to use when nothing is stored (skips the prefers-color-scheme probe). */
|
|
78
|
+
defaultScheme?: "light" | "dark";
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
interface ColorSchemeScriptProps extends ColorSchemeScriptOptions {
|
|
82
|
+
/** CSP nonce for the inline `<script>`. */
|
|
83
|
+
nonce?: string;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/** The theme-init IIFE as a string, for consumers who inject the script themselves. */
|
|
87
|
+
declare function getColorSchemeScript(options?: ColorSchemeScriptOptions): string;
|
|
88
|
+
|
|
89
|
+
/** A `<script>` for the SSR `<head>` that applies the persisted color scheme before first paint. */
|
|
90
|
+
declare function ColorSchemeScript(props: ColorSchemeScriptProps): React.JSX.Element;
|
|
91
|
+
|
|
92
|
+
type KbdProps = React.HTMLAttributes<HTMLElement>;
|
|
93
|
+
|
|
94
|
+
declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
|
|
95
|
+
|
|
96
|
+
type PreProps = React.HTMLAttributes<HTMLPreElement>;
|
|
97
|
+
|
|
98
|
+
declare const Pre: React.ForwardRefExoticComponent<PreProps & React.RefAttributes<HTMLPreElement>>;
|
|
99
|
+
|
|
100
|
+
interface AnchorProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
101
|
+
/** Element to render (e.g. a router Link). @default "a" */
|
|
102
|
+
as?: React.ElementType;
|
|
103
|
+
/** Open in a new tab with rel="noopener noreferrer" and a ↗ affix. @default false */
|
|
104
|
+
external?: boolean;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
declare const Anchor: React.ForwardRefExoticComponent<AnchorProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
108
|
+
|
|
109
|
+
interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
110
|
+
/** Id of the control this labels. */
|
|
111
|
+
htmlFor?: string;
|
|
112
|
+
/** Append a danger-colored asterisk. @default false */
|
|
113
|
+
required?: boolean;
|
|
114
|
+
/** @default "md" */
|
|
115
|
+
size?: "sm" | "md" | "lg";
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
|
|
119
|
+
|
|
120
|
+
interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "alt"> {
|
|
121
|
+
/** Image source URL. */
|
|
122
|
+
src?: string;
|
|
123
|
+
/** Alternative text (required for accessibility; pass "" for decorative images). */
|
|
124
|
+
alt: string;
|
|
125
|
+
/** object-fit value. */
|
|
126
|
+
fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
|
|
127
|
+
/** Border radius token (e.g. "md", "lg", "full"). */
|
|
128
|
+
radius?: string;
|
|
129
|
+
/** CSS aspect-ratio (e.g. "16/9"). */
|
|
130
|
+
aspectRatio?: string;
|
|
131
|
+
/** Source swapped in if the image fails to load. */
|
|
132
|
+
fallback?: string;
|
|
133
|
+
/** @default "lazy" */
|
|
134
|
+
loading?: "lazy" | "eager";
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
|
|
138
|
+
|
|
3
139
|
/**
|
|
4
140
|
* Vertically stacked, expandable disclosure panels with smooth height animation.
|
|
5
141
|
*
|
|
@@ -2265,7 +2401,7 @@ interface BoxProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
2265
2401
|
shadow?: string;
|
|
2266
2402
|
}
|
|
2267
2403
|
|
|
2268
|
-
declare
|
|
2404
|
+
declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
|
|
2269
2405
|
|
|
2270
2406
|
/** Centered, max-width content wrapper with responsive horizontal padding. */
|
|
2271
2407
|
interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
|
|
@@ -2283,7 +2419,7 @@ interface ContainerProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
2283
2419
|
padded?: boolean;
|
|
2284
2420
|
}
|
|
2285
2421
|
|
|
2286
|
-
declare
|
|
2422
|
+
declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLElement>>;
|
|
2287
2423
|
|
|
2288
2424
|
/** Responsive column counts per breakpoint (base + sm/md/lg/xl at 640/768/1024/1280px). */
|
|
2289
2425
|
type ResponsiveColumns = { base?: number; sm?: number; md?: number; lg?: number; xl?: number };
|
|
@@ -2316,7 +2452,7 @@ interface GridProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
2316
2452
|
justifyContent?: React.CSSProperties["justifyContent"];
|
|
2317
2453
|
}
|
|
2318
2454
|
|
|
2319
|
-
declare
|
|
2455
|
+
declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
|
|
2320
2456
|
|
|
2321
2457
|
/** Flex layout primitive — rows or columns with token-based gaps. */
|
|
2322
2458
|
interface StackProps extends React.HTMLAttributes<HTMLElement> {
|
|
@@ -2356,7 +2492,7 @@ interface StackProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
2356
2492
|
divider?: React.ReactNode;
|
|
2357
2493
|
}
|
|
2358
2494
|
|
|
2359
|
-
declare
|
|
2495
|
+
declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;
|
|
2360
2496
|
|
|
2361
2497
|
/** Inline code, or a scrollable multi-line block with an optional copy button. */
|
|
2362
2498
|
interface CodeProps extends React.HTMLAttributes<HTMLElement> {
|
|
@@ -2410,7 +2546,7 @@ interface HeadingProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
2410
2546
|
lineClamp?: number;
|
|
2411
2547
|
}
|
|
2412
2548
|
|
|
2413
|
-
declare
|
|
2549
|
+
declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLElement>>;
|
|
2414
2550
|
|
|
2415
2551
|
/** Body text with token sizes and semantic color tones. Renders <p> by default. */
|
|
2416
2552
|
interface TextProps extends React.HTMLAttributes<HTMLElement> {
|
|
@@ -2435,7 +2571,7 @@ interface TextProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
2435
2571
|
lineClamp?: number;
|
|
2436
2572
|
}
|
|
2437
2573
|
|
|
2438
|
-
declare
|
|
2574
|
+
declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
|
|
2439
2575
|
|
|
2440
2576
|
/** SSR-safe `useLayoutEffect` (falls back to `useEffect` on the server). */
|
|
2441
2577
|
declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
|
|
@@ -2586,6 +2722,8 @@ declare function useId(prefix?: string): string;
|
|
|
2586
2722
|
interface UseFocusTrapOptions {
|
|
2587
2723
|
/** Restore focus to the previously-focused element when the trap deactivates. @default true */
|
|
2588
2724
|
restoreFocus?: boolean;
|
|
2725
|
+
/** Element to focus on activate instead of the first focusable — a ref or a `() => Element | null`. */
|
|
2726
|
+
initialFocus?: React.RefObject<HTMLElement | null> | (() => HTMLElement | null | undefined);
|
|
2589
2727
|
}
|
|
2590
2728
|
|
|
2591
2729
|
/**
|
|
@@ -2606,4 +2744,4 @@ declare function useFocusTrap<T extends HTMLElement = HTMLElement>(
|
|
|
2606
2744
|
*/
|
|
2607
2745
|
declare function usePortal(): (node: React.ReactNode) => React.ReactPortal | React.ReactNode | null;
|
|
2608
2746
|
|
|
2609
|
-
export { Accordion, type AccordionItem, type AccordionProps, type ActionTone, Alert, type AlertProps, 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, 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, Grid, type GridProps, Heading, type HeadingProps, type HeadingSize, IconButton, type IconButtonProps, Input, type InputProps, Kanban, type KanbanCard, type KanbanColumn, type KanbanProps, 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, 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, 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, type UseColorSchemeOptions, type UseFocusTrapOptions, type UseKeyPressOptions, type UseMediaQueryOptions, 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 };
|
|
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 };
|