@sakaniui/react 0.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/LICENSE +21 -0
- package/README.md +131 -0
- package/dist/components/Accordion/Accordion.d.ts +18 -0
- package/dist/components/Accordion/index.d.ts +2 -0
- package/dist/components/Alert/Alert.d.ts +13 -0
- package/dist/components/Alert/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/ActivityFeed/ActivityFeed.d.ts +27 -0
- package/dist/components/ApplicationComponents/ActivityFeed/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/Announcement/Announcement.d.ts +15 -0
- package/dist/components/ApplicationComponents/Announcement/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/AvatarUpload/AvatarUpload.d.ts +20 -0
- package/dist/components/ApplicationComponents/AvatarUpload/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/Balance/Balance.d.ts +21 -0
- package/dist/components/ApplicationComponents/Balance/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/CodeSnippet/CodeSnippet.d.ts +16 -0
- package/dist/components/ApplicationComponents/CodeSnippet/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/Expenses/Expenses.d.ts +18 -0
- package/dist/components/ApplicationComponents/Expenses/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/InlineHint/InlineHint.d.ts +9 -0
- package/dist/components/ApplicationComponents/InlineHint/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/Modal/Modal.d.ts +43 -0
- package/dist/components/ApplicationComponents/Modal/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/NotificationItem/NotificationItem.d.ts +19 -0
- package/dist/components/ApplicationComponents/NotificationItem/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/ProgressItem/ProgressItem.d.ts +15 -0
- package/dist/components/ApplicationComponents/ProgressItem/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/ProgressStat/ProgressStat.d.ts +11 -0
- package/dist/components/ApplicationComponents/ProgressStat/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/RichSeparator/RichSeparator.d.ts +10 -0
- package/dist/components/ApplicationComponents/RichSeparator/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/SpendingBalance/SpendingBalance.d.ts +11 -0
- package/dist/components/ApplicationComponents/SpendingBalance/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/StockMarket/StockMarket.d.ts +22 -0
- package/dist/components/ApplicationComponents/StockMarket/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/Tags/Tags.d.ts +9 -0
- package/dist/components/ApplicationComponents/Tags/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/Ticker/Ticker.d.ts +14 -0
- package/dist/components/ApplicationComponents/Ticker/index.d.ts +2 -0
- package/dist/components/ApplicationComponents/Transactions/Transactions.d.ts +18 -0
- package/dist/components/ApplicationComponents/Transactions/index.d.ts +2 -0
- package/dist/components/AreaChart/AreaChart.d.ts +21 -0
- package/dist/components/AreaChart/index.d.ts +2 -0
- package/dist/components/Avatar/Avatar.d.ts +17 -0
- package/dist/components/Avatar/index.d.ts +2 -0
- package/dist/components/AvatarGroup/AvatarGroup.d.ts +17 -0
- package/dist/components/AvatarGroup/index.d.ts +2 -0
- package/dist/components/Badge/Badge.d.ts +15 -0
- package/dist/components/Badge/index.d.ts +2 -0
- package/dist/components/BarChart/BarChart.d.ts +19 -0
- package/dist/components/BarChart/index.d.ts +2 -0
- package/dist/components/BoardCard/BoardCard.d.ts +26 -0
- package/dist/components/BoardCard/index.d.ts +2 -0
- package/dist/components/BoardColumn/BoardColumn.d.ts +17 -0
- package/dist/components/BoardColumn/index.d.ts +2 -0
- package/dist/components/Breadcrumb/Breadcrumb.d.ts +13 -0
- package/dist/components/Breadcrumb/index.d.ts +2 -0
- package/dist/components/Button/Button.d.ts +19 -0
- package/dist/components/Button/index.d.ts +9 -0
- package/dist/components/Calendar/Calendar.d.ts +24 -0
- package/dist/components/Calendar/index.d.ts +2 -0
- package/dist/components/Card/Card.d.ts +13 -0
- package/dist/components/Card/index.d.ts +2 -0
- package/dist/components/CardMetaItem/CardMetaItem.d.ts +9 -0
- package/dist/components/CardMetaItem/index.d.ts +2 -0
- package/dist/components/ChatComposer/ChatComposer-simple.d.ts +15 -0
- package/dist/components/ChatComposer/ChatComposer.d.ts +22 -0
- package/dist/components/ChatComposer/index.d.ts +2 -0
- package/dist/components/Checkbox/Checkbox.d.ts +9 -0
- package/dist/components/Checkbox/index.d.ts +2 -0
- package/dist/components/Combobox/Combobox.d.ts +27 -0
- package/dist/components/Combobox/index.d.ts +2 -0
- package/dist/components/ConversationItem/ConversationItem.d.ts +17 -0
- package/dist/components/ConversationItem/index.d.ts +2 -0
- package/dist/components/Divider/Divider.d.ts +10 -0
- package/dist/components/Divider/index.d.ts +2 -0
- package/dist/components/DonutChart/DonutChart.d.ts +19 -0
- package/dist/components/DonutChart/index.d.ts +2 -0
- package/dist/components/EmptyState/EmptyState.d.ts +15 -0
- package/dist/components/EmptyState/index.d.ts +2 -0
- package/dist/components/FileUpload/FileUpload.d.ts +14 -0
- package/dist/components/FileUpload/index.d.ts +2 -0
- package/dist/components/FilterChip/FilterChip.d.ts +13 -0
- package/dist/components/FilterChip/index.d.ts +2 -0
- package/dist/components/FunnelChart/FunnelChart.d.ts +13 -0
- package/dist/components/FunnelChart/index.d.ts +2 -0
- package/dist/components/HeatmapChart/HeatmapChart.d.ts +14 -0
- package/dist/components/HeatmapChart/index.d.ts +2 -0
- package/dist/components/IconButton/IconButton.d.ts +14 -0
- package/dist/components/IconButton/index.d.ts +2 -0
- package/dist/components/Input/Input.d.ts +19 -0
- package/dist/components/Input/index.d.ts +2 -0
- package/dist/components/Kbd/Kbd.d.ts +7 -0
- package/dist/components/Kbd/index.d.ts +2 -0
- package/dist/components/Label/Label.d.ts +8 -0
- package/dist/components/Label/index.d.ts +2 -0
- package/dist/components/LineChart/LineChart.d.ts +25 -0
- package/dist/components/LineChart/index.d.ts +2 -0
- package/dist/components/Link/Link.d.ts +8 -0
- package/dist/components/Link/index.d.ts +2 -0
- package/dist/components/ListItem/ListItem.d.ts +13 -0
- package/dist/components/ListItem/index.d.ts +2 -0
- package/dist/components/Menu/Menu.d.ts +12 -0
- package/dist/components/Menu/index.d.ts +2 -0
- package/dist/components/MenuItem/MenuItem.d.ts +15 -0
- package/dist/components/MenuItem/index.d.ts +2 -0
- package/dist/components/MessageBubble/MessageBubble.d.ts +25 -0
- package/dist/components/MessageBubble/index.d.ts +2 -0
- package/dist/components/Pagination/Pagination.d.ts +13 -0
- package/dist/components/Pagination/index.d.ts +2 -0
- package/dist/components/PieChart/PieChart.d.ts +18 -0
- package/dist/components/PieChart/index.d.ts +2 -0
- package/dist/components/Popover/Popover.d.ts +15 -0
- package/dist/components/Popover/index.d.ts +2 -0
- package/dist/components/Progress/Progress.d.ts +12 -0
- package/dist/components/Progress/index.d.ts +2 -0
- package/dist/components/RadarChart/RadarChart.d.ts +19 -0
- package/dist/components/RadarChart/index.d.ts +2 -0
- package/dist/components/RadialChart/RadialChart.d.ts +18 -0
- package/dist/components/RadialChart/index.d.ts +2 -0
- package/dist/components/Radio/Radio.d.ts +7 -0
- package/dist/components/Radio/index.d.ts +2 -0
- package/dist/components/SegmentedControl/SegmentedControl.d.ts +16 -0
- package/dist/components/SegmentedControl/index.d.ts +2 -0
- package/dist/components/Select/Select.d.ts +25 -0
- package/dist/components/Select/index.d.ts +2 -0
- package/dist/components/Sidebar/Sidebar.d.ts +8 -0
- package/dist/components/Sidebar/index.d.ts +2 -0
- package/dist/components/SidebarDivider/SidebarDivider.d.ts +3 -0
- package/dist/components/SidebarDivider/index.d.ts +1 -0
- package/dist/components/SidebarFooter/SidebarFooter.d.ts +16 -0
- package/dist/components/SidebarFooter/index.d.ts +2 -0
- package/dist/components/SidebarGroupLabel/SidebarGroupLabel.d.ts +6 -0
- package/dist/components/SidebarGroupLabel/index.d.ts +2 -0
- package/dist/components/SidebarHeader/SidebarHeader.d.ts +16 -0
- package/dist/components/SidebarHeader/index.d.ts +2 -0
- package/dist/components/SidebarItem/SidebarItem.d.ts +24 -0
- package/dist/components/SidebarItem/index.d.ts +2 -0
- package/dist/components/SidebarPromo/SidebarPromo.d.ts +14 -0
- package/dist/components/SidebarPromo/index.d.ts +2 -0
- package/dist/components/SidebarSearch/SidebarSearch.d.ts +11 -0
- package/dist/components/SidebarSearch/index.d.ts +2 -0
- package/dist/components/SidebarSubItem/SidebarSubItem.d.ts +10 -0
- package/dist/components/SidebarSubItem/index.d.ts +2 -0
- package/dist/components/Skeleton/Skeleton.d.ts +12 -0
- package/dist/components/Skeleton/index.d.ts +2 -0
- package/dist/components/Slider/Slider.d.ts +10 -0
- package/dist/components/Slider/index.d.ts +2 -0
- package/dist/components/Spinner/Spinner.d.ts +10 -0
- package/dist/components/Spinner/index.d.ts +2 -0
- package/dist/components/StatCard/StatCard.d.ts +28 -0
- package/dist/components/StatCard/index.d.ts +2 -0
- package/dist/components/Stepper/Stepper.d.ts +24 -0
- package/dist/components/Stepper/index.d.ts +2 -0
- package/dist/components/Switch/Switch.d.ts +7 -0
- package/dist/components/Switch/index.d.ts +2 -0
- package/dist/components/Table/Table.d.ts +32 -0
- package/dist/components/Table/index.d.ts +2 -0
- package/dist/components/Tabs/Tabs.d.ts +27 -0
- package/dist/components/Tabs/index.d.ts +2 -0
- package/dist/components/Textarea/Textarea.d.ts +8 -0
- package/dist/components/Textarea/index.d.ts +2 -0
- package/dist/components/Toast/Toast.d.ts +13 -0
- package/dist/components/Toast/index.d.ts +2 -0
- package/dist/components/Tooltip/Tooltip.d.ts +15 -0
- package/dist/components/Tooltip/index.d.ts +2 -0
- package/dist/components/TopBar/TopBar.d.ts +37 -0
- package/dist/components/TopBar/index.d.ts +2 -0
- package/dist/components/TopBarMobile/TopBarMobile.d.ts +16 -0
- package/dist/components/TopBarMobile/index.d.ts +2 -0
- package/dist/favicon.svg +1 -0
- package/dist/icons.svg +24 -0
- package/dist/index.cjs +1 -0
- package/dist/index.d.ts +98 -0
- package/dist/index.mjs +6107 -0
- package/dist/style.css +2 -0
- package/package.json +85 -0
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { AvatarSize } from '../Avatar/Avatar';
|
|
3
|
+
export interface AvatarGroupProps {
|
|
4
|
+
/** Size applied to every avatar in the group. */
|
|
5
|
+
size?: AvatarSize;
|
|
6
|
+
/** Max avatars to show before collapsing into a +N chip. */
|
|
7
|
+
max?: number;
|
|
8
|
+
/** Avatar definitions. */
|
|
9
|
+
avatars: Array<{
|
|
10
|
+
src?: string;
|
|
11
|
+
initials?: string;
|
|
12
|
+
alt?: string;
|
|
13
|
+
}>;
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
export declare const AvatarGroup: React.FC<AvatarGroupProps>;
|
|
17
|
+
export default AvatarGroup;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type BadgeVariant = 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
|
|
3
|
+
export type BadgeEmphasis = 'subtle' | 'solid';
|
|
4
|
+
export interface BadgeProps {
|
|
5
|
+
/** Color scheme. Maps to Figma BD axis. Defaults to "neutral". */
|
|
6
|
+
variant?: BadgeVariant;
|
|
7
|
+
/** Fill strength. Maps to Figma Emphasis axis. Defaults to "subtle". */
|
|
8
|
+
emphasis?: BadgeEmphasis;
|
|
9
|
+
leftIcon?: React.ReactNode;
|
|
10
|
+
rightIcon?: React.ReactNode;
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare const Badge: React.FC<BadgeProps>;
|
|
15
|
+
export default Badge;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
3
|
+
export type BarChartVariant = 'default' | 'active' | 'multiple' | 'stacked' | 'negative' | 'horizontal';
|
|
4
|
+
export interface BarChartDatum {
|
|
5
|
+
label: string;
|
|
6
|
+
value: number;
|
|
7
|
+
/** Second series (Figma: "Multiple" / "Stacked - Legend"). */
|
|
8
|
+
value2?: number;
|
|
9
|
+
}
|
|
10
|
+
export interface BarChartProps {
|
|
11
|
+
data: BarChartDatum[];
|
|
12
|
+
variant?: BarChartVariant;
|
|
13
|
+
size?: ChartSize;
|
|
14
|
+
/** Legend labels for `value` / `value2`, shown for "multiple" and "stacked". */
|
|
15
|
+
seriesLabels?: [string, string?];
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
export declare const BarChart: React.FC<BarChartProps>;
|
|
19
|
+
export default BarChart;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type BoardCardType = 'compact' | 'default' | 'cover';
|
|
3
|
+
export type BoardCardState = 'default' | 'hover' | 'selected' | 'dragging' | 'done';
|
|
4
|
+
export interface BoardCardProps {
|
|
5
|
+
type?: BoardCardType;
|
|
6
|
+
state?: BoardCardState;
|
|
7
|
+
/** Cover media (cover type only). */
|
|
8
|
+
cover?: React.ReactNode;
|
|
9
|
+
/** Leading slot: Checkbox, Avatar, status dot, or icon. Identity of the card. */
|
|
10
|
+
leading?: React.ReactNode;
|
|
11
|
+
title: React.ReactNode;
|
|
12
|
+
/** Trailing slot: priority icon, kebab menu trigger, or status. */
|
|
13
|
+
trailing?: React.ReactNode;
|
|
14
|
+
/** Shown for default/cover types. */
|
|
15
|
+
description?: React.ReactNode;
|
|
16
|
+
/** Badge instances. Shown for default/cover types. */
|
|
17
|
+
tags?: React.ReactNode;
|
|
18
|
+
/** CardMetaItem instances. */
|
|
19
|
+
meta?: React.ReactNode;
|
|
20
|
+
/** AvatarGroup / Avatar, right-aligned in the footer. */
|
|
21
|
+
assignees?: React.ReactNode;
|
|
22
|
+
onClick?: () => void;
|
|
23
|
+
className?: string;
|
|
24
|
+
}
|
|
25
|
+
export declare const BoardCard: React.FC<BoardCardProps>;
|
|
26
|
+
export default BoardCard;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type BoardColumnState = 'default' | 'empty' | 'loading';
|
|
3
|
+
export interface BoardColumnProps {
|
|
4
|
+
state?: BoardColumnState;
|
|
5
|
+
title: React.ReactNode;
|
|
6
|
+
/** Count badge (e.g. a Badge instance or number). */
|
|
7
|
+
count?: React.ReactNode;
|
|
8
|
+
/** Status dot color — any CSS color or var(). Defaults to chart/1. */
|
|
9
|
+
dotColor?: string;
|
|
10
|
+
/** BoardCard instances (default/loading states). */
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
onAdd?: () => void;
|
|
13
|
+
onMenu?: () => void;
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
export declare const BoardColumn: React.FC<BoardColumnProps>;
|
|
17
|
+
export default BoardColumn;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface BreadcrumbItem {
|
|
3
|
+
label: string;
|
|
4
|
+
href?: string;
|
|
5
|
+
}
|
|
6
|
+
export type BreadcrumbVariant = 'text' | 'button';
|
|
7
|
+
export interface BreadcrumbProps {
|
|
8
|
+
items: BreadcrumbItem[];
|
|
9
|
+
variant?: BreadcrumbVariant;
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const Breadcrumb: React.FC<BreadcrumbProps>;
|
|
13
|
+
export default Breadcrumb;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
|
|
3
|
+
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
4
|
+
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
5
|
+
/** Visual style of the button. Defaults to "primary". */
|
|
6
|
+
variant?: ButtonVariant;
|
|
7
|
+
/** Size of the button. Defaults to "md". */
|
|
8
|
+
size?: ButtonSize;
|
|
9
|
+
/** Icon rendered to the left of the label. */
|
|
10
|
+
leftIcon?: React.ReactNode;
|
|
11
|
+
/** Icon rendered to the right of the label. */
|
|
12
|
+
rightIcon?: React.ReactNode;
|
|
13
|
+
/** Render the button in a loading state (disables interaction). */
|
|
14
|
+
loading?: boolean;
|
|
15
|
+
/** Button label. Pass as children or use the children prop directly. */
|
|
16
|
+
children: React.ReactNode;
|
|
17
|
+
}
|
|
18
|
+
export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
19
|
+
export default Button;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Button — public exports
|
|
3
|
+
*
|
|
4
|
+
* Import from this file in consuming code:
|
|
5
|
+
* import { Button } from '@sakani/ui/components/Button';
|
|
6
|
+
* import type { ButtonProps, ButtonVariant, ButtonSize } from '@sakani/ui/components/Button';
|
|
7
|
+
*/
|
|
8
|
+
export { Button, default } from './Button';
|
|
9
|
+
export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface DateRange {
|
|
3
|
+
from?: Date;
|
|
4
|
+
to?: Date;
|
|
5
|
+
}
|
|
6
|
+
export interface CalendarProps {
|
|
7
|
+
/** Selection mode. Defaults to "single". */
|
|
8
|
+
mode?: 'single' | 'range';
|
|
9
|
+
/** Selected date (single mode). */
|
|
10
|
+
value?: Date;
|
|
11
|
+
onChange?: (date: Date) => void;
|
|
12
|
+
/** Selected range (range mode). */
|
|
13
|
+
range?: DateRange;
|
|
14
|
+
onRangeChange?: (range: DateRange) => void;
|
|
15
|
+
/** Header style (Figma: Calendar Header Type). Defaults to "arrows". */
|
|
16
|
+
headerType?: 'arrows' | 'dropdowns';
|
|
17
|
+
/** Month to display initially. */
|
|
18
|
+
defaultMonth?: Date;
|
|
19
|
+
minDate?: Date;
|
|
20
|
+
maxDate?: Date;
|
|
21
|
+
className?: string;
|
|
22
|
+
}
|
|
23
|
+
export declare const Calendar: React.FC<CalendarProps>;
|
|
24
|
+
export default Calendar;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface CardProps {
|
|
3
|
+
title?: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
/** Footer action buttons (maps to Figma CTA / Two/Three buttons variants). */
|
|
6
|
+
actions?: React.ReactNode;
|
|
7
|
+
/** Enables the hover elevation (Figma: Hover). */
|
|
8
|
+
interactive?: boolean;
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const Card: React.FC<CardProps>;
|
|
13
|
+
export default Card;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface CardMetaItemProps {
|
|
3
|
+
/** Any 13px Lucide icon. */
|
|
4
|
+
icon: React.ReactNode;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare const CardMetaItem: React.FC<CardMetaItemProps>;
|
|
9
|
+
export default CardMetaItem;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ChatComposerState = 'default' | 'typing' | 'uploading' | 'disabled';
|
|
3
|
+
export interface ChatComposerProps {
|
|
4
|
+
state?: ChatComposerState;
|
|
5
|
+
value?: string;
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
onChange?: (value: string) => void;
|
|
8
|
+
onSend?: () => void;
|
|
9
|
+
uploadName?: string;
|
|
10
|
+
uploadProgress?: number;
|
|
11
|
+
onCancelUpload?: () => void;
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare const ChatComposer: React.FC<ChatComposerProps>;
|
|
15
|
+
export default ChatComposer;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ChatComposerState = 'default' | 'typing' | 'uploading' | 'disabled';
|
|
3
|
+
export interface ChatComposerProps {
|
|
4
|
+
state?: ChatComposerState;
|
|
5
|
+
value?: string;
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
onChange?: (value: string) => void;
|
|
8
|
+
onSend?: () => void;
|
|
9
|
+
onAttachmentsChange?: (files: Array<{
|
|
10
|
+
name: string;
|
|
11
|
+
type: string;
|
|
12
|
+
dataUrl: string;
|
|
13
|
+
}>) => void;
|
|
14
|
+
/** Upload metadata (state="uploading"). */
|
|
15
|
+
uploadName?: string;
|
|
16
|
+
/** Upload progress 0-100 (state="uploading"). */
|
|
17
|
+
uploadProgress?: number;
|
|
18
|
+
onCancelUpload?: () => void;
|
|
19
|
+
className?: string;
|
|
20
|
+
}
|
|
21
|
+
export declare const ChatComposer: React.FC<ChatComposerProps>;
|
|
22
|
+
export default ChatComposer;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
3
|
+
label?: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
/** Renders the indeterminate (dash) state. */
|
|
6
|
+
indeterminate?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
9
|
+
export default Checkbox;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ComboboxSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
export type ComboboxMode = 'single' | 'multi';
|
|
4
|
+
export interface ComboboxOption {
|
|
5
|
+
value: string;
|
|
6
|
+
label: string;
|
|
7
|
+
icon?: React.ReactNode;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
/** Shows the panel's loading state (Figma: Panel State=Loading). */
|
|
10
|
+
loading?: boolean;
|
|
11
|
+
}
|
|
12
|
+
export interface ComboboxProps {
|
|
13
|
+
options: ComboboxOption[];
|
|
14
|
+
mode?: ComboboxMode;
|
|
15
|
+
size?: ComboboxSize;
|
|
16
|
+
label?: string;
|
|
17
|
+
description?: string;
|
|
18
|
+
error?: string;
|
|
19
|
+
placeholder?: string;
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
/** Controlled selected value(s). */
|
|
22
|
+
value?: string | string[];
|
|
23
|
+
onChange?: (value: string | string[]) => void;
|
|
24
|
+
className?: string;
|
|
25
|
+
}
|
|
26
|
+
export declare const Combobox: React.FC<ComboboxProps>;
|
|
27
|
+
export default Combobox;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ConversationItemState = 'default' | 'hover' | 'active' | 'unread' | 'typing' | 'muted';
|
|
3
|
+
export interface ConversationItemProps {
|
|
4
|
+
state?: ConversationItemState;
|
|
5
|
+
/** Avatar node. */
|
|
6
|
+
avatar: React.ReactNode;
|
|
7
|
+
name: React.ReactNode;
|
|
8
|
+
timestamp?: React.ReactNode;
|
|
9
|
+
/** Last-message preview. Ignored when state is "typing". */
|
|
10
|
+
preview?: React.ReactNode;
|
|
11
|
+
/** Unread count (shown when state is "unread"). */
|
|
12
|
+
unreadCount?: number;
|
|
13
|
+
onClick?: () => void;
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
export declare const ConversationItem: React.FC<ConversationItemProps>;
|
|
17
|
+
export default ConversationItem;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface DividerProps {
|
|
3
|
+
/** Horizontal (default) or vertical orientation */
|
|
4
|
+
orientation?: 'horizontal' | 'vertical';
|
|
5
|
+
/** Optional text label centred on the line */
|
|
6
|
+
label?: string;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare const Divider: React.FC<DividerProps>;
|
|
10
|
+
export default Divider;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
3
|
+
export interface DonutDatum {
|
|
4
|
+
label: string;
|
|
5
|
+
value: number;
|
|
6
|
+
}
|
|
7
|
+
export interface DonutChartProps {
|
|
8
|
+
data: DonutDatum[];
|
|
9
|
+
size?: ChartSize;
|
|
10
|
+
/** Big number shown in the center (Figma: value). */
|
|
11
|
+
centerValue?: string;
|
|
12
|
+
/** Small caption under the center value (Figma: caption). */
|
|
13
|
+
centerCaption?: string;
|
|
14
|
+
/** Pixel height override, takes precedence over `size`'s preset. */
|
|
15
|
+
height?: number;
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
export declare const DonutChart: React.FC<DonutChartProps>;
|
|
19
|
+
export default DonutChart;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type EmptyStateType = 'no-data' | 'no-results' | 'error';
|
|
3
|
+
export interface EmptyStateProps {
|
|
4
|
+
type?: EmptyStateType;
|
|
5
|
+
title?: string;
|
|
6
|
+
description?: string;
|
|
7
|
+
/** Optional action button label. Omit to hide the button. */
|
|
8
|
+
actionLabel?: string;
|
|
9
|
+
onAction?: () => void;
|
|
10
|
+
/** Override the default icon for the type. */
|
|
11
|
+
icon?: React.ReactNode;
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare const EmptyState: React.FC<EmptyStateProps>;
|
|
15
|
+
export default EmptyState;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface FileUploadProps {
|
|
3
|
+
/** Accepted file types (passed to the input's accept attr). */
|
|
4
|
+
accept?: string;
|
|
5
|
+
/** Allow multiple files. */
|
|
6
|
+
multiple?: boolean;
|
|
7
|
+
/** Hint line under the main label. */
|
|
8
|
+
hint?: string;
|
|
9
|
+
/** Called whenever the selected file list changes. */
|
|
10
|
+
onFilesChange?: (files: File[]) => void;
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const FileUpload: React.FC<FileUploadProps>;
|
|
14
|
+
export default FileUpload;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type FilterChipType = 'default' | 'active' | 'add';
|
|
3
|
+
export interface FilterChipProps {
|
|
4
|
+
type?: FilterChipType;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
/** Fires when the chip body is clicked (open menu / add). */
|
|
7
|
+
onClick?: () => void;
|
|
8
|
+
/** Fires when the × is clicked on an active chip. */
|
|
9
|
+
onRemove?: () => void;
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const FilterChip: React.FC<FilterChipProps>;
|
|
13
|
+
export default FilterChip;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
3
|
+
export interface FunnelDatum {
|
|
4
|
+
label: string;
|
|
5
|
+
value: number;
|
|
6
|
+
}
|
|
7
|
+
export interface FunnelChartProps {
|
|
8
|
+
data: FunnelDatum[];
|
|
9
|
+
size?: ChartSize;
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const FunnelChart: React.FC<FunnelChartProps>;
|
|
13
|
+
export default FunnelChart;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
3
|
+
export interface HeatmapChartProps {
|
|
4
|
+
/** Row-major matrix of values; every row must be the same length. */
|
|
5
|
+
data: number[][];
|
|
6
|
+
rowLabels?: string[];
|
|
7
|
+
colLabels?: string[];
|
|
8
|
+
/** Legend label for the tooltip's value row (Figma: "Revenue"). */
|
|
9
|
+
valueLabel?: string;
|
|
10
|
+
size?: ChartSize;
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const HeatmapChart: React.FC<HeatmapChartProps>;
|
|
14
|
+
export default HeatmapChart;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { LucideIcon } from 'lucide-react';
|
|
3
|
+
export type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
|
|
4
|
+
export type IconButtonSize = 'sm' | 'md' | 'lg';
|
|
5
|
+
export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
6
|
+
/** Lucide icon component. */
|
|
7
|
+
icon: LucideIcon;
|
|
8
|
+
variant?: IconButtonVariant;
|
|
9
|
+
size?: IconButtonSize;
|
|
10
|
+
/** Required for accessibility — describes the action. */
|
|
11
|
+
'aria-label': string;
|
|
12
|
+
}
|
|
13
|
+
export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
14
|
+
export default IconButton;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type InputSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
4
|
+
/** Field label (Figma: Title). */
|
|
5
|
+
label?: string;
|
|
6
|
+
/** Help text under the field (Figma: Description). */
|
|
7
|
+
description?: string;
|
|
8
|
+
/** Error message — sets error visual state and displays the text. */
|
|
9
|
+
error?: string;
|
|
10
|
+
/** Figma Size axis. Defaults to "md". */
|
|
11
|
+
size?: InputSize;
|
|
12
|
+
/** Strip the field's own border, background and focus highlight so a parent
|
|
13
|
+
* container can own the chrome (used by TopBar's search). */
|
|
14
|
+
unstyled?: boolean;
|
|
15
|
+
leadingIcon?: React.ReactNode;
|
|
16
|
+
trailingIcon?: React.ReactNode;
|
|
17
|
+
}
|
|
18
|
+
export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
19
|
+
export default Input;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
3
|
+
/** Renders a red asterisk after the label text */
|
|
4
|
+
required?: boolean;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
|
|
8
|
+
export default Label;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
3
|
+
export type LineChartVariant = 'default' | 'linear' | 'step' | 'multiple' | 'dots' | 'custom-dots' | 'dots-colors' | 'label' | 'custom-label';
|
|
4
|
+
export interface LineChartProps {
|
|
5
|
+
/** Rows keyed by label plus one field per series. */
|
|
6
|
+
data: Array<Record<string, string | number>>;
|
|
7
|
+
/** Series field names to plot. */
|
|
8
|
+
series: string[];
|
|
9
|
+
/** Field used for the x-axis (defaults to "label"). */
|
|
10
|
+
xKey?: string;
|
|
11
|
+
variant?: LineChartVariant;
|
|
12
|
+
/** Field holding each point's custom label text (variant="custom-label"). */
|
|
13
|
+
labelKey?: string;
|
|
14
|
+
size?: ChartSize;
|
|
15
|
+
/** Pixel height override, takes precedence over `size`'s preset. Recharts'
|
|
16
|
+
* ResponsiveContainer renders its SVG at whatever literal number this prop
|
|
17
|
+
* resolves to and does not re-measure it from CSS, so shrinking a chart to
|
|
18
|
+
* fit a constrained layout must go through this prop, not a CSS override
|
|
19
|
+
* on an ancestor. */
|
|
20
|
+
height?: number;
|
|
21
|
+
showLegend?: boolean;
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
24
|
+
export declare const LineChart: React.FC<LineChartProps>;
|
|
25
|
+
export default LineChart;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
3
|
+
/** Appends an external-link icon and sets target="_blank" rel="noopener noreferrer" */
|
|
4
|
+
external?: boolean;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
|
|
8
|
+
export default Link;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface ListItemProps {
|
|
3
|
+
title: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
leading?: React.ReactNode;
|
|
6
|
+
trailing?: React.ReactNode;
|
|
7
|
+
selected?: boolean;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
onClick?: () => void;
|
|
10
|
+
className?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const ListItem: React.FC<ListItemProps>;
|
|
13
|
+
export default ListItem;
|