@molecule/app-tag-input-react 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,164 @@
+<!--
+AUTO-GENERATED — DO NOT EDIT THIS FILE.
+Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
+Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
+To change this document, edit the module-level JSDoc in src/index.ts.
+Generated: 2026-08-04T00:41:21.341Z
+-->
+
+# @molecule/app-tag-input-react
+
+> **Auto-generated, AI-first package reference** for the [molecule.dev](https://molecule.dev) ecosystem.
+> It is written to be read by coding agents as much as by people, and is generated from this
+> package's source — edit `src/index.ts` JSDoc, not this file.
+
+React tag-token input and tag-chip display.
+
+Exports:
+
+- `<TagChip>` — standalone labeled chip with optional remove button.
+- `<TagInput>` — controlled tokenizer: Enter, comma, or Tab adds the
+  draft; blur commits a non-empty draft; Backspace on an empty field
+  removes the last token.
+
+## Quick Start
+
+```tsx
+import { useState } from 'react'
+
+import { TagChip, TagInput } from '@molecule/app-tag-input-react'
+
+function TagEditor() {
+  const [tags, setTags] = useState<string[]>(['react'])
+  return (
+    <>
+      <TagInput value={tags} onChange={setTags} placeholder="Add a tag…" maxTags={10} />
+      <TagChip onRemove={() => setTags(tags.filter((t) => t !== 'react'))}>react</TagChip>
+    </>
+  )
+}
+```
+
+## Type
+
+`feature`
+
+## Installation
+
+```bash
+npm install @molecule/app-tag-input-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
+npm install -D @types/react
+```
+
+## API
+
+### Interfaces
+
+#### `TagChipProps`
+
+Props for the {@link TagChip} component.
+
+```typescript
+interface TagChipProps {
+  /** Visible tag text. */
+  children: ReactNode
+  /** Optional remove callback — renders an `×` button when provided. */
+  onRemove?: () => void
+  /** Optional click callback for the chip body. */
+  onClick?: () => void
+  /** Extra classes. */
+  className?: string
+}
+```
+
+#### `TagInputProps`
+
+Props for the {@link TagInput} component.
+
+```typescript
+interface TagInputProps {
+  /** Controlled list of tag values. */
+  value: string[]
+  /** Called whenever the tag list changes. */
+  onChange: (next: string[]) => void
+  /** Placeholder shown in the text input when no tokens exist yet. */
+  placeholder?: string
+  /**
+   * Validate/transform an input before adding. Return `null` to reject.
+   * Default trims whitespace and rejects empty + duplicate entries.
+   */
+  normalize?: (raw: string, current: string[]) => string | null
+  /** Max tags allowed. When reached, further input is ignored. */
+  maxTags?: number
+  /** Extra classes on the outer wrapper. */
+  className?: string
+}
+```
+
+### Functions
+
+#### `TagChip(props)`
+
+Small labeled chip with an optional close button. Used inside
+`<TagInput>` but also usable standalone as a label display element.
+
+```typescript
+function TagChip({ children, onRemove, onClick, className }: TagChipProps): JSX.Element
+```
+
+- `props` — Component props (see {@link TagChipProps}).
+
+#### `TagInput(props)`
+
+Tokenized tag-input with chip display. Commits the draft on Enter,
+comma, or Tab AND on blur (clicking away with a non-empty draft adds
+a tag); Backspace on an empty field removes the last token.
+
+Controlled component — callers own the `value` array.
+
+```typescript
+function TagInput({
+  value,
+  onChange,
+  placeholder,
+  normalize = defaultNormalize,
+  maxTags,
+  className,
+}: TagInputProps): JSX.Element
+```
+
+- `props` — Component props (see {@link TagInputProps}).
+
+## Injection Notes
+
+### Requirements
+
+Peer dependencies:
+
+- `@molecule/app-react` ^1.0.0
+- `@molecule/app-ui` ^1.0.0
+- `@molecule/app-ui-react` ^1.0.0
+- `react` ^18.0.0 || ^19.0.0
+
+### Runtime Dependencies
+
+- `@molecule/app-react`
+- `@molecule/app-ui`
+- `@molecule/app-ui-react`
+- `react`
+
+- Must render inside the app's i18n provider and with a ClassMap bond
+  wired (`useTranslation()` / `getClassMap()` throw otherwise).
+- Committing happens on Enter/comma/Tab AND on blur — clicking away
+  with a non-empty draft adds a tag; keep that in mind in forms.
+- Default `normalize` trims whitespace and rejects empties +
+  duplicates; pass your own to lowercase, validate, or map values
+  (return `null` to reject).
+- When `maxTags` is reached further input is silently discarded (the
+  draft clears, no error UI).
+- `<TagChip>` ships no background surface of its own — add one via
+  `className` if bare text chips are too subtle in your theme.
+
+## Translations
+
+Translation strings are provided by `@molecule/app-locales-tag-input`.

package/dist/TagChip.d.ts

@@ -0,0 +1,19 @@
+import type { JSX, ReactNode } from 'react';
+/** Props for the {@link TagChip} component. */
+export interface TagChipProps {
+    /** Visible tag text. */
+    children: ReactNode;
+    /** Optional remove callback — renders an `×` button when provided. */
+    onRemove?: () => void;
+    /** Optional click callback for the chip body. */
+    onClick?: () => void;
+    /** Extra classes. */
+    className?: string;
+}
+/**
+ * Small labeled chip with an optional close button. Used inside
+ * `<TagInput>` but also usable standalone as a label display element.
+ * @param props - Component props (see {@link TagChipProps}).
+ */
+export declare function TagChip({ children, onRemove, onClick, className }: TagChipProps): JSX.Element;
+//# sourceMappingURL=TagChip.d.ts.map

package/dist/TagChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagChip.d.ts","sourceRoot":"","sources":["../src/TagChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAK3C,+CAA+C;AAC/C,MAAM,WAAW,YAAY;IAC3B,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CAgC7F"}

package/dist/TagChip.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+/**
+ * Small labeled chip with an optional close button. Used inside
+ * `<TagInput>` but also usable standalone as a label display element.
+ * @param props - Component props (see {@link TagChipProps}).
+ */
+export function TagChip({ children, onRemove, onClick, className }) {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    return (_jsxs("span", { className: cm.cn(cm.flex({ align: 'center', gap: 'xs' }), cm.sp('px', 2), cm.sp('py', 1), cm.textSize('xs'), cm.fontWeight('medium'), cm.roundedFull, className), onClick: onClick, children: [_jsx("span", { children: children }), onRemove && (_jsx("button", { type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    onRemove();
+                }, "aria-label": t('tagChip.remove', {}, { defaultValue: 'Remove' }), className: cm.cn(cm.w(4), cm.h(4), cm.flex({ align: 'center', justify: 'center' })), children: "\u00D7" }))] }));
+}

