19:I[695313,["/_next/static/immutable/chunks/422lj974qmlrg.js","/_next/static/immutable/chunks/2__nhv993kwpc.js","/_next/static/immutable/chunks/2be9h44c0djyi.js","/_next/static/immutable/chunks/2h82mq8b3z8_q.js","/_next/static/immutable/chunks/02jbg7evzxc8b.js"],"Workbench"] 1a:T12ab,"use client"; import * as React from "react"; import { cn } from "@/registry/_lib/cn"; export interface TagChipsFieldProps extends React.HTMLAttributes { /** Placeholder shown in the trailing input. */ placeholder?: string; /** Accent color for the focus ring and each chip dot. */ accent?: string; /** Tags present before the reader types. */ initialTags?: string[]; /** Called with the full tag list whenever a chip is added or removed. */ onTagsChange?: (tags: string[]) => void; } /** * A text field that turns each entry into a small removable chip. Enter or comma commits the * current text, Backspace on an empty input drops the last chip, and the shell stays one bordered * surface that gains an accent ring while the input is focused. */ export function TagChipsField({ placeholder = "Add tag...", accent = "#9BE15D", initialTags, onTagsChange, className, style, onClick, ...rest }: TagChipsFieldProps) { const [tags, setTags] = React.useState(() => (initialTags ?? []).map((tag) => tag.trim()).filter(Boolean), ); const [draft, setDraft] = React.useState(""); const [focused, setFocused] = React.useState(false); const inputRef = React.useRef(null); const addTags = (values: string[]) => { const next = [...tags]; for (const raw of values) { const tag = raw.trim(); if (tag && !next.includes(tag)) next.push(tag); } if (next.length !== tags.length) { setTags(next); onTagsChange?.(next); } }; const removeTag = (tag: string) => { const next = tags.filter((t) => t !== tag); setTags(next); onTagsChange?.(next); }; const handleInput = (event: React.ChangeEvent) => { const value = event.target.value; if (value.includes(",")) { const parts = value.split(","); const tail = parts.pop() ?? ""; addTags(parts); setDraft(tail); } else { setDraft(value); } }; const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === "Enter" || event.key === ",") { event.preventDefault(); if (draft.trim()) { addTags([draft]); setDraft(""); } } else if (event.key === "Backspace" && draft === "" && tags.length > 0) { removeTag(tags[tags.length - 1]); } }; return (

{ inputRef.current?.focus(); onClick?.(event); }} className={cn( "flex w-72 max-w-full cursor-text flex-wrap items-center gap-1.5 rounded-lg border bg-current/[0.04] px-2.5 py-2 transition-[border-color,box-shadow] duration-150", focused ? "border-current/40" : "border-current/20", className, )} style={{ ...style, ["--tag-accent" as string]: accent, borderColor: focused ? accent : undefined, boxShadow: focused ? `0 0 0 3px color-mix(in srgb, ${accent} 24%, transparent)` : undefined, }} > {tags.map((tag) => ( {tag} ))} setFocused(true)} onBlur={() => setFocused(false)} placeholder={placeholder} aria-label={placeholder} className="min-w-20 flex-1 basis-16 bg-transparent text-sm text-current outline-none placeholder:text-current/40" />

); } export default TagChipsField;1b:Tb394,

"use client";

import * as React from "react";
import { cn } from "@/registry/_lib/cn";

export interface TagChipsFieldProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Placeholder shown in the trailing input. */
  placeholder?: string;
  /** Accent color for the focus ring and each chip dot. */
  accent?: string;
  /** Tags present before the reader types. */
  initialTags?: string[];
  /** Called with the full tag list whenever a chip is added or removed. */
  onTagsChange?: (tags: string[]) => void;
}

/**
 * A text field that turns each entry into a small removable chip. Enter or comma commits the
 * current text, Backspace on an empty input drops the last chip, and the shell stays one bordered
 * surface that gains an accent ring while the input is focused.
 */
