@bubble-design-system/ui 1.0.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +354 -302
- package/dist/index.cjs +910 -181
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +95 -9
- package/dist/index.d.ts +95 -9
- package/dist/index.js +908 -183
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1483 -498
- package/dist/tokens.css +472 -382
- package/package.json +9 -8
package/dist/index.d.cts
CHANGED
|
@@ -19,6 +19,7 @@ import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
|
|
|
19
19
|
import { Menu } from '@base-ui/react/menu';
|
|
20
20
|
import { Toggle } from '@base-ui/react/toggle';
|
|
21
21
|
import { ToggleGroup } from '@base-ui/react/toggle-group';
|
|
22
|
+
import { Popover as Popover$1 } from '@base-ui/react/popover';
|
|
22
23
|
|
|
23
24
|
/**
|
|
24
25
|
* Conditionally joins CSS class names.
|
|
@@ -78,7 +79,7 @@ declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAtt
|
|
|
78
79
|
|
|
79
80
|
type SelectSize = "sm" | "md" | "lg";
|
|
80
81
|
type BaseTriggerProps = ComponentPropsWithoutRef<typeof Select$1.Trigger>;
|
|
81
|
-
type BasePopupProps$
|
|
82
|
+
type BasePopupProps$3 = ComponentPropsWithoutRef<typeof Select$1.Popup>;
|
|
82
83
|
type BaseItemProps = ComponentPropsWithoutRef<typeof Select$1.Item>;
|
|
83
84
|
type BaseValueProps = ComponentPropsWithoutRef<typeof Select$1.Value>;
|
|
84
85
|
interface SelectTriggerProps extends Omit<BaseTriggerProps, "className" | "render"> {
|
|
@@ -89,7 +90,7 @@ interface SelectValueProps extends Omit<BaseValueProps, "className"> {
|
|
|
89
90
|
placeholder?: ReactNode;
|
|
90
91
|
className?: string;
|
|
91
92
|
}
|
|
92
|
-
interface SelectContentProps extends Omit<BasePopupProps$
|
|
93
|
+
interface SelectContentProps extends Omit<BasePopupProps$3, "className" | "render"> {
|
|
93
94
|
className?: string;
|
|
94
95
|
sideOffset?: number;
|
|
95
96
|
}
|
|
@@ -137,14 +138,14 @@ interface DividerProps extends Omit<BaseSeparatorProps, "className" | "render">
|
|
|
137
138
|
}
|
|
138
139
|
declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
|
|
139
140
|
|
|
140
|
-
type BasePopupProps$
|
|
141
|
-
type BaseTitleProps = ComponentPropsWithoutRef<typeof Dialog.Title>;
|
|
141
|
+
type BasePopupProps$2 = ComponentPropsWithoutRef<typeof Dialog.Popup>;
|
|
142
|
+
type BaseTitleProps$1 = ComponentPropsWithoutRef<typeof Dialog.Title>;
|
|
142
143
|
type BaseDescProps = ComponentPropsWithoutRef<typeof Dialog.Description>;
|
|
143
|
-
interface ModalContentProps extends Omit<BasePopupProps$
|
|
144
|
+
interface ModalContentProps extends Omit<BasePopupProps$2, "className" | "render"> {
|
|
144
145
|
className?: string;
|
|
145
146
|
backdropClassName?: string;
|
|
146
147
|
}
|
|
147
|
-
interface ModalTitleProps extends Omit<BaseTitleProps, "className" | "render"> {
|
|
148
|
+
interface ModalTitleProps extends Omit<BaseTitleProps$1, "className" | "render"> {
|
|
148
149
|
className?: string;
|
|
149
150
|
}
|
|
150
151
|
interface ModalDescriptionProps extends Omit<BaseDescProps, "className" | "render"> {
|
|
@@ -175,8 +176,8 @@ declare const Toast: {
|
|
|
175
176
|
};
|
|
176
177
|
};
|
|
177
178
|
|
|
178
|
-
type BasePopupProps = ComponentPropsWithoutRef<typeof Tooltip$1.Popup>;
|
|
179
|
-
interface TooltipContentProps extends Omit<BasePopupProps, "className" | "render"> {
|
|
179
|
+
type BasePopupProps$1 = ComponentPropsWithoutRef<typeof Tooltip$1.Popup>;
|
|
180
|
+
interface TooltipContentProps extends Omit<BasePopupProps$1, "className" | "render"> {
|
|
180
181
|
className?: string;
|
|
181
182
|
sideOffset?: number;
|
|
182
183
|
side?: "top" | "bottom" | "left" | "right";
|
|
@@ -352,4 +353,89 @@ declare const Grid: react.ForwardRefExoticComponent<GridRootProps & react.RefAtt
|
|
|
352
353
|
Col: react.ForwardRefExoticComponent<GridColProps & react.RefAttributes<HTMLDivElement>>;
|
|
353
354
|
};
|
|
354
355
|
|
|
355
|
-
|
|
356
|
+
type BasePopupProps = ComponentPropsWithoutRef<typeof Popover$1.Popup>;
|
|
357
|
+
type BaseTitleProps = ComponentPropsWithoutRef<typeof Popover$1.Title>;
|
|
358
|
+
type BaseDescriptionProps = ComponentPropsWithoutRef<typeof Popover$1.Description>;
|
|
359
|
+
interface PopoverContentProps extends Omit<BasePopupProps, "className" | "render"> {
|
|
360
|
+
className?: string;
|
|
361
|
+
side?: "top" | "right" | "bottom" | "left";
|
|
362
|
+
align?: "start" | "center" | "end";
|
|
363
|
+
sideOffset?: number;
|
|
364
|
+
showArrow?: boolean;
|
|
365
|
+
}
|
|
366
|
+
interface PopoverTitleProps extends Omit<BaseTitleProps, "className" | "render"> {
|
|
367
|
+
className?: string;
|
|
368
|
+
}
|
|
369
|
+
interface PopoverDescriptionProps extends Omit<BaseDescriptionProps, "className" | "render"> {
|
|
370
|
+
className?: string;
|
|
371
|
+
}
|
|
372
|
+
interface PopoverHeaderProps extends ComponentPropsWithoutRef<"div"> {
|
|
373
|
+
}
|
|
374
|
+
interface PopoverBodyProps extends ComponentPropsWithoutRef<"div"> {
|
|
375
|
+
}
|
|
376
|
+
interface PopoverFooterProps extends ComponentPropsWithoutRef<"div"> {
|
|
377
|
+
}
|
|
378
|
+
declare const Popover: {
|
|
379
|
+
Root: typeof Popover$1.Root;
|
|
380
|
+
Trigger: Popover$1.Trigger;
|
|
381
|
+
Content: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLDivElement>>;
|
|
382
|
+
Title: react.ForwardRefExoticComponent<PopoverTitleProps & react.RefAttributes<HTMLHeadingElement>>;
|
|
383
|
+
Description: react.ForwardRefExoticComponent<PopoverDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
|
|
384
|
+
Close: react.ForwardRefExoticComponent<Omit<_base_ui_react.PopoverCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
385
|
+
Header: react.ForwardRefExoticComponent<PopoverHeaderProps & react.RefAttributes<HTMLDivElement>>;
|
|
386
|
+
Body: react.ForwardRefExoticComponent<PopoverBodyProps & react.RefAttributes<HTMLDivElement>>;
|
|
387
|
+
Footer: react.ForwardRefExoticComponent<PopoverFooterProps & react.RefAttributes<HTMLDivElement>>;
|
|
388
|
+
};
|
|
389
|
+
|
|
390
|
+
interface DataTableColumn<T> {
|
|
391
|
+
key: string;
|
|
392
|
+
label: string;
|
|
393
|
+
sortable?: boolean;
|
|
394
|
+
render?: (value: unknown, row: T) => ReactNode;
|
|
395
|
+
width?: string;
|
|
396
|
+
muted?: boolean;
|
|
397
|
+
mono?: boolean;
|
|
398
|
+
}
|
|
399
|
+
interface DataTableProps<T extends {
|
|
400
|
+
id: string | number;
|
|
401
|
+
}> {
|
|
402
|
+
columns: DataTableColumn<T>[];
|
|
403
|
+
data: T[];
|
|
404
|
+
selectable?: boolean;
|
|
405
|
+
searchable?: boolean;
|
|
406
|
+
pageSize?: number;
|
|
407
|
+
actions?: ReactNode;
|
|
408
|
+
className?: string;
|
|
409
|
+
}
|
|
410
|
+
declare function DataTable<T extends {
|
|
411
|
+
id: string | number;
|
|
412
|
+
}>({ columns, data, selectable, searchable, pageSize, actions, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
413
|
+
|
|
414
|
+
interface CommandPaletteItem {
|
|
415
|
+
id: string;
|
|
416
|
+
label: string;
|
|
417
|
+
description?: string;
|
|
418
|
+
icon?: ReactNode;
|
|
419
|
+
shortcut?: string;
|
|
420
|
+
onSelect?: () => void;
|
|
421
|
+
keywords?: string[];
|
|
422
|
+
}
|
|
423
|
+
interface CommandPaletteGroup {
|
|
424
|
+
label?: string;
|
|
425
|
+
items: CommandPaletteItem[];
|
|
426
|
+
}
|
|
427
|
+
interface CommandPaletteProps {
|
|
428
|
+
open: boolean;
|
|
429
|
+
onOpenChange: (open: boolean) => void;
|
|
430
|
+
groups?: CommandPaletteGroup[];
|
|
431
|
+
placeholder?: string;
|
|
432
|
+
onSelect?: (item: CommandPaletteItem) => void;
|
|
433
|
+
className?: string;
|
|
434
|
+
}
|
|
435
|
+
declare function useCommandPalette(): {
|
|
436
|
+
open: boolean;
|
|
437
|
+
setOpen: react.Dispatch<react.SetStateAction<boolean>>;
|
|
438
|
+
};
|
|
439
|
+
declare function CommandPalette({ open, onOpenChange, groups, placeholder, onSelect, className, }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
|
|
440
|
+
|
|
441
|
+
export { Alert, type AlertProps, Avatar, type AvatarFallbackProps, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardActionProps, type CardBodyProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardProps, type CardTitleProps, Checkbox, type CheckboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, Container, type ContainerProps, DataTable, type DataTableColumn, type DataTableProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRadioItemProps, type DropdownMenuSeparatorProps, Grid, type GridColProps, type GridRootProps, Input, type InputProps, Modal, type ModalContentProps, type ModalDescriptionProps, type ModalTitleProps, Popover, type PopoverBodyProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverFooterProps, type PopoverHeaderProps, type PopoverTitleProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Segmented, type SegmentedItemProps, type SegmentedProps, Select, type SelectContentProps, type SelectItemProps, type SelectTriggerProps, type SelectValueProps, Skeleton, type SkeletonProps, StatusPill, type StatusPillIndicatorProps, type StatusPillLabelProps, type StatusPillProps, Switch, type SwitchProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, Textarea, type TextareaProps, Toast, Tooltip, type TooltipContentProps, cn, useCommandPalette, useToastManager as useToast };
|
package/dist/index.d.ts
CHANGED
|
@@ -19,6 +19,7 @@ import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
|
|
|
19
19
|
import { Menu } from '@base-ui/react/menu';
|
|
20
20
|
import { Toggle } from '@base-ui/react/toggle';
|
|
21
21
|
import { ToggleGroup } from '@base-ui/react/toggle-group';
|
|
22
|
+
import { Popover as Popover$1 } from '@base-ui/react/popover';
|
|
22
23
|
|
|
23
24
|
/**
|
|
24
25
|
* Conditionally joins CSS class names.
|
|
@@ -78,7 +79,7 @@ declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAtt
|
|
|
78
79
|
|
|
79
80
|
type SelectSize = "sm" | "md" | "lg";
|
|
80
81
|
type BaseTriggerProps = ComponentPropsWithoutRef<typeof Select$1.Trigger>;
|
|
81
|
-
type BasePopupProps$
|
|
82
|
+
type BasePopupProps$3 = ComponentPropsWithoutRef<typeof Select$1.Popup>;
|
|
82
83
|
type BaseItemProps = ComponentPropsWithoutRef<typeof Select$1.Item>;
|
|
83
84
|
type BaseValueProps = ComponentPropsWithoutRef<typeof Select$1.Value>;
|
|
84
85
|
interface SelectTriggerProps extends Omit<BaseTriggerProps, "className" | "render"> {
|
|
@@ -89,7 +90,7 @@ interface SelectValueProps extends Omit<BaseValueProps, "className"> {
|
|
|
89
90
|
placeholder?: ReactNode;
|
|
90
91
|
className?: string;
|
|
91
92
|
}
|
|
92
|
-
interface SelectContentProps extends Omit<BasePopupProps$
|
|
93
|
+
interface SelectContentProps extends Omit<BasePopupProps$3, "className" | "render"> {
|
|
93
94
|
className?: string;
|
|
94
95
|
sideOffset?: number;
|
|
95
96
|
}
|
|
@@ -137,14 +138,14 @@ interface DividerProps extends Omit<BaseSeparatorProps, "className" | "render">
|
|
|
137
138
|
}
|
|
138
139
|
declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
|
|
139
140
|
|
|
140
|
-
type BasePopupProps$
|
|
141
|
-
type BaseTitleProps = ComponentPropsWithoutRef<typeof Dialog.Title>;
|
|
141
|
+
type BasePopupProps$2 = ComponentPropsWithoutRef<typeof Dialog.Popup>;
|
|
142
|
+
type BaseTitleProps$1 = ComponentPropsWithoutRef<typeof Dialog.Title>;
|
|
142
143
|
type BaseDescProps = ComponentPropsWithoutRef<typeof Dialog.Description>;
|
|
143
|
-
interface ModalContentProps extends Omit<BasePopupProps$
|
|
144
|
+
interface ModalContentProps extends Omit<BasePopupProps$2, "className" | "render"> {
|
|
144
145
|
className?: string;
|
|
145
146
|
backdropClassName?: string;
|
|
146
147
|
}
|
|
147
|
-
interface ModalTitleProps extends Omit<BaseTitleProps, "className" | "render"> {
|
|
148
|
+
interface ModalTitleProps extends Omit<BaseTitleProps$1, "className" | "render"> {
|
|
148
149
|
className?: string;
|
|
149
150
|
}
|
|
150
151
|
interface ModalDescriptionProps extends Omit<BaseDescProps, "className" | "render"> {
|
|
@@ -175,8 +176,8 @@ declare const Toast: {
|
|
|
175
176
|
};
|
|
176
177
|
};
|
|
177
178
|
|
|
178
|
-
type BasePopupProps = ComponentPropsWithoutRef<typeof Tooltip$1.Popup>;
|
|
179
|
-
interface TooltipContentProps extends Omit<BasePopupProps, "className" | "render"> {
|
|
179
|
+
type BasePopupProps$1 = ComponentPropsWithoutRef<typeof Tooltip$1.Popup>;
|
|
180
|
+
interface TooltipContentProps extends Omit<BasePopupProps$1, "className" | "render"> {
|
|
180
181
|
className?: string;
|
|
181
182
|
sideOffset?: number;
|
|
182
183
|
side?: "top" | "bottom" | "left" | "right";
|
|
@@ -352,4 +353,89 @@ declare const Grid: react.ForwardRefExoticComponent<GridRootProps & react.RefAtt
|
|
|
352
353
|
Col: react.ForwardRefExoticComponent<GridColProps & react.RefAttributes<HTMLDivElement>>;
|
|
353
354
|
};
|
|
354
355
|
|
|
355
|
-
|
|
356
|
+
type BasePopupProps = ComponentPropsWithoutRef<typeof Popover$1.Popup>;
|
|
357
|
+
type BaseTitleProps = ComponentPropsWithoutRef<typeof Popover$1.Title>;
|
|
358
|
+
type BaseDescriptionProps = ComponentPropsWithoutRef<typeof Popover$1.Description>;
|
|
359
|
+
interface PopoverContentProps extends Omit<BasePopupProps, "className" | "render"> {
|
|
360
|
+
className?: string;
|
|
361
|
+
side?: "top" | "right" | "bottom" | "left";
|
|
362
|
+
align?: "start" | "center" | "end";
|
|
363
|
+
sideOffset?: number;
|
|
364
|
+
showArrow?: boolean;
|
|
365
|
+
}
|
|
366
|
+
interface PopoverTitleProps extends Omit<BaseTitleProps, "className" | "render"> {
|
|
367
|
+
className?: string;
|
|
368
|
+
}
|
|
369
|
+
interface PopoverDescriptionProps extends Omit<BaseDescriptionProps, "className" | "render"> {
|
|
370
|
+
className?: string;
|
|
371
|
+
}
|
|
372
|
+
interface PopoverHeaderProps extends ComponentPropsWithoutRef<"div"> {
|
|
373
|
+
}
|
|
374
|
+
interface PopoverBodyProps extends ComponentPropsWithoutRef<"div"> {
|
|
375
|
+
}
|
|
376
|
+
interface PopoverFooterProps extends ComponentPropsWithoutRef<"div"> {
|
|
377
|
+
}
|
|
378
|
+
declare const Popover: {
|
|
379
|
+
Root: typeof Popover$1.Root;
|
|
380
|
+
Trigger: Popover$1.Trigger;
|
|
381
|
+
Content: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLDivElement>>;
|
|
382
|
+
Title: react.ForwardRefExoticComponent<PopoverTitleProps & react.RefAttributes<HTMLHeadingElement>>;
|
|
383
|
+
Description: react.ForwardRefExoticComponent<PopoverDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
|
|
384
|
+
Close: react.ForwardRefExoticComponent<Omit<_base_ui_react.PopoverCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
385
|
+
Header: react.ForwardRefExoticComponent<PopoverHeaderProps & react.RefAttributes<HTMLDivElement>>;
|
|
386
|
+
Body: react.ForwardRefExoticComponent<PopoverBodyProps & react.RefAttributes<HTMLDivElement>>;
|
|
387
|
+
Footer: react.ForwardRefExoticComponent<PopoverFooterProps & react.RefAttributes<HTMLDivElement>>;
|
|
388
|
+
};
|
|
389
|
+
|
|
390
|
+
interface DataTableColumn<T> {
|
|
391
|
+
key: string;
|
|
392
|
+
label: string;
|
|
393
|
+
sortable?: boolean;
|
|
394
|
+
render?: (value: unknown, row: T) => ReactNode;
|
|
395
|
+
width?: string;
|
|
396
|
+
muted?: boolean;
|
|
397
|
+
mono?: boolean;
|
|
398
|
+
}
|
|
399
|
+
interface DataTableProps<T extends {
|
|
400
|
+
id: string | number;
|
|
401
|
+
}> {
|
|
402
|
+
columns: DataTableColumn<T>[];
|
|
403
|
+
data: T[];
|
|
404
|
+
selectable?: boolean;
|
|
405
|
+
searchable?: boolean;
|
|
406
|
+
pageSize?: number;
|
|
407
|
+
actions?: ReactNode;
|
|
408
|
+
className?: string;
|
|
409
|
+
}
|
|
410
|
+
declare function DataTable<T extends {
|
|
411
|
+
id: string | number;
|
|
412
|
+
}>({ columns, data, selectable, searchable, pageSize, actions, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
413
|
+
|
|
414
|
+
interface CommandPaletteItem {
|
|
415
|
+
id: string;
|
|
416
|
+
label: string;
|
|
417
|
+
description?: string;
|
|
418
|
+
icon?: ReactNode;
|
|
419
|
+
shortcut?: string;
|
|
420
|
+
onSelect?: () => void;
|
|
421
|
+
keywords?: string[];
|
|
422
|
+
}
|
|
423
|
+
interface CommandPaletteGroup {
|
|
424
|
+
label?: string;
|
|
425
|
+
items: CommandPaletteItem[];
|
|
426
|
+
}
|
|
427
|
+
interface CommandPaletteProps {
|
|
428
|
+
open: boolean;
|
|
429
|
+
onOpenChange: (open: boolean) => void;
|
|
430
|
+
groups?: CommandPaletteGroup[];
|
|
431
|
+
placeholder?: string;
|
|
432
|
+
onSelect?: (item: CommandPaletteItem) => void;
|
|
433
|
+
className?: string;
|
|
434
|
+
}
|
|
435
|
+
declare function useCommandPalette(): {
|
|
436
|
+
open: boolean;
|
|
437
|
+
setOpen: react.Dispatch<react.SetStateAction<boolean>>;
|
|
438
|
+
};
|
|
439
|
+
declare function CommandPalette({ open, onOpenChange, groups, placeholder, onSelect, className, }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
|
|
440
|
+
|
|
441
|
+
export { Alert, type AlertProps, Avatar, type AvatarFallbackProps, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardActionProps, type CardBodyProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardProps, type CardTitleProps, Checkbox, type CheckboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, Container, type ContainerProps, DataTable, type DataTableColumn, type DataTableProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRadioItemProps, type DropdownMenuSeparatorProps, Grid, type GridColProps, type GridRootProps, Input, type InputProps, Modal, type ModalContentProps, type ModalDescriptionProps, type ModalTitleProps, Popover, type PopoverBodyProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverFooterProps, type PopoverHeaderProps, type PopoverTitleProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Segmented, type SegmentedItemProps, type SegmentedProps, Select, type SelectContentProps, type SelectItemProps, type SelectTriggerProps, type SelectValueProps, Skeleton, type SkeletonProps, StatusPill, type StatusPillIndicatorProps, type StatusPillLabelProps, type StatusPillProps, Switch, type SwitchProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, Textarea, type TextareaProps, Toast, Tooltip, type TooltipContentProps, cn, useCommandPalette, useToastManager as useToast };
|