glasswind 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +120 -0
- package/dist/index.cjs +1979 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +735 -0
- package/dist/index.d.ts +735 -0
- package/dist/index.js +1930 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +2663 -0
- package/dist/styles.css.map +1 -0
- package/package.json +75 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,735 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, RefObject, useEffect } from 'react';
|
|
3
|
+
|
|
4
|
+
/** Whether one item can be open at a time (`single`) or many (`multiple`). */
|
|
5
|
+
type AccordionType = 'single' | 'multiple';
|
|
6
|
+
/** Open-item value(s): a single item value, or a list of them for `multiple`. */
|
|
7
|
+
type AccordionValue = string | string[];
|
|
8
|
+
interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
|
|
9
|
+
/** Whether only one item may be open (`single`) or several (`multiple`). @default 'single' */
|
|
10
|
+
type?: AccordionType;
|
|
11
|
+
/** Controlled open value(s). A string for `single`, an array for `multiple`. */
|
|
12
|
+
value?: AccordionValue;
|
|
13
|
+
/** Initial open value(s) when uncontrolled. */
|
|
14
|
+
defaultValue?: AccordionValue;
|
|
15
|
+
/** Fires with the next open value(s) whenever the open set changes. */
|
|
16
|
+
onChange?: (value: AccordionValue) => void;
|
|
17
|
+
/** In `single` mode, allow closing the open item by clicking it again. @default true */
|
|
18
|
+
collapsible?: boolean;
|
|
19
|
+
/** One or more `<AccordionItem>` children. */
|
|
20
|
+
children?: ReactNode;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Accordion — a stack of collapsible frosted-glass panels.
|
|
24
|
+
*
|
|
25
|
+
* Manages the open item(s) through context and `useControllableState`, so it
|
|
26
|
+
* works controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).
|
|
27
|
+
* Panels expand with a pure-CSS `grid-template-rows` animation — no height
|
|
28
|
+
* measuring — and headers support Arrow/Home/End roving focus.
|
|
29
|
+
*/
|
|
30
|
+
declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
|
|
31
|
+
interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
32
|
+
/** Unique value identifying this item within its accordion. */
|
|
33
|
+
value: string;
|
|
34
|
+
/** Header content rendered inside the trigger button. */
|
|
35
|
+
title: ReactNode;
|
|
36
|
+
/** Disable the header so the item cannot be toggled. @default false */
|
|
37
|
+
disabled?: boolean;
|
|
38
|
+
/** Panel content revealed when the item is expanded. */
|
|
39
|
+
children?: ReactNode;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* AccordionItem — a single header + collapsible panel pair.
|
|
43
|
+
*
|
|
44
|
+
* Reads its open state from the parent `<Accordion>` context. The header is a
|
|
45
|
+
* `<button>` with `aria-expanded`/`aria-controls`; the panel is a region
|
|
46
|
+
* labelled by that header and animated via `grid-template-rows`.
|
|
47
|
+
*/
|
|
48
|
+
declare const AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
|
|
49
|
+
|
|
50
|
+
type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
51
|
+
type AvatarShape = 'circle' | 'square';
|
|
52
|
+
type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
|
|
53
|
+
interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
|
|
54
|
+
/** Image URL. When it fails to load, the component falls back to initials. */
|
|
55
|
+
src?: string;
|
|
56
|
+
/** Alternative text for the image / accessible label for the fallback. */
|
|
57
|
+
alt?: string;
|
|
58
|
+
/** Full name used to derive initials when no image is available. */
|
|
59
|
+
name?: string;
|
|
60
|
+
/** Diameter preset. @default 'md' */
|
|
61
|
+
size?: AvatarSize;
|
|
62
|
+
/** Outline shape. @default 'circle' */
|
|
63
|
+
shape?: AvatarShape;
|
|
64
|
+
/** Presence indicator rendered as a dot at the bottom-right. */
|
|
65
|
+
status?: AvatarStatus;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* Avatar — a frosted-glass user thumbnail.
|
|
69
|
+
* Shows a photo when `src` loads, gracefully falls back to initials (from
|
|
70
|
+
* `name`) or a generic glyph, and can display a colored presence dot.
|
|
71
|
+
*/
|
|
72
|
+
declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
|
|
73
|
+
|
|
74
|
+
type BadgeVariant = 'glass' | 'primary' | 'success' | 'danger' | 'warning' | 'info';
|
|
75
|
+
type BadgeSize = 'sm' | 'md';
|
|
76
|
+
interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
77
|
+
/** Visual style. @default 'glass' */
|
|
78
|
+
variant?: BadgeVariant;
|
|
79
|
+
/** Text/padding scale. @default 'md' */
|
|
80
|
+
size?: BadgeSize;
|
|
81
|
+
/** Render a small leading colored dot before the label. @default false */
|
|
82
|
+
dot?: boolean;
|
|
83
|
+
/** Fully-rounded (radius-full) shape. @default true */
|
|
84
|
+
pill?: boolean;
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Badge — a compact inline label for status, counts, or metadata.
|
|
88
|
+
* Colored variants use the soft token backgrounds with the solid accent as
|
|
89
|
+
* text; the default `glass` variant uses the frosted-glass surface.
|
|
90
|
+
*/
|
|
91
|
+
declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
|
|
92
|
+
|
|
93
|
+
type ButtonVariant = 'glass' | 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
94
|
+
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
95
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
96
|
+
/** Visual style. @default 'glass' */
|
|
97
|
+
variant?: ButtonVariant;
|
|
98
|
+
/** Control height/padding. @default 'md' */
|
|
99
|
+
size?: ButtonSize;
|
|
100
|
+
/** Show a spinner and disable interaction. */
|
|
101
|
+
loading?: boolean;
|
|
102
|
+
/** Icon rendered before the label. */
|
|
103
|
+
leftIcon?: ReactNode;
|
|
104
|
+
/** Icon rendered after the label. */
|
|
105
|
+
rightIcon?: ReactNode;
|
|
106
|
+
/** Stretch to fill the container width. */
|
|
107
|
+
fullWidth?: boolean;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Button — the primary action element.
|
|
111
|
+
* Frosted-glass surface with a GPU-accelerated hover lift and press feedback.
|
|
112
|
+
*/
|
|
113
|
+
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
114
|
+
|
|
115
|
+
type CardVariant = 'glass' | 'solid';
|
|
116
|
+
type CardPadding = 'none' | 'sm' | 'md' | 'lg';
|
|
117
|
+
interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
|
118
|
+
/** Surface style: frosted `glass` or an opaque `solid` panel. @default 'glass' */
|
|
119
|
+
variant?: CardVariant;
|
|
120
|
+
/** Inner spacing applied to the card and its sections. @default 'md' */
|
|
121
|
+
padding?: CardPadding;
|
|
122
|
+
/** Lift the card on hover with a translateY + stronger shadow. @default false */
|
|
123
|
+
hoverable?: boolean;
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Card — a frosted-glass surface container.
|
|
127
|
+
* Compose with `CardHeader`, `CardBody`, and `CardFooter` for structured
|
|
128
|
+
* content. Features a radius-lg glass surface and a top-edge sheen.
|
|
129
|
+
*/
|
|
130
|
+
declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
|
|
131
|
+
/** Props shared by the Card section wrappers (`CardHeader`/`CardBody`/`CardFooter`). */
|
|
132
|
+
type CardSectionProps = HTMLAttributes<HTMLDivElement>;
|
|
133
|
+
/**
|
|
134
|
+
* CardHeader — top section of a `Card`, separated by a subtle bottom border.
|
|
135
|
+
*/
|
|
136
|
+
declare const CardHeader: react.ForwardRefExoticComponent<CardSectionProps & react.RefAttributes<HTMLDivElement>>;
|
|
137
|
+
/**
|
|
138
|
+
* CardBody — main content region of a `Card`.
|
|
139
|
+
*/
|
|
140
|
+
declare const CardBody: react.ForwardRefExoticComponent<CardSectionProps & react.RefAttributes<HTMLDivElement>>;
|
|
141
|
+
/**
|
|
142
|
+
* CardFooter — bottom section of a `Card`, separated by a subtle top border.
|
|
143
|
+
*/
|
|
144
|
+
declare const CardFooter: react.ForwardRefExoticComponent<CardSectionProps & react.RefAttributes<HTMLDivElement>>;
|
|
145
|
+
|
|
146
|
+
/** Box dimension preset for the checkbox control. */
|
|
147
|
+
type CheckboxSize = 'sm' | 'md' | 'lg';
|
|
148
|
+
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
|
|
149
|
+
/** Text/label rendered next to the box. Omit for a standalone control (pass `aria-label`). */
|
|
150
|
+
label?: ReactNode;
|
|
151
|
+
/** Show the tri-state "mixed" dash. Drives the native `indeterminate` DOM property. */
|
|
152
|
+
indeterminate?: boolean;
|
|
153
|
+
/** Paint the control in the danger color to signal a validation error. */
|
|
154
|
+
error?: boolean;
|
|
155
|
+
/** Size of the check box. @default 'md' */
|
|
156
|
+
boxSize?: CheckboxSize;
|
|
157
|
+
}
|
|
158
|
+
/**
|
|
159
|
+
* Checkbox — a custom-styled, fully accessible checkbox.
|
|
160
|
+
* Wraps a visually hidden native `input[type=checkbox]` so keyboard,
|
|
161
|
+
* form submission, and screen-reader semantics are preserved while a
|
|
162
|
+
* frosted-glass box renders the check/indeterminate state.
|
|
163
|
+
*/
|
|
164
|
+
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
|
|
165
|
+
|
|
166
|
+
/** Edge the drawer panel is pinned to. */
|
|
167
|
+
type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
|
|
168
|
+
interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
169
|
+
/** Whether the drawer is currently open (visible). */
|
|
170
|
+
isOpen: boolean;
|
|
171
|
+
/** Called when a close is requested — Esc key, backdrop click, or close button. */
|
|
172
|
+
onClose: () => void;
|
|
173
|
+
/** Panel content. Compose with `DrawerHeader` / `DrawerBody` / `DrawerFooter`. */
|
|
174
|
+
children: ReactNode;
|
|
175
|
+
/** Screen edge the panel slides in from. @default 'right' */
|
|
176
|
+
side?: DrawerSide;
|
|
177
|
+
/** Panel width (left/right) or height (top/bottom). Numbers are treated as px. @default '340px' */
|
|
178
|
+
size?: string | number;
|
|
179
|
+
/** Optional heading rendered in a built-in header row alongside the close button. */
|
|
180
|
+
title?: ReactNode;
|
|
181
|
+
/** Close the drawer when the backdrop is clicked. @default true */
|
|
182
|
+
closeOnBackdrop?: boolean;
|
|
183
|
+
/** Close the drawer when the Escape key is pressed. @default true */
|
|
184
|
+
closeOnEsc?: boolean;
|
|
185
|
+
/** Render the built-in close button in the header. @default true */
|
|
186
|
+
showClose?: boolean;
|
|
187
|
+
}
|
|
188
|
+
/**
|
|
189
|
+
* Drawer — a frosted-glass edge sheet.
|
|
190
|
+
* Renders through a `Portal`, pins a glass panel to the chosen screen edge,
|
|
191
|
+
* and slides it in with the matching GPU keyframe. Locks body scroll, closes
|
|
192
|
+
* on Esc / backdrop click, traps initial focus on the panel, and exposes
|
|
193
|
+
* `role="dialog"` with `aria-modal`. The forwarded ref points at the panel.
|
|
194
|
+
*/
|
|
195
|
+
declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
|
|
196
|
+
/** Props shared by the Drawer section wrappers (`DrawerHeader`/`DrawerBody`/`DrawerFooter`). */
|
|
197
|
+
type DrawerSectionProps = HTMLAttributes<HTMLDivElement>;
|
|
198
|
+
/**
|
|
199
|
+
* DrawerHeader — pinned top section of a `Drawer`, separated by a bottom border.
|
|
200
|
+
* Use instead of the built-in `title` header when you need custom header markup.
|
|
201
|
+
*/
|
|
202
|
+
declare const DrawerHeader: react.ForwardRefExoticComponent<DrawerSectionProps & react.RefAttributes<HTMLDivElement>>;
|
|
203
|
+
/**
|
|
204
|
+
* DrawerBody — the scrollable main content region of a `Drawer`.
|
|
205
|
+
* Grows to fill remaining space and scrolls its own overflow.
|
|
206
|
+
*/
|
|
207
|
+
declare const DrawerBody: react.ForwardRefExoticComponent<DrawerSectionProps & react.RefAttributes<HTMLDivElement>>;
|
|
208
|
+
/**
|
|
209
|
+
* DrawerFooter — pinned bottom section of a `Drawer`, separated by a top border.
|
|
210
|
+
*/
|
|
211
|
+
declare const DrawerFooter: react.ForwardRefExoticComponent<DrawerSectionProps & react.RefAttributes<HTMLDivElement>>;
|
|
212
|
+
|
|
213
|
+
/** Corner of the trigger the menu anchors to. */
|
|
214
|
+
type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
|
|
215
|
+
interface DropdownProps {
|
|
216
|
+
/** Controlled open state. Provide together with `onOpenChange`. */
|
|
217
|
+
open?: boolean;
|
|
218
|
+
/** Initial open state when uncontrolled. @default false */
|
|
219
|
+
defaultOpen?: boolean;
|
|
220
|
+
/** Called whenever the open state should change. */
|
|
221
|
+
onOpenChange?: (open: boolean) => void;
|
|
222
|
+
/** Corner of the trigger the menu anchors to. @default 'bottom-start' */
|
|
223
|
+
placement?: DropdownPlacement;
|
|
224
|
+
/** Trigger and menu parts (`DropdownTrigger`, `DropdownMenu`, …). */
|
|
225
|
+
children: ReactNode;
|
|
226
|
+
}
|
|
227
|
+
/**
|
|
228
|
+
* Dropdown — a compound menu-button.
|
|
229
|
+
* Provides open state, placement, and focus management via context to its
|
|
230
|
+
* `DropdownTrigger` and `DropdownMenu` parts. Closes on outside click and Esc,
|
|
231
|
+
* with roving arrow-key navigation across items.
|
|
232
|
+
*/
|
|
233
|
+
declare function Dropdown({ open: openProp, defaultOpen, onOpenChange, placement, children, }: DropdownProps): react.JSX.Element;
|
|
234
|
+
interface DropdownTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
235
|
+
/** Trigger content (text and/or icons). */
|
|
236
|
+
children?: ReactNode;
|
|
237
|
+
}
|
|
238
|
+
/**
|
|
239
|
+
* DropdownTrigger — the button that toggles the menu.
|
|
240
|
+
* Wires up `aria-haspopup`, `aria-expanded`, and `aria-controls`, and opens the
|
|
241
|
+
* menu on ArrowUp/ArrowDown.
|
|
242
|
+
*/
|
|
243
|
+
declare const DropdownTrigger: react.ForwardRefExoticComponent<DropdownTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
244
|
+
interface DropdownMenuProps extends HTMLAttributes<HTMLDivElement> {
|
|
245
|
+
/** Menu contents (`DropdownItem`, `DropdownSeparator`, `DropdownLabel`). */
|
|
246
|
+
children?: ReactNode;
|
|
247
|
+
}
|
|
248
|
+
/**
|
|
249
|
+
* DropdownMenu — the popover surface holding the items.
|
|
250
|
+
* Renders only while open, positioned per `placement`, with arrow/Home/End
|
|
251
|
+
* roving focus. Auto-focuses the first item when it opens.
|
|
252
|
+
*/
|
|
253
|
+
declare const DropdownMenu: react.ForwardRefExoticComponent<DropdownMenuProps & react.RefAttributes<HTMLDivElement>>;
|
|
254
|
+
interface DropdownItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {
|
|
255
|
+
/** Called when the item is chosen (click or Enter/Space). */
|
|
256
|
+
onSelect?: () => void;
|
|
257
|
+
/** Disable interaction and skip the item during keyboard navigation. */
|
|
258
|
+
disabled?: boolean;
|
|
259
|
+
/** Icon rendered before the item label. */
|
|
260
|
+
leftIcon?: ReactNode;
|
|
261
|
+
/** Item label / content. */
|
|
262
|
+
children?: ReactNode;
|
|
263
|
+
}
|
|
264
|
+
/**
|
|
265
|
+
* DropdownItem — a selectable menu row.
|
|
266
|
+
* Activates on click or Enter/Space (native button), then closes the menu and
|
|
267
|
+
* returns focus to the trigger.
|
|
268
|
+
*/
|
|
269
|
+
declare const DropdownItem: react.ForwardRefExoticComponent<DropdownItemProps & react.RefAttributes<HTMLButtonElement>>;
|
|
270
|
+
/** Props for the menu separator (a horizontal divider). */
|
|
271
|
+
type DropdownSeparatorProps = HTMLAttributes<HTMLDivElement>;
|
|
272
|
+
/**
|
|
273
|
+
* DropdownSeparator — a non-interactive horizontal divider between groups.
|
|
274
|
+
*/
|
|
275
|
+
declare const DropdownSeparator: react.ForwardRefExoticComponent<DropdownSeparatorProps & react.RefAttributes<HTMLDivElement>>;
|
|
276
|
+
/** Props for a non-interactive group label inside the menu. */
|
|
277
|
+
type DropdownLabelProps = HTMLAttributes<HTMLDivElement>;
|
|
278
|
+
/**
|
|
279
|
+
* DropdownLabel — a small, muted heading that titles a group of items.
|
|
280
|
+
*/
|
|
281
|
+
declare const DropdownLabel: react.ForwardRefExoticComponent<DropdownLabelProps & react.RefAttributes<HTMLDivElement>>;
|
|
282
|
+
|
|
283
|
+
type InputVariant = 'glass' | 'subtle';
|
|
284
|
+
type InputSize = 'sm' | 'md' | 'lg';
|
|
285
|
+
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
286
|
+
/** Visual surface treatment. @default 'subtle' */
|
|
287
|
+
variant?: InputVariant;
|
|
288
|
+
/** Control height/padding preset. @default 'md' */
|
|
289
|
+
inputSize?: InputSize;
|
|
290
|
+
/** Render the invalid state (danger border + `aria-invalid`). */
|
|
291
|
+
error?: boolean;
|
|
292
|
+
/** Adornment rendered before the field (e.g. a search icon). */
|
|
293
|
+
leftIcon?: ReactNode;
|
|
294
|
+
/** Adornment rendered after the field (e.g. a clear button). */
|
|
295
|
+
rightIcon?: ReactNode;
|
|
296
|
+
/** Stretch the field to fill the container width. */
|
|
297
|
+
fullWidth?: boolean;
|
|
298
|
+
}
|
|
299
|
+
/**
|
|
300
|
+
* Input — a single-line text field on a frosted-glass surface.
|
|
301
|
+
* The wrapper lifts its focus ring via `:focus-within` so clicking either the
|
|
302
|
+
* field or its icons keeps the whole control highlighted.
|
|
303
|
+
*/
|
|
304
|
+
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
|
|
305
|
+
|
|
306
|
+
/** Preset widths for the modal panel. */
|
|
307
|
+
type ModalSize = 'sm' | 'md' | 'lg' | 'full';
|
|
308
|
+
interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
309
|
+
/** Whether the modal is currently visible. */
|
|
310
|
+
isOpen: boolean;
|
|
311
|
+
/** Called when the modal requests to close (Esc, backdrop, close button). */
|
|
312
|
+
onClose: () => void;
|
|
313
|
+
/** Panel contents — typically ModalBody / ModalFooter sections. */
|
|
314
|
+
children: ReactNode;
|
|
315
|
+
/** Optional heading rendered in the panel header; also labels the dialog. */
|
|
316
|
+
title?: ReactNode;
|
|
317
|
+
/** Preset panel width. @default 'md' */
|
|
318
|
+
size?: ModalSize;
|
|
319
|
+
/** Close when the backdrop (area outside the panel) is clicked. @default true */
|
|
320
|
+
closeOnBackdrop?: boolean;
|
|
321
|
+
/** Close when the Escape key is pressed. @default true */
|
|
322
|
+
closeOnEsc?: boolean;
|
|
323
|
+
/** Render the header close button. @default true */
|
|
324
|
+
showClose?: boolean;
|
|
325
|
+
}
|
|
326
|
+
/**
|
|
327
|
+
* Modal — an accessible, glassmorphic dialog rendered in a Portal.
|
|
328
|
+
*
|
|
329
|
+
* Traps the page behind a frosted backdrop, locks body scroll while open,
|
|
330
|
+
* closes on Escape / backdrop click, and moves focus to the panel on open
|
|
331
|
+
* (restoring it to the previously-focused element on close).
|
|
332
|
+
*/
|
|
333
|
+
declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<HTMLDivElement>>;
|
|
334
|
+
/** Props for {@link ModalHeader}. Accepts all native `<div>` attributes. */
|
|
335
|
+
type ModalHeaderProps = HTMLAttributes<HTMLDivElement>;
|
|
336
|
+
/** Optional custom header section for use inside a Modal panel. */
|
|
337
|
+
declare const ModalHeader: react.ForwardRefExoticComponent<ModalHeaderProps & react.RefAttributes<HTMLDivElement>>;
|
|
338
|
+
/** Props for {@link ModalBody}. Accepts all native `<div>` attributes. */
|
|
339
|
+
type ModalBodyProps = HTMLAttributes<HTMLDivElement>;
|
|
340
|
+
/** Scrollable main content section for use inside a Modal panel. */
|
|
341
|
+
declare const ModalBody: react.ForwardRefExoticComponent<ModalBodyProps & react.RefAttributes<HTMLDivElement>>;
|
|
342
|
+
/** Props for {@link ModalFooter}. Accepts all native `<div>` attributes. */
|
|
343
|
+
type ModalFooterProps = HTMLAttributes<HTMLDivElement>;
|
|
344
|
+
/** Footer section (typically actions) for use inside a Modal panel. */
|
|
345
|
+
declare const ModalFooter: react.ForwardRefExoticComponent<ModalFooterProps & react.RefAttributes<HTMLDivElement>>;
|
|
346
|
+
|
|
347
|
+
interface PortalProps {
|
|
348
|
+
children: ReactNode;
|
|
349
|
+
/** Where to mount. Defaults to document.body. */
|
|
350
|
+
container?: HTMLElement | null;
|
|
351
|
+
}
|
|
352
|
+
/**
|
|
353
|
+
* Renders children into document.body (or a custom container) via a React
|
|
354
|
+
* portal. SSR-safe: renders nothing until mounted on the client, so it never
|
|
355
|
+
* touches `document` during server rendering (Next.js friendly).
|
|
356
|
+
*/
|
|
357
|
+
declare function Portal({ children, container }: PortalProps): react.ReactPortal | null;
|
|
358
|
+
|
|
359
|
+
type ProgressSize = 'sm' | 'md' | 'lg';
|
|
360
|
+
type ProgressColor = 'primary' | 'success' | 'danger' | 'warning' | 'info';
|
|
361
|
+
interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
|
|
362
|
+
/** Current progress, clamped to the range 0..max. Ignored when `indeterminate`. @default 0 */
|
|
363
|
+
value?: number;
|
|
364
|
+
/** Upper bound of the progress range. @default 100 */
|
|
365
|
+
max?: number;
|
|
366
|
+
/** Loop an animated partial bar for work of unknown duration. @default false */
|
|
367
|
+
indeterminate?: boolean;
|
|
368
|
+
/** Thickness of the track/fill. @default 'md' */
|
|
369
|
+
barSize?: ProgressSize;
|
|
370
|
+
/** Fill accent color. @default 'primary' */
|
|
371
|
+
color?: ProgressColor;
|
|
372
|
+
/** Render a live percentage label beside the track (determinate only). @default false */
|
|
373
|
+
showLabel?: boolean;
|
|
374
|
+
}
|
|
375
|
+
/**
|
|
376
|
+
* Progress — a linear glass progress bar.
|
|
377
|
+
*
|
|
378
|
+
* Determinate mode reveals the fill with a GPU-friendly `scaleX` transform driven
|
|
379
|
+
* by an inline `--gl-progress-value` custom property (value / max), so updates
|
|
380
|
+
* animate smoothly without touching layout. Indeterminate mode loops a partial bar
|
|
381
|
+
* for work of unknown length. Exposes the `progressbar` role with matching
|
|
382
|
+
* `aria-value*` attributes (`aria-valuenow` is omitted while indeterminate).
|
|
383
|
+
*/
|
|
384
|
+
declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
|
|
385
|
+
|
|
386
|
+
/** Layout direction for the radios inside a {@link RadioGroup}. */
|
|
387
|
+
type RadioGroupOrientation = 'vertical' | 'horizontal';
|
|
388
|
+
/** Value shared through {@link RadioGroupContext} to every descendant {@link Radio}. */
|
|
389
|
+
interface RadioGroupContextValue {
|
|
390
|
+
/** The `name` applied to every radio input so the browser treats them as one group. */
|
|
391
|
+
name: string;
|
|
392
|
+
/** The currently selected value, or an empty string when nothing is selected yet. */
|
|
393
|
+
value: string | undefined;
|
|
394
|
+
/** Select the radio identified by `value`. */
|
|
395
|
+
setValue: (value: string) => void;
|
|
396
|
+
}
|
|
397
|
+
/**
|
|
398
|
+
* Context published by {@link RadioGroup}. Consumed internally by {@link Radio};
|
|
399
|
+
* exported for advanced compositions that need to read or drive the selection.
|
|
400
|
+
*/
|
|
401
|
+
declare const RadioGroupContext: react.Context<RadioGroupContextValue | null>;
|
|
402
|
+
interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
|
|
403
|
+
/** Controlled selected value. Provide together with `onChange`. */
|
|
404
|
+
value?: string;
|
|
405
|
+
/** Initial selected value when the group is uncontrolled. */
|
|
406
|
+
defaultValue?: string;
|
|
407
|
+
/** Fired with the newly selected value whenever the selection changes. */
|
|
408
|
+
onChange?: (value: string) => void;
|
|
409
|
+
/** Shared `name` for every radio input; auto-generated when omitted. */
|
|
410
|
+
name?: string;
|
|
411
|
+
/** Direction the radios are laid out. @default 'vertical' */
|
|
412
|
+
orientation?: RadioGroupOrientation;
|
|
413
|
+
/** The `<Radio>` children that make up the group. */
|
|
414
|
+
children?: ReactNode;
|
|
415
|
+
}
|
|
416
|
+
/**
|
|
417
|
+
* RadioGroup — owns the selected value and shares it with its {@link Radio}
|
|
418
|
+
* children through context. Works controlled (`value` + `onChange`) or
|
|
419
|
+
* uncontrolled (`defaultValue`). Native radio semantics give arrow-key
|
|
420
|
+
* navigation between options for free.
|
|
421
|
+
*/
|
|
422
|
+
declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
|
|
423
|
+
interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'type' | 'onChange' | 'checked' | 'defaultChecked' | 'name'> {
|
|
424
|
+
/** The value this radio contributes; selected when it equals the group value. */
|
|
425
|
+
value: string;
|
|
426
|
+
/** Content rendered beside the control as the visible, clickable label. */
|
|
427
|
+
label?: ReactNode;
|
|
428
|
+
/** Prevent selection and mute the control. @default false */
|
|
429
|
+
disabled?: boolean;
|
|
430
|
+
}
|
|
431
|
+
/**
|
|
432
|
+
* Radio — a single frosted-glass option within a {@link RadioGroup}. Reads the
|
|
433
|
+
* shared selection from context and renders a visually hidden native
|
|
434
|
+
* `input[type="radio"]` (keeping full keyboard + form semantics) alongside a
|
|
435
|
+
* glass dot whose inner primary mark scales in when selected.
|
|
436
|
+
*/
|
|
437
|
+
declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
|
|
438
|
+
|
|
439
|
+
/** A single choice rendered as an `<option>` inside the Select. */
|
|
440
|
+
interface SelectOption {
|
|
441
|
+
/** Human-readable text shown for this option. */
|
|
442
|
+
label: string;
|
|
443
|
+
/** Value reported/submitted when this option is chosen. */
|
|
444
|
+
value: string | number;
|
|
445
|
+
/** Prevent this option from being selectable. @default false */
|
|
446
|
+
disabled?: boolean;
|
|
447
|
+
}
|
|
448
|
+
/** Control height, padding and font scale of the Select. */
|
|
449
|
+
type SelectSize = 'sm' | 'md' | 'lg';
|
|
450
|
+
interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
|
|
451
|
+
/** Options to render as `<option>`s. Omit to supply your own `children` instead. */
|
|
452
|
+
options?: SelectOption[];
|
|
453
|
+
/** Non-selectable prompt shown before a value is chosen. */
|
|
454
|
+
placeholder?: string;
|
|
455
|
+
/** Control height/padding/font scale. @default 'md' */
|
|
456
|
+
selectSize?: SelectSize;
|
|
457
|
+
/** Render the invalid/danger styling and set `aria-invalid`. @default false */
|
|
458
|
+
error?: boolean;
|
|
459
|
+
/** Stretch the control to fill its container width. @default false */
|
|
460
|
+
fullWidth?: boolean;
|
|
461
|
+
/** Custom `<option>` markup. Ignored when `options` is provided. */
|
|
462
|
+
children?: ReactNode;
|
|
463
|
+
}
|
|
464
|
+
/**
|
|
465
|
+
* Select — a styled, fully accessible wrapper around the native `<select>`.
|
|
466
|
+
*
|
|
467
|
+
* Keeps the reliability and built-in keyboard/screen-reader support of the
|
|
468
|
+
* platform control while hiding the native arrow and presenting a frosted-glass
|
|
469
|
+
* surface with a custom chevron, focus-within ring and error state.
|
|
470
|
+
*/
|
|
471
|
+
declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
|
|
472
|
+
|
|
473
|
+
interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'value' | 'defaultValue' | 'onChange'> {
|
|
474
|
+
/** Lowest selectable value. @default 0 */
|
|
475
|
+
min?: number;
|
|
476
|
+
/** Highest selectable value. @default 100 */
|
|
477
|
+
max?: number;
|
|
478
|
+
/** Granularity the value snaps to. @default 1 */
|
|
479
|
+
step?: number;
|
|
480
|
+
/** Controlled value. Provide together with `onChange`. */
|
|
481
|
+
value?: number;
|
|
482
|
+
/** Initial value when uncontrolled. Falls back to `min`. */
|
|
483
|
+
defaultValue?: number;
|
|
484
|
+
/** Fires with the new numeric value whenever the user drags or keys. */
|
|
485
|
+
onChange?: (value: number) => void;
|
|
486
|
+
/** Render a floating glass bubble with the live value above the thumb. @default false */
|
|
487
|
+
showValue?: boolean;
|
|
488
|
+
}
|
|
489
|
+
/**
|
|
490
|
+
* Slider — a styled range input on a frosted-glass track.
|
|
491
|
+
* The filled portion is driven by the `--gl-slider-fill` custom property so the
|
|
492
|
+
* gradient track and optional value bubble stay in sync with the thumb.
|
|
493
|
+
* Works controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).
|
|
494
|
+
*/
|
|
495
|
+
declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
|
|
496
|
+
|
|
497
|
+
type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
498
|
+
interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
|
|
499
|
+
/** Diameter preset controlling width/height. @default 'md' */
|
|
500
|
+
size?: SpinnerSize;
|
|
501
|
+
/** Accessible, visually-hidden status text announced to screen readers. @default 'Loading' */
|
|
502
|
+
label?: string;
|
|
503
|
+
/** Ring border width in pixels. Falls back to a size-derived default when omitted. */
|
|
504
|
+
thickness?: number;
|
|
505
|
+
}
|
|
506
|
+
/**
|
|
507
|
+
* Spinner — a compact loading indicator.
|
|
508
|
+
* Renders a frosted-friendly circular ring that rotates via the shared
|
|
509
|
+
* `gl-spin` keyframe. Color follows `currentColor`, so it inherits the
|
|
510
|
+
* surrounding text color. Exposes `role="status"` with a visually-hidden
|
|
511
|
+
* label so assistive tech announces the loading state.
|
|
512
|
+
*/
|
|
513
|
+
declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLSpanElement>>;
|
|
514
|
+
|
|
515
|
+
type SwitchSize = 'sm' | 'md' | 'lg';
|
|
516
|
+
interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'checked' | 'defaultChecked'> {
|
|
517
|
+
/** Controlled checked state. Provide together with `onChange`; omit for uncontrolled usage. */
|
|
518
|
+
checked?: boolean;
|
|
519
|
+
/** Initial checked state when the switch is uncontrolled. @default false */
|
|
520
|
+
defaultChecked?: boolean;
|
|
521
|
+
/** Called with the next checked value each time the switch toggles. */
|
|
522
|
+
onChange?: (checked: boolean) => void;
|
|
523
|
+
/** Visible text rendered beside the track and used as the accessible name. */
|
|
524
|
+
label?: ReactNode;
|
|
525
|
+
/** Control the track and thumb dimensions. @default 'md' */
|
|
526
|
+
switchSize?: SwitchSize;
|
|
527
|
+
/** Disable interaction and dim the control. @default false */
|
|
528
|
+
disabled?: boolean;
|
|
529
|
+
}
|
|
530
|
+
/**
|
|
531
|
+
* Switch — an accessible on/off toggle with a frosted-glass track and a
|
|
532
|
+
* spring-animated thumb. Renders a visually-hidden native checkbox (exposing
|
|
533
|
+
* `role="switch"`) so keyboard, form, and screen-reader behaviour come for
|
|
534
|
+
* free. Works in both controlled and uncontrolled modes.
|
|
535
|
+
*/
|
|
536
|
+
declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
|
|
537
|
+
|
|
538
|
+
interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
539
|
+
/** Controlled active tab value. Provide together with `onChange`. */
|
|
540
|
+
value?: string;
|
|
541
|
+
/** Initial active tab value when uncontrolled. */
|
|
542
|
+
defaultValue?: string;
|
|
543
|
+
/** Fired with the newly selected tab value whenever the selection changes. */
|
|
544
|
+
onChange?: (value: string) => void;
|
|
545
|
+
/** `TabList` and `TabPanel` descendants. */
|
|
546
|
+
children?: ReactNode;
|
|
547
|
+
}
|
|
548
|
+
/**
|
|
549
|
+
* Tabs — accessible, compound tab set built on React context.
|
|
550
|
+
* Wrap a `TabList` (with `Tab` children) and matching `TabPanel`s.
|
|
551
|
+
* Works controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).
|
|
552
|
+
*/
|
|
553
|
+
declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
|
|
554
|
+
interface TabListProps extends HTMLAttributes<HTMLDivElement> {
|
|
555
|
+
/** `Tab` children rendered inside the glass pill. */
|
|
556
|
+
children?: ReactNode;
|
|
557
|
+
}
|
|
558
|
+
/**
|
|
559
|
+
* TabList — the `role="tablist"` container.
|
|
560
|
+
* Renders a frosted glass pill and provides Arrow Left/Right (plus Home/End)
|
|
561
|
+
* roving focus between the enabled tabs, activating each as focus lands on it.
|
|
562
|
+
*/
|
|
563
|
+
declare const TabList: react.ForwardRefExoticComponent<TabListProps & react.RefAttributes<HTMLDivElement>>;
|
|
564
|
+
interface TabProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
|
|
565
|
+
/** Unique value that links this tab to its `TabPanel`. */
|
|
566
|
+
value: string;
|
|
567
|
+
/** Disable selection and remove the tab from keyboard navigation. */
|
|
568
|
+
disabled?: boolean;
|
|
569
|
+
/** Label content for the tab. */
|
|
570
|
+
children?: ReactNode;
|
|
571
|
+
}
|
|
572
|
+
/**
|
|
573
|
+
* Tab — a single selectable `role="tab"` control.
|
|
574
|
+
* Reflects selection via `aria-selected`, owns roving `tabIndex`, and points
|
|
575
|
+
* at its panel through `aria-controls`. Renders as a native button so
|
|
576
|
+
* Enter/Space activation and disabled handling come for free.
|
|
577
|
+
*/
|
|
578
|
+
declare const Tab: react.ForwardRefExoticComponent<TabProps & react.RefAttributes<HTMLButtonElement>>;
|
|
579
|
+
interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
|
|
580
|
+
/** Value that links this panel to its `Tab`. */
|
|
581
|
+
value: string;
|
|
582
|
+
/** Panel content, shown only while this tab is active. */
|
|
583
|
+
children?: ReactNode;
|
|
584
|
+
}
|
|
585
|
+
/**
|
|
586
|
+
* TabPanel — the `role="tabpanel"` region for a tab's content.
|
|
587
|
+
* Labelled by its tab, hidden unless active, and animated in on reveal.
|
|
588
|
+
*/
|
|
589
|
+
declare const TabPanel: react.ForwardRefExoticComponent<TabPanelProps & react.RefAttributes<HTMLDivElement>>;
|
|
590
|
+
|
|
591
|
+
type TextareaVariant = 'glass' | 'subtle';
|
|
592
|
+
interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
593
|
+
/** Visual surface style. @default 'subtle' */
|
|
594
|
+
variant?: TextareaVariant;
|
|
595
|
+
/** Render the invalid state (danger border + `aria-invalid`). */
|
|
596
|
+
error?: boolean;
|
|
597
|
+
/** Stretch the field to fill the container width. */
|
|
598
|
+
fullWidth?: boolean;
|
|
599
|
+
/** Grow the field height to fit its content as the value changes (SSR-safe). */
|
|
600
|
+
autoResize?: boolean;
|
|
601
|
+
}
|
|
602
|
+
/**
|
|
603
|
+
* Textarea — a multi-line text field on a frosted-glass surface.
|
|
604
|
+
* The focus ring follows `:focus-within` on the wrapper, an error state is
|
|
605
|
+
* supported, and the field can optionally auto-grow to fit its content. The
|
|
606
|
+
* forwarded ref is merged with an internal ref so auto-resize works even when
|
|
607
|
+
* the consumer also needs a handle on the underlying element.
|
|
608
|
+
*/
|
|
609
|
+
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
610
|
+
|
|
611
|
+
/** Accent style of a toast. */
|
|
612
|
+
type ToastVariant = 'glass' | 'success' | 'danger' | 'warning' | 'info';
|
|
613
|
+
/** Corner the toast stack anchors to. */
|
|
614
|
+
type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
|
615
|
+
/** Configuration passed to `toast(options)`. */
|
|
616
|
+
interface ToastOptions {
|
|
617
|
+
/** Bold headline line. */
|
|
618
|
+
title?: ReactNode;
|
|
619
|
+
/** Secondary muted line under the title. */
|
|
620
|
+
description?: ReactNode;
|
|
621
|
+
/** Accent color. @default 'glass' */
|
|
622
|
+
variant?: ToastVariant;
|
|
623
|
+
/** Auto-dismiss delay in ms; pass `0` (or `Infinity`) to keep it sticky. @default 4000 */
|
|
624
|
+
duration?: number;
|
|
625
|
+
}
|
|
626
|
+
/** Options accepted by the `success` / `error` / `info` / `warning` shortcuts (title + variant are fixed by the shortcut). */
|
|
627
|
+
type ToastShortcutOptions = Omit<ToastOptions, 'title' | 'variant'>;
|
|
628
|
+
/** Value returned by {@link useToast}. */
|
|
629
|
+
interface ToastContextValue {
|
|
630
|
+
/** Push a toast and get back its id for manual dismissal. */
|
|
631
|
+
toast: (options: ToastOptions) => string;
|
|
632
|
+
/** Remove a toast by id. */
|
|
633
|
+
dismiss: (id: string) => void;
|
|
634
|
+
/** Shortcut for a success (green) toast. */
|
|
635
|
+
success: (title: ReactNode, options?: ToastShortcutOptions) => string;
|
|
636
|
+
/** Shortcut for an error (danger/red) toast. */
|
|
637
|
+
error: (title: ReactNode, options?: ToastShortcutOptions) => string;
|
|
638
|
+
/** Shortcut for an info (blue) toast. */
|
|
639
|
+
info: (title: ReactNode, options?: ToastShortcutOptions) => string;
|
|
640
|
+
/** Shortcut for a warning (amber) toast. */
|
|
641
|
+
warning: (title: ReactNode, options?: ToastShortcutOptions) => string;
|
|
642
|
+
}
|
|
643
|
+
/** Props for {@link ToastProvider}. */
|
|
644
|
+
interface ToastProviderProps {
|
|
645
|
+
/** App subtree that can trigger toasts via {@link useToast}. */
|
|
646
|
+
children: ReactNode;
|
|
647
|
+
/** Corner the toast stack anchors to. @default 'bottom-right' */
|
|
648
|
+
position?: ToastPosition;
|
|
649
|
+
}
|
|
650
|
+
/**
|
|
651
|
+
* ToastProvider — holds the live toast queue and renders the fixed viewport.
|
|
652
|
+
* Wrap your app (or any subtree) in it, then call {@link useToast} to push
|
|
653
|
+
* notifications. The viewport is portalled to `document.body` so toasts float
|
|
654
|
+
* above every other layer regardless of where the trigger lives.
|
|
655
|
+
*/
|
|
656
|
+
declare function ToastProvider({ children, position, }: ToastProviderProps): react.JSX.Element;
|
|
657
|
+
/**
|
|
658
|
+
* useToast — access the toast API from anywhere inside a {@link ToastProvider}.
|
|
659
|
+
* Throws a descriptive error when called outside a provider.
|
|
660
|
+
*/
|
|
661
|
+
declare function useToast(): ToastContextValue;
|
|
662
|
+
|
|
663
|
+
type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
|
|
664
|
+
interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
|
|
665
|
+
/** Floating content shown when the trigger is hovered or focused. */
|
|
666
|
+
content: ReactNode;
|
|
667
|
+
/** The trigger element the tooltip describes. */
|
|
668
|
+
children: ReactNode;
|
|
669
|
+
/** Side of the trigger the tooltip is anchored to. @default 'top' */
|
|
670
|
+
placement?: TooltipPlacement;
|
|
671
|
+
/** Delay in milliseconds before the tooltip appears. @default 200 */
|
|
672
|
+
delay?: number;
|
|
673
|
+
/** When true the tooltip never opens. @default false */
|
|
674
|
+
disabled?: boolean;
|
|
675
|
+
}
|
|
676
|
+
/**
|
|
677
|
+
* Tooltip — a small frosted-glass label that reveals descriptive text when the
|
|
678
|
+
* trigger is hovered or keyboard-focused. It opens after a configurable delay,
|
|
679
|
+
* closes instantly on leave/blur, and is fully SSR-safe (timeouts run only in
|
|
680
|
+
* event handlers and effects).
|
|
681
|
+
*/
|
|
682
|
+
declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLSpanElement>>;
|
|
683
|
+
|
|
684
|
+
interface UseDisclosureReturn {
|
|
685
|
+
isOpen: boolean;
|
|
686
|
+
open: () => void;
|
|
687
|
+
close: () => void;
|
|
688
|
+
toggle: () => void;
|
|
689
|
+
setOpen: (value: boolean) => void;
|
|
690
|
+
}
|
|
691
|
+
/**
|
|
692
|
+
* Controlled/uncontrolled open state for overlays (Modal, Drawer, Dropdown…).
|
|
693
|
+
*/
|
|
694
|
+
declare function useDisclosure(defaultOpen?: boolean): UseDisclosureReturn;
|
|
695
|
+
|
|
696
|
+
/**
|
|
697
|
+
* Fires `handler` when a pointerdown/touch happens outside the referenced
|
|
698
|
+
* element. Used by Dropdown, Popover, Tooltip, etc.
|
|
699
|
+
*/
|
|
700
|
+
declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean): void;
|
|
701
|
+
|
|
702
|
+
/**
|
|
703
|
+
* Locks <body> scroll while an overlay is open (Modal, Drawer), preserving
|
|
704
|
+
* the scrollbar gutter so the page doesn't shift.
|
|
705
|
+
*/
|
|
706
|
+
declare function useScrollLock(locked: boolean): void;
|
|
707
|
+
|
|
708
|
+
/**
|
|
709
|
+
* Supports both controlled and uncontrolled usage of a value.
|
|
710
|
+
* If `value` is provided, the component is controlled; otherwise it manages
|
|
711
|
+
* its own state seeded by `defaultValue`. Used by Tabs, Accordion, Switch…
|
|
712
|
+
*/
|
|
713
|
+
declare function useControllableState<T>(params: {
|
|
714
|
+
value?: T;
|
|
715
|
+
defaultValue: T;
|
|
716
|
+
onChange?: (value: T) => void;
|
|
717
|
+
}): [T, (next: T) => void];
|
|
718
|
+
|
|
719
|
+
/**
|
|
720
|
+
* useLayoutEffect that silently degrades to useEffect on the server,
|
|
721
|
+
* avoiding React's "useLayoutEffect does nothing on the server" warning.
|
|
722
|
+
* Essential for SSR frameworks like Next.js.
|
|
723
|
+
*/
|
|
724
|
+
declare const useIsomorphicLayoutEffect: typeof useEffect;
|
|
725
|
+
|
|
726
|
+
/**
|
|
727
|
+
* cn — tiny classnames joiner.
|
|
728
|
+
* Filters out falsey values and flattens arrays so components can write:
|
|
729
|
+
* cn('gl-btn', `gl-btn--${variant}`, disabled && 'gl-btn--disabled', className)
|
|
730
|
+
* No external dependency (keeps the bundle small).
|
|
731
|
+
*/
|
|
732
|
+
type ClassValue = string | number | null | boolean | undefined | ClassValue[];
|
|
733
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
734
|
+
|
|
735
|
+
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, type AccordionType, type AccordionValue, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardFooter, CardHeader, type CardPadding, type CardProps, type CardSectionProps, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, type ClassValue, Drawer, DrawerBody, DrawerFooter, DrawerHeader, type DrawerProps, type DrawerSectionProps, type DrawerSide, Dropdown, DropdownItem, type DropdownItemProps, DropdownLabel, type DropdownLabelProps, DropdownMenu, type DropdownMenuProps, type DropdownPlacement, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, Input, type InputProps, type InputSize, type InputVariant, Modal, ModalBody, type ModalBodyProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, Portal, type PortalProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Radio, RadioGroup, RadioGroupContext, type RadioGroupContextValue, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, Select, type SelectOption, type SelectProps, type SelectSize, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type SwitchSize, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, Textarea, type TextareaProps, type TextareaVariant, type ToastContextValue, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastShortcutOptions, type ToastVariant, Tooltip, type TooltipPlacement, type TooltipProps, type UseDisclosureReturn, cn, useClickOutside, useControllableState, useDisclosure, useIsomorphicLayoutEffect, useScrollLock, useToast };
|