@orangecheck/design 0.7.2 → 0.7.4

package/dist/primitives.d.mts

@@ -268,10 +268,11 @@ interface StatusPillProps {
     label: string;
     tone?: StatusTone;
     variant?: StatusPillVariant;
+    filled?: boolean;
     icon?: ReactNode;
     className?: string;
 }
-declare function StatusPill({ label, tone, variant, icon, className, }: StatusPillProps): react_jsx_runtime.JSX.Element;
+declare function StatusPill({ label, tone, variant, filled, icon, className, }: StatusPillProps): react_jsx_runtime.JSX.Element;
 interface StatusPillSpec {
     tone: StatusTone;
     label?: string;
@@ -279,6 +280,7 @@ interface StatusPillSpec {
 }
 declare function makeStatusPill<S extends string>(map: Record<S, StatusPillSpec>, options?: {
     variant?: StatusPillVariant;
+    filled?: boolean;
     fallbackTone?: StatusTone;
 }): (props: {
     status: S;

package/dist/primitives.d.ts

@@ -268,10 +268,11 @@ interface StatusPillProps {
     label: string;
     tone?: StatusTone;
     variant?: StatusPillVariant;
+    filled?: boolean;
     icon?: ReactNode;
     className?: string;
 }
-declare function StatusPill({ label, tone, variant, icon, className, }: StatusPillProps): react_jsx_runtime.JSX.Element;
+declare function StatusPill({ label, tone, variant, filled, icon, className, }: StatusPillProps): react_jsx_runtime.JSX.Element;
 interface StatusPillSpec {
     tone: StatusTone;
     label?: string;
@@ -279,6 +280,7 @@ interface StatusPillSpec {
 }
 declare function makeStatusPill<S extends string>(map: Record<S, StatusPillSpec>, options?: {
     variant?: StatusPillVariant;
+    filled?: boolean;
     fallbackTone?: StatusTone;
 }): (props: {
     status: S;

package/dist/primitives.js

@@ -1400,7 +1400,16 @@ function StatBlock({ label, value, sub, delta, tone = "default", className }) {
   const toneClass = tone === "success" ? "text-success" : tone === "warning" ? "text-warning" : tone === "destructive" ? "text-destructive" : "text-foreground";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "label-mono text-[10px]", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-display text-2xl leading-none", toneClass), children: value }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: cn(
+          "font-display text-2xl font-bold tracking-tight tabular-nums",
+          toneClass
+        ),
+        children: value
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
       sub && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-mono text-[11px] tracking-wide lowercase", children: sub }),
       delta && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1453,10 +1462,19 @@ var BORDER_TONE = {
   primary: "border-primary/40 text-primary",
   info: "border-info/40 text-info"
 };
+var FILL_TONE = {
+  success: "bg-success/10",
+  warning: "bg-warning/10",
+  destructive: "bg-destructive/10",
+  muted: "bg-muted/30",
+  primary: "bg-primary/10",
+  info: "bg-info/10"
+};
 function StatusPill({
   label,
   tone = "muted",
   variant = "plain",
+  filled = false,
   icon,
   className
 }) {
@@ -1467,6 +1485,7 @@ function StatusPill({
         className: cn(
           "inline-flex items-center gap-1.5 border px-1.5 py-0.5 font-mono text-[9px] tracking-widest uppercase",
           BORDER_TONE[tone],
+          filled && FILL_TONE[tone],
           className
         ),
         children: [
@@ -1493,6 +1512,7 @@ function StatusPill({
 }
 function makeStatusPill(map, options) {
   const variant = options?.variant ?? "plain";
+  const filled = options?.filled ?? false;
   const fallbackTone = options?.fallbackTone ?? "muted";
   function DomainStatusPill({ status, className }) {
     const spec = map[status];
@@ -1502,6 +1522,7 @@ function makeStatusPill(map, options) {
         tone: spec?.tone ?? fallbackTone,
         label: spec?.label ?? status,
         icon: spec?.icon,
+        filled,
         variant,
         className
       }