@onesaz/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.
package/README.md ADDED
@@ -0,0 +1,117 @@
1
+ # @onesaz/ui
2
+
3
+ A React component library with theming, accessibility, and Tailwind CSS support.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @onesaz/ui
9
+ ```
10
+
11
+ ## Quick Start
12
+
13
+ ```tsx
14
+ import '@onesaz/ui/styles.css'
15
+ import { ThemeProvider, Button, Select } from '@onesaz/ui'
16
+
17
+ function App() {
18
+ return (
19
+ <ThemeProvider defaultTheme="system" accentColor="purple">
20
+ <Button>Click me</Button>
21
+
22
+ <Select>
23
+ <Select.Trigger placeholder="Select option..." />
24
+ <Select.Content>
25
+ <Select.Item value="1">Option 1</Select.Item>
26
+ <Select.Item value="2">Option 2</Select.Item>
27
+ </Select.Content>
28
+ </Select>
29
+ </ThemeProvider>
30
+ )
31
+ }
32
+ ```
33
+
34
+ ## Components
35
+
36
+ ### Form Controls
37
+ - `Button` - Buttons with multiple variants
38
+ - `Input` - Text input fields
39
+ - `Textarea` - Multi-line text input
40
+ - `Checkbox` - Checkbox with label support
41
+ - `Switch` - Toggle switch
42
+ - `Select` - Dropdown select with search
43
+ - `Combobox` - Autocomplete input
44
+ - `Label` - Form labels
45
+
46
+ ### Layout
47
+ - `Card` - Container component with header/footer
48
+ - `Separator` - Visual divider
49
+ - `Table` - Data tables with sorting
50
+
51
+ ### Feedback
52
+ - `Badge` - Status badges
53
+ - `Spinner` - Loading indicator
54
+ - `Dialog` - Modal dialogs
55
+
56
+ ### Navigation
57
+ - `Pagination` - Page navigation
58
+
59
+ ## Theming
60
+
61
+ The library supports dynamic theming with:
62
+
63
+ - **Light/Dark mode**: Automatic system preference detection
64
+ - **Accent colors**: purple, blue, cyan, teal, green, orange, red, pink
65
+ - **Gray scales**: slate, gray, zinc, neutral
66
+ - **Border radius**: none, small, medium, large, full
67
+
68
+ ```tsx
69
+ <ThemeProvider
70
+ defaultTheme="system"
71
+ accentColor="blue"
72
+ grayColor="slate"
73
+ radius="medium"
74
+ >
75
+ <App />
76
+ </ThemeProvider>
77
+ ```
78
+
79
+ ### useTheme Hook
80
+
81
+ ```tsx
82
+ import { useTheme } from '@onesaz/ui'
83
+
84
+ function ThemeToggle() {
85
+ const { theme, setTheme } = useTheme()
86
+
87
+ return (
88
+ <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
89
+ Toggle theme
90
+ </button>
91
+ )
92
+ }
93
+ ```
94
+
95
+ ## Tailwind CSS Setup
96
+
97
+ For custom components, use the shared Tailwind config:
98
+
99
+ ```javascript
100
+ // tailwind.config.js
101
+ module.exports = {
102
+ presets: [require('@onesaz/tailwind-config')],
103
+ content: [
104
+ './src/**/*.{js,ts,jsx,tsx}',
105
+ './node_modules/@onesaz/ui/**/*.js',
106
+ ],
107
+ }
108
+ ```
109
+
110
+ ## Peer Dependencies
111
+
112
+ - `react` ^18.0.0
113
+ - `react-dom` ^18.0.0
114
+
115
+ ## License
116
+
117
+ MIT
@@ -0,0 +1,191 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as React from 'react';
3
+ import { Theme, AccentColor, GrayColor, RadiusPreset } from '@onesaz/tokens';
4
+ import { ClassValue } from 'clsx';
5
+ import * as LabelPrimitive from '@radix-ui/react-label';
6
+ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
7
+ import * as SwitchPrimitives from '@radix-ui/react-switch';
8
+ import * as SeparatorPrimitive from '@radix-ui/react-separator';
9
+ import * as SelectPrimitive from '@radix-ui/react-select';
10
+ import * as DialogPrimitive from '@radix-ui/react-dialog';
11
+
12
+ interface ThemeProviderProps {
13
+ children: React.ReactNode;
14
+ defaultTheme?: Theme;
15
+ accentColor?: AccentColor;
16
+ grayColor?: GrayColor;
17
+ radius?: RadiusPreset;
18
+ storageKey?: string;
19
+ }
20
+ declare function ThemeProvider({ children, defaultTheme, accentColor: defaultAccent, grayColor: defaultGray, radius: defaultRadius, storageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
21
+ declare namespace ThemeProvider {
22
+ var displayName: string;
23
+ }
24
+
25
+ interface ThemeContextValue {
26
+ theme: Theme;
27
+ resolvedTheme: 'light' | 'dark';
28
+ accentColor: AccentColor;
29
+ grayColor: GrayColor;
30
+ radius: RadiusPreset;
31
+ setTheme: (theme: Theme) => void;
32
+ setAccentColor: (color: AccentColor) => void;
33
+ setGrayColor: (color: GrayColor) => void;
34
+ setRadius: (radius: RadiusPreset) => void;
35
+ }
36
+ declare const ThemeContext: React.Context<ThemeContextValue | undefined>;
37
+
38
+ declare function useTheme(): ThemeContextValue;
39
+
40
+ declare function cn(...inputs: ClassValue[]): string;
41
+
42
+ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
43
+ variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
44
+ size?: 'default' | 'sm' | 'lg' | 'icon';
45
+ asChild?: boolean;
46
+ }
47
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
48
+
49
+ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
50
+ }
51
+ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
52
+
53
+ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
54
+ }
55
+ declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
56
+
57
+ declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
58
+ declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
59
+ declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
60
+ declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
61
+ declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
62
+ declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
63
+
64
+ interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
65
+ variant?: 'default' | 'secondary' | 'destructive' | 'outline';
66
+ }
67
+ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
68
+
69
+ declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
70
+
71
+ declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
72
+
73
+ declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
74
+
75
+ declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
76
+
77
+ declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
78
+ declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
79
+ declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
80
+ declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
81
+ declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
82
+ declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
83
+ declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
84
+ declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
85
+ declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
86
+ declare const SelectNamespace: React.FC<SelectPrimitive.SelectProps> & {
87
+ Group: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
88
+ Value: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
89
+ Trigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
90
+ Content: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
91
+ Label: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
92
+ Item: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
93
+ Separator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
94
+ ScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
95
+ ScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
96
+ };
97
+
98
+ declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
99
+ declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
100
+ declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
101
+ declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
102
+ declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
103
+ declare const DialogHeader: {
104
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
105
+ displayName: string;
106
+ };
107
+ declare const DialogFooter: {
108
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
109
+ displayName: string;
110
+ };
111
+ declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
112
+ declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
113
+ declare const DialogNamespace: React.FC<DialogPrimitive.DialogProps> & {
114
+ Portal: React.FC<DialogPrimitive.DialogPortalProps>;
115
+ Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
116
+ Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
117
+ Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
118
+ Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
119
+ Header: {
120
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
121
+ displayName: string;
122
+ };
123
+ Footer: {
124
+ ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
125
+ displayName: string;
126
+ };
127
+ Title: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
128
+ Description: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
129
+ };
130
+
131
+ interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
132
+ size?: 'sm' | 'default' | 'lg';
133
+ }
134
+ declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
135
+
136
+ declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
137
+ declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
138
+ declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
139
+ declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
140
+ declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
141
+ declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
142
+ declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
143
+ declare const TableNamespace: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>> & {
144
+ Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
145
+ Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
146
+ Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
147
+ Row: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
148
+ Head: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
149
+ Cell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
150
+ Caption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
151
+ };
152
+
153
+ interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
154
+ }
155
+ declare const PaginationContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
156
+ declare const PaginationItem: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
157
+ interface PaginationLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
158
+ isActive?: boolean;
159
+ }
160
+ declare const PaginationLink: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLButtonElement>>;
161
+ declare const PaginationPrevious: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
162
+ declare const PaginationNext: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
163
+ declare const PaginationEllipsis: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
164
+ declare const PaginationNamespace: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>> & {
165
+ Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
166
+ Item: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
167
+ Link: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLButtonElement>>;
168
+ Previous: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
169
+ Next: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
170
+ Ellipsis: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
171
+ };
172
+
173
+ interface ComboboxOption {
174
+ value: string;
175
+ label: string;
176
+ disabled?: boolean;
177
+ }
178
+ interface ComboboxProps {
179
+ options: ComboboxOption[];
180
+ value?: string;
181
+ defaultValue?: string;
182
+ onValueChange?: (value: string) => void;
183
+ placeholder?: string;
184
+ searchPlaceholder?: string;
185
+ emptyMessage?: string;
186
+ disabled?: boolean;
187
+ className?: string;
188
+ }
189
+ declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLButtonElement>>;
190
+
191
+ export { Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, type ComboboxOption, type ComboboxProps, DialogNamespace as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, type InputProps, Label, PaginationNamespace as Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, type PaginationProps, SelectNamespace as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Spinner, type SpinnerProps, Switch, TableNamespace as Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Textarea, type TextareaProps, ThemeContext, type ThemeContextValue, ThemeProvider, type ThemeProviderProps, cn, useTheme };