@orangecheck/design 0.19.0 → 0.20.0

package/dist/primitives.mjs

@@ -5,7 +5,7 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { ChevronDown, CheckIcon, CircleIcon, Sun, Moon, X, XIcon, AlertTriangle, Pencil, ChevronLeft, ChevronRight, ChevronDownIcon, ChevronUpIcon, Maximize2, Check, Copy } from 'lucide-react';
+import { ChevronDown, Plus, CheckIcon, CircleIcon, Sun, Moon, X, XIcon, AlertTriangle, Pencil, ChevronLeft, ChevronRight, ChevronDownIcon, ChevronUpIcon, Maximize2, Check, Copy } from 'lucide-react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import { useTheme } from 'next-themes';
@@ -34,7 +34,14 @@ var buttonVariants = 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",
@@ -77,7 +84,8 @@ var badgeVariants = 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"
       }
     },
@@ -102,7 +110,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
@@ -132,7 +140,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,
@@ -173,7 +181,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,
@@ -198,7 +206,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,
@@ -356,7 +364,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
@@ -1188,18 +1196,19 @@ function Tooltip({
 var Accordion = AccordionPrimitive.Root;
 var AccordionItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ref, className: cn("border-b", className), ...props }));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+var AccordionTrigger = React2.forwardRef(({ className, children, icon = "chevron", ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
   AccordionPrimitive.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__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
+      icon === "chevron" ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 transition-transform duration-200" }) : /* @__PURE__ */ jsx(Plus, { className: "text-primary h-5 w-5 shrink-0 transition-transform duration-200" })
     ]
   }
 ) }));
@@ -1392,6 +1401,105 @@ var Toaster = ({ ...props }) => {
     }
   );
 };
+var surfaceVariants = 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__ */ jsx(
+    "div",
+    {
+      "data-slot": "surface",
+      className: cn(surfaceVariants({ tone, elevation, bordered, pad }), className),
+      ...props
+    }
+  );
+}
+var iconBadgeVariants = 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__ */ jsx(
+    "span",
+    {
+      "data-slot": "icon-badge",
+      className: cn(iconBadgeVariants({ tone, size }), className),
+      ...props,
+      children
+    }
+  );
+}
 function Card({
   id,
   title,
@@ -1504,7 +1612,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__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
-    /* @__PURE__ */ jsx("span", { className: "label-mono text-[10px]", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "label-mono text-muted-foreground text-[10px]", children: label }),
     /* @__PURE__ */ jsx(
       "span",
       {
@@ -1808,6 +1916,6 @@ function QrCode({ value, size = 200, label, className }) {
   );
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, Badge, Bar, BitcoinAddress, Button, Card, Checkbox, ConfirmHost, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, Input, Label, Modal, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, RadioGroup, RadioGroupItem, SatsAmount, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Sparkline, StatBlock, StatusPill, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, Working, WorkingPanel, badgeVariants, buttonVariants, confirm, makeStatusPill, prompt };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AlertWithAction, AlertWithCountdown, Badge, Bar, BitcoinAddress, Button, Card, Checkbox, ConfirmHost, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ErrorBoundary, IconBadge, Input, Label, Modal, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PromptHost, QrCode, RadioGroup, RadioGroupItem, SatsAmount, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Sparkline, StatBlock, StatusPill, Surface, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Tooltip, Working, WorkingPanel, badgeVariants, buttonVariants, confirm, iconBadgeVariants, makeStatusPill, prompt, surfaceVariants };
 //# sourceMappingURL=primitives.mjs.map
 //# sourceMappingURL=primitives.mjs.map