@salemcobalt/ui 0.2.0-rc.4 → 0.2.0-rc.6

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.
Files changed (6) hide show
  1. package/README.md +23 -19
  2. package/dist/index.d.ts +419 -12
  3. package/dist/index.js +293 -35
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles.css +481 -3
  6. package/package.json +4 -4
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`. Requires `@salemcobalt/tokens`.
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`.
4
4
 
5
5
  ```ts
6
6
  import '@salemcobalt/tokens/css'; // custom properties, light + dark
@@ -23,24 +23,28 @@ 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`. |
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). |
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` (Textarea), `onValueChange(string)` beside native `onChange`. |
40
- | `Select` | Same field props; `options` as `{ value, label, disabled? }` or `{ label, options }` groups; `value`/`defaultValue`/`onValueChange` (`null` for none); `placeholder`; `fullWidth`. Submits through `name` like a native select. |
41
- | `Checkbox`, `Switch` | Required `label`, `description`, `checked`/`defaultChecked`/`onCheckedChange(boolean)`, `name`/`value`, `disabled`, `required`; Checkbox adds `indeterminate`; Switch adds `labelPosition` start · end. |
42
- | `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. |
43
- | `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. |
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
+ | `Checkbox`, `Switch` | Required `label`, `description`, `checked`/`defaultChecked`/`onCheckedChange(boolean)`, `name`/`value`, `disabled`, `required`; Checkbox adds `indeterminate`; Switch adds `labelPosition` start · end. |
42
+ | `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. |
43
+ | `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`. |
44
+ | `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. |
45
+ | `EmptyState` | Centred placeholder: required `title`, `description`, `icon` (24px in a muted circle), children are the actions, `size` sm · md, `as` div · section · li. |
46
+ | `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. |
47
+ | `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. |
44
48
 
45
49
  ```tsx
46
50
  <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 } from 'react';
2
+ import { ComponentPropsWithRef, ReactNode, ReactElement, CSSProperties, MouseEvent } 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';
@@ -914,7 +914,7 @@ declare const Tooltip: typeof TooltipBase & {
914
914
  Provider: react.FC<_base_ui_react.TooltipProviderProps>;
915
915
  };
916
916
 
917
- interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children' | 'aria-label'> {
917
+ interface IconButtonProps extends Omit<useRender.ComponentProps<'button'>, 'children' | 'aria-label'> {
918
918
  /** Required. The accessible name, and the tooltip text when `tooltip` is `true`. */
919
919
  label: string;
920
920
  /** The icon, usually a shipped `<Name>Icon`. It is decorative; `label` names the button. Optional only so a popup trigger can supply it through `render`. */
@@ -932,8 +932,12 @@ interface IconButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'childre
932
932
  /** Shows a spinner, sets `aria-busy` and ignores clicks. */
933
933
  loading?: boolean | undefined;
934
934
  }
935
- /** A square Button for one icon. Always named by `label`; use `tooltip` to show that name on hover. */
936
- declare function IconButton({ label, children, variant, size, tooltip, tooltipSide, round, loading, type, className, onClick, ...rest }: IconButtonProps): react.JSX.Element;
935
+ /**
936
+ * A square Button for one icon. Always named by `label`; use `tooltip` to show that name on hover.
937
+ * Renders a `<button>` unless `render` gives another element: `render={<a href="/settings" />}` or a
938
+ * Next.js `<Link href="/settings" />` makes it a link with the same look and name.
939
+ */
940
+ declare function IconButton({ label, children, variant, size, tooltip, tooltipSide, round, loading, type, className, onClick, render, ref, ...rest }: IconButtonProps): react.JSX.Element;
937
941
 
938
942
  type MenuSide = 'top' | 'bottom' | 'left' | 'right';
939
943
  type MenuAlign = 'start' | 'center' | 'end';
@@ -1078,19 +1082,30 @@ interface InputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'name
1078
1082
  /** Called with the string value on every change, beside the native `onChange`. */
1079
1083
  onValueChange?: ((value: string) => void) | undefined;
1080
1084
  }
