@orangecheck/design 0.6.1 → 0.7.1

package/dist/primitives.d.mts

@@ -14,6 +14,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { ToasterProps } from 'sonner';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
@@ -98,6 +99,9 @@ declare function WorkingPanel({ text, progress }: Pick<WorkingProps, 'text' | 'p
 interface Props {
     children: React.ReactNode;
     fallback?: (error: Error, reset: () => void) => React.ReactNode;
+    title?: string;
+    message?: string;
+    onError?: (error: Error, info: React.ErrorInfo) => void;
 }
 interface State {
     error: Error | null;
@@ -259,13 +263,32 @@ 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>, options?: {
+    variant?: StatusPillVariant;
+    fallbackTone?: StatusTone;
+}): (props: {
+    status: S;
+    className?: string;
+}) => ReactNode;
+
+declare function Tabs({ ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): react_jsx_runtime.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): react_jsx_runtime.JSX.Element;
 
 interface SatsAmountProps {
     sats: number;
@@ -305,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 StatusTone, Switch, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, type WorkingProps, badgeVariants, buttonVariants, confirm, 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

@@ -14,6 +14,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { ToasterProps } from 'sonner';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
@@ -98,6 +99,9 @@ declare function WorkingPanel({ text, progress }: Pick<WorkingProps, 'text' | 'p
 interface Props {
     children: React.ReactNode;
     fallback?: (error: Error, reset: () => void) => React.ReactNode;
+    title?: string;
+    message?: string;
+    onError?: (error: Error, info: React.ErrorInfo) => void;
 }
 interface State {
     error: Error | null;
@@ -259,13 +263,32 @@ 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>, options?: {
+    variant?: StatusPillVariant;
+    fallbackTone?: StatusTone;
+}): (props: {
+    status: S;
+    className?: string;
+}) => ReactNode;
+
+declare function Tabs({ ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): react_jsx_runtime.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): react_jsx_runtime.JSX.Element;
 
 interface SatsAmountProps {
     sats: number;
@@ -305,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 StatusTone, Switch, Textarea, ThemeToggle, ThemeToggleLink, Toaster, Working, WorkingPanel, type WorkingProps, badgeVariants, buttonVariants, confirm, 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

@@ -18,6 +18,7 @@ var PopoverPrimitive = require('@radix-ui/react-popover');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var SelectPrimitive = require('@radix-ui/react-select');
 var sonner = require('sonner');
+var TabsPrimitive = require('@radix-ui/react-tabs');
 var QRCode = require('qrcode');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -50,6 +51,7 @@ var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
+var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
 
 // src/primitives/button.tsx
@@ -486,6 +488,7 @@ var ErrorBoundary = class extends React2__namespace.Component {
   }
   componentDidCatch(error, info) {
     console.error("[ErrorBoundary]", error, info);
+    this.props.onError?.(error, info);
   }
   render() {
     if (this.state.error) {
@@ -493,7 +496,7 @@ var ErrorBoundary = class extends React2__namespace.Component {
         return this.props.fallback(this.state.error, this.reset);
       }
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container py-16", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "terminal", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "terminal-title", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive flex items-center gap-1.5", children: "! fatal" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "terminal-title", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive flex items-center gap-1.5", children: this.props.title ?? "! fatal" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 p-5 font-mono text-xs leading-relaxed", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-destructive", children: [
@@ -505,7 +508,7 @@ var ErrorBoundary = class extends React2__namespace.Component {
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground", children: [
             "> ",
-            "this page crashed. reload to recover."
+            this.props.message ?? "this page crashed. reload to recover."
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -1442,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",
     {
@@ -1458,6 +1491,60 @@ function StatusPill({ label, tone = "muted", icon, className }) {
     }
   );
 }
+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 ?? fallbackTone,
+        label: spec?.label ?? status,
+        icon: spec?.icon,
+        variant,
+        className
+      }
+    );
+  }
+  return DomainStatusPill;
+}
+function Tabs({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { "data-slot": "tabs", ...props });
+}
+function TabsList({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.List,
+    {
+      "data-slot": "tabs-list",
+      className: cn("border-border -mb-px flex items-center gap-6 border-b", className),
+      ...props
+    }
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "text-muted-foreground hover:text-foreground data-[state=active]:text-primary data-[state=active]:border-primary -mb-px border-b-2 border-transparent py-2 font-mono text-[11px] tracking-widest uppercase transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("mt-4 outline-none", className),
+      ...props
+    }
+  );
+}
 
 // src/format/index.ts
 var REFERENCE_BTC_USD = 95e3;
@@ -1662,6 +1749,10 @@ exports.Sparkline = Sparkline;
 exports.StatBlock = StatBlock;
 exports.StatusPill = StatusPill;
 exports.Switch = Switch;
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;
 exports.Textarea = Textarea;
 exports.ThemeToggle = ThemeToggle;
 exports.ThemeToggleLink = ThemeToggleLink;
@@ -1671,6 +1762,7 @@ exports.WorkingPanel = WorkingPanel;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
 exports.confirm = confirm;
+exports.makeStatusPill = makeStatusPill;
 exports.prompt = prompt;
 //# sourceMappingURL=primitives.js.map
 //# sourceMappingURL=primitives.js.map