elahi-ui 1.0.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 (73) hide show
  1. package/README.md +156 -0
  2. package/dist/components/Avatar/Avatar.d.ts +25 -0
  3. package/dist/components/Avatar/index.d.ts +2 -0
  4. package/dist/components/Badge/Badge.d.ts +21 -0
  5. package/dist/components/Badge/index.d.ts +2 -0
  6. package/dist/components/Button/Button.d.ts +49 -0
  7. package/dist/components/Button/index.d.ts +2 -0
  8. package/dist/components/Card/Card.d.ts +16 -0
  9. package/dist/components/Card/index.d.ts +2 -0
  10. package/dist/components/Checkbox/Checkbox.d.ts +17 -0
  11. package/dist/components/Checkbox/index.d.ts +2 -0
  12. package/dist/components/Icons/index.d.ts +18 -0
  13. package/dist/components/Input/Input.d.ts +46 -0
  14. package/dist/components/Input/index.d.ts +2 -0
  15. package/dist/components/Modal/Modal.d.ts +27 -0
  16. package/dist/components/Modal/index.d.ts +2 -0
  17. package/dist/components/Select/Select.d.ts +40 -0
  18. package/dist/components/Select/index.d.ts +2 -0
  19. package/dist/components/Switch/Switch.d.ts +21 -0
  20. package/dist/components/Switch/index.d.ts +2 -0
  21. package/dist/components/Table/Table.d.ts +72 -0
  22. package/dist/components/Table/TablePagination.d.ts +15 -0
  23. package/dist/components/Table/index.d.ts +2 -0
  24. package/dist/components/Tabs/Tabs.d.ts +32 -0
  25. package/dist/components/Tabs/index.d.ts +2 -0
  26. package/dist/components/Textarea/Textarea.d.ts +23 -0
  27. package/dist/components/Textarea/index.d.ts +2 -0
  28. package/dist/components/Toast/Toast.d.ts +25 -0
  29. package/dist/components/Toast/index.d.ts +2 -0
  30. package/dist/components/Tooltip/Tooltip.d.ts +18 -0
  31. package/dist/components/Tooltip/index.d.ts +2 -0
  32. package/dist/constants/index.d.ts +16 -0
  33. package/dist/hooks/index.d.ts +13 -0
  34. package/dist/hooks/useClickOutside.d.ts +10 -0
  35. package/dist/hooks/useControllableState.d.ts +20 -0
  36. package/dist/hooks/useDisclosure.d.ts +16 -0
  37. package/dist/hooks/useFocusTrap.d.ts +14 -0
  38. package/dist/hooks/useLockBodyScroll.d.ts +10 -0
  39. package/dist/hooks/useMediaQuery.d.ts +10 -0
  40. package/dist/hooks/useRipple.d.ts +20 -0
  41. package/dist/hooks/useTablePagination.d.ts +19 -0
  42. package/dist/hooks/useTableSort.d.ts +22 -0
  43. package/dist/hooks.cjs +2 -0
  44. package/dist/hooks.cjs.map +1 -0
  45. package/dist/hooks.d.ts +2 -0
  46. package/dist/hooks.js +13 -0
  47. package/dist/hooks.js.map +1 -0
  48. package/dist/index-Bxv2g5GP.js +2487 -0
  49. package/dist/index-Bxv2g5GP.js.map +1 -0
  50. package/dist/index-DwhoHMcS.cjs +2 -0
  51. package/dist/index-DwhoHMcS.cjs.map +1 -0
  52. package/dist/index.cjs +2 -0
  53. package/dist/index.cjs.map +1 -0
  54. package/dist/index.d.ts +35 -0
  55. package/dist/index.js +1714 -0
  56. package/dist/index.js.map +1 -0
  57. package/dist/main.d.ts +0 -0
  58. package/dist/styles/globals.css +118 -0
  59. package/dist/test/setup.d.ts +1 -0
  60. package/dist/useTablePagination-CKuaTNxN.js +236 -0
  61. package/dist/useTablePagination-CKuaTNxN.js.map +1 -0
  62. package/dist/useTablePagination-DS3CDBea.cjs +2 -0
  63. package/dist/useTablePagination-DS3CDBea.cjs.map +1 -0
  64. package/dist/utils/cn.d.ts +10 -0
  65. package/dist/utils/id.d.ts +5 -0
  66. package/dist/utils/index.d.ts +3 -0
  67. package/dist/utils/polymorphic.d.ts +26 -0
  68. package/dist/utils.cjs +2 -0
  69. package/dist/utils.cjs.map +1 -0
  70. package/dist/utils.d.ts +2 -0
  71. package/dist/utils.js +6 -0
  72. package/dist/utils.js.map +1 -0
  73. package/package.json +118 -0
