@imfusion/web-ui 0.11.1-dev.6.gf4b6c627 → 0.11.1-dev.62.gfcd31b6e
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 +168 -1
- package/dist/{code-Cl9AzRyF.js → code-BaLXMEMa.js} +8 -8
- 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/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 +8 -0
- 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-roSB497o.js +171 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +4536 -2958
- 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-Bhb3qicp.js +31 -0
- package/dist/toggle-group-eGr6_hgQ.js +125 -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 +5526 -1748
- package/src/llms/llms.gen.txt +52 -1
- package/src/llms/skills/imf-web-ui-audit/SKILL.md +5 -2
- 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 +19 -1
- package/dist/tabs-DsDSCA--.js +0 -376
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
|
|
2
|
+
import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import { comboboxRoot } from './combobox.cva';
|
|
5
|
+
type UpstreamItem = React.ComponentProps<typeof ComboboxPrimitive.Item>;
|
|
6
|
+
interface RootProps<Value = unknown, Multiple extends boolean | undefined = false> extends React.ComponentProps<typeof ComboboxPrimitive.Root<Value, Multiple>> {
|
|
7
|
+
/** Field width: `auto` keeps the compact minimum; `wide` raises it; `full` fills the parent. @default "auto" */
|
|
8
|
+
width?: VariantProps<typeof comboboxRoot>["width"];
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Combobox.Root — text input with a filterable list of options, for choosing one or several.
|
|
12
|
+
*
|
|
13
|
+
* Wraps children in a div so a sibling Combobox.Label stacks above the field regardless of the parent's layout.
|
|
14
|
+
* Combobox.Portal is unaffected (it renders to document.body).
|
|
15
|
+
*
|
|
16
|
+
* @doc https://base-ui.com/react/components/combobox
|
|
17
|
+
* @llm https://base-ui.com/react/components/combobox.md
|
|
18
|
+
*/
|
|
19
|
+
export declare function Root<Value = unknown, Multiple extends boolean | undefined = false>({ width, className, style, ...props }: RootProps<Value, Multiple> & {
|
|
20
|
+
className?: string;
|
|
21
|
+
style?: React.CSSProperties;
|
|
22
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare namespace Root {
|
|
24
|
+
var displayName: string;
|
|
25
|
+
}
|
|
26
|
+
/** Combobox.Label — visible label, for the trigger in the input-inside-popup pattern. Label an input with `Field.Label`. */
|
|
27
|
+
export declare function Label(props: React.ComponentProps<typeof ComboboxPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export declare namespace Label {
|
|
29
|
+
var displayName: string;
|
|
30
|
+
}
|
|
31
|
+
/** Combobox.InputGroup — the field box that holds the input, clear button, and trigger. */
|
|
32
|
+
export declare function InputGroup(props: React.ComponentProps<typeof ComboboxPrimitive.InputGroup>): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export declare namespace InputGroup {
|
|
34
|
+
var displayName: string;
|
|
35
|
+
}
|
|
36
|
+
/** Combobox.Input — the text input that filters the list. An `inline` list is always open, so `aria-expanded` defaults to true. */
|
|
37
|
+
export declare function Input(props: React.ComponentProps<typeof ComboboxPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
export declare namespace Input {
|
|
39
|
+
var displayName: string;
|
|
40
|
+
}
|
|
41
|
+
/** Combobox.Trigger — button that opens the popup. Without children it draws a chevron. */
|
|
42
|
+
export declare function Trigger({ children, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
|
|
43
|
+
export declare namespace Trigger {
|
|
44
|
+
var displayName: string;
|
|
45
|
+
}
|
|
46
|
+
/** Combobox.Icon — visual indicator (chevron) inside the trigger. */
|
|
47
|
+
export declare function Icon(props: React.ComponentProps<typeof ComboboxPrimitive.Icon>): import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
export declare namespace Icon {
|
|
49
|
+
var displayName: string;
|
|
50
|
+
}
|
|
51
|
+
/** Combobox.Clear — button that clears the value. Without children it draws a cross. */
|
|
52
|
+
export declare function Clear({ children, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Clear>): import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
export declare namespace Clear {
|
|
54
|
+
var displayName: string;
|
|
55
|
+
}
|
|
56
|
+
/** Combobox.Value — renders the selected value, or the placeholder. */
|
|
57
|
+
export declare function Value(props: React.ComponentProps<typeof ComboboxPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
|
|
58
|
+
export declare namespace Value {
|
|
59
|
+
var displayName: string;
|
|
60
|
+
}
|
|
61
|
+
/** Combobox.Chips — the field box of a multiple combobox, holding chips and the input. */
|
|
62
|
+
export declare function Chips(props: React.ComponentProps<typeof ComboboxPrimitive.Chips>): import("react/jsx-runtime").JSX.Element;
|
|
63
|
+
export declare namespace Chips {
|
|
64
|
+
var displayName: string;
|
|
65
|
+
}
|
|
66
|
+
/** Combobox.Chip — one selected value in the field. */
|
|
67
|
+
export declare function Chip(props: React.ComponentProps<typeof ComboboxPrimitive.Chip>): import("react/jsx-runtime").JSX.Element;
|
|
68
|
+
export declare namespace Chip {
|
|
69
|
+
var displayName: string;
|
|
70
|
+
}
|
|
71
|
+
/** Combobox.ChipRemove — button that removes its chip. Without children it draws a small cross; give it an `aria-label`. */
|
|
72
|
+
export declare function ChipRemove({ children, ...props }: React.ComponentProps<typeof ComboboxPrimitive.ChipRemove>): import("react/jsx-runtime").JSX.Element;
|
|
73
|
+
export declare namespace ChipRemove {
|
|
74
|
+
var displayName: string;
|
|
75
|
+
}
|
|
76
|
+
/** Combobox.Portal — portals the popup tree to document.body (or a custom container). */
|
|
77
|
+
export declare function Portal(props: React.ComponentProps<typeof ComboboxPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
|
|
78
|
+
export declare namespace Portal {
|
|
79
|
+
var displayName: string;
|
|
80
|
+
}
|
|
81
|
+
/** Combobox.Backdrop — overlay behind the popup (visible only in modal mode). */
|
|
82
|
+
export declare function Backdrop(props: React.ComponentProps<typeof ComboboxPrimitive.Backdrop>): import("react/jsx-runtime").JSX.Element;
|
|
83
|
+
export declare namespace Backdrop {
|
|
84
|
+
var displayName: string;
|
|
85
|
+
}
|
|
86
|
+
/** Combobox.Positioner — positions the popup relative to the field. */
|
|
87
|
+
export declare function Positioner({ align, sideOffset, ...props }: React.ComponentProps<typeof ComboboxPrimitive.Positioner>): import("react/jsx-runtime").JSX.Element;
|
|
88
|
+
export declare namespace Positioner {
|
|
89
|
+
var displayName: string;
|
|
90
|
+
}
|
|
91
|
+
/** Combobox.Popup — dropdown surface. It keeps the height it had when it opened while the list filters. */
|
|
92
|
+
export declare function Popup(props: React.ComponentProps<typeof ComboboxPrimitive.Popup>): import("react/jsx-runtime").JSX.Element;
|
|
93
|
+
export declare namespace Popup {
|
|
94
|
+
var displayName: string;
|
|
95
|
+
}
|
|
96
|
+
/** Combobox.Arrow — pointer arrow attached to the popup. */
|
|
97
|
+
export declare function Arrow(props: React.ComponentProps<typeof ComboboxPrimitive.Arrow>): import("react/jsx-runtime").JSX.Element;
|
|
98
|
+
export declare namespace Arrow {
|
|
99
|
+
var displayName: string;
|
|
100
|
+
}
|
|
101
|
+
/** Combobox.Status — live-region line for loading and result counts, announced to screen readers. */
|
|
102
|
+
export declare function Status(props: React.ComponentProps<typeof ComboboxPrimitive.Status>): import("react/jsx-runtime").JSX.Element;
|
|
103
|
+
export declare namespace Status {
|
|
104
|
+
var displayName: string;
|
|
105
|
+
}
|
|
106
|
+
/** Combobox.Empty — message shown while no item matches. */
|
|
107
|
+
export declare function Empty(props: React.ComponentProps<typeof ComboboxPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
|
|
108
|
+
export declare namespace Empty {
|
|
109
|
+
var displayName: string;
|
|
110
|
+
}
|
|
111
|
+
/** Combobox.List — items container. An `inline` list keeps the height it had when it mounted while it filters. */
|
|
112
|
+
export declare function List(props: React.ComponentProps<typeof ComboboxPrimitive.List>): import("react/jsx-runtime").JSX.Element;
|
|
113
|
+
export declare namespace List {
|
|
114
|
+
var displayName: string;
|
|
115
|
+
}
|
|
116
|
+
/** Combobox.Row — one row of a `grid` list. */
|
|
117
|
+
export declare function Row(props: React.ComponentProps<typeof ComboboxPrimitive.Row>): import("react/jsx-runtime").JSX.Element;
|
|
118
|
+
export declare namespace Row {
|
|
119
|
+
var displayName: string;
|
|
120
|
+
}
|
|
121
|
+
/** Combobox.Collection — renders a list of items inside a group. */
|
|
122
|
+
export declare function Collection(props: React.ComponentProps<typeof ComboboxPrimitive.Collection>): import("react/jsx-runtime").JSX.Element;
|
|
123
|
+
export declare namespace Collection {
|
|
124
|
+
var displayName: string;
|
|
125
|
+
}
|
|
126
|
+
interface ItemProps extends Omit<UpstreamItem, "value"> {
|
|
127
|
+
value: UpstreamItem["value"];
|
|
128
|
+
}
|
|
129
|
+
/** Combobox.Item — individual selectable option. */
|
|
130
|
+
export declare function Item(props: ItemProps): import("react/jsx-runtime").JSX.Element;
|
|
131
|
+
export declare namespace Item {
|
|
132
|
+
var displayName: string;
|
|
133
|
+
}
|
|
134
|
+
/**
|
|
135
|
+
* Combobox.ItemIndicator — marker inside the item. Without children a single combobox draws a check in the selected
|
|
136
|
+
* item, and a `multiple` combobox draws a checkbox box on every item, checked when selected.
|
|
137
|
+
*/
|
|
138
|
+
export declare function ItemIndicator({ children, keepMounted, render, ...props }: React.ComponentProps<typeof ComboboxPrimitive.ItemIndicator>): import("react/jsx-runtime").JSX.Element;
|
|
139
|
+
export declare namespace ItemIndicator {
|
|
140
|
+
var displayName: string;
|
|
141
|
+
}
|
|
142
|
+
/** Combobox.ItemText — text label for an item, beside the indicator. */
|
|
143
|
+
export declare function ItemText(props: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
144
|
+
export declare namespace ItemText {
|
|
145
|
+
var displayName: string;
|
|
146
|
+
}
|
|
147
|
+
/** Combobox.ItemDescription — a muted second line under an item's text, such as an email address. */
|
|
148
|
+
export declare function ItemDescription(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
149
|
+
export declare namespace ItemDescription {
|
|
150
|
+
var displayName: string;
|
|
151
|
+
}
|
|
152
|
+
/** Combobox.Group — wrapper around a grouped set of items. */
|
|
153
|
+
export declare function Group(props: React.ComponentProps<typeof ComboboxPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
|
|
154
|
+
export declare namespace Group {
|
|
155
|
+
var displayName: string;
|
|
156
|
+
}
|
|
157
|
+
/** Combobox.GroupLabel — heading for a Combobox.Group. */
|
|
158
|
+
export declare function GroupLabel(props: React.ComponentProps<typeof ComboboxPrimitive.GroupLabel>): import("react/jsx-runtime").JSX.Element;
|
|
159
|
+
export declare namespace GroupLabel {
|
|
160
|
+
var displayName: string;
|
|
161
|
+
}
|
|
162
|
+
/** Combobox.Separator — thin divider between items. */
|
|
163
|
+
export declare function Separator(props: React.ComponentProps<typeof SeparatorPrimitive>): import("react/jsx-runtime").JSX.Element;
|
|
164
|
+
export declare namespace Separator {
|
|
165
|
+
var displayName: string;
|
|
166
|
+
}
|
|
167
|
+
/** The upstream hook that builds a `filter` function from locale and match options. */
|
|
168
|
+
export declare const useFilter: typeof ComboboxPrimitive.useFilter;
|
|
169
|
+
/** Reads the filtered items inside a combobox, for a custom list renderer. */
|
|
170
|
+
export declare const useFilteredItems: typeof ComboboxPrimitive.useFilteredItems;
|
|
171
|
+
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
|
|
1
2
|
import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
|
|
2
3
|
import { VariantProps } from 'class-variance-authority';
|
|
3
4
|
import * as ScrollArea from '../scroll-area/scroll-area';
|
|
@@ -102,7 +103,7 @@ export declare function Close(props: React.ComponentProps<typeof DialogPrimitive
|
|
|
102
103
|
export declare namespace Close {
|
|
103
104
|
var displayName: string;
|
|
104
105
|
}
|
|
105
|
-
type
|
|
106
|
+
type ContentProps = {
|
|
106
107
|
/** Heading of the dialog. */
|
|
107
108
|
title: React.ReactNode;
|
|
108
109
|
/** Short uppercase label above the title. */
|
|
@@ -127,6 +128,7 @@ type ComposedProps = Omit<React.ComponentProps<typeof DialogPrimitive.Root>, "ch
|
|
|
127
128
|
/** Content of the body. */
|
|
128
129
|
children?: React.ReactNode;
|
|
129
130
|
};
|
|
131
|
+
type ComposedProps = Omit<React.ComponentProps<typeof DialogPrimitive.Root>, "children"> & ContentProps;
|
|
130
132
|
type SimpleProps = ComposedProps & {
|
|
131
133
|
/** Element rendered as the trigger, such as a `Button`. Omit it for a controlled dialog. */
|
|
132
134
|
trigger?: React.ReactElement;
|
|
@@ -135,7 +137,7 @@ type SimpleProps = ComposedProps & {
|
|
|
135
137
|
* Dialog.Simple — pre-composed dialog: trigger, header with title, description, and optional status, a scrolling body,
|
|
136
138
|
* and either a close button in the header or a footer of `actions`. Root props pass through.
|
|
137
139
|
*/
|
|
138
|
-
export declare function Simple({ trigger, headerVariant, size, ...
|
|
140
|
+
export declare function Simple({ trigger, headerVariant, size, eyebrow, title, description, status, actions, children, ...rootProps }: SimpleProps): import("react/jsx-runtime").JSX.Element;
|
|
139
141
|
export declare namespace Simple {
|
|
140
142
|
var displayName: string;
|
|
141
143
|
}
|
|
@@ -144,8 +146,26 @@ type InlineProps = ComposedProps & {
|
|
|
144
146
|
trigger: React.ReactNode;
|
|
145
147
|
};
|
|
146
148
|
/** Dialog.Inline — like Dialog.Simple, but the trigger is text inside a sentence. */
|
|
147
|
-
export declare function Inline({ trigger, headerVariant, size, ...
|
|
149
|
+
export declare function Inline({ trigger, headerVariant, size, eyebrow, title, description, status, actions, children, ...rootProps }: InlineProps): import("react/jsx-runtime").JSX.Element;
|
|
148
150
|
export declare namespace Inline {
|
|
149
151
|
var displayName: string;
|
|
150
152
|
}
|
|
153
|
+
type AlertProps = Omit<React.ComponentProps<typeof AlertDialogPrimitive.Root>, "children"> & Omit<ContentProps, "headerVariant" | "actions"> & {
|
|
154
|
+
/** Element rendered as the trigger, such as a `Button`. Omit it for a controlled dialog. */
|
|
155
|
+
trigger?: React.ReactElement;
|
|
156
|
+
/** Buttons of the footer, the only way out. Include a Cancel `Dialog.Close`. */
|
|
157
|
+
actions: React.ReactNode;
|
|
158
|
+
};
|
|
159
|
+
/**
|
|
160
|
+
* Dialog.Alert — pre-composed confirmation that interrupts the user, announced as an `alertdialog`. Always modal; a click
|
|
161
|
+
* on the overlay does not close it, Escape does. Like Dialog.Simple, without a header close button. Root props pass
|
|
162
|
+
* through.
|
|
163
|
+
*
|
|
164
|
+
* @see https://base-ui.com/react/components/alert-dialog
|
|
165
|
+
* @llm https://base-ui.com/react/components/alert-dialog.md
|
|
166
|
+
*/
|
|
167
|
+
export declare function Alert({ trigger, size, eyebrow, title, description, status, actions, children, ...rootProps }: AlertProps): import("react/jsx-runtime").JSX.Element;
|
|
168
|
+
export declare namespace Alert {
|
|
169
|
+
var displayName: string;
|
|
170
|
+
}
|
|
151
171
|
export {};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
export interface FileDropZoneItem {
|
|
2
|
+
file: File;
|
|
3
|
+
/** Folder-relative path with the root folder's name first (`"scans/s1.nii.gz"`), or the file name for a loose file. */
|
|
4
|
+
path: string;
|
|
5
|
+
}
|
|
6
|
+
export interface CollectResult {
|
|
7
|
+
accepted: FileDropZoneItem[];
|
|
8
|
+
rejected: FileDropZoneItem[];
|
|
9
|
+
}
|
|
10
|
+
interface CollectOptions {
|
|
11
|
+
accept?: string[];
|
|
12
|
+
directory: boolean;
|
|
13
|
+
multiple: boolean;
|
|
14
|
+
}
|
|
15
|
+
/** The part of a `FileSystemEntry` the walk reads. */
|
|
16
|
+
export interface EntryLike {
|
|
17
|
+
readonly isFile: boolean;
|
|
18
|
+
readonly isDirectory: boolean;
|
|
19
|
+
readonly name: string;
|
|
20
|
+
readonly fullPath: string;
|
|
21
|
+
}
|
|
22
|
+
/** What the synchronous part of a `drop` handler can read; the drag data store is gone after the first `await`. */
|
|
23
|
+
interface DropSource {
|
|
24
|
+
entry: EntryLike | null;
|
|
25
|
+
file: File | null;
|
|
26
|
+
}
|
|
27
|
+
/** The part of a `DataTransfer` that `snapshotDrop` reads. */
|
|
28
|
+
interface DropData {
|
|
29
|
+
items: ArrayLike<{
|
|
30
|
+
kind: string;
|
|
31
|
+
webkitGetAsEntry: () => EntryLike | null;
|
|
32
|
+
getAsFile: () => File | null;
|
|
33
|
+
}>;
|
|
34
|
+
files: ArrayLike<File>;
|
|
35
|
+
}
|
|
36
|
+
export type DragState = "idle" | "accepting" | "rejecting";
|
|
37
|
+
export declare function matchesAccept(file: File, accept?: string[]): boolean;
|
|
38
|
+
/**
|
|
39
|
+
* A drag shows each item's MIME type but never its name, so only a type that is known to come from other extensions
|
|
40
|
+
* than the accepted ones is judged `"rejecting"`. A type missing from the table, an empty one, or an empty item list
|
|
41
|
+
* (Safari lists no items during a drag) stays `"accepting"`.
|
|
42
|
+
*/
|
|
43
|
+
export declare function classifyDrag(items: ArrayLike<{
|
|
44
|
+
kind: string;
|
|
45
|
+
type: string;
|
|
46
|
+
}>, accept?: string[]): DragState;
|
|
47
|
+
/** Reads every `webkitGetAsEntry()` and `getAsFile()` of a drop. Call it synchronously inside the `drop` handler. */
|
|
48
|
+
export declare function snapshotDrop(dataTransfer: DropData): DropSource[];
|
|
49
|
+
export declare function collectFromDrop(sources: DropSource[], options: CollectOptions): Promise<CollectResult>;
|
|
50
|
+
/** Files from a picker. A folder pick carries `webkitRelativePath`, which includes the chosen folder's name. */
|
|
51
|
+
export declare function collectFromFileList(files: File[], options: CollectOptions & {
|
|
52
|
+
fromFolder: boolean;
|
|
53
|
+
}): CollectResult;
|
|
54
|
+
/** Names the accepted types for copy: `[".png", ".jpg", ".jpeg", ".webp"]` becomes "PNG, JPEG or WebP". Empty without a list. */
|
|
55
|
+
export declare function describeAccept(accept?: string[]): string;
|
|
56
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export type FileDropZoneSize = "sm" | "md" | "lg";
|
|
2
|
+
interface FileDropZoneContextValue {
|
|
3
|
+
size: FileDropZoneSize;
|
|
4
|
+
disabled: boolean;
|
|
5
|
+
directory: boolean;
|
|
6
|
+
/** Whether a `FileDropZone.File` is mounted. */
|
|
7
|
+
filled: boolean;
|
|
8
|
+
openPicker: (mode: "files" | "folder") => void;
|
|
9
|
+
setFilled: (filled: boolean) => void;
|
|
10
|
+
registerTitle: (id: string | null) => void;
|
|
11
|
+
registerDescription: (id: string | null) => void;
|
|
12
|
+
}
|
|
13
|
+
/** What `FileDropZone.Root` hands to its parts; a part outside a Root reads the inert defaults. */
|
|
14
|
+
export declare const FileDropZoneContext: import('react').Context<FileDropZoneContextValue>;
|
|
15
|
+
export {};
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { Button } from '../button';
|
|
3
|
+
import { Icon, IconComponent } from '../icon';
|
|
4
|
+
import { IconButton } from '../icon-button';
|
|
5
|
+
import { DragState, FileDropZoneItem } from './collect-files';
|
|
6
|
+
declare const root: (props?: ({
|
|
7
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
8
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
9
|
+
type RootProps = React.ComponentProps<"div"> & VariantProps<typeof root> & {
|
|
10
|
+
/** Accepted file types: extensions (`".nii.gz"`), MIME types (`"image/png"`) or wildcards (`"image/*"`). Any file when empty. */
|
|
11
|
+
accept?: string[];
|
|
12
|
+
/** Whether more than one file can be added at once. With `false`, only the first accepted file is kept. */
|
|
13
|
+
multiple?: boolean;
|
|
14
|
+
/** Whether folders can be dropped or picked. They are scanned recursively. Needs `multiple`. */
|
|
15
|
+
directory?: boolean;
|
|
16
|
+
/** Blocks dropping and picking; the Triggers follow. */
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
/** Marks the zone as holding a problem. The message belongs in `Field.Error` or a `Callout`. */
|
|
19
|
+
invalid?: boolean;
|
|
20
|
+
/** Called once per drop or pick with the files that match `accept` and those that do not. */
|
|
21
|
+
onFilesAdded?: (accepted: FileDropZoneItem[], rejected: FileDropZoneItem[]) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Called when a drag over the zone starts, changes or ends. `"rejecting"` is reported only for a dragged type the
|
|
24
|
+
* browser exposes and `accept` cannot produce; names and counts are unknown until the drop.
|
|
25
|
+
*/
|
|
26
|
+
onDragStateChange?: (state: DragState) => void;
|
|
27
|
+
/** Words for the screen reader status after each drop or pick. Return `""` to stay silent. */
|
|
28
|
+
formatStatus?: (accepted: number, rejected: number) => string;
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* FileDropZone.Root — a group that collects files and folders by drop or by its Triggers and reports them through
|
|
32
|
+
* `onFilesAdded`. The Triggers are the keyboard and screen reader path; dropping is an enhancement.
|
|
33
|
+
*/
|
|
34
|
+
export declare function Root({ accept, multiple, directory, size, disabled, invalid, onFilesAdded, onDragStateChange, formatStatus, children, className, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onDragEnter, onDragOver, onDragLeave, onDrop, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
export declare namespace Root {
|
|
36
|
+
var displayName: string;
|
|
37
|
+
}
|
|
38
|
+
/** FileDropZone.Title — names the group. */
|
|
39
|
+
export declare function Title(props: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
|
|
40
|
+
export declare namespace Title {
|
|
41
|
+
var displayName: string;
|
|
42
|
+
}
|
|
43
|
+
/** FileDropZone.Description — describes the group, such as the accepted file types. */
|
|
44
|
+
export declare function Description(props: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
export declare namespace Description {
|
|
46
|
+
var displayName: string;
|
|
47
|
+
}
|
|
48
|
+
/** FileDropZone.Actions — the row of Triggers. */
|
|
49
|
+
export declare function Actions(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
50
|
+
export declare namespace Actions {
|
|
51
|
+
var displayName: string;
|
|
52
|
+
}
|
|
53
|
+
type FileProps = React.ComponentProps<"div"> & {
|
|
54
|
+
/** The single file the zone holds. Its name shows middle-truncated, with the last 12 characters kept, and its size in mono. */
|
|
55
|
+
file: globalThis.File;
|
|
56
|
+
};
|
|
57
|
+
/**
|
|
58
|
+
* FileDropZone.File — the file a single-file zone holds, in place of `Title` and `Description`. It names the group,
|
|
59
|
+
* describes it with the size, and sets `data-filled` on the Root while mounted. Long names truncate in the middle so the
|
|
60
|
+
* extension stays readable; the full name is the `title`.
|
|
61
|
+
*/
|
|
62
|
+
export declare function File({ file, className, ...props }: FileProps): import("react/jsx-runtime").JSX.Element;
|
|
63
|
+
export declare namespace File {
|
|
64
|
+
var displayName: string;
|
|
65
|
+
}
|
|
66
|
+
type IconButtonProps = React.ComponentProps<typeof IconButton>;
|
|
67
|
+
type RemoveProps = Omit<IconButtonProps, "glyph" | "label"> & {
|
|
68
|
+
/** Accessible name of the button. Defaults to "Remove file". */
|
|
69
|
+
label?: string;
|
|
70
|
+
/** Defaults to `"ghost"` in an `sm` zone and `"outline"` otherwise. */
|
|
71
|
+
variant?: IconButtonProps["variant"];
|
|
72
|
+
/** Defaults to `"md"` in an `lg` zone and `"sm"` otherwise. */
|
|
73
|
+
size?: IconButtonProps["size"];
|
|
74
|
+
/** Defaults to the zone's `disabled`. */
|
|
75
|
+
disabled?: IconButtonProps["disabled"];
|
|
76
|
+
};
|
|
77
|
+
/** FileDropZone.Remove — an icon button that empties a filled zone. It carries no behavior of its own: `onClick` clears the consumer's state. */
|
|
78
|
+
export declare function Remove({ label, variant, size, disabled, ...props }: RemoveProps): import("react/jsx-runtime").JSX.Element;
|
|
79
|
+
export declare namespace Remove {
|
|
80
|
+
var displayName: string;
|
|
81
|
+
}
|
|
82
|
+
type GlyphProps = Omit<React.ComponentProps<typeof Icon>, "glyph"> & {
|
|
83
|
+
/** Icon component imported from `@imfusion/web-ui/icons`. Defaults to `UploadSquare`, or `Page` while a File is mounted. */
|
|
84
|
+
glyph?: IconComponent;
|
|
85
|
+
};
|
|
86
|
+
/** FileDropZone.Glyph — the large icon of the `lg` zone: the upload icon, or a page while a `FileDropZone.File` is mounted. It renders nothing in `sm` and `md`. */
|
|
87
|
+
export declare function Glyph({ glyph, size, ...props }: GlyphProps): import("react/jsx-runtime").JSX.Element | null;
|
|
88
|
+
export declare namespace Glyph {
|
|
89
|
+
var displayName: string;
|
|
90
|
+
}
|
|
91
|
+
type ButtonProps = React.ComponentProps<typeof Button>;
|
|
92
|
+
type TriggerProps = ButtonProps & {
|
|
93
|
+
/** `"files"` opens the file picker, `"folder"` the folder picker. A folder Trigger needs `directory` on the Root. */
|
|
94
|
+
mode?: "files" | "folder";
|
|
95
|
+
/** Defaults to `"ghost"` in an `sm` zone and `"outline"` otherwise. */
|
|
96
|
+
variant?: ButtonProps["variant"];
|
|
97
|
+
/** Defaults to `"md"` in an `lg` zone and `"sm"` otherwise. */
|
|
98
|
+
size?: ButtonProps["size"];
|
|
99
|
+
/** Defaults to the zone's `disabled`. */
|
|
100
|
+
disabled?: ButtonProps["disabled"];
|
|
101
|
+
};
|
|
102
|
+
/** FileDropZone.Trigger — a Button that opens the picker. */
|
|
103
|
+
export declare function Trigger({ mode, variant, size, disabled, onClick, ...props }: TriggerProps): import("react/jsx-runtime").JSX.Element | null;
|
|
104
|
+
export declare namespace Trigger {
|
|
105
|
+
var displayName: string;
|
|
106
|
+
}
|
|
107
|
+
export interface FileDropZoneUploadItem {
|
|
108
|
+
/** Identifies the row in `onRemove`. */
|
|
109
|
+
id: string;
|
|
110
|
+
file: globalThis.File;
|
|
111
|
+
/** Shown instead of the file name, such as a folder-relative path. */
|
|
112
|
+
path?: string;
|
|
113
|
+
/** `"queued"` and `"error"` rows list the file with a Remove button; `"uploading"` and `"done"` rows show a progress bar. */
|
|
114
|
+
status: "queued" | "uploading" | "done" | "error";
|
|
115
|
+
/** From 0 to 100 while `"uploading"`; `null` while the amount is unknown. */
|
|
116
|
+
progress?: number | null;
|
|
117
|
+
}
|
|
118
|
+
interface UploadLabels {
|
|
119
|
+
chooseFiles: string;
|
|
120
|
+
chooseFolder: string;
|
|
121
|
+
/** Text of the upload button, from the number of queued items. */
|
|
122
|
+
upload: (queued: number) => string;
|
|
123
|
+
/** Text beside "Start over" once the upload has finished, from the number of items done and failed. */
|
|
124
|
+
uploaded: (done: number, failed: number) => string;
|
|
125
|
+
overall: string;
|
|
126
|
+
startOver: string;
|
|
127
|
+
uploading: string;
|
|
128
|
+
done: string;
|
|
129
|
+
failed: string;
|
|
130
|
+
waiting: string;
|
|
131
|
+
/** Accessible name of the file list. */
|
|
132
|
+
files: string;
|
|
133
|
+
dropToAdd: string;
|
|
134
|
+
cantAdd: string;
|
|
135
|
+
releaseToAdd: (multiple: boolean) => string;
|
|
136
|
+
/** Hint while a drag the zone cannot accept is over it, from the named accepted types ("" without `accept`). */
|
|
137
|
+
addTypes: (types: string) => string;
|
|
138
|
+
remove: (name: string) => string;
|
|
139
|
+
retry: string;
|
|
140
|
+
/** Accessible name of a row's Retry button. */
|
|
141
|
+
retryName: (name: string) => string;
|
|
142
|
+
/** The note under the zone. `types` is set only when every skipped file failed the `accept` check. */
|
|
143
|
+
skipped: (info: {
|
|
144
|
+
count: number;
|
|
145
|
+
paths: string[];
|
|
146
|
+
types: string;
|
|
147
|
+
}) => string;
|
|
148
|
+
/** Screen reader announcement when the upload starts. */
|
|
149
|
+
uploadingStatus: (count: number) => string;
|
|
150
|
+
}
|
|
151
|
+
type UploadProps = Omit<RootProps, "children" | "directory" | "title" | "onReset"> & {
|
|
152
|
+
/** The files to list, in order. The app owns this list and each item's `status` and `progress`. */
|
|
153
|
+
items: FileDropZoneUploadItem[];
|
|
154
|
+
/** Called with the `id` of the row whose Remove button was pressed. */
|
|
155
|
+
onRemove: (id: string) => void;
|
|
156
|
+
/** Called when the upload button is pressed. The app starts the upload and moves the queued items to `"uploading"`. */
|
|
157
|
+
onUpload: () => void;
|
|
158
|
+
/**
|
|
159
|
+
* Called with the `id` of a failed row whose Retry button was pressed. The app sends the file again and moves the row
|
|
160
|
+
* back to `"uploading"`. Failed rows show Retry only when this is set.
|
|
161
|
+
*/
|
|
162
|
+
onRetry?: (id: string) => void;
|
|
163
|
+
/** Called by "Start over" once every item is done or failed. The button shows only when this is set. */
|
|
164
|
+
onReset?: () => void;
|
|
165
|
+
/** Heading of the card around the zone and the list. */
|
|
166
|
+
heading?: React.ReactNode;
|
|
167
|
+
/** Title of the zone. Defaults to "Drop files or a folder", or "Drop a file" without `multiple`. */
|
|
168
|
+
title?: React.ReactNode;
|
|
169
|
+
/** Text under the zone title. Defaults to the accepted types, such as "PNG, JPEG or WebP", and a note that folders are scanned. */
|
|
170
|
+
description?: React.ReactNode;
|
|
171
|
+
/** Whether the zone takes whole folders, with a "Choose folder" button. Needs `multiple`. */
|
|
172
|
+
folders?: boolean;
|
|
173
|
+
/** Replaces any of the English texts: the button texts, the drag copy, the row states, the skipped note, the finished text. */
|
|
174
|
+
labels?: Partial<UploadLabels>;
|
|
175
|
+
};
|
|
176
|
+
/**
|
|
177
|
+
* FileDropZone.Upload — the upload sequence in one piece: a zone, the list of collected files to check and remove, a
|
|
178
|
+
* `Progress` per row and overall once the upload runs, and the upload button. It is controlled and uploads nothing: the app
|
|
179
|
+
* keeps `items`, performs the upload, and reports each item's `status` and `progress`. Other props go to the zone.
|
|
180
|
+
*/
|
|
181
|
+
export declare function Upload({ items, onRemove, onUpload, onRetry, onReset, heading, title, description, folders, labels, size, multiple, accept, disabled, onFilesAdded, onDragStateChange, ...zoneProps }: UploadProps): import("react/jsx-runtime").JSX.Element;
|
|
182
|
+
export declare namespace Upload {
|
|
183
|
+
var displayName: string;
|
|
184
|
+
}
|
|
185
|
+
export {};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Formats a size such as "3.1 MB", in the unit that suits `scale` (the size itself by default). `digits` sets the decimals;
|
|
3
|
+
* by default one below ten units and none above. Bytes have none.
|
|
4
|
+
*/
|
|
5
|
+
export declare function formatBytes(bytes: number, scale?: number, digits?: number): string;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
declare const root: (props?: ({
|
|
3
|
+
radius?: "none" | "round" | "sm" | "md" | "lg" | null | undefined;
|
|
4
|
+
fit?: "contain" | "cover" | null | undefined;
|
|
5
|
+
border?: "none" | "single" | null | undefined;
|
|
6
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
+
type Props = Omit<React.ComponentProps<"img">, "width" | "height" | "alt" | "className" | "style" | "src" | "srcSet" | "sizes" | "loading" | "decoding"> & VariantProps<typeof root> & {
|
|
8
|
+
/** Address of the fallback `<img>`. */
|
|
9
|
+
src: string;
|
|
10
|
+
/** Width candidates of the fallback `<img>`. */
|
|
11
|
+
srcSet?: string;
|
|
12
|
+
/** Slot width the browser plans for, shared by both `<source>` elements and the `<img>`. */
|
|
13
|
+
sizes?: string;
|
|
14
|
+
/** `lazy` defers the request until the image nears the viewport. */
|
|
15
|
+
loading?: "lazy" | "eager";
|
|
16
|
+
/** `async` decodes off the main thread. */
|
|
17
|
+
decoding?: "async" | "sync" | "auto";
|
|
18
|
+
/** Describes the image. Pass `""` to mark it decorative. */
|
|
19
|
+
alt: string;
|
|
20
|
+
/** Intrinsic width in pixels. Together with `height` it reserves the box before the image loads. */
|
|
21
|
+
width: number;
|
|
22
|
+
/** Intrinsic height in pixels. */
|
|
23
|
+
height: number;
|
|
24
|
+
/** AVIF candidates for the `<picture>`, offered before WebP. */
|
|
25
|
+
avifSrcSet?: string;
|
|
26
|
+
/** WebP candidates for the `<picture>`, offered after AVIF. */
|
|
27
|
+
webpSrcSet?: string;
|
|
28
|
+
/** Hairline width in `border-size` steps. Applies with `border="single"`. */
|
|
29
|
+
borderWidth?: 1 | 2 | 3;
|
|
30
|
+
/** Width divided by height of the box. Defaults to `width / height`; the picture crops or letterboxes per `fit`. */
|
|
31
|
+
aspectRatio?: number;
|
|
32
|
+
/** Loads the image eagerly with high fetch priority. Set it on the page's largest image only. */
|
|
33
|
+
priority?: boolean;
|
|
34
|
+
/** Sizing and layout hook on the box around the picture. */
|
|
35
|
+
className?: string;
|
|
36
|
+
/** Sizing and layout hook on the box around the picture. */
|
|
37
|
+
style?: React.CSSProperties;
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* Image — a picture box with one `<source>` per format (AVIF, then WebP) and an `<img>` fallback. The browser picks the
|
|
41
|
+
* format and size. The box reserves `width` by `height` before the image arrives, pulses while it loads, and shows a
|
|
42
|
+
* glyph when it fails. Also called a photo, thumbnail or media.
|
|
43
|
+
*
|
|
44
|
+
* `ref` and every prop not named here reach the `<img>`.
|
|
45
|
+
*/
|
|
46
|
+
export declare function Image({ alt, width, height, avifSrcSet, webpSrcSet, priority, loading, decoding, radius, fit, border, borderWidth, aspectRatio, className, style, ref, ...props }: Props): import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
export declare namespace Image {
|
|
48
|
+
var displayName: string;
|
|
49
|
+
}
|
|
50
|
+
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const logo: (props?: ({
|
|
4
|
-
size?: "sm" | "md" | "lg" | "hero" | "
|
|
4
|
+
size?: "sm" | "md" | "lg" | "hero" | "xs" | "xl" | "fit" | null | undefined;
|
|
5
5
|
variant?: "inherit" | "main" | "support" | "minor" | "brand" | "oncolor" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
7
|
type Props = Omit<React.ComponentProps<"span">, "children"> & VariantProps<typeof logo> & {
|
|
@@ -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 {};
|