@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3260.1.dc719cac84

package/dist/primitives/tag.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { cn } from "@open-mercato/shared/lib/utils";
 const tagVariants = cva(
-  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium",
+  "inline-flex items-center gap-1.5 border text-xs font-medium",
   {
     variants: {
       variant: {
@@ -13,9 +14,13 @@ const tagVariants = cva(
         info: "border-status-info-border bg-status-info-bg text-status-info-text",
         neutral: "border-status-neutral-border bg-status-neutral-bg text-status-neutral-text",
         brand: "border-brand-violet/30 bg-brand-violet/10 text-brand-violet"
+      },
+      shape: {
+        pill: "rounded-full px-2.5 py-0.5",
+        square: "rounded-md px-2 py-1"
       }
     },
-    defaultVariants: { variant: "default" }
+    defaultVariants: { variant: "default", shape: "pill" }
   }
 );
 const dotColorMap = {
@@ -27,17 +32,65 @@ const dotColorMap = {
   neutral: "bg-status-neutral-icon",
   brand: "bg-brand-violet"
 };
-function Tag({ className, variant = "default", dot = false, children, ...props }) {
-  return /* @__PURE__ */ jsxs("span", { className: cn(tagVariants({ variant }), className), ...props, children: [
-    dot && /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block size-1.5 rounded-full shrink-0", dotColorMap[variant]),
-        "aria-hidden": "true"
-      }
-    ),
-    children
-  ] });
+function Tag({
+  className,
+  variant = "default",
+  shape = "pill",
+  dot = false,
+  onRemove,
+  removeAriaLabel = "Remove",
+  disabled = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        tagVariants({ variant, shape }),
+        disabled && "opacity-60",
+        className
+      ),
+      "aria-disabled": disabled || void 0,
+      "data-slot": "tag",
+      "data-shape": shape,
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("inline-block size-1.5 rounded-full shrink-0", dotColorMap[variant]),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0", children }),
+        onRemove ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: (event) => {
+              event.stopPropagation();
+              onRemove();
+            },
+            className: cn(
+              "inline-flex shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring/40 disabled:pointer-events-none disabled:opacity-60",
+              shape === "pill" ? "size-3" : "size-4"
+            ),
+            "aria-label": removeAriaLabel,
+            "data-slot": "tag-remove",
+            children: /* @__PURE__ */ jsx(
+              X,
+              {
+                className: shape === "pill" ? "size-2.5" : "size-3.5",
+                "aria-hidden": "true"
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
 }
 export {
   Tag

package/dist/primitives/tag.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/primitives/tag.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst tagVariants = cva(\n  'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium',\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-background text-muted-foreground',\n        success: 'border-status-success-border bg-status-success-bg text-status-success-text',\n        warning: 'border-status-warning-border bg-status-warning-bg text-status-warning-text',\n        error:   'border-status-error-border bg-status-error-bg text-status-error-text',\n        info:    'border-status-info-border bg-status-info-bg text-status-info-text',\n        neutral: 'border-status-neutral-border bg-status-neutral-bg text-status-neutral-text',\n        brand:   'border-brand-violet/30 bg-brand-violet/10 text-brand-violet',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  }\n)\n\nconst dotColorMap: Record<TagVariant, string> = {\n  default: 'bg-muted-foreground',\n  success: 'bg-status-success-icon',\n  warning: 'bg-status-warning-icon',\n  error:   'bg-status-error-icon',\n  info:    'bg-status-info-icon',\n  neutral: 'bg-status-neutral-icon',\n  brand:   'bg-brand-violet',\n}\n\nexport type TagVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'brand'\n\nexport type TagProps = React.HTMLAttributes<HTMLSpanElement> & {\n  variant?: TagVariant\n  dot?: boolean\n}\n\nexport function Tag({ className, variant = 'default', dot = false, children, ...props }: TagProps) {\n  return (\n    <span className={cn(tagVariants({ variant }), className)} {...props}>\n      {dot && (\n        <span\n          className={cn('inline-block size-1.5 rounded-full shrink-0', dotColorMap[variant])}\n          aria-hidden=\"true\"\n        />\n      )}\n      {children}\n    </span>\n  )\n}\n\n/**\n * Helper type: modules define their own tag label \u2192 variant mapping.\n *\n * @example\n * const leadTagMap: TagMap<'customer' | 'hot' | 'inactive'> = {\n *   customer: 'success',\n *   hot: 'error',\n *   inactive: 'neutral',\n * }\n *\n * <Tag variant={leadTagMap[tag.type]} dot>{tag.label}</Tag>\n */\nexport type TagMap<T extends string = string> = Record<T, TagVariant>\n"],
-  "mappings": "AAyCI,SAEI,KAFJ;AAxCJ,SAAS,WAAW;AACpB,SAAS,UAAU;AAEnB,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAS;AAAA,QACT,MAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,UAAU;AAAA,EACxC;AACF;AAEA,MAAM,cAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAS;AAAA,EACT,MAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAS;AACX;AASO,SAAS,IAAI,EAAE,WAAW,UAAU,WAAW,MAAM,OAAO,UAAU,GAAG,MAAM,GAAa;AACjG,SACE,qBAAC,UAAK,WAAW,GAAG,YAAY,EAAE,QAAQ,CAAC,GAAG,SAAS,GAAI,GAAG,OAC3D;AAAA,WACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,+CAA+C,YAAY,OAAO,CAAC;AAAA,QACjF,eAAY;AAAA;AAAA,IACd;AAAA,IAED;AAAA,KACH;AAEJ;",
+  "sourcesContent": ["import * as React from 'react'\nimport { X } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@open-mercato/shared/lib/utils'\n\nconst tagVariants = cva(\n  'inline-flex items-center gap-1.5 border text-xs font-medium',\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-background text-muted-foreground',\n        success: 'border-status-success-border bg-status-success-bg text-status-success-text',\n        warning: 'border-status-warning-border bg-status-warning-bg text-status-warning-text',\n        error:   'border-status-error-border bg-status-error-bg text-status-error-text',\n        info:    'border-status-info-border bg-status-info-bg text-status-info-text',\n        neutral: 'border-status-neutral-border bg-status-neutral-bg text-status-neutral-text',\n        brand:   'border-brand-violet/30 bg-brand-violet/10 text-brand-violet',\n      },\n      shape: {\n        pill: 'rounded-full px-2.5 py-0.5',\n        square: 'rounded-md px-2 py-1',\n      },\n    },\n    defaultVariants: { variant: 'default', shape: 'pill' },\n  }\n)\n\nconst dotColorMap: Record<TagVariant, string> = {\n  default: 'bg-muted-foreground',\n  success: 'bg-status-success-icon',\n  warning: 'bg-status-warning-icon',\n  error:   'bg-status-error-icon',\n  info:    'bg-status-info-icon',\n  neutral: 'bg-status-neutral-icon',\n  brand:   'bg-brand-violet',\n}\n\nexport type TagVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'brand'\n\nexport type TagShape = 'pill' | 'square'\n\nexport type TagProps = React.HTMLAttributes<HTMLSpanElement> &\n  Pick<VariantProps<typeof tagVariants>, 'shape'> & {\n    variant?: TagVariant\n    dot?: boolean\n    /**\n     * Render an inline close (\"\u00D7\") button after the label. When provided, the button\n     * fires `onRemove` on click and stops propagation so a click on the chip body is\n     * not triggered. Matches Figma \"Dismiss Icon=On\" Tag variants.\n     */\n    onRemove?: () => void\n    /** Accessible label for the close button. Defaults to `Remove`. */\n    removeAriaLabel?: string\n    /** Visually mute the chip and disable its close button. */\n    disabled?: boolean\n  }\n\nexport function Tag({\n  className,\n  variant = 'default',\n  shape = 'pill',\n  dot = false,\n  onRemove,\n  removeAriaLabel = 'Remove',\n  disabled = false,\n  children,\n  ...props\n}: TagProps) {\n  return (\n    <span\n      className={cn(\n        tagVariants({ variant, shape }),\n        disabled && 'opacity-60',\n        className,\n      )}\n      aria-disabled={disabled || undefined}\n      data-slot=\"tag\"\n      data-shape={shape}\n      {...props}\n    >\n      {dot && (\n        <span\n          className={cn('inline-block size-1.5 rounded-full shrink-0', dotColorMap[variant])}\n          aria-hidden=\"true\"\n        />\n      )}\n      <span className=\"min-w-0\">{children}</span>\n      {onRemove ? (\n        <button\n          type=\"button\"\n          disabled={disabled}\n          onClick={(event) => {\n            event.stopPropagation()\n            onRemove()\n          }}\n          className={cn(\n            'inline-flex shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring/40 disabled:pointer-events-none disabled:opacity-60',\n            shape === 'pill' ? 'size-3' : 'size-4',\n          )}\n          aria-label={removeAriaLabel}\n          data-slot=\"tag-remove\"\n        >\n          <X\n            className={shape === 'pill' ? 'size-2.5' : 'size-3.5'}\n            aria-hidden=\"true\"\n          />\n        </button>\n      ) : null}\n    </span>\n  )\n}\n\n/**\n * Helper type: modules define their own tag label \u2192 variant mapping.\n *\n * @example\n * const leadTagMap: TagMap<'customer' | 'hot' | 'inactive'> = {\n *   customer: 'success',\n *   hot: 'error',\n *   inactive: 'neutral',\n * }\n *\n * <Tag variant={leadTagMap[tag.type]} dot>{tag.label}</Tag>\n */\nexport type TagMap<T extends string = string> = Record<T, TagVariant>\n"],
+  "mappings": "AAqEI,SAYI,KAZJ;AApEJ,SAAS,SAAS;AAClB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAEnB,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAS;AAAA,QACT,MAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAS;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,WAAW,OAAO,OAAO;AAAA,EACvD;AACF;AAEA,MAAM,cAA0C;AAAA,EAC9C,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAS;AAAA,EACT,MAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAS;AACX;AAsBO,SAAS,IAAI;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,MAAM;AAAA,EACN;AAAA,EACA,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAa;AACX,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,YAAY,EAAE,SAAS,MAAM,CAAC;AAAA,QAC9B,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MACA,iBAAe,YAAY;AAAA,MAC3B,aAAU;AAAA,MACV,cAAY;AAAA,MACX,GAAG;AAAA,MAEH;AAAA,eACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,+CAA+C,YAAY,OAAO,CAAC;AAAA,YACjF,eAAY;AAAA;AAAA,QACd;AAAA,QAEF,oBAAC,UAAK,WAAU,WAAW,UAAS;AAAA,QACnC,WACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL;AAAA,YACA,SAAS,CAAC,UAAU;AAClB,oBAAM,gBAAgB;AACtB,uBAAS;AAAA,YACX;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA,UAAU,SAAS,WAAW;AAAA,YAChC;AAAA,YACA,cAAY;AAAA,YACZ,aAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,UAAU,SAAS,aAAa;AAAA,gBAC3C,eAAY;AAAA;AAAA,YACd;AAAA;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }