@particle-academy/react-fancy 1.7.0 → 1.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -82
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -56,109 +56,103 @@ npx vite build # Build demo app (verifies imports work)
|
|
|
56
56
|
|
|
57
57
|
### Core
|
|
58
58
|
|
|
59
|
-
| Component | Description |
|
|
60
|
-
|
|
61
|
-
| Action | Button with colors, states, icons, emoji, avatar, badge, sort control |
|
|
62
|
-
| Carousel | Slide carousel with directional/wizard variants, autoplay, loop |
|
|
63
|
-
| ColorPicker | Native color input with swatch preview, hex display, presets |
|
|
64
|
-
| Emoji | Emoji renderer from slugs |
|
|
65
|
-
| EmojiSelect | Emoji search and selection dropdown |
|
|
66
|
-
| Table | Data table with sorting, pagination, search, and tray |
|
|
59
|
+
| Component | Description | Docs |
|
|
60
|
+
|-----------|-------------|------|
|
|
61
|
+
| Action | Button with colors, states, icons, emoji, avatar, badge, sort control | [docs](docs/Action.md) |
|
|
62
|
+
| Carousel | Slide carousel with directional/wizard variants, autoplay, loop | [docs](docs/Carousel.md) |
|
|
63
|
+
| ColorPicker | Native color input with swatch preview, hex display, presets | [docs](docs/ColorPicker.md) |
|
|
64
|
+
| Emoji | Emoji renderer from slugs | [docs](docs/Emoji.md) |
|
|
65
|
+
| EmojiSelect | Emoji search and selection dropdown | [docs](docs/EmojiSelect.md) |
|
|
66
|
+
| Table | Data table with sorting, pagination, search, and tray | [docs](docs/Table.md) |
|
|
67
67
|
|
|
68
68
|
### Form Inputs
|
|
69
69
|
|
|
70
|
-
| Component | Description |
|
|
71
|
-
|
|
72
|
-
| Field | Form field wrapper with label and error display |
|
|
73
|
-
| Input | Text input |
|
|
74
|
-
| Textarea | Multi-line text input |
|
|
75
|
-
| Select |
|
|
76
|
-
| Checkbox / CheckboxGroup | Checkbox inputs |
|
|
77
|
-
| RadioGroup | Radio button group |
|
|
78
|
-
| Switch | Toggle switch |
|
|
79
|
-
| Slider | Range slider (single and range modes) |
|
|
80
|
-
| MultiSwitch | Segmented toggle between multiple options |
|
|
81
|
-
| DatePicker | Date selection (single and range modes) |
|
|
82
|
-
| Autocomplete | Input with filtered dropdown suggestions, async search, keyboard nav |
|
|
83
|
-
| Pillbox | Tag/pill input with add/remove, backspace delete |
|
|
84
|
-
| OtpInput | Single-digit OTP code input with auto-advance and paste support |
|
|
85
|
-
| FileUpload | Drag-and-drop file upload with dropzone and file list |
|
|
86
|
-
| TimePicker | Hour/minute/AM-PM time selection |
|
|
87
|
-
| Calendar | Month grid with single, range, and multi-select modes |
|
|
70
|
+
| Component | Description | Docs |
|
|
71
|
+
|-----------|-------------|------|
|
|
72
|
+
| Field | Form field wrapper with label and error display | [docs](docs/Field.md) |
|
|
73
|
+
| Input | Text input | [docs](docs/Input.md) |
|
|
74
|
+
| Textarea | Multi-line text input | [docs](docs/Textarea.md) |
|
|
75
|
+
| Select | Native and listbox dropdown with multi-select support | [docs](docs/Select.md) |
|
|
76
|
+
| Checkbox / CheckboxGroup | Checkbox inputs | [docs](docs/Checkbox.md) |
|
|
77
|
+
| RadioGroup | Radio button group | [docs](docs/RadioGroup.md) |
|
|
78
|
+
| Switch | Toggle switch | [docs](docs/Switch.md) |
|
|
79
|
+
| Slider | Range slider (single and range modes) | [docs](docs/Slider.md) |
|
|
80
|
+
| MultiSwitch | Segmented toggle between multiple options | [docs](docs/MultiSwitch.md) |
|
|
81
|
+
| DatePicker | Date selection (single and range modes) | [docs](docs/DatePicker.md) |
|
|
82
|
+
| Autocomplete | Input with filtered dropdown suggestions, async search, keyboard nav | [docs](docs/Autocomplete.md) |
|
|
83
|
+
| Pillbox | Tag/pill input with add/remove, backspace delete | [docs](docs/Pillbox.md) |
|
|
84
|
+
| OtpInput | Single-digit OTP code input with auto-advance and paste support | [docs](docs/OtpInput.md) |
|
|
85
|
+
| FileUpload | Drag-and-drop file upload with dropzone and file list | [docs](docs/FileUpload.md) |
|
|
86
|
+
| TimePicker | Hour/minute/AM-PM time selection | [docs](docs/TimePicker.md) |
|
|
87
|
+
| Calendar | Month grid with single, range, and multi-select modes | [docs](docs/Calendar.md) |
|
|
88
88
|
|
|
89
89
|
### Display
|
|
90
90
|
|
|
91
|
-
| Component | Description |
|
|
92
|
-
|
|
93
|
-
| Heading | Semantic heading (`h1`–`h6`) with size and weight props |
|
|
94
|
-
| Text | Paragraph/span with size, color, weight, and `as` prop |
|
|
95
|
-
| Separator | Horizontal/vertical divider with optional label |
|
|
96
|
-
| Badge | Inline label with color, variant, size, and dot indicator |
|
|
97
|
-
| Icon | Size wrapper around icon ReactNode |
|
|
98
|
-
| Avatar | Image with fallback initials, size variants, status indicator |
|
|
99
|
-
| Skeleton | Animated placeholder (rect, circle, text), pulse animation |
|
|
100
|
-
| Progress | Bar and circular variants, indeterminate mode |
|
|
101
|
-
| Brand | Logo + text lockup |
|
|
102
|
-
| Profile | Avatar + name + subtitle layout |
|
|
103
|
-
| Card | Container with Header, Body, Footer compound slots |
|
|
104
|
-
| Callout | Alert/info box with icon, color, and dismissible support |
|
|
105
|
-
| Timeline | Stacked, alternating, and horizontal timeline with data-driven or compound API |
|
|
91
|
+
| Component | Description | Docs |
|
|
92
|
+
|-----------|-------------|------|
|
|
93
|
+
| Heading | Semantic heading (`h1`–`h6`) with size and weight props | [docs](docs/Heading.md) |
|
|
94
|
+
| Text | Paragraph/span with size, color, weight, and `as` prop | [docs](docs/Text.md) |
|
|
95
|
+
| Separator | Horizontal/vertical divider with optional label | [docs](docs/Separator.md) |
|
|
96
|
+
| Badge | Inline label with color, variant, size, and dot indicator | [docs](docs/Badge.md) |
|
|
97
|
+
| Icon | Size wrapper around icon ReactNode | [docs](docs/Icon.md) |
|
|
98
|
+
| Avatar | Image with fallback initials, size variants, status indicator | [docs](docs/Avatar.md) |
|
|
99
|
+
| Skeleton | Animated placeholder (rect, circle, text), pulse animation | [docs](docs/Skeleton.md) |
|
|
100
|
+
| Progress | Bar and circular variants, indeterminate mode | [docs](docs/Progress.md) |
|
|
101
|
+
| Brand | Logo + text lockup | [docs](docs/Brand.md) |
|
|
102
|
+
| Profile | Avatar + name + subtitle layout | [docs](docs/Profile.md) |
|
|
103
|
+
| Card | Container with Header, Body, Footer compound slots | [docs](docs/Card.md) |
|
|
104
|
+
| Callout | Alert/info box with icon, color, and dismissible support | [docs](docs/Callout.md) |
|
|
105
|
+
| Timeline | Stacked, alternating, and horizontal timeline with data-driven or compound API | [docs](docs/Timeline.md) |
|
|
106
106
|
|
|
107
107
|
### Overlay & Floating
|
|
108
108
|
|
|
109
|
-
| Component | Description |
|
|
110
|
-
|
|
111
|
-
| Tooltip | Hover/focus tooltip with arrow and placement control |
|
|
112
|
-
| Popover | Click
|
|
113
|
-
| Dropdown | Popover with keyboard-navigable menu items |
|
|
114
|
-
| ContextMenu | Right-click triggered dropdown |
|
|
115
|
-
| Modal | Full-screen backdrop dialog with focus trap and scroll lock |
|
|
116
|
-
| Toast | Notification stack with auto-dismiss, variants, and position options |
|
|
117
|
-
| Command | `Cmd+K` command palette with search and keyboard navigation |
|
|
109
|
+
| Component | Description | Docs |
|
|
110
|
+
|-----------|-------------|------|
|
|
111
|
+
| Tooltip | Hover/focus tooltip with arrow and placement control | [docs](docs/Tooltip.md) |
|
|
112
|
+
| Popover | Click or hover floating panel | [docs](docs/Popover.md) |
|
|
113
|
+
| Dropdown | Popover with keyboard-navigable menu items | [docs](docs/Dropdown.md) |
|
|
114
|
+
| ContextMenu | Right-click triggered dropdown | [docs](docs/ContextMenu.md) |
|
|
115
|
+
| Modal | Full-screen backdrop dialog with focus trap and scroll lock | [docs](docs/Modal.md) |
|
|
116
|
+
| Toast | Notification stack with auto-dismiss, variants, and position options | [docs](docs/Toast.md) |
|
|
117
|
+
| Command | `Cmd+K` command palette with search and keyboard navigation | [docs](docs/Command.md) |
|
|
118
118
|
|
|
119
119
|
### Navigation & Layout
|
|
120
120
|
|
|
121
|
-
| Component | Description |
|
|
122
|
-
|
|
123
|
-
| Tabs | Tabbed content with underline, pills, and boxed variants |
|
|
124
|
-
| Accordion | Collapsible content sections (single/multiple mode) |
|
|
125
|
-
| Breadcrumbs | Navigation breadcrumb trail with separator |
|
|
126
|
-
| Navbar | Responsive navigation bar with hamburger collapse |
|
|
127
|
-
| Pagination | Page navigation with prev/next and ellipsis |
|
|
121
|
+
| Component | Description | Docs |
|
|
122
|
+
|-----------|-------------|------|
|
|
123
|
+
| Tabs | Tabbed content with underline, pills, and boxed variants | [docs](docs/Tabs.md) |
|
|
124
|
+
| Accordion | Collapsible content sections (single/multiple mode) | [docs](docs/Accordion.md) |
|
|
125
|
+
| Breadcrumbs | Navigation breadcrumb trail with separator | [docs](docs/Breadcrumbs.md) |
|
|
126
|
+
| Navbar | Responsive navigation bar with hamburger collapse | [docs](docs/Navbar.md) |
|
|
127
|
+
| Pagination | Page navigation with prev/next and ellipsis | [docs](docs/Pagination.md) |
|
|
128
128
|
|
|
129
129
|
### Rich Content
|
|
130
130
|
|
|
131
|
-
| Component | Description |
|
|
132
|
-
|
|
133
|
-
| Composer | Chat-style message input composing textarea + actions |
|
|
134
|
-
| Chart | SVG-based Bar
|
|
135
|
-
| Editor | Toolbar chrome wrapper for contentEditable |
|
|
136
|
-
| Kanban | Drag-and-drop board with columns and cards |
|
|
137
|
-
| Canvas | Interactive node canvas with pan, zoom, and connections |
|
|
138
|
-
| Diagram | Entity-relationship diagram with draggable nodes and relation lines |
|
|
139
|
-
| ContentRenderer | Markdown/HTML content renderer |
|
|
131
|
+
| Component | Description | Docs |
|
|
132
|
+
|-----------|-------------|------|
|
|
133
|
+
| Composer | Chat-style message input composing textarea + actions | [docs](docs/Composer.md) |
|
|
134
|
+
| Chart | SVG-based Bar, Line, Area, Pie, Donut, and Sparkline charts | [docs](docs/Chart.md) |
|
|
135
|
+
| Editor | Toolbar chrome wrapper for contentEditable | [docs](docs/Editor.md) |
|
|
136
|
+
| Kanban | Drag-and-drop board with columns and cards | [docs](docs/Kanban.md) |
|
|
137
|
+
| Canvas | Interactive node canvas with pan, zoom, and connections | [docs](docs/Canvas.md) |
|
|
138
|
+
| Diagram | Entity-relationship diagram with draggable nodes and relation lines | [docs](docs/Diagram.md) |
|
|
139
|
+
| ContentRenderer | Markdown/HTML content renderer | [docs](docs/ContentRenderer.md) |
|
|
140
140
|
|
|
141
141
|
### Menus & Navigation
|
|
142
142
|
|
|
143
|
-
| Component | Description |
|
|
144
|
-
|
|
145
|
-
| Menu | Hierarchical menu with nested items |
|
|
146
|
-
| Sidebar | Collapsible sidebar navigation |
|
|
147
|
-
| MobileMenu | Responsive mobile navigation overlay |
|
|
143
|
+
| Component | Description | Docs |
|
|
144
|
+
|-----------|-------------|------|
|
|
145
|
+
| Menu | Hierarchical menu with nested items | [docs](docs/Menu.md) |
|
|
146
|
+
| Sidebar | Collapsible sidebar navigation | [docs](docs/Sidebar.md) |
|
|
147
|
+
| MobileMenu | Responsive mobile navigation overlay | [docs](docs/MobileMenu.md) |
|
|
148
148
|
|
|
149
149
|
### Utilities & Hooks
|
|
150
150
|
|
|
151
|
-
| Export | Description |
|
|
152
|
-
|
|
153
|
-
| Portal | `createPortal` wrapper with automatic dark mode propagation |
|
|
154
|
-
| `cn()` | `clsx` + `tailwind-merge` for conditional class composition |
|
|
155
|
-
|
|
|
156
|
-
| `useFloatingPosition` | Anchor-relative positioning for floating elements |
|
|
157
|
-
| `useOutsideClick` | Close on click outside handler |
|
|
158
|
-
| `useEscapeKey` | Close on Escape key handler |
|
|
159
|
-
| `useFocusTrap` | Tab-cycle focus within container |
|
|
160
|
-
| `useAnimation` | Enter/exit CSS transitions with unmount |
|
|
161
|
-
| `useId` | Stable ID generation |
|
|
151
|
+
| Export | Description | Docs |
|
|
152
|
+
|--------|-------------|------|
|
|
153
|
+
| Portal | `createPortal` wrapper with automatic dark mode propagation | [docs](docs/Portal.md) |
|
|
154
|
+
| `cn()` | `clsx` + `tailwind-merge` for conditional class composition | [docs](docs/utilities.md) |
|
|
155
|
+
| Hooks | useControllableState, useFloatingPosition, useOutsideClick, useEscapeKey, useFocusTrap, useAnimation, useId, usePanZoom | [docs](docs/hooks.md) |
|
|
162
156
|
|
|
163
157
|
## Customization
|
|
164
158
|
|
package/package.json
CHANGED