1081
- /** A labelled single-line text field. Renders a native `<input>` inside Base UI's Field. */
1085
+ /**
1086
+ * A labelled single-line text field. Renders a native `<input>` inside Base UI's Field, so every native
1087
+ * attribute passes through: `type="date" | "time" | "number" | "url" | …` keep the same height and
1088
+ * `iconStart` slot; `list="id"` with a `<datalist>` beside it gives native suggestions. Date and time
1089
+ * fields show the browser's picker at the end edge, so leave `iconEnd` off those.
1090
+ */
1082
1091
  declare function Input({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, iconStart, iconEnd, onValueChange, ...rest }: InputProps): react.JSX.Element;
1083
1092
 
1093
+ type TextareaVariant = 'default' | 'code';
1084
1094
  interface TextareaProps extends Omit<ComponentPropsWithRef<'textarea'>, 'name' | 'disabled' | 'required' | 'className'>, Omit<FieldProps, 'size'> {
1085
1095
  /** Visible lines. Default 3. */
1086
1096
  rows?: number | undefined;
1087
1097
  /** `vertical` (default) lets the user drag it taller; `none` fixes the height. */
1088
1098
  resize?: 'vertical' | 'none' | undefined;
1099
+ /**
1100
+ * `code` for Markdown, JSON and other source: monospace, `tab-size: 2`, spellcheck, autocorrect and
1101
+ * autocapitalize off. Add the native `wrap="off"` to keep long lines on one line and scroll sideways.
1102
+ */
1103
+ variant?: TextareaVariant | undefined;
1089
1104
  /** Called with the string value on every change, beside the native `onChange`. */
1090
1105
  onValueChange?: ((value: string) => void) | undefined;
1091
1106
  }
1092
1107
  /** A labelled multi-line text field. Renders a native `<textarea>` inside Base UI's Field. */
1093
- declare function Textarea({ label, hideLabel, description, error, invalid, required, disabled, name, className, rows, resize, onValueChange, ...rest }: TextareaProps): react.JSX.Element;
1108
+ declare function Textarea({ label, hideLabel, description, error, invalid, required, disabled, name, className, rows, resize, variant, onValueChange, spellCheck, autoCorrect, autoCapitalize, ...rest }: TextareaProps): react.JSX.Element;
1094
1109
 
