@particle-academy/react-fancy 1.6.1 → 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.
Files changed (8) hide show
  1. package/README.md +79 -73
  2. package/dist/index.cjs +496 -197
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +36 -3
  5. package/dist/index.d.ts +36 -3
  6. package/dist/index.js +497 -198
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -56,97 +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 | Dropdown select |
76
- | Checkbox / CheckboxGroup | Checkbox inputs |
77
- | RadioGroup | Radio button group |
78
- | Switch | Toggle switch |
79
- | Slider | Range slider (single and range modes) |
80
- | DatePicker | Date selection (single and range modes) |
81
- | Autocomplete | Input with filtered dropdown suggestions, async search, keyboard nav |
82
- | Pillbox | Tag/pill input with add/remove, backspace delete |
83
- | OtpInput | Single-digit OTP code input with auto-advance and paste support |
84
- | FileUpload | Drag-and-drop file upload with dropzone and file list |
85
- | TimePicker | Hour/minute/AM-PM time selection |
86
- | 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) |
87
88
 
88
89
  ### Display
89
90
 
90
- | Component | Description |
91
- |-----------|-------------|
92
- | Heading | Semantic heading (`h1`–`h6`) with size and weight props |
93
- | Text | Paragraph/span with size, color, weight, and `as` prop |
94
- | Separator | Horizontal/vertical divider with optional label |
95
- | Badge | Inline label with color, variant, size, and dot indicator |
96
- | Icon | Size wrapper around icon ReactNode |
97
- | Avatar | Image with fallback initials, size variants, status indicator |
98
- | Skeleton | Animated placeholder (rect, circle, text), pulse animation |
99
- | Progress | Bar and circular variants, indeterminate mode |
100
- | Brand | Logo + text lockup |
101
- | Profile | Avatar + name + subtitle layout |
102
- | Card | Container with Header, Body, Footer compound slots |
103
- | Callout | Alert/info box with icon, color, and dismissible support |
104
- | Timeline | Vertical event list with Item and Block sub-components |
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) |
105
106
 
106
107
  ### Overlay & Floating
107
108
 
108
- | Component | Description |
109
- |-----------|-------------|
110
- | Tooltip | Hover/focus tooltip with arrow and placement control |
111
- | Popover | Click-triggered floating panel |
112
- | Dropdown | Popover with keyboard-navigable menu items |
113
- | ContextMenu | Right-click triggered dropdown |
114
- | Modal | Full-screen backdrop dialog with focus trap and scroll lock |
115
- | Toast | Notification stack with auto-dismiss, variants, and position options |
116
- | 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) |
117
118
 
118
119
  ### Navigation & Layout
119
120
 
120
- | Component | Description |
121
- |-----------|-------------|
122
- | Tabs | Tabbed content with underline, pills, and boxed variants |
123
- | Accordion | Collapsible content sections (single/multiple mode) |
124
- | Breadcrumbs | Navigation breadcrumb trail with separator |
125
- | Navbar | Responsive navigation bar with hamburger collapse |
126
- | 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) |
127
128
 
128
129
  ### Rich Content
129
130
 
130
- | Component | Description |
131
- |-----------|-------------|
132
- | Composer | Chat-style message input composing textarea + actions |
133
- | Chart | SVG-based Bar and Donut charts |
134
- | Editor | Toolbar chrome wrapper for contentEditable |
135
- | Kanban | Drag-and-drop board with columns and cards (experimental) |
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
+
141
+ ### Menus & Navigation
142
+
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) |
136
148
 
137
149
  ### Utilities & Hooks
138
150
 
139
- | Export | Description |
140
- |--------|-------------|
141
- | Portal | `createPortal` wrapper with automatic dark mode propagation |
142
- | `cn()` | `clsx` + `tailwind-merge` for conditional class composition |
143
- | `useControllableState` | Controlled/uncontrolled state management |
144
- | `useFloatingPosition` | Anchor-relative positioning for floating elements |
145
- | `useOutsideClick` | Close on click outside handler |
146
- | `useEscapeKey` | Close on Escape key handler |
147
- | `useFocusTrap` | Tab-cycle focus within container |
148
- | `useAnimation` | Enter/exit CSS transitions with unmount |
149
- | `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) |
150
156
 
151
157
  ## Customization
152
158