@dybo-ai/design 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CLAUDE.md +57 -0
  2. package/README.md +346 -0
  3. package/assets/logo-dybo-01-dark.png +0 -0
  4. package/assets/logo-dybo-01.jpeg +0 -0
  5. package/assets/logo-dybo-01.png +0 -0
  6. package/dist/index.cjs +515 -0
  7. package/dist/index.cjs.map +1 -0
  8. package/dist/index.d.cts +161 -0
  9. package/dist/index.d.ts +161 -0
  10. package/dist/index.js +497 -0
  11. package/dist/index.js.map +1 -0
  12. package/package.json +80 -0
  13. package/theme.css +730 -0
  14. package/tokens.cjs +31 -0
  15. package/tokens.json +132 -0
  16. package/tokens.mjs +40 -0
package/dist/index.d.cts ADDED
@@ -0,0 +1,161 @@
1
+ import * as react from 'react';
2
+ import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, ReactNode, CSSProperties, SelectHTMLAttributes } from 'react';
3
+
4
+ type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
5
+ type ButtonSize = "sm" | "md" | "lg";
6
+ interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
7
+ variant?: ButtonVariant;
8
+ size?: ButtonSize;
9
+ loading?: boolean;
10
+ }
11
+ declare function Button({ variant, size, loading, disabled, className, children, ...props }: IButtonProps): react.JSX.Element;
12
+
13
+ interface ICardProps extends HTMLAttributes<HTMLDivElement> {
14
+ padding?: number | string;
15
+ solid?: boolean;
16
+ }
17
+ declare function Card({ padding, solid, className, style, ...props }: ICardProps): react.JSX.Element;
18
+
19
+ interface IInputProps extends InputHTMLAttributes<HTMLInputElement> {
20
+ label?: string;
21
+ error?: string;
22
+ }
23
+ declare function Input({ label, error, className, id, ...props }: IInputProps): react.JSX.Element;
24
+
25
+ type BadgeStatus = "brand" | "resolved" | "high" | "medium" | "success" | "warning" | "danger";
26
+ interface IBadgeProps extends HTMLAttributes<HTMLSpanElement> {
27
+ status?: BadgeStatus;
28
+ }
29
+ declare function Badge({ status, className, ...props }: IBadgeProps): react.JSX.Element;
30
+
31
+ interface IAppShellProps {
32
+ sidebar: ReactNode;
33
+ topBar?: ReactNode;
34
+ children: ReactNode;
35
+ className?: string;
36
+ }
37
+ declare function AppShell({ sidebar, topBar, children, className, }: IAppShellProps): react.JSX.Element;
38
+
39
+ interface ISidebarUser {
40
+ name: string;
41
+ email?: string;
42
+ }
43
+ interface ISidebarProps {
44
+ brand?: ReactNode;
45
+ children?: ReactNode;
46
+ footer?: ReactNode;
47
+ user?: ISidebarUser;
48
+ onLogout?: () => void;
49
+ className?: string;
50
+ }
51
+ declare function Sidebar({ brand, children, footer, user, onLogout, className, }: ISidebarProps): react.JSX.Element;
52
+
53
+ interface ITopBarProps {
54
+ title: string;
55
+ children?: ReactNode;
56
+ className?: string;
57
+ }
58
+ declare function TopBar({ title, children, className }: ITopBarProps): react.JSX.Element;
59
+
60
+ interface INavItemProps {
61
+ label: string;
62
+ href?: string;
63
+ active?: boolean;
64
+ icon?: ReactNode;
65
+ onClick?: () => void;
66
+ className?: string;
67
+ }
68
+ interface INavSectionProps {
69
+ label: string;
70
+ }
71
+ declare function NavItem({ label, href, active, icon, onClick, className, }: INavItemProps): react.JSX.Element;
72
+ declare function NavSection({ label }: INavSectionProps): react.JSX.Element;
73
+
74
+ type ColumnAlign = "left" | "right" | "center";
75
+ interface IColumn<TRow = Record<string, unknown>> {
76
+ key: string;
77
+ label: string;
78
+ align?: ColumnAlign;
79
+ format?: (value: unknown, row: TRow) => ReactNode;
80
+ className?: string;
81
+ }
82
+ interface IDataTableProps<TRow extends Record<string, unknown> = Record<string, unknown>> {
83
+ columns: IColumn<TRow>[];
84
+ rows: TRow[];
85
+ rowKey?: keyof TRow | ((row: TRow, index: number) => string | number);
86
+ onRowClick?: (row: TRow) => void;
87
+ emptyMessage?: string;
88
+ className?: string;
89
+ }
90
+ declare function DataTable<TRow extends Record<string, unknown>>({ columns, rows, rowKey, onRowClick, emptyMessage, className, }: IDataTableProps<TRow>): react.JSX.Element;
91
+
92
+ interface ITab {
93
+ key: string;
94
+ label: string;
95
+ disabled?: boolean;
96
+ }
97
+ interface ITabsProps {
98
+ tabs: ITab[];
99
+ active: string;
100
+ onChange: (key: string) => void;
101
+ className?: string;
102
+ }
103
+ declare function Tabs({ tabs, active, onChange, className }: ITabsProps): react.JSX.Element;
104
+
105
+ interface IOverviewField {
106
+ label: string;
107
+ value: ReactNode;
108
+ className?: string;
109
+ }
110
+ interface IOverviewGridProps {
111
+ fields: IOverviewField[];
112
+ className?: string;
113
+ }
114
+ interface IOverviewFieldProps extends IOverviewField {
115
+ style?: CSSProperties;
116
+ }
117
+ declare function OverviewField({ label, value, className, style, }: IOverviewFieldProps): react.JSX.Element;
118
+ declare function OverviewGrid({ fields, className }: IOverviewGridProps): react.JSX.Element;
119
+
120
+ interface ISelectOption {
121
+ value: string;
122
+ label: string;
123
+ disabled?: boolean;
124
+ }
125
+ interface ISelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
126
+ label?: string;
127
+ error?: string;
128
+ options: ISelectOption[];
129
+ placeholder?: string;
130
+ }
131
+ declare function Select({ label, error, options, placeholder, className, id, ...props }: ISelectProps): react.JSX.Element;
132
+
133
+ type AlertVariant = "success" | "warning" | "danger" | "info";
134
+ interface IAlertProps {
135
+ variant?: AlertVariant;
136
+ children: ReactNode;
137
+ onClose?: () => void;
138
+ className?: string;
139
+ }
140
+ declare function Alert({ variant, children, onClose, className, }: IAlertProps): react.JSX.Element;
141
+
142
+ interface IModalProps {
143
+ open: boolean;
144
+ onClose: () => void;
145
+ title?: string;
146
+ children: ReactNode;
147
+ footer?: ReactNode;
148
+ maxWidth?: number | string;
149
+ closeOnBackdrop?: boolean;
150
+ }
151
+ declare function Modal({ open, onClose, title, children, footer, maxWidth, closeOnBackdrop, }: IModalProps): react.ReactPortal | null;
152
+
153
+ interface ILoginCardProps {
154
+ logo?: ReactNode;
155
+ subtitle?: string;
156
+ children: ReactNode;
157
+ className?: string;
158
+ }
159
+ declare function LoginCard({ logo, subtitle, children, className, }: ILoginCardProps): react.JSX.Element;
160
+
161
+ export { Alert, type AlertVariant, AppShell, Badge, type BadgeStatus, Button, type ButtonSize, type ButtonVariant, Card, type ColumnAlign, DataTable, type IAlertProps, type IAppShellProps, type IBadgeProps, type IButtonProps, type ICardProps, type IColumn, type IDataTableProps, type IInputProps, type ILoginCardProps, type IModalProps, type INavItemProps, type INavSectionProps, type IOverviewField, type IOverviewFieldProps, type IOverviewGridProps, type ISelectOption, type ISelectProps, type ISidebarProps, type ISidebarUser, type ITab, type ITabsProps, type ITopBarProps, Input, LoginCard, Modal, NavItem, NavSection, OverviewField, OverviewGrid, Select, Sidebar, Tabs, TopBar };
package/dist/index.d.ts ADDED
@@ -0,0 +1,161 @@
1
+ import * as react from 'react';
2
+ import { ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, ReactNode, CSSProperties, SelectHTMLAttributes } from 'react';
3
+
4
+ type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
5
+ type ButtonSize = "sm" | "md" | "lg";
6
+ interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
7
+ variant?: ButtonVariant;
8
+ size?: ButtonSize;
9
+ loading?: boolean;
10
+ }
11
+ declare function Button({ variant, size, loading, disabled, className, children, ...props }: IButtonProps): react.JSX.Element;
12
+
13
+ interface ICardProps extends HTMLAttributes<HTMLDivElement> {
14
+ padding?: number | string;
15
+ solid?: boolean;
16
+ }
17
+ declare function Card({ padding, solid, className, style, ...props }: ICardProps): react.JSX.Element;
18
+
19
+ interface IInputProps extends InputHTMLAttributes<HTMLInputElement> {
20
+ label?: string;
21
+ error?: string;
22
+ }
23
+ declare function Input({ label, error, className, id, ...props }: IInputProps): react.JSX.Element;
24
+
25
+ type BadgeStatus = "brand" | "resolved" | "high" | "medium" | "success" | "warning" | "danger";
26
+ interface IBadgeProps extends HTMLAttributes<HTMLSpanElement> {
27
+ status?: BadgeStatus;
28
+ }
29
+ declare function Badge({ status, className, ...props }: IBadgeProps): react.JSX.Element;
30
+
31
+ interface IAppShellProps {
32
+ sidebar: ReactNode;
33
+ topBar?: ReactNode;
34
+ children: ReactNode;
35
+ className?: string;
36
+ }
37
+ declare function AppShell({ sidebar, topBar, children, className, }: IAppShellProps): react.JSX.Element;
38
+
39
+ interface ISidebarUser {
40
+ name: string;
41
+ email?: string;
42
+ }
43
+ interface ISidebarProps {
44
+ brand?: ReactNode;
45
+ children?: ReactNode;
46
+ footer?: ReactNode;
47
+ user?: ISidebarUser;
48
+ onLogout?: () => void;
49
+ className?: string;
50
+ }
51
+ declare function Sidebar({ brand, children, footer, user, onLogout, className, }: ISidebarProps): react.JSX.Element;
52
+
53
+ interface ITopBarProps {
54
+ title: string;
55
+ children?: ReactNode;
56
+ className?: string;
57
+ }
58
+ declare function TopBar({ title, children, className }: ITopBarProps): react.JSX.Element;
59
+
60
+ interface INavItemProps {
61
+ label: string;
62
+ href?: string;
63
+ active?: boolean;
64
+ icon?: ReactNode;
65
+ onClick?: () => void;
66
+ className?: string;
67
+ }
68
+ interface INavSectionProps {
69
+ label: string;
70
+ }
71
+ declare function NavItem({ label, href, active, icon, onClick, className, }: INavItemProps): react.JSX.Element;
72
+ declare function NavSection({ label }: INavSectionProps): react.JSX.Element;
73
+
74
+ type ColumnAlign = "left" | "right" | "center";
75
+ interface IColumn<TRow = Record<string, unknown>> {
76
+ key: string;
77
+ label: string;
78
+ align?: ColumnAlign;
79
+ format?: (value: unknown, row: TRow) => ReactNode;
80
+ className?: string;
81
+ }
82
+ interface IDataTableProps<TRow extends Record<string, unknown> = Record<string, unknown>> {
83
+ columns: IColumn<TRow>[];
84
+ rows: TRow[];
85
+ rowKey?: keyof TRow | ((row: TRow, index: number) => string | number);
86
+ onRowClick?: (row: TRow) => void;
87
+ emptyMessage?: string;
88
+ className?: string;
89
+ }
90
+ declare function DataTable<TRow extends Record<string, unknown>>({ columns, rows, rowKey, onRowClick, emptyMessage, className, }: IDataTableProps<TRow>): react.JSX.Element;
91
+
92
+ interface ITab {
93
+ key: string;
94
+ label: string;
95
+ disabled?: boolean;
96
+ }
97
+ interface ITabsProps {
98
+ tabs: ITab[];
99
+ active: string;
100
+ onChange: (key: string) => void;
101
+ className?: string;
102
+ }
103
+ declare function Tabs({ tabs, active, onChange, className }: ITabsProps): react.JSX.Element;
104
+
105
+ interface IOverviewField {
106
+ label: string;
107
+ value: ReactNode;
108
+ className?: string;
109
+ }
110
+ interface IOverviewGridProps {
111
+ fields: IOverviewField[];
112
+ className?: string;
113
+ }
114
+ interface IOverviewFieldProps extends IOverviewField {
115
+ style?: CSSProperties;
116
+ }
117
+ declare function OverviewField({ label, value, className, style, }: IOverviewFieldProps): react.JSX.Element;
118
+ declare function OverviewGrid({ fields, className }: IOverviewGridProps): react.JSX.Element;
119
+
120
+ interface ISelectOption {
121
+ value: string;
122
+ label: string;
123
+ disabled?: boolean;
124
+ }
125
+ interface ISelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
126
+ label?: string;
127
+ error?: string;
128
+ options: ISelectOption[];
129
+ placeholder?: string;
130
+ }
131
+ declare function Select({ label, error, options, placeholder, className, id, ...props }: ISelectProps): react.JSX.Element;
132
+
133
+ type AlertVariant = "success" | "warning" | "danger" | "info";
134
+ interface IAlertProps {
135
+ variant?: AlertVariant;
136
+ children: ReactNode;
137
+ onClose?: () => void;
138
+ className?: string;
139
+ }
140
+ declare function Alert({ variant, children, onClose, className, }: IAlertProps): react.JSX.Element;
141
+
142
+ interface IModalProps {
143
+ open: boolean;
144
+ onClose: () => void;
145
+ title?: string;
146
+ children: ReactNode;
147
+ footer?: ReactNode;
148
+ maxWidth?: number | string;
149
+ closeOnBackdrop?: boolean;
150
+ }
151
+ declare function Modal({ open, onClose, title, children, footer, maxWidth, closeOnBackdrop, }: IModalProps): react.ReactPortal | null;
152
+
153
+ interface ILoginCardProps {
154
+ logo?: ReactNode;
155
+ subtitle?: string;
156
+ children: ReactNode;
157
+ className?: string;
158
+ }
159
+ declare function LoginCard({ logo, subtitle, children, className, }: ILoginCardProps): react.JSX.Element;
160
+
161
+ export { Alert, type AlertVariant, AppShell, Badge, type BadgeStatus, Button, type ButtonSize, type ButtonVariant, Card, type ColumnAlign, DataTable, type IAlertProps, type IAppShellProps, type IBadgeProps, type IButtonProps, type ICardProps, type IColumn, type IDataTableProps, type IInputProps, type ILoginCardProps, type IModalProps, type INavItemProps, type INavSectionProps, type IOverviewField, type IOverviewFieldProps, type IOverviewGridProps, type ISelectOption, type ISelectProps, type ISidebarProps, type ISidebarUser, type ITab, type ITabsProps, type ITopBarProps, Input, LoginCard, Modal, NavItem, NavSection, OverviewField, OverviewGrid, Select, Sidebar, Tabs, TopBar };