@nextlyhq/ui 0.0.2-alpha.56 → 0.0.2-alpha.58
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/color.cjs +33 -0
- package/dist/color.cjs.map +1 -1
- package/dist/color.d.cts +84 -1
- package/dist/color.d.ts +84 -1
- package/dist/color.mjs +28 -1
- package/dist/color.mjs.map +1 -1
- package/dist/index.cjs +539 -122
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +167 -20
- package/dist/index.d.ts +167 -20
- package/dist/index.mjs +535 -120
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.scoped.css +1 -1
- package/dist/tailwind-preset.cjs +55 -7
- package/dist/tailwind-preset.cjs.map +1 -1
- package/dist/tailwind-preset.d.cts +37 -1
- package/dist/tailwind-preset.d.ts +37 -1
- package/dist/tailwind-preset.mjs +55 -7
- package/dist/tailwind-preset.mjs.map +1 -1
- package/dist/theme.css +106 -28
- package/docs/plugin-ui-authoring.md +12 -10
- package/package.json +11 -8
package/dist/index.d.cts
CHANGED
|
@@ -13,7 +13,7 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
|
13
13
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
14
14
|
import { Content, Item, Root as Root$2, Trigger } from '@radix-ui/react-accordion';
|
|
15
15
|
import * as _radix_ui_react_tabs from '@radix-ui/react-tabs';
|
|
16
|
-
import { Content as Content$1,
|
|
16
|
+
import { Content as Content$1, Root as Root$3 } from '@radix-ui/react-tabs';
|
|
17
17
|
import * as _radix_ui_react_tooltip from '@radix-ui/react-tooltip';
|
|
18
18
|
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
19
19
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
@@ -71,7 +71,7 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
|
|
|
71
71
|
* - Placeholder text for guidance (not a replacement for labels)
|
|
72
72
|
*
|
|
73
73
|
* Design Specs:
|
|
74
|
-
* - Height: sm=
|
|
74
|
+
* - Height: sm=36px, default=40px, lg=44px
|
|
75
75
|
* - Padding: Horizontal varies by size (sm=10px, default=12px, lg=16px)
|
|
76
76
|
* - Border radius: `rounded-md`, the control step of the `--radius` scale
|
|
77
77
|
* - Border: 1px solid, changes on focus/error
|
|
@@ -79,7 +79,7 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
|
|
|
79
79
|
* - Font size: sm/default=14px (text-sm), lg=16px (text-base)
|
|
80
80
|
*
|
|
81
81
|
* Size Variants:
|
|
82
|
-
* - sm: Height
|
|
82
|
+
* - sm: Height 36px - Compact forms and filters, matching a small Button
|
|
83
83
|
* - default: Height 40px (h-10) - Standard forms
|
|
84
84
|
* - lg: Height 44px (h-11) - Prominent inputs, marketing forms
|
|
85
85
|
*
|
|
@@ -1025,16 +1025,6 @@ type AvatarFallbackProps = ComponentPropsWithoutRef<"span"> & {
|
|
|
1025
1025
|
* @public
|
|
1026
1026
|
*/
|
|
1027
1027
|
type TabsProps = ComponentPropsWithoutRef<typeof Root$3>;
|
|
1028
|
-
/**
|
|
1029
|
-
* Props for the TabsList component (container for tab triggers)
|
|
1030
|
-
* @public
|
|
1031
|
-
*/
|
|
1032
|
-
type TabsListProps = ComponentPropsWithoutRef<typeof List>;
|
|
1033
|
-
/**
|
|
1034
|
-
* Props for the TabsTrigger component (clickable tab button)
|
|
1035
|
-
* @public
|
|
1036
|
-
*/
|
|
1037
|
-
type TabsTriggerProps = ComponentPropsWithoutRef<typeof Trigger$1>;
|
|
1038
1028
|
/**
|
|
1039
1029
|
* Props for the TabsContent component (content panel for each tab)
|
|
1040
1030
|
* @public
|
|
@@ -1131,7 +1121,9 @@ declare const Tabs: react.ForwardRefExoticComponent<_radix_ui_react_tabs.TabsPro
|
|
|
1131
1121
|
* - Layout: inline-flex (horizontal by default, use orientation="vertical" on Tabs root for vertical)
|
|
1132
1122
|
* @public
|
|
1133
1123
|
*/
|
|
1134
|
-
declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> &
|
|
1124
|
+
declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
1125
|
+
variant?: "default" | "ghost" | null | undefined;
|
|
1126
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
|
|
1135
1127
|
/**
|
|
1136
1128
|
* TabsTrigger - Clickable tab button
|
|
1137
1129
|
*
|
|
@@ -1151,7 +1143,9 @@ declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tab
|
|
|
1151
1143
|
* - Data attributes: [data-state="active|inactive"], [data-disabled]
|
|
1152
1144
|
* @public
|
|
1153
1145
|
*/
|
|
1154
|
-
declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> &
|
|
1146
|
+
declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
1147
|
+
size?: "default" | "sm" | null | undefined;
|
|
1148
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLButtonElement>>;
|
|
1155
1149
|
/**
|
|
1156
1150
|
* TabsContent - Content panel for each tab
|
|
1157
1151
|
*
|
|
@@ -1167,6 +1161,26 @@ declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_
|
|
|
1167
1161
|
*/
|
|
1168
1162
|
declare const TabsContent: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1169
1163
|
|
|
1164
|
+
/**
|
|
1165
|
+
* The public prop types, DERIVED from the components rather than restated.
|
|
1166
|
+
*
|
|
1167
|
+
* `../types/tabs` describes the Radix props alone, so an alias taken from there
|
|
1168
|
+
* rejects `variant` and `size` — and a consumer typing a wrapper around
|
|
1169
|
+
* `TabsList` would be told the prop it can see in the signature does not exist.
|
|
1170
|
+
* Reading the component's own props keeps the two from drifting: a variant
|
|
1171
|
+
* added later reaches every consumer without a second edit.
|
|
1172
|
+
*/
|
|
1173
|
+
/**
|
|
1174
|
+
* The list's props, including its `variant`.
|
|
1175
|
+
* @public
|
|
1176
|
+
*/
|
|
1177
|
+
type TabsListProps = ComponentPropsWithoutRef<typeof TabsList>;
|
|
1178
|
+
/**
|
|
1179
|
+
* The trigger's props, including its `size`.
|
|
1180
|
+
* @public
|
|
1181
|
+
*/
|
|
1182
|
+
type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsTrigger>;
|
|
1183
|
+
|
|
1170
1184
|
/** @experimental */
|
|
1171
1185
|
declare const TooltipProvider: react.FC<_radix_ui_react_tooltip.TooltipProviderProps>;
|
|
1172
1186
|
/** @public */
|
|
@@ -1599,7 +1613,7 @@ type DropdownMenuShortcutProps = react.HTMLAttributes<HTMLSpanElement>;
|
|
|
1599
1613
|
* - Disabled state support
|
|
1600
1614
|
*
|
|
1601
1615
|
* Design Specs:
|
|
1602
|
-
* - Height: sm=
|
|
1616
|
+
* - Height: sm=36px, default=40px, lg=44px (matches Input component)
|
|
1603
1617
|
* - Padding: Horizontal 12px, vertical varies by size
|
|
1604
1618
|
* - Border radius: `rounded-md` on the trigger, `rounded-lg` on the panel
|
|
1605
1619
|
* - Border: 1px solid, changes on focus/error
|
|
@@ -1607,7 +1621,7 @@ type DropdownMenuShortcutProps = react.HTMLAttributes<HTMLSpanElement>;
|
|
|
1607
1621
|
* - Font size: sm/default=14px (text-sm), lg=16px (text-base)
|
|
1608
1622
|
*
|
|
1609
1623
|
* Size Variants:
|
|
1610
|
-
* - sm: Height
|
|
1624
|
+
* - sm: Height 36px - Compact forms and filters, matching a small Button
|
|
1611
1625
|
* - default: Height 40px (h-10) - Standard forms
|
|
1612
1626
|
* - lg: Height 44px (h-11) - Prominent selects
|
|
1613
1627
|
*
|
|
@@ -1922,7 +1936,30 @@ declare const Command: react.ForwardRefExoticComponent<Omit<{
|
|
|
1922
1936
|
vimBindings?: boolean;
|
|
1923
1937
|
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1924
1938
|
/** @experimental */
|
|
1925
|
-
|
|
1939
|
+
interface CommandDialogProps extends DialogPrimitive.DialogProps {
|
|
1940
|
+
/**
|
|
1941
|
+
* Passed to the command root this dialog renders internally.
|
|
1942
|
+
*
|
|
1943
|
+
* A seam rather than a list of forwarded props, because the settings a caller needs from the
|
|
1944
|
+
* root are the ones this component happens not to have thought of: `label`, which supplies the
|
|
1945
|
+
* search input's accessible name (cmdk renders an EMPTY hidden label without it, and an empty
|
|
1946
|
+
* `aria-labelledby` reference is worse than none — it stops the placeholder naming the field);
|
|
1947
|
+
* `filter` and `shouldFilter`, which decide match order; and `vimBindings`, which claims Ctrl+K
|
|
1948
|
+
* and Ctrl+N inside the list.
|
|
1949
|
+
*
|
|
1950
|
+
* `children` is excluded because this component owns the dialog's contents.
|
|
1951
|
+
*/
|
|
1952
|
+
commandProps?: Omit<ComponentPropsWithoutRef<typeof Command>, "children">;
|
|
1953
|
+
/**
|
|
1954
|
+
* Passed to the dialog content this component renders internally.
|
|
1955
|
+
*
|
|
1956
|
+
* The seam that matters here is `onCloseAutoFocus`: this dialog has no trigger, so Radix has
|
|
1957
|
+
* nothing to hand focus back to, and it fires this at the point focus is actually being
|
|
1958
|
+
* returned — after the exit animation, which a timer set at close time cannot know the length
|
|
1959
|
+
* of. `className` is excluded because this component owns the dialog's own layout.
|
|
1960
|
+
*/
|
|
1961
|
+
contentProps?: Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, "children" | "className">;
|
|
1962
|
+
}
|
|
1926
1963
|
/**
|
|
1927
1964
|
* CommandDialog - Command palette in a modal dialog.
|
|
1928
1965
|
* Use this variant for Cmd+K keyboard shortcut pattern.
|
|
@@ -1951,7 +1988,7 @@ type CommandDialogProps = DialogPrimitive.DialogProps;
|
|
|
1951
1988
|
* ```
|
|
1952
1989
|
* @experimental
|
|
1953
1990
|
*/
|
|
1954
|
-
declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
|
|
1991
|
+
declare const CommandDialog: ({ children, commandProps, contentProps, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
|
|
1955
1992
|
/** @experimental */
|
|
1956
1993
|
type CommandInputProps = ComponentPropsWithoutRef<typeof Command$1.Input>;
|
|
1957
1994
|
/**
|
|
@@ -2059,6 +2096,21 @@ type CommandShortcutProps = HTMLAttributes<HTMLSpanElement>;
|
|
|
2059
2096
|
*/
|
|
2060
2097
|
declare const CommandShortcut: react.ForwardRefExoticComponent<CommandShortcutProps & react.RefAttributes<HTMLSpanElement>>;
|
|
2061
2098
|
|
|
2099
|
+
/**
|
|
2100
|
+
* The command palette's default match scorer, re-exported.
|
|
2101
|
+
*
|
|
2102
|
+
* A caller that overrides `filter` — to keep an opaque item value out of the scoring, say — still
|
|
2103
|
+
* wants the ranking that comes for free, and reaching for `cmdk` directly is not open to every
|
|
2104
|
+
* package here.
|
|
2105
|
+
*
|
|
2106
|
+
* Bound to a declaration rather than re-exported with `export { x as y }`: the bundler keeps a doc
|
|
2107
|
+
* comment attached to a declaration and drops one attached to an export statement, so the release
|
|
2108
|
+
* tag would not reach the published types.
|
|
2109
|
+
*
|
|
2110
|
+
* @experimental
|
|
2111
|
+
*/
|
|
2112
|
+
declare const commandDefaultFilter: (value: string, search: string, keywords?: string[]) => number;
|
|
2113
|
+
|
|
2062
2114
|
/**
|
|
2063
2115
|
* Spinner Component - Design System Specification
|
|
2064
2116
|
*
|
|
@@ -2328,6 +2380,74 @@ interface TableSkeletonProps {
|
|
|
2328
2380
|
/** @experimental */
|
|
2329
2381
|
declare const TableSkeleton: react.FC<TableSkeletonProps>;
|
|
2330
2382
|
|
|
2383
|
+
/**
|
|
2384
|
+
* One preset a host offers.
|
|
2385
|
+
*
|
|
2386
|
+
* `color` is what the swatch is PAINTED with. `value` is what `onSwatchSelect`
|
|
2387
|
+
* hands back, unread by this component — a host storing design tokens puts its
|
|
2388
|
+
* own token reference there and receives it unchanged, so choosing a swatch
|
|
2389
|
+
* never resolves a token into the colour it currently happens to be. Without
|
|
2390
|
+
* that, re-theming stops moving the values that pointed at it.
|
|
2391
|
+
*
|
|
2392
|
+
* @experimental
|
|
2393
|
+
*/
|
|
2394
|
+
interface ColorSwatch<TValue = string> {
|
|
2395
|
+
id: string;
|
|
2396
|
+
label: string;
|
|
2397
|
+
color: string;
|
|
2398
|
+
value?: TValue;
|
|
2399
|
+
}
|
|
2400
|
+
/**
|
|
2401
|
+
* Props for ColorPicker.
|
|
2402
|
+
* @experimental
|
|
2403
|
+
*/
|
|
2404
|
+
interface ColorPickerProps<TValue = string> {
|
|
2405
|
+
/** The colour shown on the surface, as hex. */
|
|
2406
|
+
color: string;
|
|
2407
|
+
/** A colour was chosen by editing — surface, hue, alpha or the hex field. */
|
|
2408
|
+
onColorChange: (color: string) => void;
|
|
2409
|
+
/** Presets. Painted from `color`, returned by `value`. */
|
|
2410
|
+
swatches?: ColorSwatch<TValue>[];
|
|
2411
|
+
/**
|
|
2412
|
+
* A preset was chosen. Separate from `onColorChange` because only the host
|
|
2413
|
+
* can say what a swatch MEANS: the two are different events, and collapsing
|
|
2414
|
+
* them is what loses a token reference.
|
|
2415
|
+
*/
|
|
2416
|
+
onSwatchSelect?: (swatch: ColorSwatch<TValue>) => void;
|
|
2417
|
+
/**
|
|
2418
|
+
* Recently used colours. Owned by the host, never by this component — the
|
|
2419
|
+
* admin scopes them per user, and a component writing `localStorage` at
|
|
2420
|
+
* render is unusable on a server and untestable without a DOM.
|
|
2421
|
+
*/
|
|
2422
|
+
recentColors?: string[];
|
|
2423
|
+
/** Alpha channel. Off by default: most call sites want an opaque colour. */
|
|
2424
|
+
showAlpha?: boolean;
|
|
2425
|
+
className?: string;
|
|
2426
|
+
}
|
|
2427
|
+
/**
|
|
2428
|
+
* A colour control: a saturation square, a hue strip, optional alpha, a hex
|
|
2429
|
+
* field, and any presets the host supplies.
|
|
2430
|
+
*
|
|
2431
|
+
* Deliberately knows nothing about design tokens. A swatch carries an opaque
|
|
2432
|
+
* `value` this component never reads and hands back untouched, so a host can
|
|
2433
|
+
* store a token reference and keep it. That is what lets one component serve
|
|
2434
|
+
* both a plain colour field and a token-aware surface without either learning
|
|
2435
|
+
* about the other.
|
|
2436
|
+
*
|
|
2437
|
+
* @experimental
|
|
2438
|
+
*
|
|
2439
|
+
* @example
|
|
2440
|
+
* ```tsx
|
|
2441
|
+
* <ColorPicker
|
|
2442
|
+
* color={color}
|
|
2443
|
+
* onColorChange={setColor}
|
|
2444
|
+
* swatches={tokens.map(t => ({ id: t.name, label: t.name, color: t.value, value: { $token: t.name } }))}
|
|
2445
|
+
* onSwatchSelect={s => store(s.value)}
|
|
2446
|
+
* />
|
|
2447
|
+
* ```
|
|
2448
|
+
*/
|
|
2449
|
+
declare function ColorPicker<TValue = string>({ color, onColorChange, swatches, onSwatchSelect, recentColors, showAlpha, className, }: ColorPickerProps<TValue>): react_jsx_runtime.JSX.Element;
|
|
2450
|
+
|
|
2331
2451
|
/** @experimental */
|
|
2332
2452
|
interface PaginationMeta {
|
|
2333
2453
|
total: number;
|
|
@@ -2738,6 +2858,26 @@ interface ShortcutLayerOptions {
|
|
|
2738
2858
|
* is set, so no other context can act on a keystroke aimed at this one.
|
|
2739
2859
|
*/
|
|
2740
2860
|
blocking?: boolean;
|
|
2861
|
+
/**
|
|
2862
|
+
* Sorted ABOVE depth, so a layer can outrank one nested deeper than itself.
|
|
2863
|
+
*
|
|
2864
|
+
* Depth alone cannot express a modal. A modal wants to sit above every ordinary layer, but the
|
|
2865
|
+
* host chooses how deeply its own shortcuts are scoped, so any depth a modal picks can be tied
|
|
2866
|
+
* or beaten by a scope the host nests one level further. Priority is the axis the host does not
|
|
2867
|
+
* control: ordinary layers leave it at 0 and a modal raises it.
|
|
2868
|
+
*
|
|
2869
|
+
* KNOWN LIMIT, stated so it is not discovered: layers at EQUAL priority still compare depth
|
|
2870
|
+
* before registration order. Two modals therefore stack by how deeply each is scoped rather
|
|
2871
|
+
* than by which opened last, so a modal opened later at a shallower depth can sit under one
|
|
2872
|
+
* opened earlier and nested deeper — while whatever renders them puts the newer on top.
|
|
2873
|
+
*
|
|
2874
|
+
* Fixing it needs the manager to record when a layer is ACTIVATED, which registration order
|
|
2875
|
+
* does not capture: `useShortcuts` registers once at mount and updates its options in place, so
|
|
2876
|
+
* a layer enabled later still carries its mount-time sequence. Not attempted here because
|
|
2877
|
+
* nothing reaches it yet — `priority` is new and one layer sets it, so no two layers currently
|
|
2878
|
+
* share a nonzero value.
|
|
2879
|
+
*/
|
|
2880
|
+
priority?: number;
|
|
2741
2881
|
/** Whether the layer participates at all. A disabled layer neither matches nor blocks. */
|
|
2742
2882
|
enabled?: boolean;
|
|
2743
2883
|
}
|
|
@@ -2860,6 +3000,13 @@ interface UseShortcutsOptions {
|
|
|
2860
3000
|
* Set this while a drag or a modal interaction owns the keyboard.
|
|
2861
3001
|
*/
|
|
2862
3002
|
blocking?: boolean;
|
|
3003
|
+
/**
|
|
3004
|
+
* Sorted ABOVE depth, so a layer can outrank one nested deeper than itself.
|
|
3005
|
+
*
|
|
3006
|
+
* For a modal, whose hold must not be tied or beaten by a host scoping its own shortcuts one
|
|
3007
|
+
* level further. Ordinary layers leave this alone.
|
|
3008
|
+
*/
|
|
3009
|
+
priority?: number;
|
|
2863
3010
|
}
|
|
2864
3011
|
/**
|
|
2865
3012
|
* Register shortcuts for as long as the calling component is mounted.
|
|
@@ -2940,4 +3087,4 @@ type KeySequence = readonly KeyChord[];
|
|
|
2940
3087
|
*/
|
|
2941
3088
|
declare function parseKeys(spec: string): KeySequence;
|
|
2942
3089
|
|
|
2943
|
-
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, type ActiveShortcut, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type FilterInfo, FormLabelWithTooltip, type FormLabelWithTooltipProps, Grid, type GridProps, Input, type InputProps, type KeyChord, type KeySequence, Label, type ListResponse, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, type ShortcutBinding, type ShortcutLayerOptions, type ShortcutManager, type ShortcutManagerOptions, ShortcutProvider, type ShortcutProviderProps, type ShortcutRegistration, ShortcutScope, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderThumbProps, type SortInfo, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewProps, type UseShortcutsOptions, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, createShortcutManager, dialogContentVariants, inputVariants, parseKeys, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, useActiveShortcuts, usePortalContainer, useShortcutManager, useShortcuts };
|
|
3090
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, type ActiveShortcut, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, type ColorSwatch, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type FilterInfo, FormLabelWithTooltip, type FormLabelWithTooltipProps, Grid, type GridProps, Input, type InputProps, type KeyChord, type KeySequence, Label, type ListResponse, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, type ShortcutBinding, type ShortcutLayerOptions, type ShortcutManager, type ShortcutManagerOptions, ShortcutProvider, type ShortcutProviderProps, type ShortcutRegistration, ShortcutScope, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderThumbProps, type SortInfo, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewProps, type UseShortcutsOptions, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, commandDefaultFilter, createShortcutManager, dialogContentVariants, inputVariants, parseKeys, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, useActiveShortcuts, usePortalContainer, useShortcutManager, useShortcuts };
|
package/dist/index.d.ts
CHANGED
|
@@ -13,7 +13,7 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
|
|
|
13
13
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
14
14
|
import { Content, Item, Root as Root$2, Trigger } from '@radix-ui/react-accordion';
|
|
15
15
|
import * as _radix_ui_react_tabs from '@radix-ui/react-tabs';
|
|
16
|
-
import { Content as Content$1,
|
|
16
|
+
import { Content as Content$1, Root as Root$3 } from '@radix-ui/react-tabs';
|
|
17
17
|
import * as _radix_ui_react_tooltip from '@radix-ui/react-tooltip';
|
|
18
18
|
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
19
19
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
@@ -71,7 +71,7 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
|
|
|
71
71
|
* - Placeholder text for guidance (not a replacement for labels)
|
|
72
72
|
*
|
|
73
73
|
* Design Specs:
|
|
74
|
-
* - Height: sm=
|
|
74
|
+
* - Height: sm=36px, default=40px, lg=44px
|
|
75
75
|
* - Padding: Horizontal varies by size (sm=10px, default=12px, lg=16px)
|
|
76
76
|
* - Border radius: `rounded-md`, the control step of the `--radius` scale
|
|
77
77
|
* - Border: 1px solid, changes on focus/error
|
|
@@ -79,7 +79,7 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
|
|
|
79
79
|
* - Font size: sm/default=14px (text-sm), lg=16px (text-base)
|
|
80
80
|
*
|
|
81
81
|
* Size Variants:
|
|
82
|
-
* - sm: Height
|
|
82
|
+
* - sm: Height 36px - Compact forms and filters, matching a small Button
|
|
83
83
|
* - default: Height 40px (h-10) - Standard forms
|
|
84
84
|
* - lg: Height 44px (h-11) - Prominent inputs, marketing forms
|
|
85
85
|
*
|
|
@@ -1025,16 +1025,6 @@ type AvatarFallbackProps = ComponentPropsWithoutRef<"span"> & {
|
|
|
1025
1025
|
* @public
|
|
1026
1026
|
*/
|
|
1027
1027
|
type TabsProps = ComponentPropsWithoutRef<typeof Root$3>;
|
|
1028
|
-
/**
|
|
1029
|
-
* Props for the TabsList component (container for tab triggers)
|
|
1030
|
-
* @public
|
|
1031
|
-
*/
|
|
1032
|
-
type TabsListProps = ComponentPropsWithoutRef<typeof List>;
|
|
1033
|
-
/**
|
|
1034
|
-
* Props for the TabsTrigger component (clickable tab button)
|
|
1035
|
-
* @public
|
|
1036
|
-
*/
|
|
1037
|
-
type TabsTriggerProps = ComponentPropsWithoutRef<typeof Trigger$1>;
|
|
1038
1028
|
/**
|
|
1039
1029
|
* Props for the TabsContent component (content panel for each tab)
|
|
1040
1030
|
* @public
|
|
@@ -1131,7 +1121,9 @@ declare const Tabs: react.ForwardRefExoticComponent<_radix_ui_react_tabs.TabsPro
|
|
|
1131
1121
|
* - Layout: inline-flex (horizontal by default, use orientation="vertical" on Tabs root for vertical)
|
|
1132
1122
|
* @public
|
|
1133
1123
|
*/
|
|
1134
|
-
declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> &
|
|
1124
|
+
declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
1125
|
+
variant?: "default" | "ghost" | null | undefined;
|
|
1126
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
|
|
1135
1127
|
/**
|
|
1136
1128
|
* TabsTrigger - Clickable tab button
|
|
1137
1129
|
*
|
|
@@ -1151,7 +1143,9 @@ declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tab
|
|
|
1151
1143
|
* - Data attributes: [data-state="active|inactive"], [data-disabled]
|
|
1152
1144
|
* @public
|
|
1153
1145
|
*/
|
|
1154
|
-
declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> &
|
|
1146
|
+
declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
|
|
1147
|
+
size?: "default" | "sm" | null | undefined;
|
|
1148
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLButtonElement>>;
|
|
1155
1149
|
/**
|
|
1156
1150
|
* TabsContent - Content panel for each tab
|
|
1157
1151
|
*
|
|
@@ -1167,6 +1161,26 @@ declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_
|
|
|
1167
1161
|
*/
|
|
1168
1162
|
declare const TabsContent: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1169
1163
|
|
|
1164
|
+
/**
|
|
1165
|
+
* The public prop types, DERIVED from the components rather than restated.
|
|
1166
|
+
*
|
|
1167
|
+
* `../types/tabs` describes the Radix props alone, so an alias taken from there
|
|
1168
|
+
* rejects `variant` and `size` — and a consumer typing a wrapper around
|
|
1169
|
+
* `TabsList` would be told the prop it can see in the signature does not exist.
|
|
1170
|
+
* Reading the component's own props keeps the two from drifting: a variant
|
|
1171
|
+
* added later reaches every consumer without a second edit.
|
|
1172
|
+
*/
|
|
1173
|
+
/**
|
|
1174
|
+
* The list's props, including its `variant`.
|
|
1175
|
+
* @public
|
|
1176
|
+
*/
|
|
1177
|
+
type TabsListProps = ComponentPropsWithoutRef<typeof TabsList>;
|
|
1178
|
+
/**
|
|
1179
|
+
* The trigger's props, including its `size`.
|
|
1180
|
+
* @public
|
|
1181
|
+
*/
|
|
1182
|
+
type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsTrigger>;
|
|
1183
|
+
|
|
1170
1184
|
/** @experimental */
|
|
1171
1185
|
declare const TooltipProvider: react.FC<_radix_ui_react_tooltip.TooltipProviderProps>;
|
|
1172
1186
|
/** @public */
|
|
@@ -1599,7 +1613,7 @@ type DropdownMenuShortcutProps = react.HTMLAttributes<HTMLSpanElement>;
|
|
|
1599
1613
|
* - Disabled state support
|
|
1600
1614
|
*
|
|
1601
1615
|
* Design Specs:
|
|
1602
|
-
* - Height: sm=
|
|
1616
|
+
* - Height: sm=36px, default=40px, lg=44px (matches Input component)
|
|
1603
1617
|
* - Padding: Horizontal 12px, vertical varies by size
|
|
1604
1618
|
* - Border radius: `rounded-md` on the trigger, `rounded-lg` on the panel
|
|
1605
1619
|
* - Border: 1px solid, changes on focus/error
|
|
@@ -1607,7 +1621,7 @@ type DropdownMenuShortcutProps = react.HTMLAttributes<HTMLSpanElement>;
|
|
|
1607
1621
|
* - Font size: sm/default=14px (text-sm), lg=16px (text-base)
|
|
1608
1622
|
*
|
|
1609
1623
|
* Size Variants:
|
|
1610
|
-
* - sm: Height
|
|
1624
|
+
* - sm: Height 36px - Compact forms and filters, matching a small Button
|
|
1611
1625
|
* - default: Height 40px (h-10) - Standard forms
|
|
1612
1626
|
* - lg: Height 44px (h-11) - Prominent selects
|
|
1613
1627
|
*
|
|
@@ -1922,7 +1936,30 @@ declare const Command: react.ForwardRefExoticComponent<Omit<{
|
|
|
1922
1936
|
vimBindings?: boolean;
|
|
1923
1937
|
} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
1924
1938
|
/** @experimental */
|
|
1925
|
-
|
|
1939
|
+
interface CommandDialogProps extends DialogPrimitive.DialogProps {
|
|
1940
|
+
/**
|
|
1941
|
+
* Passed to the command root this dialog renders internally.
|
|
1942
|
+
*
|
|
1943
|
+
* A seam rather than a list of forwarded props, because the settings a caller needs from the
|
|
1944
|
+
* root are the ones this component happens not to have thought of: `label`, which supplies the
|
|
1945
|
+
* search input's accessible name (cmdk renders an EMPTY hidden label without it, and an empty
|
|
1946
|
+
* `aria-labelledby` reference is worse than none — it stops the placeholder naming the field);
|
|
1947
|
+
* `filter` and `shouldFilter`, which decide match order; and `vimBindings`, which claims Ctrl+K
|
|
1948
|
+
* and Ctrl+N inside the list.
|
|
1949
|
+
*
|
|
1950
|
+
* `children` is excluded because this component owns the dialog's contents.
|
|
1951
|
+
*/
|
|
1952
|
+
commandProps?: Omit<ComponentPropsWithoutRef<typeof Command>, "children">;
|
|
1953
|
+
/**
|
|
1954
|
+
* Passed to the dialog content this component renders internally.
|
|
1955
|
+
*
|
|
1956
|
+
* The seam that matters here is `onCloseAutoFocus`: this dialog has no trigger, so Radix has
|
|
1957
|
+
* nothing to hand focus back to, and it fires this at the point focus is actually being
|
|
1958
|
+
* returned — after the exit animation, which a timer set at close time cannot know the length
|
|
1959
|
+
* of. `className` is excluded because this component owns the dialog's own layout.
|
|
1960
|
+
*/
|
|
1961
|
+
contentProps?: Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, "children" | "className">;
|
|
1962
|
+
}
|
|
1926
1963
|
/**
|
|
1927
1964
|
* CommandDialog - Command palette in a modal dialog.
|
|
1928
1965
|
* Use this variant for Cmd+K keyboard shortcut pattern.
|
|
@@ -1951,7 +1988,7 @@ type CommandDialogProps = DialogPrimitive.DialogProps;
|
|
|
1951
1988
|
* ```
|
|
1952
1989
|
* @experimental
|
|
1953
1990
|
*/
|
|
1954
|
-
declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
|
|
1991
|
+
declare const CommandDialog: ({ children, commandProps, contentProps, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
|
|
1955
1992
|
/** @experimental */
|
|
1956
1993
|
type CommandInputProps = ComponentPropsWithoutRef<typeof Command$1.Input>;
|
|
1957
1994
|
/**
|
|
@@ -2059,6 +2096,21 @@ type CommandShortcutProps = HTMLAttributes<HTMLSpanElement>;
|
|
|
2059
2096
|
*/
|
|
2060
2097
|
declare const CommandShortcut: react.ForwardRefExoticComponent<CommandShortcutProps & react.RefAttributes<HTMLSpanElement>>;
|
|
2061
2098
|
|
|
2099
|
+
/**
|
|
2100
|
+
* The command palette's default match scorer, re-exported.
|
|
2101
|
+
*
|
|
2102
|
+
* A caller that overrides `filter` — to keep an opaque item value out of the scoring, say — still
|
|
2103
|
+
* wants the ranking that comes for free, and reaching for `cmdk` directly is not open to every
|
|
2104
|
+
* package here.
|
|
2105
|
+
*
|
|
2106
|
+
* Bound to a declaration rather than re-exported with `export { x as y }`: the bundler keeps a doc
|
|
2107
|
+
* comment attached to a declaration and drops one attached to an export statement, so the release
|
|
2108
|
+
* tag would not reach the published types.
|
|
2109
|
+
*
|
|
2110
|
+
* @experimental
|
|
2111
|
+
*/
|
|
2112
|
+
declare const commandDefaultFilter: (value: string, search: string, keywords?: string[]) => number;
|
|
2113
|
+
|
|
2062
2114
|
/**
|
|
2063
2115
|
* Spinner Component - Design System Specification
|
|
2064
2116
|
*
|
|
@@ -2328,6 +2380,74 @@ interface TableSkeletonProps {
|
|
|
2328
2380
|
/** @experimental */
|
|
2329
2381
|
declare const TableSkeleton: react.FC<TableSkeletonProps>;
|
|
2330
2382
|
|
|
2383
|
+
/**
|
|
2384
|
+
* One preset a host offers.
|
|
2385
|
+
*
|
|
2386
|
+
* `color` is what the swatch is PAINTED with. `value` is what `onSwatchSelect`
|
|
2387
|
+
* hands back, unread by this component — a host storing design tokens puts its
|
|
2388
|
+
* own token reference there and receives it unchanged, so choosing a swatch
|
|
2389
|
+
* never resolves a token into the colour it currently happens to be. Without
|
|
2390
|
+
* that, re-theming stops moving the values that pointed at it.
|
|
2391
|
+
*
|
|
2392
|
+
* @experimental
|
|
2393
|
+
*/
|
|
2394
|
+
interface ColorSwatch<TValue = string> {
|
|
2395
|
+
id: string;
|
|
2396
|
+
label: string;
|
|
2397
|
+
color: string;
|
|
2398
|
+
value?: TValue;
|
|
2399
|
+
}
|
|
2400
|
+
/**
|
|
2401
|
+
* Props for ColorPicker.
|
|
2402
|
+
* @experimental
|
|
2403
|
+
*/
|
|
2404
|
+
interface ColorPickerProps<TValue = string> {
|
|
2405
|
+
/** The colour shown on the surface, as hex. */
|
|
2406
|
+
color: string;
|
|
2407
|
+
/** A colour was chosen by editing — surface, hue, alpha or the hex field. */
|
|
2408
|
+
onColorChange: (color: string) => void;
|
|
2409
|
+
/** Presets. Painted from `color`, returned by `value`. */
|
|
2410
|
+
swatches?: ColorSwatch<TValue>[];
|
|
2411
|
+
/**
|
|
2412
|
+
* A preset was chosen. Separate from `onColorChange` because only the host
|
|
2413
|
+
* can say what a swatch MEANS: the two are different events, and collapsing
|
|
2414
|
+
* them is what loses a token reference.
|
|
2415
|
+
*/
|
|
2416
|
+
onSwatchSelect?: (swatch: ColorSwatch<TValue>) => void;
|
|
2417
|
+
/**
|
|
2418
|
+
* Recently used colours. Owned by the host, never by this component — the
|
|
2419
|
+
* admin scopes them per user, and a component writing `localStorage` at
|
|
2420
|
+
* render is unusable on a server and untestable without a DOM.
|
|
2421
|
+
*/
|
|
2422
|
+
recentColors?: string[];
|
|
2423
|
+
/** Alpha channel. Off by default: most call sites want an opaque colour. */
|
|
2424
|
+
showAlpha?: boolean;
|
|
2425
|
+
className?: string;
|
|
2426
|
+
}
|
|
2427
|
+
/**
|
|
2428
|
+
* A colour control: a saturation square, a hue strip, optional alpha, a hex
|
|
2429
|
+
* field, and any presets the host supplies.
|
|
2430
|
+
*
|
|
2431
|
+
* Deliberately knows nothing about design tokens. A swatch carries an opaque
|
|
2432
|
+
* `value` this component never reads and hands back untouched, so a host can
|
|
2433
|
+
* store a token reference and keep it. That is what lets one component serve
|
|
2434
|
+
* both a plain colour field and a token-aware surface without either learning
|
|
2435
|
+
* about the other.
|
|
2436
|
+
*
|
|
2437
|
+
* @experimental
|
|
2438
|
+
*
|
|
2439
|
+
* @example
|
|
2440
|
+
* ```tsx
|
|
2441
|
+
* <ColorPicker
|
|
2442
|
+
* color={color}
|
|
2443
|
+
* onColorChange={setColor}
|
|
2444
|
+
* swatches={tokens.map(t => ({ id: t.name, label: t.name, color: t.value, value: { $token: t.name } }))}
|
|
2445
|
+
* onSwatchSelect={s => store(s.value)}
|
|
2446
|
+
* />
|
|
2447
|
+
* ```
|
|
2448
|
+
*/
|
|
2449
|
+
declare function ColorPicker<TValue = string>({ color, onColorChange, swatches, onSwatchSelect, recentColors, showAlpha, className, }: ColorPickerProps<TValue>): react_jsx_runtime.JSX.Element;
|
|
2450
|
+
|
|
2331
2451
|
/** @experimental */
|
|
2332
2452
|
interface PaginationMeta {
|
|
2333
2453
|
total: number;
|
|
@@ -2738,6 +2858,26 @@ interface ShortcutLayerOptions {
|
|
|
2738
2858
|
* is set, so no other context can act on a keystroke aimed at this one.
|
|
2739
2859
|
*/
|
|
2740
2860
|
blocking?: boolean;
|
|
2861
|
+
/**
|
|
2862
|
+
* Sorted ABOVE depth, so a layer can outrank one nested deeper than itself.
|
|
2863
|
+
*
|
|
2864
|
+
* Depth alone cannot express a modal. A modal wants to sit above every ordinary layer, but the
|
|
2865
|
+
* host chooses how deeply its own shortcuts are scoped, so any depth a modal picks can be tied
|
|
2866
|
+
* or beaten by a scope the host nests one level further. Priority is the axis the host does not
|
|
2867
|
+
* control: ordinary layers leave it at 0 and a modal raises it.
|
|
2868
|
+
*
|
|
2869
|
+
* KNOWN LIMIT, stated so it is not discovered: layers at EQUAL priority still compare depth
|
|
2870
|
+
* before registration order. Two modals therefore stack by how deeply each is scoped rather
|
|
2871
|
+
* than by which opened last, so a modal opened later at a shallower depth can sit under one
|
|
2872
|
+
* opened earlier and nested deeper — while whatever renders them puts the newer on top.
|
|
2873
|
+
*
|
|
2874
|
+
* Fixing it needs the manager to record when a layer is ACTIVATED, which registration order
|
|
2875
|
+
* does not capture: `useShortcuts` registers once at mount and updates its options in place, so
|
|
2876
|
+
* a layer enabled later still carries its mount-time sequence. Not attempted here because
|
|
2877
|
+
* nothing reaches it yet — `priority` is new and one layer sets it, so no two layers currently
|
|
2878
|
+
* share a nonzero value.
|
|
2879
|
+
*/
|
|
2880
|
+
priority?: number;
|
|
2741
2881
|
/** Whether the layer participates at all. A disabled layer neither matches nor blocks. */
|
|
2742
2882
|
enabled?: boolean;
|
|
2743
2883
|
}
|
|
@@ -2860,6 +3000,13 @@ interface UseShortcutsOptions {
|
|
|
2860
3000
|
* Set this while a drag or a modal interaction owns the keyboard.
|
|
2861
3001
|
*/
|
|
2862
3002
|
blocking?: boolean;
|
|
3003
|
+
/**
|
|
3004
|
+
* Sorted ABOVE depth, so a layer can outrank one nested deeper than itself.
|
|
3005
|
+
*
|
|
3006
|
+
* For a modal, whose hold must not be tied or beaten by a host scoping its own shortcuts one
|
|
3007
|
+
* level further. Ordinary layers leave this alone.
|
|
3008
|
+
*/
|
|
3009
|
+
priority?: number;
|
|
2863
3010
|
}
|
|
2864
3011
|
/**
|
|
2865
3012
|
* Register shortcuts for as long as the calling component is mounted.
|
|
@@ -2940,4 +3087,4 @@ type KeySequence = readonly KeyChord[];
|
|
|
2940
3087
|
*/
|
|
2941
3088
|
declare function parseKeys(spec: string): KeySequence;
|
|
2942
3089
|
|
|
2943
|
-
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, type ActiveShortcut, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type FilterInfo, FormLabelWithTooltip, type FormLabelWithTooltipProps, Grid, type GridProps, Input, type InputProps, type KeyChord, type KeySequence, Label, type ListResponse, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, type ShortcutBinding, type ShortcutLayerOptions, type ShortcutManager, type ShortcutManagerOptions, ShortcutProvider, type ShortcutProviderProps, type ShortcutRegistration, ShortcutScope, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderThumbProps, type SortInfo, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewProps, type UseShortcutsOptions, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, createShortcutManager, dialogContentVariants, inputVariants, parseKeys, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, useActiveShortcuts, usePortalContainer, useShortcutManager, useShortcuts };
|
|
3090
|
+
export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, type ActiveShortcut, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, type ColorSwatch, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type FilterInfo, FormLabelWithTooltip, type FormLabelWithTooltipProps, Grid, type GridProps, Input, type InputProps, type KeyChord, type KeySequence, Label, type ListResponse, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, type ShortcutBinding, type ShortcutLayerOptions, type ShortcutManager, type ShortcutManagerOptions, ShortcutProvider, type ShortcutProviderProps, type ShortcutRegistration, ShortcutScope, Skeleton, type SkeletonProps, Slider, type SliderProps, type SliderThumbProps, type SortInfo, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TreeNode, TreeView, type TreeViewProps, type UseShortcutsOptions, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, commandDefaultFilter, createShortcutManager, dialogContentVariants, inputVariants, parseKeys, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, useActiveShortcuts, usePortalContainer, useShortcutManager, useShortcuts };
|