@kb.ui/react 0.10.4 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +130 -708
- package/dist/components/Accordion/Accordion.d.ts +33 -0
- package/dist/components/Avatar/Avatar.d.ts +19 -0
- package/dist/components/Code/Code.d.ts +26 -3
- package/dist/components/Code/tokenize.d.ts +5 -0
- package/dist/components/CodeBlock/CodeBlock.d.ts +10 -0
- package/dist/components/Collection/Collection.d.ts +99 -0
- package/dist/components/Collection/useCollection.d.ts +66 -0
- package/dist/components/CollectionList/CollectionList.d.ts +12 -0
- package/dist/components/CollectionRow/CollectionRow.d.ts +17 -0
- package/dist/components/Combobox/Combobox.d.ts +14 -2
- package/dist/components/CopyableText/CopyableText.d.ts +38 -0
- package/dist/components/CopyableText/content.d.ts +14 -0
- package/dist/components/DescriptionList/DescriptionList.d.ts +20 -0
- package/dist/components/Dialog/Dialog.d.ts +3 -1
- package/dist/components/Disclosure/Disclosure.d.ts +21 -0
- package/dist/components/EmptyState/EmptyState.d.ts +30 -0
- package/dist/components/Grid/Grid.d.ts +17 -6
- package/dist/components/Image/Image.d.ts +20 -0
- package/dist/components/Link/Link.d.ts +15 -2
- package/dist/components/Popover/Popover.d.ts +55 -0
- package/dist/components/Skeleton/Skeleton.d.ts +32 -0
- package/dist/components/Spinner/Spinner.d.ts +26 -0
- package/dist/components/Table/Table.d.ts +65 -0
- package/dist/components/Tabs/Tabs.d.ts +69 -0
- package/dist/components/Tabs/index.d.ts +1 -0
- package/dist/components/Thumbnail/Thumbnail.d.ts +14 -0
- package/dist/components/Toast/Toast.d.ts +72 -0
- package/dist/index.d.ts +29 -4
- package/dist/index.js +3510 -1232
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/utils/CollapsiblePanel.d.ts +10 -0
- package/dist/utils/useClipboard.d.ts +28 -0
- package/docs/components/Accordion.md +66 -0
- package/docs/components/Avatar.md +80 -0
- package/docs/components/Badge.md +37 -0
- package/docs/components/Button.md +46 -0
- package/docs/components/Callout.md +41 -0
- package/docs/components/Card.md +41 -0
- package/docs/components/Checkbox.md +60 -0
- package/docs/components/Code.md +77 -0
- package/docs/components/CodeBlock.md +77 -0
- package/docs/components/Collection.md +183 -0
- package/docs/components/CollectionList.md +44 -0
- package/docs/components/CollectionRow.md +62 -0
- package/docs/components/Combobox.md +88 -0
- package/docs/components/Container.md +41 -0
- package/docs/components/CopyableText.md +93 -0
- package/docs/components/DescriptionList.md +61 -0
- package/docs/components/Dialog.md +84 -0
- package/docs/components/Disclosure.md +53 -0
- package/docs/components/EmptyState.md +50 -0
- package/docs/components/ErrorSummary.md +46 -0
- package/docs/components/Fieldset.md +42 -0
- package/docs/components/FileInput.md +74 -0
- package/docs/components/FormActions.md +45 -0
- package/docs/components/Grid.md +66 -0
- package/docs/components/Heading.md +40 -0
- package/docs/components/Image.md +62 -0
- package/docs/components/Inline.md +42 -0
- package/docs/components/Input.md +82 -0
- package/docs/components/Link.md +52 -0
- package/docs/components/Menu.md +44 -0
- package/docs/components/MultiSelect.md +59 -0
- package/docs/components/NumberField.md +65 -0
- package/docs/components/Panel.md +145 -0
- package/docs/components/Popover.md +89 -0
- package/docs/components/Progress.md +37 -0
- package/docs/components/RadioGroup.md +69 -0
- package/docs/components/ScrollArea.md +40 -0
- package/docs/components/Select.md +71 -0
- package/docs/components/Separator.md +40 -0
- package/docs/components/Skeleton.md +46 -0
- package/docs/components/Spinner.md +40 -0
- package/docs/components/Split.md +47 -0
- package/docs/components/Stat.md +34 -0
- package/docs/components/Status.md +47 -0
- package/docs/components/Switch.md +73 -0
- package/docs/components/Table.md +105 -0
- package/docs/components/Tabs.md +89 -0
- package/docs/components/Text.md +36 -0
- package/docs/components/Textarea.md +47 -0
- package/docs/components/Thumbnail.md +66 -0
- package/docs/components/Toast.md +130 -0
- package/docs/components/Toolbar.md +39 -0
- package/docs/components/Tooltip.md +42 -0
- package/package.json +3 -2
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { type ComponentPropsWithoutRef, type ReactNode } from "react";
|
|
2
|
+
import { type ClassNames } from "../../utils/kb";
|
|
3
|
+
export type SkeletonVariant = "text" | "rect" | "circle" | "pill";
|
|
4
|
+
export type SkeletonSize = "sm" | "md" | "lg";
|
|
5
|
+
export type SkeletonAnimation = "shimmer" | "pulse" | "wave" | "none";
|
|
6
|
+
export type SkeletonTone = "default" | "subtle" | "accent";
|
|
7
|
+
export type SkeletonPart = "root" | "line" | "content";
|
|
8
|
+
export interface SkeletonProps extends ComponentPropsWithoutRef<"div"> {
|
|
9
|
+
/** Shape preset for the placeholder geometry. */
|
|
10
|
+
variant?: SkeletonVariant | undefined;
|
|
11
|
+
/** Size preset controlling line height or avatar diameter. */
|
|
12
|
+
size?: SkeletonSize | undefined;
|
|
13
|
+
/** Number of stacked placeholder lines when `variant="text"`. */
|
|
14
|
+
lines?: number | undefined;
|
|
15
|
+
/** Enable motion on placeholder shapes; set `false` for static placeholders. */
|
|
16
|
+
animated?: boolean | undefined;
|
|
17
|
+
/** Motion choreography (`shimmer` diagonal sweep, `pulse` breathing opacity, `wave` staggered cascade, or `none`). */
|
|
18
|
+
animation?: SkeletonAnimation | undefined;
|
|
19
|
+
/** Surface color treatment (`default` surface, `subtle` recessed tint, or `accent` warm synthesis tint). */
|
|
20
|
+
tone?: SkeletonTone | undefined;
|
|
21
|
+
/** Whether content is still loading; when `false`, renders `children` inside `.kb-skeleton-content`. */
|
|
22
|
+
loading?: boolean | undefined;
|
|
23
|
+
/** Optional explicit inline size (`px` number or CSS length string). */
|
|
24
|
+
width?: number | string | undefined;
|
|
25
|
+
/** Optional explicit block size (`px` number or CSS length string). */
|
|
26
|
+
height?: number | string | undefined;
|
|
27
|
+
/** Loaded content revealed when `loading` is `false`. */
|
|
28
|
+
children?: ReactNode | undefined;
|
|
29
|
+
/** Custom class names for internal component slots. */
|
|
30
|
+
classNames?: ClassNames<SkeletonPart> | undefined;
|
|
31
|
+
}
|
|
32
|
+
export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { type ComponentPropsWithoutRef } from "react";
|
|
2
|
+
import { type ClassNames } from "../../utils/kb";
|
|
3
|
+
export type SpinnerSize = "sm" | "md" | "lg";
|
|
4
|
+
export type SpinnerTone = "current" | "accent" | "neutral" | "info" | "success" | "warning" | "danger";
|
|
5
|
+
export type SpinnerVariant = "ring" | "orbit" | "dots" | "bars";
|
|
6
|
+
export type SpinnerAppearance = "plain" | "pill";
|
|
7
|
+
export type SpinnerPart = "root" | "icon" | "track" | "arc" | "core" | "dot" | "bar" | "label";
|
|
8
|
+
export interface SpinnerProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
|
|
9
|
+
/** Accessible status label announced by assistive technology and optionally shown beside the indicator. */
|
|
10
|
+
label?: string | undefined;
|
|
11
|
+
/** Render the label visibly beside the spinner instead of visually hidden. */
|
|
12
|
+
showLabel?: boolean | undefined;
|
|
13
|
+
/** Mark spinner as purely decorative (`aria-hidden="true"`, no status role) when a parent control already owns busy semantics. */
|
|
14
|
+
decorative?: boolean | undefined;
|
|
15
|
+
/** Visual size token preset. */
|
|
16
|
+
size?: SpinnerSize | undefined;
|
|
17
|
+
/** Semantic color tone; use `current` inside buttons or badges to inherit text color. */
|
|
18
|
+
tone?: SpinnerTone | undefined;
|
|
19
|
+
/** Indicator geometry and motion style. */
|
|
20
|
+
variant?: SpinnerVariant | undefined;
|
|
21
|
+
/** Container framing; `pill` wraps the indicator and label in a tinted status pill. */
|
|
22
|
+
appearance?: SpinnerAppearance | undefined;
|
|
23
|
+
/** Custom class names for internal component slots. */
|
|
24
|
+
classNames?: ClassNames<SpinnerPart> | undefined;
|
|
25
|
+
}
|
|
26
|
+
export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import type { ComponentProps, CSSProperties } from "react";
|
|
2
|
+
import { type ClassNames } from "../../utils/kb";
|
|
3
|
+
import { Checkbox, type CheckboxProps } from "../Checkbox/Checkbox";
|
|
4
|
+
export type TableProps = ComponentProps<"table"> & {
|
|
5
|
+
/** Cell spacing; dense retains full-size control targets. */
|
|
6
|
+
density?: "comfortable" | "dense" | undefined;
|
|
7
|
+
stickyHeader?: boolean | undefined;
|
|
8
|
+
/** Fixed column sizing; supply widths through colgroup or cell styles. */
|
|
9
|
+
layout?: "auto" | "fixed" | undefined;
|
|
10
|
+
};
|
|
11
|
+
export declare function TableRoot({ density, stickyHeader, layout, className, ...props }: TableProps): import("react").JSX.Element;
|
|
12
|
+
export type TableScrollContainerProps = ComponentProps<"section"> & {
|
|
13
|
+
label: string;
|
|
14
|
+
/** Height cap; sticky headers use this scroll boundary. */
|
|
15
|
+
maxHeight?: CSSProperties["maxHeight"] | undefined;
|
|
16
|
+
};
|
|
17
|
+
export declare function TableScrollContainer({ label, maxHeight, onFocus, className, style, ...props }: TableScrollContainerProps): import("react").JSX.Element;
|
|
18
|
+
export type TableCaptionProps = ComponentProps<"caption">;
|
|
19
|
+
export declare function TableCaption({ className, ...props }: TableCaptionProps): import("react").JSX.Element;
|
|
20
|
+
export type TableHeadProps = ComponentProps<"thead">;
|
|
21
|
+
export declare function TableHead({ className, ...props }: TableHeadProps): import("react").JSX.Element;
|
|
22
|
+
export type TableBodyProps = ComponentProps<"tbody">;
|
|
23
|
+
export declare function TableBody({ className, ...props }: TableBodyProps): import("react").JSX.Element;
|
|
24
|
+
export type TableFootProps = ComponentProps<"tfoot">;
|
|
25
|
+
export declare function TableFoot({ className, ...props }: TableFootProps): import("react").JSX.Element;
|
|
26
|
+
export type TableRowProps = ComponentProps<"tr"> & {
|
|
27
|
+
/** Highlight a row whose checkbox is selected; adds no grid role. */
|
|
28
|
+
selected?: boolean | undefined;
|
|
29
|
+
};
|
|
30
|
+
export declare function TableRow({ selected, className, ...props }: TableRowProps): import("react").JSX.Element;
|
|
31
|
+
export type TableCellOptions = {
|
|
32
|
+
align?: "start" | "center" | "end" | undefined;
|
|
33
|
+
/** Pin one edge cell; use matching edges in header and body. */
|
|
34
|
+
sticky?: "start" | "end" | undefined;
|
|
35
|
+
};
|
|
36
|
+
export type TableSortDirection = "none" | "ascending" | "descending";
|
|
37
|
+
export type TableColumnHeaderProps = Omit<ComponentProps<"th">, "align"> & TableCellOptions & {
|
|
38
|
+
/** Controlled order; app owns sorting and resets other columns to none. */
|
|
39
|
+
sortDirection?: TableSortDirection | undefined;
|
|
40
|
+
/** Enables native sort button; none starts ascending, then toggles. */
|
|
41
|
+
onSortChange?: ((direction: Exclude<TableSortDirection, "none">) => void) | undefined;
|
|
42
|
+
sortDisabled?: boolean | undefined;
|
|
43
|
+
classNames?: ClassNames<"sortButton" | "sortIcon"> | undefined;
|
|
44
|
+
};
|
|
45
|
+
export declare function TableColumnHeader({ align, sticky, sortDirection, onSortChange, sortDisabled, className, classNames, children, scope, "aria-sort": ariaSort, ...props }: TableColumnHeaderProps): import("react").JSX.Element;
|
|
46
|
+
export type TableRowHeaderProps = Omit<ComponentProps<"th">, "align"> & TableCellOptions;
|
|
47
|
+
export declare function TableRowHeader({ align, sticky, scope, className, ...props }: TableRowHeaderProps): import("react").JSX.Element;
|
|
48
|
+
export type TableCellProps = Omit<ComponentProps<"td">, "align"> & TableCellOptions;
|
|
49
|
+
export declare function TableCell({ align, sticky, className, ...props }: TableCellProps): import("react").JSX.Element;
|
|
50
|
+
export type TableSelectionCheckboxProps = CheckboxProps;
|
|
51
|
+
export type TableRowActionsProps = ComponentProps<"div">;
|
|
52
|
+
export declare function TableRowActions({ className, ...props }: TableRowActionsProps): import("react").JSX.Element;
|
|
53
|
+
export declare const Table: typeof TableRoot & {
|
|
54
|
+
ScrollContainer: typeof TableScrollContainer;
|
|
55
|
+
Caption: typeof TableCaption;
|
|
56
|
+
Head: typeof TableHead;
|
|
57
|
+
Body: typeof TableBody;
|
|
58
|
+
Foot: typeof TableFoot;
|
|
59
|
+
Row: typeof TableRow;
|
|
60
|
+
ColumnHeader: typeof TableColumnHeader;
|
|
61
|
+
RowHeader: typeof TableRowHeader;
|
|
62
|
+
Cell: typeof TableCell;
|
|
63
|
+
SelectionCheckbox: typeof Checkbox;
|
|
64
|
+
RowActions: typeof TableRowActions;
|
|
65
|
+
};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { Tabs as BaseTabs } from "@base-ui/react/tabs";
|
|
2
|
+
import { type ComponentPropsWithoutRef, type ReactNode } from "react";
|
|
3
|
+
import type { ClassNames } from "../../utils/kb";
|
|
4
|
+
export type TabsOrientation = "horizontal" | "vertical";
|
|
5
|
+
export type TabsVariant = "line" | "pill";
|
|
6
|
+
export type TabsSize = "sm" | "md";
|
|
7
|
+
export type TabsClassKey = "root" | "list" | "tab" | "tabIcon" | "tabLabel" | "tabBadge" | "indicator" | "panel";
|
|
8
|
+
export interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof BaseTabs.Root>, "className" | "orientation" | "value" | "defaultValue" | "onValueChange"> {
|
|
9
|
+
/** Controlled active tab value. */
|
|
10
|
+
value?: string | number | null | undefined;
|
|
11
|
+
/** Initial active tab value when uncontrolled. */
|
|
12
|
+
defaultValue?: string | number | null | undefined;
|
|
13
|
+
/** Called when the active tab value changes. */
|
|
14
|
+
onValueChange?: ((value: string | number | null, eventDetails: BaseTabs.Root.ChangeEventDetails) => void) | undefined;
|
|
15
|
+
/** Layout axis for the tab list and panels. */
|
|
16
|
+
orientation?: TabsOrientation | undefined;
|
|
17
|
+
/** Visual treatment of the tab list and active indicator. */
|
|
18
|
+
variant?: TabsVariant | undefined;
|
|
19
|
+
/** Control density for tab triggers. */
|
|
20
|
+
size?: TabsSize | undefined;
|
|
21
|
+
/** Additional root class name. */
|
|
22
|
+
className?: string | undefined;
|
|
23
|
+
/** Custom class names for inner anatomy slots. */
|
|
24
|
+
classNames?: ClassNames<TabsClassKey> | undefined;
|
|
25
|
+
}
|
|
26
|
+
export interface TabsListProps extends Omit<ComponentPropsWithoutRef<typeof BaseTabs.List>, "className"> {
|
|
27
|
+
/** Move selection automatically when focus moves between tabs. */
|
|
28
|
+
activateOnFocus?: boolean | undefined;
|
|
29
|
+
/** Wrap arrow-key focus from the last tab back to the first. */
|
|
30
|
+
loopFocus?: boolean | undefined;
|
|
31
|
+
/** Render the sliding active indicator inside the list. */
|
|
32
|
+
showIndicator?: boolean | undefined;
|
|
33
|
+
/** Additional tablist class name. */
|
|
34
|
+
className?: string | undefined;
|
|
35
|
+
}
|
|
36
|
+
export interface TabsTabProps extends Omit<ComponentPropsWithoutRef<typeof BaseTabs.Tab>, "className" | "value"> {
|
|
37
|
+
/** Unique value matching the associated panel. */
|
|
38
|
+
value: string | number;
|
|
39
|
+
/** Prevent selecting or activating the tab. */
|
|
40
|
+
disabled?: boolean | undefined;
|
|
41
|
+
/** Optional leading icon rendered inside the tab trigger. */
|
|
42
|
+
icon?: ReactNode | undefined;
|
|
43
|
+
/** Optional trailing count or status badge. */
|
|
44
|
+
badge?: ReactNode | undefined;
|
|
45
|
+
/** Additional tab button class name. */
|
|
46
|
+
className?: string | undefined;
|
|
47
|
+
}
|
|
48
|
+
export interface TabsIndicatorProps extends Omit<ComponentPropsWithoutRef<typeof BaseTabs.Indicator>, "className"> {
|
|
49
|
+
/** Additional indicator class name. */
|
|
50
|
+
className?: string | undefined;
|
|
51
|
+
}
|
|
52
|
+
export interface TabsPanelProps extends Omit<ComponentPropsWithoutRef<typeof BaseTabs.Panel>, "className" | "value"> {
|
|
53
|
+
/** Tab value that reveals this panel when active. */
|
|
54
|
+
value: string | number;
|
|
55
|
+
/** Keep inactive panel DOM mounted when hidden. */
|
|
56
|
+
keepMounted?: boolean | undefined;
|
|
57
|
+
/** Additional panel class name. */
|
|
58
|
+
className?: string | undefined;
|
|
59
|
+
}
|
|
60
|
+
export declare const TabsIndicator: import("react").ForwardRefExoticComponent<TabsIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
61
|
+
export declare const TabsList: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
62
|
+
export declare const TabsTab: import("react").ForwardRefExoticComponent<TabsTabProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
63
|
+
export declare const TabsPanel: import("react").ForwardRefExoticComponent<TabsPanelProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
64
|
+
export declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>> & {
|
|
65
|
+
List: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
66
|
+
Tab: import("react").ForwardRefExoticComponent<TabsTabProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
67
|
+
Indicator: import("react").ForwardRefExoticComponent<TabsIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
68
|
+
Panel: import("react").ForwardRefExoticComponent<TabsPanelProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
69
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Tabs, type TabsClassKey, TabsIndicator, type TabsIndicatorProps, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsVariant, } from "./Tabs";
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type ComponentProps, type ReactNode } from "react";
|
|
2
|
+
import { type ClassNames } from "../../utils/kb";
|
|
3
|
+
import { type ImageProps } from "../Image/Image";
|
|
4
|
+
export type ThumbnailProps = Omit<ComponentProps<"figure">, "children"> & Pick<ImageProps, "src" | "alt" | "ratio" | "fit" | "position" | "fallback"> & {
|
|
5
|
+
/** Visible title; may contain a native link or button. */
|
|
6
|
+
caption?: ReactNode | undefined;
|
|
7
|
+
/** Supporting metadata; remains visible when media fails. */
|
|
8
|
+
description?: ReactNode | undefined;
|
|
9
|
+
/** Native source/loading attributes and Image styling hooks. */
|
|
10
|
+
imageProps?: Omit<ImageProps, "src" | "alt" | "ratio" | "fit" | "position" | "fallback"> | undefined;
|
|
11
|
+
/** Extra classes for figure, media, caption, title and description. */
|
|
12
|
+
classNames?: ClassNames<"root" | "media" | "caption" | "title" | "description"> | undefined;
|
|
13
|
+
};
|
|
14
|
+
export declare function Thumbnail({ src, alt, ratio, fit, position, fallback, caption, description, imageProps, className, classNames, ...props }: ThumbnailProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { Toast as Base, type ToastManagerAddOptions as BaseAddOptions, type ToastManagerPromiseOptions as BasePromiseOptions, type ToastManager as BaseToastManager, type ToastObject as BaseToastObject, type ToastManagerUpdateOptions as BaseUpdateOptions, type UseToastManagerReturnValue } from "@base-ui/react/toast";
|
|
2
|
+
import type { ReactNode } from "react";
|
|
3
|
+
import { type ClassNames } from "../../utils/kb";
|
|
4
|
+
export type ToastTone = "neutral" | "info" | "success" | "warning" | "danger";
|
|
5
|
+
export type ToastPlacement = "top-start" | "top-end" | "bottom-start" | "bottom-end" | "inline";
|
|
6
|
+
export type ToastObject<Data extends object = Record<string, unknown>> = BaseToastObject<Data>;
|
|
7
|
+
export type ToastManager<Data extends object = Record<string, unknown>> = BaseToastManager<Data>;
|
|
8
|
+
export type ToastAddOptions<Data extends object = Record<string, unknown>> = BaseAddOptions<Data>;
|
|
9
|
+
export type ToastUpdateOptions<Data extends object = Record<string, unknown>> = BaseUpdateOptions<Data>;
|
|
10
|
+
export type ToastPromiseOptions<Value, Data extends object = Record<string, unknown>> = BasePromiseOptions<Value, Data>;
|
|
11
|
+
export type ToastProviderProps = Base.Provider.Props;
|
|
12
|
+
export type ToastContentProps = Omit<Base.Content.Props, "className"> & {
|
|
13
|
+
/** Extra classes for content. */
|
|
14
|
+
className?: string | undefined;
|
|
15
|
+
};
|
|
16
|
+
export type ToastTitleProps = Omit<Base.Title.Props, "className"> & {
|
|
17
|
+
/** Extra classes for title. */
|
|
18
|
+
className?: string | undefined;
|
|
19
|
+
};
|
|
20
|
+
export type ToastDescriptionProps = Omit<Base.Description.Props, "className"> & {
|
|
21
|
+
/** Extra classes for description. */
|
|
22
|
+
className?: string | undefined;
|
|
23
|
+
};
|
|
24
|
+
export type ToastActionProps = Omit<Base.Action.Props, "className"> & {
|
|
25
|
+
/** Extra classes for action. */
|
|
26
|
+
className?: string | undefined;
|
|
27
|
+
};
|
|
28
|
+
export type ToastCloseProps = Omit<Base.Close.Props, "className"> & {
|
|
29
|
+
/** Extra classes for dismissal control. */
|
|
30
|
+
className?: string | undefined;
|
|
31
|
+
};
|
|
32
|
+
export type ToastProps<Data extends object = Record<string, unknown>> = Omit<Base.Root.Props, "className" | "toast"> & {
|
|
33
|
+
/** Message object from the matching provider. */
|
|
34
|
+
toast: ToastObject<Data>;
|
|
35
|
+
/** Extra classes for root. */
|
|
36
|
+
className?: string | undefined;
|
|
37
|
+
/** Visual emphasis; defaults to matching toast.type, with error mapped to danger. */
|
|
38
|
+
tone?: ToastTone | undefined;
|
|
39
|
+
/** Localized accessible name for default dismissal control. */
|
|
40
|
+
closeLabel?: string | undefined;
|
|
41
|
+
/** Classes for default parts; custom children own their part classes. */
|
|
42
|
+
classNames?: ClassNames<"content" | "title" | "description" | "action" | "close"> | undefined;
|
|
43
|
+
};
|
|
44
|
+
export type ToastViewportProps<Data extends object = Record<string, unknown>> = Omit<Base.Viewport.Props, "className"> & {
|
|
45
|
+
/** Extra classes for viewport. */
|
|
46
|
+
className?: string | undefined;
|
|
47
|
+
/** Logical screen corner; inline participates in surrounding layout without a portal. */
|
|
48
|
+
placement?: ToastPlacement | undefined;
|
|
49
|
+
/** Theme-scoped portal host; defaults to document.body for fixed placements. */
|
|
50
|
+
container?: Base.Portal.Props["container"];
|
|
51
|
+
/** Custom renderer for each message; defaults to a complete Toast with all parts. */
|
|
52
|
+
renderToast?: ((toast: ToastObject<Data>) => ReactNode) | undefined;
|
|
53
|
+
};
|
|
54
|
+
export declare function createToastManager<Data extends object = Record<string, unknown>>(): ToastManager<Data>;
|
|
55
|
+
export declare function useToastManager<Data extends object = Record<string, unknown>>(): UseToastManagerReturnValue<Data>;
|
|
56
|
+
declare function ToastContent({ className, ...props }: ToastContentProps): import("react").JSX.Element;
|
|
57
|
+
declare function ToastTitle({ className, ...props }: ToastTitleProps): import("react").JSX.Element;
|
|
58
|
+
declare function ToastDescription({ className, ...props }: ToastDescriptionProps): import("react").JSX.Element;
|
|
59
|
+
declare function ToastAction({ className, ...props }: ToastActionProps): import("react").JSX.Element;
|
|
60
|
+
declare function ToastClose({ className, ...props }: ToastCloseProps): import("react").JSX.Element;
|
|
61
|
+
declare function ToastRoot<Data extends object = Record<string, unknown>>({ toast, tone, closeLabel, classNames, className, children, ...props }: ToastProps<Data>): import("react").JSX.Element;
|
|
62
|
+
declare function ToastViewport<Data extends object = Record<string, unknown>>({ placement, container, renderToast, className, children, ...props }: ToastViewportProps<Data>): import("react").JSX.Element;
|
|
63
|
+
export declare const Toast: typeof ToastRoot & {
|
|
64
|
+
Provider: import("react").FC<import("@base-ui/react").ToastProviderProps>;
|
|
65
|
+
Viewport: typeof ToastViewport;
|
|
66
|
+
Content: typeof ToastContent;
|
|
67
|
+
Title: typeof ToastTitle;
|
|
68
|
+
Description: typeof ToastDescription;
|
|
69
|
+
Action: typeof ToastAction;
|
|
70
|
+
Close: typeof ToastClose;
|
|
71
|
+
};
|
|
72
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -1,37 +1,62 @@
|
|
|
1
|
+
export type { AccordionHeaderProps, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, } from "./components/Accordion/Accordion";
|
|
2
|
+
export { Accordion } from "./components/Accordion/Accordion";
|
|
3
|
+
export { Avatar, type AvatarProps, type AvatarShape } from "./components/Avatar/Avatar";
|
|
1
4
|
export { Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, } from "./components/Badge/Badge";
|
|
2
5
|
export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from "./components/Button/Button";
|
|
3
6
|
export { Callout, type CalloutProps, type CalloutTone } from "./components/Callout/Callout";
|
|
4
7
|
export { Card, type CardProps } from "./components/Card/Card";
|
|
5
8
|
export { Checkbox, type CheckboxProps } from "./components/Checkbox/Checkbox";
|
|
6
|
-
export { Code, type CodeProps } from "./components/Code/Code";
|
|
7
|
-
export {
|
|
9
|
+
export { Code, type CodeLanguage, type CodePart, type CodeProps, type CodeSyntaxKind, type CodeToken, tokenizeCode, } from "./components/Code/Code";
|
|
10
|
+
export { CodeBlock, type CodeBlockProps } from "./components/CodeBlock/CodeBlock";
|
|
11
|
+
export type { CollectionBulkAction, CollectionBulkActionsProps, CollectionColumn, CollectionFilter, CollectionPaginationProps, CollectionProps, } from "./components/Collection/Collection";
|
|
12
|
+
export { Collection } from "./components/Collection/Collection";
|
|
13
|
+
export type { CollectionController, CollectionData, CollectionSort, CollectionState, UseCollectionOptions, } from "./components/Collection/useCollection";
|
|
14
|
+
export { useCollection } from "./components/Collection/useCollection";
|
|
15
|
+
export { CollectionList, type CollectionListElement, type CollectionListProps, } from "./components/CollectionList/CollectionList";
|
|
16
|
+
export { CollectionRow, type CollectionRowProps } from "./components/CollectionRow/CollectionRow";
|
|
17
|
+
export { Combobox, type ComboboxMultipleProps, type ComboboxOption, type ComboboxProps, type ComboboxSingleProps, type ComboboxSlot, } from "./components/Combobox/Combobox";
|
|
8
18
|
export { Container, type ContainerElement, type ContainerProps, type ContainerSize, } from "./components/Container/Container";
|
|
19
|
+
export { CopyableText, type CopyableTextFormat, type CopyableTextPart, type CopyableTextProps, type CopyableTextTone, } from "./components/CopyableText/CopyableText";
|
|
20
|
+
export { DescriptionList, type DescriptionListDetailProps, type DescriptionListItemProps, type DescriptionListProps, type DescriptionListTermProps, } from "./components/DescriptionList/DescriptionList";
|
|
9
21
|
export { Dialog, type DialogActionsProps, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogProps, type DialogSectionProps, type DialogTitleProps, type DialogTriggerProps, } from "./components/Dialog/Dialog";
|
|
22
|
+
export type { DisclosurePanelProps, DisclosureProps, DisclosureTriggerProps, } from "./components/Disclosure/Disclosure";
|
|
23
|
+
export { Disclosure } from "./components/Disclosure/Disclosure";
|
|
24
|
+
export { EmptyState, type EmptyStateHeadingLevel, type EmptyStateProps, type EmptyStateSize, type EmptyStateTone, type EmptyStateVariant, } from "./components/EmptyState/EmptyState";
|
|
10
25
|
export { ErrorSummary, type ErrorSummaryHeadingLevel, type ErrorSummaryItem, type ErrorSummaryPart, type ErrorSummaryProps, } from "./components/ErrorSummary/ErrorSummary";
|
|
11
26
|
export { Fieldset, type FieldsetPart, type FieldsetProps, } from "./components/Fieldset/Fieldset";
|
|
12
27
|
export { FileInput, type FileInputItem, type FileInputProps, } from "./components/FileInput/FileInput";
|
|
13
28
|
export { FormActions, type FormActionsAlign, type FormActionsProps, } from "./components/FormActions/FormActions";
|
|
14
|
-
export { Grid, type GridProps } from "./components/Grid/Grid";
|
|
29
|
+
export { Grid, type GridColumns, type GridElement, type GridLayout, type GridMinItemWidth, type GridProps, } from "./components/Grid/Grid";
|
|
15
30
|
export { Heading, type HeadingLevel, type HeadingProps, type HeadingSize, } from "./components/Heading/Heading";
|
|
31
|
+
export { Image, type ImageProps, type ImageRatio } from "./components/Image/Image";
|
|
16
32
|
export { Inline, type InlineElement, type InlineJustify, type InlineProps, } from "./components/Inline/Inline";
|
|
17
33
|
export { Input, type InputProps, type InputSize } from "./components/Input/Input";
|
|
18
|
-
export { Link, type LinkProps } from "./components/Link/Link";
|
|
34
|
+
export { Link, type LinkComponent, type LinkProps, type LinkProviderProps, useLinkComponent, } from "./components/Link/Link";
|
|
19
35
|
export { Menu, type MenuContentProps, type MenuItemProps, type MenuProps, type MenuSeparatorProps, type MenuTriggerProps, } from "./components/Menu/Menu";
|
|
20
36
|
export { MultiSelect, type MultiSelectOption, type MultiSelectProps, type MultiSelectSlot, } from "./components/MultiSelect/MultiSelect";
|
|
21
37
|
export { NumberField, type NumberFieldProps, type NumberFieldSize, } from "./components/NumberField/NumberField";
|
|
22
38
|
export { Panel, type PanelBodyProps, type PanelDensity, type PanelFooterProps, type PanelGroupDirection, type PanelGroupProps, type PanelHandleProps, type PanelHeaderProps, type PanelProps, type PanelRail, type PanelToggleProps, type PanelTone, type PanelToolbarProps, type PanelWellProps, } from "./components/Panel/Panel";
|
|
39
|
+
export type { PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverSectionProps, PopoverTitleProps, PopoverTriggerProps, } from "./components/Popover/Popover";
|
|
40
|
+
export { Popover } from "./components/Popover/Popover";
|
|
23
41
|
export { Progress, type ProgressProps } from "./components/Progress/Progress";
|
|
24
42
|
export { RadioGroup, type RadioGroupItemProps, type RadioGroupProps, } from "./components/RadioGroup/RadioGroup";
|
|
25
43
|
export { ScrollArea, type ScrollAreaProps } from "./components/ScrollArea/ScrollArea";
|
|
26
44
|
export { Select, type SelectOption, type SelectProps } from "./components/Select/Select";
|
|
27
45
|
export { Separator, type SeparatorOrientation, type SeparatorProps, } from "./components/Separator/Separator";
|
|
46
|
+
export { Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonSize, type SkeletonTone, type SkeletonVariant, } from "./components/Skeleton/Skeleton";
|
|
47
|
+
export { Spinner, type SpinnerAppearance, type SpinnerProps, type SpinnerSize, type SpinnerTone, type SpinnerVariant, } from "./components/Spinner/Spinner";
|
|
28
48
|
export { Split, type SplitCollapse, type SplitElement, type SplitProps, type SplitRatio, } from "./components/Split/Split";
|
|
29
49
|
export { Stat, type StatProps, type StatSize } from "./components/Stat/Stat";
|
|
30
50
|
export { Status, type StatusAppearance, type StatusProps, type StatusTone, } from "./components/Status/Status";
|
|
31
51
|
export { Switch, type SwitchProps, type SwitchSize, type SwitchTone, } from "./components/Switch/Switch";
|
|
52
|
+
export { Table, type TableBodyProps, type TableCaptionProps, type TableCellOptions, type TableCellProps, type TableColumnHeaderProps, type TableFootProps, type TableHeadProps, type TableProps, type TableRowActionsProps, type TableRowHeaderProps, type TableRowProps, type TableScrollContainerProps, type TableSelectionCheckboxProps, type TableSortDirection, } from "./components/Table/Table";
|
|
53
|
+
export { Tabs, type TabsClassKey, type TabsIndicatorProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTabProps, type TabsVariant, } from "./components/Tabs/Tabs";
|
|
32
54
|
export { Text, type TextElement, type TextProps, type TextSize, type TextTone, } from "./components/Text/Text";
|
|
33
55
|
export { Textarea, type TextareaPart, type TextareaProps, type TextareaResize, } from "./components/Textarea/Textarea";
|
|
56
|
+
export { Thumbnail, type ThumbnailProps } from "./components/Thumbnail/Thumbnail";
|
|
57
|
+
export { createToastManager, Toast, type ToastActionProps, type ToastAddOptions, type ToastCloseProps, type ToastContentProps, type ToastDescriptionProps, type ToastManager, type ToastObject, type ToastPlacement, type ToastPromiseOptions, type ToastProps, type ToastProviderProps, type ToastTitleProps, type ToastTone, type ToastUpdateOptions, type ToastViewportProps, useToastManager, } from "./components/Toast/Toast";
|
|
34
58
|
export { Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarProps, type ToolbarSeparatorProps, } from "./components/Toolbar/Toolbar";
|
|
35
59
|
export { Tooltip, type TooltipProps } from "./components/Tooltip/Tooltip";
|
|
36
60
|
export { type ClassNames, kb } from "./utils/kb";
|
|
37
61
|
export type { LayoutAlign, LayoutGap } from "./utils/layout";
|
|
62
|
+
export type { CopyFeedbackProps, CopyState } from "./utils/useClipboard";
|