@a4ui/core 0.11.1 → 0.13.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 (151) hide show
  1. package/README.md +80 -37
  2. package/dist/elements.css +79 -9
  3. package/dist/full.css +3112 -0
  4. package/dist/index.d.ts +13 -1
  5. package/dist/index.js +3392 -2537
  6. package/dist/lib/flyToCart.d.ts +25 -0
  7. package/dist/ui/Curtain.d.ts +44 -0
  8. package/dist/ui/Expandable.d.ts +34 -0
  9. package/dist/ui/FillText.d.ts +18 -0
  10. package/dist/ui/HoldToConfirm.d.ts +24 -0
  11. package/dist/ui/LoadingDots.d.ts +20 -0
  12. package/dist/ui/MultiStateBadge.d.ts +23 -0
  13. package/dist/ui/NotificationStack.d.ts +32 -0
  14. package/dist/ui/NowPlaying.d.ts +21 -0
  15. package/dist/ui/Parallax.d.ts +21 -0
  16. package/dist/ui/ScrambleText.d.ts +22 -0
  17. package/dist/ui/TextReveal.d.ts +23 -0
  18. package/package.json +8 -1
  19. package/src/charts/BarChart.tsx +55 -0
  20. package/src/charts/DonutChart.tsx +127 -0
  21. package/src/charts/Sparkline.tsx +101 -0
  22. package/src/charts/index.ts +5 -0
  23. package/src/commerce/CartLine.tsx +84 -0
  24. package/src/commerce/CartSummary.tsx +70 -0
  25. package/src/commerce/FilterGroup.tsx +70 -0
  26. package/src/commerce/PriceTag.tsx +62 -0
  27. package/src/commerce/ProductCard.tsx +121 -0
  28. package/src/commerce/ProductGrid.tsx +27 -0
  29. package/src/commerce/QuantityStepper.tsx +59 -0
  30. package/src/commerce/index.ts +10 -0
  31. package/src/elements.tsx +167 -0
  32. package/src/index.ts +186 -0
  33. package/src/layout/AppShell.tsx +102 -0
  34. package/src/layout/ChristmasBackground.tsx +177 -0
  35. package/src/layout/EffectsToggle.tsx +41 -0
  36. package/src/layout/NavGroup.tsx +45 -0
  37. package/src/layout/SnowScenery.tsx +76 -0
  38. package/src/layout/SpaceBackground.tsx +459 -0
  39. package/src/layout/ThemeToggle.tsx +40 -0
  40. package/src/layout/ThemedScenery.tsx +179 -0
  41. package/src/layout/sceneEffects.ts +49 -0
  42. package/src/lib/cn.ts +17 -0
  43. package/src/lib/effects.ts +71 -0
  44. package/src/lib/flyToCart.ts +103 -0
  45. package/src/lib/media.ts +27 -0
  46. package/src/lib/motion.ts +191 -0
  47. package/src/lib/theme.ts +113 -0
  48. package/src/lib/virtual.ts +33 -0
  49. package/src/styles/space.css +510 -0
  50. package/src/styles/tokens.css +213 -0
  51. package/src/themes/index.ts +102 -0
  52. package/src/themes/palettes.ts +368 -0
  53. package/src/ui/Accordion.tsx +65 -0
  54. package/src/ui/Affix.tsx +72 -0
  55. package/src/ui/Alert.tsx +55 -0
  56. package/src/ui/AlertDialog.tsx +58 -0
  57. package/src/ui/Anchor.tsx +100 -0
  58. package/src/ui/Avatar.tsx +34 -0
  59. package/src/ui/AvatarGroup.tsx +55 -0
  60. package/src/ui/BackToTop.tsx +51 -0
  61. package/src/ui/Badge.tsx +46 -0
  62. package/src/ui/BottomNavigation.tsx +65 -0
  63. package/src/ui/Breadcrumb.tsx +64 -0
  64. package/src/ui/Button.tsx +49 -0
  65. package/src/ui/Calendar.tsx +40 -0
  66. package/src/ui/CalendarHeatmap.tsx +180 -0
  67. package/src/ui/Card.tsx +84 -0
  68. package/src/ui/Carousel.tsx +121 -0
  69. package/src/ui/Cascader.tsx +158 -0
  70. package/src/ui/Checkbox.tsx +35 -0
  71. package/src/ui/Clock.tsx +221 -0
  72. package/src/ui/Collapse.tsx +48 -0
  73. package/src/ui/ColorPicker.tsx +89 -0
  74. package/src/ui/Combobox.tsx +67 -0
  75. package/src/ui/Command.tsx +158 -0
  76. package/src/ui/Comment.tsx +91 -0
  77. package/src/ui/ContextMenu.tsx +58 -0
  78. package/src/ui/Countdown.tsx +123 -0
  79. package/src/ui/Curtain.tsx +348 -0
  80. package/src/ui/DataGrid.tsx +177 -0
  81. package/src/ui/DateField.tsx +177 -0
  82. package/src/ui/DateRangePicker.tsx +204 -0
  83. package/src/ui/DateTimeField.tsx +68 -0
  84. package/src/ui/Descriptions.tsx +56 -0
  85. package/src/ui/Drawer.tsx +72 -0
  86. package/src/ui/Dropdown.tsx +71 -0
  87. package/src/ui/Dropzone.tsx +88 -0
  88. package/src/ui/Empty.tsx +53 -0
  89. package/src/ui/Expandable.tsx +229 -0
  90. package/src/ui/FileUpload.tsx +198 -0
  91. package/src/ui/FillText.tsx +63 -0
  92. package/src/ui/FloatingActionButton.tsx +48 -0
  93. package/src/ui/Form.tsx +108 -0
  94. package/src/ui/Highlight.tsx +53 -0
  95. package/src/ui/HoldToConfirm.tsx +141 -0
  96. package/src/ui/HoverCard.tsx +42 -0
  97. package/src/ui/Image.tsx +66 -0
  98. package/src/ui/Input.tsx +38 -0
  99. package/src/ui/Kbd.tsx +25 -0
  100. package/src/ui/List.tsx +71 -0
  101. package/src/ui/LoadingDots.tsx +75 -0
  102. package/src/ui/Marquee.tsx +48 -0
  103. package/src/ui/Mentions.tsx +170 -0
  104. package/src/ui/Meter.tsx +57 -0
  105. package/src/ui/Modal.tsx +106 -0
  106. package/src/ui/MultiSelect.tsx +236 -0
  107. package/src/ui/MultiStateBadge.tsx +93 -0
  108. package/src/ui/NotificationCenter.tsx +103 -0
  109. package/src/ui/NotificationStack.tsx +104 -0
  110. package/src/ui/NowPlaying.tsx +100 -0
  111. package/src/ui/NumberInput.tsx +48 -0
  112. package/src/ui/PageHeader.tsx +60 -0
  113. package/src/ui/Pagination.tsx +62 -0
  114. package/src/ui/Parallax.tsx +51 -0
  115. package/src/ui/Popover.tsx +42 -0
  116. package/src/ui/Portal.tsx +34 -0
  117. package/src/ui/Progress.tsx +55 -0
  118. package/src/ui/RadioGroup.tsx +65 -0
  119. package/src/ui/Rating.tsx +98 -0
  120. package/src/ui/Result.tsx +75 -0
  121. package/src/ui/RingProgress.tsx +75 -0
  122. package/src/ui/ScrambleText.tsx +95 -0
  123. package/src/ui/SegmentedControl.tsx +61 -0
  124. package/src/ui/Select.tsx +55 -0
  125. package/src/ui/Separator.tsx +39 -0
  126. package/src/ui/Skeleton.tsx +23 -0
  127. package/src/ui/Slider.tsx +57 -0
  128. package/src/ui/Sortable.tsx +174 -0
  129. package/src/ui/SpeedDial.tsx +85 -0
  130. package/src/ui/Spinner.tsx +33 -0
  131. package/src/ui/Splitter.tsx +115 -0
  132. package/src/ui/Stat.tsx +74 -0
  133. package/src/ui/Stepper.tsx +134 -0
  134. package/src/ui/Switch.tsx +44 -0
  135. package/src/ui/Table.tsx +128 -0
  136. package/src/ui/Tabs.tsx +72 -0
  137. package/src/ui/TagInput.tsx +85 -0
  138. package/src/ui/TextReveal.tsx +93 -0
  139. package/src/ui/Textarea.tsx +38 -0
  140. package/src/ui/TimeField.tsx +298 -0
  141. package/src/ui/Timeline.tsx +89 -0
  142. package/src/ui/Toast.tsx +68 -0
  143. package/src/ui/Toggle.tsx +41 -0
  144. package/src/ui/ToggleGroup.tsx +59 -0
  145. package/src/ui/Tooltip.tsx +42 -0
  146. package/src/ui/Tour.tsx +197 -0
  147. package/src/ui/Transfer.tsx +112 -0
  148. package/src/ui/Tree.tsx +100 -0
  149. package/src/ui/TreeSelect.tsx +151 -0
  150. package/src/ui/VirtualList.tsx +81 -0
  151. 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'
