shubh-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 +141 -0
- package/dist/index.d.mts +535 -0
- package/dist/index.d.ts +535 -0
- package/dist/index.js +3782 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +3702 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +76 -0
package/README.md
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
# @shubh/ui
|
|
2
|
+
|
|
3
|
+
Reusable React UI component library built with TypeScript, Tailwind CSS, and tsup.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @shubh/ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Peer dependencies (required by consumer app):
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install react react-dom
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Tailwind Requirement
|
|
18
|
+
|
|
19
|
+
This package uses Tailwind utility classes and does **not** bundle Tailwind.
|
|
20
|
+
Consumers must configure Tailwind in their React/Next.js app.
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import { Button, Input, Card, Navbar, Sidebar } from "@shubh/ui";
|
|
26
|
+
|
|
27
|
+
export function Example() {
|
|
28
|
+
return (
|
|
29
|
+
<Card>
|
|
30
|
+
<Button variant="primary" size="lg" loading={false}>
|
|
31
|
+
Save
|
|
32
|
+
</Button>
|
|
33
|
+
<Input label="Email" placeholder="you@example.com" />
|
|
34
|
+
</Card>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Admin Dashboard Usage
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import { Topbar, AdminSidebar, StatsCard, Table, Pagination } from "@shubh/ui";
|
|
43
|
+
import { BarChart3, Users, TrendingUp } from "lucide-react";
|
|
44
|
+
|
|
45
|
+
export function AdminDashboard() {
|
|
46
|
+
const [page, setPage] = useState(1);
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<div className="flex h-screen">
|
|
50
|
+
<AdminSidebar
|
|
51
|
+
collapsed={false}
|
|
52
|
+
activeItem="dashboard"
|
|
53
|
+
navigation={[
|
|
54
|
+
{ id: "dashboard", label: "Dashboard", icon: <Home /> },
|
|
55
|
+
{ id: "users", label: "Users", icon: <Users /> },
|
|
56
|
+
{ id: "reports", label: "Reports", icon: <BarChart3 /> },
|
|
57
|
+
]}
|
|
58
|
+
/>
|
|
59
|
+
<div className="flex-1 flex flex-col">
|
|
60
|
+
<Topbar
|
|
61
|
+
title="Dashboard"
|
|
62
|
+
notifications={3}
|
|
63
|
+
userName="John Doe"
|
|
64
|
+
onSearchChange={(q) => console.log("Search:", q)}
|
|
65
|
+
/>
|
|
66
|
+
<main className="flex-1 overflow-auto p-6">
|
|
67
|
+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
68
|
+
<StatsCard
|
|
69
|
+
title="Total Users"
|
|
70
|
+
value="2,543"
|
|
71
|
+
trend="up"
|
|
72
|
+
trendPercent={12}
|
|
73
|
+
icon={<Users className="h-6 w-6" />}
|
|
74
|
+
/>
|
|
75
|
+
<StatsCard
|
|
76
|
+
title="Revenue"
|
|
77
|
+
value="$45,230"
|
|
78
|
+
trend="up"
|
|
79
|
+
trendPercent={8}
|
|
80
|
+
icon={<TrendingUp className="h-6 w-6" />}
|
|
81
|
+
/>
|
|
82
|
+
</div>
|
|
83
|
+
<Table columns={columns} data={tableData} />
|
|
84
|
+
<Pagination total={100} page={page} onPageChange={setPage} />
|
|
85
|
+
</main>
|
|
86
|
+
</div>
|
|
87
|
+
</div>
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Available Starter Exports
|
|
93
|
+
|
|
94
|
+
### Core Components
|
|
95
|
+
- Button
|
|
96
|
+
- Input
|
|
97
|
+
- Card
|
|
98
|
+
- Modal
|
|
99
|
+
- Badge
|
|
100
|
+
- Tabs
|
|
101
|
+
- Select
|
|
102
|
+
- Textarea
|
|
103
|
+
|
|
104
|
+
### Data & Display
|
|
105
|
+
- Table
|
|
106
|
+
- Pagination
|
|
107
|
+
- Sidebar (layout)
|
|
108
|
+
- Navbar (layout)
|
|
109
|
+
|
|
110
|
+
### Admin Dashboard Components
|
|
111
|
+
- **Topbar** — Header with menu toggle, search, notifications, and user profile
|
|
112
|
+
- **AdminSidebar** — Collapsible sidebar navigation with icons and nested items
|
|
113
|
+
- **StatsCard** — KPI card with title, value, trend, and icon support
|
|
114
|
+
- **Form Components** — Input, Select, Textarea, Checkbox, Radio, Switch for admin forms
|
|
115
|
+
- **DataTable** — Sortable table with pagination and row actions
|
|
116
|
+
- **Pagination** — Page navigation with configurable steps
|
|
117
|
+
|
|
118
|
+
### Utilities & Hooks
|
|
119
|
+
- `cn()` — Tailwind class merger (clsx + tailwind-merge)
|
|
120
|
+
- `useToggle()` — Boolean state toggle
|
|
121
|
+
- `useDebounce()` — Debounce values
|
|
122
|
+
- `useClickOutside()` — Detect clicks outside element
|
|
123
|
+
|
|
124
|
+
## Scripts
|
|
125
|
+
|
|
126
|
+
```bash
|
|
127
|
+
npm run dev # tsup watch build
|
|
128
|
+
npm run build # library build (esm + cjs + d.ts)
|
|
129
|
+
npm run lint # lint
|
|
130
|
+
npm run dev:showcase # Next.js showcase page
|
|
131
|
+
npm run build:showcase
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## Build Output
|
|
135
|
+
|
|
136
|
+
`tsup` compiles from `src/index.ts` and generates:
|
|
137
|
+
|
|
138
|
+
- ESM
|
|
139
|
+
- CommonJS
|
|
140
|
+
- Type definitions
|
|
141
|
+
- Sourcemaps
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,535 @@
|
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import React__default, { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, HTMLAttributes, RefObject } from 'react';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
import { ClassValue } from 'clsx';
|
|
7
|
+
|
|
8
|
+
declare const buttonVariants: (props?: ({
|
|
9
|
+
variant?: "primary" | "secondary" | "outline" | "ghost" | "danger" | "destructive" | "navy" | "success" | "warning" | "link" | null | undefined;
|
|
10
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
|
|
11
|
+
fullWidth?: boolean | null | undefined;
|
|
12
|
+
loading?: boolean | null | undefined;
|
|
13
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
14
|
+
|
|
15
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
16
|
+
loading?: boolean;
|
|
17
|
+
leftIcon?: ReactNode;
|
|
18
|
+
rightIcon?: ReactNode;
|
|
19
|
+
fullWidth?: boolean;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
23
|
+
|
|
24
|
+
interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
25
|
+
variant?: "default" | "error" | "success";
|
|
26
|
+
size?: "sm" | "md" | "lg";
|
|
27
|
+
leftElement?: ReactNode;
|
|
28
|
+
rightElement?: ReactNode;
|
|
29
|
+
clearable?: boolean;
|
|
30
|
+
onClear?: () => void;
|
|
31
|
+
error?: string | boolean;
|
|
32
|
+
success?: string;
|
|
33
|
+
hint?: string;
|
|
34
|
+
label?: string;
|
|
35
|
+
required?: boolean;
|
|
36
|
+
}
|
|
37
|
+
declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
38
|
+
|
|
39
|
+
declare const inputVariants: (props?: ({
|
|
40
|
+
variant?: "success" | "default" | "error" | null | undefined;
|
|
41
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
42
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
43
|
+
|
|
44
|
+
declare const cardVariants: (props?: ({
|
|
45
|
+
variant?: "primary" | "outline" | "ghost" | "navy" | "default" | "elevated" | "outlined" | "filled" | "accent" | null | undefined;
|
|
46
|
+
padding?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
|
|
47
|
+
hoverable?: boolean | null | undefined;
|
|
48
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
49
|
+
interface CardProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
|
|
50
|
+
}
|
|
51
|
+
declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
52
|
+
declare const CardHeader: React$1.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
53
|
+
declare const CardTitle: React$1.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
54
|
+
declare const CardDescription: React$1.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
55
|
+
declare const CardContent: React$1.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
56
|
+
declare const CardFooter: React$1.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
57
|
+
|
|
58
|
+
interface ModalProps {
|
|
59
|
+
open: boolean;
|
|
60
|
+
onClose: () => void;
|
|
61
|
+
title?: string;
|
|
62
|
+
description?: string;
|
|
63
|
+
children?: React__default.ReactNode;
|
|
64
|
+
footer?: React__default.ReactNode;
|
|
65
|
+
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
66
|
+
closeOnOverlay?: boolean;
|
|
67
|
+
closeOnEsc?: boolean;
|
|
68
|
+
showCloseButton?: boolean;
|
|
69
|
+
className?: string;
|
|
70
|
+
}
|
|
71
|
+
declare const Modal: React__default.FC<ModalProps>;
|
|
72
|
+
|
|
73
|
+
interface TableColumn<T = Record<string, unknown>> {
|
|
74
|
+
key: string;
|
|
75
|
+
header: React__default.ReactNode;
|
|
76
|
+
cell?: (row: T, index: number) => React__default.ReactNode;
|
|
77
|
+
width?: string;
|
|
78
|
+
align?: 'left' | 'center' | 'right';
|
|
79
|
+
sortable?: boolean;
|
|
80
|
+
}
|
|
81
|
+
interface TableProps<T = Record<string, unknown>> {
|
|
82
|
+
columns: TableColumn<T>[];
|
|
83
|
+
data: T[];
|
|
84
|
+
keyExtractor: (row: T, index: number) => string;
|
|
85
|
+
sortKey?: string;
|
|
86
|
+
sortDir?: 'asc' | 'desc';
|
|
87
|
+
onSort?: (key: string) => void;
|
|
88
|
+
onRowClick?: (row: T) => void;
|
|
89
|
+
striped?: boolean;
|
|
90
|
+
hoverable?: boolean;
|
|
91
|
+
bordered?: boolean;
|
|
92
|
+
compact?: boolean;
|
|
93
|
+
className?: string;
|
|
94
|
+
emptyMessage?: string;
|
|
95
|
+
loading?: boolean;
|
|
96
|
+
}
|
|
97
|
+
declare function Table<T = Record<string, unknown>>({ columns, data, keyExtractor, sortKey, sortDir, onSort, onRowClick, striped, hoverable, bordered, compact, className, emptyMessage, loading, }: TableProps<T>): react_jsx_runtime.JSX.Element;
|
|
98
|
+
declare namespace Table {
|
|
99
|
+
var displayName: string;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
interface PaginationProps {
|
|
103
|
+
total: number;
|
|
104
|
+
page: number;
|
|
105
|
+
pageSize?: number;
|
|
106
|
+
onPageChange: (page: number) => void;
|
|
107
|
+
onPageSizeChange?: (size: number) => void;
|
|
108
|
+
pageSizeOptions?: number[];
|
|
109
|
+
showPageSize?: boolean;
|
|
110
|
+
showTotal?: boolean;
|
|
111
|
+
showFirstLast?: boolean;
|
|
112
|
+
siblingCount?: number;
|
|
113
|
+
className?: string;
|
|
114
|
+
size?: 'sm' | 'md' | 'lg';
|
|
115
|
+
}
|
|
116
|
+
declare const Pagination: React__default.FC<PaginationProps>;
|
|
117
|
+
|
|
118
|
+
interface SelectOption {
|
|
119
|
+
value: string;
|
|
120
|
+
label: string;
|
|
121
|
+
disabled?: boolean;
|
|
122
|
+
description?: string;
|
|
123
|
+
icon?: React__default.ReactNode;
|
|
124
|
+
}
|
|
125
|
+
interface SelectProps {
|
|
126
|
+
options: SelectOption[];
|
|
127
|
+
value?: string | string[];
|
|
128
|
+
onChange?: (value: string | string[]) => void;
|
|
129
|
+
placeholder?: string;
|
|
130
|
+
label?: string;
|
|
131
|
+
hint?: string;
|
|
132
|
+
error?: string;
|
|
133
|
+
disabled?: boolean;
|
|
134
|
+
multiple?: boolean;
|
|
135
|
+
clearable?: boolean;
|
|
136
|
+
size?: 'sm' | 'md' | 'lg';
|
|
137
|
+
className?: string;
|
|
138
|
+
id?: string;
|
|
139
|
+
required?: boolean;
|
|
140
|
+
}
|
|
141
|
+
declare const Select: React__default.ForwardRefExoticComponent<SelectProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
142
|
+
|
|
143
|
+
interface TextareaProps extends React__default.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
144
|
+
label?: string;
|
|
145
|
+
hint?: string;
|
|
146
|
+
error?: string;
|
|
147
|
+
success?: string;
|
|
148
|
+
required?: boolean;
|
|
149
|
+
resize?: 'none' | 'both' | 'horizontal' | 'vertical';
|
|
150
|
+
showCount?: boolean;
|
|
151
|
+
maxLength?: number;
|
|
152
|
+
}
|
|
153
|
+
declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
|
|
154
|
+
|
|
155
|
+
declare const badgeVariants: (props?: ({
|
|
156
|
+
variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | "navy" | "success" | "warning" | "default" | "info" | null | undefined;
|
|
157
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
158
|
+
dot?: boolean | null | undefined;
|
|
159
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
160
|
+
interface BadgeProps extends React__default.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
|
|
161
|
+
dot?: boolean;
|
|
162
|
+
dotColor?: string;
|
|
163
|
+
removable?: boolean;
|
|
164
|
+
onRemove?: () => void;
|
|
165
|
+
}
|
|
166
|
+
declare const Badge: React__default.FC<BadgeProps>;
|
|
167
|
+
|
|
168
|
+
interface TabItem {
|
|
169
|
+
id: string;
|
|
170
|
+
label: React__default.ReactNode;
|
|
171
|
+
content: React__default.ReactNode;
|
|
172
|
+
disabled?: boolean;
|
|
173
|
+
badge?: string | number;
|
|
174
|
+
icon?: React__default.ReactNode;
|
|
175
|
+
}
|
|
176
|
+
interface TabsProps {
|
|
177
|
+
items: TabItem[];
|
|
178
|
+
defaultTab?: string;
|
|
179
|
+
activeTab?: string;
|
|
180
|
+
onChange?: (id: string) => void;
|
|
181
|
+
variant?: 'line' | 'pill' | 'enclosed' | 'soft';
|
|
182
|
+
size?: 'sm' | 'md' | 'lg';
|
|
183
|
+
fullWidth?: boolean;
|
|
184
|
+
className?: string;
|
|
185
|
+
contentClassName?: string;
|
|
186
|
+
}
|
|
187
|
+
declare const Tabs: React__default.FC<TabsProps>;
|
|
188
|
+
|
|
189
|
+
interface AccordionItem {
|
|
190
|
+
id: string;
|
|
191
|
+
title: React__default.ReactNode;
|
|
192
|
+
content: React__default.ReactNode;
|
|
193
|
+
disabled?: boolean;
|
|
194
|
+
icon?: React__default.ReactNode;
|
|
195
|
+
badge?: React__default.ReactNode;
|
|
196
|
+
}
|
|
197
|
+
interface AccordionProps {
|
|
198
|
+
items: AccordionItem[];
|
|
199
|
+
defaultOpen?: string[];
|
|
200
|
+
multiple?: boolean;
|
|
201
|
+
variant?: 'default' | 'bordered' | 'flush' | 'filled';
|
|
202
|
+
className?: string;
|
|
203
|
+
}
|
|
204
|
+
declare const Accordion: React__default.FC<AccordionProps>;
|
|
205
|
+
|
|
206
|
+
declare const alertVariants: (props?: ({
|
|
207
|
+
variant?: "destructive" | "navy" | "success" | "warning" | "info" | "neutral" | null | undefined;
|
|
208
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
209
|
+
interface AlertProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
|
|
210
|
+
title?: string;
|
|
211
|
+
dismissible?: boolean;
|
|
212
|
+
onDismiss?: () => void;
|
|
213
|
+
icon?: React__default.ReactNode;
|
|
214
|
+
action?: React__default.ReactNode;
|
|
215
|
+
}
|
|
216
|
+
declare const Alert: React__default.FC<AlertProps>;
|
|
217
|
+
|
|
218
|
+
declare const avatarVariants: (props?: ({
|
|
219
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
|
|
220
|
+
shape?: "circle" | "square" | null | undefined;
|
|
221
|
+
variant?: "primary" | "navy" | "icon" | "image" | "initials" | null | undefined;
|
|
222
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
223
|
+
interface AvatarProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
|
|
224
|
+
src?: string;
|
|
225
|
+
alt?: string;
|
|
226
|
+
initials?: string;
|
|
227
|
+
status?: 'online' | 'offline' | 'busy' | 'away';
|
|
228
|
+
}
|
|
229
|
+
declare const Avatar: React__default.FC<AvatarProps>;
|
|
230
|
+
|
|
231
|
+
interface BreadcrumbItem {
|
|
232
|
+
label: string;
|
|
233
|
+
href?: string;
|
|
234
|
+
icon?: React__default.ReactNode;
|
|
235
|
+
}
|
|
236
|
+
interface BreadcrumbProps {
|
|
237
|
+
items: BreadcrumbItem[];
|
|
238
|
+
separator?: React__default.ReactNode;
|
|
239
|
+
showHome?: boolean;
|
|
240
|
+
maxItems?: number;
|
|
241
|
+
className?: string;
|
|
242
|
+
size?: 'sm' | 'md' | 'lg';
|
|
243
|
+
}
|
|
244
|
+
declare const Breadcrumb: React__default.FC<BreadcrumbProps>;
|
|
245
|
+
|
|
246
|
+
type CalendarSize = 'sm' | 'md' | 'lg';
|
|
247
|
+
type CalendarView = 'day' | 'month' | 'year';
|
|
248
|
+
type CalendarTheme = 'navy' | 'light';
|
|
249
|
+
interface CalendarProps {
|
|
250
|
+
/** Controlled selected date */
|
|
251
|
+
value?: Date | null;
|
|
252
|
+
/** Default selected date (uncontrolled) */
|
|
253
|
+
defaultValue?: Date | null;
|
|
254
|
+
/** Called when a date is selected */
|
|
255
|
+
onChange?: (date: Date) => void;
|
|
256
|
+
/** Size variant */
|
|
257
|
+
size?: CalendarSize;
|
|
258
|
+
/** Theme variant */
|
|
259
|
+
theme?: CalendarTheme;
|
|
260
|
+
/** Initial view to show */
|
|
261
|
+
initialView?: CalendarView;
|
|
262
|
+
/** Minimum selectable date */
|
|
263
|
+
minDate?: Date;
|
|
264
|
+
/** Maximum selectable date */
|
|
265
|
+
maxDate?: Date;
|
|
266
|
+
/** Additional class names */
|
|
267
|
+
className?: string;
|
|
268
|
+
/** ARIA label for the calendar */
|
|
269
|
+
'aria-label'?: string;
|
|
270
|
+
}
|
|
271
|
+
declare function Calendar({ value, defaultValue, onChange, size, theme, initialView, minDate, maxDate, className, 'aria-label': ariaLabel, }: CalendarProps): react_jsx_runtime.JSX.Element;
|
|
272
|
+
|
|
273
|
+
declare const calendarVariants: (props?: ({
|
|
274
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
275
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
276
|
+
declare const calendarCellVariants: (props?: ({
|
|
277
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
278
|
+
selected?: boolean | null | undefined;
|
|
279
|
+
outside?: boolean | null | undefined;
|
|
280
|
+
disabled?: boolean | null | undefined;
|
|
281
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
282
|
+
|
|
283
|
+
interface CheckboxProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
|
|
284
|
+
label?: string;
|
|
285
|
+
description?: string;
|
|
286
|
+
size?: 'sm' | 'md' | 'lg';
|
|
287
|
+
indeterminate?: boolean;
|
|
288
|
+
error?: string;
|
|
289
|
+
}
|
|
290
|
+
declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
291
|
+
|
|
292
|
+
interface DividerProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
293
|
+
orientation?: 'horizontal' | 'vertical';
|
|
294
|
+
label?: React__default.ReactNode;
|
|
295
|
+
labelAlign?: 'left' | 'center' | 'right';
|
|
296
|
+
variant?: 'solid' | 'dashed' | 'dotted';
|
|
297
|
+
thickness?: 'thin' | 'medium' | 'thick';
|
|
298
|
+
}
|
|
299
|
+
declare const Divider: React__default.FC<DividerProps>;
|
|
300
|
+
|
|
301
|
+
interface DrawerProps {
|
|
302
|
+
open: boolean;
|
|
303
|
+
onClose: () => void;
|
|
304
|
+
title?: string;
|
|
305
|
+
description?: string;
|
|
306
|
+
children?: React__default.ReactNode;
|
|
307
|
+
footer?: React__default.ReactNode;
|
|
308
|
+
placement?: 'left' | 'right' | 'top' | 'bottom';
|
|
309
|
+
size?: 'sm' | 'md' | 'lg' | 'full';
|
|
310
|
+
closeOnOverlay?: boolean;
|
|
311
|
+
closeOnEsc?: boolean;
|
|
312
|
+
showCloseButton?: boolean;
|
|
313
|
+
className?: string;
|
|
314
|
+
}
|
|
315
|
+
declare const Drawer: React__default.FC<DrawerProps>;
|
|
316
|
+
|
|
317
|
+
interface DropdownItem {
|
|
318
|
+
id: string;
|
|
319
|
+
label: React__default.ReactNode;
|
|
320
|
+
icon?: React__default.ReactNode;
|
|
321
|
+
shortcut?: string;
|
|
322
|
+
disabled?: boolean;
|
|
323
|
+
danger?: boolean;
|
|
324
|
+
checked?: boolean;
|
|
325
|
+
separator?: false;
|
|
326
|
+
onClick?: () => void;
|
|
327
|
+
children?: DropdownItem[];
|
|
328
|
+
}
|
|
329
|
+
interface DropdownSeparator {
|
|
330
|
+
id: string;
|
|
331
|
+
separator: true;
|
|
332
|
+
label?: string;
|
|
333
|
+
}
|
|
334
|
+
type DropdownMenuItem = DropdownItem | DropdownSeparator;
|
|
335
|
+
interface DropdownProps {
|
|
336
|
+
trigger: React__default.ReactNode;
|
|
337
|
+
items: DropdownMenuItem[];
|
|
338
|
+
align?: 'left' | 'right';
|
|
339
|
+
className?: string;
|
|
340
|
+
menuClassName?: string;
|
|
341
|
+
}
|
|
342
|
+
declare const Dropdown: React__default.FC<DropdownProps>;
|
|
343
|
+
|
|
344
|
+
declare const labelVariants: (props?: ({
|
|
345
|
+
variant?: "default" | "error" | "muted" | null | undefined;
|
|
346
|
+
required?: boolean | null | undefined;
|
|
347
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
348
|
+
interface LabelProps extends React__default.LabelHTMLAttributes<HTMLLabelElement>, VariantProps<typeof labelVariants> {
|
|
349
|
+
}
|
|
350
|
+
declare const Label: React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>;
|
|
351
|
+
|
|
352
|
+
declare const progressTrackVariants: (props?: ({
|
|
353
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
354
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
355
|
+
interface ProgressProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof progressTrackVariants> {
|
|
356
|
+
value: number;
|
|
357
|
+
max?: number;
|
|
358
|
+
color?: 'primary' | 'success' | 'warning' | 'destructive' | 'navy';
|
|
359
|
+
showLabel?: boolean;
|
|
360
|
+
label?: string;
|
|
361
|
+
animated?: boolean;
|
|
362
|
+
striped?: boolean;
|
|
363
|
+
}
|
|
364
|
+
declare const Progress: React__default.FC<ProgressProps>;
|
|
365
|
+
|
|
366
|
+
interface RadioProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
|
|
367
|
+
label?: string;
|
|
368
|
+
description?: string;
|
|
369
|
+
size?: 'sm' | 'md' | 'lg';
|
|
370
|
+
error?: string;
|
|
371
|
+
}
|
|
372
|
+
declare const Radio: React__default.ForwardRefExoticComponent<RadioProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
373
|
+
|
|
374
|
+
type SortDirection = 'asc' | 'desc' | null;
|
|
375
|
+
type FetchParams = {
|
|
376
|
+
page: number;
|
|
377
|
+
pageSize: number;
|
|
378
|
+
search: string;
|
|
379
|
+
sortField: string | null;
|
|
380
|
+
sortDirection: SortDirection;
|
|
381
|
+
status: 'active' | 'closed';
|
|
382
|
+
};
|
|
383
|
+
type FetchResult<T> = {
|
|
384
|
+
data: T[];
|
|
385
|
+
total: number;
|
|
386
|
+
};
|
|
387
|
+
type ServerDataTableTheme = 'navy' | 'light';
|
|
388
|
+
interface ServerDataTableProps<T extends Record<string, unknown>> {
|
|
389
|
+
fetchData: (params: FetchParams) => Promise<FetchResult<T>>;
|
|
390
|
+
columns: ColumnDef<T>[];
|
|
391
|
+
keyExtractor: (row: T) => string;
|
|
392
|
+
pageSize?: number;
|
|
393
|
+
renderExpandedRow?: (row: T, note: string, onNoteChange: (v: string) => void, onApprove: () => void, onReject: () => void) => React__default.ReactNode;
|
|
394
|
+
onApprove?: (row: T, note: string) => void;
|
|
395
|
+
onReject?: (row: T, note: string) => void;
|
|
396
|
+
appliedDateField?: keyof T;
|
|
397
|
+
className?: string;
|
|
398
|
+
theme?: ServerDataTableTheme;
|
|
399
|
+
}
|
|
400
|
+
type ColumnDef<T> = {
|
|
401
|
+
key: string;
|
|
402
|
+
header: string;
|
|
403
|
+
sortable?: boolean;
|
|
404
|
+
cell?: (row: T) => React__default.ReactNode;
|
|
405
|
+
width?: string;
|
|
406
|
+
};
|
|
407
|
+
declare function ServerDataTable<T extends Record<string, unknown>>({ fetchData, columns, keyExtractor, pageSize, renderExpandedRow, onApprove, onReject, appliedDateField, className, theme, }: ServerDataTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
408
|
+
|
|
409
|
+
interface SkeletonProps extends React__default.HTMLAttributes<HTMLDivElement> {
|
|
410
|
+
variant?: 'text' | 'circle' | 'rect' | 'card';
|
|
411
|
+
width?: string | number;
|
|
412
|
+
height?: string | number;
|
|
413
|
+
lines?: number;
|
|
414
|
+
animated?: boolean;
|
|
415
|
+
}
|
|
416
|
+
declare const Skeleton: React__default.FC<SkeletonProps>;
|
|
417
|
+
declare const SkeletonCard: React__default.FC<{
|
|
418
|
+
className?: string;
|
|
419
|
+
}>;
|
|
420
|
+
|
|
421
|
+
declare const spinnerVariants: (props?: ({
|
|
422
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
423
|
+
color?: "primary" | "danger" | "success" | "warning" | "muted" | "white" | null | undefined;
|
|
424
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
425
|
+
interface SpinnerProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'color'>, VariantProps<typeof spinnerVariants> {
|
|
426
|
+
label?: string;
|
|
427
|
+
}
|
|
428
|
+
declare const Spinner: React__default.FC<SpinnerProps>;
|
|
429
|
+
|
|
430
|
+
interface SwitchProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
|
|
431
|
+
label?: string;
|
|
432
|
+
description?: string;
|
|
433
|
+
size?: 'sm' | 'md' | 'lg';
|
|
434
|
+
labelPlacement?: 'left' | 'right';
|
|
435
|
+
}
|
|
436
|
+
declare const Switch: React__default.ForwardRefExoticComponent<SwitchProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
437
|
+
|
|
438
|
+
interface TagProps extends React__default.HTMLAttributes<HTMLSpanElement> {
|
|
439
|
+
size?: 'sm' | 'md' | 'lg';
|
|
440
|
+
variant?: 'default' | 'outlined' | 'filled' | 'navy';
|
|
441
|
+
color?: 'default' | 'blue' | 'green' | 'red' | 'amber' | 'purple' | 'pink';
|
|
442
|
+
removable?: boolean;
|
|
443
|
+
onRemove?: () => void;
|
|
444
|
+
icon?: React__default.ReactNode;
|
|
445
|
+
}
|
|
446
|
+
declare const Tag: React__default.FC<TagProps>;
|
|
447
|
+
|
|
448
|
+
interface TooltipProps {
|
|
449
|
+
content: React__default.ReactNode;
|
|
450
|
+
children: React__default.ReactElement;
|
|
451
|
+
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
452
|
+
delay?: number;
|
|
453
|
+
className?: string;
|
|
454
|
+
maxWidth?: string;
|
|
455
|
+
disabled?: boolean;
|
|
456
|
+
}
|
|
457
|
+
declare const Tooltip: React__default.FC<TooltipProps>;
|
|
458
|
+
|
|
459
|
+
interface TopbarProps extends HTMLAttributes<HTMLElement> {
|
|
460
|
+
title?: string;
|
|
461
|
+
onSearchChange?: (query: string) => void;
|
|
462
|
+
onMenuToggle?: () => void;
|
|
463
|
+
menuOpen?: boolean;
|
|
464
|
+
notifications?: number;
|
|
465
|
+
onNotifications?: () => void;
|
|
466
|
+
onProfile?: () => void;
|
|
467
|
+
profileImage?: string;
|
|
468
|
+
userName?: string;
|
|
469
|
+
}
|
|
470
|
+
declare const Topbar: React$1.ForwardRefExoticComponent<TopbarProps & React$1.RefAttributes<HTMLElement>>;
|
|
471
|
+
|
|
472
|
+
interface AdminSidebarProps extends HTMLAttributes<HTMLElement> {
|
|
473
|
+
collapsed?: boolean;
|
|
474
|
+
onToggle?: () => void;
|
|
475
|
+
navigation?: NavItem[];
|
|
476
|
+
activeItem?: string;
|
|
477
|
+
onNavigate?: (item: string) => void;
|
|
478
|
+
}
|
|
479
|
+
interface NavItem {
|
|
480
|
+
id: string;
|
|
481
|
+
label: string;
|
|
482
|
+
icon?: React.ReactNode;
|
|
483
|
+
href?: string;
|
|
484
|
+
children?: NavItem[];
|
|
485
|
+
}
|
|
486
|
+
declare const AdminSidebar: React$1.ForwardRefExoticComponent<AdminSidebarProps & React$1.RefAttributes<HTMLElement>>;
|
|
487
|
+
|
|
488
|
+
interface StatsCardProps extends HTMLAttributes<HTMLDivElement> {
|
|
489
|
+
title: string;
|
|
490
|
+
value: string | number;
|
|
491
|
+
subtitle?: string;
|
|
492
|
+
icon?: ReactNode;
|
|
493
|
+
trend?: "up" | "down" | null;
|
|
494
|
+
trendPercent?: number;
|
|
495
|
+
trendLabel?: string;
|
|
496
|
+
variant?: "default" | "primary" | "success" | "warning" | "danger";
|
|
497
|
+
}
|
|
498
|
+
declare const StatsCard: React$1.ForwardRefExoticComponent<StatsCardProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
499
|
+
|
|
500
|
+
interface NavbarProps extends HTMLAttributes<HTMLElement> {
|
|
501
|
+
sticky?: boolean;
|
|
502
|
+
}
|
|
503
|
+
declare const Navbar: React$1.ForwardRefExoticComponent<NavbarProps & React$1.RefAttributes<HTMLElement>>;
|
|
504
|
+
|
|
505
|
+
interface SidebarProps extends HTMLAttributes<HTMLElement> {
|
|
506
|
+
collapsed?: boolean;
|
|
507
|
+
}
|
|
508
|
+
declare const Sidebar: React$1.ForwardRefExoticComponent<SidebarProps & React$1.RefAttributes<HTMLElement>>;
|
|
509
|
+
|
|
510
|
+
/**
|
|
511
|
+
* useClickOutside — fires callback when user clicks outside the referenced element.
|
|
512
|
+
*/
|
|
513
|
+
declare function useClickOutside<T extends HTMLElement>(ref: RefObject<T>, callback: () => void): void;
|
|
514
|
+
|
|
515
|
+
/**
|
|
516
|
+
* useDebounce — delays updating value until after delay ms.
|
|
517
|
+
*/
|
|
518
|
+
declare function useDebounce<T>(value: T, delay?: number): T;
|
|
519
|
+
|
|
520
|
+
/**
|
|
521
|
+
* useToggle — simple boolean toggle hook.
|
|
522
|
+
* @param initialValue - initial state (default false)
|
|
523
|
+
* @returns [value, toggle, setOn, setOff, setValue]
|
|
524
|
+
*/
|
|
525
|
+
declare function useToggle(initialValue?: boolean): [
|
|
526
|
+
boolean,
|
|
527
|
+
() => void,
|
|
528
|
+
() => void,
|
|
529
|
+
() => void,
|
|
530
|
+
(v: boolean) => void
|
|
531
|
+
];
|
|
532
|
+
|
|
533
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
534
|
+
|
|
535
|
+
export { Accordion, type AccordionProps, Button as AdminButton, Card as AdminCard, CardContent as AdminCardContent, CardDescription as AdminCardDescription, CardFooter as AdminCardFooter, CardHeader as AdminCardHeader, CardTitle as AdminCardTitle, Input as AdminInput, Pagination as AdminPagination, Select as AdminSelect, AdminSidebar, type AdminSidebarProps, Table as AdminTable, Alert, type AlertProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarProps, type CalendarSize, type CalendarTheme, type CalendarView, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, type ColumnDef, Divider, type DividerProps, Drawer, type DrawerProps, Dropdown, type DropdownProps, type FetchParams, type FetchResult, Input, type InputProps, Label, type LabelProps, Modal, type ModalProps, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, ServerDataTable, type ServerDataTableProps, type ServerDataTableTheme, Sidebar, type SidebarProps, Skeleton, SkeletonCard, type SkeletonProps, type SortDirection, Spinner, type SpinnerProps, StatsCard, type StatsCardProps, Switch, type SwitchProps, Table, type TableProps, Tabs, type TabsProps, Tag, type TagProps, Textarea, type TextareaProps, Tooltip, type TooltipProps, Topbar, type TopbarProps, alertVariants, badgeVariants, buttonVariants, calendarCellVariants, calendarVariants, cardVariants, cn, inputVariants, useClickOutside, useDebounce, useToggle };
|