@a4ui/core 0.11.1 → 0.12.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 (126) hide show
  1. package/README.md +36 -26
  2. package/dist/full.css +3042 -0
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.js +1 -1
  5. package/package.json +8 -1
  6. package/src/charts/BarChart.tsx +55 -0
  7. package/src/charts/DonutChart.tsx +127 -0
  8. package/src/charts/Sparkline.tsx +101 -0
  9. package/src/charts/index.ts +5 -0
  10. package/src/commerce/CartLine.tsx +84 -0
  11. package/src/commerce/CartSummary.tsx +70 -0
  12. package/src/commerce/FilterGroup.tsx +70 -0
  13. package/src/commerce/PriceTag.tsx +62 -0
  14. package/src/commerce/ProductCard.tsx +121 -0
  15. package/src/commerce/ProductGrid.tsx +27 -0
  16. package/src/commerce/QuantityStepper.tsx +59 -0
  17. package/src/commerce/index.ts +10 -0
  18. package/src/elements.tsx +167 -0
  19. package/src/index.ts +166 -0
  20. package/src/layout/AppShell.tsx +102 -0
  21. package/src/layout/ChristmasBackground.tsx +177 -0
  22. package/src/layout/EffectsToggle.tsx +41 -0
  23. package/src/layout/NavGroup.tsx +45 -0
  24. package/src/layout/SnowScenery.tsx +76 -0
  25. package/src/layout/SpaceBackground.tsx +459 -0
  26. package/src/layout/ThemeToggle.tsx +40 -0
  27. package/src/layout/ThemedScenery.tsx +179 -0
  28. package/src/layout/sceneEffects.ts +49 -0
  29. package/src/lib/cn.ts +17 -0
  30. package/src/lib/effects.ts +71 -0
  31. package/src/lib/media.ts +27 -0
  32. package/src/lib/motion.ts +191 -0
  33. package/src/lib/theme.ts +113 -0
  34. package/src/lib/virtual.ts +33 -0
  35. package/src/styles/space.css +510 -0
  36. package/src/styles/tokens.css +213 -0
  37. package/src/themes/index.ts +102 -0
  38. package/src/themes/palettes.ts +368 -0
  39. package/src/ui/Accordion.tsx +65 -0
  40. package/src/ui/Affix.tsx +72 -0
  41. package/src/ui/Alert.tsx +55 -0
  42. package/src/ui/AlertDialog.tsx +58 -0
  43. package/src/ui/Anchor.tsx +100 -0
  44. package/src/ui/Avatar.tsx +34 -0
  45. package/src/ui/AvatarGroup.tsx +55 -0
  46. package/src/ui/BackToTop.tsx +51 -0
  47. package/src/ui/Badge.tsx +46 -0
  48. package/src/ui/BottomNavigation.tsx +65 -0
  49. package/src/ui/Breadcrumb.tsx +64 -0
  50. package/src/ui/Button.tsx +49 -0
  51. package/src/ui/Calendar.tsx +40 -0
  52. package/src/ui/CalendarHeatmap.tsx +180 -0
  53. package/src/ui/Card.tsx +84 -0
  54. package/src/ui/Carousel.tsx +121 -0
  55. package/src/ui/Cascader.tsx +158 -0
  56. package/src/ui/Checkbox.tsx +35 -0
  57. package/src/ui/Clock.tsx +221 -0
  58. package/src/ui/Collapse.tsx +48 -0
  59. package/src/ui/ColorPicker.tsx +89 -0
  60. package/src/ui/Combobox.tsx +67 -0
  61. package/src/ui/Command.tsx +158 -0
  62. package/src/ui/Comment.tsx +91 -0
  63. package/src/ui/ContextMenu.tsx +58 -0
  64. package/src/ui/Countdown.tsx +123 -0
  65. package/src/ui/DataGrid.tsx +177 -0
  66. package/src/ui/DateField.tsx +177 -0
  67. package/src/ui/DateRangePicker.tsx +204 -0
  68. package/src/ui/DateTimeField.tsx +68 -0
  69. package/src/ui/Descriptions.tsx +56 -0
  70. package/src/ui/Drawer.tsx +72 -0
  71. package/src/ui/Dropdown.tsx +71 -0
  72. package/src/ui/Dropzone.tsx +88 -0
  73. package/src/ui/Empty.tsx +53 -0
  74. package/src/ui/FileUpload.tsx +198 -0
  75. package/src/ui/FloatingActionButton.tsx +48 -0
  76. package/src/ui/Form.tsx +108 -0
  77. package/src/ui/Highlight.tsx +53 -0
  78. package/src/ui/HoverCard.tsx +42 -0
  79. package/src/ui/Image.tsx +66 -0
  80. package/src/ui/Input.tsx +38 -0
  81. package/src/ui/Kbd.tsx +25 -0
  82. package/src/ui/List.tsx +71 -0
  83. package/src/ui/Marquee.tsx +48 -0
  84. package/src/ui/Mentions.tsx +170 -0
  85. package/src/ui/Meter.tsx +57 -0
  86. package/src/ui/Modal.tsx +106 -0
  87. package/src/ui/MultiSelect.tsx +236 -0
  88. package/src/ui/NotificationCenter.tsx +103 -0
  89. package/src/ui/NumberInput.tsx +48 -0
  90. package/src/ui/PageHeader.tsx +60 -0
  91. package/src/ui/Pagination.tsx +62 -0
  92. package/src/ui/Popover.tsx +42 -0
  93. package/src/ui/Portal.tsx +34 -0
  94. package/src/ui/Progress.tsx +55 -0
  95. package/src/ui/RadioGroup.tsx +65 -0
  96. package/src/ui/Rating.tsx +98 -0
  97. package/src/ui/Result.tsx +75 -0
  98. package/src/ui/RingProgress.tsx +75 -0
  99. package/src/ui/SegmentedControl.tsx +61 -0
  100. package/src/ui/Select.tsx +55 -0
  101. package/src/ui/Separator.tsx +39 -0
  102. package/src/ui/Skeleton.tsx +23 -0
  103. package/src/ui/Slider.tsx +57 -0
  104. package/src/ui/Sortable.tsx +174 -0
  105. package/src/ui/SpeedDial.tsx +75 -0
  106. package/src/ui/Spinner.tsx +33 -0
  107. package/src/ui/Splitter.tsx +115 -0
  108. package/src/ui/Stat.tsx +74 -0
  109. package/src/ui/Stepper.tsx +134 -0
  110. package/src/ui/Switch.tsx +44 -0
  111. package/src/ui/Table.tsx +128 -0
  112. package/src/ui/Tabs.tsx +72 -0
  113. package/src/ui/TagInput.tsx +85 -0
  114. package/src/ui/Textarea.tsx +38 -0
  115. package/src/ui/TimeField.tsx +298 -0
  116. package/src/ui/Timeline.tsx +89 -0
  117. package/src/ui/Toast.tsx +68 -0
  118. package/src/ui/Toggle.tsx +41 -0
  119. package/src/ui/ToggleGroup.tsx +59 -0
  120. package/src/ui/Tooltip.tsx +42 -0
  121. package/src/ui/Tour.tsx +197 -0
  122. package/src/ui/Transfer.tsx +112 -0
  123. package/src/ui/Tree.tsx +100 -0
  124. package/src/ui/TreeSelect.tsx +151 -0
  125. package/src/ui/VirtualList.tsx +81 -0
  126. package/src/ui/internal/CalendarCore.tsx +276 -0
