@orangecheck/design 0.7.0 → 0.7.2

package/dist/primitives.d.mts

@@ -263,19 +263,24 @@ interface BarProps {
 declare function Bar({ pct, accent, label, right, className }: BarProps): react_jsx_runtime.JSX.Element;
 
 type StatusTone = 'success' | 'warning' | 'destructive' | 'muted' | 'primary' | 'info';
+type StatusPillVariant = 'plain' | 'bordered';
 interface StatusPillProps {
     label: string;
     tone?: StatusTone;
+    variant?: StatusPillVariant;
     icon?: ReactNode;
     className?: string;
 }
-declare function StatusPill({ label, tone, icon, className }: StatusPillProps): react_jsx_runtime.JSX.Element;
+declare function StatusPill({ label, tone, variant, icon, className, }: StatusPillProps): react_jsx_runtime.JSX.Element;
 interface StatusPillSpec {
     tone: StatusTone;
     label?: string;
     icon?: ReactNode;
 }
-declare function makeStatusPill<S extends string>(map: Record<S, StatusPillSpec>): (props: {
+declare function makeStatusPill<S extends string>(map: Record<S, StatusPillSpec>, options?: {
+    variant?: StatusPillVariant;
+    fallbackTone?: StatusTone;
+}): (props: {
     status: S;
     className?: string;
 }) => ReactNode;
@@ -323,4 +328,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 StatusTone, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, 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, 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, Working, WorkingPanel, type WorkingProps, badgeVariants, buttonVariants, confirm, makeStatusPill, prompt };

package/dist/primitives.d.ts

@@ -263,19 +263,24 @@ interface BarProps {
 declare function Bar({ pct, accent, label, right, className }: BarProps): react_jsx_runtime.JSX.Element;
 
 type StatusTone = 'success' | 'warning' | 'destructive' | 'muted' | 'primary' | 'info';
+type StatusPillVariant = 'plain' | 'bordered';
 interface StatusPillProps {
     label: string;
     tone?: StatusTone;
+    variant?: StatusPillVariant;
     icon?: ReactNode;
     className?: string;
 }
-declare function StatusPill({ label, tone, icon, className }: StatusPillProps): react_jsx_runtime.JSX.Element;
+declare function StatusPill({ label, tone, variant, icon, className, }: StatusPillProps): react_jsx_runtime.JSX.Element;
 interface StatusPillSpec {
     tone: StatusTone;
     label?: string;
     icon?: ReactNode;
 }
-declare function makeStatusPill<S extends string>(map: Record<S, StatusPillSpec>): (props: {
+declare function makeStatusPill<S extends string>(map: Record<S, StatusPillSpec>, options?: {
+    variant?: StatusPillVariant;
+    fallbackTone?: StatusTone;
+}): (props: {
     status: S;
     className?: string;
 }) => ReactNode;
@@ -323,4 +328,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 StatusTone, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeToggle, ThemeToggleLink, Toaster, 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, 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, Working, WorkingPanel, type WorkingProps, badgeVariants, buttonVariants, confirm, makeStatusPill, prompt };

package/dist/primitives.js

@@ -1445,7 +1445,37 @@ var TONE = {
   primary: "text-primary",
   info: "text-info"
 };
-function StatusPill({ label, tone = "muted", icon, className }) {
+var BORDER_TONE = {
+  success: "border-success/40 text-success",
+  warning: "border-warning/40 text-warning",
+  destructive: "border-destructive/40 text-destructive",
+  muted: "border-muted-foreground/40 text-muted-foreground",
+  primary: "border-primary/40 text-primary",
+  info: "border-info/40 text-info"
+};
+function StatusPill({
+  label,
+  tone = "muted",
+  variant = "plain",
+  icon,
+  className
+}) {
+  if (variant === "bordered") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        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],
+          className
+        ),
+        children: [
+          icon,
+          label
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
@@ -1461,15 +1491,18 @@ function StatusPill({ label, tone = "muted", icon, className }) {
     }
   );
 }
-function makeStatusPill(map) {
+function makeStatusPill(map, options) {
+  const variant = options?.variant ?? "plain";
+  const fallbackTone = options?.fallbackTone ?? "muted";
   function DomainStatusPill({ status, className }) {
     const spec = map[status];
     return /* @__PURE__ */ jsxRuntime.jsx(
       StatusPill,
       {
-        tone: spec?.tone ?? "muted",
+        tone: spec?.tone ?? fallbackTone,
         label: spec?.label ?? status,
         icon: spec?.icon,
+        variant,
         className
       }
     );