export function TagChipsField({
  placeholder = "Add tag...",
  accent = "#9BE15D",
  initialTags,
  onTagsChange,
  className,
  style,
  onClick,
  ...rest
}: TagChipsFieldProps) {
  const [tags, setTags] = React.useState<string[]>(() =>
    (initialTags ?? []).map((tag) => tag.trim()).filter(Boolean),
  );
  const [draft, setDraft] = React.useState("");
  const [focused, setFocused] = React.useState(false);
  const inputRef = React.useRef<HTMLInputElement | null>(null);

  const addTags = (values: string[]) => {
    const next = [...tags];
    for (const raw of values) {
      const tag = raw.trim();
      if (tag && !next.includes(tag)) next.push(tag);
    }
    if (next.length !== tags.length) {
      setTags(next);
      onTagsChange?.(next);
    }
  };

  const removeTag = (tag: string) => {
    const next = tags.filter((t) => t !== tag);
    setTags(next);
    onTagsChange?.(next);
  };

  const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;
    if (value.includes(",")) {
      const parts = value.split(",");
      const tail = parts.pop() ?? "";
      addTags(parts);
      setDraft(tail);
    } else {
      setDraft(value);
    }
  };

  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === "Enter" || event.key === ",") {
      event.preventDefault();
      if (draft.trim()) {
        addTags([draft]);
        setDraft("");
      }
    } else if (event.key === "Backspace" && draft === "" && tags.length > 0) {
      removeTag(tags[tags.length - 1]);
    }
  };

  return (
    <div
      {...rest}
      onClick={(event) => {
        inputRef.current?.focus();
        onClick?.(event);
      }}
      className={cn(
        "flex w-72 max-w-full cursor-text flex-wrap items-center gap-1.5 rounded-lg border bg-current/[0.04] px-2.5 py-2 transition-[border-color,box-shadow] duration-150",
        focused ? "border-current/40" : "border-current/20",
        className,
      )}
      style={{
        ...style,
        ["--tag-accent" as string]: accent,
        borderColor: focused ? accent : undefined,
        boxShadow: focused ? `0 0 0 3px color-mix(in srgb, ${accent} 24%, transparent)` : undefined,
      }}
    >
      {tags.map((tag) => (
        <span
          key={tag}
          className="flex items-center gap-1.5 rounded-full border border-current/15 bg-current/[0.08] py-0.5 pl-2 pr-1 text-xs font-medium text-current"
        >
          <span aria-hidden="true" className="size-1.5 shrink-0 rounded-full" style={{ background: accent }} />
          <span className="whitespace-nowrap">{tag}</span>
          <button
            type="button"
            aria-label={`Remove ${tag}`}
            onClick={(event) => {
              event.stopPropagation();
              removeTag(tag);
            }}
            className="flex size-4 items-center justify-center rounded-full text-current/50 transition-colors hover:bg-current/10 hover:text-current focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-current focus-visible:outline-offset-1"
          >
            <svg
              viewBox="0 0 12 12"
              width="8"
              height="8"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.75"
              strokeLinecap="round"
              aria-hidden="true"
            >
              <path d="M3.5 3.5l5 5M8.5 3.5l-5 5" />
            </svg>
          </button>
        </span>
      ))}
      <input
        ref={inputRef}
        type="text"
        value={draft}
        onChange={handleInput}
        onKeyDown={handleKeyDown}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        placeholder={placeholder}
        aria-label={placeholder}
        className="min-w-20 flex-1 basis-16 bg-transparent text-sm text-current outline-none placeholder:text-current/40"
      />
    </div>
  );
}

export default TagChipsField;

1c:T1ddc,

"use client";

import { TagChipsField } from "./index";

export interface DemoProps {
  placeholder?: string;
  accent?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ placeholder = "Add tag...", accent = "#9BE15D" }: DemoProps) {
  return (
    <div className="flex flex-col items-center justify-center gap-5 p-8">
      <TagChipsField placeholder={placeholder} accent={accent} initialTags={["Launch plan", "beta feedback", "pricing page"]} />
      <TagChipsField placeholder={placeholder} accent={accent} initialTags={["design", "research", "mobile app", "a11y"]} />
    </div>
  );
}

