@orangecheck/design 0.7.0 → 0.7.2

package/dist/primitives.mjs

@@ -1411,7 +1411,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__ */ 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__ */ jsxs(
     "span",
     {
@@ -1427,15 +1457,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__ */ jsx(
       StatusPill,
       {
-        tone: spec?.tone ?? "muted",
+        tone: spec?.tone ?? fallbackTone,
         label: spec?.label ?? status,
         icon: spec?.icon,
+        variant,
         className
       }
     );