@yomologic/react-ui 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.
Files changed (8) hide show
  1. package/README.md +87 -0
  2. package/dist/index.d.mts +208 -0
  3. package/dist/index.d.ts +208 -0
  4. package/dist/index.js +1104 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +1047 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +64 -0
package/README.md ADDED
@@ -0,0 +1,87 @@
1
+ # @yomologic/react-ui
2
+
3
+ A modern, lightweight React UI component library built with TypeScript and designed for flexibility and ease of use.
4
+
5
+ ## Features
6
+
7
+ - 🎨 **Modern Design** - Clean, professional components
8
+ - 📦 **Tree-shakeable** - Import only what you need
9
+ - 🎯 **TypeScript** - Full type safety
10
+ - âš¡ **Zero Dependencies** - Minimal bundle size (except lucide-react for icons)
11
+ - 🎭 **Customizable** - Easy to style and extend
12
+ - ♿ **Accessible** - Built with accessibility in mind
13
+
14
+ ## Installation
15
+
16
+ ```bash
17
+ # Using yarn
18
+ yarn add @yomologic/react-ui
19
+
20
+ # Using npm
21
+ npm install @yomologic/react-ui
22
+ ```
23
+
24
+ ## Usage
25
+
26
+ ```tsx
27
+ import { Button, Input, Card } from "@yomologic/react-ui";
28
+
29
+ function App() {
30
+ return (
31
+ <Card padding="lg">
32
+ <Input label="Email" type="email" placeholder="you@example.com" />
33
+ <Button variant="primary" size="md">
34
+ Submit
35
+ </Button>
36
+ </Card>
37
+ );
38
+ }
39
+ ```
40
+
41
+ ## Components
42
+
43
+ ### UI Components
44
+
45
+ - **Button** - Interactive buttons with variants (primary, secondary, outline, ghost, danger)
46
+ - **Input** - Text inputs with labels, icons, and validation states
47
+ - **Card** - Flexible container with variants and padding options
48
+ - **Badge** - Status indicators and labels
49
+ - **Checkbox** - Single checkboxes and checkbox groups
50
+ - **RadioGroup** - Radio button groups for single selections
51
+ - **Dropdown** - Select dropdowns with search and custom options
52
+ - **Spinner** - Loading indicators
53
+ - **CodeSnippet** - Syntax-highlighted code display
54
+
55
+ ### Feedback Components
56
+
57
+ - **Alert** - Contextual feedback messages (info, success, warning, error)
58
+
59
+ ### Layout Components
60
+
61
+ - **Container** - Responsive page container
62
+ - **SectionLayout** - Layout wrapper for sections
63
+ - **SidebarNav** - Navigation sidebar
64
+
65
+ ### Shared Components
66
+
67
+ - **EmptyState** - Empty state placeholders
68
+
69
+ ## Development
70
+
71
+ ```bash
72
+ # Install dependencies
73
+ yarn install
74
+
75
+ # Build the library
76
+ yarn build
77
+
78
+ # Watch mode for development
79
+ yarn dev
80
+
81
+ # Type check
82
+ yarn type-check
83
+ ```
84
+
85
+ ## License
86
+
87
+ MIT
package/dist/index.d.mts ADDED
@@ -0,0 +1,208 @@
1
+ import React, { ReactNode } from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { ClassValue } from 'clsx';
4
+
5
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
6
+ variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
7
+ size?: "sm" | "md" | "lg";
8
+ isLoading?: boolean;
9
+ leftIcon?: React.ReactNode;
10
+ rightIcon?: React.ReactNode;
11
+ }
12
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
13
+
14
+ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
15
+ label?: string;
16
+ error?: string;
17
+ helperText?: string;
18
+ leftIcon?: React.ReactNode;
19
+ rightIcon?: React.ReactNode;
20
+ fullWidth?: boolean;
21
+ }
22
+ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
23
+
24
+ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
25
+ variant?: "default" | "bordered" | "elevated";
26
+ padding?: "none" | "sm" | "md" | "lg";
27
+ hoverable?: boolean;
28
+ }
29
+ declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
30
+ declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
31
+ declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
32
+ declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
33
+ declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
34
+ declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
35
+
36
+ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
37
+ variant?: "default" | "primary" | "success" | "warning" | "danger" | "info";
38
+ size?: "sm" | "md" | "lg";
39
+ dot?: boolean;
40
+ }
41
+ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
42
+
43
+ interface CheckboxProps {
44
+ label?: string;
45
+ checked?: boolean;
46
+ onChange?: (checked: boolean) => void;
47
+ disabled?: boolean;
48
+ className?: string;
49
+ id?: string;
50
+ }
51
+ declare function Checkbox({ label, checked, onChange, disabled, className, id, }: CheckboxProps): react_jsx_runtime.JSX.Element;
52
+ interface CheckboxOption {
53
+ value: string;
54
+ label: string;
55
+ disabled?: boolean;
56
+ }
57
+ interface CheckboxGroupProps {
58
+ label?: string;
59
+ name: string;
60
+ options: CheckboxOption[];
61
+ value?: string[];
62
+ onChange?: (value: string[]) => void;
63
+ className?: string;
64
+ orientation?: "vertical" | "horizontal";
65
+ required?: boolean;
66
+ disabled?: boolean;
67
+ }
68
+ declare function CheckboxGroup({ label, name, options, value, onChange, className, orientation, required, disabled, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
69
+
70
+ interface RadioOption {
71
+ value: string;
72
+ label: string;
73
+ disabled?: boolean;
74
+ }
75
+ interface RadioGroupProps {
76
+ label?: string;
77
+ name: string;
78
+ options: RadioOption[];
79
+ value?: string;
80
+ onChange?: (value: string) => void;
81
+ className?: string;
82
+ orientation?: "vertical" | "horizontal";
83
+ required?: boolean;
84
+ disabled?: boolean;
85
+ }
86
+ declare function RadioGroup({ label, name, options, value, onChange, className, orientation, required, disabled, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
87
+
88
+ interface DropdownOption {
89
+ value: string | number;
90
+ label: string;
91
+ disabled?: boolean;
92
+ }
93
+ interface DropdownProps {
94
+ /**
95
+ * Label text displayed above the dropdown
96
+ */
97
+ label?: string;
98
+ /**
99
+ * Placeholder text when no option is selected
100
+ */
101
+ placeholder?: string;
102
+ /**
103
+ * Array of options for the dropdown
104
+ */
105
+ options?: DropdownOption[];
106
+ /**
107
+ * Current selected value
108
+ */
109
+ value?: string | number;
110
+ /**
111
+ * Callback when selection changes
112
+ */
113
+ onChange?: (value: string | number) => void;
114
+ /**
115
+ * Custom content to render in the dropdown menu (overrides options)
116
+ */
117
+ children?: ReactNode;
118
+ /**
119
+ * Disable the dropdown
120
+ */
121
+ disabled?: boolean;
122
+ /**
123
+ * Error message to display
124
+ */
125
+ error?: string;
126
+ /**
127
+ * Helper text to display below the dropdown
128
+ */
129
+ helperText?: string;
130
+ /**
131
+ * Mark the field as required
132
+ */
133
+ required?: boolean;
134
+ /**
135
+ * Additional CSS classes
136
+ */
137
+ className?: string;
138
+ }
139
+ declare function Dropdown({ label, placeholder, options, value, onChange, children, disabled, error, helperText, required, className, }: DropdownProps): react_jsx_runtime.JSX.Element;
140
+
141
+ interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
142
+ size?: "sm" | "md" | "lg" | "xl";
143
+ color?: "primary" | "secondary" | "white";
144
+ label?: string;
145
+ }
146
+ declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
147
+
148
+ interface CodeSnippetProps {
149
+ code: string;
150
+ language?: string;
151
+ }
152
+ declare function CodeSnippet({ code, language }: CodeSnippetProps): react_jsx_runtime.JSX.Element;
153
+
154
+ interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
155
+ variant?: "info" | "success" | "warning" | "error";
156
+ title?: string;
157
+ dismissible?: boolean;
158
+ onDismiss?: () => void;
159
+ icon?: React.ReactNode;
160
+ }
161
+ declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
162
+
163
+ interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
164
+ maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
165
+ centered?: boolean;
166
+ padding?: boolean;
167
+ }
168
+ declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
169
+
170
+ interface SectionLayoutProps {
171
+ children: React.ReactNode;
172
+ hasStickyPreview?: boolean;
173
+ }
174
+ /**
175
+ * SectionLayout - Wrapper component for showcase sections
176
+ *
177
+ * @param hasStickyPreview - When true, expects the first child to be a sticky preview section
178
+ * that stays at the top while the rest of the content scrolls
179
+ */
180
+ declare function SectionLayout({ children, hasStickyPreview, }: SectionLayoutProps): react_jsx_runtime.JSX.Element | null;
181
+
182
+ interface NavItem {
183
+ id: string;
184
+ label: string;
185
+ icon?: React.ReactNode;
186
+ }
187
+ interface SidebarNavProps {
188
+ title: string;
189
+ subtitle?: string;
190
+ items: NavItem[];
191
+ activeItem: string;
192
+ onItemClick: (itemId: string) => void;
193
+ footer?: React.ReactNode;
194
+ position?: "left" | "right";
195
+ }
196
+ declare function SidebarNav({ title, subtitle, items, activeItem, onItemClick, footer, position, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
197
+
198
+ interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
199
+ icon?: React.ReactNode;
200
+ title: string;
201
+ description?: string;
202
+ action?: React.ReactNode;
203
+ }
204
+ declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
205
+
206
+ declare function cn(...inputs: ClassValue[]): string;
207
+
208
+ export { Alert, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, Dropdown, EmptyState, Input, type NavItem, RadioGroup, SectionLayout, SidebarNav, Spinner, cn };
package/dist/index.d.ts ADDED
@@ -0,0 +1,208 @@
1
+ import React, { ReactNode } from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { ClassValue } from 'clsx';
4
+
5
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
6
+ variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
7
+ size?: "sm" | "md" | "lg";
8
+ isLoading?: boolean;
9
+ leftIcon?: React.ReactNode;
10
+ rightIcon?: React.ReactNode;
11
+ }
12
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
13
+
14
+ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
15
+ label?: string;
16
+ error?: string;
17
+ helperText?: string;
18
+ leftIcon?: React.ReactNode;
19
+ rightIcon?: React.ReactNode;
20
+ fullWidth?: boolean;
21
+ }
22
+ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
23
+
24
+ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
25
+ variant?: "default" | "bordered" | "elevated";
26
+ padding?: "none" | "sm" | "md" | "lg";
27
+ hoverable?: boolean;
28
+ }
29
+ declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
30
+ declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
31
+ declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
32
+ declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
33
+ declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
34
+ declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
35
+
36
+ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
37
+ variant?: "default" | "primary" | "success" | "warning" | "danger" | "info";
38
+ size?: "sm" | "md" | "lg";
39
+ dot?: boolean;
40
+ }
41
+ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
42
+
43
+ interface CheckboxProps {
44
+ label?: string;
45
+ checked?: boolean;
46
+ onChange?: (checked: boolean) => void;
47
+ disabled?: boolean;
48
+ className?: string;
49
+ id?: string;
50
+ }
51
+ declare function Checkbox({ label, checked, onChange, disabled, className, id, }: CheckboxProps): react_jsx_runtime.JSX.Element;
52
+ interface CheckboxOption {
53
+ value: string;
54
+ label: string;
55
+ disabled?: boolean;
56
+ }
57
+ interface CheckboxGroupProps {
58
+ label?: string;
59
+ name: string;
60
+ options: CheckboxOption[];
61
+ value?: string[];
62
+ onChange?: (value: string[]) => void;
63
+ className?: string;
64
+ orientation?: "vertical" | "horizontal";
65
+ required?: boolean;
66
+ disabled?: boolean;
67
+ }
68
+ declare function CheckboxGroup({ label, name, options, value, onChange, className, orientation, required, disabled, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
69
+
70
+ interface RadioOption {
71
+ value: string;
72
+ label: string;
73
+ disabled?: boolean;
74
+ }
75
+ interface RadioGroupProps {
76
+ label?: string;
77
+ name: string;
78
+ options: RadioOption[];
79
+ value?: string;
80
+ onChange?: (value: string) => void;
81
+ className?: string;
82
+ orientation?: "vertical" | "horizontal";
83
+ required?: boolean;
84
+ disabled?: boolean;
85
+ }
86
+ declare function RadioGroup({ label, name, options, value, onChange, className, orientation, required, disabled, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
87
+
88
+ interface DropdownOption {
89
+ value: string | number;
90
+ label: string;
91
+ disabled?: boolean;
92
+ }
93
+ interface DropdownProps {
94
+ /**
95
+ * Label text displayed above the dropdown
96
+ */
97
+ label?: string;
98
+ /**
99
+ * Placeholder text when no option is selected
100
+ */
101
+ placeholder?: string;
102
+ /**
103
+ * Array of options for the dropdown
104
+ */
105
+ options?: DropdownOption[];
106
+ /**
107
+ * Current selected value
108
+ */
109
+ value?: string | number;
110
+ /**
111
+ * Callback when selection changes
112
+ */
113
+ onChange?: (value: string | number) => void;
114
+ /**
115
+ * Custom content to render in the dropdown menu (overrides options)
116
+ */
117
+ children?: ReactNode;
118
+ /**
119
+ * Disable the dropdown
120
+ */
121
+ disabled?: boolean;
122
+ /**
123
+ * Error message to display
124
+ */
125
+ error?: string;
126
+ /**
127
+ * Helper text to display below the dropdown
128
+ */
129
+ helperText?: string;
130
+ /**
131
+ * Mark the field as required
132
+ */
133
+ required?: boolean;
134
+ /**
135
+ * Additional CSS classes
136
+ */
137
+ className?: string;
138
+ }
139
+ declare function Dropdown({ label, placeholder, options, value, onChange, children, disabled, error, helperText, required, className, }: DropdownProps): react_jsx_runtime.JSX.Element;
140
+
141
+ interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
142
+ size?: "sm" | "md" | "lg" | "xl";
143
+ color?: "primary" | "secondary" | "white";
144
+ label?: string;
145
+ }
146
+ declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
147
+
148
+ interface CodeSnippetProps {
149
+ code: string;
150
+ language?: string;
151
+ }
152
+ declare function CodeSnippet({ code, language }: CodeSnippetProps): react_jsx_runtime.JSX.Element;
153
+
154
+ interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
155
+ variant?: "info" | "success" | "warning" | "error";
156
+ title?: string;
157
+ dismissible?: boolean;
158
+ onDismiss?: () => void;
159
+ icon?: React.ReactNode;
160
+ }
161
+ declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
162
+
163
+ interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
164
+ maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
165
+ centered?: boolean;
166
+ padding?: boolean;
167
+ }
168
+ declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
169
+
170
+ interface SectionLayoutProps {
171
+ children: React.ReactNode;
172
+ hasStickyPreview?: boolean;
173
+ }
174
+ /**
175
+ * SectionLayout - Wrapper component for showcase sections
176
+ *
177
+ * @param hasStickyPreview - When true, expects the first child to be a sticky preview section
178
+ * that stays at the top while the rest of the content scrolls
179
+ */
180
+ declare function SectionLayout({ children, hasStickyPreview, }: SectionLayoutProps): react_jsx_runtime.JSX.Element | null;
181
+
182
+ interface NavItem {
183
+ id: string;
184
+ label: string;
185
+ icon?: React.ReactNode;
186
+ }
187
+ interface SidebarNavProps {
188
+ title: string;
189
+ subtitle?: string;
190
+ items: NavItem[];
191
+ activeItem: string;
192
+ onItemClick: (itemId: string) => void;
193
+ footer?: React.ReactNode;
194
+ position?: "left" | "right";
195
+ }
196
+ declare function SidebarNav({ title, subtitle, items, activeItem, onItemClick, footer, position, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
197
+
198
+ interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
199
+ icon?: React.ReactNode;
200
+ title: string;
201
+ description?: string;
202
+ action?: React.ReactNode;
203
+ }
204
+ declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
205
+
206
+ declare function cn(...inputs: ClassValue[]): string;
207
+
208
+ export { Alert, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CodeSnippet, Container, Dropdown, EmptyState, Input, type NavItem, RadioGroup, SectionLayout, SidebarNav, Spinner, cn };