@brightweblabs/ui 1.4.4 → 1.4.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@brightweblabs/ui",
   "private": false,
-  "version": "1.4.4",
+  "version": "1.4.5",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "files": [
@@ -76,7 +76,7 @@
     "recharts": "^2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0",
-    "@brightweblabs/theme": "0.7.2"
+    "@brightweblabs/theme": "0.7.3"
   },
   "peerDependencies": {
     "lucide-react": "^1.8.0",

package/src/components/alert-dialog.tsx

@@ -84,7 +84,7 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn("text-body-lg font-semibold text-foreground", className)}
+      className={cn("text-heading-4 text-foreground", className)}
       {...props}
     />
   )

package/src/components/avatar.tsx

@@ -69,7 +69,7 @@ function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">)
     <div
       data-slot="avatar-group-count"
       className={cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-body text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-data text-[length:var(--text-body)] leading-[var(--type-leading-normal)] text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className,
       )}
       {...props}

package/src/components/button-variants.ts

@@ -1,11 +1,12 @@
 import { cva, type VariantProps } from "class-variance-authority";
 
 const buttonVariants = cva(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-control)] text-body !font-semibold transition-[color,background-color,border-color,box-shadow,transform,filter,text-decoration-color] motion-reduce:transition-none outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:border-current focus-visible:ring-[3px] focus-visible:ring-current aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-control)] text-body text-[length:var(--text-ui-action)] !font-extrabold transition-[color,background-color,border-color,box-shadow,transform,filter,text-decoration-color] motion-reduce:transition-none outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:border-current focus-visible:ring-[3px] focus-visible:ring-current aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[var(--toolbar-icon-size)]",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "border border-transparent bg-[color:var(--surface-button-brand)] text-[color:var(--foreground-button-brand)] hover:brightness-[1.05]",
         accent:
           "relative isolate h-auto overflow-hidden !rounded-none px-0 py-0 font-display !font-bold text-body leading-[var(--type-leading-160)] text-foreground [padding:var(--space-button-y)_var(--space-button-x)] hover:text-foreground focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-current focus-visible:ring-offset-2",
         accentLink:
@@ -13,17 +14,17 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:brightness-[1.05]",
         brand:
-          "bg-[color:var(--surface-button-brand)] !text-[color:var(--foreground-button-brand)] !font-extrabold shadow-[var(--shadow-accent-control)] hover:brightness-[1.05]",
+          "border border-transparent bg-[color:var(--surface-button-brand)] !text-[color:var(--foreground-button-brand)] hover:brightness-[1.05]",
         soft:
           "border border-[color:var(--border)] bg-[color:var(--surface-button-soft)] text-foreground hover:border-[color:var(--border-button-soft-hover)] hover:bg-[color:var(--surface-button-soft-hover)]",
         outline:
-          "border bg-background shadow-xs hover:bg-[color:var(--surface-button-soft-hover)] hover:text-foreground dark:bg-input/30 dark:hover:bg-[color:var(--surface-button-soft-hover)]",
+          "border border-[color:var(--hairline-strong)] bg-[color:var(--elevate-1)] text-foreground hover:border-[color:var(--border-strong)] hover:bg-[color:var(--surface-hover)] hover:text-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-[color:var(--surface-button-soft-hover)] hover:text-foreground",
         link: "text-foreground underline-offset-4 transition-colors hover:text-primary hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        default: "h-9 px-3 py-2",
         xs: "h-6 gap-1 rounded-[var(--radius-control)] px-2 text-meta has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 gap-1.5 rounded-[var(--radius-control)] px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-[var(--radius-control)] px-6 has-[>svg]:px-4",

package/src/components/chart.tsx