38
+ **Starting fresh?** Scaffold a preconfigured Solid + Vite + Tailwind + A4ui app:
46
39
 
47
- // anywhere
48
- import { Button } from '@a4ui/core'
49
-
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,61 @@ 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.
83
+
84
+ ## Bundle size & mounting (partial vs full)
85
+
86
+ A4ui is **tree-shakeable** — `sideEffects` is `["**/*.css"]`, so the only thing
87
+ that lands in your bundle is what you actually `import`. You never pay for the
88
+ 75+ components you don't use, and adding components to the library **doesn't grow
89
+ your app**. Import à la carte:
90
+
91
+ ```tsx
92
+ import { Button, Card } from '@a4ui/core' // just these two
93
+ ```
94
+
95
+ Approximate **gzipped** weights (measured on 0.13.0; JS excludes the `solid-js`,
96
+ `@kobalte/core`, `lucide-solid` and `motion` externals your app already has):
97
+
98
+ | Part | gzip | Notes |
99
+ | ----------------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
100
+ | **First component** (e.g. `Button` + the `cn` helper) | ~10–11 kB | One-time baseline (includes `tailwind-merge`). Shared by every component. |
101
+ | **Each additional component** | ~0.1–0.5 kB | `Button` alone 10.7 kB → `Button + Card + Badge + Input` 11.1 kB. |
102
+ | **Whole barrel** (`@a4ui/core`, all 75+ used) | ~53.0 kB | Only if you literally import everything — the realistic ceiling. |
103
+ | `@a4ui/core/commerce` | ~3.0 kB | ProductCard, CartSummary, PriceTag… |
104
+ | `@a4ui/core/charts` | ~2.5 kB | Sparkline, BarChart, DonutChart (native SVG). |
105
+ | `@a4ui/core/styles.css` | ~5.3 kB | Tokens + motion keyframes (needs the Tailwind preset for utilities). |
106
+ | `@a4ui/core/full.css` | ~14.1 kB | Every utility precompiled — for **no-Tailwind** apps. With Tailwind, your own purge ships far less. |
107
+ | `@a4ui/core/elements` (Web Components) | ~63.9 kB JS + ~14 kB CSS | Self-contained (Solid + motion compiled in). For React/Vue/vanilla. |
108
+ | `motion` (the animation engine) | ~45 kB | **External / opt-in** — pulled in **only** if you import an animated component (`Stat`, `HoldToConfirm`, `Curtain`, `Parallax`, `ScrambleText`, `FillText`, `TextReveal`, `NotificationStack`, `MultiStateBadge`, `Expandable`, `SpeedDial`, or the `flyToCart`/`animate`/`createCountUp` helpers). CSS-only ones (`LoadingDots`, `NowPlaying`) and static UIs never load it. |
109
+
110
+ **Performance note (Lighthouse / Cloudflare):** because `motion` is external and
111
+ everything is tree-shaken, a page that uses only static components ships ~10–15 kB
112
+ of A4ui JS + your purged CSS — the animation engine is loaded lazily and shared
113
+ only when an animated component is on the page. Keep animations off the critical
114
+ path (or behind `motionReduced`) and the design system stays Lighthouse-friendly.
75
115
 