package/README.md CHANGED
@@ -35,29 +35,17 @@ npm install @a4ui/core
35
35
 
36
36
  Peer dependency: `solid-js` (>= 1.9).
37
37
 
38
- ## Use
39
-
40
- A4ui works **out of the box, with no Tailwind required** — the styles ship
41
- precompiled in `styles.css`:
42
-
43
- ```tsx
44
- // entry (once)
45
- import '@a4ui/core/styles.css'
46
-
47
- // anywhere
48
- import { Button } from '@a4ui/core'
38
+ **Starting fresh?** Scaffold a preconfigured Solid + Vite + Tailwind + A4ui app:
49
39
 
50
- export default () => <Button variant="primary">Save</Button>
40
+ ```bash
41
+ npx degit A4uikit/a4ui/starter my-app && cd my-app && npm install && npm run dev
51
42
  ```
52
43
 
53
- Dark is the default; add `data-theme="light"` on `<html>` (or use the
54
- exported `toggleTheme()` / `<ThemeToggle />`) for the light palette.
55
-
56
- ### Optional: Tailwind preset
44
+ ## Use
57
45
 
58
- If your app already uses Tailwind, add the A4ui preset so utilities like
59
- `bg-primary/90` and the `.card` / `.glow-edge` glass surface classes resolve
60
- against A4ui's tokens instead of your own config:
46
+ **With Tailwind** (recommended) — add the A4ui preset so the components'
47
+ utilities and glass classes (`bg-primary/90`, `.card`, `.glow-edge`) resolve
48
+ against A4ui's tokens, and import the token stylesheet once:
61
49
 
62
50
  ```js