1095
1110
  interface SelectOption<Value extends string = string> {
1096
1111
  value: Value;
@@ -1105,14 +1120,21 @@ interface SelectGroup<Value extends string = string> {
1105
1120
  interface SelectProps<Value extends string = string> extends FieldProps {
1106
1121
  /** Flat options, or groups of options with a heading. */
1107
1122
  options: Array<SelectOption<Value> | SelectGroup<Value>>;
1108
- /** Controlled value; `null` for none. */
1123
+ /** Controlled value; `null` for none, which shows `placeholder`. No sentinel option needed. */
1109
1124
  value?: Value | null | undefined;
1110
- /** Initial value when uncontrolled. */
1125
+ /** Initial value when uncontrolled; `null` (default) for none. */
1111
1126
  defaultValue?: Value | null | undefined;
1112
- /** Called with the chosen value. */
1127
+ /** Called with the chosen value, or `null` when the field is cleared. */
1113
1128
  onValueChange?: ((value: Value | null) => void) | undefined;
1114
1129
  /** Shown in the trigger while nothing is chosen. */
1115
1130
  placeholder?: ReactNode | undefined;
1131
+ /**
1132
+ * Shows an × beside the chevron while a value is chosen; pressing it, or Backspace/Delete on the
1133
+ * focused trigger, sets the value to `null` and calls `onValueChange(null)`.
1134
+ */
1135
+ clearable?: boolean | undefined;
1136
+ /** Accessible name of the clear button. Default "Clear". */
1137
+ clearLabel?: string | undefined;
1116
1138
  /** Prevents choosing a different option. */
1117
1139
  readOnly?: boolean | undefined;
1118
1140
  /** Stretches the trigger to the container. */
@@ -1123,7 +1145,7 @@ interface SelectProps<Value extends string = string> extends FieldProps {
1123
1145
  * A labelled single-choice dropdown. Built on Base UI's Select so the list is styled and keyboard
1124
1146
  * complete; submits like a native select through `name`.
1125
1147
  */
1126
- declare function Select<Value extends string = string>({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, options, value, defaultValue, onValueChange, placeholder, readOnly, fullWidth, id, }: SelectProps<Value>): react.JSX.Element;
1148
+ declare function Select<Value extends string = string>({ label, hideLabel, description, error, invalid, required, disabled, name, size, className, options, value, defaultValue, onValueChange, placeholder, clearable, clearLabel, readOnly, fullWidth, id, }: SelectProps<Value>): react.JSX.Element;
1127
1149
 
1128
1150
  interface CheckboxProps extends Omit<Checkbox$1.Root.Props, 'className' | 'onCheckedChange' | 'render' | 'children'> {
1129
1151
  /** Required. The visible label; clicking it toggles the box. */
@@ -1226,6 +1248,9 @@ declare function Separator({ className, ...rest }: ToolbarSeparatorProps): react
1226
1248
  interface ToolbarButtonProps extends Omit<Toolbar$1.Button.Props, 'className'> {
1227
1249
  className?: string | undefined;
1228
1250
  }
1251
+ interface ToolbarLinkProps extends Omit<Toolbar$1.Link.Props, 'className'> {
1252
+ className?: string | undefined;
1253
+ }
1229
1254
  interface ToolbarSpacerProps {
1230
1255
  className?: string | undefined;
1231
1256
  }
@@ -1237,6 +1262,7 @@ declare const Toolbar: {
1237
1262
  Group: typeof Group;
1238
1263
  Separator: typeof Separator;
1239
1264
  Button: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToolbarButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
1265
+ Link: react.ForwardRefExoticComponent<Omit<_base_ui_react.ToolbarLinkProps, "ref"> & react.RefAttributes<HTMLAnchorElement>>;
1240
1266
  Spacer: typeof Spacer;
1241
1267
  };
1242
1268
 
@@ -2017,7 +2043,388 @@ declare function Stat({ label, value, delta, deltaTone, trend, hint, icon, varia
2017
2043
  'data-size': StatSize;
2018
2044
  }, HTMLDivElement>;
2019
2045
 
2046
+ type ChipTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
2047
+ type ChipSize = 'sm' | 'md';
2048
+ interface ChipProps extends Omit<ComponentPropsWithRef<'span'>, 'onClick' | 'onRemove'> {
2049
+ /** The chip text. Keep it to a word or three. */
2050
+ children: ReactNode;
2051
+ /** A 14px icon before the text. Decorative. */
2052
+ icon?: ReactNode | undefined;
2053
+ /** Colour. `neutral` (default) for filters, a status tone when the chip is the status. */
2054
+ tone?: ChipTone | undefined;
2055
+ /** `md` 32px (default) or `sm` 24px inside table rows and Card headers. */
2056
+ size?: ChipSize | undefined;
2057
+ /** Filled and `aria-pressed`. Use with `onClick` for a toggling filter chip. */
2058
+ selected?: boolean | undefined;
2059
+ /** Makes the chip a `<button>` that toggles; `selected` is reflected as `aria-pressed`. */
2060
+ onClick?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
2061
+ /**
2062
+ * Adds a labelled × that calls this. Backspace or Delete on the focused chip (or on the ×) removes it
2063
+ * too. Focus is yours to manage after removal: move it to the next chip or the filter input.
2064
+ */
2065
+ onRemove?: (() => void) | undefined;
2066
+ /** Accessible name of the ×. Default "Remove" followed by the chip text when that text is a string. */
2067
+ removeLabel?: string | undefined;
2068
+ disabled?: boolean | undefined;
2069
+ }
2070
+ /**
2071
+ * A small pill: an applied filter, a tag, a selectable option in a row of a few. `onClick` makes it a
2072
+ * toggle button, `onRemove` adds the ×, and the two combine. Plain text otherwise.
2073
+ */
2074
+ declare function Chip({ children, icon, tone, size, selected, onClick, onRemove, removeLabel, disabled, className, ...rest }: ChipProps): react.JSX.Element;
2075
+
2076
+ interface DisclosureProps extends Omit<ComponentPropsWithRef<'details'>, 'open' | 'onToggle'> {
2077
+ /** Required. The summary line, a verb phrase: "Show full description". */
2078
+ summary: ReactNode;
2079
+ /** Replaces `summary` while open: "Show less". */
2080
+ summaryOpen?: ReactNode | undefined;
2081
+ /** Controlled open state. */
2082
+ open?: boolean | undefined;
2083
+ /** Initial open state when uncontrolled. */
2084
+ defaultOpen?: boolean | undefined;
2085
+ /** Called when the user toggles it. */
2086
+ onOpenChange?: ((open: boolean) => void) | undefined;
2087
+ /**
2088
+ * While closed, shows this many lines of the content fading out, so a long description still reads
2089
+ * as a teaser. Puts the summary line under the preview. Needs `::details-content` (2025 browsers);
2090
+ * older ones show the summary alone.
2091
+ */
2092
+ previewLines?: number | undefined;
2093
+ /** Puts the summary line above (default) or below the content. Defaults to `end` with `previewLines`. */
2094
+ summaryPosition?: 'start' | 'end' | undefined;
2095
+ children?: ReactNode | undefined;
2096
+ }
2097
+ /**
2098
+ * A native `<details>` collapse with a styled summary. Works without JavaScript, is announced as a
2099
+ * disclosure, and shares `name` with siblings for an exclusive group.
2100
+ */
2101
+ declare function Disclosure({ summary, summaryOpen, open, defaultOpen, onOpenChange, previewLines, summaryPosition, className, style, children, ref, ...rest }: DisclosureProps): react.JSX.Element;
2102
+
2103
+ type EmptyStateSize = 'sm' | 'md';
2104
+ type EmptyStateElement = 'div' | 'section' | 'li';
2105
+ interface EmptyStateProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
2106
+ /** Required. What is empty, as a short statement: "No applications yet". */
2107
+ title: ReactNode;
2108
+ /** One sentence on why, or what to do: "Postings you apply to show up here." */
2109
+ description?: ReactNode | undefined;
2110
+ /** A 24px icon in a muted circle above the title. Decorative. */
2111
+ icon?: ReactNode | undefined;
2112
+ /** The actions, usually one primary Button and at most one secondary. Rendered in an Inline. */
2113
+ children?: ReactNode | undefined;
2114
+ /** `md` (default) for a whole view or panel, `sm` inside a Card or a table body. */
2115
+ size?: EmptyStateSize | undefined;
2116
+ /** Element to render. Default `div`. */
2117
+ as?: EmptyStateElement | undefined;
2118
+ }
2119
+ /**
2120
+ * Centred placeholder for a view with nothing in it: an icon, a title, a sentence and the action that
2121
+ * fills it. Say what is missing and the next step; never apologise.
2122
+ */
2123
+ declare function EmptyState({ title, description, icon, children, size, as, className, ...rest }: EmptyStateProps): react.DetailedReactHTMLElement<{
2124
+ slot?: string | undefined | undefined;
2125
+ style?: react.CSSProperties | undefined;
2126
+ ref?: react.Ref<HTMLDivElement> | undefined;
2127
+ key?: react.Key | null | undefined;
2128
+ defaultChecked?: boolean | undefined | undefined;
2129
+ defaultValue?: string | number | readonly string[] | undefined;
2130
+ suppressContentEditableWarning?: boolean | undefined | undefined;
2131
+ suppressHydrationWarning?: boolean | undefined | undefined;
2132
+ accessKey?: string | undefined | undefined;
2133
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
2134
+ autoFocus?: boolean | undefined | undefined;
2135
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
2136
+ contextMenu?: string | undefined | undefined;
2137
+ dir?: string | undefined | undefined;
2138
+ draggable?: (boolean | "true" | "false") | undefined;
2139
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
2140
+ hidden?: boolean | undefined | undefined;
2141
+ id?: string | undefined | undefined;
2142
+ lang?: string | undefined | undefined;
2143
+ nonce?: string | undefined | undefined;
2144
+ spellCheck?: (boolean | "true" | "false") | undefined;
2145
+ tabIndex?: number | undefined | undefined;
2146
+ translate?: "yes" | "no" | undefined | undefined;
2147
+ radioGroup?: string | undefined | undefined;
2148
+ role?: react.AriaRole | undefined;
2149
+ about?: string | undefined | undefined;
2150
+ content?: string | undefined | undefined;
2151
+ datatype?: string | undefined | undefined;
2152
+ inlist?: any;
2153
+ prefix?: string | undefined | undefined;
2154
+ property?: string | undefined | undefined;
2155
+ rel?: string | undefined | undefined;
2156
+ resource?: string | undefined | undefined;
2157
+ rev?: string | undefined | undefined;
2158
+ typeof?: string | undefined | undefined;
2159
+ vocab?: string | undefined | undefined;
2160
+ autoCorrect?: string | undefined | undefined;
2161
+ autoSave?: string | undefined | undefined;
2162
+ color?: string | undefined | undefined;
2163
+ itemProp?: string | undefined | undefined;
2164
+ itemScope?: boolean | undefined | undefined;
2165
+ itemType?: string | undefined | undefined;
2166
+ itemID?: string | undefined | undefined;
2167
+ itemRef?: string | undefined | undefined;
2168
+ results?: number | undefined | undefined;
2169
+ security?: string | undefined | undefined;
2170
+ unselectable?: "on" | "off" | undefined | undefined;
2171
+ popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
2172
+ popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
2173
+ popoverTarget?: string | undefined | undefined;
2174
+ inert?: boolean | undefined | undefined;
2175
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
2176
+ is?: string | undefined | undefined;
2177
+ exportparts?: string | undefined | undefined;
2178
+ part?: string | undefined | undefined;
2179
+ "aria-activedescendant"?: string | undefined | undefined;
2180
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
2181
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
2182
+ "aria-braillelabel"?: string | undefined | undefined;
2183
+ "aria-brailleroledescription"?: string | undefined | undefined;
2184
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
2185
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
2186
+ "aria-colcount"?: number | undefined | undefined;
2187
+ "aria-colindex"?: number | undefined | undefined;
2188
+ "aria-colindextext"?: string | undefined | undefined;
2189
+ "aria-colspan"?: number | undefined | undefined;
2190
+ "aria-controls"?: string | undefined | undefined;
2191
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
2192
+ "aria-describedby"?: string | undefined | undefined;
2193
+ "aria-description"?: string | undefined | undefined;
2194
+ "aria-details"?: string | undefined | undefined;
2195
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
2196
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
2197
+ "aria-errormessage"?: string | undefined | undefined;
2198
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
2199
+ "aria-flowto"?: string | undefined | undefined;
2200
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
2201
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
2202
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
2203
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
2204
+ "aria-keyshortcuts"?: string | undefined | undefined;
2205
+ "aria-label"?: string | undefined | undefined;
2206
+ "aria-labelledby"?: string | undefined | undefined;
2207
+ "aria-level"?: number | undefined | undefined;
2208
+ "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
2209
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
2210
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
2211
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
2212
+ "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
2213
+ "aria-owns"?: string | undefined | undefined;
2214
+ "aria-placeholder"?: string | undefined | undefined;
2215
+ "aria-posinset"?: number | undefined | undefined;
2216
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
2217
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
2218
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
2219
+ "aria-required"?: (boolean | "true" | "false") | undefined;
2220
+ "aria-roledescription"?: string | undefined | undefined;
2221
+ "aria-rowcount"?: number | undefined | undefined;
2222
+ "aria-rowindex"?: number | undefined | undefined;
2223
+ "aria-rowindextext"?: string | undefined | undefined;
2224
+ "aria-rowspan"?: number | undefined | undefined;
2225
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
2226
+ "aria-setsize"?: number | undefined | undefined;
2227
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
2228
+ "aria-valuemax"?: number | undefined | undefined;
2229
+ "aria-valuemin"?: number | undefined | undefined;
2230
+ "aria-valuenow"?: number | undefined | undefined;
2231
+ "aria-valuetext"?: string | undefined | undefined;
2232
+ dangerouslySetInnerHTML?: {
2233
+ __html: string | TrustedHTML;
2234
+ } | undefined | undefined;
2235
+ onCopy?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
2236
+ onCopyCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
2237
+ onCut?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
2238
+ onCutCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
2239
+ onPaste?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
2240
+ onPasteCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
2241
+ onCompositionEnd?: react.CompositionEventHandler<HTMLDivElement> | undefined;
2242
+ onCompositionEndCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
2243
+ onCompositionStart?: react.CompositionEventHandler<HTMLDivElement> | undefined;
2244
+ onCompositionStartCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
2245
+ onCompositionUpdate?: react.CompositionEventHandler<HTMLDivElement> | undefined;
2246
+ onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
2247
+ onFocus?: react.FocusEventHandler<HTMLDivElement> | undefined;
2248
+ onFocusCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
2249
+ onBlur?: react.FocusEventHandler<HTMLDivElement> | undefined;
2250
+ onBlurCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
2251
+ onChange?: react.ChangeEventHandler<HTMLDivElement, Element> | undefined;
2252
+ onChangeCapture?: react.ChangeEventHandler<HTMLDivElement, Element> | undefined;
2253
+ onBeforeInput?: react.InputEventHandler<HTMLDivElement> | undefined;
2254
+ onBeforeInputCapture?: react.InputEventHandler<HTMLDivElement> | undefined;
2255
+ onInput?: react.InputEventHandler<HTMLDivElement> | undefined;
2256
+ onInputCapture?: react.InputEventHandler<HTMLDivElement> | undefined;
2257
+ onReset?: react.ReactEventHandler<HTMLDivElement> | undefined;
2258
+ onResetCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2259
+ onSubmit?: react.SubmitEventHandler<HTMLDivElement> | undefined;
2260
+ onSubmitCapture?: react.SubmitEventHandler<HTMLDivElement> | undefined;
2261
+ onInvalid?: react.ReactEventHandler<HTMLDivElement> | undefined;
2262
+ onInvalidCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2263
+ onLoad?: react.ReactEventHandler<HTMLDivElement> | undefined;
2264
+ onLoadCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2265
+ onError?: react.ReactEventHandler<HTMLDivElement> | undefined;
2266
+ onErrorCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2267
+ onKeyDown?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
2268
+ onKeyDownCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
2269
+ onKeyPress?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
2270
+ onKeyPressCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
2271
+ onKeyUp?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
2272
+ onKeyUpCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
2273
+ onAbort?: react.ReactEventHandler<HTMLDivElement> | undefined;
2274
+ onAbortCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2275
+ onCanPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
2276
+ onCanPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2277
+ onCanPlayThrough?: react.ReactEventHandler<HTMLDivElement> | undefined;
2278
+ onCanPlayThroughCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2279
+ onDurationChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
2280
+ onDurationChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2281
+ onEmptied?: react.ReactEventHandler<HTMLDivElement> | undefined;
2282
+ onEmptiedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2283
+ onEncrypted?: react.ReactEventHandler<HTMLDivElement> | undefined;
2284
+ onEncryptedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2285
+ onEnded?: react.ReactEventHandler<HTMLDivElement> | undefined;
2286
+ onEndedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2287
+ onLoadedData?: react.ReactEventHandler<HTMLDivElement> | undefined;
2288
+ onLoadedDataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2289
+ onLoadedMetadata?: react.ReactEventHandler<HTMLDivElement> | undefined;
2290
+ onLoadedMetadataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2291
+ onLoadStart?: react.ReactEventHandler<HTMLDivElement> | undefined;
2292
+ onLoadStartCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2293
+ onPause?: react.ReactEventHandler<HTMLDivElement> | undefined;
2294
+ onPauseCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2295
+ onPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
2296
+ onPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2297
+ onPlaying?: react.ReactEventHandler<HTMLDivElement> | undefined;
2298
+ onPlayingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2299
+ onProgress?: react.ReactEventHandler<HTMLDivElement> | undefined;
2300
+ onProgressCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2301
+ onRateChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
2302
+ onRateChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2303
+ onSeeked?: react.ReactEventHandler<HTMLDivElement> | undefined;
2304
+ onSeekedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2305
+ onSeeking?: react.ReactEventHandler<HTMLDivElement> | undefined;
2306
+ onSeekingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2307
+ onStalled?: react.ReactEventHandler<HTMLDivElement> | undefined;
2308
+ onStalledCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2309
+ onSuspend?: react.ReactEventHandler<HTMLDivElement> | undefined;
2310
+ onSuspendCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2311
+ onTimeUpdate?: react.ReactEventHandler<HTMLDivElement> | undefined;
2312
+ onTimeUpdateCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2313
+ onVolumeChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
2314
+ onVolumeChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2315
+ onWaiting?: react.ReactEventHandler<HTMLDivElement> | undefined;
2316
+ onWaitingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2317
+ onAuxClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
2318
+ onAuxClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2319
+ onClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
2320
+ onClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2321
+ onContextMenu?: react.MouseEventHandler<HTMLDivElement> | undefined;
2322
+ onContextMenuCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2323
+ onDoubleClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
2324
+ onDoubleClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2325
+ onDrag?: react.DragEventHandler<HTMLDivElement> | undefined;
2326
+ onDragCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2327
+ onDragEnd?: react.DragEventHandler<HTMLDivElement> | undefined;
2328
+ onDragEndCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2329
+ onDragEnter?: react.DragEventHandler<HTMLDivElement> | undefined;
2330
+ onDragEnterCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2331
+ onDragExit?: react.DragEventHandler<HTMLDivElement> | undefined;
2332
+ onDragExitCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2333
+ onDragLeave?: react.DragEventHandler<HTMLDivElement> | undefined;
2334
+ onDragLeaveCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2335
+ onDragOver?: react.DragEventHandler<HTMLDivElement> | undefined;
2336
+ onDragOverCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2337
+ onDragStart?: react.DragEventHandler<HTMLDivElement> | undefined;
2338
+ onDragStartCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2339
+ onDrop?: react.DragEventHandler<HTMLDivElement> | undefined;
2340
+ onDropCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
2341
+ onMouseDown?: react.MouseEventHandler<HTMLDivElement> | undefined;
2342
+ onMouseDownCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2343
+ onMouseEnter?: react.MouseEventHandler<HTMLDivElement> | undefined;
2344
+ onMouseLeave?: react.MouseEventHandler<HTMLDivElement> | undefined;
2345
+ onMouseMove?: react.MouseEventHandler<HTMLDivElement> | undefined;
2346
+ onMouseMoveCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2347
+ onMouseOut?: react.MouseEventHandler<HTMLDivElement> | undefined;
2348
+ onMouseOutCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2349
+ onMouseOver?: react.MouseEventHandler<HTMLDivElement> | undefined;
2350
+ onMouseOverCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2351
+ onMouseUp?: react.MouseEventHandler<HTMLDivElement> | undefined;
2352
+ onMouseUpCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
2353
+ onSelect?: react.ReactEventHandler<HTMLDivElement> | undefined;
2354
+ onSelectCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
2355
+ onTouchCancel?: react.TouchEventHandler<HTMLDivElement> | undefined;
2356
+ onTouchCancelCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
2357
+ onTouchEnd?: react.TouchEventHandler<HTMLDivElement> | undefined;
2358
+ onTouchEndCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
2359
+ onTouchMove?: react.TouchEventHandler<HTMLDivElement> | undefined;
2360
+ onTouchMoveCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
2361
+ onTouchStart?: react.TouchEventHandler<HTMLDivElement> | undefined;
2362
+ onTouchStartCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
2363
+ onPointerDown?: react.PointerEventHandler<HTMLDivElement> | undefined;
2364
+ onPointerDownCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2365
+ onPointerMove?: react.PointerEventHandler<HTMLDivElement> | undefined;
2366
+ onPointerMoveCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2367
+ onPointerUp?: react.PointerEventHandler<HTMLDivElement> | undefined;
2368
+ onPointerUpCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2369
+ onPointerCancel?: react.PointerEventHandler<HTMLDivElement> | undefined;
2370
+ onPointerCancelCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2371
+ onPointerEnter?: react.PointerEventHandler<HTMLDivElement> | undefined;
2372
+ onPointerLeave?: react.PointerEventHandler<HTMLDivElement> | undefined;
2373
+ onPointerOver?: react.PointerEventHandler<HTMLDivElement> | undefined;
2374
+ onPointerOverCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2375
+ onPointerOut?: react.PointerEventHandler<HTMLDivElement> | undefined;
2376
+ onPointerOutCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2377
+ onGotPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2378
+ onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2379
+ onLostPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2380
+ onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
2381
+ onScroll?: react.UIEventHandler<HTMLDivElement> | undefined;
2382
+ onScrollCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
2383
+ onScrollEnd?: react.UIEventHandler<HTMLDivElement> | undefined;
2384
+ onScrollEndCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
2385
+ onWheel?: react.WheelEventHandler<HTMLDivElement> | undefined;
2386
+ onWheelCapture?: react.WheelEventHandler<HTMLDivElement> | undefined;
2387
+ onAnimationStart?: react.AnimationEventHandler<HTMLDivElement> | undefined;
2388
+ onAnimationStartCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
2389
+ onAnimationEnd?: react.AnimationEventHandler<HTMLDivElement> | undefined;
2390
+ onAnimationEndCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
2391
+ onAnimationIteration?: react.AnimationEventHandler<HTMLDivElement> | undefined;
2392
+ onAnimationIterationCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
2393
+ onToggle?: react.ToggleEventHandler<HTMLDivElement> | undefined;
2394
+ onBeforeToggle?: react.ToggleEventHandler<HTMLDivElement> | undefined;
2395
+ onTransitionCancel?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2396
+ onTransitionCancelCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2397
+ onTransitionEnd?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2398
+ onTransitionEndCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2399
+ onTransitionRun?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2400
+ onTransitionRunCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2401
+ onTransitionStart?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2402
+ onTransitionStartCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
2403
+ className: string;
2404
+ 'data-size': EmptyStateSize;
2405
+ }, HTMLDivElement>;
2406
+
2407
+ type SkeletonVariant = 'text' | 'rect' | 'circle';
2408
+ interface SkeletonProps extends ComponentPropsWithRef<'span'> {
2409
+ /** `text` (default) is one line of the current font size; `rect` a block; `circle` an avatar. */
2410
+ variant?: SkeletonVariant | undefined;
2411
+ /** Any CSS length. Default: text `100%`, rect `100%`, circle `40px`. */
2412
+ width?: string | number | undefined;
2413
+ /** Any CSS length. Default: text `1em` (one line), rect `80px`, circle = `width`. */
2414
+ height?: string | number | undefined;
2415
+ /** For `text`: how many lines; the last is shorter. Default 1. */
2416
+ lines?: number | undefined;
2417
+ /** Hides the shimmer. Default `false`; reduced motion hides it anyway. */
2418
+ still?: boolean | undefined;
2419
+ }
2420
+ /**
2421
+ * A placeholder shape shown while real content loads. It is hidden from assistive tech: put
2422
+ * `aria-busy="true"` on the region being filled, or a `Spinner` with a label beside it, so the loading
2423
+ * state is announced once instead of per block.
2424
+ */
2425
+ declare function Skeleton({ variant, width, height, lines, still, className, style, ...rest }: SkeletonProps): react.JSX.Element;
2426
+
2020
2427
  declare const version = "0.1.1";
2021
2428
 
2022
- export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Badge, Banner, BellIcon, BriefcaseIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, DocumentIcon, DownloadIcon, EditIcon, 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, Spinner, Stack, StarIcon, Stat, SunIcon, Switch, Table, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, XIcon, iconNames, version };
2023
- export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant, BannerProps, BannerTone, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, CheckboxProps, ControlSize, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, DialogVariant, 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, 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, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide };
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 };