@imfusion/web-ui 0.11.1-dev.7.gf073da2b → 0.11.1-dev.71.g25428988
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 +196 -1
- package/dist/{code-Cl9AzRyF.js → code-72NzL5Cp.js} +13 -13
- package/dist/components/autocomplete/autocomplete.d.ts +144 -0
- package/dist/components/autocomplete/autocomplete.meta.d.ts +2 -0
- package/dist/components/autocomplete/index.d.ts +2 -0
- package/dist/components/avatar/avatar.d.ts +1 -1
- package/dist/components/card/card.d.ts +3 -2
- package/dist/components/checkbox/checkbox.cva.d.ts +3 -0
- package/dist/components/combobox/combobox.cva.d.ts +37 -0
- package/dist/components/combobox/combobox.d.ts +171 -0
- package/dist/components/combobox/combobox.meta.d.ts +2 -0
- package/dist/components/combobox/index.d.ts +2 -0
- package/dist/components/dialog/dialog.d.ts +23 -3
- package/dist/components/file-drop-zone/collect-files.d.ts +56 -0
- package/dist/components/file-drop-zone/file-drop-zone-context.d.ts +15 -0
- package/dist/components/file-drop-zone/file-drop-zone.d.ts +185 -0
- package/dist/components/file-drop-zone/file-drop-zone.meta.d.ts +2 -0
- package/dist/components/file-drop-zone/format-bytes.d.ts +5 -0
- package/dist/components/file-drop-zone/index.d.ts +4 -0
- package/dist/components/image/image.d.ts +50 -0
- package/dist/components/image/image.meta.d.ts +2 -0
- package/dist/components/image/index.d.ts +2 -0
- package/dist/components/logo/logo.d.ts +1 -1
- package/dist/components/menu/index.d.ts +2 -0
- package/dist/components/menu/menu.d.ts +135 -0
- package/dist/components/menu/menu.meta.d.ts +2 -0
- package/dist/components/popover/popover.d.ts +2 -2
- package/dist/components/progress/index.d.ts +2 -0
- package/dist/components/progress/progress.d.ts +40 -0
- package/dist/components/progress/progress.meta.d.ts +2 -0
- package/dist/components/rich-link/rich-link.d.ts +1 -1
- package/dist/components/select/select.cva.d.ts +7 -0
- package/dist/components/select/select.d.ts +1 -1
- package/dist/components/tab-nav/index.d.ts +2 -0
- package/dist/components/tab-nav/tab-nav.d.ts +26 -0
- package/dist/components/tab-nav/tab-nav.meta.d.ts +2 -0
- package/dist/components/table/table.d.ts +56 -1
- package/dist/components/tabs/tabs-underline.cva.d.ts +6 -0
- package/dist/components/tabs/tabs.d.ts +13 -4
- package/dist/components/textarea/index.d.ts +2 -0
- package/dist/components/textarea/textarea.d.ts +32 -0
- package/dist/components/textarea/textarea.meta.d.ts +2 -0
- package/dist/components/toast/toast.d.ts +2 -2
- package/dist/components/typo/typo.d.ts +5 -1
- package/dist/docgen/component-sources.d.ts +4 -0
- package/dist/icon-button-kVghav2z.js +171 -0
- package/dist/icons/catalog.gen.d.ts +7 -0
- package/dist/icons/icons.gen.d.ts +1 -0
- package/dist/{icons-vc1WZCxX.js → icons-CMetKl2x.js} +898 -893
- package/dist/icons.js +1 -1
- package/dist/index.d.ts +10 -0
- package/dist/index.js +5022 -3013
- package/dist/integrations/code-highlight.js +2 -2
- package/dist/integrations/frame-selection.js +1 -1
- package/dist/integrations/image-display-options.js +73 -71
- package/dist/integrations/layout-mode/index.d.ts +2 -0
- package/dist/integrations/layout-mode/layout-mode-view.d.ts +32 -0
- package/dist/integrations/layout-mode/layout-mode.d.ts +13 -0
- package/dist/integrations/layout-mode/layout-mode.meta.d.ts +2 -0
- package/dist/integrations/layout-mode.js +103 -0
- package/dist/integrations/view-tools/index.d.ts +4 -0
- package/dist/integrations/view-tools/use-view-interaction.d.ts +21 -0
- package/dist/integrations/view-tools/view-tools-view.d.ts +23 -0
- package/dist/integrations/view-tools/view-tools.d.ts +14 -0
- package/dist/integrations/view-tools/view-tools.meta.d.ts +2 -0
- package/dist/integrations/view-tools.js +133 -0
- package/dist/{resolve-state-props-DQf9WiGv.js → rolldown-runtime-Dy4uBu1J.js} +1 -12
- package/dist/row-CImu8yXV.js +136 -0
- package/dist/{scroll-area-z9Lf9uIk.js → scroll-area-CXQ_SxPX.js} +2 -1
- package/dist/{slider-Bf274cMe.js → slider-CpIZMAFl.js} +2 -1
- package/dist/style.css +2 -1
- package/dist/tabs-BqgyMmo6.js +173 -0
- package/dist/toggle-group-CVQzM3lQ.js +125 -0
- package/dist/toggle-group-ghJtINie.js +31 -0
- package/dist/utils/email.d.ts +4 -1
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/initials.d.ts +4 -0
- package/dist/utils/item-parts.d.ts +23 -0
- package/dist/utils/stable-popup-height.d.ts +10 -0
- package/dist/utils-J6vbjIt1.js +46 -0
- package/package.json +4 -4
- package/src/docgen/doc.gen.json +7591 -2096
- package/src/llms/icon-catalog.gen.json +8 -0
- package/src/llms/llms.gen.txt +59 -2
- package/src/llms/skills/imf-web-ui-audit/SKILL.md +5 -2
- package/src/llms/skills/imf-web-ui-components/SKILL.md +3 -1
- package/src/llms/skills/imf-web-ui-conventions/SKILL.md +2 -2
- package/src/llms/skills/imf-web-ui-conventions/templates/AUDIT_CHECKLIST.md +19 -2
- package/src/llms/skills/imf-web-ui-conventions/topics/assets.md +28 -4
- package/src/llms/skills/imf-web-ui-conventions/topics/components.md +10 -0
- package/src/llms/skills/imf-web-ui-conventions/topics/library-boundary.md +3 -0
- package/src/llms/skills/imf-web-ui-conventions/topics/npm-project.md +2 -1
- package/src/llms/skills/imf-web-ui-conventions/topics/react/composition.md +54 -0
- package/src/llms/skills/imf-web-ui-conventions/topics/react/effects.md +59 -0
- package/src/llms/skills/imf-web-ui-conventions/topics/react/state.md +41 -0
- package/src/llms/skills/imf-web-ui-conventions/topics/react.md +7 -60
- package/src/llms/skills/imf-web-ui-conventions/topics/styling.md +22 -1
- package/src/llms/skills/imf-web-ui-conventions/topics/tooling.md +3 -2
- package/src/llms/skills/imf-web-ui-conventions/topics/validation.md +7 -0
- package/src/llms/skills/imf-web-ui-ux/references/forms.md +3 -2
- package/src/llms/tokens.gen.json +21 -3
- package/dist/tabs-DsDSCA--.js +0 -376
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import { Menu as MenuPrimitive } from '@base-ui/react/menu';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare const menuPopup: (props?: ({
|
|
4
|
+
size?: "sm" | "md" | null | undefined;
|
|
5
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
6
|
+
export declare const createHandle: typeof MenuPrimitive.createHandle;
|
|
7
|
+
type RootProps<Payload = unknown> = React.ComponentProps<typeof MenuPrimitive.Root<Payload>>;
|
|
8
|
+
/**
|
|
9
|
+
* Menu.Root — container that manages open state and the menu tree.
|
|
10
|
+
*
|
|
11
|
+
* @see https://base-ui.com/react/components/menu
|
|
12
|
+
* @llm https://base-ui.com/react/components/menu.md
|
|
13
|
+
*/
|
|
14
|
+
export declare function Root<Payload = unknown>(props: RootProps<Payload>): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare namespace Root {
|
|
16
|
+
var displayName: string;
|
|
17
|
+
}
|
|
18
|
+
/** Menu.Trigger — native button that opens the menu. Pass `render={<Button />}` to use any element, such as a `Button`. */
|
|
19
|
+
export declare function Trigger(props: React.ComponentProps<typeof MenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare namespace Trigger {
|
|
21
|
+
var displayName: string;
|
|
22
|
+
}
|
|
23
|
+
/** Menu.Portal — renders the positioner in a portal outside the main document flow. */
|
|
24
|
+
export declare function Portal(props: React.ComponentProps<typeof MenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export declare namespace Portal {
|
|
26
|
+
var displayName: string;
|
|
27
|
+
}
|
|
28
|
+
/** Menu.Backdrop — overlay beneath the menu. */
|
|
29
|
+
export declare function Backdrop(props: React.ComponentProps<typeof MenuPrimitive.Backdrop>): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare namespace Backdrop {
|
|
31
|
+
var displayName: string;
|
|
32
|
+
}
|
|
33
|
+
/** Menu.Positioner — positions the popup relative to the trigger. */
|
|
34
|
+
export declare function Positioner({ sideOffset, alignOffset, ...props }: React.ComponentProps<typeof MenuPrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
export declare namespace Positioner {
|
|
36
|
+
var displayName: string;
|
|
37
|
+
}
|
|
38
|
+
interface PopupProps extends React.ComponentProps<typeof MenuPrimitive.Popup> {
|
|
39
|
+
/** Row density: `sm` is dense with hairlines between rows that have a description, `md` is roomier. A submenu popup sets its own. @default "sm" */
|
|
40
|
+
size?: VariantProps<typeof menuPopup>["size"];
|
|
41
|
+
}
|
|
42
|
+
/** Menu.Popup — the visible surface of the menu. Its `size` sets the density of every item inside. */
|
|
43
|
+
export declare function Popup({ size, ...props }: PopupProps): import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
export declare namespace Popup {
|
|
45
|
+
var displayName: string;
|
|
46
|
+
}
|
|
47
|
+
/** Menu.Arrow — pointer arrow anchored to the popup edge. */
|
|
48
|
+
export declare function Arrow(props: React.ComponentProps<typeof MenuPrimitive.Arrow>): import("react/jsx-runtime").JSX.Element;
|
|
49
|
+
export declare namespace Arrow {
|
|
50
|
+
var displayName: string;
|
|
51
|
+
}
|
|
52
|
+
/** Menu.Viewport — content wrapper that supports direction-aware transitions between triggers. */
|
|
53
|
+
export declare function Viewport(props: React.ComponentProps<typeof MenuPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
|
|
54
|
+
export declare namespace Viewport {
|
|
55
|
+
var displayName: string;
|
|
56
|
+
}
|
|
57
|
+
interface ItemSlots {
|
|
58
|
+
/** Glyph in the lead cell, such as `<Icon glyph={Plus} size={16} aria-hidden />`. A menu where no item has one drops the cell. */
|
|
59
|
+
icon?: React.ReactNode;
|
|
60
|
+
/** Muted second line under the text. */
|
|
61
|
+
description?: React.ReactNode;
|
|
62
|
+
/** Trailing label. A string or number renders as small mono text; any other node renders as given, such as a `Chip`. */
|
|
63
|
+
badge?: React.ReactNode;
|
|
64
|
+
}
|
|
65
|
+
interface ItemProps extends React.ComponentProps<typeof MenuPrimitive.Item>, ItemSlots {
|
|
66
|
+
}
|
|
67
|
+
/** Menu.Item — an action row. Without `label`, a string `children` is the text typeahead matches. */
|
|
68
|
+
export declare function Item({ icon, description, badge, label, children, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
|
|
69
|
+
export declare namespace Item {
|
|
70
|
+
var displayName: string;
|
|
71
|
+
}
|
|
72
|
+
interface LinkItemProps extends React.ComponentProps<typeof MenuPrimitive.LinkItem>, ItemSlots {
|
|
73
|
+
}
|
|
74
|
+
/** Menu.LinkItem — a row that renders an `<a>`. Pass a router link as `render`. */
|
|
75
|
+
export declare function LinkItem({ icon, description, badge, label, children, ...props }: LinkItemProps): import("react/jsx-runtime").JSX.Element;
|
|
76
|
+
export declare namespace LinkItem {
|
|
77
|
+
var displayName: string;
|
|
78
|
+
}
|
|
79
|
+
/** Menu.CheckboxItemIndicator — marks a ticked checkbox row. A wrapped `CheckboxItem` renders one itself. */
|
|
80
|
+
export declare function CheckboxItemIndicator(props: React.ComponentProps<typeof MenuPrimitive.CheckboxItemIndicator>): import("react/jsx-runtime").JSX.Element;
|
|
81
|
+
export declare namespace CheckboxItemIndicator {
|
|
82
|
+
var displayName: string;
|
|
83
|
+
}
|
|
84
|
+
interface CheckboxItemProps extends React.ComponentProps<typeof MenuPrimitive.CheckboxItem>, ItemSlots {
|
|
85
|
+
}
|
|
86
|
+
/** Menu.CheckboxItem — a row that toggles a setting. It draws its check in the trailing cell, after the badge. */
|
|
87
|
+
export declare function CheckboxItem({ icon, description, badge, label, children, ...props }: CheckboxItemProps): import("react/jsx-runtime").JSX.Element;
|
|
88
|
+
export declare namespace CheckboxItem {
|
|
89
|
+
var displayName: string;
|
|
90
|
+
}
|
|
91
|
+
/** Menu.RadioGroup — groups radio rows so one is selected. */
|
|
92
|
+
export declare function RadioGroup(props: React.ComponentProps<typeof MenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
|
|
93
|
+
export declare namespace RadioGroup {
|
|
94
|
+
var displayName: string;
|
|
95
|
+
}
|
|
96
|
+
/** Menu.RadioItemIndicator — marks the selected radio row. A wrapped `RadioItem` renders one itself. */
|
|
97
|
+
export declare function RadioItemIndicator(props: React.ComponentProps<typeof MenuPrimitive.RadioItemIndicator>): import("react/jsx-runtime").JSX.Element;
|
|
98
|
+
export declare namespace RadioItemIndicator {
|
|
99
|
+
var displayName: string;
|
|
100
|
+
}
|
|
101
|
+
interface RadioItemProps extends React.ComponentProps<typeof MenuPrimitive.RadioItem>, ItemSlots {
|
|
102
|
+
}
|
|
103
|
+
/** Menu.RadioItem — a row that selects one value of its `RadioGroup`. It draws its check in the trailing cell. */
|
|
104
|
+
export declare function RadioItem({ icon, description, badge, label, children, ...props }: RadioItemProps): import("react/jsx-runtime").JSX.Element;
|
|
105
|
+
export declare namespace RadioItem {
|
|
106
|
+
var displayName: string;
|
|
107
|
+
}
|
|
108
|
+
/** Menu.SubmenuRoot — container for a nested menu. */
|
|
109
|
+
export declare function SubmenuRoot(props: React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>): import("react/jsx-runtime").JSX.Element;
|
|
110
|
+
export declare namespace SubmenuRoot {
|
|
111
|
+
var displayName: string;
|
|
112
|
+
}
|
|
113
|
+
interface SubmenuTriggerProps extends React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger>, ItemSlots {
|
|
114
|
+
}
|
|
115
|
+
/** Menu.SubmenuTrigger — a row that opens a nested menu. It draws a chevron in the trailing cell. */
|
|
116
|
+
export declare function SubmenuTrigger({ icon, description, badge, label, children, ...props }: SubmenuTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
117
|
+
export declare namespace SubmenuTrigger {
|
|
118
|
+
var displayName: string;
|
|
119
|
+
}
|
|
120
|
+
/** Menu.Separator — divider line between rows or groups. */
|
|
121
|
+
export declare function Separator(props: React.ComponentProps<typeof MenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
|
|
122
|
+
export declare namespace Separator {
|
|
123
|
+
var displayName: string;
|
|
124
|
+
}
|
|
125
|
+
/** Menu.Group — groups related rows under a `GroupLabel`. */
|
|
126
|
+
export declare function Group(props: React.ComponentProps<typeof MenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
|
|
127
|
+
export declare namespace Group {
|
|
128
|
+
var displayName: string;
|
|
129
|
+
}
|
|
130
|
+
/** Menu.GroupLabel — accessible label of a `Group`. */
|
|
131
|
+
export declare function GroupLabel(props: React.ComponentProps<typeof MenuPrimitive.GroupLabel>): import("react/jsx-runtime").JSX.Element;
|
|
132
|
+
export declare namespace GroupLabel {
|
|
133
|
+
var displayName: string;
|
|
134
|
+
}
|
|
135
|
+
export {};
|
|
@@ -19,7 +19,7 @@ export declare function Root<Payload = unknown>(props: RootProps<Payload>): impo
|
|
|
19
19
|
export declare namespace Root {
|
|
20
20
|
var displayName: string;
|
|
21
21
|
}
|
|
22
|
-
/** Popover.Trigger — button that opens the popover. */
|
|
22
|
+
/** Popover.Trigger — button that opens the popover. With `render`, the rendered element keeps its own styles, such as a `Button`. */
|
|
23
23
|
export declare function Trigger({ variant, inline, ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger> & VariantProps<typeof popoverTrigger>): import("react/jsx-runtime").JSX.Element;
|
|
24
24
|
export declare namespace Trigger {
|
|
25
25
|
var displayName: string;
|
|
@@ -35,7 +35,7 @@ export declare namespace Backdrop {
|
|
|
35
35
|
var displayName: string;
|
|
36
36
|
}
|
|
37
37
|
/** Popover.Positioner — positions the popup relative to the trigger via floating-point layout. */
|
|
38
|
-
export declare function Positioner(props: React.ComponentProps<typeof PopoverPrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
export declare function Positioner({ sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
|
|
39
39
|
export declare namespace Positioner {
|
|
40
40
|
var displayName: string;
|
|
41
41
|
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { Progress as ProgressPrimitive } from '@base-ui/react/progress';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare const progressRoot: (props?: ({
|
|
4
|
+
size?: "sm" | "md" | "lg" | "xs" | null | undefined;
|
|
5
|
+
layout?: "inline" | "stacked" | null | undefined;
|
|
6
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
+
/**
|
|
8
|
+
* Progress.Root — completion of a running task, such as an upload or export.
|
|
9
|
+
*
|
|
10
|
+
* `value={null}` is indeterminate. Without a visible `Progress.Label`, name the bar with `aria-label`. Base UI hides
|
|
11
|
+
* `Progress.Value` from assistive tech, so custom Value text needs a matching `aria-valuetext`.
|
|
12
|
+
*
|
|
13
|
+
* @doc https://base-ui.com/react/components/progress
|
|
14
|
+
* @llm https://base-ui.com/react/components/progress.md
|
|
15
|
+
*/
|
|
16
|
+
export declare function Root({ size, layout, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root> & VariantProps<typeof progressRoot>): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare namespace Root {
|
|
18
|
+
var displayName: string;
|
|
19
|
+
}
|
|
20
|
+
/** Progress.Label — accessible label for the progress bar. */
|
|
21
|
+
export declare function Label(props: React.ComponentProps<typeof ProgressPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare namespace Label {
|
|
23
|
+
var displayName: string;
|
|
24
|
+
}
|
|
25
|
+
/** Progress.Value — formatted readout of the current value. Renders nothing while indeterminate. */
|
|
26
|
+
export declare function Value(props: React.ComponentProps<typeof ProgressPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare namespace Value {
|
|
28
|
+
var displayName: string;
|
|
29
|
+
}
|
|
30
|
+
/** Progress.Track — the full range. */
|
|
31
|
+
export declare function Track(props: React.ComponentProps<typeof ProgressPrimitive.Track>): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
export declare namespace Track {
|
|
33
|
+
var displayName: string;
|
|
34
|
+
}
|
|
35
|
+
/** Progress.Indicator — filled portion of the track up to the value. */
|
|
36
|
+
export declare function Indicator(props: React.ComponentProps<typeof ProgressPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare namespace Indicator {
|
|
38
|
+
var displayName: string;
|
|
39
|
+
}
|
|
40
|
+
export {};
|
|
@@ -2,7 +2,7 @@ import { IconComponent } from '../icon';
|
|
|
2
2
|
type Props = React.ComponentProps<"a"> & {
|
|
3
3
|
/** Leading icon from `@imfusion/web-ui/icons`, shown on a tile in the primary color. */
|
|
4
4
|
glyph?: IconComponent;
|
|
5
|
-
/** Second line under the label.
|
|
5
|
+
/** Second line under the label. */
|
|
6
6
|
description?: React.ReactNode;
|
|
7
7
|
/** Link target scope. `"external"` (default) opens in a new tab with a diagonal `ArrowUpRight` icon; `"internal"` stays in the current tab with a horizontal `ArrowRight` icon. */
|
|
8
8
|
kind?: "external" | "internal";
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/** Popup, list, and item styles, shared with primitives that open the same list (Combobox, Autocomplete). */
|
|
2
|
+
export declare const selectPopup: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
3
|
+
export declare const selectList: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
4
|
+
export declare const selectItem: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
5
|
+
export declare const selectItemIndicator: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
6
|
+
export declare const selectItemText: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
7
|
+
export declare const selectItemDescription: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
@@ -2,7 +2,7 @@ import { Select as SelectPrimitive } from '@base-ui/react/select';
|
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
type UpstreamItem = React.ComponentProps<typeof SelectPrimitive.Item>;
|
|
4
4
|
declare const selectRoot: (props?: ({
|
|
5
|
-
width?: "auto" | "
|
|
5
|
+
width?: "auto" | "wide" | "full" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
7
|
interface RootProps<Value = unknown, Multiple extends boolean | undefined = false> extends React.ComponentProps<typeof SelectPrimitive.Root<Value, Multiple>> {
|
|
8
8
|
/** Trigger width: `auto` keeps the compact minimum; `wide` raises it; `full` fills the parent. @default "auto" */
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { useRender } from '@base-ui/react/use-render';
|
|
2
|
+
interface RootProps extends React.ComponentProps<"nav"> {
|
|
3
|
+
/** Names the navigation for screen readers, such as "Project". */
|
|
4
|
+
"aria-label": string;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* TabNav.Root — a `<nav>` of links that draws the hairline under its items. Give it an `aria-label` that names the
|
|
8
|
+
* navigation, such as "Project".
|
|
9
|
+
* Not based on any upstream component.
|
|
10
|
+
*/
|
|
11
|
+
export declare function Root(props: RootProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare namespace Root {
|
|
13
|
+
var displayName: string;
|
|
14
|
+
}
|
|
15
|
+
type ItemProps = useRender.ComponentProps<"a"> & {
|
|
16
|
+
/** Marks the item as the page the user is on: sets `aria-current="page"` and `data-current`, and draws the bar. */
|
|
17
|
+
current?: boolean;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* TabNav.Item — a link in the row. Renders an `<a>`; pass a router link as `render` to navigate without a page load.
|
|
21
|
+
*/
|
|
22
|
+
export declare function Item({ current, render, ...props }: ItemProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
|
|
23
|
+
export declare namespace Item {
|
|
24
|
+
var displayName: string;
|
|
25
|
+
}
|
|
26
|
+
export {};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useRender } from '@base-ui/react/use-render';
|
|
2
|
+
import { Checkbox } from '../checkbox';
|
|
2
3
|
type CellActionProps = {
|
|
3
4
|
/** Marks an action column: it shrinks to its content and keeps it on one line. */
|
|
4
5
|
action?: boolean;
|
|
@@ -23,8 +24,12 @@ export declare function Body(props: React.ComponentProps<"tbody">): import("reac
|
|
|
23
24
|
export declare namespace Body {
|
|
24
25
|
var displayName: string;
|
|
25
26
|
}
|
|
27
|
+
type RowProps = React.ComponentProps<"tr"> & {
|
|
28
|
+
/** Dims the row and takes it out of use: its select checkbox, `RowLink` and `RowButton` stop responding. */
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
};
|
|
26
31
|
/** Table.Row — a `<tr>` in header or body. */
|
|
27
|
-
export declare function Row(props:
|
|
32
|
+
export declare function Row({ disabled, ...props }: RowProps): import("react/jsx-runtime").JSX.Element;
|
|
28
33
|
export declare namespace Row {
|
|
29
34
|
var displayName: string;
|
|
30
35
|
}
|
|
@@ -46,6 +51,15 @@ export declare function RowLink({ render, ...props }: useRender.ComponentProps<"
|
|
|
46
51
|
export declare namespace RowLink {
|
|
47
52
|
var displayName: string;
|
|
48
53
|
}
|
|
54
|
+
/**
|
|
55
|
+
* Table.RowButton — a `<button>` that stands for its whole row, such as one that opens a drawer. Use it when the row acts
|
|
56
|
+
* instead of navigating; a link that goes to a page is a `Table.RowLink`. In a disabled row it renders `disabled`, which
|
|
57
|
+
* only takes effect when it renders a button.
|
|
58
|
+
*/
|
|
59
|
+
export declare function RowButton({ render, type, ...props }: useRender.ComponentProps<"button">): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
|
|
60
|
+
export declare namespace RowButton {
|
|
61
|
+
var displayName: string;
|
|
62
|
+
}
|
|
49
63
|
/**
|
|
50
64
|
* Table.HeaderButton — inline action button for header cells. Generic by
|
|
51
65
|
* design: sorting toggles, filter toggles, column menus all render through it
|
|
@@ -72,4 +86,45 @@ export declare function SortableHeaderCell({ sortDirection, onToggle, children,
|
|
|
72
86
|
export declare namespace SortableHeaderCell {
|
|
73
87
|
var displayName: string;
|
|
74
88
|
}
|
|
89
|
+
type SelectCellProps = Omit<React.ComponentProps<typeof Checkbox.Root>, "className" | "aria-label"> & {
|
|
90
|
+
/** Reaches the `<td>`, not the checkbox. */
|
|
91
|
+
className?: string;
|
|
92
|
+
/** Names the checkbox, such as `Select brain_mr_t1_0142`. */
|
|
93
|
+
"aria-label": string;
|
|
94
|
+
};
|
|
95
|
+
/**
|
|
96
|
+
* Table.SelectCell — a `<td>` action cell holding the row's checkbox. `checked` and `onCheckedChange` belong to the app.
|
|
97
|
+
* `disabled` follows the row's `disabled` unless set.
|
|
98
|
+
*/
|
|
99
|
+
export declare function SelectCell({ className, disabled, ...props }: SelectCellProps): import("react/jsx-runtime").JSX.Element;
|
|
100
|
+
export declare namespace SelectCell {
|
|
101
|
+
var displayName: string;
|
|
102
|
+
}
|
|
103
|
+
type SelectAllCellProps = Omit<React.ComponentProps<typeof Checkbox.Root>, "className" | "children" | "aria-label" | "aria-labelledby"> & {
|
|
104
|
+
/** Reaches the `<th>`, not the checkbox. */
|
|
105
|
+
className?: string;
|
|
106
|
+
/** Number of columns the cell spans, such as the select and thumbnail columns. */
|
|
107
|
+
colSpan?: number;
|
|
108
|
+
/** The counter beside the checkbox, such as `2/4`. The app computes it. */
|
|
109
|
+
children?: React.ReactNode;
|
|
110
|
+
/** Names the checkbox for assistive tech; the counter follows it. */
|
|
111
|
+
label?: string;
|
|
112
|
+
};
|
|
113
|
+
/**
|
|
114
|
+
* Table.SelectAllCell — a `<th>` action cell with the select-all checkbox. The checkbox is named by `label` plus the
|
|
115
|
+
* counter. `disabled` follows the row's `disabled` unless set.
|
|
116
|
+
*/
|
|
117
|
+
export declare function SelectAllCell({ className, colSpan, children, label, disabled, ...props }: SelectAllCellProps): import("react/jsx-runtime").JSX.Element;
|
|
118
|
+
export declare namespace SelectAllCell {
|
|
119
|
+
var displayName: string;
|
|
120
|
+
}
|
|
121
|
+
type EmptyRowProps = React.ComponentProps<"tr"> & {
|
|
122
|
+
/** Number of columns the message spans. */
|
|
123
|
+
colSpan: number;
|
|
124
|
+
};
|
|
125
|
+
/** Table.EmptyRow — a body row with one muted cell across all columns. `children` holds the message and an optional action. */
|
|
126
|
+
export declare function EmptyRow({ colSpan, children, ...props }: EmptyRowProps): import("react/jsx-runtime").JSX.Element;
|
|
127
|
+
export declare namespace EmptyRow {
|
|
128
|
+
var displayName: string;
|
|
129
|
+
}
|
|
75
130
|
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The underline look shared by `Tabs` (appearance `"underline"`) and `TabNav`, which renders it on links. Keeping it here
|
|
3
|
+
* avoids cross-component imports between the two.
|
|
4
|
+
*/
|
|
5
|
+
export declare const tabsUnderlineRule: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
6
|
+
export declare const tabsUnderlineItem: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
@@ -2,18 +2,27 @@ import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
|
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const tabsList: (props?: ({
|
|
4
4
|
fill?: boolean | null | undefined;
|
|
5
|
+
appearance?: "underline" | "boxed" | null | undefined;
|
|
5
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
+
type TabsAppearance = "boxed" | "underline";
|
|
8
|
+
interface RootProps extends React.ComponentProps<typeof TabsPrimitive.Root> {
|
|
9
|
+
/**
|
|
10
|
+
* `"boxed"` outlines the active tab in a box that fuses into a framed panel. `"underline"` marks it with a bar under
|
|
11
|
+
* its label on a hairline rule, with an unframed panel. Underline is horizontal only: a vertical Tabs stays boxed.
|
|
12
|
+
*/
|
|
13
|
+
appearance?: TabsAppearance;
|
|
14
|
+
}
|
|
6
15
|
/**
|
|
7
16
|
* Tabs.Root — container that manages the active tab value and orientation context.
|
|
8
17
|
*
|
|
9
18
|
* @see https://base-ui.com/react/components/tabs
|
|
10
19
|
* @llm https://base-ui.com/react/components/tabs.md
|
|
11
20
|
*/
|
|
12
|
-
export declare function Root(props:
|
|
21
|
+
export declare function Root({ appearance, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
|
|
13
22
|
export declare namespace Root {
|
|
14
23
|
var displayName: string;
|
|
15
24
|
}
|
|
16
|
-
interface ListProps extends React.ComponentProps<typeof TabsPrimitive.List>, VariantProps<typeof tabsList> {
|
|
25
|
+
interface ListProps extends React.ComponentProps<typeof TabsPrimitive.List>, Pick<VariantProps<typeof tabsList>, "fill"> {
|
|
17
26
|
/**
|
|
18
27
|
* Give every tab an equal share of the list's length (equal width when
|
|
19
28
|
* horizontal). When vertical, this only takes effect if the list is stretched
|
|
@@ -32,7 +41,7 @@ export declare namespace Tab {
|
|
|
32
41
|
var displayName: string;
|
|
33
42
|
}
|
|
34
43
|
/**
|
|
35
|
-
* Tabs.Indicator — the bordered box marking the active tab, positioned via
|
|
44
|
+
* Tabs.Indicator — the bordered box (boxed) or bar (underline) marking the active tab, positioned via
|
|
36
45
|
* the `--active-tab-*` CSS custom properties Base UI writes onto it. Render
|
|
37
46
|
* once per Tabs.List, after the Tabs.Tab list.
|
|
38
47
|
*/
|
|
@@ -43,7 +52,7 @@ export declare namespace Indicator {
|
|
|
43
52
|
/**
|
|
44
53
|
* Tabs.PanelViewport — the shared frame Tabs.Panel elements render inside.
|
|
45
54
|
* No Base UI equivalent exists; it's surfaced as a named part since its
|
|
46
|
-
* hairline border is what Tabs.Indicator visually fuses into.
|
|
55
|
+
* hairline border is what the boxed Tabs.Indicator visually fuses into. The underline appearance draws no frame.
|
|
47
56
|
*/
|
|
48
57
|
export declare function PanelViewport(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
49
58
|
export declare namespace PanelViewport {
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { Input as InputPrimitive } from '@base-ui/react/input';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare const textarea: (props?: ({
|
|
4
|
+
variant?: "outline" | "ghost" | "filled" | null | undefined;
|
|
5
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
6
|
+
resize?: "none" | "both" | "horizontal" | "vertical" | null | undefined;
|
|
7
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
8
|
+
type UpstreamInput = React.ComponentProps<typeof InputPrimitive>;
|
|
9
|
+
interface Props extends Omit<React.ComponentProps<"textarea">, "className" | "style" | "value" | "defaultValue">, Pick<UpstreamInput, "value" | "defaultValue" | "onValueChange" | "render">, VariantProps<typeof textarea> {
|
|
10
|
+
/** Number of visible text lines. */
|
|
11
|
+
rows?: number;
|
|
12
|
+
/**
|
|
13
|
+
* Which directions the user can drag to resize. `horizontal` and `both` size the textarea from `cols` and shrink-wrap
|
|
14
|
+
* the root, so the width follows the drag; `none` hides the resize corner.
|
|
15
|
+
*/
|
|
16
|
+
resize?: "vertical" | "horizontal" | "both" | "none";
|
|
17
|
+
/** Class of the root wrapper that lays the field out. */
|
|
18
|
+
className?: string;
|
|
19
|
+
/** Style of the root wrapper that lays the field out. */
|
|
20
|
+
style?: React.CSSProperties;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Multi-line text input. Also called a text area; use Input for a single line.
|
|
24
|
+
* Wraps Base UI Input rendered as a textarea for controlled/uncontrolled state, form integration,
|
|
25
|
+
* and Field context awareness (valid/invalid/dirty/touched/filled/focused). `className` and `style`
|
|
26
|
+
* go to the root wrapper; every other prop goes to the textarea.
|
|
27
|
+
*
|
|
28
|
+
* @see https://base-ui.com/react/components/input
|
|
29
|
+
* @llm https://base-ui.com/react/components/input.md
|
|
30
|
+
*/
|
|
31
|
+
export declare function Textarea({ variant, size, rows, resize, render, className, style, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
export {};
|
|
@@ -2,10 +2,10 @@ import { Toast as ToastPrimitive } from '@base-ui/react/toast';
|
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const toastViewport: (props?: ({
|
|
4
4
|
position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;
|
|
5
|
-
width?: "default" | "content" | "
|
|
5
|
+
width?: "default" | "content" | "wide" | "compact" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
7
|
declare const toastRoot: (props?: ({
|
|
8
|
-
variant?: "warning" | "info" | "
|
|
8
|
+
variant?: "warning" | "info" | "error" | "neutral" | "success" | null | undefined;
|
|
9
9
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
10
10
|
/**
|
|
11
11
|
* Toast.useToastManager — reads the queue and the add/close/update/promise
|
|
@@ -9,6 +9,10 @@ type WeightProps = {
|
|
|
9
9
|
/** Font weight. Omit to keep the member's default; `medium` firms up short body text on cards. */
|
|
10
10
|
weight?: "regular" | "medium" | "strong";
|
|
11
11
|
};
|
|
12
|
+
type MarkerProps = {
|
|
13
|
+
/** Colour of the dash. Omit to follow the text colour. */
|
|
14
|
+
markerVariant?: TypoProps["variant"];
|
|
15
|
+
};
|
|
12
16
|
type HeadingProps = useRender.ComponentProps<"h1"> & TypoProps;
|
|
13
17
|
type LongHeadingProps = HeadingProps & {
|
|
14
18
|
/** Whether lines after the first use a translucent text color. */
|
|
@@ -99,7 +103,7 @@ export declare namespace OrderedList {
|
|
|
99
103
|
var displayName: string;
|
|
100
104
|
}
|
|
101
105
|
/** Typo.UnorderedList — bulleted list. */
|
|
102
|
-
export declare function UnorderedList({ variant, weight, render, ...props }: useRender.ComponentProps<"ul"> & TypoProps & WeightProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
|
|
106
|
+
export declare function UnorderedList({ variant, markerVariant, weight, render, ...props }: useRender.ComponentProps<"ul"> & TypoProps & WeightProps & MarkerProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
|
|
103
107
|
export declare namespace UnorderedList {
|
|
104
108
|
var displayName: string;
|
|
105
109
|
}
|
|
@@ -4,4 +4,8 @@ export type ComponentSource = {
|
|
|
4
4
|
componentFile: string;
|
|
5
5
|
metaFile: string;
|
|
6
6
|
};
|
|
7
|
+
/**
|
|
8
|
+
* A component folder is public when the package index exports it; an unexported folder is internal.
|
|
9
|
+
* Integrations ship through their own entry points and are always public.
|
|
10
|
+
*/
|
|
7
11
|
export declare function publicComponentSources(srcDir: string): ComponentSource[];
|