@@ -259,7 +259,7 @@ function ChartTooltipContent({
                         </span>
                       </div>
                       {item.value && (
-                        <span className="font-mono font-semibold tabular-nums text-foreground">
+                        <span className="text-data font-semibold text-foreground">
                           {item.value.toLocaleString()}
                         </span>
                       )}

package/src/components/kpi-breakdown-bar.tsx

@@ -44,7 +44,7 @@ export function KpiBreakdownBar({ items, toneTokens, className }: KpiBreakdownBa
                   <span className="flex items-center gap-2">
                     <span className="size-2 rounded-[var(--radius-swatch)]" style={tokenStyle(token)} />
                     <span>{item.label}</span>
-                    <span className="font-bold tabular-nums">{item.value}</span>
+                    <span className="text-data font-bold">{item.value}</span>
                   </span>
                 </TooltipContent>
               </Tooltip>
@@ -61,7 +61,7 @@ export function KpiBreakdownBar({ items, toneTokens, className }: KpiBreakdownBa
                 <span className="size-1.5 shrink-0 rounded-[var(--radius-swatch)]" style={token ? tokenStyle(token) : undefined} />
                 <span className="truncate">{item.label}</span>
               </span>
-              <span className="font-mono font-bold tabular-nums text-foreground">{item.value}</span>
+              <span className="text-data font-bold text-foreground">{item.value}</span>
             </div>
           );
         })}

package/src/components/phone-input.tsx

@@ -171,7 +171,7 @@ export function PhoneInput({ value, onChange, defaultCountry = "pt", disabled =
                 )}
               >
                 <span className="text-body leading-none">{flagEmoji(candidate.iso2)}</span>
-                <span className="flex-1 truncate text-label normal-case tracking-normal text-foreground">{candidate.name}</span>
+                <span className="flex-1 truncate text-meta text-foreground">{candidate.name}</span>
                 <span className="shrink-0 text-micro text-foreground-muted-accessible">+{candidate.dialCode}</span>
               </button>
             ))}

package/src/components/stat-tile.tsx

@@ -20,9 +20,9 @@ export type StatValueProps = HTMLAttributes<HTMLParagraphElement> & {
 };
 
 const statValueSizeClasses: Record<NonNullable<StatValueProps["size"]>, string> = {
-  normal: "text-metric",
-  large: "text-metric-lg",
-  display: "text-metric-display",
+  normal: "text-kpi",
+  large: "text-kpi-lg",
+  display: "text-kpi",
 };
 
 export function StatValue({ size = "normal", className, ...props }: StatValueProps) {

package/src/components/table-pagination.tsx

@@ -17,6 +17,12 @@ export type TablePaginationProps = {
   pageLabel?: (page: number, totalPages: number) => string;
 };
 
+function dataNumerals(value: string) {
+  return value.split(/(\d+(?:[.,]\d+)*)/).map((part, index) =>
+    /^\d/.test(part) ? <span key={`${part}-${index}`} className="text-data">{part}</span> : part,
+  );
+}
+
 export function TablePagination({
   page,
   totalPages,
@@ -40,9 +46,9 @@ export function TablePagination({
     <div className={cn("flex min-w-0 flex-col gap-2 border-t border-[color:var(--border)] px-4 py-2 md:flex-row md:items-center md:justify-between", className)}>
       {summary ? (
         <p className="min-w-0 truncate text-meta text-muted-foreground leading-tight text-[color:var(--muted-foreground)]">
-          <span className="font-semibold text-[color:var(--foreground)]">{pageLabel(safePage, safeTotalPages)}</span>
+          <span className="font-semibold text-[color:var(--foreground)]">{dataNumerals(pageLabel(safePage, safeTotalPages))}</span>
           <span className="px-1.5 text-[color:var(--border)]">·</span>
-          {summary}
+          {dataNumerals(summary)}
         </p>
       ) : null}
       <Pagination className="mx-0 w-auto min-w-0 shrink-0 justify-start md:ml-auto md:justify-end">
@@ -73,7 +79,7 @@ export function TablePagination({
                   changePage(item);
                 }}
                 className={cn(
-                  "size-8 rounded-full text-label font-semibold",
+                  "size-8 rounded-full text-data-sm font-semibold",
                   item === safePage
                     ? "border-[color:var(--border-pagination-active)] bg-[color:var(--surface-pagination-active)] text-[color:var(--foreground)]"
                     : "text-[color:var(--muted-foreground)] hover:bg-[color:var(--muted)] hover:text-[color:var(--foreground)]",