package/README.md ADDED
@@ -0,0 +1,156 @@
1
+ # elahi-ui
2
+
3
+ A modern, accessible React component library built with TypeScript and Tailwind CSS.
4
+
5
+ [![NPM Version](https://img.shields.io/npm/v/elahi-ui.svg)](https://www.npmjs.com/package/elahi-ui)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
+
8
+ ## Features
9
+
10
+ - **15 Production-Ready Components** - Modern, clean UI components
11
+ - **Full TypeScript Support** - Complete type safety and IntelliSense
12
+ - ♿ **Accessibility First** - WCAG compliant with proper ARIA attributes
13
+ - **Dark Mode Built-in** - Seamless theme switching
14
+ - **Tree-Shakeable** - Only import what you need
15
+ - **Custom Hooks** - Reusable hooks for common patterns
16
+
17
+ ## Installation
18
+
19
+ ```bash
20
+ npm install elahi-ui
21
+ ```
22
+
23
+ ### Peer Dependencies
24
+
25
+ ```bash
26
+ npm install react react-dom
27
+ ```
28
+
29
+ ## Quick Start
30
+
31
+ ### 1. Configure Tailwind CSS
32
+
33
+ Add elahi-ui to your `tailwind.config.js`:
34
+
35
+ ```js
36
+ export default {
37
+ content: [
38
+ "./src/**/*.{js,ts,jsx,tsx}",
39
+ "./node_modules/elahi-ui/dist/**/*.{js,mjs}",
40
+ ],
41
+ // ...
42
+ }
43
+ ```
44
+
45
+ ### 2. Import Styles
46
+
47
+ ```tsx
48
+ // In your main.tsx or App.tsx
49
+ import 'elahi-ui/styles'
50
+ ```
51
+
52
+ Add Tailwind to your CSS:
53
+
54
+ ```css
55
+ @tailwind base;
56
+ @tailwind components;
57
+ @tailwind utilities;
58
+ ```
59
+
60
+ ### 3. Use Components
61
+
62
+ ```tsx
63
+ import { Button, Card, CardHeader, CardTitle, CardContent } from 'elahi-ui'
64
+
65
+ function App() {
66
+ return (
67
+ <Card>
68
+ <CardHeader>
69
+ <CardTitle>Welcome to elahi-ui</CardTitle>
70
+ </CardHeader>
71
+ <CardContent>
72
+ <Button variant="primary" size="lg">
73
+ Get Started
74
+ </Button>
75
+ </CardContent>
76
+ </Card>
77
+ )
78
+ }
79
+ ```
80
+
81
+ ## Components
82
+
83
+ ### Core Components
84
+ - **Button** - Variants, sizes, loading states, ripple effects
85
+ - **Input** - Floating labels, prefix/suffix icons, validation
86
+ - **Textarea** - Auto-resize, character count
87
+ - **Checkbox** - Accessible with labels
88
+ - **Switch** - Toggle switches
89
+ - **Select** - Dropdown with search
90
+
91
+ ### Data Display
92
+ - **Card** - Flexible card with compound pattern
93
+ - **Badge** - Status indicators
94
+ - **Avatar** - User avatars with status
95
+ - **Table** - Sorting, pagination, expandable rows
96
+ - **Tabs** - Tabbed interfaces
97
+
98
+ ### Feedback
99
+ - **Toast** - Toast notifications
100
+ - **Modal** - Dialogs and modals
101
+ - **Tooltip** - Hover tooltips
102
+
103
+ ## Custom Hooks
104
+
105
+ ```tsx
106
+ import {
107
+ useMediaQuery,
108
+ useClickOutside,
109
+ useDisclosure,
110
+ useRipple,
111
+ useFocusTrap,
112
+ } from 'elahi-ui'
113
+
114
+ const isMobile = useMediaQuery('(max-width: 768px)')
115
+ const { isOpen, open, close, toggle } = useDisclosure()
116
+ ```
117
+
118
+ ## Theming
119
+
120
+ ### Dark Mode
121
+
122
+ ```tsx
123
+ <html className="dark">
124
+ <body>{/* Your app */}</body>
125
+ </html>
126
+ ```
127
+
128
+ ### Customize Colors
129
+
130
+ ```css
131
+ :root {
132
+ --primary: 221.2 83.2% 53.3%;
133
+ --primary-foreground: 210 40% 98%;
134
+ }
135
+
136
+ .dark {
137
+ --primary: 217.2 91.2% 59.8%;
138
+ --primary-foreground: 222.2 47.4% 11.2%;
139
+ }
140
+ ```
141
+
142
+ ## Development
143
+
144
+ ```bash
145
+ npm install
146
+ npm run storybook # View components at localhost:6006
147
+ npm run build # Build library
148
+ ```
149
+
150
+ ## License
151
+
152
+ MIT © Hasan Elahi
153
+
154
+ ---
155
+
156
+ Made with ❤️ by Hasan Elahi
package/dist/components/Avatar/Avatar.d.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { default as React } from 'react';
2
+ import { VariantProps } from 'class-variance-authority';
3
+ declare const avatarVariants: (props?: ({
4
+ size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
5
+ shape?: "circle" | "square" | null | undefined;
6
+ } & import('class-variance-authority/types').ClassProp) | undefined) => string;
7
+ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
8
+ /** Image source */
9
+ src?: string;
10
+ /** Alt text for image */
11
+ alt?: string;
12
+ /** Fallback text (usually initials) */
13
+ fallback?: string;
14
+ /** Show status indicator */
15
+ status?: 'online' | 'offline' | 'away' | 'busy';
16
+ }
17
+ /**
18
+ * Modern avatar component styled with Tailwind CSS
19
+ *
20
+ * @example
21
+ * <Avatar src="/avatar.jpg" alt="John Doe" />
22
+ * <Avatar fallback="JD" status="online" />
23
+ */
24
+ export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
25
+ export { avatarVariants };
package/dist/components/Avatar/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Avatar, avatarVariants } from './Avatar';
2
+ export type { AvatarProps } from './Avatar';
package/dist/components/Badge/Badge.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { default as React } from 'react';
2
+ import { VariantProps } from 'class-variance-authority';
3
+ declare const badgeVariants: (props?: ({
4
+ variant?: "default" | "secondary" | "outline" | "success" | "warning" | "destructive" | null | undefined;
5
+ size?: "sm" | "md" | "lg" | null | undefined;
6
+ dot?: boolean | null | undefined;
7
+ } & import('class-variance-authority/types').ClassProp) | undefined) => string;
8
+ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
9
+ /** Show a dot indicator */
10
+ showDot?: boolean;
11
+ }
12
+ /**
13
+ * Badge component for labels and status indicators
14
+ *
15
+ * @example
16
+ * <Badge>New</Badge>
17
+ * <Badge variant="success">Active</Badge>
18
+ * <Badge showDot>Live</Badge>
19
+ */
20
+ export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
21
+ export { badgeVariants };
package/dist/components/Badge/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Badge, badgeVariants } from './Badge';
2
+ export type { BadgeProps } from './Badge';
package/dist/components/Button/Button.d.ts ADDED
@@ -0,0 +1,49 @@
1
+ import { default as React } from 'react';
2
+ import { VariantProps } from 'class-variance-authority';
3
+ import { PolymorphicComponentPropsWithRef, PolymorphicRef } from '../../utils/polymorphic';
4
+ /**
5
+ * Button variants using class-variance-authority
6
+ * Provides a type-safe way to manage button styles and variants
7
+ */
8
+ declare const buttonVariants: (props?: ({
9
+ variant?: "link" | "primary" | "secondary" | "outline" | "ghost" | "danger" | "success" | "warning" | null | undefined;
10
+ size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon" | null | undefined;
11
+ fullWidth?: boolean | null | undefined;
12
+ rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
13
+ } & import('class-variance-authority/types').ClassProp) | undefined) => string;
14
+ export interface ButtonBaseProps extends VariantProps<typeof buttonVariants> {
15
+ /** Whether button is in loading state */
16
+ loading?: boolean;
17
+ /** Icon to display before text */
18
+ leftIcon?: React.ReactNode;
19
+ /** Icon to display after text */
20
+ rightIcon?: React.ReactNode;
21
+ /** Enable ripple effect on click */
22
+ enableRipple?: boolean;
23
+ }
24
+ export type ButtonProps<C extends React.ElementType = 'button'> = PolymorphicComponentPropsWithRef<C, ButtonBaseProps>;
25
+ /**
26
+ * Versatile Button component with multiple variants, sizes, and features
27
+ *
28
+ * Features:
29
+ * - Multiple variants: primary, secondary, outline, ghost, danger, success, warning, link
30
+ * - 6 size options from xs to xl
31
+ * - Loading state with spinner
32
+ * - Left/right icon support
33
+ * - Ripple effect animation
34
+ * - Polymorphic (can render as any element via 'as' prop)
35
+ * - Full TypeScript support
36
+ * - Accessible by default
37
+ *
38
+ * @example
39
+ * <Button>Click me</Button>
40
+ * <Button variant="outline" size="sm" leftIcon={<Icon />}>With Icon</Button>
41
+ * <Button loading>Loading...</Button>
42
+ * <Button as="a" href="/link">Link Button</Button>
43
+ */
44
+ export declare const Button: (<C extends React.ElementType = "button">(props: ButtonProps<C> & {
45
+ ref?: PolymorphicRef<C>;
46
+ }) => React.ReactElement | null) & {
47
+ displayName?: string;
48
+ };
49
+ export { buttonVariants };
package/dist/components/Button/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Button, buttonVariants } from './Button';
2
+ export type { ButtonProps } from './Button';
package/dist/components/Card/Card.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import { default as React } from 'react';
2
+ import { VariantProps } from 'class-variance-authority';
3
+ declare const cardVariants: (props?: ({
4
+ variant?: "default" | "outline" | "ghost" | "elevated" | null | undefined;
5
+ hoverable?: boolean | null | undefined;
6
+ padding?: "none" | "sm" | "md" | "lg" | null | undefined;
7
+ } & import('class-variance-authority/types').ClassProp) | undefined) => string;
8
+ export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
9
+ }
10
+ export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
11
+ export declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
12
+ export declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
13
+ export declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
14
+ export declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
15
+ export declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
16
+ export { cardVariants };
package/dist/components/Card/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants, } from './Card';
2
+ export type { CardProps } from './Card';
package/dist/components/Checkbox/Checkbox.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import { default as React } from 'react';
2
+ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
3
+ /** Label for the checkbox */
4
+ label?: string;
5
+ /** Helper text */
6
+ helperText?: string;
7
+ /** Error message */
8
+ error?: string;
9
+ }
10
+ /**
11
+ * Modern checkbox component styled with Tailwind CSS
12
+ *
13
+ * @example
14
+ * <Checkbox label="Accept terms" />
15
+ * <Checkbox checked onChange={(e) => console.log(e.target.checked)} />
16
+ */
17
+ export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
package/dist/components/Checkbox/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Checkbox } from './Checkbox';
2
+ export type { CheckboxProps } from './Checkbox';
package/dist/components/Icons/index.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { default as React } from 'react';
2
+ export interface IconProps extends React.SVGProps<SVGSVGElement> {
3
+ className?: string;
4
+ }
5
+ /**
6
+ * Reusable icon components extracted from various components
7
+ * These are common SVG icons used throughout the UI library
8
+ */
9
+ export declare const SpinnerIcon: React.FC<IconProps>;
10
+ export declare const CloseIcon: React.FC<IconProps>;
11
+ export declare const ChevronDownIcon: React.FC<IconProps>;
12
+ export declare const CheckIcon: React.FC<IconProps>;
13
+ export declare const AlertCircleIcon: React.FC<IconProps>;
14
+ export declare const AlertTriangleIcon: React.FC<IconProps>;
15
+ export declare const InfoIcon: React.FC<IconProps>;
16
+ export declare const SortAscIcon: React.FC<IconProps>;
17
+ export declare const SortDescIcon: React.FC<IconProps>;
18
+ export declare const ChevronRightIcon: React.FC<IconProps>;
package/dist/components/Input/Input.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ import { default as React } from 'react';
2
+ import { VariantProps } from 'class-variance-authority';
3
+ declare const inputVariants: (props?: ({
4
+ variant?: "outlined" | "filled" | "underlined" | null | undefined;
5
+ inputSize?: "sm" | "md" | "lg" | null | undefined;
6
+ state?: "error" | "default" | "success" | null | undefined;
7
+ } & import('class-variance-authority/types').ClassProp) | undefined) => string;
8
+ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>, VariantProps<typeof inputVariants> {
9
+ /** Label text for the input */
10
+ label?: string;
11
+ /** Helper text displayed below input */
12
+ helperText?: string;
13
+ /** Error message (sets error state automatically) */
14
+ error?: string;
15
+ /** Icon or element to show before input */
16
+ prefix?: React.ReactNode;
17
+ /** Icon or element to show after input */
18
+ suffix?: React.ReactNode;
19
+ /** Enable floating label animation */
20
+ floatingLabel?: boolean;
21
+ /** Show character count (requires maxLength) */
22
+ showCount?: boolean;
23
+ /** Wrapper className */
24
+ wrapperClassName?: string;
25
+ }
26
+ /**
27
+ * Flexible Input component with multiple variants and features
28
+ *
29
+ * Features:
30
+ * - Three variants: outlined, filled, underlined
31
+ * - Three sizes: sm, md, lg
32
+ * - Label with floating animation option
33
+ * - Prefix/suffix icons
34
+ * - Error and success states
35
+ * - Helper text and error messages
36
+ * - Character counter
37
+ * - Fully accessible
38
+ *
39
+ * @example
40
+ * <Input label="Email" type="email" />
41
+ * <Input floatingLabel label="Username" />
42
+ * <Input prefix={<Icon />} placeholder="Search..." />
43
+ * <Input error="This field is required" />
44
+ */
45
+ export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
46
+ export { inputVariants };
package/dist/components/Input/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Input, inputVariants } from './Input';
2
+ export type { InputProps } from './Input';
package/dist/components/Modal/Modal.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ import { default as React } from 'react';
2
+ export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
3
+ /** Whether modal is open */
4
+ open: boolean;
5
+ /** Callback when modal should close */
6
+ onClose: () => void;
7
+ /** Modal size */
8
+ size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
9
+ /** Show close button */
10
+ showClose?: boolean;
11
+ /** Prevent closing on overlay click */
12
+ preventClose?: boolean;
13
+ }
14
+ /**
15
+ * Modal/Dialog component with overlay and focus trap
16
+ *
17
+ * @example
18
+ * <Modal open={isOpen} onClose={() => setIsOpen(false)}>
19
+ * <h2>Modal Title</h2>
20
+ * <p>Modal content</p>
21
+ * </Modal>
22
+ */
23
+ export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
24
+ export declare const ModalHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
25
+ export declare const ModalTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
26
+ export declare const ModalDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
27
+ export declare const ModalFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
package/dist/components/Modal/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Modal, ModalHeader, ModalTitle, ModalDescription, ModalFooter, } from './Modal';
2
+ export type { ModalProps } from './Modal';
package/dist/components/Select/Select.d.ts ADDED
@@ -0,0 +1,40 @@
1
+ import { default as React } from 'react';
2
+ export interface SelectOption {
3
+ value: string;
4
+ label: string;
5
+ disabled?: boolean;
6
+ }
7
+ export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
8
+ /** Options to display */
9
+ options: SelectOption[];
10
+ /** Selected value */
11
+ value?: string;
12
+ /** Callback when value changes */
13
+ onChange?: (value: string) => void;
14
+ /** Placeholder text */
15
+ placeholder?: string;
16
+ /** Label for the select */
17
+ label?: string;
18
+ /** Helper text */
19
+ helperText?: string;
20
+ /** Error message */
21
+ error?: string;
22
+ /** Disabled state */
23
+ disabled?: boolean;
24
+ /** Enable search/filter */
25
+ searchable?: boolean;
26
+ }
27
+ /**
28
+ * Modern select dropdown with search functionality
29
+ *
30
+ * @example
31
+ * <Select
32
+ * options={[
33
+ * { value: 'us', label: 'United States' },
34
+ * { value: 'uk', label: 'United Kingdom' }
35
+ * ]}
36
+ * value={country}
37
+ * onChange={setCountry}
38
+ * />
39
+ */
40
+ export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
package/dist/components/Select/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Select } from './Select';
2
+ export type { SelectProps, SelectOption } from './Select';
package/dist/components/Switch/Switch.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { default as React } from 'react';
2
+ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
3
+ /** Label for the switch */
4
+ label?: string;
5
+ /** Helper text */
6
+ helperText?: string;
7
+ /** Label position */
8
+ labelPosition?: 'left' | 'right';
9
+ /** Controlled checked state */
10
+ checked?: boolean;
11
+ /** Callback when checked state changes */
12
+ onCheckedChange?: (checked: boolean) => void;
13
+ }
14
+ /**
15
+ * Modern toggle switch styled with Tailwind CSS
16
+ *
17
+ * @example
18
+ * <Switch label="Enable notifications" />
19
+ * <Switch checked={enabled} onCheckedChange={setEnabled} />
20
+ */
21
+ export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
package/dist/components/Switch/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Switch } from './Switch';
2
+ export type { SwitchProps } from './Switch';
package/dist/components/Table/Table.d.ts ADDED
@@ -0,0 +1,72 @@
1
+ import { default as React } from 'react';
2
+ export interface Column<T = unknown> {
3
+ key: string;
4
+ header: React.ReactNode;
5
+ accessor?: (row: T) => React.ReactNode;
6
+ sortable?: boolean;
7
+ width?: string;
8
+ align?: 'left' | 'center' | 'right';
9
+ }
10
+ export interface TableProps<T = unknown> extends React.HTMLAttributes<HTMLTableElement> {
11
+ /** Table columns configuration */
12
+ columns: Column<T>[];
13
+ /** Table data */
14
+ data: T[];
15
+ /** Enable striped rows */
16
+ striped?: boolean;
17
+ /** Enable hover effect */
18
+ hoverable?: boolean;
19
+ /** Table size */
20
+ size?: 'sm' | 'md' | 'lg';
21
+ /** Enable sorting */
22
+ sortable?: boolean;
23
+ /** Default sort column */
24
+ defaultSortKey?: string;
25
+ /** Default sort direction */
26
+ defaultSortDirection?: 'asc' | 'desc';
27
+ /** Callback when sort changes */
28
+ onSortChange?: (key: string, direction: 'asc' | 'desc') => void;
29
+ /** Enable expandable rows */
30
+ expandable?: boolean;
31
+ /** Render expanded content */
32
+ renderExpanded?: (row: T, index: number) => React.ReactNode;
33
+ /** Enable pagination */
34
+ pagination?: boolean;
35
+ /** Items per page */
36
+ pageSize?: number;
37
+ /** Current page (controlled) */
38
+ currentPage?: number;
39
+ /** Callback when page changes */
40
+ onPageChange?: (page: number) => void;
41
+ /** Loading state */
42
+ loading?: boolean;
43
+ /** Empty state message */
44
+ emptyMessage?: string;
45
+ }
46
+ /**
47
+ * Comprehensive Table component with sorting, pagination, and expandable rows
48
+ * Refactored for better maintainability
49
+ *
50
+ * Features:
51
+ * - Sortable columns
52
+ * - Expandable rows
53
+ * - Pagination
54
+ * - Striped and hoverable rows
55
+ * - Responsive design
56
+ * - Loading state
57
+ * - Empty state
58
+ * - Size variants
59
+ *
60
+ * @example
61
+ * <Table
62
+ * columns={[
63
+ * { key: 'name', header: 'Name', sortable: true },
64
+ * { key: 'email', header: 'Email' }
65
+ * ]}
66
+ * data={users}
67
+ * sortable
68
+ * pagination
69
+ * pageSize={10}
70
+ * />
71
+ */
72
+ export declare const Table: React.ForwardRefExoticComponent<TableProps<unknown> & React.RefAttributes<HTMLTableElement>>;
package/dist/components/Table/TablePagination.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { default as React } from 'react';
2
+ export interface TablePaginationProps {
3
+ currentPage: number;
4
+ totalPages: number;
5
+ pageSize: number;
6
+ totalItems: number;
7
+ onPageChange: (page: number) => void;
8
+ canGoNext: boolean;
9
+ canGoPrevious: boolean;
10
+ }
11
+ /**
12
+ * Table pagination component
13
+ * Separated for better maintainability
14
+ */
15
+ export declare const TablePagination: React.FC<TablePaginationProps>;
package/dist/components/Table/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Table } from './Table';
2
+ export type { TableProps, Column } from './Table';
package/dist/components/Tabs/Tabs.d.ts ADDED
@@ -0,0 +1,32 @@
1
+ import { default as React } from 'react';
2
+ export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
3
+ /** Default active tab */
4
+ defaultValue: string;
5
+ /** Controlled active tab */
6
+ value?: string;
7
+ /** Callback when tab changes */
8
+ onValueChange?: (value: string) => void;
9
+ }
10
+ /**
11
+ * Tabs container - use with TabsList, TabsTrigger, and TabsContent
12
+ *
13
+ * @example
14
+ * <Tabs defaultValue="tab1">
15
+ * <TabsList>
16
+ * <TabsTrigger value="tab1">Tab 1</TabsTrigger>
17
+ * <TabsTrigger value="tab2">Tab 2</TabsTrigger>
18
+ * </TabsList>
19
+ * <TabsContent value="tab1">Content 1</TabsContent>
20
+ * <TabsContent value="tab2">Content 2</TabsContent>
21
+ * </Tabs>
22
+ */
23
+ export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
24
+ export declare const TabsList: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
25
+ export interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
26
+ value: string;
27
+ }
28
+ export declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
29
+ export interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
30
+ value: string;
31
+ }
32
+ export declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
package/dist/components/Tabs/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs';
2
+ export type { TabsProps, TabsTriggerProps, TabsContentProps } from './Tabs';
package/dist/components/Textarea/Textarea.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { default as React } from 'react';
2
+ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
3
+ /** Label text */
4
+ label?: string;
5
+ /** Helper text */
6
+ helperText?: string;
7
+ /** Error message */
8
+ error?: string;
9
+ /** Auto-resize based on content */
10
+ autoResize?: boolean;
11
+ /** Show character count */
12
+ showCount?: boolean;
13
+ /** Wrapper className */
14
+ wrapperClassName?: string;
15
+ }
16
+ /**
17
+ * Textarea component with auto-resize and character count
18
+ *
19
+ * @example
20
+ * <Textarea label="Description" rows={4} />
21
+ * <Textarea autoResize maxLength={500} showCount />
22
+ */
23
+ export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
package/dist/components/Textarea/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { Textarea } from './Textarea';
2
+ export type { TextareaProps } from './Textarea';