Feature 05 task 2: Core UI primitives (#34)

Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com> Co-committed-by: dev_agent <dev_agent@cubecraftlabs.com>
2026-10-03 16:34:59 -04:00
parent 496f2e5375
commit 02f1dd6491
36 changed files with 1408 additions and 0 deletions
@@ -0,0 +1,24 @@
+import type { ComponentPropsWithRef } from 'react'
+import styles from './Chip.module.css'
+
+export type ChipProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {
+  label: string
+  // When set, the chip shows a "Remove {label}" button that calls it.
+  onRemove?: () => void
+}
+
+export function Chip({ label, onRemove, className, ...rest }: ChipProps) {
+  const classes = [styles.chip, onRemove && styles.removable, className].filter(Boolean).join(' ')
+  return (
+    <span className={classes} {...rest}>
+      {label}
+      {onRemove && (
+        <button type="button" className={styles.remove} aria-label={`Remove ${label}`} onClick={onRemove}>
+          <svg viewBox="0 0 12 12" width="10" height="10" aria-hidden="true">
+            <path d="M2 2l8 8M10 2l-8 8" stroke="currentColor" strokeWidth="2.75" strokeLinecap="round" />
+          </svg>
+        </button>
+      )}
+    </span>
+  )
+}