@alpic-ai/ui 1.152.0 → 1.153.0

package/dist/components/stat.mjs

@@ -7,7 +7,7 @@ import { cva } from "class-variance-authority";
 import * as React$1 from "react";
 import { Area, AreaChart, ResponsiveContainer } from "recharts";
 //#region src/components/stat.tsx
-const statDeltaVariants = cva("inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 font-mono text-[11px] font-medium leading-none", {
+const statDeltaVariants = cva("inline-flex items-center gap-0.5 rounded-md px-2 py-1 font-mono text-xs font-medium leading-none", {
 	variants: { sentiment: {
 		positive: "text-success bg-success/12",
 		negative: "text-destructive bg-destructive/12"
@@ -51,7 +51,7 @@ function Stat({ value, unit, delta, sparkline, semantic, className, ...props })
 				delta && /* @__PURE__ */ jsxs(DeltaPill, {
 					sentiment,
 					className: "mb-0.5",
-					children: [delta.direction === "up" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3" }), delta.label ?? `${delta.value}%`]
+					children: [delta.direction === "up" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3.5" }), delta.label ?? `${delta.value}%`]
 				})
 			]
 		}), hasSpark && /* @__PURE__ */ jsx("div", {

package/dist/components/table.d.mts

@@ -1,10 +1,14 @@
 import * as React$1 from "react";
 
 //#region src/components/table.d.ts
+interface TableProps extends React$1.ComponentProps<"table"> {
+  containerClassName?: string;
+}
 declare function Table({
   className,
+  containerClassName,
   ...props
-}: React$1.ComponentProps<"table">): React$1.JSX.Element;
+}: TableProps): React$1.JSX.Element;
 declare function TableHeader({
   className,
   ...props

package/dist/components/table.mjs

@@ -2,9 +2,9 @@
 import { cn } from "../lib/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/table.tsx
-function Table({ className, ...props }) {
+function Table({ className, containerClassName, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: "relative w-full overflow-auto rounded-xl border border-border-secondary bg-background",
+		className: cn("relative w-full overflow-auto rounded-xl border border-border-secondary bg-background", containerClassName),
 		children: /* @__PURE__ */ jsx("table", {
 			"data-slot": "table",
 			className: cn("w-full caption-bottom type-text-sm", className),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "1.152.0",
+  "version": "1.153.0",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {

package/src/components/stat.tsx

@@ -9,7 +9,7 @@ import { cn } from "../lib/cn";
 import { useChartContext } from "./chart-container";
 
 const statDeltaVariants = cva(
-  "inline-flex items-center gap-0.5 rounded-md px-1.5 py-0.5 font-mono text-[11px] font-medium leading-none",
+  "inline-flex items-center gap-0.5 rounded-md px-2 py-1 font-mono text-xs font-medium leading-none",
   {
     variants: {
       sentiment: {
@@ -63,7 +63,7 @@ function Stat({ value, unit, delta, sparkline, semantic, className, ...props }:
         {unit && <span className="font-mono text-[11px] leading-none text-quaternary-foreground mb-0.5">{unit}</span>}
         {delta && (
           <DeltaPill sentiment={sentiment} className="mb-0.5">
-            {delta.direction === "up" ? <ArrowUp className="size-3" /> : <ArrowDown className="size-3" />}
+            {delta.direction === "up" ? <ArrowUp className="size-3.5" /> : <ArrowDown className="size-3.5" />}
             {delta.label ?? `${delta.value}%`}
           </DeltaPill>
         )}

package/src/components/table.tsx

@@ -4,9 +4,18 @@ import type * as React from "react";
 
 import { cn } from "../lib/cn";
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+interface TableProps extends React.ComponentProps<"table"> {
+  containerClassName?: string;
+}
+
+function Table({ className, containerClassName, ...props }: TableProps) {
   return (
-    <div className="relative w-full overflow-auto rounded-xl border border-border-secondary bg-background">
+    <div
+      className={cn(
+        "relative w-full overflow-auto rounded-xl border border-border-secondary bg-background",
+        containerClassName,
+      )}
+    >
       <table data-slot="table" className={cn("w-full caption-bottom type-text-sm", className)} {...props} />
     </div>
   );