@salemcobalt/ui 0.2.0-rc.7 → 0.2.0-rc.9
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/README.md +27 -23
- package/dist/index.d.ts +196 -28
- package/dist/index.js +812 -9
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1925 -99
- package/package.json +6 -5
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @salemcobalt/ui
|
|
2
2
|
|
|
3
|
-
React 19 components for the Salem Cobalt design system: `Button`, `IconButton`, `Icon` and a shipped icon set, `Badge`, `Card`, `Stack`, `Inline`, `Heading`, `Text`, `Kbd`, `Dialog`, `Tooltip`, `Menu`, `Toolbar`, `Banner`, `Spinner`, `Progress`, `Tabs`, `Input`, `Textarea`, `Select`, `Checkbox`, `Switch`, `Table`, `Stat`, `Chip`, `Disclosure`, `EmptyState`, `Skeleton`. Requires `@salemcobalt/tokens`.
|
|
3
|
+
React 19 components for the Salem Cobalt design system: `Button`, `IconButton`, `Icon` and a shipped icon set, `BroomIcon`, `Badge`, `Card`, `Stack`, `Inline`, `Heading`, `Text`, `Kbd`, `Dialog`, `Tooltip`, `Menu`, `Popover`, `PriorityNav`, `Toolbar`, `Banner`, `Spinner`, `Progress`, `Tabs`, `Input`, `Textarea`, `Select`, `FileInput`, `Checkbox`, `Switch`, `Table`, `Stat`, `Chip`, `Disclosure`, `EmptyState`, `Skeleton`. Requires `@salemcobalt/tokens`.
|
|
4
4
|
|
|
5
5
|
```ts
|
|
6
6
|
import '@salemcobalt/tokens/css'; // custom properties, light + dark
|
|
@@ -23,28 +23,32 @@ import {
|
|
|
23
23
|
|
|
24
24
|
Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS always wins. Every value in it is a token custom property; theme with `data-theme="light|dark"` on `<html>` and density with `data-density="compact"` on any ancestor. Interactive behaviour (Dialog, Tooltip and Menu focus and keyboard handling, `render` composition) comes from Base UI; see `docs/adr/0001-headless-primitives.md`.
|
|
25
25
|
|
|
26
|
-
| Component | Notes
|
|
27
|
-
| -------------------- |
|
|
28
|
-
| `Button` | `variant` primary · secondary · ghost · danger; `size` sm · md · lg; `iconStart`/`iconEnd`; `loading` (keeps width, `aria-busy`); `fullWidth`.
|
|
29
|
-
| `IconButton` | Square Button for one icon. Required `label` (the accessible name); `variant` ghost (default) · secondary · primary · danger; `size`; `tooltip` (`true` shows `label`, or a string); `tooltipSide`; `round`; `loading`; `render={<a href />}` or a Next.js `Link` makes it a link.
|
|
30
|
-
| `Icon`, `*Icon` | 49 outline icons on a 16px grid in `currentColor`, one component each (`PlayIcon`, `ChevronDownIcon` …, listed in `iconNames`); `size` xs 12 · sm 14 · md 16 · lg 20 · xl 24 · em; decorative unless `title` is given. `Icon` wraps your own paths.
|
|
31
|
-
| `Badge` | `tone` neutral · accent · success · warning · danger · info; `variant` soft · solid · outline; `size` sm · md; `dot`. Text only.
|
|
32
|
-
| `Card` | `variant` outlined · elevated · filled; `padding` none · sm · md · lg; `interactive`; `selected`; `as` or `render` to make it an `a`/`button`/`li`.
|
|
33
|
-
| `Stack`, `Inline` | `gap` from the spacing scale (`none` … `4xl`); `align`; `justify`; `as`. `Inline` wraps unless `wrap={false}`.
|
|
34
|
-
| `Kbd` | One key per `Kbd`; `Kbd.Group label="Command K"` groups a shortcut with a `+` (or `separator="space"`).
|
|
35
|
-
| `Dialog` | `Root` (`open`, `defaultOpen`, `onOpenChange`, `dismissible`), `Trigger`, `Content` (`size` sm · md · lg, every size clamps to the viewport minus a 16px gutter; `variant="sheet"` becomes a bottom sheet below 640px with a scrolling `Body`), `Title`, `Description`, `Body`, `Actions`, `Close`. Menus, selects and tooltips opened inside render above it.
|
|
36
|
-
| `Toolbar` | `Root` (required `aria-label`, `wrap`, `gap`), `Group` (`aria-label`, `gap`), `Separator`, `Spacer`, `Button` (`render={<IconButton … />}` or `render={<Menu.Trigger render={…} />}` so the control joins the roving focus: Tab enters, arrows move, Tab leaves), `Link` (an anchor in the same navigation; `render={<IconButton label render={<a href />} />}` for an icon link).
|
|
37
|
-
| `Banner` | `tone` info (default) · success · warning · danger · neutral; `icon` (or `false`); `action` slot; `dismissible` + `onDismiss` (`open` to control); warning and danger are `role="alert"`, the rest `role="status"`.
|
|
38
|
-
| `Tabs` | `Root` (`value`, `defaultValue`, `onValueChange`), `List` (required `aria-label`, `fill`), `Tab` (`value`, `icon`, `count`, `disabled`), `Panel` (`value`, `keepMounted`). Arrow keys move, Enter/Space activates.
|
|
39
|
-
| `Input`, `Textarea` | Labelled native controls on Base UI's Field: required `label` (`hideLabel` keeps it for assistive tech), `description`, `error` (sets invalid and announces), `invalid`, `required`, `disabled`, `name`, `size` sm · md · lg (Input), `iconStart`/`iconEnd` (Input), `rows`/`resize`/`variant="code"` (Textarea; monospace, tab-size 2, no spellcheck, add native `wrap="off"` for sideways scroll), `onValueChange(string)` beside native `onChange`. Every native attribute passes through: `type="date" \| "time" \| "number"` keep the same height, `list` + a `<datalist>` gives suggestions.
|
|
40
|
-
| `Select` | Same field props; `options` as `{ value, label, disabled? }` or `{ label, options }` groups; `value`/`defaultValue`/`onValueChange` (`null` for none, shows `placeholder`; no sentinel option needed); `clearable` adds an × and Backspace/Delete on the trigger that call `onValueChange(null)`; `clearLabel`; `fullWidth`. Submits through `name` like a native select.
|
|
41
|
-
| `
|
|
42
|
-
| `
|
|
43
|
-
| `
|
|
44
|
-
| `
|
|
45
|
-
| `
|
|
46
|
-
| `
|
|
47
|
-
| `
|
|
26
|
+
| Component | Notes |
|
|
27
|
+
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
28
|
+
| `Button` | `variant` primary · secondary · ghost · danger; `size` sm · md · lg; `iconStart`/`iconEnd`; `loading` (keeps width, `aria-busy`); `fullWidth`. `shortcut={<Kbd>N</Kbd>}` shows a key hint after the label, tinted to the variant and hidden from the name (add `aria-keyshortcuts="n"`); `iconOnly` collapses to the icon in a square button without remounting (label kept as the name, shortcut hidden). |
|
|
29
|
+
| `IconButton` | Square Button for one icon. Required `label` (the accessible name); `variant` ghost (default) · secondary · primary · danger; `size`; `tooltip` (`true` shows `label`, or a string); `tooltipSide`; `round`; `loading`; `render={<a href />}` or a Next.js `Link` makes it a link. `dot` neutral · accent · success · warning · danger · info puts a status dot top-left with a ring in `--sc-icon-button-dot-ring` (default `surface-default`; set it to the header background); decorative, so say the status in `label`. |
|
|
30
|
+
| `Icon`, `*Icon` | 49 outline icons on a 16px grid in `currentColor`, one component each (`PlayIcon`, `ChevronDownIcon` …, listed in `iconNames`); `size` xs 12 · sm 14 · md 16 · lg 20 · xl 24 · em; decorative unless `title` is given. `Icon` wraps your own paths. |
|
|
31
|
+
| `Badge` | `tone` neutral · accent · success · warning · danger · info; `variant` soft · solid · outline; `size` sm · md; `dot`. Text only. |
|
|
32
|
+
| `Card` | `variant` outlined · elevated · filled; `padding` none · sm · md · lg; `interactive`; `selected`; `as` or `render` to make it an `a`/`button`/`li`. |
|
|
33
|
+
| `Stack`, `Inline` | `gap` from the spacing scale (`none` … `4xl`); `align`; `justify`; `as`. `Inline` wraps unless `wrap={false}`. |
|
|
34
|
+
| `Kbd` | One key per `Kbd`; `Kbd.Group label="Command K"` groups a shortcut with a `+` (or `separator="space"`). |
|
|
35
|
+
| `Dialog` | `Root` (`open`, `defaultOpen`, `onOpenChange`, `dismissible`), `Trigger`, `Content` (`size` sm · md · lg, every size clamps to the viewport minus a 16px gutter; `variant="sheet"` becomes a bottom sheet below 640px with a scrolling `Body`), `Title`, `Description`, `Body`, `Actions`, `Close`. Menus, selects and tooltips opened inside render above it. |
|
|
36
|
+
| `Toolbar` | `Root` (required `aria-label`, `wrap`, `gap`), `Group` (`aria-label`, `gap`), `Separator`, `Spacer`, `Button` (`render={<IconButton … />}` or `render={<Menu.Trigger render={…} />}` so the control joins the roving focus: Tab enters, arrows move, Tab leaves), `Link` (an anchor in the same navigation; `render={<IconButton label render={<a href />} />}` for an icon link). |
|
|
37
|
+
| `Banner` | `tone` info (default) · success · warning · danger · neutral; `icon` (or `false`); `action` slot; `dismissible` + `onDismiss` (`open` to control); warning and danger are `role="alert"`, the rest `role="status"`. |
|
|
38
|
+
| `Tabs` | `Root` (`value`, `defaultValue`, `onValueChange`), `List` (required `aria-label`, `fill`), `Tab` (`value`, `icon`, `count`, `disabled`), `Panel` (`value`, `keepMounted`). Arrow keys move, Enter/Space activates. `List variant="segmented"`: a quiet segmented control (sunken track, the active tab raised on `surface-default`, no accent, plain muted counts); `line` stays the default. |
|
|
39
|
+
| `Input`, `Textarea` | Labelled native controls on Base UI's Field: required `label` (`hideLabel` keeps it for assistive tech), `description`, `error` (sets invalid and announces), `invalid`, `required`, `disabled`, `name`, `size` sm · md · lg (Input), `iconStart`/`iconEnd` (Input), `rows`/`resize`/`variant="code"` (Textarea; monospace, tab-size 2, no spellcheck, add native `wrap="off"` for sideways scroll), `onValueChange(string)` beside native `onChange`. Every native attribute passes through: `type="date" \| "time" \| "number"` keep the same height, `list` + a `<datalist>` gives suggestions. |
|
|
40
|
+
| `Select` | Same field props; `options` as `{ value, label, disabled? }` or `{ label, options }` groups; `value`/`defaultValue`/`onValueChange` (`null` for none, shows `placeholder`; no sentinel option needed); `clearable` adds an × and Backspace/Delete on the trigger that call `onValueChange(null)`; `clearLabel`; `fullWidth`. Submits through `name` like a native select. |
|
|
41
|
+
| `FileInput` | Same field props (`label`, `hideLabel`, `description`, `error`, `invalid`, `required`, `disabled`, `name`, `size`) on a drop zone built on FilePond (docs/adr/0004): `accept` (`".pdf,.docx"`, MIME types, `image/*`, as the native attribute), `acceptLabel`, `maxFileSize` (bytes or `"10MB"`), `multiple` + `maxFiles`, `files`/`defaultFiles`/`onFilesChange(File[])`, `idleLabel`, `browseLabel`. No upload server: plain `File`s go to the callback, and with `name` to the form's `FormData` (Server Actions included). Rejected files never join the list; the reason shows in the error slot and is announced. Without `multiple`, a new file replaces the current one only once it passes. FilePond loads on mount, in its own chunk. |
|
|
42
|
+
| `Checkbox`, `Switch` | Required `label`, `description`, `checked`/`defaultChecked`/`onCheckedChange(boolean)`, `name`/`value`, `disabled`, `required`; Checkbox adds `indeterminate`; Switch adds `labelPosition` start · end. |
|
|
43
|
+
| `Tooltip` | `content`; `children` is the trigger (an `IconButton`, `Button` or focusable `Badge`); `side` top · bottom · left · right; `align`; `delay` (300ms); `open`/`onOpenChange`; `disabled`. `Tooltip.Provider` around a row skips the delay between siblings. |
|
|
44
|
+
| `Chip` | A pill: `tone` neutral · accent · success · warning · danger · info; `size` sm · md; `icon`; `onClick` + `selected` make it a toggle button (`aria-pressed`); `onRemove` adds a labelled × (Backspace/Delete on the chip removes too); `removeLabel`; `disabled`. |
|
|
45
|
+
| `Disclosure` | A native `<details>` collapse: required `summary`, `summaryOpen`, `open`/`defaultOpen`/`onOpenChange`, `previewLines` (fades the first N lines while closed, summary moves below), `summaryPosition`; share `name` for an exclusive group. |
|
|
46
|
+
| `EmptyState` | Centred placeholder: required `title`, `description`, `icon` (24px in a muted circle), children are the actions, `size` sm · md, `as` div · section · li. |
|
|
47
|
+
| `Skeleton` | Loading placeholder, `aria-hidden`: `variant` text (default, one line) · rect · circle, `width`, `height`, `lines` (text, last line shorter), `still`. Put `aria-busy` on the region or a labelled `Spinner` beside it. |
|
|
48
|
+
| `Menu` | `Root` (`open`, `onOpenChange`, `modal`), `Trigger` (secondary Button with a chevron, or `render={<IconButton label="More" />}`), `Content` (`side`, `align`), `Item` (`icon`, `trailing`, `tone="danger"`, `disabled`), `LinkItem` (`href`), `CheckboxItem` (`checked`, `onCheckedChange`), `RadioGroup` (`value`, `onValueChange`, `label`) + `RadioItem`, `Group` (`label`), `Separator`. Arrow keys, Home/End, type-ahead, Esc and focus return come from Base UI. |
|
|
49
|
+
| `PriorityNav` | Priority+ primary navigation (docs/adr/0005): required `aria-label`; `items` as `{ href, label, id?, current? }` in priority order; links that fit stay inline and the rest go into a "More" disclosure (APG disclosure navigation: a `button` with `aria-expanded`, not a menu; Esc, click outside and focus leaving close it). The `current` link is never collapsed. `moreLabel`, `moreCountLabel(n)` (announced only: "More, 3 links"), `renderLink={(props) => <Link {...props} />}` for a router. Server-renders every link on one clipped line (scrolls sideways without JS), measures widths once (again after web fonts load or when keys/string labels change) and re-renders only when the inline count changes. Takes the free space in a flex row (`flex: 1 1 0%`); in a grid use a `minmax(0, 1fr)` track. The open panel sits in the top layer (Popover API), anchored to the toggle with CSS anchor positioning (a JS fallback elsewhere) and capped to the viewport. `data-overflowing` + `onOverflowChange(boolean)` let a header make room, with `overflowHysteresis` (px) so it cannot oscillate. Under 400px wide (container query) More shows only an ellipsis. |
|
|
50
|
+
| `Popover` | Non-modal panel on Base UI Popover: `Root` (`open`, `defaultOpen`, `onOpenChange`, `modal` default false), `Trigger` (secondary Button, or `render={<IconButton label dot />}`), `Content` (`side`, `align`, `sideOffset`, `arrow`; Menu's surface, `--sc-z-dropdown`), `Title` (names the dialog), `Description`, `Close` (the × with no children, or wraps a Button). Esc and focus return come from Base UI. |
|
|
51
|
+
| `BroomIcon` | Animated 24px-grid icon for "a sweep is running": `sweeping`, `size` (Icon sizes, default `lg`, or `display` 72px with a 1.75px stroke), `title`. Inline SVG; strokes stay 1.25px at any size; holds still with the dust shown under `prefers-reduced-motion`. Inside an IconButton it takes the next icon size up. |
|
|
48
52
|
|
|
49
53
|
```tsx
|
|
50
54
|
<Dialog.Root>
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ComponentPropsWithRef, ReactNode, ReactElement, CSSProperties, MouseEvent } from 'react';
|
|
2
|
+
import { ComponentPropsWithRef, ReactNode, ReactElement, CSSProperties, MouseEvent, MouseEventHandler } from 'react';
|
|
3
3
|
import { useRender } from '@base-ui/react/use-render';
|
|
4
4
|
import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
|
|
5
5
|
import * as _base_ui_react from '@base-ui/react';
|
|
@@ -8,6 +8,7 @@ import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
|
|
|
8
8
|
import { Switch as Switch$1 } from '@base-ui/react/switch';
|
|
9
9
|
import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
|
|
10
10
|
import { Toolbar as Toolbar$1 } from '@base-ui/react/toolbar';
|
|
11
|
+
import { Popover as Popover$1 } from '@base-ui/react/popover';
|
|
11
12
|
|
|
12
13
|
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
13
14
|
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
@@ -24,9 +25,13 @@ interface ButtonProps extends ComponentPropsWithRef<'button'> {
|
|
|
24
25
|
loading?: boolean | undefined;
|
|
25
26
|
/** Stretches to the container. */
|
|
26
27
|
fullWidth?: boolean | undefined;
|
|
28
|
+
/** A keyboard hint after the label: `shortcut={<Kbd>N</Kbd>}`. Hidden from assistive tech; announce the key with `aria-keyshortcuts="n"`. */
|
|
29
|
+
shortcut?: ReactNode | undefined;
|
|
30
|
+
/** Shows only `iconStart` (or `iconEnd`) in a square button; the label stays the accessible name and the shortcut hides. Toggles without remounting, e.g. when a header runs out of room. Pair with a Tooltip carrying the label. */
|
|
31
|
+
iconOnly?: boolean | undefined;
|
|
27
32
|
}
|
|
28
33
|
/** The one way to trigger an action. Renders a native `<button>`; `type` defaults to `button`. */
|
|
29
|
-
declare function Button({ variant, size, iconStart, iconEnd, loading, fullWidth, type, className, children, onClick, ...rest }: ButtonProps): react.JSX.Element;
|
|
34
|
+
declare function Button({ variant, size, iconStart, iconEnd, loading, fullWidth, shortcut, iconOnly, type, className, children, onClick, ...rest }: ButtonProps): react.JSX.Element;
|
|
30
35
|
|
|
31
36
|
type BadgeTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
|
|
32
37
|
type BadgeVariant = 'soft' | 'solid' | 'outline';
|
|
@@ -707,7 +712,7 @@ interface DialogRootProps {
|
|
|
707
712
|
children?: ReactNode | undefined;
|
|
708
713
|
}
|
|
709
714
|
/** Owns the open state. Wrap a `Dialog.Trigger` and a `Dialog.Content`. */
|
|
710
|
-
declare function Root$
|
|
715
|
+
declare function Root$5({ dismissible, onOpenChange, open, defaultOpen, children }: DialogRootProps): react.JSX.Element;
|
|
711
716
|
interface DialogContentProps extends Omit<Dialog$1.Popup.Props, 'className'> {
|
|
712
717
|
/**
|
|
713
718
|
* Maximum width: `sm` 400px for yes/no, `md` 560px (default) for a short form, `lg` 720px rarely.
|
|
@@ -726,17 +731,17 @@ interface DialogContentProps extends Omit<Dialog$1.Popup.Props, 'className'> {
|
|
|
726
731
|
* Portal, backdrop and the popup. Focus moves inside on open and returns to the trigger on close.
|
|
727
732
|
* Menus, selects and tooltips opened from inside render above it (`--sc-z-dropdown` > `--sc-z-dialog`).
|
|
728
733
|
*/
|
|
729
|
-
declare function Content$
|
|
734
|
+
declare function Content$2({ size, variant, className, children, ...rest }: DialogContentProps): react.JSX.Element;
|
|
730
735
|
interface DialogTitleProps extends Omit<Dialog$1.Title.Props, 'className'> {
|
|
731
736
|
className?: string | undefined;
|
|
732
737
|
}
|
|
733
738
|
/** Required. Labels the dialog; a question or a statement. Renders an `<h2>`. */
|
|
734
|
-
declare function Title({ className, ...rest }: DialogTitleProps): react.JSX.Element;
|
|
739
|
+
declare function Title$1({ className, ...rest }: DialogTitleProps): react.JSX.Element;
|
|
735
740
|
interface DialogDescriptionProps extends Omit<Dialog$1.Description.Props, 'className'> {
|
|
736
741
|
className?: string | undefined;
|
|
737
742
|
}
|
|
738
743
|
/** Optional, muted. Says what will happen. */
|
|
739
|
-
declare function Description({ className, ...rest }: DialogDescriptionProps): react.JSX.Element;
|
|
744
|
+
declare function Description$1({ className, ...rest }: DialogDescriptionProps): react.JSX.Element;
|
|
740
745
|
type DialogBodyProps = ComponentPropsWithRef<'div'>;
|
|
741
746
|
/** Free content between the description and the actions. In a `sheet` it is the part that scrolls. */
|
|
742
747
|
declare function Body$1({ className, ...rest }: DialogBodyProps): react.JSX.Element;
|
|
@@ -747,17 +752,17 @@ interface DialogCloseProps extends Omit<Dialog$1.Close.Props, 'className'> {
|
|
|
747
752
|
className?: string | undefined;
|
|
748
753
|
}
|
|
749
754
|
/** With no children or `render`, the × in the corner. Otherwise wraps any Button: `<Dialog.Close render={<Button variant="secondary" />}>Cancel</Dialog.Close>`. */
|
|
750
|
-
declare function Close({ className, children, render, ...rest }: DialogCloseProps): react.JSX.Element;
|
|
755
|
+
declare function Close$1({ className, children, render, ...rest }: DialogCloseProps): react.JSX.Element;
|
|
751
756
|
/** A modal that interrupts for a decision or a short form. Built on Base UI's Dialog. */
|
|
752
757
|
declare const Dialog: {
|
|
753
|
-
Root: typeof Root$
|
|
758
|
+
Root: typeof Root$5;
|
|
754
759
|
Trigger: Dialog$1.Trigger;
|
|
755
|
-
Content: typeof Content$
|
|
756
|
-
Title: typeof Title;
|
|
757
|
-
Description: typeof Description;
|
|
760
|
+
Content: typeof Content$2;
|
|
761
|
+
Title: typeof Title$1;
|
|
762
|
+
Description: typeof Description$1;
|
|
758
763
|
Body: typeof Body$1;
|
|
759
764
|
Actions: typeof Actions;
|
|
760
|
-
Close: typeof Close;
|
|
765
|
+
Close: typeof Close$1;
|
|
761
766
|
};
|
|
762
767
|
|
|
763
768
|
type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'em';
|
|
@@ -914,6 +919,7 @@ declare const Tooltip: typeof TooltipBase & {
|
|
|
914
919
|
Provider: react.FC<_base_ui_react.TooltipProviderProps>;
|
|
915
920
|
};
|
|
916
921
|
|
|
922
|
+
type IconButtonDotTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
|
|
917
923
|
interface IconButtonProps extends Omit<useRender.ComponentProps<'button'>, 'children' | 'aria-label'> {
|
|
918
924
|
/** Required. The accessible name, and the tooltip text when `tooltip` is `true`. */
|
|
919
925
|
label: string;
|
|
@@ -931,13 +937,15 @@ interface IconButtonProps extends Omit<useRender.ComponentProps<'button'>, 'chil
|
|
|
931
937
|
round?: boolean | undefined;
|
|
932
938
|
/** Shows a spinner, sets `aria-busy` and ignores clicks. */
|
|
933
939
|
loading?: boolean | undefined;
|
|
940
|
+
/** A status dot in the top-left corner, ringed in `--sc-icon-button-dot-ring` (default `surface-default`). Decorative: put the status in `label` too ("Sweeps: paused"). */
|
|
941
|
+
dot?: IconButtonDotTone | undefined;
|
|
934
942
|
}
|
|
935
943
|
/**
|
|
936
944
|
* A square Button for one icon. Always named by `label`; use `tooltip` to show that name on hover.
|
|
937
945
|
* Renders a `<button>` unless `render` gives another element: `render={<a href="/settings" />}` or a
|
|
938
946
|
* Next.js `<Link href="/settings" />` makes it a link with the same look and name.
|
|
939
947
|
*/
|
|
940
|
-
declare function IconButton({ label, children, variant, size, tooltip, tooltipSide, round, loading, type, className, onClick, render, ref, ...rest }: IconButtonProps): react.JSX.Element;
|
|
948
|
+
declare function IconButton({ label, children, variant, size, tooltip, tooltipSide, round, loading, dot, type, className, onClick, render, ref, ...rest }: IconButtonProps): react.JSX.Element;
|
|
941
949
|
|
|
942
950
|
type MenuSide = 'top' | 'bottom' | 'left' | 'right';
|
|
943
951
|
type MenuAlign = 'start' | 'center' | 'end';
|
|
@@ -956,7 +964,7 @@ interface MenuRootProps {
|
|
|
956
964
|
children?: ReactNode | undefined;
|
|
957
965
|
}
|
|
958
966
|
/** Owns the open state. Wrap a `Menu.Trigger` and a `Menu.Content`. */
|
|
959
|
-
declare function Root$
|
|
967
|
+
declare function Root$4({ open, defaultOpen, onOpenChange, disabled, modal, children }: MenuRootProps): react.JSX.Element;
|
|
960
968
|
interface MenuTriggerProps extends Omit<Menu$1.Trigger.Props, 'className'> {
|
|
961
969
|
className?: string | undefined;
|
|
962
970
|
}
|
|
@@ -964,7 +972,7 @@ interface MenuTriggerProps extends Omit<Menu$1.Trigger.Props, 'className'> {
|
|
|
964
972
|
* Opens the menu. With no `render` it is a secondary Button with a chevron; pass any Button or
|
|
965
973
|
* IconButton through `render`: `<Menu.Trigger render={<IconButton label="More" />}><MoreHorizontalIcon /></Menu.Trigger>`.
|
|
966
974
|
*/
|
|
967
|
-
declare function Trigger({ render, className, children, ...rest }: MenuTriggerProps): react.JSX.Element;
|
|
975
|
+
declare function Trigger$1({ render, className, children, ...rest }: MenuTriggerProps): react.JSX.Element;
|
|
968
976
|
interface MenuContentProps extends Omit<Menu$1.Popup.Props, 'className'> {
|
|
969
977
|
/** Side of the trigger the menu opens on; flips when there is no room. Default `bottom`. */
|
|
970
978
|
side?: MenuSide | undefined;
|
|
@@ -975,7 +983,7 @@ interface MenuContentProps extends Omit<Menu$1.Popup.Props, 'className'> {
|
|
|
975
983
|
className?: string | undefined;
|
|
976
984
|
}
|
|
977
985
|
/** Portal, positioner and the popup. Items go inside. */
|
|
978
|
-
declare function Content({ side, align, sideOffset, className, children, ...rest }: MenuContentProps): react.JSX.Element;
|
|
986
|
+
declare function Content$1({ side, align, sideOffset, className, children, ...rest }: MenuContentProps): react.JSX.Element;
|
|
979
987
|
interface ItemSlots {
|
|
980
988
|
/** A 16px icon before the label. */
|
|
981
989
|
icon?: ReactNode | undefined;
|
|
@@ -1038,9 +1046,9 @@ interface MenuSeparatorProps extends Omit<Menu$1.Separator.Props, 'className'> {
|
|
|
1038
1046
|
declare function Separator$1({ className, ...rest }: MenuSeparatorProps): react.JSX.Element;
|
|
1039
1047
|
/** A dropdown of actions on a trigger, with full keyboard support. Built on Base UI's Menu. */
|
|
1040
1048
|
declare const Menu: {
|
|
1041
|
-
Root: typeof Root$
|
|
1042
|
-
Trigger: typeof Trigger;
|
|
1043
|
-
Content: typeof Content;
|
|
1049
|
+
Root: typeof Root$4;
|
|
1050
|
+
Trigger: typeof Trigger$1;
|
|
1051
|
+
Content: typeof Content$1;
|
|
1044
1052
|
Item: typeof Item;
|
|
1045
1053
|
LinkItem: typeof LinkItem;
|
|
1046
1054
|
CheckboxItem: typeof CheckboxItem;
|
|
@@ -1183,16 +1191,19 @@ interface TabsRootProps extends Omit<Tabs$1.Root.Props, 'className' | 'value' |
|
|
|
1183
1191
|
className?: string | undefined;
|
|
1184
1192
|
}
|
|
1185
1193
|
/** Owns the active tab. Wrap a `Tabs.List` and one `Tabs.Panel` per tab. */
|
|
1186
|
-
declare function Root$
|
|
1194
|
+
declare function Root$3({ className, onValueChange, ...rest }: TabsRootProps): react.JSX.Element;
|
|
1195
|
+
type TabsListVariant = 'line' | 'segmented';
|
|
1187
1196
|
interface TabsListProps extends Omit<Tabs$1.List.Props, 'className'> {
|
|
1188
1197
|
/** Names the set of tabs for assistive tech: "Inbox sections". */
|
|
1189
1198
|
'aria-label': string;
|
|
1190
1199
|
/** Tabs share the width equally instead of sizing to their labels. */
|
|
1191
1200
|
fill?: boolean | undefined;
|
|
1201
|
+
/** `line` (default): an accent underline on the active tab. `segmented`: a quiet segmented control, a sunken track with the active tab raised and no accent colour. */
|
|
1202
|
+
variant?: TabsListVariant | undefined;
|
|
1192
1203
|
className?: string | undefined;
|
|
1193
1204
|
}
|
|
1194
1205
|
/** The row of tabs with the sliding indicator. Arrow keys move between tabs; Enter or Space activates. */
|
|
1195
|
-
declare function List({ fill, className, children, ...rest }: TabsListProps): react.JSX.Element;
|
|
1206
|
+
declare function List({ fill, variant, className, children, ...rest }: TabsListProps): react.JSX.Element;
|
|
1196
1207
|
interface TabsTabProps extends Omit<Tabs$1.Tab.Props, 'className' | 'value'> {
|
|
1197
1208
|
value: string;
|
|
1198
1209
|
/** A 16px icon before the label. */
|
|
@@ -1211,7 +1222,7 @@ interface TabsPanelProps extends Omit<Tabs$1.Panel.Props, 'className' | 'value'>
|
|
|
1211
1222
|
declare function Panel({ className, ...rest }: TabsPanelProps): react.JSX.Element;
|
|
1212
1223
|
/** Switches between sections of one view. Built on Base UI's Tabs. */
|
|
1213
1224
|
declare const Tabs: {
|
|
1214
|
-
Root: typeof Root$
|
|
1225
|
+
Root: typeof Root$3;
|
|
1215
1226
|
List: typeof List;
|
|
1216
1227
|
Tab: typeof Tab;
|
|
1217
1228
|
Panel: typeof Panel;
|
|
@@ -1230,7 +1241,7 @@ interface ToolbarRootProps extends Omit<Toolbar$1.Root.Props, 'className'> {
|
|
|
1230
1241
|
* A row of controls with one tab stop: Tab enters, arrow keys move between items, Tab leaves. Put every
|
|
1231
1242
|
* control through `Toolbar.Button` (`render={<IconButton … />}`) so it joins the roving focus.
|
|
1232
1243
|
*/
|
|
1233
|
-
declare function Root$
|
|
1244
|
+
declare function Root$2({ wrap, gap, className, ...rest }: ToolbarRootProps): react.JSX.Element;
|
|
1234
1245
|
interface ToolbarGroupProps extends Omit<Toolbar$1.Group.Props, 'className'> {
|
|
1235
1246
|
/** Names the group: "Playback". */
|
|
1236
1247
|
'aria-label'?: string | undefined;
|
|
@@ -1258,7 +1269,7 @@ interface ToolbarSpacerProps {
|
|
|
1258
1269
|
declare function Spacer({ className }: ToolbarSpacerProps): react.JSX.Element;
|
|
1259
1270
|
/** A horizontal container of controls. Built on Base UI's Toolbar. */
|
|
1260
1271
|
declare const Toolbar: {
|
|
1261
|
-
Root: typeof Root$
|
|
1272
|
+
Root: typeof Root$2;
|
|
1262
1273
|
Group: typeof Group;
|
|
1263
1274
|
Separator: typeof Separator;
|
|
1264
1275
|
Button: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1675,7 +1686,7 @@ interface TableRootProps extends Omit<ComponentPropsWithRef<'table'>, 'style'> {
|
|
|
1675
1686
|
children?: ReactNode | undefined;
|
|
1676
1687
|
}
|
|
1677
1688
|
/** A semantic `<table>` in a horizontally scrolling wrapper. Compose `Table.Head`, `Table.Body`, `Table.Row`, `Table.Header`, `Table.Cell`. */
|
|
1678
|
-
declare function Root({ stickyHeader, maxHeight, density, divided, layout, wrapperClassName, wrapperStyle, className, style, children, ...rest }: TableRootProps): react.JSX.Element;
|
|
1689
|
+
declare function Root$1({ stickyHeader, maxHeight, density, divided, layout, wrapperClassName, wrapperStyle, className, style, children, ...rest }: TableRootProps): react.JSX.Element;
|
|
1679
1690
|
type TableCaptionProps = ComponentPropsWithRef<'caption'>;
|
|
1680
1691
|
/** Names the table for assistive tech; visually a muted line above it. */
|
|
1681
1692
|
declare function Caption({ className, ...rest }: TableCaptionProps): react.JSX.Element;
|
|
@@ -1719,7 +1730,7 @@ interface TableCellProps extends Omit<ComponentPropsWithRef<'td'>, 'align' | 'wi
|
|
|
1719
1730
|
declare function Cell({ align, numeric, nowrap, truncate, width, className, style, ...rest }: TableCellProps): react.JSX.Element;
|
|
1720
1731
|
/** Rows of records with column headers. Native table elements, so screen readers get rows and columns. */
|
|
1721
1732
|
declare const Table: {
|
|
1722
|
-
Root: typeof Root;
|
|
1733
|
+
Root: typeof Root$1;
|
|
1723
1734
|
Caption: typeof Caption;
|
|
1724
1735
|
Head: typeof Head;
|
|
1725
1736
|
Body: typeof Body;
|
|
@@ -2424,7 +2435,164 @@ interface SkeletonProps extends ComponentPropsWithRef<'span'> {
|
|
|
2424
2435
|
*/
|
|
2425
2436
|
declare function Skeleton({ variant, width, height, lines, still, className, style, ...rest }: SkeletonProps): react.JSX.Element;
|
|
2426
2437
|
|
|
2438
|
+
interface FileInputProps extends FieldProps {
|
|
2439
|
+
/** Accepted types, as for the native attribute: `".pdf,.docx,text/plain"` or a list. Extensions, exact MIME types and `image/*` wildcards. */
|
|
2440
|
+
accept?: string | readonly string[] | undefined;
|
|
2441
|
+
/** How the accepted types read in the error message. Default derived from `accept` ("PDF, DOCX or plain text"). */
|
|
2442
|
+
acceptLabel?: string | undefined;
|
|
2443
|
+
/** Largest file accepted, in bytes or as `"10MB"` (base 1000, like the size shown in the list). */
|
|
2444
|
+
maxFileSize?: number | string | undefined;
|
|
2445
|
+
/** Allows several files. Without it a new file replaces the current one. */
|
|
2446
|
+
multiple?: boolean | undefined;
|
|
2447
|
+
/** With `multiple`, the most files the list holds. */
|
|
2448
|
+
maxFiles?: number | undefined;
|
|
2449
|
+
/** Controlled list of accepted files. Pass `[]` to clear. */
|
|
2450
|
+
files?: readonly File[] | undefined;
|
|
2451
|
+
/** Initial files when uncontrolled. */
|
|
2452
|
+
defaultFiles?: readonly File[] | undefined;
|
|
2453
|
+
/** Called with the accepted files (plain `File` objects) after every add or remove. Rejected files never appear here. */
|
|
2454
|
+
onFilesChange?: ((files: File[]) => void) | undefined;
|
|
2455
|
+
/** Drop zone text before the browse link. Default "Drop a file here or" (or "Drop files here or" with `multiple`). */
|
|
2456
|
+
idleLabel?: string | undefined;
|
|
2457
|
+
/** The browse link's text. Default "browse". */
|
|
2458
|
+
browseLabel?: string | undefined;
|
|
2459
|
+
}
|
|
2460
|
+
/**
|
|
2461
|
+
* A labelled file picker with a drop zone, on FilePond (docs/adr/0004). Files stay in the browser: the
|
|
2462
|
+
* component hands plain `File` objects to `onFilesChange`, and with `name` it also keeps them in a file
|
|
2463
|
+
* input so a `<form>` (or a Server Action) submits them. Type, size and count are checked before a file
|
|
2464
|
+
* joins the list; a rejected file never joins it, and the reason shows in the field's error slot and is
|
|
2465
|
+
* announced. FilePond loads on mount, so the server renders a static drop zone and nothing of FilePond.
|
|
2466
|
+
*/
|
|
2467
|
+
declare function FileInput({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, accept, acceptLabel, maxFileSize, multiple, maxFiles, files, defaultFiles, onFilesChange, idleLabel, browseLabel, }: FileInputProps): react.JSX.Element;
|
|
2468
|
+
|
|
2469
|
+
interface PriorityNavItem {
|
|
2470
|
+
/** Where the link goes. */
|
|
2471
|
+
href: string;
|
|
2472
|
+
/** The visible text. A string (or number) is part of the width cache key; see `PriorityNav`. */
|
|
2473
|
+
label: ReactNode;
|
|
2474
|
+
/** A stable key. Defaults to `href`. */
|
|
2475
|
+
id?: string | undefined;
|
|
2476
|
+
/** The page being shown: `aria-current="page"`, and the link never collapses into "More". */
|
|
2477
|
+
current?: boolean | undefined;
|
|
2478
|
+
}
|
|
2479
|
+
/** What `renderLink` receives: spread it onto your link component. */
|
|
2480
|
+
interface PriorityNavLinkProps {
|
|
2481
|
+
href: string;
|
|
2482
|
+
className: string;
|
|
2483
|
+
'aria-current': 'page' | undefined;
|
|
2484
|
+
onClick: MouseEventHandler<HTMLAnchorElement> | undefined;
|
|
2485
|
+
children: ReactNode;
|
|
2486
|
+
}
|
|
2487
|
+
interface PriorityNavProps extends Omit<ComponentPropsWithRef<'nav'>, 'children'> {
|
|
2488
|
+
/** Names the landmark: "Main". */
|
|
2489
|
+
'aria-label': string;
|
|
2490
|
+
/** The links, in priority order: the first ones stay inline longest. */
|
|
2491
|
+
items: readonly PriorityNavItem[];
|
|
2492
|
+
/** Visible text of the overflow toggle. Default "More". */
|
|
2493
|
+
moreLabel?: string | undefined;
|
|
2494
|
+
/** Appended to the toggle's accessible name only: "More, 3 links". Default `n link(s)`. */
|
|
2495
|
+
moreCountLabel?: ((hidden: number) => string) | undefined;
|
|
2496
|
+
/** Renders each link. Default a plain `<a>`; pass a router link: `(props) => <Link {...props} />`. */
|
|
2497
|
+
renderLink?: ((props: PriorityNavLinkProps, item: PriorityNavItem) => ReactElement) | undefined;
|
|
2498
|
+
/**
|
|
2499
|
+
* Called when links start or stop collapsing into "More" (also `data-overflowing` on the `nav`), so a
|
|
2500
|
+
* header can make room, e.g. an action button going icon-only.
|
|
2501
|
+
*/
|
|
2502
|
+
onOverflowChange?: ((overflowing: boolean) => void) | undefined;
|
|
2503
|
+
/**
|
|
2504
|
+
* Room in px the row must have beyond fitting every link before it stops reporting overflow. Set it to
|
|
2505
|
+
* the space your header gives back on overflow (the button label's width), so the two cannot oscillate.
|
|
2506
|
+
* Default 0.
|
|
2507
|
+
*/
|
|
2508
|
+
overflowHysteresis?: number | undefined;
|
|
2509
|
+
}
|
|
2510
|
+
/**
|
|
2511
|
+
* Priority+ navigation: a row of primary links that keeps the ones that fit inline and collapses the rest
|
|
2512
|
+
* into a "More" disclosure at the end of the row. The current page is never collapsed. Follows the
|
|
2513
|
+
* WAI-ARIA APG disclosure navigation pattern (links in a list, a real button with `aria-expanded`), not
|
|
2514
|
+
* `role="menu"`. Server-renders every link inline, so it works before hydration and without JavaScript;
|
|
2515
|
+
* see docs/adr/0005-priority-nav.md.
|
|
2516
|
+
*/
|
|
2517
|
+
declare function PriorityNav({ items, moreLabel, moreCountLabel, renderLink, onOverflowChange, overflowHysteresis, className, style, ...rest }: PriorityNavProps): react.JSX.Element;
|
|
2518
|
+
|
|
2519
|
+
type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
|
|
2520
|
+
type PopoverAlign = 'start' | 'center' | 'end';
|
|
2521
|
+
interface PopoverRootProps {
|
|
2522
|
+
/** Controlled open state. */
|
|
2523
|
+
open?: boolean | undefined;
|
|
2524
|
+
/** Initial open state when uncontrolled. */
|
|
2525
|
+
defaultOpen?: boolean | undefined;
|
|
2526
|
+
/** Called when the popover opens or closes. */
|
|
2527
|
+
onOpenChange?: ((open: boolean) => void) | undefined;
|
|
2528
|
+
/** Default `false`: the page stays interactive and focus may leave. `true` makes the page inert until it closes. */
|
|
2529
|
+
modal?: boolean | undefined;
|
|
2530
|
+
children?: ReactNode | undefined;
|
|
2531
|
+
}
|
|
2532
|
+
/** Owns the open state. Wrap a `Popover.Trigger` and a `Popover.Content`. */
|
|
2533
|
+
declare function Root({ open, defaultOpen, onOpenChange, modal, children }: PopoverRootProps): react.JSX.Element;
|
|
2534
|
+
interface PopoverTriggerProps extends Omit<Popover$1.Trigger.Props, 'className'> {
|
|
2535
|
+
className?: string | undefined;
|
|
2536
|
+
}
|
|
2537
|
+
/**
|
|
2538
|
+
* Opens the popover. With no `render` it is a secondary Button; pass any Button or IconButton through
|
|
2539
|
+
* `render`: `<Popover.Trigger render={<IconButton label="Sweeps: running" dot="success" />}>`.
|
|
2540
|
+
*/
|
|
2541
|
+
declare function Trigger({ render, className, children, ...rest }: PopoverTriggerProps): react.JSX.Element;
|
|
2542
|
+
interface PopoverContentProps extends Omit<Popover$1.Popup.Props, 'className'> {
|
|
2543
|
+
/** Side of the trigger it opens on; flips when there is no room. Default `bottom`. */
|
|
2544
|
+
side?: PopoverSide | undefined;
|
|
2545
|
+
/** Alignment along that side. Default `center`. */
|
|
2546
|
+
align?: PopoverAlign | undefined;
|
|
2547
|
+
/** Distance from the trigger in px. Default 4, or 8 with `arrow`. */
|
|
2548
|
+
sideOffset?: number | undefined;
|
|
2549
|
+
/** Draws a tip pointing at the trigger. */
|
|
2550
|
+
arrow?: boolean | undefined;
|
|
2551
|
+
className?: string | undefined;
|
|
2552
|
+
}
|
|
2553
|
+
/** Portal, positioner and the panel. Any content goes inside; name it with `Popover.Title`. */
|
|
2554
|
+
declare function Content({ side, align, sideOffset, arrow, className, children, ...rest }: PopoverContentProps): react.JSX.Element;
|
|
2555
|
+
interface PopoverTitleProps extends Omit<Popover$1.Title.Props, 'className'> {
|
|
2556
|
+
className?: string | undefined;
|
|
2557
|
+
}
|
|
2558
|
+
/** Names the popover (`aria-labelledby`). A heading, `h2` by default. */
|
|
2559
|
+
declare function Title({ className, ...rest }: PopoverTitleProps): react.JSX.Element;
|
|
2560
|
+
interface PopoverDescriptionProps extends Omit<Popover$1.Description.Props, 'className'> {
|
|
2561
|
+
className?: string | undefined;
|
|
2562
|
+
}
|
|
2563
|
+
/** Describes the popover (`aria-describedby`). Muted text. */
|
|
2564
|
+
declare function Description({ className, ...rest }: PopoverDescriptionProps): react.JSX.Element;
|
|
2565
|
+
interface PopoverCloseProps extends Omit<Popover$1.Close.Props, 'className'> {
|
|
2566
|
+
className?: string | undefined;
|
|
2567
|
+
}
|
|
2568
|
+
/** With no children or `render`, the × in the corner. Otherwise wraps any Button: `<Popover.Close render={<Button variant="ghost" />}>Done</Popover.Close>`. */
|
|
2569
|
+
declare function Close({ className, children, render, ...rest }: PopoverCloseProps): react.JSX.Element;
|
|
2570
|
+
/** A non-modal panel anchored to a trigger, for a small form, a status summary or a legend. Built on Base UI's Popover. */
|
|
2571
|
+
declare const Popover: {
|
|
2572
|
+
Root: typeof Root;
|
|
2573
|
+
Trigger: typeof Trigger;
|
|
2574
|
+
Content: typeof Content;
|
|
2575
|
+
Title: typeof Title;
|
|
2576
|
+
Description: typeof Description;
|
|
2577
|
+
Close: typeof Close;
|
|
2578
|
+
};
|
|
2579
|
+
|
|
2580
|
+
interface BroomIconProps extends Omit<ComponentPropsWithRef<'svg'>, 'children'> {
|
|
2581
|
+
/** Sweeps back and forth while dust drifts. With `prefers-reduced-motion` it holds still and shows the dust. */
|
|
2582
|
+
sweeping?: boolean | undefined;
|
|
2583
|
+
/** The Icon sizes (`lg` 20, the nav size, is the default), or `display` (72px, stroke 1.75px) for empty states and showcases. Inside an IconButton it fills the icon slot one step up, since it is drawn on a 24px grid. */
|
|
2584
|
+
size?: IconSize | 'display' | undefined;
|
|
2585
|
+
/** Gives the icon an accessible name (`role="img"`). Without it the icon is decorative and hidden from assistive tech. */
|
|
2586
|
+
title?: string | undefined;
|
|
2587
|
+
}
|
|
2588
|
+
/**
|
|
2589
|
+
* An animated broom on a 24×24 grid, for "a sweep is running". Inline SVG, because CSS cannot animate
|
|
2590
|
+
* inside a `<use>` clone. Strokes keep a fixed screen width at every size (`vector-effect: non-scaling-stroke`).
|
|
2591
|
+
* Decorative by default: say what is happening in the surrounding control's label ("Sweeps: running").
|
|
2592
|
+
*/
|
|
2593
|
+
declare function BroomIcon({ sweeping, size, title, className, ...rest }: BroomIconProps): react.JSX.Element;
|
|
2594
|
+
|
|
2427
2595
|
declare const version = "0.1.1";
|
|
2428
2596
|
|
|
2429
|
-
export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Badge, Banner, BellIcon, BriefcaseIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, Disclosure, DocumentIcon, DownloadIcon, EditIcon, EmptyState, ExternalLinkIcon, EyeIcon, FilterIcon, FlagIcon, Heading, Icon, IconButton, InboxIcon, InfoIcon, Inline, Input, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, Progress, RefreshIcon, SearchIcon, Select, SettingsIcon, Skeleton, Spinner, Stack, StarIcon, Stat, SunIcon, Switch, Table, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, XIcon, iconNames, version };
|
|
2430
|
-
export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, BannerProps, BannerTone, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, CheckboxProps, ChipProps, ChipSize, ChipTone, ControlSize, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, DialogVariant, DisclosureProps, EmptyStateElement, EmptyStateProps, EmptyStateSize, FieldProps, HeadingElement, HeadingLevel, HeadingProps, HeadingSize, IconButtonProps, IconGlyphProps, IconName, IconProps, IconSize, InlineAlign, InlineElement, InlineJustify, InlineProps, InputProps, KbdGroupProps, KbdProps, MenuAlign, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemProps, MenuItemTone, MenuLinkItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuSide, MenuTriggerProps, ProgressProps, ProgressSize, ProgressTone, ProgressVariant, SelectGroup, SelectOption, SelectProps, SkeletonProps, SkeletonVariant, SpacingSize, SpinnerProps, StackAlign, StackElement, StackJustify, StackProps, StatDeltaTone, StatElement, StatProps, StatSize, StatTrend, StatVariant, SwitchProps, TableAlign, TableBodyProps, TableCaptionProps, TableCellProps, TableDensity, TableFootProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowProps, TableSortDirection, TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps, TextAlign, TextElement, TextProps, TextSize, TextTone, TextWeight, TextareaProps, TextareaVariant, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide };
|
|
2597
|
+
export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Badge, Banner, BellIcon, BriefcaseIcon, BroomIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, Disclosure, DocumentIcon, DownloadIcon, EditIcon, EmptyState, ExternalLinkIcon, EyeIcon, FileInput, FilterIcon, FlagIcon, Heading, Icon, IconButton, InboxIcon, InfoIcon, Inline, Input, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, Popover, PriorityNav, Progress, RefreshIcon, SearchIcon, Select, SettingsIcon, Skeleton, Spinner, Stack, StarIcon, Stat, SunIcon, Switch, Table, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, XIcon, iconNames, version };
|
|
2598
|
+
export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, BannerProps, BannerTone, BroomIconProps, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, CheckboxProps, ChipProps, ChipSize, ChipTone, ControlSize, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, DialogVariant, DisclosureProps, EmptyStateElement, EmptyStateProps, EmptyStateSize, FieldProps, FileInputProps, HeadingElement, HeadingLevel, HeadingProps, HeadingSize, IconButtonDotTone, IconButtonProps, IconGlyphProps, IconName, IconProps, IconSize, InlineAlign, InlineElement, InlineJustify, InlineProps, InputProps, KbdGroupProps, KbdProps, MenuAlign, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemProps, MenuItemTone, MenuLinkItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuSide, MenuTriggerProps, PopoverAlign, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverRootProps, PopoverSide, PopoverTitleProps, PopoverTriggerProps, PriorityNavItem, PriorityNavLinkProps, PriorityNavProps, ProgressProps, ProgressSize, ProgressTone, ProgressVariant, SelectGroup, SelectOption, SelectProps, SkeletonProps, SkeletonVariant, SpacingSize, SpinnerProps, StackAlign, StackElement, StackJustify, StackProps, StatDeltaTone, StatElement, StatProps, StatSize, StatTrend, StatVariant, SwitchProps, TableAlign, TableBodyProps, TableCaptionProps, TableCellProps, TableDensity, TableFootProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowProps, TableSortDirection, TabsListProps, TabsListVariant, TabsPanelProps, TabsRootProps, TabsTabProps, TextAlign, TextElement, TextProps, TextSize, TextTone, TextWeight, TextareaProps, TextareaVariant, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide };
|