@orangecheck/design 0.18.0 → 0.20.0

package/dist/primitives.d.mts

@@ -17,7 +17,7 @@ import { ToasterProps } from 'sonner';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | "onBrand" | "onBrandOutline" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
@@ -25,7 +25,7 @@ declare function Button({ className, variant, size, asChild, ...props }: React.C
 }): react_jsx_runtime.JSX.Element;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "warning" | "success" | "info" | "brand" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "warning" | "success" | "info" | "brand" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
@@ -216,7 +216,9 @@ declare function Tooltip({ content, children, side, align, sideOffset, collision
 
 declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    icon?: "chevron" | "plusMinus";
+} & React.RefAttributes<HTMLButtonElement>>;
 declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): react_jsx_runtime.JSX.Element;
@@ -234,6 +236,24 @@ declare function SelectScrollDownButton({ className, ...props }: React.Component
 
 declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
 
+declare const surfaceVariants: (props?: ({
+    tone?: "default" | "outline" | "onBrand" | "brand" | "muted" | "contrast" | null | undefined;
+    elevation?: "none" | "sm" | "lg" | "md" | "xl" | null | undefined;
+    bordered?: boolean | null | undefined;
+    pad?: "none" | "sm" | "lg" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SurfaceProps extends Omit<React.ComponentProps<'div'>, 'color'>, VariantProps<typeof surfaceVariants> {
+}
+declare function Surface({ className, tone, elevation, bordered, pad, ...props }: SurfaceProps): react_jsx_runtime.JSX.Element;
+
+declare const iconBadgeVariants: (props?: ({
+    tone?: "dark" | "onBrand" | "brand" | "muted" | "surface" | "peach" | null | undefined;
+    size?: "sm" | "lg" | "md" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IconBadgeProps extends Omit<React.ComponentProps<'span'>, 'color'>, VariantProps<typeof iconBadgeVariants> {
+}
+declare function IconBadge({ className, tone, size, children, ...props }: IconBadgeProps): react_jsx_runtime.JSX.Element;
+
 interface CardProps {
     id?: string;
     title: string;
@@ -346,4 +366,4 @@ interface QrCodeProps {
 }
 declare function QrCode({ value, size, label, className }: QrCodeProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, type AlertWithActionProps, AlertWithCountdown, type AlertWithCountdownProps, Badge, Bar, type BarProps, BitcoinAddress, type BitcoinAddressProps, Button, Card, type CardProps, Checkbox, ConfirmHost, type ConfirmOptions, CopyButton, type CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, type ModalProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, type PromptOptions, QrCode, type QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, type SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Sparkline, type SparklineProps, StatBlock, type StatBlockProps, StatusPill, type StatusPillProps, type StatusPillSpec, type StatusPillVariant, type StatusTone, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, type TooltipProps, Working, WorkingPanel, type WorkingProps, badgeVariants, buttonVariants, confirm, makeStatusPill, prompt };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, type AlertWithActionProps, AlertWithCountdown, type AlertWithCountdownProps, Badge, Bar, type BarProps, BitcoinAddress, type BitcoinAddressProps, Button, Card, type CardProps, Checkbox, ConfirmHost, type ConfirmOptions, CopyButton, type CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, IconBadge, type IconBadgeProps, Input, Label, Modal, type ModalProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, type PromptOptions, QrCode, type QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, type SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Sparkline, type SparklineProps, StatBlock, type StatBlockProps, StatusPill, type StatusPillProps, type StatusPillSpec, type StatusPillVariant, type StatusTone, Surface, type SurfaceProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, type TooltipProps, Working, WorkingPanel, type WorkingProps, badgeVariants, buttonVariants, confirm, iconBadgeVariants, makeStatusPill, prompt, surfaceVariants };

package/dist/primitives.d.ts

@@ -17,7 +17,7 @@ import { ToasterProps } from 'sonner';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | "onBrand" | "onBrandOutline" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
@@ -25,7 +25,7 @@ declare function Button({ className, variant, size, asChild, ...props }: React.C
 }): react_jsx_runtime.JSX.Element;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "warning" | "success" | "info" | "brand" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "warning" | "success" | "info" | "brand" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
@@ -216,7 +216,9 @@ declare function Tooltip({ content, children, side, align, sideOffset, collision
 
 declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    icon?: "chevron" | "plusMinus";
+} & React.RefAttributes<HTMLButtonElement>>;
 declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
 declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): react_jsx_runtime.JSX.Element;
@@ -234,6 +236,24 @@ declare function SelectScrollDownButton({ className, ...props }: React.Component
 
 declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Element;
 
+declare const surfaceVariants: (props?: ({
+    tone?: "default" | "outline" | "onBrand" | "brand" | "muted" | "contrast" | null | undefined;
+    elevation?: "none" | "sm" | "lg" | "md" | "xl" | null | undefined;
+    bordered?: boolean | null | undefined;
+    pad?: "none" | "sm" | "lg" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SurfaceProps extends Omit<React.ComponentProps<'div'>, 'color'>, VariantProps<typeof surfaceVariants> {
+}
+declare function Surface({ className, tone, elevation, bordered, pad, ...props }: SurfaceProps): react_jsx_runtime.JSX.Element;
+
+declare const iconBadgeVariants: (props?: ({
+    tone?: "dark" | "onBrand" | "brand" | "muted" | "surface" | "peach" | null | undefined;
+    size?: "sm" | "lg" | "md" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IconBadgeProps extends Omit<React.ComponentProps<'span'>, 'color'>, VariantProps<typeof iconBadgeVariants> {
+}
+declare function IconBadge({ className, tone, size, children, ...props }: IconBadgeProps): react_jsx_runtime.JSX.Element;
+
 interface CardProps {
     id?: string;
     title: string;
@@ -346,4 +366,4 @@ interface QrCodeProps {
 }
 declare function QrCode({ value, size, label, className }: QrCodeProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, type AlertWithActionProps, AlertWithCountdown, type AlertWithCountdownProps, Badge, Bar, type BarProps, BitcoinAddress, type BitcoinAddressProps, Button, Card, type CardProps, Checkbox, ConfirmHost, type ConfirmOptions, CopyButton, type CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, type ModalProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, type PromptOptions, QrCode, type QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, type SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Sparkline, type SparklineProps, StatBlock, type StatBlockProps, StatusPill, type StatusPillProps, type StatusPillSpec, type StatusPillVariant, type StatusTone, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, type TooltipProps, Working, WorkingPanel, type WorkingProps, badgeVariants, buttonVariants, confirm, makeStatusPill, prompt };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, type AlertWithActionProps, AlertWithCountdown, type AlertWithCountdownProps, Badge, Bar, type BarProps, BitcoinAddress, type BitcoinAddressProps, Button, Card, type CardProps, Checkbox, ConfirmHost, type ConfirmOptions, CopyButton, type CopyButtonProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, IconBadge, type IconBadgeProps, Input, Label, Modal, type ModalProps, Pagination, type PaginationProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, type PromptOptions, QrCode, type QrCodeProps, RadioGroup, RadioGroupItem, SatsAmount, type SatsAmountProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Sparkline, type SparklineProps, StatBlock, type StatBlockProps, StatusPill, type StatusPillProps, type StatusPillSpec, type StatusPillVariant, type StatusTone, Surface, type SurfaceProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, type TooltipProps, Working, WorkingPanel, type WorkingProps, badgeVariants, buttonVariants, confirm, iconBadgeVariants, makeStatusPill, prompt, surfaceVariants };

package/dist/primitives.js

@@ -68,7 +68,14 @@ var buttonVariants = classVarianceAuthority.cva(
         outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        link: "text-primary underline-offset-4 hover:underline",
+        // For CTAs placed ON a saturated brand band or a dark section
+        // (e.g. a terracotta hero / footer / a forced-dark block) where
+        // the surface is dark+light-text in either mode. A neutral white
+        // pill + a translucent-white ghost read on any such surface;
+        // hardcoded white is deliberate (cf. destructive's text-white).
+        onBrand: "bg-white text-neutral-900 shadow-sm hover:bg-white/90",
+        onBrandOutline: "border border-white/40 bg-transparent text-white hover:bg-white/10"
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -111,7 +118,8 @@ var badgeVariants = classVarianceAuthority.cva(
         warning: "bg-warning text-warning-foreground [a&]:hover:bg-warning/90 border-transparent",
         success: "bg-success text-success-foreground [a&]:hover:bg-success/90 border-transparent",
         info: "bg-info text-info-foreground [a&]:hover:bg-info/90 border-transparent",
-        brand: "bg-brand-soft text-brand border-brand-soft",
+        brand: "bg-brand-soft text-accent-foreground border-transparent",
+        neutral: "bg-foreground text-background [a&]:hover:bg-foreground/90 border-transparent",
         outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
       }
     },
@@ -136,7 +144,7 @@ function Input({ className, type, ...props }) {
       className: cn(
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input bg-input/30 hover:bg-input/50 dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow,background-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       ),
       ...props
@@ -166,7 +174,7 @@ function Checkbox({ className, ...props }) {
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground",
-        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
+        "aria-invalid:ring-2 aria-invalid:ring-destructive/50 aria-invalid:border-destructive",
         className
       ),
       ...props,
@@ -207,7 +215,7 @@ function RadioGroupItem({
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "disabled:cursor-not-allowed disabled:opacity-50",
         "data-[state=checked]:border-primary",
-        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
+        "aria-invalid:ring-2 aria-invalid:ring-destructive/50 aria-invalid:border-destructive",
         className
       ),
       ...props,
@@ -232,7 +240,7 @@ function Switch({ className, ...props }) {
         "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "disabled:cursor-not-allowed disabled:opacity-50",
-        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className
       ),
       ...props,
@@ -390,7 +398,7 @@ function Textarea({ className, ...props }) {
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         // aria-invalid parity with Input — error styling when a consumer
         // marks the field invalid.
-        "aria-invalid:ring-brand/25 dark:aria-invalid:ring-brand/35 aria-invalid:border-brand",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       ),
       ...props
@@ -1222,18 +1230,19 @@ function Tooltip({
 var Accordion = AccordionPrimitive__namespace.Root;
 var AccordionItem = React2__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Item, { ref, className: cn("border-b", className), ...props }));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React2__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+var AccordionTrigger = React2__namespace.forwardRef(({ className, children, icon = "chevron", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
   AccordionPrimitive__namespace.Trigger,
   {
     ref,
     className: cn(
-      "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+      "flex flex-1 items-center justify-between gap-4 py-4 text-left font-medium transition-all hover:underline",
+      icon === "chevron" ? "[&[data-state=open]>svg]:rotate-180" : "[&[data-state=open]>svg]:rotate-45",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
+      icon === "chevron" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "text-primary h-5 w-5 shrink-0 transition-transform duration-200" })
     ]
   }
 ) }));
@@ -1426,6 +1435,105 @@ var Toaster = ({ ...props }) => {
     }
   );
 };
+var surfaceVariants = classVarianceAuthority.cva("rounded-xl transition-colors", {
+  variants: {
+    tone: {
+      /* Crisp panel floating on the page — the default soft card. */
+      default: "bg-card text-card-foreground",
+      /* Warm-gray recessed panel. */
+      muted: "bg-muted text-foreground",
+      /* Solid brand fill — small terracotta panel; inverts child text. */
+      brand: "bg-brand text-brand-foreground",
+      /* High-contrast neutral panel (near-black in light, near-white in dark). */
+      contrast: "bg-foreground text-background",
+      /* Translucent lightened tile for cards sitting ON a brand band. */
+      onBrand: "text-brand-foreground [background:color-mix(in_oklch,white_16%,var(--brand))] [border-color:color-mix(in_oklch,white_24%,transparent)]",
+      /* Frame only, transparent fill. */
+      outline: "bg-transparent text-foreground"
+    },
+    elevation: {
+      none: "shadow-none",
+      sm: "shadow-sm",
+      md: "shadow-md",
+      lg: "shadow-lg",
+      xl: "shadow-xl"
+    },
+    bordered: {
+      true: "border",
+      false: ""
+    },
+    pad: {
+      none: "p-0",
+      sm: "p-4",
+      md: "p-5 sm:p-6",
+      lg: "p-6 sm:p-8"
+    }
+  },
+  defaultVariants: {
+    tone: "default",
+    elevation: "sm",
+    bordered: true,
+    pad: "md"
+  }
+});
+function Surface({
+  className,
+  tone,
+  elevation,
+  bordered,
+  pad,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "surface",
+      className: cn(surfaceVariants({ tone, elevation, bordered, pad }), className),
+      ...props
+    }
+  );
+}
+var iconBadgeVariants = classVarianceAuthority.cva(
+  "inline-flex shrink-0 items-center justify-center rounded-md font-semibold [&_svg]:pointer-events-none",
+  {
+    variants: {
+      tone: {
+        /* The signature peach tile — soft accent fill, terracotta glyph.
+           Auto-swaps to warm-dark + light-peach in dark mode via tokens. */
+        peach: "bg-accent text-accent-foreground",
+        /* Inverted near-black tile, light glyph ("never do" promises). */
+        dark: "bg-foreground text-background",
+        /* Solid brand tile. */
+        brand: "bg-primary text-primary-foreground",
+        /* White tile on a brand band, terracotta glyph (numbered steps). */
+        onBrand: "bg-brand-foreground text-primary",
+        /* Quiet neutral tile. */
+        muted: "bg-muted text-foreground",
+        /* Crisp white (card-colored) tile with a terracotta glyph and a
+           soft lift — the elevated icon chip on muted/colored cards. */
+        surface: "bg-card text-primary shadow-sm"
+      },
+      size: {
+        sm: "size-9 text-xs [&_svg]:size-4",
+        md: "size-11 text-sm [&_svg]:size-5",
+        lg: "size-12 text-base [&_svg]:size-6",
+        xl: "size-14 text-lg [&_svg]:size-7"
+      }
+    },
+    defaultVariants: { tone: "peach", size: "md" }
+  }
+);
+function IconBadge({ className, tone, size, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "icon-badge",
+      className: cn(iconBadgeVariants({ tone, size }), className),
+      ...props,
+      children
+    }
+  );
+}
 function Card({
   id,
   title,
@@ -1538,7 +1646,7 @@ function Sparkline({ data, width = 96, height = 24, area = false, className }) {
 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: "label-mono text-muted-foreground text-[10px]", children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -1870,6 +1978,7 @@ exports.DialogPortal = DialogPortal;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.ErrorBoundary = ErrorBoundary;
+exports.IconBadge = IconBadge;
 exports.Input = Input;
 exports.Label = Label;
 exports.Modal = Modal;
@@ -1908,6 +2017,7 @@ exports.Skeleton = Skeleton;
 exports.Sparkline = Sparkline;
 exports.StatBlock = StatBlock;
 exports.StatusPill = StatusPill;
+exports.Surface = Surface;
 exports.Switch = Switch;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
@@ -1923,7 +2033,9 @@ exports.WorkingPanel = WorkingPanel;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
 exports.confirm = confirm;
+exports.iconBadgeVariants = iconBadgeVariants;
 exports.makeStatusPill = makeStatusPill;
 exports.prompt = prompt;
+exports.surfaceVariants = surfaceVariants;
 //# sourceMappingURL=primitives.js.map
 //# sourceMappingURL=primitives.js.map