76
116
  ## Customization
77
117
 
@@ -111,20 +151,21 @@ mode switch — a theme recolors underneath either mode.
111
151
 
112
152
  ## Components
113
153
 
114
- 90+ components across eight categories (this is a sample — see the
154
+ 75+ components across nine categories (this is a sample — see the
115
155
  **[docs site](https://a4uikit.github.io/a4ui/)** or `src/index.ts` for the
116
156
  full list):
117
157
 
118
- | Category | Representative components |
119
- | -------------- | ----------------------------------------------------------------------------------------------------- |
120
- | Forms | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput` |
121
- | Overlays | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard` |
122
- | Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `CalendarHeatmap` |
123
- | Navigation | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation` |
124
- | Feedback | `Alert`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter` |
125
- | Layout | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup` |
126
- | Commerce | `ProductCard`, `ProductGrid`, `PriceTag`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup` |
127
- | Charts | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted) |
158
+ | Category | Representative components |
159
+ | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
160
+ | Forms | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput` |
161
+ | Overlays | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard` |
162
+ | Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `CalendarHeatmap` |
163
+ | Navigation | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation` |
164
+ | Feedback | `Alert`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter` |
165
+ | Layout | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup` |
166
+ | Commerce | `ProductCard`, `ProductGrid`, `PriceTag`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup` |
167
+ | Charts | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted) |
168
+ | Motion | `ScrambleText`, `TextReveal`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `flyToCart` |
128
169
 