package/dist/TagInput.d.ts

@@ -0,0 +1,29 @@
+import type { JSX } from 'react';
+/** Props for the {@link TagInput} component. */
+export interface TagInputProps {
+    /** Controlled list of tag values. */
+    value: string[];
+    /** Called whenever the tag list changes. */
+    onChange: (next: string[]) => void;
+    /** Placeholder shown in the text input when no tokens exist yet. */
+    placeholder?: string;
+    /**
+     * Validate/transform an input before adding. Return `null` to reject.
+     * Default trims whitespace and rejects empty + duplicate entries.
+     */
+    normalize?: (raw: string, current: string[]) => string | null;
+    /** Max tags allowed. When reached, further input is ignored. */
+    maxTags?: number;
+    /** Extra classes on the outer wrapper. */
+    className?: string;
+}
+/**
+ * Tokenized tag-input with chip display. Commits the draft on Enter,
+ * comma, or Tab AND on blur (clicking away with a non-empty draft adds
+ * a tag); Backspace on an empty field removes the last token.
+ *
+ * Controlled component — callers own the `value` array.
+ * @param props - Component props (see {@link TagInputProps}).
+ */
+export declare function TagInput({ value, onChange, placeholder, normalize, maxTags, className, }: TagInputProps): JSX.Element;
+//# sourceMappingURL=TagInput.d.ts.map

package/dist/TagInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput.d.ts","sourceRoot":"","sources":["../src/TagInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAA;AAQ/C,gDAAgD;AAChD,MAAM,WAAW,aAAa;IAC5B,qCAAqC;IACrC,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,4CAA4C;IAC5C,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAClC,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,MAAM,GAAG,IAAI,CAAA;IAC7D,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAcD;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,SAA4B,EAC5B,OAAO,EACP,SAAS,GACV,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA0D7B"}