1d:T1268, 1e:Tfaf4,

<script setup lang="ts">
import { ref } from "vue";

const props = withDefaults(
  defineProps<{
    placeholder?: string;
    accent?: string;
    initialTags?: string[];
  }>(),
  {
    placeholder: "Add tag...",
    accent: "#9BE15D",
    initialTags: () => ["Launch plan", "beta feedback", "pricing page"],
  },
);

const emit = defineEmits<{ (e: "change", tags: string[]): void }>();

const tags = ref<string[]>(props.initialTags.map((tag) => tag.trim()).filter(Boolean));
const draft = ref("");
const focused = ref(false);
const inputEl = ref<HTMLInputElement | null>(null);

function addTags(values: string[]) {
  const next = [...tags.value];
  for (const raw of values) {
    const tag = raw.trim();
    if (tag && !next.includes(tag)) next.push(tag);
  }
  if (next.length !== tags.value.length) {
    tags.value = next;
    emit("change", next);
  }
}

function removeTag(tag: string) {
  const next = tags.value.filter((t) => t !== tag);
  tags.value = next;
  emit("change", next);
  inputEl.value?.focus();
}

function onInput(event: Event) {
  const value = (event.target as HTMLInputElement).value;
  if (value.includes(",")) {
    const parts = value.split(",");
    const tail = parts.pop() ?? "";
    addTags(parts);
    draft.value = tail;
  } else {
    draft.value = value;
  }
}

function onKeyDown(event: KeyboardEvent) {
  if (event.key === "Enter" || event.key === ",") {
    event.preventDefault();
    if (draft.value.trim()) {
      addTags([draft.value]);
      draft.value = "";
    }
  } else if (event.key === "Backspace" && draft.value === "" && tags.value.length > 0) {
    removeTag(tags.value[tags.value.length - 1]);
  }
}

function focusInput() {
  inputEl.value?.focus();
}
</script>

<template>
  <div
    class="tag-chips-field"
    :class="{ 'tag-chips-field--focused': focused }"
    :style="{ '--tag-accent': accent }"
    @click="focusInput"
  >
    <span v-for="tag in tags" :key="tag" class="tag-chip">
      <span aria-hidden="true" class="tag-chip__dot" />
      <span class="tag-chip__label">{{ tag }}</span>
      <button
        type="button"
        class="tag-chip__remove"
        :aria-label="'Remove ' + tag"
        @click.stop="removeTag(tag)"
      >
        <svg
          viewBox="0 0 12 12"
          width="8"
          height="8"
          fill="none"
          stroke="currentColor"
          stroke-width="1.75"
          stroke-linecap="round"
          aria-hidden="true"
        >
          <path d="M3.5 3.5l5 5M8.5 3.5l-5 5" />
        </svg>
      </button>
    </span>
    <input
      ref="inputEl"
      type="text"
      class="tag-chips-field__input"
      :value="draft"
      :placeholder="placeholder"
      :aria-label="placeholder"
      @input="onInput"
      @keydown="onKeyDown"
      @focus="focused = true"
      @blur="focused = false"
    />
  </div>
</template>

<style scoped>
.tag-chips-field {
  --tag-accent: #9be15d;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 18rem;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, currentColor 4%, transparent);
  color: inherit;
  cursor: text;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.tag-chips-field--focused {
  border-color: var(--tag-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tag-accent) 24%, transparent);
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 9px;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  font: 500 12px/16px system-ui, sans-serif;
  white-space: nowrap;
}
.tag-chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--tag-accent);
}
.tag-chip__label {
  color: inherit;
}
.tag-chip__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, currentColor 50%, transparent);
  cursor: pointer;
}
.tag-chip__remove:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: currentColor;
}
.tag-chip__remove:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}
.tag-chips-field__input {
  flex: 1 1 64px;
  min-width: 80px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 400 14px/20px system-ui, sans-serif;
  outline: none;
}
.tag-chips-field__input::placeholder {
  color: color-mix(in srgb, currentColor 40%, transparent);
}
</style>

1f:T1187,

Nearby