@open-mercato/ui 0.6.1-develop.3246.1.dbef9d7392 → 0.6.1-develop.3260.1.dc719cac84

package/src/primitives/select.tsx

@@ -11,6 +11,7 @@ const selectTriggerVariants = cva(
   {
     variants: {
       size: {
+        xs: 'h-7 px-2 text-xs',
         sm: 'h-8 px-2.5 text-xs',
         default: 'h-9 px-3 text-sm',
         lg: 'h-10 px-3 text-sm',

package/src/primitives/skeleton.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type SkeletonShape = 'rect' | 'circle' | 'text'
+
+export type SkeletonProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'aria-busy'> & {
+  /**
+   * Visual shape of the placeholder.
+   * - `'rect'` (default): rectangular block with `rounded-md`. Sized via `className`.
+   * - `'circle'`: round placeholder for avatars / icons. Sized via `className` (typically `size-8`, `size-10`, `size-12`).
+   * - `'text'`: multi-line text placeholder. Use `lines` to set how many lines.
+   */
+  shape?: SkeletonShape
+  /**
+   * Number of lines to render when `shape='text'`. Default `1`.
+   * The last line is rendered narrower (`w-3/4`) to mimic natural text wrap.
+   */
+  lines?: number
+}
+
+const baseLine = 'animate-pulse rounded-md bg-muted'
+
+export function Skeleton({
+  shape = 'rect',
+  lines = 1,
+  className,
+  ...rest
+}: SkeletonProps) {
+  if (shape === 'text') {
+    const count = Math.max(1, lines)
+    return (
+      <div
+        role="status"
+        aria-busy="true"
+        aria-live="polite"
+        className={cn('w-full space-y-2', className)}
+        data-slot="skeleton"
+        {...rest}
+      >
+        {Array.from({ length: count }).map((_, index) => (
+          <div
+            key={index}
+            className={cn(
+              baseLine,
+              'h-4',
+              index === count - 1 && count > 1 ? 'w-3/4' : 'w-full',
+            )}
+          />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      role="status"
+      aria-busy="true"
+      aria-live="polite"
+      data-slot="skeleton"
+      className={cn(
+        baseLine,
+        shape === 'circle' && 'rounded-full',
+        className,
+      )}
+      {...rest}
+    />
+  )
+}

package/src/primitives/tag-input.tsx

@@ -0,0 +1,223 @@
+"use client"
+
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Input, type InputProps } from './input'
+import { Tag } from './tag'
+
+export type TagInputProps = {
+  value?: string[]
+  onChange?: (value: string[]) => void
+  placeholder?: string
+  size?: 'sm' | 'default' | 'lg'
+  disabled?: boolean
+  maxTags?: number
+  validate?: (tag: string) => boolean | string
+  separator?: string | RegExp
+  allowDuplicates?: boolean
+  className?: string
+  id?: string
+  name?: string
+  'aria-label'?: string
+  'aria-invalid'?: boolean
+  /**
+   * Optional right-side icon for the input row (e.g. info-circle, search). Mirrors
+   * the Figma `Tag Input` Filled state with `Right Icon=true`.
+   */
+  rightIcon?: InputProps['rightIcon']
+}
+
+function escapeRegExp(input: string): string {
+  return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function buildSplitter(separator: string | RegExp): RegExp {
+  if (separator instanceof RegExp) {
+    return separator.flags.includes('g')
+      ? separator
+      : new RegExp(separator.source, `${separator.flags}g`)
+  }
+  return new RegExp(escapeRegExp(separator), 'g')
+}
+
+export const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
+  (
+    {
+      value: valueProp,
+      onChange,
+      placeholder,
+      size = 'default',
+      disabled = false,
+      maxTags,
+      validate,
+      separator = ',',
+      allowDuplicates = false,
+      className,
+      id,
+      name,
+      'aria-label': ariaLabel,
+      'aria-invalid': ariaInvalid,
+      rightIcon,
+    },
+    ref,
+  ) => {
+    const [internalValue, setInternalValue] = React.useState<string[]>([])
+    const [inputText, setInputText] = React.useState('')
+    const [error, setError] = React.useState<string | null>(null)
+
+    const isControlled = valueProp !== undefined
+    const value = isControlled ? (valueProp as string[]) : internalValue
+
+    const commitValue = React.useCallback(
+      (next: string[]) => {
+        if (!isControlled) setInternalValue(next)
+        onChange?.(next)
+      },
+      [isControlled, onChange],
+    )
+
+    const appendToList = React.useCallback(
+      (current: string[], rawTag: string): { next: string[]; errorText: string | null } | null => {
+        const tag = rawTag.trim()
+        if (!tag) return null
+        if (!allowDuplicates && current.includes(tag)) return null
+        if (typeof maxTags === 'number' && current.length >= maxTags) return null
+        if (validate) {
+          const result = validate(tag)
+          if (result === false) return null
+          if (typeof result === 'string') return { next: current, errorText: result }
+        }
+        return { next: [...current, tag], errorText: null }
+      },
+      [allowDuplicates, maxTags, validate],
+    )
+
+    const tryAddTag = React.useCallback(
+      (rawTag: string): boolean => {
+        const outcome = appendToList(value, rawTag)
+        if (!outcome) return false
+        if (outcome.errorText !== null) {
+          setError(outcome.errorText)
+          return false
+        }
+        setError(null)
+        if (outcome.next !== value) commitValue(outcome.next)
+        return outcome.next !== value
+      },
+      [appendToList, commitValue, value],
+    )
+
+    const tryAddManyTags = React.useCallback(
+      (rawTags: string[]) => {
+        let acc = value
+        let pendingError: string | null = null
+        for (const raw of rawTags) {
+          const outcome = appendToList(acc, raw)
+          if (!outcome) continue
+          if (outcome.errorText !== null) {
+            pendingError = outcome.errorText
+            continue
+          }
+          acc = outcome.next
+        }
+        if (acc !== value) commitValue(acc)
+        if (pendingError !== null) setError(pendingError)
+        else if (acc !== value) setError(null)
+      },
+      [appendToList, commitValue, value],
+    )
+
+    const removeTagAt = React.useCallback(
+      (index: number) => {
+        if (index < 0 || index >= value.length) return
+        const next = value.slice(0, index).concat(value.slice(index + 1))
+        commitValue(next)
+        setError(null)
+      },
+      [commitValue, value],
+    )
+
+    const splitter = React.useMemo(() => buildSplitter(separator), [separator])
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const text = event.target.value
+      splitter.lastIndex = 0
+      if (splitter.test(text)) {
+        splitter.lastIndex = 0
+        const parts = text.split(splitter)
+        const trailing = parts.pop() ?? ''
+        tryAddManyTags(parts)
+        setInputText(trailing)
+        return
+      }
+      setInputText(text)
+      if (error) setError(null)
+    }
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === 'Enter') {
+        event.preventDefault()
+        tryAddTag(inputText)
+        setInputText('')
+        return
+      }
+      if (event.key === 'Backspace' && inputText.length === 0 && value.length > 0) {
+        event.preventDefault()
+        removeTagAt(value.length - 1)
+      }
+    }
+
+    const limitReached = typeof maxTags === 'number' && value.length >= maxTags
+
+    return (
+      <div className={cn('flex w-full flex-col gap-1', className)} data-slot="tag-input">
+        <Input
+          ref={ref}
+          type="text"
+          size={size}
+          id={id}
+          name={name}
+          value={inputText}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder}
+          disabled={disabled || limitReached}
+          aria-label={ariaLabel}
+          aria-invalid={ariaInvalid || Boolean(error) || undefined}
+          rightIcon={rightIcon}
+          data-slot="tag-input-field"
+        />
+        {value.length > 0 ? (
+          <div
+            className="flex flex-wrap items-center gap-2 pt-1"
+            data-slot="tag-input-chips"
+          >
+            {value.map((tag, index) => (
+              <Tag
+                key={`${tag}-${index}`}
+                variant="default"
+                shape="square"
+                disabled={disabled}
+                onRemove={() => removeTagAt(index)}
+                removeAriaLabel={`Remove ${tag}`}
+              >
+                {tag}
+              </Tag>
+            ))}
+          </div>
+        ) : null}
+        {error ? (
+          <p
+            className="text-xs text-status-error-text"
+            role="alert"
+            data-slot="tag-input-error"
+          >
+            {error}
+          </p>
+        ) : null}
+      </div>
+    )
+  },
+)
+
+TagInput.displayName = 'TagInput'

package/src/primitives/tag.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react'
-import { cva } from 'class-variance-authority'
+import { X } from 'lucide-react'
+import { cva, type VariantProps } 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: {
@@ -15,8 +16,12 @@ const tagVariants = cva(
         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' },
   }
 )
 
@@ -32,21 +37,75 @@ const dotColorMap: Record<TagVariant, string> = {
 
 export type TagVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'brand'
 
-export type TagProps = React.HTMLAttributes<HTMLSpanElement> & {
-  variant?: TagVariant
-  dot?: boolean
-}
+export type TagShape = 'pill' | 'square'
 
-export function Tag({ className, variant = 'default', dot = false, children, ...props }: TagProps) {
+export type TagProps = React.HTMLAttributes<HTMLSpanElement> &
+  Pick<VariantProps<typeof tagVariants>, 'shape'> & {
+    variant?: TagVariant
+    dot?: boolean
+    /**
+     * Render an inline close ("×") button after the label. When provided, the button
+     * fires `onRemove` on click and stops propagation so a click on the chip body is
+     * not triggered. Matches Figma "Dismiss Icon=On" Tag variants.
+     */
+    onRemove?: () => void
+    /** Accessible label for the close button. Defaults to `Remove`. */
+    removeAriaLabel?: string
+    /** Visually mute the chip and disable its close button. */
+    disabled?: boolean
+  }
+
+export function Tag({
+  className,
+  variant = 'default',
+  shape = 'pill',
+  dot = false,
+  onRemove,
+  removeAriaLabel = 'Remove',
+  disabled = false,
+  children,
+  ...props
+}: TagProps) {
   return (
-    <span className={cn(tagVariants({ variant }), className)} {...props}>
+    <span
+      className={cn(
+        tagVariants({ variant, shape }),
+        disabled && 'opacity-60',
+        className,
+      )}
+      aria-disabled={disabled || undefined}
+      data-slot="tag"
+      data-shape={shape}
+      {...props}
+    >
       {dot && (
         <span
           className={cn('inline-block size-1.5 rounded-full shrink-0', dotColorMap[variant])}
           aria-hidden="true"
         />
       )}
-      {children}
+      <span className="min-w-0">{children}</span>
+      {onRemove ? (
+        <button
+          type="button"
+          disabled={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"
+        >
+          <X
+            className={shape === 'pill' ? 'size-2.5' : 'size-3.5'}
+            aria-hidden="true"
+          />
+        </button>
+      ) : null}
     </span>
   )
 }