@a4ui/core 0.24.2 → 0.25.0

package/README.md

@@ -186,17 +186,17 @@ mode switch — a theme recolors underneath either mode.
 **[docs site](https://a4ui.pages.dev/)** or `src/index.ts` for the
 full list):
 
-| Category       | Representative components                                                                                                                                                                                                                                                       |
-| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Forms          | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`                                                                                                                                                                                     |
-| Overlays       | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`                                                                                                                                                                                              |
-| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `CalendarHeatmap`                                                                                                                                       |
-| Navigation     | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`                                                                                                                                                                                          |
-| Feedback       | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`                                                                                                                                                                            |
-| Layout         | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`                                                                                                                                                                                         |
-| Commerce       | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale`                                                                                                                           |
-| Charts         | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted)                                                                                                                                                                                                                |
-| Motion         | `ScrambleText`, `TextReveal`, `Typewriter`, `GradientText`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `ScrollProgress`, `Ripple`, `Magnetic`, `TiltCard`, `Spotlight`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `flyToCart` |
+| Category       | Representative components                                                                                                                                                                                                                                                                                          |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Forms          | `Input`, `Select`, `Checkbox`, `DateField`, `Combobox`, `TagInput`, `Slider`, `NumberInput`, `PromptComposer`, `InlineSelect`                                                                                                                                                                                      |
+| Overlays       | `Modal`, `Drawer`, `Popover`, `Tooltip`, `AlertDialog`, `ContextMenu`, `HoverCard`                                                                                                                                                                                                                                 |
+| Data & display | `Table`, `DataGrid`, `Tree`, `Calendar`, `Timeline`, `Stat`, `Descriptions`, `SpecSheet`, `RatingsSummary`, `LogoWall`, `ChatThread`, `Message`, `Citation`, `CalendarHeatmap`                                                                                                                                     |
+| Navigation     | `Tabs`, `Breadcrumb`, `Pagination`, `Command`, `Anchor`, `Stepper`, `BottomNavigation`                                                                                                                                                                                                                             |
+| Feedback       | `Alert`, `AnnouncementBar`, `Toast`, `Progress`, `Skeleton`, `Empty`, `Result`, `NotificationCenter`                                                                                                                                                                                                               |
+| Layout         | `AppShell`, `SpaceBackground`, `ThemedScenery`, `Card`, `Splitter`, `Affix`, `NavGroup`, `FloatingToolbar`, `ArtifactPanel`                                                                                                                                                                                        |
+| Commerce       | `ProductCard`, `ProductGrid`, `PriceTag`, `PriceBlock`, `QuantityStepper`, `CartLine`, `CartSummary`, `FilterGroup`, `FacetSidebar`, `ConditionScale`                                                                                                                                                              |
+| Charts         | `Sparkline`, `BarChart`, `DonutChart` (native SVG, theme-tinted)                                                                                                                                                                                                                                                   |
+| Motion         | `ScrambleText`, `TextReveal`, `Typewriter`, `GradientText`, `HoldToConfirm`, `LoadingDots`, `FillText`, `Curtain`, `Parallax`, `ScrollProgress`, `Ripple`, `Magnetic`, `TiltCard`, `Spotlight`, `NotificationStack`, `MultiStateBadge`, `NowPlaying`, `Expandable`, `StreamingText`, `PageTransition`, `flyToCart` |
 
 Domain-specific sets ship as **subpath entries** so the base package stays lean —
 e.g. commerce and chart components import from their own paths:

package/dist/{NumberInput-DcJlXNKq.js → NumberInput-BQhVucw-.js}

