frutjam 2.3.0-beta.1 โ†’ 2.3.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 (273) hide show
  1. package/LICENSE +1 -1
  2. package/README.github.md +382 -0
  3. package/README.md +90 -42
  4. package/README.npm.md +124 -0
  5. package/dist/base/reboot/index.js +5 -0
  6. package/dist/base/reboot/object.js +1 -0
  7. package/dist/base/tokens/index.js +5 -0
  8. package/dist/base/tokens/object.js +1 -0
  9. package/dist/base.css +62 -0
  10. package/dist/base.css.d.ts +1 -0
  11. package/dist/components/accordion/index.js +7 -0
  12. package/dist/components/accordion/object.js +1 -0
  13. package/dist/components/accordion.css +2 -0
  14. package/dist/components/accordion.css.d.ts +1 -0
  15. package/dist/components/alert/index.js +7 -0
  16. package/dist/components/alert/object.js +1 -0
  17. package/dist/components/alert.css +2 -0
  18. package/dist/components/alert.css.d.ts +1 -0
  19. package/dist/components/avatar/index.js +7 -0
  20. package/dist/components/avatar/object.js +1 -0
  21. package/dist/components/avatar.css +2 -0
  22. package/dist/components/avatar.css.d.ts +1 -0
  23. package/dist/components/badge/index.js +7 -0
  24. package/dist/components/badge/object.js +1 -0
  25. package/dist/components/badge.css +2 -0
  26. package/dist/components/badge.css.d.ts +1 -0
  27. package/dist/components/breadcrumb/index.js +7 -0
  28. package/dist/components/breadcrumb/object.js +1 -0
  29. package/dist/components/breadcrumb.css +2 -0
  30. package/dist/components/breadcrumb.css.d.ts +1 -0
  31. package/dist/components/button/index.js +7 -0
  32. package/dist/components/button/object.js +1 -0
  33. package/dist/components/button.css +2 -0
  34. package/dist/components/button.css.d.ts +1 -0
  35. package/dist/components/card/index.js +7 -0
  36. package/dist/components/card/object.js +1 -0
  37. package/dist/components/card.css +2 -0
  38. package/dist/components/card.css.d.ts +1 -0
  39. package/dist/components/carousel/index.js +7 -0
  40. package/dist/components/carousel/object.js +1 -0
  41. package/dist/components/carousel.css +2 -0
  42. package/dist/components/carousel.css.d.ts +1 -0
  43. package/dist/components/chat/index.js +7 -0
  44. package/dist/components/chat/object.js +1 -0
  45. package/dist/components/chat.css +2 -0
  46. package/dist/components/chat.css.d.ts +1 -0
  47. package/dist/components/checkbox/index.js +7 -0
  48. package/dist/components/checkbox/object.js +1 -0
  49. package/dist/components/checkbox.css +2 -0
  50. package/dist/components/checkbox.css.d.ts +1 -0
  51. package/dist/components/collapsible/index.js +7 -0
  52. package/dist/components/collapsible/object.js +1 -0
  53. package/dist/components/collapsible.css +2 -0
  54. package/dist/components/collapsible.css.d.ts +1 -0
  55. package/dist/components/combobox/index.js +7 -0
  56. package/dist/components/combobox/object.js +1 -0
  57. package/dist/components/combobox.css +2 -0
  58. package/dist/components/combobox.css.d.ts +1 -0
  59. package/dist/components/countdown/index.js +7 -0
  60. package/dist/components/countdown/object.js +1 -0
  61. package/dist/components/countdown.css +2 -0
  62. package/dist/components/countdown.css.d.ts +1 -0
  63. package/dist/components/diff/index.js +7 -0
  64. package/dist/components/diff/object.js +1 -0
  65. package/dist/components/diff.css +2 -0
  66. package/dist/components/diff.css.d.ts +1 -0
  67. package/dist/components/divider/index.js +7 -0
  68. package/dist/components/divider/object.js +1 -0
  69. package/dist/components/divider.css +2 -0
  70. package/dist/components/divider.css.d.ts +1 -0
  71. package/dist/components/drawer/index.js +7 -0
  72. package/dist/components/drawer/object.js +1 -0
  73. package/dist/components/drawer.css +2 -0
  74. package/dist/components/drawer.css.d.ts +1 -0
  75. package/dist/components/footer/index.js +7 -0
  76. package/dist/components/footer/object.js +1 -0
  77. package/dist/components/footer.css +2 -0
  78. package/dist/components/footer.css.d.ts +1 -0
  79. package/dist/components/header/index.js +7 -0
  80. package/dist/components/header/object.js +1 -0
  81. package/dist/components/header.css +2 -0
  82. package/dist/components/header.css.d.ts +1 -0
  83. package/dist/components/hero/index.js +7 -0
  84. package/dist/components/hero/object.js +1 -0
  85. package/dist/components/hero.css +2 -0
  86. package/dist/components/hero.css.d.ts +1 -0
  87. package/dist/components/indicator/index.js +7 -0
  88. package/dist/components/indicator/object.js +1 -0
  89. package/dist/components/indicator.css +2 -0
  90. package/dist/components/indicator.css.d.ts +1 -0
  91. package/dist/components/input/index.js +7 -0
  92. package/dist/components/input/object.js +1 -0
  93. package/dist/components/input.css +2 -0
  94. package/dist/components/input.css.d.ts +1 -0
  95. package/dist/components/join/index.js +7 -0
  96. package/dist/components/join/object.js +1 -0
  97. package/dist/components/join.css +2 -0
  98. package/dist/components/join.css.d.ts +1 -0
  99. package/dist/components/kbd/index.js +7 -0
  100. package/dist/components/kbd/object.js +1 -0
  101. package/dist/components/kbd.css +2 -0
  102. package/dist/components/kbd.css.d.ts +1 -0
  103. package/dist/components/link/index.js +7 -0
  104. package/dist/components/link/object.js +1 -0
  105. package/dist/components/link.css +2 -0
  106. package/dist/components/link.css.d.ts +1 -0
  107. package/dist/components/loading/index.js +7 -0
  108. package/dist/components/loading/object.js +1 -0
  109. package/dist/components/loading.css +2 -0
  110. package/dist/components/loading.css.d.ts +1 -0
  111. package/dist/components/marquee/index.js +7 -0
  112. package/dist/components/marquee/object.js +1 -0
  113. package/dist/components/marquee.css +2 -0
  114. package/dist/components/marquee.css.d.ts +1 -0
  115. package/dist/components/mask/index.js +7 -0
  116. package/dist/components/mask/object.js +1 -0
  117. package/dist/components/mask.css +2 -0
  118. package/dist/components/mask.css.d.ts +1 -0
  119. package/dist/components/menu/index.js +7 -0
  120. package/dist/components/menu/object.js +1 -0
  121. package/dist/components/menu.css +2 -0
  122. package/dist/components/menu.css.d.ts +1 -0
  123. package/dist/components/modal/index.js +7 -0
  124. package/dist/components/modal/object.js +1 -0
  125. package/dist/components/modal.css +2 -0
  126. package/dist/components/modal.css.d.ts +1 -0
  127. package/dist/components/navbar/index.js +7 -0
  128. package/dist/components/navbar/object.js +1 -0
  129. package/dist/components/navbar.css +2 -0
  130. package/dist/components/navbar.css.d.ts +1 -0
  131. package/dist/components/popover/index.js +7 -0
  132. package/dist/components/popover/object.js +1 -0
  133. package/dist/components/popover.css +2 -0
  134. package/dist/components/popover.css.d.ts +1 -0
  135. package/dist/components/progress/index.js +7 -0
  136. package/dist/components/progress/object.js +1 -0
  137. package/dist/components/progress.css +2 -0
  138. package/dist/components/progress.css.d.ts +1 -0
  139. package/dist/components/radial-progress/index.js +7 -0
  140. package/dist/components/radial-progress/object.js +1 -0
  141. package/dist/components/radial-progress.css +2 -0
  142. package/dist/components/radial-progress.css.d.ts +1 -0
  143. package/dist/components/radio/index.js +7 -0
  144. package/dist/components/radio/object.js +1 -0
  145. package/dist/components/radio.css +2 -0
  146. package/dist/components/radio.css.d.ts +1 -0
  147. package/dist/components/range/index.js +7 -0
  148. package/dist/components/range/object.js +1 -0
  149. package/dist/components/range.css +2 -0
  150. package/dist/components/range.css.d.ts +1 -0
  151. package/dist/components/rating/index.js +7 -0
  152. package/dist/components/rating/object.js +1 -0
  153. package/dist/components/rating.css +2 -0
  154. package/dist/components/rating.css.d.ts +1 -0
  155. package/dist/components/select/index.js +7 -0
  156. package/dist/components/select/object.js +1 -0
  157. package/dist/components/select.css +2 -0
  158. package/dist/components/select.css.d.ts +1 -0
  159. package/dist/components/sidebar/index.js +7 -0
  160. package/dist/components/sidebar/object.js +1 -0
  161. package/dist/components/sidebar.css +2 -0
  162. package/dist/components/sidebar.css.d.ts +1 -0
  163. package/dist/components/skeleton/index.js +7 -0
  164. package/dist/components/skeleton/object.js +1 -0
  165. package/dist/components/skeleton.css +2 -0
  166. package/dist/components/skeleton.css.d.ts +1 -0
  167. package/dist/components/stat/index.js +7 -0
  168. package/dist/components/stat/object.js +1 -0
  169. package/dist/components/stat.css +2 -0
  170. package/dist/components/stat.css.d.ts +1 -0
  171. package/dist/components/status/index.js +7 -0
  172. package/dist/components/status/object.js +1 -0
  173. package/dist/components/status.css +2 -0
  174. package/dist/components/status.css.d.ts +1 -0
  175. package/dist/components/steps/index.js +7 -0
  176. package/dist/components/steps/object.js +1 -0
  177. package/dist/components/steps.css +2 -0
  178. package/dist/components/steps.css.d.ts +1 -0
  179. package/dist/components/surface/index.js +7 -0
  180. package/dist/components/surface/object.js +1 -0
  181. package/dist/components/surface.css +2 -0
  182. package/dist/components/surface.css.d.ts +1 -0
  183. package/dist/components/swap/index.js +7 -0
  184. package/dist/components/swap/object.js +1 -0
  185. package/dist/components/swap.css +2 -0
  186. package/dist/components/swap.css.d.ts +1 -0
  187. package/dist/components/table/index.js +7 -0
  188. package/dist/components/table/object.js +1 -0
  189. package/dist/components/table.css +2 -0
  190. package/dist/components/table.css.d.ts +1 -0
  191. package/dist/components/tabs/index.js +7 -0
  192. package/dist/components/tabs/object.js +1 -0
  193. package/dist/components/tabs.css +2 -0
  194. package/dist/components/tabs.css.d.ts +1 -0
  195. package/dist/components/tag/index.js +7 -0
  196. package/dist/components/tag/object.js +1 -0
  197. package/dist/components/tag.css +2 -0
  198. package/dist/components/tag.css.d.ts +1 -0
  199. package/dist/components/textarea/index.js +7 -0
  200. package/dist/components/textarea/object.js +1 -0
  201. package/dist/components/textarea.css +2 -0
  202. package/dist/components/textarea.css.d.ts +1 -0
  203. package/dist/components/timeline/index.js +7 -0
  204. package/dist/components/timeline/object.js +1 -0
  205. package/dist/components/timeline.css +2 -0
  206. package/dist/components/timeline.css.d.ts +1 -0
  207. package/dist/components/toast/index.js +7 -0
  208. package/dist/components/toast/object.js +1 -0
  209. package/dist/components/toast.css +2 -0
  210. package/dist/components/toast.css.d.ts +1 -0
  211. package/dist/components/toggle/index.js +7 -0
  212. package/dist/components/toggle/object.js +1 -0
  213. package/dist/components/toggle.css +2 -0
  214. package/dist/components/toggle.css.d.ts +1 -0
  215. package/dist/components/tooltip/index.js +7 -0
  216. package/dist/components/tooltip/object.js +1 -0
  217. package/dist/components/tooltip.css +2 -0
  218. package/dist/components/tooltip.css.d.ts +1 -0
  219. package/dist/frutjam.components.css +62 -0
  220. package/dist/frutjam.components.css.d.ts +1 -0
  221. package/dist/frutjam.min.css +65 -3
  222. package/dist/frutjam.min.css.d.ts +1 -0
  223. package/dist/functions/addPrefix.js +14 -0
  224. package/dist/plugin.js +207 -0
  225. package/dist/themes/darkberry/index.js +5 -0
  226. package/dist/themes/darkberry/object.js +1 -0
  227. package/dist/themes/darkberry.css +2 -0
  228. package/dist/themes/darkberry.css.d.ts +1 -0
  229. package/dist/themes/snowberry/index.js +5 -0
  230. package/dist/themes/snowberry/object.js +1 -0
  231. package/dist/themes/snowberry.css +2 -0
  232. package/dist/themes/snowberry.css.d.ts +1 -0
  233. package/dist/unocss/map.js +5 -0
  234. package/dist/utilities/headings/index.js +7 -0
  235. package/dist/utilities/headings/object.js +1 -0
  236. package/dist/utilities/headings.css +2 -0
  237. package/dist/utilities/headings.css.d.ts +1 -0
  238. package/dist/utilities/para/index.js +7 -0
  239. package/dist/utilities/para/object.js +1 -0
  240. package/dist/utilities/para.css +2 -0
  241. package/dist/utilities/para.css.d.ts +1 -0
  242. package/dist/utilities/typography/index.js +7 -0
  243. package/dist/utilities/typography/object.js +1 -0
  244. package/dist/utilities/typography.css +2 -0
  245. package/dist/utilities/typography.css.d.ts +1 -0
  246. package/dist/utilities/wrapper/index.js +7 -0
  247. package/dist/utilities/wrapper/object.js +1 -0
  248. package/dist/utilities/wrapper.css +2 -0
  249. package/dist/utilities/wrapper.css.d.ts +1 -0
  250. package/index.js +332 -0
  251. package/package.json +90 -43
  252. package/packages/js/carousel.js +20 -0
  253. package/packages/js/collapsible.js +14 -0
  254. package/packages/js/combobox.js +101 -0
  255. package/packages/js/drawer.js +1 -0
  256. package/packages/js/index.js +8 -0
  257. package/packages/js/modal.js +8 -0
  258. package/packages/js/tabs.js +89 -0
  259. package/packages/js/toast.js +27 -0
  260. package/packages/js/tooltip.js +8 -0
  261. package/packages/react/index.js +8 -0
  262. package/packages/react/useCarousel.js +23 -0
  263. package/packages/react/useCollapsible.js +20 -0
  264. package/packages/react/useCombobox.js +81 -0
  265. package/packages/react/useDrawer.js +1 -0
  266. package/packages/react/useModal.js +12 -0
  267. package/packages/react/useTabs.js +53 -0
  268. package/packages/react/useToast.js +27 -0
  269. package/packages/react/useTooltip.js +12 -0
  270. package/packages/unocss/index.js +77 -0
  271. package/dist/frutjam.dev.css +0 -2
  272. package/dist/frutjam.min.js +0 -2
  273. package/dist/frutjam.min.js.LICENSE.txt +0 -1
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2025 nezanuha
3
+ Copyright (c) 2025-2026 Nezanuha
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
@@ -0,0 +1,382 @@
1
+ [![npm installs][npm_installs]](https://www.npmjs.com/package/frutjam)
2
+ [![Jsdelivr hits][jsdelivr]](https://cdn.jsdelivr.net/npm/frutjam)
3
+ [![Latest Release](https://img.shields.io/npm/v/frutjam.svg)](https://github.com/nezanuha/frutjam/releases)
4
+ [![License](https://img.shields.io/npm/l/frutjam.svg)](https://github.com/nezanuha/frutjam/blob/master/LICENSE)
5
+ [![Secured](https://img.shields.io/badge/Security-Passed-green)](https://snyk.io/test/github/nezanuha/frutjam)
6
+
7
+ ---
8
+
9
+ # Frutjam: CSS-Only Tailwind CSS UI Component Library
10
+
11
+ **Frutjam** is a free, open-source Tailwind CSS v4 component library, and it works with UnoCSS or no build step at all. 65+ production-ready UI components with **zero JavaScript**, guaranteed **WCAG AA accessibility**, and a free **MCP server for AI editors** (Cherry). Works with any framework: React, Vue, HTMX, Django, Laravel, plain HTML.
12
+
13
+ ๐ŸŒ **[frutjam.com](https://frutjam.com)** ยท ๐Ÿ“ฆ **[npm](https://www.npmjs.com/package/frutjam)** ยท ๐Ÿ’ **[Cherry MCP](https://frutjam.com/products/cherry)**
14
+
15
+ ![Frutjam components: buttons, badges, a card, form controls and alerts, rendered in the light theme](https://cdn.frutjam.com/media/github/components.webp)
16
+
17
+ <details>
18
+ <summary><b>Themed with CSS variables, no rebuild</b></summary>
19
+
20
+ <br>
21
+
22
+ ![The same button, badges and progress bar shown in the light, dark, blueberry and peachberry themes](https://cdn.frutjam.com/media/github/themes.webp)
23
+
24
+ Two palettes ship with the package, `light` and `dark` (also available as `snowberry` and `darkberry`). Switch with `data-theme="dark"` on any ancestor element. Your own themes are a handful of OKLCH tokens: blueberry and peachberry above are two of the four ready to copy from [the themes page](https://frutjam.com/docs/themes).
25
+
26
+ </details>
27
+
28
+ ---
29
+
30
+ ## What is Frutjam?
31
+
32
+ Frutjam is a **CSS-only Tailwind CSS component library** built for Tailwind CSS v4. You install it as a Tailwind plugin, one line in your CSS, and instantly get 65+ accessible, copy-paste UI components: buttons, modals, drawers, tabs, toasts, carousels, tables, forms, and more.
33
+
34
+ Every component works with pure HTML and CSS. No JavaScript framework required. No build pipeline beyond Tailwind itself. Drop it into any stack and start building.
35
+
36
+ ---
37
+
38
+ ## Quick Install
39
+
40
+ ```bash
41
+ npm install -D frutjam
42
+ ```
43
+
44
+ ```css
45
+ @import "tailwindcss";
46
+ @plugin "frutjam";
47
+ ```
48
+
49
+ **That's it.** All 65+ components are available immediately. No imports, no config, no extra stylesheets.
50
+
51
+ ### Not using Tailwind?
52
+
53
+ Frutjam works without it. Import the stylesheet and every component class is available, 30 KB gzipped:
54
+
55
+ ```js
56
+ import 'frutjam/css';
57
+ ```
58
+
59
+ UnoCSS users get a preset instead, so only the components you use are emitted:
60
+
61
+ ```js
62
+ import { presetFrutjam } from 'frutjam/unocss';
63
+
64
+ export default defineConfig({ presets: [presetWind4(), presetFrutjam()] });
65
+ ```
66
+
67
+ ---
68
+
69
+ ## Why Frutjam?
70
+
71
+ | | Frutjam | DaisyUI | Shadcn UI | Flowbite |
72
+ |---|---|---|---|---|
73
+ | Zero JavaScript | โœ… | โœ… | โŒ React required | โš ๏ธ Some JS |
74
+ | Tailwind v4 native | โœ… | โš ๏ธ v3 + v4 | โš ๏ธ | โŒ |
75
+ | WCAG AA guaranteed | โœ… Every component | โš ๏ธ | โš ๏ธ | โš ๏ธ |
76
+ | OKLCH color system | โœ… | โŒ | โŒ | โŒ |
77
+ | MCP server for AI editors | โœ… Cherry (free tier) | โœ… Blueprint (paid only) | โŒ | โŒ |
78
+ | Framework-agnostic | โœ… | โœ… | โŒ React only | โš ๏ธ |
79
+ | Copy-paste friendly | โœ… | โœ… | โœ… | โœ… |
80
+ | MIT license | โœ… | โœ… | โœ… | โœ… |
81
+
82
+ **The short version:** Frutjam is the only Tailwind v4-native component library with guaranteed WCAG AA accessibility, an OKLCH color system, and a free MCP server for AI-assisted development.
83
+
84
+ ---
85
+
86
+ ## Key Features
87
+
88
+ - **Zero JavaScript**: every component works with pure CSS and semantic HTML. Native `<dialog>` for modals, `<details>` for accordions, CSS `:has()` for interactive states. No `addEventListener`, no hydration, no runtime.
89
+ - **65+ components**: buttons, modals, tabs, drawers, tooltips, carousels, cards, alerts, toasts, tables, forms, and more. All production-ready.
90
+ - **WCAG AA by default**: every color pair (`--color-primary` / `--color-on-primary`) is hand-tuned in OKLCH to meet WCAG AA contrast requirements. Semantic HTML throughout.
91
+ - **Tailwind v4 native**: built as a Tailwind v4 plugin using `@plugin`. No legacy `tailwind.config.js`. OKLCH design tokens via CSS custom properties.
92
+ - **Framework-agnostic**: works with React, Next.js, Vue, Nuxt, Svelte, HTMX, Django, Laravel Blade, Astro, Rails, plain HTML, anything that outputs HTML.
93
+ - **Themeable**: swap themes with `data-theme="dark"`. Build custom themes in CSS with OKLCH tokens. Supports light, dark, and system preference automatically.
94
+ - **Treeshaken**: only the components you use are included. Tailwind's engine removes unused styles at build time.
95
+ - **CDN-ready**: no build step needed. Import directly from jsDelivr.
96
+
97
+ ---
98
+
99
+ ## ๐Ÿ’ Cherry MCP: AI Editor Integration
100
+
101
+ Cherry is Frutjam's **free MCP server** that gives AI coding assistants accurate, real-time access to Frutjam component docs.
102
+
103
+ Without Cherry, AI assistants (Claude Code, Cursor, GitHub Copilot) hallucinate Tailwind CSS class names, inventing classes that don't exist. Cherry solves this by feeding your AI editor the exact Frutjam specs at the moment it needs them.
104
+
105
+ **Works with:** Claude Code ยท Cursor ยท VS Code ยท Windsurf ยท Zed ยท Cline ยท any MCP-compatible editor
106
+
107
+ ```json
108
+ {
109
+ "mcpServers": {
110
+ "frutjam": {
111
+ "command": "npx",
112
+ "args": ["-y", "frutjam-cherry"]
113
+ }
114
+ }
115
+ }
116
+ ```
117
+
118
+ [**Get Cherry MCP โ†’**](https://frutjam.com/products/cherry)
119
+
120
+ ---
121
+
122
+ ## Components
123
+
124
+ 65+ free, production-ready CSS-only Tailwind CSS components:
125
+
126
+ ### Inputs & Forms
127
+ - [Button](https://frutjam.com/components/button)
128
+ - [Checkbox](https://frutjam.com/components/checkbox)
129
+ - [Radio](https://frutjam.com/components/radio)
130
+ - [Toggle](https://frutjam.com/components/toggle)
131
+ - [Input](https://frutjam.com/components/input)
132
+ - [Textarea](https://frutjam.com/components/textarea)
133
+ - [Select](https://frutjam.com/components/select)
134
+ - [Range](https://frutjam.com/components/range)
135
+ - [Rating](https://frutjam.com/components/rating)
136
+ - [Combobox](https://frutjam.com/components/combobox)
137
+
138
+ ### Layout & Navigation
139
+ - [Navbar](https://frutjam.com/components/navbar)
140
+ - [Sidebar](https://frutjam.com/components/sidebar)
141
+ - [Drawer](https://frutjam.com/components/drawer)
142
+ - [Menu](https://frutjam.com/components/menu)
143
+ - [Breadcrumb](https://frutjam.com/components/breadcrumb)
144
+ - [Tabs](https://frutjam.com/components/tabs)
145
+ - [Steps](https://frutjam.com/components/steps)
146
+ - [Footer](https://frutjam.com/components/footer)
147
+ - [Header](https://frutjam.com/components/header)
148
+ - [Join](https://frutjam.com/components/join)
149
+ - [Pagination](https://frutjam.com/components/pagination)
150
+
151
+ ### Feedback & Overlay
152
+ - [Modal](https://frutjam.com/components/modal)
153
+ - [Toast](https://frutjam.com/components/toast)
154
+ - [Alert](https://frutjam.com/components/alert)
155
+ - [Tooltip](https://frutjam.com/components/tooltip)
156
+ - [Popover](https://frutjam.com/components/popover)
157
+ - [Loading](https://frutjam.com/components/loading)
158
+ - [Skeleton](https://frutjam.com/components/skeleton)
159
+ - [Progress](https://frutjam.com/components/progress)
160
+ - [Radial Progress](https://frutjam.com/components/radial-progress)
161
+
162
+ ### Data Display
163
+ - [Card](https://frutjam.com/components/card)
164
+ - [Table](https://frutjam.com/components/table)
165
+ - [Stat](https://frutjam.com/components/stat)
166
+ - [Badge](https://frutjam.com/components/badge)
167
+ - [Tag](https://frutjam.com/components/tag)
168
+ - [Avatar](https://frutjam.com/components/avatar)
169
+ - [Indicator](https://frutjam.com/components/indicator)
170
+ - [Status](https://frutjam.com/components/status)
171
+ - [Diff](https://frutjam.com/components/diff)
172
+ - [Timeline](https://frutjam.com/components/timeline)
173
+ - [Chat](https://frutjam.com/components/chat)
174
+
175
+ ### Typography & Decoration
176
+ - [Hero](https://frutjam.com/components/hero)
177
+ - [Divider](https://frutjam.com/components/divider)
178
+ - [Kbd](https://frutjam.com/components/kbd)
179
+ - [Link](https://frutjam.com/components/link)
180
+ - [Mask](https://frutjam.com/components/mask)
181
+ - [Swap](https://frutjam.com/components/swap)
182
+ - [Countdown](https://frutjam.com/components/countdown)
183
+ - [Marquee](https://frutjam.com/components/marquee)
184
+ - [Carousel](https://frutjam.com/components/carousel)
185
+ - [Accordion](https://frutjam.com/components/accordion)
186
+ - [Collapsible](https://frutjam.com/components/collapsible)
187
+ - [Surface](https://frutjam.com/components/surface)
188
+
189
+ [**Browse all components with live previews โ†’**](https://frutjam.com/components)
190
+
191
+ ---
192
+
193
+ ## Usage Examples
194
+
195
+ ```html
196
+ <!-- Primary button -->
197
+ <button class="btn btn-primary">Get Started</button>
198
+
199
+ <!-- Outline button with badge -->
200
+ <button class="btn btn-outline">
201
+ Notifications
202
+ <span class="badge badge-primary">3</span>
203
+ </button>
204
+
205
+ <!-- CSS-only modal, no JavaScript -->
206
+ <button popovertarget="my-modal" class="btn btn-primary">Open Modal</button>
207
+ <dialog id="my-modal" popover class="modal">
208
+ <div class="modal-content">
209
+ <h3 class="heading-lg">Pure CSS modal</h3>
210
+ <p class="para">Zero JavaScript. Native browser popover API.</p>
211
+ <button popovertarget="my-modal" class="btn mt-4">Close</button>
212
+ </div>
213
+ </dialog>
214
+
215
+ <!-- Alert -->
216
+ <div class="alert alert-success">
217
+ <p>Your changes have been saved.</p>
218
+ </div>
219
+
220
+ <!-- Card -->
221
+ <div class="card">
222
+ <div class="card-content">
223
+ <h2 class="heading-lg">Card title</h2>
224
+ <p class="para">Card content goes here.</p>
225
+ </div>
226
+ </div>
227
+
228
+ <!-- Input -->
229
+ <div class="flex flex-col gap-2">
230
+ <label class="text-sm font-medium">Email</label>
231
+ <input type="email" class="input" placeholder="you@example.com">
232
+ </div>
233
+
234
+ <!-- Badge variants -->
235
+ <span class="badge badge-primary">Primary</span>
236
+ <span class="badge badge-success badge-soft">Success</span>
237
+ <span class="badge badge-error badge-outline">Error</span>
238
+ ```
239
+
240
+ ---
241
+
242
+ ## Accessibility
243
+
244
+ Frutjam is designed for WCAG AA compliance from the ground up:
245
+
246
+ - **Color contrast**: every color token pair is hand-tuned in OKLCH to exceed WCAG AA 4.5:1 contrast ratio for text
247
+ - **Semantic HTML**: native `<dialog>` for modals, `<details>` for accordions, `<nav>` for navigation, correct heading hierarchy
248
+ - **Keyboard navigation**: all interactive components are fully keyboard accessible
249
+ - **Screen reader support**: ARIA attributes included where native semantics are insufficient
250
+ - **Focus management**: visible focus rings on all interactive elements, respects `prefers-reduced-motion`
251
+
252
+ ---
253
+
254
+ ## Themes
255
+
256
+ ```html
257
+ <html data-theme="darkberry">
258
+ ```
259
+
260
+ ```css
261
+ /* Define your own theme */
262
+ @layer theme {
263
+ [data-theme="ocean"] {
264
+ --color-primary: oklch(60% 0.2 220);
265
+ --color-on-primary: oklch(98% 0.01 220);
266
+ --color-base: oklch(15% 0.02 220);
267
+ --color-on-base: oklch(92% 0.01 220);
268
+ }
269
+ }
270
+ ```
271
+
272
+ [**Explore themes โ†’**](https://frutjam.com/docs/themes)
273
+
274
+ ---
275
+
276
+ ## Plugin Options
277
+
278
+ | Option | Default | Description |
279
+ |--------|---------|-------------|
280
+ | `prefix` | `""` | Prefix all Frutjam class names (e.g. `fj` โ†’ `fj-btn`) |
281
+ | `reset` | `true` | Include browser reset and element defaults |
282
+ | `root` | `":root"` | Remap CSS variable declarations to a custom selector |
283
+ | `logs` | `true` | Show build-time console output |
284
+ | `include` | `[]` | Include only specific components |
285
+ | `exclude` | `[]` | Exclude specific components |
286
+
287
+ ---
288
+
289
+ ## CDN (No Build Step)
290
+
291
+ ```html
292
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam/dist/frutjam.min.css" />
293
+ ```
294
+
295
+ ---
296
+
297
+ ## Framework Support
298
+
299
+ | Framework | Status |
300
+ |-----------|--------|
301
+ | HTML / Static sites | โœ… |
302
+ | React / Next.js | โœ… |
303
+ | Vue / Nuxt | โœ… |
304
+ | Svelte / SvelteKit | โœ… |
305
+ | HTMX | โœ… |
306
+ | Django | โœ… |
307
+ | Laravel / Blade | โœ… |
308
+ | Astro | โœ… |
309
+ | Ruby on Rails | โœ… |
310
+ | Any HTML output | โœ… |
311
+
312
+ | Build setup | How |
313
+ |-----------|--------|
314
+ | Tailwind CSS v4 | `@plugin "frutjam"`, tree-shaken |
315
+ | UnoCSS | `presetFrutjam()`, tree-shaken |
316
+ | Vite, Astro, Rails, plain CSS | `import 'frutjam/css'` |
317
+ | No build step | `<link>` the CDN file |
318
+
319
+ ---
320
+
321
+ ## Starter Projects
322
+
323
+ Working projects with Frutjam already wired up: clone and start building.
324
+
325
+ | Starter | Stack |
326
+ |---------|-------|
327
+ | [django-frutjam-starter](https://github.com/nezanuha/django-frutjam-starter) | Django 6, auth, dashboard, markdown CRUD |
328
+
329
+ ---
330
+
331
+ ## Documentation
332
+
333
+ - [Getting Started](https://frutjam.com/docs/overview)
334
+ - [Installation Guide](https://frutjam.com/docs/installation)
335
+ - [Configuration](https://frutjam.com/docs/configuration)
336
+ - [Theming](https://frutjam.com/docs/themes)
337
+ - [Colors](https://frutjam.com/docs/colors)
338
+ - [All Components](https://frutjam.com/components)
339
+ - [UI Blocks](https://frutjam.com/blocks)
340
+ - [Cherry MCP](https://frutjam.com/products/cherry)
341
+ - [Django starter project](https://github.com/nezanuha/django-frutjam-starter)
342
+
343
+ ---
344
+
345
+ ## Community
346
+
347
+ - [Discord](https://discord.gg/FvjytjQSSZ)
348
+ - [X / Twitter](https://x.com/FrutjamUI)
349
+ - [Write for Us](https://github.com/nezanuha/frutjam/issues/new?template=blog-pitch.yml)
350
+
351
+ ---
352
+
353
+ ## Contributing
354
+
355
+ See [CONTRIBUTING.md](.github/CONTRIBUTING.md) for the component, documentation and
356
+ translation workflows. The docs are published in 13 languages, and corrections
357
+ to the machine-translated pages are especially welcome.
358
+
359
+ 1. Fork the repository
360
+ 2. Create a feature branch: `git checkout -b feature/my-component`
361
+ 3. Commit your changes: `git commit -m 'Add my-component'`
362
+ 4. Push: `git push origin feature/my-component`
363
+ 5. Open a Pull Request
364
+
365
+ ---
366
+
367
+ ## License
368
+
369
+ MIT, free for personal and commercial use. See [LICENSE](LICENSE).
370
+
371
+ ---
372
+
373
+ ## โญ Star this repo
374
+
375
+ If Frutjam saves you time, a star helps others find it.
376
+
377
+ [![GitHub stars](https://img.shields.io/github/stars/nezanuha/frutjam.svg?style=social&label=Star&maxAge=2592000)](https://github.com/nezanuha/frutjam)
378
+
379
+ ---
380
+
381
+ [jsdelivr]: https://badgen.net/jsdelivr/hits/npm/frutjam
382
+ [npm_installs]: https://badgen.net/npm/dt/frutjam
package/README.md CHANGED
@@ -1,76 +1,124 @@
1
- [![Total Downloads](https://img.shields.io/npm/dt/frutjam.svg)](https://www.npmjs.com/package/frutjam)
2
- [![Latest Release](https://img.shields.io/npm/v/frutjam.svg)](https://github.com/nezanuha/frutjam/releases)
3
- [![License](https://img.shields.io/npm/l/frutjam.svg)](https://github.com/nezanuha/frutjam/blob/master/LICENSE)
4
- [![Secured](https://img.shields.io/badge/Security-Passed-green)](https://snyk.io/test/github/nezanuha/frutjam)
1
+ # Frutjam
2
+
3
+ CSS-only Tailwind CSS v4 component library, also usable with UnoCSS or no build step at all. 65+ accessible, copy-paste UI components โ€” zero JavaScript, WCAG AA guaranteed, framework-agnostic.
4
+
5
+ **[frutjam.com](https://frutjam.com)** ยท [Components](https://frutjam.com/components) ยท [Docs](https://frutjam.com/docs) ยท [Cherry MCP](https://frutjam.com/products/cherry)
5
6
 
6
7
  ---
7
8
 
8
- ## โšก Frutjam โ€” Tailwind CSS UI Library for Fast Development
9
+ ## Install
9
10
 
10
- **Frutjam** is a lightweight UI library built on top of **Tailwind CSS**, designed to help developers build accessible, SEO-friendly, and W3C-compliant interfacesโ€”fast.
11
+ ```bash
12
+ npm install -D frutjam
13
+ ```
11
14
 
12
- With a wide selection of prebuilt components and themes, Frutjam makes it easy to hit the ground running or fully customize your design system.
15
+ ```css
16
+ @import "tailwindcss";
17
+ @plugin "frutjam";
18
+ ```
13
19
 
14
- [![Ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/nezanuha)
20
+ That's it. All 65+ components available immediately.
15
21
 
16
- ---
22
+ ### Without Tailwind
17
23
 
18
- ๐Ÿš€ **Weโ€™re in Beta โ€” Your Star Helps Us Grow!**
19
- If you find this project useful, please consider giving it a โญ. We're actively improving frutjam library during this beta phase, and your support motivates us to move faster, fix issues, and deliver new features. Thanks for being part of the journey!
24
+ ```js
25
+ import 'frutjam/css'; // every component, 30 KB gzipped
26
+ ```
20
27
 
21
- ---
28
+ ### With UnoCSS
22
29
 
23
- ### โœจ Features
30
+ ```js
31
+ import { presetFrutjam } from 'frutjam/unocss';
24
32
 
25
- * ๐Ÿงฑ **Prebuilt UI Components** โ€” Plug-and-play components to save time
26
- * ๐ŸŽจ **Customizable Themes** โ€” Use built-in themes or create your own
27
- * โ™ฟ **Accessibility-First** โ€” Follows accessibility best practices
28
- * ๐Ÿ” **SEO-Friendly** โ€” Semantic markup optimized for search engines
29
- * โœ… **W3C Standards** โ€” Clean, valid HTML structure
30
- * โš™๏ธ **Built for Tailwind CSS** โ€” Seamless integration with your Tailwind setup
33
+ export default defineConfig({ presets: [presetWind4(), presetFrutjam()] });
34
+ ```
31
35
 
32
36
  ---
33
37
 
34
- ### ๐Ÿš€ Installation
38
+ ## CDN
35
39
 
36
- ```bash
37
- npm install frutjam
40
+ ```html
41
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam/dist/frutjam.min.css" />
38
42
  ```
39
43
 
40
44
  ---
41
45
 
42
- ### ๐Ÿ“ฆ Usage
43
-
44
- Import Tailwind CSS and Frutjam into your main stylesheet:
45
-
46
- ```css
47
- @import "tailwindcss";
48
- @import "frutjam";
46
+ ## Usage
47
+
48
+ ```html
49
+ <!-- Button -->
50
+ <button class="btn btn-primary">Get Started</button>
51
+ <button class="btn btn-outline">Cancel</button>
52
+
53
+ <!-- Badge -->
54
+ <span class="badge badge-success">Active</span>
55
+ <span class="badge badge-error badge-soft">Error</span>
56
+
57
+ <!-- Alert -->
58
+ <div class="alert alert-success">Saved successfully.</div>
59
+
60
+ <!-- Card -->
61
+ <div class="card">
62
+ <div class="card-content">
63
+ <h2 class="heading-lg">Title</h2>
64
+ <p class="para">Content goes here.</p>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Input -->
69
+ <input type="text" class="input" placeholder="Enter text...">
70
+
71
+ <!-- CSS-only modal โ€” no JavaScript -->
72
+ <button popovertarget="modal" class="btn btn-primary">Open</button>
73
+ <dialog id="modal" popover class="modal">
74
+ <div class="modal-content">
75
+ <h3 class="heading-lg">Modal title</h3>
76
+ <button popovertarget="modal" class="btn mt-4">Close</button>
77
+ </div>
78
+ </dialog>
49
79
  ```
50
80
 
51
- Thatโ€™s it โ€” you're ready to build with Frutjam components!
52
-
53
81
  ---
54
82
 
55
- ### ๐Ÿ“š Documentation
83
+ ## Plugin Options
56
84
 
57
- For examples, theming, and full usage guides, visit:
58
- ๐Ÿ‘‰ **[frutjam.com](https://frutjam.com)**
85
+ ```css
86
+ @plugin "frutjam" {
87
+ prefix: fj; /* fj-btn, fj-card, etc. */
88
+ reset: true; /* browser reset (default: true) */
89
+ }
90
+ ```
59
91
 
60
92
  ---
61
93
 
62
- ## ๐Ÿค Contributing
94
+ ## ๐Ÿ’ Cherry MCP โ€” Stop AI from hallucinating class names
63
95
 
64
- Contributions are welcome! If you find a bug, have a feature request, or want to help improve the library:
96
+ Cherry is a free MCP server that gives Claude Code, Cursor, and VS Code accurate real-time Frutjam docs โ€” no more invented class names.
65
97
 
66
- 1. Fork the repo
67
- 2. Create a new branch
68
- 3. Submit a pull request
98
+ ```json
99
+ {
100
+ "mcpServers": {
101
+ "frutjam": {
102
+ "command": "npx",
103
+ "args": ["-y", "frutjam-cherry"]
104
+ }
105
+ }
106
+ }
107
+ ```
69
108
 
70
- Please check the [contributing guidelines](.github/CONTRIBUTING.md) before starting.
109
+ [**Get Cherry โ†’**](https://frutjam.com/products/cherry)
71
110
 
72
111
  ---
73
112
 
74
- ## ๐Ÿ“„ License
113
+ ## Links
114
+
115
+ - [Full documentation](https://frutjam.com/docs)
116
+ - [All 65+ components](https://frutjam.com/components)
117
+ - [UI Blocks](https://frutjam.com/blocks)
118
+ - [Themes](https://frutjam.com/docs/themes)
119
+ - [GitHub](https://github.com/nezanuha/frutjam)
120
+ - [Discord](https://discord.gg/FvjytjQSSZ)
121
+
122
+ ## License
75
123
 
76
- This project is licensed under the [MIT License](LICENSE).
124
+ MIT
package/README.npm.md ADDED
@@ -0,0 +1,124 @@
1
+ # Frutjam
2
+
3
+ CSS-only Tailwind CSS v4 component library, also usable with UnoCSS or no build step at all. 65+ accessible, copy-paste UI components โ€” zero JavaScript, WCAG AA guaranteed, framework-agnostic.
4
+
5
+ **[frutjam.com](https://frutjam.com)** ยท [Components](https://frutjam.com/components) ยท [Docs](https://frutjam.com/docs) ยท [Cherry MCP](https://frutjam.com/products/cherry)
6
+
7
+ ---
8
+
9
+ ## Install
10
+
11
+ ```bash
12
+ npm install -D frutjam
13
+ ```
14
+
15
+ ```css
16
+ @import "tailwindcss";
17
+ @plugin "frutjam";
18
+ ```
19
+
20
+ That's it. All 65+ components available immediately.
21
+
22
+ ### Without Tailwind
23
+
24
+ ```js
25
+ import 'frutjam/css'; // every component, 30 KB gzipped
26
+ ```
27
+
28
+ ### With UnoCSS
29
+
30
+ ```js
31
+ import { presetFrutjam } from 'frutjam/unocss';
32
+
33
+ export default defineConfig({ presets: [presetWind4(), presetFrutjam()] });
34
+ ```
35
+
36
+ ---
37
+
38
+ ## CDN
39
+
40
+ ```html
41
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam/dist/frutjam.min.css" />
42
+ ```
43
+
44
+ ---
45
+
46
+ ## Usage
47
+
48
+ ```html
49
+ <!-- Button -->
50
+ <button class="btn btn-primary">Get Started</button>
51
+ <button class="btn btn-outline">Cancel</button>
52
+
53
+ <!-- Badge -->
54
+ <span class="badge badge-success">Active</span>
55
+ <span class="badge badge-error badge-soft">Error</span>
56
+
57
+ <!-- Alert -->
58
+ <div class="alert alert-success">Saved successfully.</div>
59
+
60
+ <!-- Card -->
61
+ <div class="card">
62
+ <div class="card-content">
63
+ <h2 class="heading-lg">Title</h2>
64
+ <p class="para">Content goes here.</p>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Input -->
69
+ <input type="text" class="input" placeholder="Enter text...">
70
+
71
+ <!-- CSS-only modal โ€” no JavaScript -->
72
+ <button popovertarget="modal" class="btn btn-primary">Open</button>
73
+ <dialog id="modal" popover class="modal">
74
+ <div class="modal-content">
75
+ <h3 class="heading-lg">Modal title</h3>
76
+ <button popovertarget="modal" class="btn mt-4">Close</button>
77
+ </div>
78
+ </dialog>
79
+ ```
80
+
81
+ ---
82
+
83
+ ## Plugin Options
84
+
85
+ ```css
86
+ @plugin "frutjam" {
87
+ prefix: fj; /* fj-btn, fj-card, etc. */
88
+ reset: true; /* browser reset (default: true) */
89
+ }
90
+ ```
91
+
92
+ ---
93
+
94
+ ## ๐Ÿ’ Cherry MCP โ€” Stop AI from hallucinating class names
95
+
96
+ Cherry is a free MCP server that gives Claude Code, Cursor, and VS Code accurate real-time Frutjam docs โ€” no more invented class names.
97
+
98
+ ```json
99
+ {
100
+ "mcpServers": {
101
+ "frutjam": {
102
+ "command": "npx",
103
+ "args": ["-y", "frutjam-cherry"]
104
+ }
105
+ }
106
+ }
107
+ ```
108
+
109
+ [**Get Cherry โ†’**](https://frutjam.com/products/cherry)
110
+
111
+ ---
112
+
113
+ ## Links
114
+
115
+ - [Full documentation](https://frutjam.com/docs)
116
+ - [All 65+ components](https://frutjam.com/components)
117
+ - [UI Blocks](https://frutjam.com/blocks)
118
+ - [Themes](https://frutjam.com/docs/themes)
119
+ - [GitHub](https://github.com/nezanuha/frutjam)
120
+ - [Discord](https://discord.gg/FvjytjQSSZ)
121
+
122
+ ## License
123
+
124
+ MIT
@@ -0,0 +1,5 @@
1
+ import reboot from './object.js';
2
+
3
+ export default ({ addBase }) => {
4
+ addBase({ ...reboot });
5
+ };