@bienui/core 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +417 -0
- package/dist/bien-ui.cjs.js +31 -0
- package/dist/bien-ui.cjs.js.map +1 -0
- package/dist/bien-ui.esm.js +15571 -0
- package/dist/bien-ui.esm.js.map +1 -0
- package/dist/components/Display/Avatar.d.ts +19 -0
- package/dist/components/Display/Badge.d.ts +10 -0
- package/dist/components/Display/Card.d.ts +25 -0
- package/dist/components/Display/ColorSwatch.d.ts +8 -0
- package/dist/components/Display/List.d.ts +62 -0
- package/dist/components/Display/Meter.d.ts +59 -0
- package/dist/components/Display/ProfileAvatar.d.ts +16 -0
- package/dist/components/Display/Table.d.ts +66 -0
- package/dist/components/Display/Tags.d.ts +10 -0
- package/dist/components/Display/Text.d.ts +21 -0
- package/dist/components/Display/Timeline.d.ts +13 -0
- package/dist/components/Display/index.d.ts +11 -0
- package/dist/components/Feedback/Accordion.d.ts +40 -0
- package/dist/components/Feedback/AccordionItem.d.ts +10 -0
- package/dist/components/Feedback/Banner.d.ts +20 -0
- package/dist/components/Feedback/Callout.d.ts +22 -0
- package/dist/components/Feedback/EmptyState.d.ts +42 -0
- package/dist/components/Feedback/Loading.d.ts +16 -0
- package/dist/components/Feedback/Modal.d.ts +17 -0
- package/dist/components/Feedback/Stepper.d.ts +18 -0
- package/dist/components/Feedback/Tabs.d.ts +19 -0
- package/dist/components/Feedback/index.d.ts +8 -0
- package/dist/components/Forms/Checkbox.d.ts +7 -0
- package/dist/components/Forms/DatePicker.d.ts +17 -0
- package/dist/components/Forms/Input.d.ts +8 -0
- package/dist/components/Forms/MarkdownTextarea.d.ts +10 -0
- package/dist/components/Forms/MultiSelect.d.ts +21 -0
- package/dist/components/Forms/Radio.d.ts +12 -0
- package/dist/components/Forms/RadioGroup.d.ts +20 -0
- package/dist/components/Forms/Select.d.ts +13 -0
- package/dist/components/Forms/Slider.d.ts +7 -0
- package/dist/components/Forms/Switch.d.ts +6 -0
- package/dist/components/Forms/Textarea.d.ts +8 -0
- package/dist/components/Forms/index.d.ts +11 -0
- package/dist/components/Icons/icons.d.ts +30 -0
- package/dist/components/Icons/index.d.ts +1 -0
- package/dist/components/Interactive/Button.d.ts +11 -0
- package/dist/components/Interactive/DraggableList.d.ts +20 -0
- package/dist/components/Interactive/FileDrop.d.ts +18 -0
- package/dist/components/Interactive/Hotspot.d.ts +33 -0
- package/dist/components/Interactive/Menu.d.ts +50 -0
- package/dist/components/Interactive/Panel.d.ts +29 -0
- package/dist/components/Interactive/Tooltip.d.ts +10 -0
- package/dist/components/Interactive/index.d.ts +7 -0
- package/dist/components/Layout/Container.d.ts +9 -0
- package/dist/components/Layout/Divider.d.ts +11 -0
- package/dist/components/Layout/Grid.d.ts +13 -0
- package/dist/components/Layout/Section.d.ts +9 -0
- package/dist/components/Layout/Spacer.d.ts +6 -0
- package/dist/components/Layout/Stack.d.ts +13 -0
- package/dist/components/Layout/index.d.ts +6 -0
- package/dist/components/Navigation/Breadcrumb.d.ts +16 -0
- package/dist/components/Navigation/Header.d.ts +20 -0
- package/dist/components/Navigation/Link.d.ts +26 -0
- package/dist/components/Navigation/Sidenav.d.ts +18 -0
- package/dist/components/Navigation/index.d.ts +4 -0
- package/dist/components/Providers/BienProvider.d.ts +14 -0
- package/dist/components/Providers/ToastProvider.d.ts +16 -0
- package/dist/components/Providers/TooltipProvider.d.ts +2 -0
- package/dist/components/Providers/index.d.ts +3 -0
- package/dist/components/Utils/ThinkingText.d.ts +10 -0
- package/dist/components/Utils/Toast.d.ts +16 -0
- package/dist/components/Utils/index.d.ts +1 -0
- package/dist/index.d.ts +12 -0
- package/dist/types/index.d.ts +14 -0
- package/package.json +156 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface RadioOption {
|
|
3
|
+
value: string;
|
|
4
|
+
label: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export interface RadioGroupProps {
|
|
8
|
+
label?: string;
|
|
9
|
+
hint?: string;
|
|
10
|
+
options?: RadioOption[];
|
|
11
|
+
value?: string;
|
|
12
|
+
defaultValue?: string;
|
|
13
|
+
onValueChange?: (value: string) => void;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
required?: boolean;
|
|
16
|
+
name?: string;
|
|
17
|
+
orientation?: 'horizontal' | 'vertical';
|
|
18
|
+
children?: ReactNode;
|
|
19
|
+
}
|
|
20
|
+
export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export interface SelectOption {
|
|
2
|
+
value: string;
|
|
3
|
+
label: string;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
}
|
|
6
|
+
export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
|
|
7
|
+
label?: string;
|
|
8
|
+
error?: string;
|
|
9
|
+
hint?: string;
|
|
10
|
+
options: SelectOption[];
|
|
11
|
+
placeholder?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
2
|
+
label?: string;
|
|
3
|
+
hint?: string;
|
|
4
|
+
showValue?: boolean;
|
|
5
|
+
variant?: 'default' | 'gradient-teal' | 'gradient-purple' | 'gradient-accent';
|
|
6
|
+
}
|
|
7
|
+
export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
2
|
+
label?: string;
|
|
3
|
+
hint?: string;
|
|
4
|
+
variant?: 'default' | 'brand' | 'accent' | 'purple';
|
|
5
|
+
}
|
|
6
|
+
export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
2
|
+
label?: string;
|
|
3
|
+
error?: string;
|
|
4
|
+
hint?: string;
|
|
5
|
+
showCount?: boolean;
|
|
6
|
+
resize?: 'none' | 'vertical' | 'horizontal' | 'both';
|
|
7
|
+
}
|
|
8
|
+
export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export { Input } from './Input';
|
|
2
|
+
export { Textarea } from './Textarea';
|
|
3
|
+
export { MarkdownTextarea } from './MarkdownTextarea';
|
|
4
|
+
export { Select } from './Select';
|
|
5
|
+
export { MultiSelect } from './MultiSelect';
|
|
6
|
+
export { Checkbox } from './Checkbox';
|
|
7
|
+
export { Radio } from './Radio';
|
|
8
|
+
export { RadioGroup } from './RadioGroup';
|
|
9
|
+
export { Switch } from './Switch';
|
|
10
|
+
export { Slider } from './Slider';
|
|
11
|
+
export { DatePicker } from './DatePicker';
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
interface IconProps {
|
|
2
|
+
size?: number;
|
|
3
|
+
className?: string;
|
|
4
|
+
style?: React.CSSProperties;
|
|
5
|
+
}
|
|
6
|
+
export declare function PlusIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare function DownloadIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare function SendIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function HeartIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function SettingsIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function TrashIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare function SearchIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare function CheckIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare function ArrowRightIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare function SparklesIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare function BellIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare function ChevronLeftIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare function ChevronRightIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare function HomeIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare function UsersIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare function ChartIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare function FileIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare function FolderIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export declare function ShoppingCartIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export declare function CreditCardIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare function MessageIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare function HelpCircleIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export declare function UserIcon({ size, className, style }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export declare function LayoutDashboardIcon({ size, className, style, }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './icons';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
2
|
+
variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'accent' | 'purple' | 'blue' | 'teal' | 'gradient-primary' | 'gradient-teal' | 'gradient-purple' | 'gradient-accent' | 'gradient-blue' | 'gradient-rainbow';
|
|
3
|
+
size?: 'sm' | 'md' | 'lg';
|
|
4
|
+
loading?: boolean;
|
|
5
|
+
fullWidth?: boolean;
|
|
6
|
+
icon?: React.ReactNode;
|
|
7
|
+
iconPosition?: 'start' | 'end';
|
|
8
|
+
iconOnly?: boolean;
|
|
9
|
+
shape?: 'default' | 'circle';
|
|
10
|
+
}
|
|
11
|
+
export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export type DraggableListItem = {
|
|
2
|
+
id: string | number;
|
|
3
|
+
content: React.ReactNode;
|
|
4
|
+
};
|
|
5
|
+
export type DraggableListProps = {
|
|
6
|
+
items: DraggableListItem[];
|
|
7
|
+
onReorder: (items: DraggableListItem[]) => void;
|
|
8
|
+
renderItem?: (item: DraggableListItem, isDragging: boolean) => React.ReactNode;
|
|
9
|
+
showHandle?: boolean;
|
|
10
|
+
className?: string;
|
|
11
|
+
};
|
|
12
|
+
export type DraggableListProviderProps = {
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
backend?: any;
|
|
15
|
+
};
|
|
16
|
+
export declare function DraggableList({ items, onReorder, renderItem, showHandle, className, }: DraggableListProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare function DraggableListProvider({ children, backend, }: {
|
|
18
|
+
children: React.ReactNode;
|
|
19
|
+
backend?: any;
|
|
20
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export interface FileWithPreview extends File {
|
|
2
|
+
preview?: string;
|
|
3
|
+
id?: string;
|
|
4
|
+
}
|
|
5
|
+
export interface FileDropProps {
|
|
6
|
+
onFilesSelected?: (files: FileWithPreview[]) => void;
|
|
7
|
+
onFilesRemoved?: (files: FileWithPreview[]) => void;
|
|
8
|
+
accept?: string;
|
|
9
|
+
multiple?: boolean;
|
|
10
|
+
maxSize?: number;
|
|
11
|
+
maxFiles?: number;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
variant?: 'default' | 'compact' | 'ai' | 'glass-frost' | 'glass-tint';
|
|
14
|
+
showPreview?: boolean;
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare function FileDrop({ onFilesSelected, onFilesRemoved, accept, multiple, maxSize, // 10MB default
|
|
18
|
+
maxFiles, disabled, variant, showPreview, className, }: FileDropProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { ReactNode, CSSProperties } from 'react';
|
|
2
|
+
export interface HotspotProps {
|
|
3
|
+
/** Position of the hotspot relative to its container */
|
|
4
|
+
position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center' | 'custom';
|
|
5
|
+
/** Custom position styles when position is 'custom' */
|
|
6
|
+
customPosition?: {
|
|
7
|
+
top?: string;
|
|
8
|
+
right?: string;
|
|
9
|
+
bottom?: string;
|
|
10
|
+
left?: string;
|
|
11
|
+
};
|
|
12
|
+
/** Visual variant */
|
|
13
|
+
variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'purple' | 'gold';
|
|
14
|
+
/** Size of the hotspot */
|
|
15
|
+
size?: 'sm' | 'md' | 'lg';
|
|
16
|
+
/** Optional label/tooltip text */
|
|
17
|
+
label?: string;
|
|
18
|
+
/** Optional number badge (for step indicators) */
|
|
19
|
+
badge?: number | string;
|
|
20
|
+
/** Tooltip position relative to hotspot */
|
|
21
|
+
tooltipPosition?: 'top' | 'right' | 'bottom' | 'left';
|
|
22
|
+
/** Click handler */
|
|
23
|
+
onClick?: () => void;
|
|
24
|
+
/** Animation style */
|
|
25
|
+
animation?: 'pulse' | 'ping' | 'ripple' | 'none';
|
|
26
|
+
/** Children to render inside (for custom content) */
|
|
27
|
+
children?: ReactNode;
|
|
28
|
+
/** Additional CSS class */
|
|
29
|
+
className?: string;
|
|
30
|
+
/** Additional styles */
|
|
31
|
+
style?: CSSProperties;
|
|
32
|
+
}
|
|
33
|
+
export declare function Hotspot({ position, customPosition, variant, size, label, badge, tooltipPosition, onClick, animation, children, className, style, }: HotspotProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface MenuProps {
|
|
3
|
+
/** The trigger element (button, link, etc.) */
|
|
4
|
+
trigger: ReactNode;
|
|
5
|
+
/** Placement of the menu relative to trigger */
|
|
6
|
+
placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'left' | 'right';
|
|
7
|
+
/** Automatically choose best placement based on available space */
|
|
8
|
+
autoPlacement?: boolean;
|
|
9
|
+
/** Visual variant */
|
|
10
|
+
variant?: 'default' | 'glass-frost' | 'glass-tint';
|
|
11
|
+
/** Width of the menu */
|
|
12
|
+
width?: string | number;
|
|
13
|
+
/** Whether menu is open (controlled) */
|
|
14
|
+
open?: boolean;
|
|
15
|
+
/** Callback when open state changes */
|
|
16
|
+
onOpenChange?: (open: boolean) => void;
|
|
17
|
+
/** Menu content */
|
|
18
|
+
children: ReactNode;
|
|
19
|
+
/** Additional CSS class */
|
|
20
|
+
className?: string;
|
|
21
|
+
}
|
|
22
|
+
export declare function Menu({ trigger, placement, autoPlacement, variant, width, open: controlledOpen, onOpenChange, children, className, }: MenuProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export interface MenuItemProps {
|
|
24
|
+
/** Icon to display before label */
|
|
25
|
+
icon?: ReactNode;
|
|
26
|
+
/** Item label */
|
|
27
|
+
children: ReactNode;
|
|
28
|
+
/** Whether item is disabled */
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
/** Whether item is destructive/dangerous */
|
|
31
|
+
destructive?: boolean;
|
|
32
|
+
/** Click handler */
|
|
33
|
+
onClick?: () => void;
|
|
34
|
+
/** Additional CSS class */
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
37
|
+
export declare function MenuItem({ icon, children, disabled, destructive, onClick, className, }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
|
|
38
|
+
export interface MenuDividerProps {
|
|
39
|
+
className?: string;
|
|
40
|
+
}
|
|
41
|
+
export declare function MenuDivider({ className }: MenuDividerProps): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
export interface MenuGroupProps {
|
|
43
|
+
/** Group label */
|
|
44
|
+
label?: string;
|
|
45
|
+
/** Group items */
|
|
46
|
+
children: ReactNode;
|
|
47
|
+
/** Additional CSS class */
|
|
48
|
+
className?: string;
|
|
49
|
+
}
|
|
50
|
+
export declare function MenuGroup({ label, children, className }: MenuGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export interface PanelGroupProps {
|
|
2
|
+
children: React.ReactNode;
|
|
3
|
+
side?: 'left' | 'right';
|
|
4
|
+
variant?: 'elevated' | 'outlined' | 'filled' | 'ghost' | 'glass-frost' | 'glass-tint';
|
|
5
|
+
defaultCollapsed?: boolean;
|
|
6
|
+
collapsed?: boolean;
|
|
7
|
+
onCollapsedChange?: (collapsed: boolean) => void;
|
|
8
|
+
sidebarWidth?: number;
|
|
9
|
+
collapsedWidth?: number;
|
|
10
|
+
className?: string;
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
}
|
|
13
|
+
export declare function PanelGroup({ children, side, variant, defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange, sidebarWidth, collapsedWidth, className, style, }: PanelGroupProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export interface PanelSidebarProps {
|
|
15
|
+
children: React.ReactNode;
|
|
16
|
+
className?: string;
|
|
17
|
+
style?: React.CSSProperties;
|
|
18
|
+
}
|
|
19
|
+
export declare function PanelSidebar({ children, className, style, }: PanelSidebarProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export interface PanelContentProps {
|
|
21
|
+
children: React.ReactNode;
|
|
22
|
+
className?: string;
|
|
23
|
+
style?: React.CSSProperties;
|
|
24
|
+
}
|
|
25
|
+
export declare function PanelContent({ children, className, style, }: PanelContentProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare const Panel: typeof PanelGroup & {
|
|
27
|
+
Sidebar: typeof PanelSidebar;
|
|
28
|
+
Content: typeof PanelContent;
|
|
29
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
2
|
+
export interface TooltipProps {
|
|
3
|
+
children: React.ReactElement;
|
|
4
|
+
content: React.ReactNode;
|
|
5
|
+
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
6
|
+
align?: 'start' | 'center' | 'end';
|
|
7
|
+
delayDuration?: number;
|
|
8
|
+
}
|
|
9
|
+
export declare function Tooltip({ children, content, side, align, delayDuration, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const TooltipProvider: import("react").FC<TooltipPrimitive.TooltipProviderProps>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { Button } from './Button';
|
|
2
|
+
export { Tooltip } from './Tooltip';
|
|
3
|
+
export { Menu, MenuItem, MenuDivider, MenuGroup } from './Menu';
|
|
4
|
+
export { Hotspot } from './Hotspot';
|
|
5
|
+
export { DraggableList, DraggableListProvider } from './DraggableList';
|
|
6
|
+
export { FileDrop } from './FileDrop';
|
|
7
|
+
export { Panel } from './Panel';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export interface ContainerProps {
|
|
2
|
+
children: React.ReactNode;
|
|
3
|
+
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
4
|
+
padding?: 'none' | 'sm' | 'md' | 'lg';
|
|
5
|
+
centered?: boolean;
|
|
6
|
+
className?: string;
|
|
7
|
+
style?: React.CSSProperties;
|
|
8
|
+
}
|
|
9
|
+
export declare function Container({ children, size, padding, centered, className, style, }: ContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export interface DividerProps {
|
|
2
|
+
orientation?: 'horizontal' | 'vertical';
|
|
3
|
+
spacing?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
4
|
+
variant?: 'solid' | 'dashed' | 'dotted';
|
|
5
|
+
thickness?: 'thin' | 'medium' | 'thick';
|
|
6
|
+
gradient?: boolean;
|
|
7
|
+
label?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
style?: React.CSSProperties;
|
|
10
|
+
}
|
|
11
|
+
export declare function Divider({ orientation, spacing, variant, thickness, gradient, label, className, style, }: DividerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export interface GridProps {
|
|
2
|
+
children: React.ReactNode;
|
|
3
|
+
columns?: 1 | 2 | 3 | 4 | 6 | 12 | 'auto';
|
|
4
|
+
gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
5
|
+
rowGap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
6
|
+
columnGap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
7
|
+
responsive?: boolean;
|
|
8
|
+
align?: 'start' | 'center' | 'end' | 'stretch';
|
|
9
|
+
justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around';
|
|
10
|
+
className?: string;
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
}
|
|
13
|
+
export declare function Grid({ children, columns, gap, rowGap, columnGap, responsive, align, justify, className, style, }: GridProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export interface SectionProps {
|
|
2
|
+
children: React.ReactNode;
|
|
3
|
+
padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
|
|
4
|
+
background?: 'default' | 'subtle' | 'muted' | 'gradient-primary' | 'gradient-purple' | 'gradient-accent';
|
|
5
|
+
className?: string;
|
|
6
|
+
style?: React.CSSProperties;
|
|
7
|
+
id?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare function Section({ children, padding, background, className, style, id, }: SectionProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export interface SpacerProps {
|
|
2
|
+
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
|
|
3
|
+
axis?: 'vertical' | 'horizontal' | 'both';
|
|
4
|
+
className?: string;
|
|
5
|
+
}
|
|
6
|
+
export declare function Spacer({ size, axis, className, }: SpacerProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export interface StackProps {
|
|
2
|
+
children: React.ReactNode;
|
|
3
|
+
direction?: 'vertical' | 'horizontal';
|
|
4
|
+
gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
5
|
+
align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
|
|
6
|
+
justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
|
|
7
|
+
wrap?: boolean;
|
|
8
|
+
className?: string;
|
|
9
|
+
style?: React.CSSProperties;
|
|
10
|
+
}
|
|
11
|
+
export declare function Stack({ children, direction, gap, align, justify, wrap, className, style, }: StackProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare function VStack(props: Omit<StackProps, 'direction'>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare function HStack(props: Omit<StackProps, 'direction'>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface BreadcrumbItem {
|
|
3
|
+
label: string;
|
|
4
|
+
href?: string;
|
|
5
|
+
icon?: React.ReactNode;
|
|
6
|
+
current?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface BreadcrumbProps {
|
|
9
|
+
items: BreadcrumbItem[];
|
|
10
|
+
separator?: 'slash' | 'chevron' | 'dot';
|
|
11
|
+
size?: 'sm' | 'md' | 'lg';
|
|
12
|
+
maxItems?: number;
|
|
13
|
+
onNavigate?: (item: BreadcrumbItem, index: number) => void;
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
export declare function Breadcrumb({ items, separator, size, maxItems, onNavigate, className, }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface HeaderNavItem {
|
|
3
|
+
label: string;
|
|
4
|
+
href?: string;
|
|
5
|
+
onClick?: () => void;
|
|
6
|
+
active?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface HeaderProps {
|
|
9
|
+
logo?: ReactNode;
|
|
10
|
+
logoText?: string;
|
|
11
|
+
logoHref?: string;
|
|
12
|
+
navigation?: HeaderNavItem[];
|
|
13
|
+
actions?: ReactNode;
|
|
14
|
+
variant?: 'default' | 'transparent' | 'gradient' | 'glass-frost' | 'glass-tint';
|
|
15
|
+
sticky?: boolean;
|
|
16
|
+
bordered?: boolean;
|
|
17
|
+
children?: ReactNode;
|
|
18
|
+
className?: string;
|
|
19
|
+
}
|
|
20
|
+
export declare function Header({ logo, logoText, logoHref, navigation, actions, variant, sticky, bordered, children, className, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { ReactNode, AnchorHTMLAttributes } from 'react';
|
|
2
|
+
export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> {
|
|
3
|
+
/** The URL to link to */
|
|
4
|
+
href: string;
|
|
5
|
+
/** Variant style */
|
|
6
|
+
variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'muted';
|
|
7
|
+
/** Size of the link */
|
|
8
|
+
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
9
|
+
/** Underline behavior */
|
|
10
|
+
underline?: 'always' | 'hover' | 'none';
|
|
11
|
+
/** Whether link is disabled */
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Icon to display before text */
|
|
14
|
+
iconStart?: ReactNode;
|
|
15
|
+
/** Icon to display after text */
|
|
16
|
+
iconEnd?: ReactNode;
|
|
17
|
+
/** Whether link is external (opens in new tab) */
|
|
18
|
+
external?: boolean;
|
|
19
|
+
/** Font weight */
|
|
20
|
+
weight?: 'normal' | 'medium' | 'semibold' | 'bold';
|
|
21
|
+
/** Children content */
|
|
22
|
+
children: ReactNode;
|
|
23
|
+
/** Additional CSS class */
|
|
24
|
+
className?: string;
|
|
25
|
+
}
|
|
26
|
+
export declare function Link({ href, variant, size, underline, disabled, iconStart, iconEnd, external, weight, children, className, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export interface SidenavItem {
|
|
2
|
+
id: string;
|
|
3
|
+
label: string;
|
|
4
|
+
icon: React.ReactNode;
|
|
5
|
+
href?: string;
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
active?: boolean;
|
|
8
|
+
divider?: boolean;
|
|
9
|
+
category?: string;
|
|
10
|
+
}
|
|
11
|
+
export interface SidenavProps {
|
|
12
|
+
items: SidenavItem[];
|
|
13
|
+
variant?: 'solid' | 'glass-frost' | 'glass-tint';
|
|
14
|
+
density?: 'comfortable' | 'compact';
|
|
15
|
+
onItemClick?: (item: SidenavItem) => void;
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
export declare function Sidenav({ items, variant, density, onItemClick, className, }: SidenavProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
type Theme = 'light' | 'dark';
|
|
2
|
+
type Density = 'comfortable' | 'compact';
|
|
3
|
+
interface BienContextValue {
|
|
4
|
+
theme: Theme;
|
|
5
|
+
density: Density;
|
|
6
|
+
}
|
|
7
|
+
export interface BienProviderProps {
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
theme?: Theme;
|
|
10
|
+
density?: Density;
|
|
11
|
+
}
|
|
12
|
+
export declare function BienProvider({ children, theme, density, }: BienProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare function useBien(): BienContextValue;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
|
|
2
|
+
interface Toast {
|
|
3
|
+
id: string;
|
|
4
|
+
title: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
variant?: ToastVariant;
|
|
7
|
+
duration?: number;
|
|
8
|
+
}
|
|
9
|
+
interface ToastContextValue {
|
|
10
|
+
toast: (toast: Omit<Toast, 'id'>) => void;
|
|
11
|
+
}
|
|
12
|
+
export declare function ToastProvider({ children }: {
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare function useToast(): ToastContextValue;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export interface ThinkingTextProps {
|
|
2
|
+
text?: string;
|
|
3
|
+
variant?: 'thinking' | 'reasoning' | 'analyzing' | 'processing' | 'generating';
|
|
4
|
+
speed?: 'slow' | 'normal' | 'fast';
|
|
5
|
+
showCursor?: boolean;
|
|
6
|
+
loop?: boolean;
|
|
7
|
+
onComplete?: () => void;
|
|
8
|
+
className?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare function ThinkingText({ text, variant, speed, showCursor, loop, onComplete, className, }: ThinkingTextProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
|
|
2
|
+
interface Toast {
|
|
3
|
+
id: string;
|
|
4
|
+
title: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
variant?: ToastVariant;
|
|
7
|
+
duration?: number;
|
|
8
|
+
}
|
|
9
|
+
interface ToastContextValue {
|
|
10
|
+
toast: (toast: Omit<Toast, 'id'>) => void;
|
|
11
|
+
}
|
|
12
|
+
export declare function ToastProvider({ children }: {
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare function useToast(): ToastContextValue;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ThinkingText } from './ThinkingText';
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export { BienProvider } from './components/Providers';
|
|
2
|
+
export { TooltipProvider } from './components/Providers';
|
|
3
|
+
export { ToastProvider, useToast } from './components/Providers';
|
|
4
|
+
export { Container, Grid, VStack, HStack, Section, Spacer, Divider, } from './components/Layout';
|
|
5
|
+
export { Input, Textarea, MarkdownTextarea, Select, MultiSelect, Checkbox, Radio, RadioGroup, Switch, Slider, DatePicker, } from './components/Forms';
|
|
6
|
+
export { Link, Breadcrumb, Header, Sidenav } from './components/Navigation';
|
|
7
|
+
export { Text, Card, Badge, Avatar, AvatarGroup, ProfileAvatar, Timeline, Meter, CircularMeter, Table, List, ListItem, DescriptionList, DescriptionTerm, DescriptionDetails, ColorSwatch, } from './components/Display';
|
|
8
|
+
export { Loading, EmptyState, Banner, Callout, Modal, Accordion, Tabs, Stepper, } from './components/Feedback';
|
|
9
|
+
export { Button, Tooltip, Menu, MenuItem, MenuDivider, MenuGroup, Hotspot, DraggableList, DraggableListProvider, FileDrop, Panel, } from './components/Interactive';
|
|
10
|
+
export { ThinkingText } from './components/Utils';
|
|
11
|
+
export * from './components/Icons';
|
|
12
|
+
export type { Theme, Density, ComponentVariant, ComponentSize } from './types';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export type Theme = 'light' | 'dark';
|
|
2
|
+
export type Density = 'comfortable' | 'compact';
|
|
3
|
+
export type ComponentVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'ghost' | 'outline' | 'destructive' | 'gradient-primary' | 'gradient-blue' | 'gradient-purple' | 'gradient-accent' | 'gradient-rainbow';
|
|
4
|
+
export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
5
|
+
export interface BaseComponentProps {
|
|
6
|
+
className?: string;
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export interface ThemeContextType {
|
|
10
|
+
theme: Theme;
|
|
11
|
+
density: Density;
|
|
12
|
+
setTheme: (theme: Theme) => void;
|
|
13
|
+
setDensity: (density: Density) => void;
|
|
14
|
+
}
|