flikkui 0.2.0-beta.1 → 0.2.0-beta.4

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 (215) hide show
  1. package/README.md +12 -539
  2. package/dist/components/ai/PromptInput/PromptInput.js +94 -4
  3. package/dist/components/ai/PromptSuggestions/PromptSuggestion.d.ts +27 -0
  4. package/dist/components/ai/PromptSuggestions/PromptSuggestion.js +62 -0
  5. package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.d.ts +10 -0
  6. package/dist/components/ai/PromptSuggestions/PromptSuggestion.theme.js +12 -0
  7. package/dist/components/ai/PromptSuggestions/PromptSuggestion.types.d.ts +53 -0
  8. package/dist/components/ai/PromptSuggestions/index.d.ts +4 -2
  9. package/dist/components/ai/index.d.ts +2 -12
  10. package/dist/components/charts/ActivityRings/ActivityRings.js +70 -58
  11. package/dist/components/charts/ActivityRings/ActivityRings.theme.js +0 -1
  12. package/dist/components/charts/ActivityRings/ActivityRings.types.d.ts +17 -0
  13. package/dist/components/charts/BarChart/BarChart.js +8 -4
  14. package/dist/components/charts/BarChart/BarChart.types.d.ts +14 -0
  15. package/dist/components/charts/DonutChart/DonutChart.js +11 -8
  16. package/dist/components/charts/DonutChart/DonutChart.theme.d.ts +3 -0
  17. package/dist/components/charts/DonutChart/DonutChart.theme.js +5 -4
  18. package/dist/components/charts/DonutChart/donut-utils.d.ts +5 -0
  19. package/dist/components/charts/DonutChart/donut-utils.js +26 -1
  20. package/dist/components/charts/Heatmap/Heatmap.theme.js +2 -2
  21. package/dist/components/charts/shared/ChartAxis/XAxis.d.ts +2 -2
  22. package/dist/components/charts/shared/ChartAxis/XAxis.js +4 -4
  23. package/dist/components/charts/shared/ChartAxis/YAxis.d.ts +2 -2
  24. package/dist/components/charts/shared/ChartAxis/YAxis.js +8 -7
  25. package/dist/components/charts/shared/ChartGrid/HorizontalGrid.d.ts +1 -1
  26. package/dist/components/charts/shared/ChartGrid/HorizontalGrid.js +2 -2
  27. package/dist/components/charts/theme/chart.theme.d.ts +1 -1
  28. package/dist/components/charts/theme/chart.theme.js +39 -39
  29. package/dist/components/core/Accordion/Accordion.d.ts +1 -1
  30. package/dist/components/core/Accordion/Accordion.js +2 -2
  31. package/dist/components/core/Accordion/Accordion.types.d.ts +8 -0
  32. package/dist/components/core/Badge/Badge.js +11 -15
  33. package/dist/components/core/Badge/Badge.theme.js +7 -21
  34. package/dist/components/core/Badge/Badge.types.d.ts +9 -1
  35. package/dist/components/core/Button/Button.js +2 -2
  36. package/dist/components/core/Button/Button.theme.js +1 -1
  37. package/dist/components/core/Button/Button.types.d.ts +8 -0
  38. package/dist/components/core/Card/Card.js +8 -2
  39. package/dist/components/core/Card/Card.theme.js +1 -1
  40. package/dist/components/core/Card/Card.types.d.ts +24 -1
  41. package/dist/components/core/Drawer/Drawer.d.ts +1 -1
  42. package/dist/components/core/Drawer/Drawer.js +10 -40
  43. package/dist/components/core/Drawer/Drawer.theme.js +2 -1
  44. package/dist/components/core/Drawer/Drawer.types.d.ts +8 -0
  45. package/dist/components/core/Dropdown/Dropdown.d.ts +1 -1
  46. package/dist/components/core/Dropdown/Dropdown.js +2 -2
  47. package/dist/components/core/Dropdown/Dropdown.types.d.ts +8 -0
  48. package/dist/components/core/Metric/Metric.d.ts +1 -1
  49. package/dist/components/core/Metric/Metric.js +9 -5
  50. package/dist/components/core/Metric/Metric.theme.d.ts +1 -1
  51. package/dist/components/core/Metric/Metric.theme.js +38 -28
  52. package/dist/components/core/Metric/Metric.types.d.ts +27 -8
  53. package/dist/components/core/Modal/Modal.d.ts +1 -1
  54. package/dist/components/core/Modal/Modal.js +17 -40
  55. package/dist/components/core/Modal/Modal.theme.js +8 -3
  56. package/dist/components/core/Modal/Modal.types.d.ts +18 -0
  57. package/dist/components/core/Modal/index.d.ts +1 -1
  58. package/dist/components/core/Notification/Notification.js +67 -0
  59. package/dist/components/core/Pill/Pill.d.ts +6 -11
  60. package/dist/components/core/Pill/Pill.theme.d.ts +2 -2
  61. package/dist/components/core/Pill/Pill.types.d.ts +9 -22
  62. package/dist/components/core/Pill/index.d.ts +1 -1
  63. package/dist/components/core/Popover/Popover.d.ts +1 -1
  64. package/dist/components/core/Popover/Popover.js +2 -2
  65. package/dist/components/core/Popover/Popover.types.d.ts +8 -0
  66. package/dist/components/core/Progress/Progress.d.ts +28 -0
  67. package/dist/components/core/Progress/Progress.js +114 -0
  68. package/dist/components/core/Progress/Progress.theme.d.ts +5 -0
  69. package/dist/components/core/Progress/Progress.theme.js +33 -0
  70. package/dist/components/core/Progress/Progress.types.d.ts +92 -0
  71. package/dist/components/core/Progress/index.d.ts +2 -0
  72. package/dist/components/core/Tabs/Tabs.js +2 -2
  73. package/dist/components/core/Tabs/Tabs.types.d.ts +8 -0
  74. package/dist/components/core/Tag/Tag.animations.d.ts +3 -0
  75. package/dist/components/core/Tag/Tag.animations.js +31 -0
  76. package/dist/components/core/Tag/Tag.d.ts +14 -0
  77. package/dist/components/core/Tag/Tag.js +45 -0
  78. package/dist/components/core/Tag/Tag.theme.d.ts +2 -0
  79. package/dist/components/core/Tag/Tag.theme.js +21 -0
  80. package/dist/components/core/Tag/Tag.types.d.ts +40 -0
  81. package/dist/components/core/Tag/index.d.ts +3 -0
  82. package/dist/components/core/Tooltip/Tooltip.d.ts +1 -1
  83. package/dist/components/core/Tooltip/Tooltip.js +3 -3
  84. package/dist/components/core/Tooltip/Tooltip.theme.js +1 -1
  85. package/dist/components/core/Tooltip/Tooltip.types.d.ts +17 -0
  86. package/dist/components/core/index.d.ts +2 -1
  87. package/dist/components/core/index.js +3 -2
  88. package/dist/components/effects/CustomCursor/CustomCursor.d.ts +0 -13
  89. package/dist/components/effects/CustomCursor/CustomCursor.js +26 -2
  90. package/dist/components/effects/CustomCursor/CustomCursor.theme.js +12 -1
  91. package/dist/components/effects/CustomCursor/CustomCursor.types.d.ts +14 -1
  92. package/dist/components/forms/Combobox/Combobox.d.ts +25 -0
  93. package/dist/components/forms/Combobox/Combobox.js +412 -0
  94. package/dist/components/forms/Combobox/Combobox.theme.d.ts +6 -0
  95. package/dist/components/forms/Combobox/Combobox.theme.js +60 -0
  96. package/dist/components/forms/Combobox/Combobox.types.d.ts +111 -0
  97. package/dist/components/forms/Combobox/index.d.ts +3 -0
  98. package/dist/components/forms/FileUpload/FileUpload.js +68 -0
  99. package/dist/components/forms/Input/Input.js +25 -28
  100. package/dist/components/forms/Input/inputMasks.d.ts +15 -0
  101. package/dist/components/forms/Input/inputMasks.js +72 -1
  102. package/dist/components/forms/InputTag/InputTag.d.ts +40 -0
  103. package/dist/components/forms/InputTag/InputTag.js +491 -0
  104. package/dist/components/forms/InputTag/InputTag.theme.d.ts +2 -0
  105. package/dist/components/forms/InputTag/InputTag.theme.js +16 -0
  106. package/dist/components/forms/InputTag/InputTag.types.d.ts +107 -0
  107. package/dist/components/forms/InputTag/index.d.ts +3 -0
  108. package/dist/components/forms/Select/Select.d.ts +101 -2
  109. package/dist/components/forms/Select/Select.js +128 -132
  110. package/dist/components/forms/Select/Select.theme.js +10 -14
  111. package/dist/components/forms/Select/Select.types.d.ts +6 -2
  112. package/dist/components/forms/Select/index.d.ts +7 -4
  113. package/dist/components/forms/Select/useSelectState.d.ts +66 -0
  114. package/dist/components/forms/Select/useSelectState.js +134 -0
  115. package/dist/components/forms/SelectExpand/SelectExpand.animations.d.ts +20 -0
  116. package/dist/components/forms/SelectExpand/SelectExpand.animations.js +74 -0
  117. package/dist/components/forms/SelectExpand/SelectExpand.d.ts +9 -0
  118. package/dist/components/forms/SelectExpand/SelectExpand.js +223 -0
  119. package/dist/components/forms/SelectExpand/SelectExpand.theme.d.ts +5 -0
  120. package/dist/components/forms/SelectExpand/SelectExpand.theme.js +74 -0
  121. package/dist/components/forms/SelectExpand/SelectExpand.types.d.ts +126 -0
  122. package/dist/components/forms/SelectExpand/index.d.ts +4 -0
  123. package/dist/components/forms/Switch/Switch.js +3 -3
  124. package/dist/components/forms/Switch/Switch.theme.d.ts +1 -1
  125. package/dist/components/forms/Switch/Switch.theme.js +2 -2
  126. package/dist/components/forms/TimePicker/TimePicker.animations.d.ts +0 -46
  127. package/dist/components/forms/TimePicker/TimePicker.d.ts +15 -6
  128. package/dist/components/forms/TimePicker/TimePicker.js +285 -124
  129. package/dist/components/forms/TimePicker/TimePicker.theme.d.ts +1 -1
  130. package/dist/components/forms/TimePicker/TimePicker.theme.js +39 -22
  131. package/dist/components/forms/TimePicker/TimePicker.types.d.ts +88 -34
  132. package/dist/components/forms/TimePicker/TimePickerContent.d.ts +7 -10
  133. package/dist/components/forms/TimePicker/TimePickerContent.js +149 -16
  134. package/dist/components/forms/TimePicker/TimePickerTrigger.d.ts +3 -3
  135. package/dist/components/forms/TimePicker/TimePickerTrigger.js +22 -19
  136. package/dist/components/forms/TimePicker/WheelColumn.d.ts +14 -0
  137. package/dist/components/forms/TimePicker/WheelColumn.js +90 -0
  138. package/dist/components/forms/TimePicker/index.d.ts +4 -1
  139. package/dist/components/forms/TimePicker/useWheelPicker.d.ts +37 -0
  140. package/dist/components/forms/TimePicker/useWheelPicker.js +138 -0
  141. package/dist/components/forms/forms.theme.d.ts +14 -0
  142. package/dist/components/forms/forms.theme.js +31 -0
  143. package/dist/components/forms/index.d.ts +9 -3
  144. package/dist/components/forms/index.js +73 -2
  145. package/dist/hooks/index.d.ts +0 -4
  146. package/dist/icons/Icon.d.ts +7 -0
  147. package/dist/icons/Icon.js +6 -2
  148. package/dist/index.js +62 -63
  149. package/dist/styles.css +1 -1
  150. package/dist/utils/index.d.ts +0 -1
  151. package/dist/utils/optimisticErrors.js +1 -70
  152. package/package.json +1 -1
  153. package/dist/components/ai/EditingIndicator/EditingIndicator.animations.d.ts +0 -31
  154. package/dist/components/ai/EditingIndicator/EditingIndicator.animations.js +0 -115
  155. package/dist/components/ai/EditingIndicator/EditingIndicator.d.ts +0 -35
  156. package/dist/components/ai/EditingIndicator/EditingIndicator.js +0 -94
  157. package/dist/components/ai/EditingIndicator/EditingIndicator.theme.d.ts +0 -2
  158. package/dist/components/ai/EditingIndicator/EditingIndicator.theme.js +0 -13
  159. package/dist/components/ai/EditingIndicator/EditingIndicator.types.d.ts +0 -54
  160. package/dist/components/ai/EditingIndicator/index.d.ts +0 -9
  161. package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.d.ts +0 -3
  162. package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.js +0 -126
  163. package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.theme.d.ts +0 -2
  164. package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.theme.js +0 -8
  165. package/dist/components/ai/GenerativeRenderer/GenerativeRenderer.types.d.ts +0 -45
  166. package/dist/components/ai/GenerativeRenderer/index.d.ts +0 -3
  167. package/dist/components/ai/PresenceIndicator/PresenceIndicator.animations.d.ts +0 -17
  168. package/dist/components/ai/PresenceIndicator/PresenceIndicator.animations.js +0 -56
  169. package/dist/components/ai/PresenceIndicator/PresenceIndicator.d.ts +0 -38
  170. package/dist/components/ai/PresenceIndicator/PresenceIndicator.js +0 -110
  171. package/dist/components/ai/PresenceIndicator/PresenceIndicator.theme.d.ts +0 -2
  172. package/dist/components/ai/PresenceIndicator/PresenceIndicator.theme.js +0 -13
  173. package/dist/components/ai/PresenceIndicator/PresenceIndicator.types.d.ts +0 -53
  174. package/dist/components/ai/PresenceIndicator/index.d.ts +0 -8
  175. package/dist/components/ai/PresenceProvider/PresenceContext.d.ts +0 -24
  176. package/dist/components/ai/PresenceProvider/PresenceContext.js +0 -34
  177. package/dist/components/ai/PresenceProvider/PresenceProvider.d.ts +0 -32
  178. package/dist/components/ai/PresenceProvider/PresenceProvider.js +0 -321
  179. package/dist/components/ai/PresenceProvider/PresenceProvider.types.d.ts +0 -140
  180. package/dist/components/ai/PresenceProvider/adapters/MockAdapter.d.ts +0 -102
  181. package/dist/components/ai/PresenceProvider/adapters/MockAdapter.js +0 -331
  182. package/dist/components/ai/PresenceProvider/adapters/PresenceAdapter.d.ts +0 -93
  183. package/dist/components/ai/PresenceProvider/adapters/SupabaseAdapter.d.ts +0 -134
  184. package/dist/components/ai/PresenceProvider/adapters/WebSocketAdapter.d.ts +0 -149
  185. package/dist/components/ai/PresenceProvider/adapters/index.d.ts +0 -11
  186. package/dist/components/ai/PresenceProvider/index.d.ts +0 -10
  187. package/dist/components/ai/PromptSuggestions/PromptSuggestions.d.ts +0 -27
  188. package/dist/components/ai/PromptSuggestions/PromptSuggestions.js +0 -61
  189. package/dist/components/ai/PromptSuggestions/PromptSuggestions.types.d.ts +0 -65
  190. package/dist/components/ai/VersionSlider/VersionSlider.d.ts +0 -3
  191. package/dist/components/ai/VersionSlider/VersionSlider.js +0 -97
  192. package/dist/components/ai/VersionSlider/VersionSlider.theme.d.ts +0 -2
  193. package/dist/components/ai/VersionSlider/VersionSlider.theme.js +0 -18
  194. package/dist/components/ai/VersionSlider/VersionSlider.types.d.ts +0 -77
  195. package/dist/components/ai/VersionSlider/index.d.ts +0 -3
  196. package/dist/components/core/Pill/Pill.animations.js +0 -25
  197. package/dist/components/core/Pill/Pill.js +0 -145
  198. package/dist/components/core/Pill/Pill.theme.js +0 -65
  199. package/dist/components/core/RetryBoundary/RetryBoundary.d.ts +0 -35
  200. package/dist/components/core/RetryBoundary/RetryBoundary.js +0 -154
  201. package/dist/components/core/RetryBoundary/RetryBoundary.theme.d.ts +0 -2
  202. package/dist/components/core/RetryBoundary/RetryBoundary.theme.js +0 -7
  203. package/dist/components/core/RetryBoundary/RetryBoundary.types.d.ts +0 -51
  204. package/dist/components/core/RetryBoundary/index.d.ts +0 -3
  205. package/dist/components/forms/OptimisticForm/OptimisticForm.d.ts +0 -33
  206. package/dist/components/forms/OptimisticForm/OptimisticForm.js +0 -87
  207. package/dist/components/forms/OptimisticForm/OptimisticForm.theme.d.ts +0 -2
  208. package/dist/components/forms/OptimisticForm/OptimisticForm.theme.js +0 -8
  209. package/dist/components/forms/OptimisticForm/OptimisticForm.types.d.ts +0 -74
  210. package/dist/components/forms/OptimisticForm/index.d.ts +0 -3
  211. package/dist/hooks/useOptimisticMutation.d.ts +0 -109
  212. package/dist/hooks/useOptimisticMutation.js +0 -171
  213. package/dist/hooks/usePresence.d.ts +0 -88
  214. package/dist/utils/presenceUtils.d.ts +0 -66
  215. package/dist/utils/presenceUtils.js +0 -107
package/README.md CHANGED
@@ -1,566 +1,39 @@
1
1
  # Flikkui
2
2
 
3
- <p align="center">
4
- <strong>A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion</strong>
5
- </p>
3
+ A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion.
6
4
 
7
- <p align="center">
8
- <a href="https://www.npmjs.com/package/flikkui"><img src="https://img.shields.io/npm/v/flikkui?label=npm&color=blue" alt="npm version" /></a>
9
- <a href="https://www.npmjs.com/package/flikkui"><img src="https://img.shields.io/npm/dm/flikkui" alt="npm downloads" /></a>
10
- <a href="https://github.com/yourusername/flikkui/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="License" /></a>
11
- <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-blue" alt="TypeScript" /></a>
12
- </p>
13
-
14
- <p align="center">
15
- Follows the <strong>shadcn philosophy</strong> - override any styling using className props while getting sensible defaults out of the box.
16
- </p>
17
-
18
- ---
19
-
20
- ## 📋 Table of Contents
21
-
22
- - [Why Flikkui?](#-why-flikkui)
23
- - [Quick Start](#-quick-start)
24
- - [Usage Examples](#-usage-examples)
25
- - [Tree-Shaking & Optimized Imports](#-tree-shaking--optimized-imports)
26
- - [Customization](#-customization)
27
- - [Component Library](#-component-library)
28
- - [Performance](#-performance)
29
- - [Documentation](#-documentation)
30
- - [Contributing](#-contributing)
31
- - [License](#-license)
32
-
33
- ---
34
-
35
- ## ✨ Why Flikkui?
36
-
37
- - 🎨 **100+ Production-Ready Components** - Everything from buttons to complex charts
38
- - 🚀 **CLI Setup Tool** - Get started in 30 seconds with `npx flikkui init`
39
- - 🌳 **Optimized Tree-Shaking** - 60-85% bundle size reduction
40
- - 🎭 **CSS Variables** - Easy theming without JavaScript
41
- - ⚡ **Tailwind CSS v4** - Latest and greatest
42
- - 🔥 **TypeScript-First** - Excellent DX with full type safety
43
- - ♿ **Accessibility Built-In** - WCAG 2.1 AA compliance
44
- - 🎪 **shadcn Compatible** - className overrides always take precedence
45
-
46
- ### 📊 Features at a Glance
47
-
48
- | Feature | Flikkui | Other Libraries |
49
- |---------|---------|-----------------|
50
- | **Setup Time** | 30 seconds (CLI) | 10+ minutes (manual) |
51
- | **TypeScript** | ✅ Built-in | ⚠️ Limited/Optional |
52
- | **Tree-Shaking** | ✅ Optimized | ⚠️ Basic |
53
- | **className Override** | ✅ Always works | ❌ Often blocked |
54
- | **CSS Variables** | ✅ Full support | ⚠️ Partial |
55
- | **Accessibility** | ✅ WCAG 2.1 AA | ⚠️ Basic |
56
- | **Bundle Size** | 🟢 15-150KB | 🟡 100-500KB |
57
- | **Animation** | ✅ Optional Motion | ⚠️ Required/None |
58
- | **Charts** | ✅ 18+ Built-in | ❌ Separate library |
59
- | **AI Components** | ✅ Included | ❌ Not available |
60
-
61
- ## 🚀 Quick Start
62
-
63
- ### ⚡ Automatic Setup (Recommended)
64
-
65
- Get started in seconds with our CLI tool:
5
+ ## Installation
66
6
 
67
7
  ```bash
68
- # Step 1: Install Flikkui
69
- npm install flikkui@beta
70
-
71
- # Step 2: Run the setup wizard
72
- npx flikkui init
8
+ npm install flikkui
73
9
  ```
74
10
 
75
- **That's it!** The CLI automatically:
76
- - ✅ Installs all required dependencies (@heroicons/react, motion, tailwindcss, etc.)
77
- - ✅ Detects your framework (Next.js, Vite, CRA, Remix)
78
- - ✅ Injects CSS imports in the right file
79
- - ✅ Configures Tailwind CSS (optional)
80
-
81
- **CLI Options:**
82
- ```bash
83
- npx flikkui init # 🎯 Interactive setup (recommended)
84
- npx flikkui init --tailwind # ⚡ Include Tailwind config
85
- npx flikkui init --yes # 🚀 Skip prompts, use defaults
86
- npx flikkui init --skip-install # 📦 Manual dependency installation
87
- ```
11
+ ## Setup
88
12
 
89
- > 💡 **Supports:** Next.js (App Router & Pages Router), Vite, Create React App, Remix, and generic React projects
90
-
91
- ### Manual Setup
92
-
93
- If you prefer manual installation:
94
-
95
- #### 1. Install the package
96
-
97
- ```bash
98
- npm install flikkui @heroicons/react clsx motion tailwind-merge tailwindcss react-markdown react-syntax-highlighter remark-gfm three
99
- ```
100
-
101
- **Or with yarn:**
102
- ```bash
103
- yarn add flikkui @heroicons/react clsx motion tailwind-merge tailwindcss react-markdown react-syntax-highlighter remark-gfm three
104
- ```
105
-
106
- #### 2. Import styles in your app
13
+ Import styles in your main app file:
107
14
 
108
15
  ```tsx
109
- // In your main App.tsx, index.tsx, or _app.tsx
110
16
  import 'flikkui/styles.css'
111
-
112
- function App() {
113
- return <YourApp />
114
- }
115
17
  ```
116
18
 
117
- #### 3. Start using components
19
+ ## Basic Usage
118
20
 
119
21
  ```tsx
120
22
  import { Button } from 'flikkui'
121
23
 
122
- export function MyComponent() {
123
- return (
124
- <Button variant="primary">
125
- Hello World
126
- </Button>
127
- )
128
- }
129
- ```
130
-
131
- ---
132
-
133
- ## 💻 Usage Examples
134
-
135
- ### Basic Components
136
-
137
- ```tsx
138
- import { Button, Badge, Avatar } from 'flikkui'
139
-
140
24
  function App() {
141
- return (
142
- <div>
143
- {/* Button with variants */}
144
- <Button variant="primary" size="md">
145
- Click me
146
- </Button>
147
-
148
- {/* Badge with colors */}
149
- <Badge color="success" variant="soft">
150
- Active
151
- </Badge>
152
-
153
- {/* Avatar */}
154
- <Avatar
155
- src="/user.jpg"
156
- alt="User"
157
- size="md"
158
- />
159
- </div>
160
- )
25
+ return <Button variant="primary">Click me</Button>
161
26
  }
162
27
  ```
163
28
 
164
- ### Form Components
165
-
166
- ```tsx
167
- import { Input, Select, Checkbox } from 'flikkui/forms'
168
- import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
169
-
170
- function SearchForm() {
171
- return (
172
- <form>
173
- {/* Input with icon */}
174
- <Input
175
- placeholder="Search..."
176
- iconStart={<MagnifyingGlassIcon />}
177
- />
29
+ ## Documentation
178
30
 
179
- {/* Select */}
180
- <Select>
181
- <option>Choose option</option>
182
- <option>Option 1</option>
183
- </Select>
184
-
185
- {/* Checkbox */}
186
- <Checkbox label="Remember me" />
187
- </form>
188
- )
189
- }
190
- ```
191
-
192
- ### Charts
193
-
194
- ```tsx
195
- import { AreaChart, BarChart } from 'flikkui/charts'
196
-
197
- const data = [
198
- { month: 'Jan', sales: 4000, revenue: 2400 },
199
- { month: 'Feb', sales: 3000, revenue: 1398 },
200
- { month: 'Mar', sales: 2000, revenue: 9800 },
201
- ]
202
-
203
- const config = {
204
- sales: { label: 'Sales', color: '#3b82f6' },
205
- revenue: { label: 'Revenue', color: '#10b981' },
206
- }
207
-
208
- function Dashboard() {
209
- return (
210
- <div>
211
- <AreaChart
212
- data={data}
213
- config={config}
214
- className="h-80"
215
- showGrid
216
- curved
217
- />
218
-
219
- <BarChart
220
- data={data}
221
- config={config}
222
- className="h-80"
223
- />
224
- </div>
225
- )
226
- }
227
- ```
228
-
229
- ### Advanced: Compound Components
230
-
231
- ```tsx
232
- import { Accordion, Modal, Tabs } from 'flikkui'
233
-
234
- function AdvancedExample() {
235
- return (
236
- <>
237
- {/* Accordion */}
238
- <Accordion>
239
- <Accordion.Item>
240
- <Accordion.Trigger>What is Flikkui?</Accordion.Trigger>
241
- <Accordion.Content>
242
- A modern React component library...
243
- </Accordion.Content>
244
- </Accordion.Item>
245
- </Accordion>
246
-
247
- {/* Tabs */}
248
- <Tabs defaultValue="profile">
249
- <Tabs.List>
250
- <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
251
- <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
252
- </Tabs.List>
253
- <Tabs.Content value="profile">Profile content</Tabs.Content>
254
- <Tabs.Content value="settings">Settings content</Tabs.Content>
255
- </Tabs>
256
- </>
257
- )
258
- }
259
- ```
260
-
261
- ## 🌳 Tree-Shaking & Optimized Imports
262
-
263
- Flikkui is optimized for tree-shaking. For the best bundle size, import components from category subpaths:
264
-
265
- ```tsx
266
- // ✅ Recommended: Category imports (best tree-shaking)
267
- import { Button } from 'flikkui/core'
268
- import { Input, Select } from 'flikkui/forms'
269
- import { BarChart } from 'flikkui/charts'
270
- import { GlassEffect } from 'flikkui/effects'
271
-
272
- // ✅ Also works: Main import (backward compatible)
273
- import { Button, Input, BarChart } from 'flikkui'
274
- ```
275
-
276
- ### Bundle Size Comparison
277
-
278
- | Import Method | Components Used | Bundle Size | Savings |
279
- |--------------|----------------|-------------|---------|
280
- | Category imports | 1-3 components | ~50-100KB | 85-90% |
281
- | Category imports | 10-20 components | ~250-400KB | 67-79% |
282
- | Main import | Any | Works, but larger | - |
283
-
284
- **Categories available:**
285
- - `flikkui/core` - Button, Modal, Dropdown, Tooltip, etc.
286
- - `flikkui/forms` - Input, Select, Checkbox, Radio, etc.
287
- - `flikkui/charts` - AreaChart, BarChart, LineChart, etc.
288
- - `flikkui/effects` - GlassEffect, visual effects
289
-
290
- ## 🎨 Customization
291
-
292
- ### Using className Overrides (Recommended)
293
-
294
- Override styles using className props - the shadcn approach:
295
-
296
- ```tsx
297
- <Button className="bg-purple-600 hover:bg-purple-700 rounded-full">
298
- Custom Button
299
- </Button>
300
-
301
- <Input className="border-blue-500 focus:ring-blue-500" />
302
-
303
- <Badge className="bg-gradient-to-r from-purple-500 to-pink-500">
304
- Gradient Badge
305
- </Badge>
306
- ```
307
-
308
- ### Using CSS Variables
309
-
310
- Customize your design system globally by overriding CSS variables:
311
-
312
- ```css
313
- /* In your global CSS file */
314
- @layer base {
315
- :root {
316
- /* Change primary color */
317
- --color-primary-600: #7c3aed; /* Purple */
318
- --color-primary-700: #6d28d9;
319
-
320
- /* Larger buttons */
321
- --button-min-h-md: 3rem;
322
- --button-px-md: 1.25rem;
323
-
324
- /* More rounded design */
325
- --form-rounded: 1rem;
326
- --button-rounded: 0.75rem;
327
- }
328
- }
329
- ```
31
+ This package is currently in beta. Full documentation coming soon.
330
32
 
331
- **Available CSS variables:**
332
- - Colors: `--color-primary-*`, `--color-danger-*`, `--color-success-*`, `--color-warning-*`
333
- - Text: `--color-text-primary`, `--color-text-secondary`, `--color-text-muted`
334
- - Backgrounds: `--color-background`, `--color-background-secondary`
335
- - Component-specific: `--button-*`, `--form-*`, `--modal-*`, etc.
33
+ ## License
336
34
 
337
- ## 📚 Component Library
338
-
339
- Flikkui includes **100+ production-ready components** across 5 categories. All components are:
340
- - ✅ **TypeScript-ready** with full type definitions
341
- - ✅ **Accessible** - WCAG 2.1 AA compliant
342
- - ✅ **Customizable** - Override with className
343
- - ✅ **Responsive** - Mobile-first design
344
- - ✅ **Themeable** - CSS variables support
345
- - ✅ **Animated** - Optional Framer Motion support
346
-
347
- ### 🎨 Core Components (45+)
348
-
349
- ```tsx
350
- import {
351
- Button, Avatar, AvatarGroup, Badge, Accordion,
352
- Modal, Drawer, Popover, Dropdown, Tooltip, Tabs,
353
- Card, CardStack, Stepper, Segmented, Pagination,
354
- Breadcrumbs, Link, Divider, Skeleton, Loader,
355
- Calendar, Tree, CommandPalette, ContextMenu,
356
- Sidebar, NavItem, Notification, Toast
357
- } from 'flikkui/core'
358
- ```
359
-
360
- **Highlights:** Modal, Drawer, Tabs, Accordion, Dropdown, Tooltip, Popover, Card, CommandPalette
361
-
362
- ### 📝 Form Components (22+)
363
-
364
- ```tsx
365
- import {
366
- Input, Select, Checkbox, Radio, Switch, Textarea,
367
- DatePicker, TimePicker, ColorPicker, RichTextEditor,
368
- FileUpload, Slider, Rating, PasswordInput, PinInput,
369
- FormLabel, TagInput, MultiSelect, SearchableSelect
370
- } from 'flikkui/forms'
371
- ```
372
-
373
- **Highlights:** Input (with icons), Select, DatePicker, FileUpload, RichTextEditor, ColorPicker
374
-
375
- ### 📊 Chart Components (18+)
376
-
377
- ```tsx
378
- import {
379
- AreaChart, BarChart, LineChart, DonutChart, Heatmap,
380
- FunnelChart, ScatterPlot, ActivityRings, ComboChart,
381
- RadarChart, TreeMap, Sparkline, ProgressChart
382
- } from 'flikkui/charts'
383
- ```
384
-
385
- **Highlights:** AreaChart, LineChart, BarChart, DonutChart, Heatmap, FunnelChart
386
-
387
- ### ✨ Effect Components
388
-
389
- ```tsx
390
- import { GlassEffect, CustomCursor, Overlay } from 'flikkui/effects'
391
- ```
392
-
393
- **Highlights:** GlassEffect (automatic color adaptation), CustomCursor, Overlay
394
-
395
- ### 🤖 AI Components
396
-
397
- ```tsx
398
- import { Message, PromptInput, ThinkingIndicator } from 'flikkui/ai'
399
- ```
400
-
401
- **Highlights:** Message (with typewriter effect), PromptInput (AI-ready interface)
402
-
403
- ## 🆕 What's New in v0.1.0-beta.12+
404
-
405
- ### 🚀 CLI Setup Tool (NEW!)
406
-
407
- The biggest addition - automatic setup with `npx flikkui init`:
408
- - ✅ Auto-detects your framework (Next.js, Vite, CRA, Remix)
409
- - ✅ Installs all peer dependencies
410
- - ✅ Injects CSS imports automatically
411
- - ✅ Configures Tailwind (optional)
412
-
413
- ### 🌳 Better Tree-Shaking
414
-
415
- Improved bundle size with category imports:
416
- ```tsx
417
- // Before: All components bundled
418
- import { Button, Input } from 'flikkui'
419
-
420
- // After: Only what you need (60-85% smaller)
421
- import { Button } from 'flikkui/core'
422
- import { Input } from 'flikkui/forms'
423
- ```
424
-
425
- ### 📦 Peer Dependencies
426
-
427
- Dependencies are now peers (not bundled) for maximum flexibility and smaller package size.
428
-
429
- ---
430
-
431
- ## 🔄 Migration Guide
432
-
433
- ### Upgrading from beta.11 → beta.12+
434
-
435
- **The easiest way:**
436
- ```bash
437
- npx flikkui init
438
- ```
439
-
440
- **Manual upgrade:**
441
-
442
- 1. **Install peer dependencies:**
443
- ```bash
444
- npm install @heroicons/react clsx motion tailwind-merge tailwindcss react-markdown react-syntax-highlighter remark-gfm three
445
- ```
446
-
447
- 2. **No code changes needed!** ✅
448
- ```tsx
449
- import { Button } from 'flikkui' // Still works
450
- import 'flikkui/styles.css' // Still works
451
- ```
452
-
453
- 3. **Optional: Use category imports for better tree-shaking:**
454
- ```tsx
455
- import { Button } from 'flikkui/core' // Smaller bundles
456
- ```
457
-
458
- ### First Time Installing?
459
-
460
- Just run:
461
- ```bash
462
- npm install flikkui@beta
463
- npx flikkui init
464
- ```
465
-
466
- ## 💡 Philosophy
467
-
468
- Flikkui follows the **shadcn approach**:
469
- - ✅ Components provide sensible defaults
470
- - ✅ **className overrides always take precedence**
471
- - ✅ Full TypeScript support with excellent DX
472
- - ✅ Copy-paste friendly - customize anything
473
- - ✅ CSS variables for consistent theming
474
- - ✅ Tree-shaking optimized - only bundle what you use
475
-
476
- ## 🛠️ Tech Stack
477
-
478
- - **React 18+** with TypeScript (strict mode)
479
- - **Tailwind CSS v4** with CSS variables
480
- - **Framer Motion 12+** for smooth animations
481
- - **Heroicons** for consistent iconography
482
- - **Accessibility-first** - WCAG 2.1 AA compliance built-in
483
- - **Optimized build** - Rollup with ESM output and preserveModules
484
-
485
- ## ⚡ Performance
486
-
487
- Flikkui is optimized for production:
488
-
489
- - **Tree-shaking ready** - Only bundle components you use
490
- - **Small package size** - ~800KB unpacked (no bundled dependencies)
491
- - **Zero runtime overhead** - CSS variables, no theme providers
492
- - **Optimized animations** - Framer Motion with reduced motion support
493
- - **Code splitting** - Category-level exports for granular imports
494
-
495
- **Real-world bundle sizes (production build, gzipped):**
496
- - Single component (Button): ~15-20KB
497
- - Small app (5 components): ~40-60KB
498
- - Medium app (20 components): ~100-150KB
499
-
500
- ## 🎯 Browser Support
501
-
502
- - Chrome (latest)
503
- - Firefox (latest)
504
- - Safari (latest)
505
- - Edge (latest)
506
-
507
- **Note:** Requires browsers with CSS custom properties support.
508
-
509
- ## 📖 Documentation
510
-
511
- Comprehensive documentation and resources:
512
-
513
- - 📚 **[Documentation](https://flikkui.dev)** - Complete API reference
514
- - 🎨 **[Storybook](https://storybook.flikkui.dev)** - Interactive component demos
515
- - 🚀 **[Getting Started Guide](./docs/INSTALLATION.md)** - Detailed setup instructions
516
- - 🛠️ **[CLI Documentation](./docs/CLI.md)** - CLI command reference
517
- - 🎭 **[Theming Guide](https://flikkui.dev/theming)** - Customization and CSS variables
518
- - 🔄 **[Migration Guides](https://flikkui.dev/migrations)** - Version upgrade guides
519
-
520
- ## 🤝 Contributing
521
-
522
- We welcome contributions! Here's how you can help:
523
-
524
- - 🐛 **Report bugs** - [Create an issue](https://github.com/yourusername/flikkui/issues)
525
- - 💡 **Suggest features** - [Start a discussion](https://github.com/yourusername/flikkui/discussions)
526
- - 📝 **Improve docs** - Submit documentation PRs
527
- - 🎨 **Add components** - Contribute new components
528
-
529
- Please read our [Contributing Guidelines](./CONTRIBUTING.md) before submitting PRs.
530
-
531
- ## 📄 License
532
-
533
- **MIT License** - Free to use in personal and commercial projects.
534
-
535
- See [LICENSE](./LICENSE) for full details.
536
-
537
- ---
538
-
539
- ## 🌟 Show Your Support
540
-
541
- If you find Flikkui helpful, please consider:
542
-
543
- - ⭐ **Star this repository** on GitHub
544
- - 🐦 **Share on Twitter** with #Flikkui
545
- - 📝 **Write a blog post** about your experience
546
- - 💬 **Join our community** discussions
35
+ MIT License - see LICENSE file for details.
547
36
 
548
37
  ---
549
38
 
550
- ## 🔗 Links
551
-
552
- - **NPM Package:** [npmjs.com/package/flikkui](https://www.npmjs.com/package/flikkui)
553
- - **Documentation:** [flikkui.dev](https://flikkui.dev)
554
- - **GitHub:** [github.com/yourusername/flikkui](https://github.com/yourusername/flikkui)
555
- - **Issues:** [github.com/yourusername/flikkui/issues](https://github.com/yourusername/flikkui/issues)
556
- - **Changelog:** [CHANGELOG.md](./CHANGELOG.md)
557
-
558
- ---
559
-
560
- <p align="center">
561
- Built with ❤️ by <a href="https://espranza.net">Espranza Innovations</a>
562
- </p>
563
-
564
- <p align="center">
565
- <strong>Flikkui</strong> - Modern React Components for Modern Apps
566
- </p>
39
+ Built by Espranza Innovations
@@ -1,16 +1,106 @@
1
1
  import React__default, { useState, useRef, useId, useEffect, useCallback } from 'react';
2
- import { cn } from '../../../utils/cn.js';
3
- import { DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, MicrophoneIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
4
- import { promptInputTheme } from './PromptInput.theme.js';
2
+ import '../../forms/Input/Input.js';
3
+ import '../../forms/Input/Input.theme.js';
4
+ import '../../forms/Select/Select.js';
5
+ import '../../forms/Select/Select.theme.js';
5
6
  import { Textarea } from '../../forms/Textarea/Textarea.js';
6
7
  import '../../forms/Textarea/Textarea.theme.js';
8
+ import { cn } from '../../../utils/cn.js';
9
+ import { DocumentIcon, XMarkIcon, PlusIcon, AdjustmentsHorizontalIcon, MicrophoneIcon, ChevronDownIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
10
+ import 'motion/react';
11
+ import '../../forms/DatePicker/DatePicker.js';
12
+ import '../../forms/DatePicker/DatePicker.theme.js';
13
+ import '../../forms/FileUpload/FileUpload.js';
14
+ import '../../forms/TimePicker/TimePicker.js';
15
+ import 'react-dom';
16
+ import '../../core/Accordion/Accordion.js';
17
+ import '../../core/AlertDialog/AlertDialog.js';
18
+ import '../../core/Avatar/Avatar.js';
19
+ import '../../core/AvatarGroup/AvatarGroup.js';
20
+ import '../../core/Badge/Badge.js';
21
+ import '../../core/Breadcrumbs/Breadcrumbs.js';
22
+ import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
23
+ import { Button } from '../../core/Button/Button.js';
24
+ import '../../core/ButtonGroup/ButtonGroup.js';
25
+ import '../../core/ButtonGroup/ButtonGroupSeparator.js';
26
+ import '../../core/ButtonGroup/ButtonGroupText.js';
27
+ import '../../core/Calendar/CalendarMini/CalendarMini.js';
28
+ import '../../core/Card/Card.js';
29
+ import '../../core/CardStack/CardStack.js';
30
+ import '../../core/Carousel/Carousel.js';
31
+ import '../../core/Kbd/Kbd.js';
32
+ import '../../effects/Overlay/Overlay.js';
33
+ import '../../core/Divider/Divider.js';
34
+ import '../../core/Drawer/Drawer.js';
7
35
  import { Dropdown } from '../../core/Dropdown/Dropdown.js';
8
36
  import '../../core/Dropdown/DropdownTrigger.js';
9
37
  import '../../core/Dropdown/DropdownMenu.js';
10
38
  import '../../core/Dropdown/DropdownItem.js';
11
39
  import '../../core/Dropdown/DropdownSection.js';
12
40
  import '../../core/Dropdown/DropdownSeparator.js';
13
- import { Button } from '../../core/Button/Button.js';
41
+ import '../../core/Link/Link.js';
42
+ import '../../core/Loader/Loader.js';
43
+ import '../../core/Modal/Modal.js';
44
+ import '../../core/Pagination/Pagination.js';
45
+ import '../../core/Popover/Popover.js';
46
+ import '../../core/Popover/PopoverContext.js';
47
+ import '../../core/Progress/Progress.js';
48
+ import '../../core/ProgressiveBlur/ProgressiveBlur.js';
49
+ import '../../core/Segmented/Segmented.js';
50
+ import '../../core/Skeleton/Skeleton.js';
51
+ import '../../core/SlidingNumber/SlidingNumber.js';
52
+ import '../../core/Stepper/Stepper.js';
53
+ import '../../core/Tabs/Tabs.js';
54
+ import '../../core/Tabs/TabsList.js';
55
+ import '../../core/Tabs/TabsTrigger.js';
56
+ import '../../core/Tabs/TabsContent.js';
57
+ import '../../core/Tabs/TabsContext.js';
58
+ import '../../core/Tooltip/Tooltip.js';
59
+ import '../../core/Tooltip/Tooltip.animations.js';
60
+ import '../../core/Tree/Tree.js';
61
+ import '../../core/Tag/Tag.js';
62
+ import '../../core/Alert/Alert.js';
63
+ import '../../core/Toast/Toast.js';
64
+ import '../../core/Toast/ToastProvider.js';
65
+ import '../../core/Notification/Notification.js';
66
+ import '@heroicons/react/24/solid';
67
+ import '../../core/Message/Message.js';
68
+ import '../../core/Message/TypeWriter.js';
69
+ import '../../core/Empty/Empty.js';
70
+ import '../../core/Table/index.js';
71
+ import '../../core/DragDrop/DragDrop.js';
72
+ import '../../core/Sortable/Sortable.js';
73
+ import '../../core/NavItem/NavItem.js';
74
+ import '../../core/Sidebar/Sidebar.js';
75
+ import '../../core/Sidebar/SidebarHeader.js';
76
+ import '../../core/Sidebar/SidebarContent.js';
77
+ import '../../core/Sidebar/SidebarFooter.js';
78
+ import '../../core/Sidebar/SidebarNav.js';
79
+ import '../../core/Sidebar/SidebarNavGroup.js';
80
+ import '../../core/Sidebar/SidebarToggle.js';
81
+ import '../../core/Sidebar/SidebarContext.js';
82
+ import '../../forms/TimePicker/WheelColumn.js';
83
+ import '../../forms/TimePicker/TimePicker.theme.js';
84
+ import '../../forms/Slider/Slider.js';
85
+ import '../../forms/Slider/Slider.theme.js';
86
+ import '../../forms/Signature/Signature.js';
87
+ import '../../forms/Signature/Signature.theme.js';
88
+ import '../../forms/RichTextEditor/RichTextEditor.js';
89
+ import '../../forms/RichTextEditor/RichTextEditor.theme.js';
90
+ import '../../forms/InputOTP/InputOTP.js';
91
+ import '../../forms/InputOTP/InputOTP.theme.js';
92
+ import '../../forms/InputCreditCard/InputCreditCard.theme.js';
93
+ import '../../forms/InputAddress/InputAddress.theme.js';
94
+ import '../../forms/InputDate/InputDate.js';
95
+ import '../../forms/InputCounter/InputCounter.js';
96
+ import '../../forms/StepperForm/StepperForm.js';
97
+ import '../../forms/StepperForm/StepperForm.types.js';
98
+ import '../../forms/SelectExpand/SelectExpand.theme.js';
99
+ import '../../forms/InputTag/InputTag.js';
100
+ import '../../forms/InputTag/InputTag.theme.js';
101
+ import '../../forms/Combobox/Combobox.js';
102
+ import '../../forms/Combobox/Combobox.theme.js';
103
+ import { promptInputTheme } from './PromptInput.theme.js';
14
104
 
15
105
  /**
16
106
  * Default model options for the model selector