@open-mercato/ui 0.5.1-develop.2856.35de414092 → 0.5.1-develop.2874.77704bccbd

package/src/primitives/tag.tsx

@@ -0,0 +1,66 @@
+import * as React from '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',
+  {
+    variants: {
+      variant: {
+        default: 'border-border bg-background text-muted-foreground',
+        success: 'border-status-success-border bg-status-success-bg text-status-success-text',
+        warning: 'border-status-warning-border bg-status-warning-bg text-status-warning-text',
+        error:   'border-status-error-border bg-status-error-bg text-status-error-text',
+        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',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  }
+)
+
+const dotColorMap: Record<TagVariant, string> = {
+  default: 'bg-muted-foreground',
+  success: 'bg-status-success-icon',
+  warning: 'bg-status-warning-icon',
+  error:   'bg-status-error-icon',
+  info:    'bg-status-info-icon',
+  neutral: 'bg-status-neutral-icon',
+  brand:   'bg-brand-violet',
+}
+
+export type TagVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'brand'
+
+export type TagProps = React.HTMLAttributes<HTMLSpanElement> & {
+  variant?: TagVariant
+  dot?: boolean
+}
+
+export function Tag({ className, variant = 'default', dot = false, children, ...props }: TagProps) {
+  return (
+    <span className={cn(tagVariants({ variant }), className)} {...props}>
+      {dot && (
+        <span
+          className={cn('inline-block size-1.5 rounded-full shrink-0', dotColorMap[variant])}
+          aria-hidden="true"
+        />
+      )}
+      {children}
+    </span>
+  )
+}
+
+/**
+ * Helper type: modules define their own tag label → variant mapping.
+ *
+ * @example
+ * const leadTagMap: TagMap<'customer' | 'hot' | 'inactive'> = {
+ *   customer: 'success',
+ *   hot: 'error',
+ *   inactive: 'neutral',
+ * }
+ *
+ * <Tag variant={leadTagMap[tag.type]} dot>{tag.label}</Tag>
+ */
+export type TagMap<T extends string = string> = Record<T, TagVariant>

package/src/primitives/tooltip.tsx

@@ -19,7 +19,7 @@ export const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 overflow-hidden rounded-md bg-slate-900 px-3 py-1.5 text-xs text-slate-50 animate-in fade-in-0 zoom-in-95',
+        'z-tooltip overflow-hidden rounded-md bg-slate-900 px-3 py-1.5 text-xs text-slate-50 animate-in fade-in-0 zoom-in-95',
         'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
         'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
         'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',