63
51
  // tailwind.config.js
@@ -69,9 +57,29 @@ export default {
69
57
  }
70
58
  ```
71
59
 
72
- This is purely additive — components render fully styled with just
73
- `styles.css`; the preset only matters if you also want A4ui's tokens
74
- available as Tailwind utilities in _your own_ markup.
60
+ ```tsx
61
+ import '@a4ui/core/styles.css' // tokens + motion + starfield
62
+ import { Button } from '@a4ui/core'
63
+
64
+ export default () => <Button variant="primary">Save</Button>
65
+ ```
66
+
67
+ **Without Tailwind** — import **`@a4ui/core/full.css`** instead of `styles.css`.
68
+ It's fully precompiled (the tokens **plus** every utility the components use), so
69
+ components render styled with no Tailwind build:
70
+
71
+ ```tsx
72
+ import '@a4ui/core/full.css'
73
+ import { Button } from '@a4ui/core'
74
+ ```
75
+
76
+ (`styles.css` ships only the CSS variables + motion keyframes — it needs the
77
+ Tailwind preset to generate the component utilities; `full.css` is the
78
+ self-contained alternative. The framework-agnostic `elements` bundle ships its
79
+ own precompiled CSS too.)
80
+
81
+ Dark is the default; add `data-theme="light"` on `<html>` (or use the exported
82
+ `toggleTheme()` / `<ThemeToggle />`) for the light palette.
75
83
 
76
84
  ## Customization
77
85
 
@@ -167,10 +175,12 @@ notes — is in **[INTEGRATIONS.md](./INTEGRATIONS.md)**.
167
175
 
168
176
  ## Server rendering
169
177
 
170
- A4ui is **client-first** — the components render in the browser (the glass,
171
- starfield and theme rely on the DOM/`localStorage`). Importing the package is
172
- SSR-safe (no crash at import), but for **SolidStart** render the components on the
173
- client, e.g. via `clientOnly(() => import('...'))`.
178
+ A4ui ships a **`solid` export condition** (its source), so **SolidStart** and any
179
+ `vite-plugin-solid` app compile the components for the server — they
180
+ **server-render**, then hydrate. Importing the package server-side is safe (no DOM
181
+ at module load). The starfield/scenery backdrops are the exception (they build
182
+ DOM imperatively) — wrap those in `clientOnly()`. See
183
+ **[INTEGRATIONS.md](./INTEGRATIONS.md#server-side-rendering-ssr)**.
174
184
 
175
185
  ## Using with AI agents
176
186