@siyahi/ui 0.1.9-next.23 → 0.1.9-next.24

package/agents/examples/delta.tsx

@@ -2,12 +2,17 @@ import { Delta } from "@siyahi/ui";
 
 export default function DeltaExample() {
   return (
-    <div className="flex flex-wrap items-center gap-6">
-      <Delta value={0.0234} />
-      <Delta value={-0.0108} />
-      <Delta value={0} />
-      <Delta value={18250} format="money" />
-      <Delta value={-4300} format="money" />
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-center gap-6">
+        <Delta value={0.0234} />
+        <Delta value={-0.0108} />
+        <Delta value={0} />
+        <Delta value={18250} format="money" />
+        <Delta value={-4300} format="money" />
+      </div>
+      <p>
+        Revenue was <Delta value={0.031} /> on last month, and refunds <Delta value={-1200} format="money" />.
+      </p>
     </div>
   );
 }

package/dist/components/siyahi/delta.js

@@ -17,11 +17,11 @@ function Delta({ value, format = "pct", className }) {
 	return /* @__PURE__ */ jsxs("span", {
 		"data-slot": "delta",
 		"data-direction": direction,
-		className: cn("inline-flex items-center gap-1 whitespace-nowrap", className),
+		className: cn("inline-flex items-baseline gap-1 whitespace-nowrap", className),
 		children: [
 			/* @__PURE__ */ jsx(Icon, {
 				"aria-hidden": "true",
-				className: cn("size-3.5 shrink-0", direction === "up" && "text-positive", direction === "down" && "text-negative", direction === "none" && "text-muted-foreground")
+				className: cn("size-3.5 shrink-0 self-center", direction === "up" && "text-positive", direction === "down" && "text-negative", direction === "none" && "text-muted-foreground")
 			}),
 			direction === "up" ? "+" : direction === "down" ? MINUS : "",
 			size

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/ui",
-  "version": "0.1.9-next.23",
+  "version": "0.1.9-next.24",
   "description": "Stock shadcn/ui on Base UI and Tailwind v4, a finance theme, a few compositions and formatters.",
   "keywords": [
     "base-ui",

package/styles/siyahi.css

@@ -237,9 +237,11 @@
  * --input is the edge of a field, where the reader types or picks. A button,
  * a toggle and a code block are framed by their label or their content, so
  * their outline stays the faint divider colour; scoping the variable keeps
- * the fill each derives from it faint too.
+ * the fill each derives from it faint too. A button is matched by its own
+ * group/button class: rendered as a popover or menu trigger, it takes that
+ * trigger's data-slot instead of "button".
  */
-:is([data-slot="button"], [data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="code-block"]) {
+:is([class~="group/button"], [data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="code-block"]) {
   --input: var(--border);
 }
 
@@ -263,7 +265,7 @@
  * hidden range input, so it shows the input's focus.
  */
 :is([data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="scroll-area-viewport"]):focus-visible,
-[data-slot="button"][data-day]:focus-visible {
+[class~="group/button"][data-day]:focus-visible {
   --tw-ring-color: var(--ring);
 }
 [data-slot="slider-thumb"]:has(input:focus-visible) {
@@ -274,13 +276,13 @@
  * A destructive control focuses, and an invalid field is edged, in the full
  * destructive colour; stock fades both to 40-50%, under 3:1.
  */
-[data-slot="button"][class~="text-destructive"]:focus-visible,
+[class~="group/button"][class~="text-destructive"]:focus-visible,
 [data-slot="code-block"][data-variant="destructive"]:has(> [data-slot="code-block-content"]:focus-visible),
 :is(
   [data-slot="input"],
   [data-slot="textarea"],
   [data-slot="select-trigger"],
-  [data-slot="button"]
+  [class~="group/button"]
 )[aria-invalid="true"],
 [data-slot="input-group"]:has([data-slot][aria-invalid="true"]) {
   border-color: var(--destructive);