@@ -7,10 +7,10 @@ import { NumberField as _ } from "@kobalte/core/number-field";
 var Z = /* @__PURE__ */ m('<span class="relative flex h-1.5 w-1.5"aria-hidden=true><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75"></span><span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-current">'), ee = /* @__PURE__ */ m("<span>");
 const te = {
   neutral: "bg-muted text-muted-foreground ring-border",
-  success: "bg-emerald-500/15 text-emerald-600 ring-emerald-500/30",
-  warning: "bg-amber-500/15 text-amber-600 ring-amber-500/30",
-  danger: "bg-rose-500/15 text-rose-600 ring-rose-500/30",
-  info: "bg-sky-500/15 text-sky-600 ring-sky-500/30"
+  success: "bg-emerald-500/15 text-emerald-300 ring-emerald-500/30 light:text-emerald-700",
+  warning: "bg-amber-500/15 text-amber-300 ring-amber-500/30 light:text-amber-700",
+  danger: "bg-rose-500/15 text-rose-300 ring-rose-500/30 light:text-rose-700",
+  info: "bg-sky-500/15 text-sky-300 ring-sky-500/30 light:text-sky-700"
 }, re = "badge inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold ring-1 ring-inset whitespace-nowrap";
 function Le(e) {
   const [t, n] = x(e, ["tone", "class", "children", "pulse"]);

package/dist/commerce.js

@@ -1,7 +1,7 @@
 import { insert as n, createComponent as c, memo as k, effect as $, className as C, template as v, delegateEvents as A, setAttribute as w, setStyleProperty as j } from "solid-js/web";
 import { Show as b, For as S, createSignal as B, createMemo as R } from "solid-js";
 import { c as _ } from "./cn-B6yFEsav.js";
-import { B as D, C as O, R as G, a as M, b as z, N as U, c as K } from "./NumberInput-DcJlXNKq.js";
+import { B as D, C as O, R as G, a as M, b as z, N as U, c as K } from "./NumberInput-BQhVucw-.js";
 import { Minus as Q, Plus as V, Trash2 as X, X as Z, CreditCard as H } from "lucide-solid";
 var J = /* @__PURE__ */ v('<span class="text-muted-foreground line-through">'), W = /* @__PURE__ */ v("<div><span>");
 const Y = {

package/dist/elements.css

@@ -1561,6 +1561,9 @@ html.calm .tile-glass {
 .left-0 {
   left: 0px;
 }
+.left-1\/2 {
+  left: 50%;
+}
 .left-1\/3 {
   left: 33.333333%;
 }
@@ -1609,6 +1612,9 @@ html.calm .tile-glass {
 .top-3\.5 {
   top: 0.875rem;
 }
+.top-4 {
+  top: 1rem;
+}
 .top-\[14vh\] {
   top: 14vh;
 }
@@ -1815,6 +1821,9 @@ html.calm .tile-glass {
 .h-9 {
   height: 2.25rem;
 }
+.h-\[1\.1em\] {
+  height: 1.1em;
+}
 .h-\[12\.5\%\] {
   height: 12.5%;
 }
@@ -1875,12 +1884,18 @@ html.calm .tile-glass {
 .max-h-\[85vh\] {
   max-height: 85vh;
 }
+.min-h-0 {
+  min-height: 0px;
+}
 .min-h-4 {
   min-height: 1rem;
 }
 .min-h-9 {
   min-height: 2.25rem;
 }
+.min-h-\[24px\] {
+  min-height: 24px;
+}
 .min-h-\[80px\] {
   min-height: 80px;
 }
@@ -2013,6 +2028,9 @@ html.calm .tile-glass {
 .min-w-56 {
   min-width: 14rem;
 }
+.min-w-\[1\.1em\] {
+  min-width: 1.1em;
+}
 .min-w-\[1\.5rem\] {
   min-width: 1.5rem;
 }
@@ -2040,6 +2058,9 @@ html.calm .tile-glass {
 .max-w-7xl {
   max-width: 80rem;
 }
+.max-w-\[12rem\] {
+  max-width: 12rem;
+}
 .max-w-\[520px\] {
   max-width: 520px;
 }
@@ -2109,6 +2130,16 @@ html.calm .tile-glass {
   --tw-rotate: 90deg;
   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));
 }
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  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));
+}
+.scale-95 {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  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));
+}
 .scale-\[1\.03\] {
   --tw-scale-x: 1.03;
   --tw-scale-y: 1.03;
@@ -2176,6 +2207,9 @@ html.calm .tile-glass {
 .select-none {
   user-select: none;
 }
+.resize-none {
+  resize: none;
+}
 .resize-y {
   resize: vertical;
 }
@@ -2345,6 +2379,9 @@ html.calm .tile-glass {
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
 .break-words {
   overflow-wrap: break-word;
 }
@@ -2624,6 +2661,9 @@ html.calm .tile-glass {
 .p-0 {
   padding: 0px;
 }
+.p-0\.5 {
+  padding: 0.125rem;
+}
 .p-1 {
   padding: 0.25rem;
 }
@@ -2788,6 +2828,9 @@ html.calm .tile-glass {
 .align-middle {
   vertical-align: middle;
 }
+.align-super {
+  vertical-align: super;
+}
 .font-mono {
   font-family: "IBM Plex Mono", ui-monospace, monospace;
 }
@@ -2807,6 +2850,9 @@ html.calm .tile-glass {
   font-size: 3rem;
   line-height: 1;
 }
+.text-\[0\.65rem\] {
+  font-size: 0.65rem;
+}
 .text-\[10px\] {
   font-size: 10px;
 }
@@ -2863,6 +2909,9 @@ html.calm .tile-glass {
 .capitalize {
   text-transform: capitalize;
 }
+.italic {
+  font-style: italic;
+}
 .tabular-nums {
   --tw-numeric-spacing: tabular-nums;
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
@@ -2870,6 +2919,9 @@ html.calm .tile-glass {
 .leading-none {
   line-height: 1;
 }
+.leading-relaxed {
+  line-height: 1.625;
+}
 .leading-tight {
   line-height: 1.25;
 }
@@ -2883,13 +2935,13 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: hsl(var(--accent-foreground) / var(--tw-text-opacity, 1));
 }
-.text-amber-500 {
+.text-amber-300 {
   --tw-text-opacity: 1;
-  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
+  color: rgb(252 211 77 / var(--tw-text-opacity, 1));
 }
-.text-amber-600 {
+.text-amber-500 {
   --tw-text-opacity: 1;
-  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
+  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
 }
 .text-card-foreground {
   --tw-text-opacity: 1;
@@ -2906,6 +2958,10 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: hsl(var(--destructive-foreground) / var(--tw-text-opacity, 1));
 }
+.text-emerald-300 {
+  --tw-text-opacity: 1;
+  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
+}
 .text-emerald-500 {
   --tw-text-opacity: 1;
   color: rgb(16 185 129 / var(--tw-text-opacity, 1));
@@ -2936,6 +2992,9 @@ html.calm .tile-glass {
 .text-muted-foreground\/60 {
   color: hsl(var(--muted-foreground) / 0.6);
 }
+.text-muted-foreground\/70 {
+  color: hsl(var(--muted-foreground) / 0.7);
+}
 .text-primary {
   --tw-text-opacity: 1;
   color: hsl(var(--primary) / var(--tw-text-opacity, 1));
@@ -2948,6 +3007,10 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
+.text-rose-300 {
+  --tw-text-opacity: 1;
+  color: rgb(253 164 175 / var(--tw-text-opacity, 1));
+}
 .text-rose-500 {
   --tw-text-opacity: 1;
   color: rgb(244 63 94 / var(--tw-text-opacity, 1));
@@ -2956,17 +3019,23 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: rgb(225 29 72 / var(--tw-text-opacity, 1));
 }
+.text-sky-300 {
+  --tw-text-opacity: 1;
+  color: rgb(125 211 252 / var(--tw-text-opacity, 1));
+}
 .text-sky-500 {
   --tw-text-opacity: 1;
   color: rgb(14 165 233 / var(--tw-text-opacity, 1));
 }
-.text-sky-600 {
-  --tw-text-opacity: 1;
-  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
+.underline {
+  text-decoration-line: underline;
 }
 .line-through {
   text-decoration-line: line-through;
 }
+.decoration-border {
+  text-decoration-color: hsl(var(--border) / 1);
+}
 .underline-offset-2 {
   text-underline-offset: 2px;
 }
@@ -3122,11 +3191,21 @@ html.calm .tile-glass {
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
+.backdrop-blur-md {
+  --tw-backdrop-blur: blur(12px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
 .backdrop-blur-sm {
   --tw-backdrop-blur: blur(4px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
+.backdrop-blur-xl {
+  --tw-backdrop-blur: blur(24px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
 .backdrop-filter {
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -3161,11 +3240,21 @@ html.calm .tile-glass {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-\[opacity\2c transform\] {
+  transition-property: opacity,transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-\[transform\2c opacity\] {
   transition-property: transform,opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-\[width\] {
+  transition-property: width;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -3280,6 +3369,10 @@ html.calm .tile-glass {
 .hover\:bg-accent\/90:hover {
   background-color: hsl(var(--accent) / 0.9);
 }
+.hover\:bg-background:hover {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-muted:hover {
   --tw-bg-opacity: 1;
   background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
@@ -3290,6 +3383,9 @@ html.calm .tile-glass {
 .hover\:bg-muted\/70:hover {
   background-color: hsl(var(--muted) / 0.7);
 }
+.hover\:bg-primary\/15:hover {
+  background-color: hsl(var(--primary) / 0.15);
+}
 .hover\:bg-primary\/5:hover {
   background-color: hsl(var(--primary) / 0.05);
 }
@@ -3303,6 +3399,10 @@ html.calm .tile-glass {
   --tw-text-opacity: 1;
   color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
 }
+.hover\:text-primary:hover {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary) / var(--tw-text-opacity, 1));
+}
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
@@ -3465,8 +3565,28 @@ html.calm .tile-glass {
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }
+[data-theme='light'] .light\:text-amber-700 {
+  --tw-text-opacity: 1;
+  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
+}
+[data-theme='light'] .light\:text-emerald-700 {
+  --tw-text-opacity: 1;
+  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
+}
+[data-theme='light'] .light\:text-rose-700 {
+  --tw-text-opacity: 1;
+  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
+}
+[data-theme='light'] .light\:text-sky-700 {
+  --tw-text-opacity: 1;
+  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
+}
 @media (prefers-reduced-motion: reduce) {
 
+  .motion-reduce\:animate-none {
+    animation: none;
+  }
+
   .motion-reduce\:transition-none {
     transition-property: none;
   }