package/dist/TagInput.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { TagChip } from './TagChip.js';
+/**
+ * Default normalization: trims whitespace, rejects empty strings and duplicates.
+ * @param raw
+ * @param current
+ */
+function defaultNormalize(raw, current) {
+    const v = raw.trim();
+    if (!v)
+        return null;
+    if (current.includes(v))
+        return null;
+    return v;
+}
+/**
+ * Tokenized tag-input with chip display. Commits the draft on Enter,
+ * comma, or Tab AND on blur (clicking away with a non-empty draft adds
+ * a tag); Backspace on an empty field removes the last token.
+ *
+ * Controlled component — callers own the `value` array.
+ * @param props - Component props (see {@link TagInputProps}).
+ */
+export function TagInput({ value, onChange, placeholder, normalize = defaultNormalize, maxTags, className, }) {
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const [draft, setDraft] = useState('');
+    /**
+     * Validates and commits the current draft value as a new tag.
+     */
+    function commit() {
+        if (maxTags !== undefined && value.length >= maxTags) {
+            setDraft('');
+            return;
+        }
+        const next = normalize(draft, value);
+        if (next !== null)
+            onChange([...value, next]);
+        setDraft('');
+    }
+    /**
+     * Handles Enter/comma/Tab to commit a tag, and Backspace to remove the last tag.
+     * @param e
+     */
+    function onKeyDown(e) {
+        if (e.key === 'Enter' || e.key === ',' || e.key === 'Tab') {
+            if (draft.trim()) {
+                e.preventDefault();
+                commit();
+            }
+        }
+        else if (e.key === 'Backspace' && draft === '' && value.length > 0) {
+            e.preventDefault();
+            onChange(value.slice(0, -1));
+        }
+    }
+    return (_jsxs("div", { className: cm.cn(cm.flex({ align: 'center', gap: 'xs', wrap: 'wrap' }), cm.sp('p', 2), className), children: [value.map((tag, i) => (_jsx(TagChip, { onRemove: () => onChange(value.filter((_, j) => j !== i)), children: tag }, `${tag}-${i}`))), _jsx("input", { type: "text", value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: onKeyDown, onBlur: () => draft.trim() && commit(), placeholder: placeholder ?? t('tagInput.placeholder', {}, { defaultValue: 'Add a tag…' }), className: cm.cn(cm.flex1, cm.input()) })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * React tag-token input and tag-chip display.
+ *
+ * Exports:
+ * - `<TagChip>` — standalone labeled chip with optional remove button.
+ * - `<TagInput>` — controlled tokenizer: Enter, comma, or Tab adds the
+ *   draft; blur commits a non-empty draft; Backspace on an empty field
+ *   removes the last token.
+ *
+ * @example
+ * ```tsx
+ * import { useState } from 'react'
+ *
+ * import { TagChip, TagInput } from '@molecule/app-tag-input-react'
+ *
+ * function TagEditor() {
+ *   const [tags, setTags] = useState<string[]>(['react'])
+ *   return (
+ *     <>
+ *       <TagInput value={tags} onChange={setTags} placeholder="Add a tag…" maxTags={10} />
+ *       <TagChip onRemove={() => setTags(tags.filter((t) => t !== 'react'))}>react</TagChip>
+ *     </>
+ *   )
+ * }
+ * ```
+ *
+ * @remarks
+ * - Must render inside the app's i18n provider and with a ClassMap bond
+ *   wired (`useTranslation()` / `getClassMap()` throw otherwise).
+ * - Committing happens on Enter/comma/Tab AND on blur — clicking away
+ *   with a non-empty draft adds a tag; keep that in mind in forms.
+ * - Default `normalize` trims whitespace and rejects empties +
+ *   duplicates; pass your own to lowercase, validate, or map values
+ *   (return `null` to reject).
+ * - When `maxTags` is reached further input is silently discarded (the
+ *   draft clears, no error UI).
+ * - `<TagChip>` ships no background surface of its own — add one via
+ *   `className` if bare text chips are too subtle in your theme.
+ *
+ * @module
+ */
+export * from './TagChip.js';
+export * from './TagInput.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEH,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA"}

package/dist/index.js

@@ -0,0 +1,43 @@
+/**
+ * React tag-token input and tag-chip display.
+ *
+ * Exports:
+ * - `<TagChip>` — standalone labeled chip with optional remove button.
+ * - `<TagInput>` — controlled tokenizer: Enter, comma, or Tab adds the
+ *   draft; blur commits a non-empty draft; Backspace on an empty field
+ *   removes the last token.
+ *
+ * @example
+ * ```tsx
+ * import { useState } from 'react'
+ *
+ * import { TagChip, TagInput } from '@molecule/app-tag-input-react'
+ *
+ * function TagEditor() {
+ *   const [tags, setTags] = useState<string[]>(['react'])
+ *   return (
+ *     <>
+ *       <TagInput value={tags} onChange={setTags} placeholder="Add a tag…" maxTags={10} />
+ *       <TagChip onRemove={() => setTags(tags.filter((t) => t !== 'react'))}>react</TagChip>
+ *     </>
+ *   )
+ * }
+ * ```
+ *
+ * @remarks
+ * - Must render inside the app's i18n provider and with a ClassMap bond
+ *   wired (`useTranslation()` / `getClassMap()` throw otherwise).
+ * - Committing happens on Enter/comma/Tab AND on blur — clicking away
+ *   with a non-empty draft adds a tag; keep that in mind in forms.
+ * - Default `normalize` trims whitespace and rejects empties +
+ *   duplicates; pass your own to lowercase, validate, or map values
+ *   (return `null` to reject).
+ * - When `maxTags` is reached further input is silently discarded (the
+ *   draft clears, no error UI).
+ * - `<TagChip>` ships no background surface of its own — add one via
+ *   `className` if bare text chips are too subtle in your theme.
+ *
+ * @module
+ */
+export * from './TagChip.js';
+export * from './TagInput.js';

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@molecule/app-tag-input-react",
+  "version": "1.0.0",
+  "description": "React tag-token input and tag-chip display",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "molecule",
+    "tag-input",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@molecule/app-react": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "@molecule/app-ui-react": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@molecule/app-react": "1.0.0",
+    "@molecule/app-ui": "1.0.0",
+    "@molecule/app-ui-react": "1.0.0",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}