129
170
  Domain-specific sets ship as **subpath entries** so the base package stays lean —
130
171
  e.g. commerce and chart components import from their own paths:
@@ -167,10 +208,12 @@ notes — is in **[INTEGRATIONS.md](./INTEGRATIONS.md)**.
167
208
 
168
209
  ## Server rendering
169
210
 
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('...'))`.
211
+ A4ui ships a **`solid` export condition** (its source), so **SolidStart** and any
212
+ `vite-plugin-solid` app compile the components for the server — they
213
+ **server-render**, then hydrate. Importing the package server-side is safe (no DOM
214
+ at module load). The starfield/scenery backdrops are the exception (they build
215
+ DOM imperatively) — wrap those in `clientOnly()`. See
216
+ **[INTEGRATIONS.md](./INTEGRATIONS.md#server-side-rendering-ssr)**.
174
217
 
175
218
  ## Using with AI agents
176
219
 
package/dist/elements.css CHANGED
@@ -1431,6 +1431,10 @@ html.calm .tile-glass {
1431
1431
  left: 0px;
1432
1432
  right: 0px;
1433
1433
  }
1434
+ .inset-y-0 {
1435
+ top: 0px;
1436
+ bottom: 0px;
1437
+ }
1434
1438
  .-bottom-6 {
1435
1439
  bottom: -1.5rem;
1436
1440
  }
@@ -1455,6 +1459,9 @@ html.calm .tile-glass {
1455
1459
  .bottom-6 {
1456
1460
  bottom: 1.5rem;
1457
1461
  }
1462
+ .left-0 {
1463
+ left: 0px;
1464
+ }
1458
1465
  .left-2 {
1459
1466
  left: 0.5rem;
1460
1467
  }
@@ -1464,9 +1471,15 @@ html.calm .tile-glass {
1464
1471
  .left-\[calc\(0\.5rem\+0\.375rem\)\] {
1465
1472
  left: calc(0.5rem + 0.375rem);
1466
1473
  }
1474
+ .right-0 {
1475
+ right: 0px;
1476
+ }
1467
1477
  .right-2 {
1468
1478
  right: 0.5rem;
1469
1479
  }
1480
+ .right-3 {
1481
+ right: 0.75rem;
1482
+ }
1470
1483
  .right-4 {
1471
1484
  right: 1rem;
1472
1485
  }
@@ -1515,6 +1528,12 @@ html.calm .tile-glass {
1515
1528
  .z-\[1\] {
1516
1529
  z-index: 1;
1517
1530
  }
1531
+ .z-\[9998\] {
1532
+ z-index: 9998;
1533
+ }
1534
+ .z-\[9999\] {
1535
+ z-index: 9999;
1536
+ }
1518
1537
  .m-0 {
1519
1538
  margin: 0px;
1520
1539
  }
@@ -1576,6 +1595,12 @@ html.calm .tile-glass {
1576
1595
  -webkit-box-orient: vertical;
1577
1596
  -webkit-line-clamp: 1;
1578
1597
  }
1598
+ .line-clamp-2 {
1599
+ overflow: hidden;
1600
+ display: -webkit-box;
1601
+ -webkit-box-orient: vertical;
1602
+ -webkit-line-clamp: 2;
1603
+ }
1579
1604
  .block {
1580
1605
  display: block;
1581
1606
  }
@@ -1667,6 +1692,9 @@ html.calm .tile-glass {
1667
1692
  .h-9 {
1668
1693
  height: 2.25rem;
1669
1694
  }
1695
+ .h-\[12\.5\%\] {
1696
+ height: 12.5%;
1697
+ }
1670
1698
  .h-\[18px\] {
1671
1699
  height: 18px;
1672
1700
  }
@@ -1727,6 +1755,9 @@ html.calm .tile-glass {
1727
1755
  .w-1\.5 {
1728
1756
  width: 0.375rem;
1729
1757
  }
1758
+ .w-1\/2 {
1759
+ width: 50%;
1760
+ }
1730
1761
  .w-10 {
1731
1762
  width: 2.5rem;
1732
1763
  }
@@ -1790,6 +1821,9 @@ html.calm .tile-glass {
1790
1821
  .w-\[0\.62em\] {
1791
1822
  width: 0.62em;
1792
1823
  }
1824
+ .w-\[12\.5\%\] {
1825
+ width: 12.5%;
1826
+ }
1793
1827
  .w-\[18px\] {
1794
1828
  width: 18px;
1795
1829
  }
@@ -1856,12 +1890,24 @@ html.calm .tile-glass {
1856
1890
  .flex-1 {
1857
1891
  flex: 1 1 0%;
1858
1892
  }
1893
+ .shrink {
1894
+ flex-shrink: 1;
1895
+ }
1859
1896
  .shrink-0 {
1860
1897
  flex-shrink: 0;
1861
1898
  }
1899
+ .grow {
1900
+ flex-grow: 1;
1901
+ }
1862
1902
  .border-collapse {
1863
1903
  border-collapse: collapse;
1864
1904
  }
1905
+ .origin-left {
1906
+ transform-origin: left;
1907
+ }
1908
+ .origin-top {
1909
+ transform-origin: top;
1910
+ }
1865
1911
  .-translate-x-1\/2 {
1866
1912
  --tw-translate-x: -50%;
1867
1913
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1870,10 +1916,6 @@ html.calm .tile-glass {
1870
1916
  --tw-translate-y: -50%;
1871
1917
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1872
1918
  }
1873
- .translate-y-0 {
1874
- --tw-translate-y: 0px;
1875
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1876
- }
1877
1919
  .-rotate-90 {
1878
1920
  --tw-rotate: -90deg;
1879
1921
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2001,6 +2043,9 @@ html.calm .tile-glass {
2001
2043
  .gap-2 {
2002
2044
  gap: 0.5rem;
2003
2045
  }
2046
+ .gap-2\.5 {
2047
+ gap: 0.625rem;
2048
+ }
2004
2049
  .gap-3 {
2005
2050
  gap: 0.75rem;
2006
2051
  }
@@ -2079,6 +2124,9 @@ html.calm .tile-glass {
2079
2124
  .rounded {
2080
2125
  border-radius: 0.25rem;
2081
2126
  }
2127
+ .rounded-2xl {
2128
+ border-radius: 1rem;
2129
+ }
2082
2130
  .rounded-full {
2083
2131
  border-radius: 9999px;
2084
2132
  }
@@ -2211,6 +2259,9 @@ html.calm .tile-glass {
2211
2259
  --tw-bg-opacity: 1;
2212
2260
  background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
2213
2261
  }
2262
+ .bg-current {
2263
+ background-color: currentColor;
2264
+ }
2214
2265
  .bg-destructive {
2215
2266
  --tw-bg-opacity: 1;
2216
2267
  background-color: hsl(var(--destructive) / var(--tw-bg-opacity, 1));
@@ -2218,6 +2269,9 @@ html.calm .tile-glass {
2218
2269
  .bg-destructive\/10 {
2219
2270
  background-color: hsl(var(--destructive) / 0.1);
2220
2271
  }
2272
+ .bg-destructive\/15 {
2273
+ background-color: hsl(var(--destructive) / 0.15);
2274
+ }
2221
2275
  .bg-emerald-500 {
2222
2276
  --tw-bg-opacity: 1;
2223
2277
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
@@ -2228,6 +2282,9 @@ html.calm .tile-glass {
2228
2282
  .bg-emerald-500\/15 {
2229
2283
  background-color: rgb(16 185 129 / 0.15);
2230
2284
  }
2285
+ .bg-green-500\/15 {
2286
+ background-color: rgb(34 197 94 / 0.15);
2287
+ }
2231
2288
  .bg-input {
2232
2289
  --tw-bg-opacity: 1;
2233
2290
  background-color: hsl(var(--input) / var(--tw-bg-opacity, 1));
@@ -2236,6 +2293,9 @@ html.calm .tile-glass {
2236
2293
  --tw-bg-opacity: 1;
2237
2294
  background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
2238
2295
  }
2296
+ .bg-muted\/80 {
2297
+ background-color: hsl(var(--muted) / 0.8);
2298
+ }
2239
2299
  .bg-primary {
2240
2300
  --tw-bg-opacity: 1;
2241
2301
  background-color: hsl(var(--primary) / var(--tw-bg-opacity, 1));
@@ -2555,6 +2615,9 @@ html.calm .tile-glass {
2555
2615
  --tw-text-opacity: 1;
2556
2616
  color: hsl(var(--card-foreground) / var(--tw-text-opacity, 1));
2557
2617
  }
2618
+ .text-current {
2619
+ color: currentColor;
2620
+ }
2558
2621
  .text-destructive {
2559
2622
  --tw-text-opacity: 1;
2560
2623
  color: hsl(var(--destructive) / var(--tw-text-opacity, 1));
@@ -2575,6 +2638,10 @@ html.calm .tile-glass {
2575
2638
  --tw-text-opacity: 1;
2576
2639
  color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
2577
2640
  }
2641
+ .text-green-600 {
2642
+ --tw-text-opacity: 1;
2643
+ color: rgb(22 163 74 / var(--tw-text-opacity, 1));
2644
+ }
2578
2645
  .text-muted-foreground {
2579
2646
  --tw-text-opacity: 1;
2580
2647
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
@@ -2622,9 +2689,6 @@ html.calm .tile-glass {
2622
2689
  .accent-primary {
2623
2690
  accent-color: hsl(var(--primary) / 1);
2624
2691
  }
2625
- .opacity-100 {
2626
- opacity: 1;
2627
- }
2628
2692
  .opacity-25 {
2629
2693
  opacity: 0.25;
2630
2694
  }
@@ -2768,8 +2832,8 @@ html.calm .tile-glass {
2768
2832
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2769
2833
  transition-duration: 150ms;
2770
2834
  }
2771
- .transition-\[opacity\2c transform\] {
2772
- transition-property: opacity,transform;
2835
+ .transition-\[transform\2c opacity\] {
2836
+ transition-property: transform,opacity;
2773
2837
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2774
2838
  transition-duration: 150ms;
2775
2839
  }
@@ -2799,6 +2863,9 @@ html.calm .tile-glass {
2799
2863
  .duration-200 {
2800
2864
  transition-duration: 200ms;
2801
2865
  }
2866
+ .duration-300 {
2867
+ transition-duration: 300ms;
2868
+ }
2802
2869
  .duration-500 {
2803
2870
  transition-duration: 500ms;
2804
2871
  }
@@ -2808,6 +2875,9 @@ html.calm .tile-glass {
2808
2875
  .ease-out {
2809
2876
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2810
2877
  }
2878
+ .will-change-transform {
2879
+ will-change: transform;
2880
+ }
2811
2881
  .placeholder\:text-muted-foreground::placeholder {
2812
2882
  --tw-text-opacity: 1;
2813
2883
  color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));