{"version":3,"file":"chip.cjs","sources":["../../../components/chip/chip.tsx"],"sourcesContent":["'use client';\n\nimport { cva, cx, type VariantProps } from 'class-variance-authority';\nimport { ComponentProps, ReactNode } from 'react';\n\nimport styles from './chip.module.css';\n\nconst chip = cva(styles.chip, {\n  variants: {\n    variant: {\n      outline: styles['chip-variant-outline'],\n      filled: styles['chip-variant-filled']\n    },\n    size: {\n      large: styles['chip-size-large'],\n      small: styles['chip-size-small']\n    },\n    color: {\n      neutral: styles['chip-color-neutral'],\n      accent: styles['chip-color-accent']\n    }\n  },\n  defaultVariants: {\n    variant: 'outline',\n    size: 'small',\n    color: 'neutral'\n  }\n});\n\ntype ChipProps = ComponentProps<'span'> &\n  VariantProps<typeof chip> & {\n    trailingIcon?: ReactNode;\n    leadingIcon?: ReactNode;\n    isDismissible?: boolean;\n    children: ReactNode;\n    onDismiss?: () => void;\n    disabled?: boolean;\n  };\n\nexport const Chip = ({\n  variant,\n  size,\n  color,\n  trailingIcon,\n  leadingIcon,\n  isDismissible,\n  children,\n  className,\n  onDismiss,\n  onClick,\n  role,\n  disabled,\n  'aria-label': ariaLabel,\n  ...props\n}: ChipProps) => {\n  const handleDismiss = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onDismiss?.();\n  };\n\n  const isInteractive = !!onClick && !isDismissible;\n\n  const sharedProps = {\n    'aria-label':\n      ariaLabel ?? (typeof children === 'string' ? children : undefined),\n    'data-disabled': disabled || undefined\n  };\n\n  const content = (\n    <>\n      {leadingIcon && (\n        <span\n          className={styles['leading-icon']}\n          aria-hidden='true'\n          role='presentation'\n          data-slot='chip-leading-icon'\n        >\n          {leadingIcon}\n        </span>\n      )}\n      {children}\n      {isDismissible ? (\n        <button\n          onClick={handleDismiss}\n          className={styles['dismiss-button']}\n          aria-label={`Remove ${\n            typeof children === 'string' ? children : 'item'\n          }`}\n          type='button'\n          data-slot='chip-dismiss'\n        >\n          <svg\n            width='12'\n            height='12'\n            viewBox='0 0 12 12'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n            aria-hidden='true'\n            role='presentation'\n            data-slot='chip-dismiss-icon'\n          >\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z'\n              fill='currentColor'\n            />\n          </svg>\n        </button>\n      ) : trailingIcon ? (\n        <span\n          className={styles['trailing-icon']}\n          aria-hidden='true'\n          role='presentation'\n          data-slot='chip-trailing-icon'\n        >\n          {trailingIcon}\n        </span>\n      ) : null}\n    </>\n  );\n\n  if (isInteractive) {\n    return (\n      <button\n        data-slot='chip'\n        {...(props as React.ComponentProps<'button'>)}\n        {...sharedProps}\n        type='button'\n        disabled={disabled}\n        role={role}\n        className={chip({\n          variant,\n          size,\n          color,\n          className: cx(styles['chip-interactive'], className)\n        })}\n        onClick={\n          onClick as unknown as React.MouseEventHandler<HTMLButtonElement>\n        }\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    <span\n      data-slot='chip'\n      {...props}\n      {...sharedProps}\n      className={chip({ variant, size, color, className })}\n      role={role ?? 'status'}\n      onClick={disabled ? undefined : onClick}\n    >\n      {content}\n    </span>\n  );\n};\n\nChip.displayName = 'Chip';\n"],"names":[],"mappings":";;;;;;;AAOA;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACD;AACE;AACA;AACA;AACD;AACF;AAYY;AAgBX;;;AAGA;;AAIA;AACE;;;AAKF;;;;;;;;;;AA0FF;AAEA;;"}