taglite 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Hossein Naderi Jafari
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,671 @@
+# taglite
+
+<div align="center">
+
+**A lightweight, dependency-free React tag input with a focused API and flexible interactions.**
+
+[![npm version](https://img.shields.io/npm/v/taglite?style=flat-square&color=cb3837)](https://www.npmjs.com/package/taglite)
+[![npm downloads](https://img.shields.io/npm/dm/taglite?style=flat-square&color=blue)](https://www.npmjs.com/package/taglite)
+[![React](https://img.shields.io/badge/React-%3E%3D18-61dafb?style=flat-square&logo=react&logoColor=20232a)](https://react.dev/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-first-3178c6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![License: MIT](https://img.shields.io/badge/license-MIT-green?style=flat-square)](./LICENSE)
+
+<br />
+
+<img src="./assets/taglite-demo.gif" alt="taglite demo showing tags being added to the input" width="820" />
+
+<br />
+
+<sub>Type a tag, press Enter or comma, and keep going.</sub>
+
+</div>
+
+<code>taglite</code> is a controlled React component for collecting, validating, normalizing, and removing tags. It has zero runtime dependencies, ships with TypeScript types, and supports keyboard-first workflows without imposing an autocomplete or form framework.
+
+## Why taglite?
+
+- **Small by default** — zero runtime dependencies and no animation or icon libraries.
+- **Controlled and predictable** — the parent owns the tag array through <code>value</code> and <code>onChange</code>.
+- **Flexible input rules** — custom separators, duplicate handling, normalization, validation, limits, and paste parsing.
+- **Ready for real interfaces** — built-in themes, RTL support, read-only and disabled states, native input attributes, and forwarded refs.
+- **Easy to extend** — custom tag, remove, and clear icons plus lifecycle callbacks for additions, removals, invalid tags, and clearing.
+
+## Built-in themes
+
+The component includes eight theme values: <code>default</code> (a backward-compatible alias of <code>light</code>), <code>light</code>, <code>dark</code>, <code>cupcake</code>, <code>emerald</code>, <code>corporate</code>, <code>retro</code>, and <code>dracula</code>.
+
+<table>
+  <tr>
+    <td align="center"><strong>Light</strong><br /><img src="./assets/Demo-Light.jpg" alt="taglite light theme" width="500" /></td>
+    <td align="center"><strong>Dark</strong><br /><img src="./assets/Demo-Dark.jpg" alt="taglite dark theme" width="500" /></td>
+  </tr>
+  <tr>
+    <td align="center"><strong>Cupcake</strong><br /><img src="./assets/Demo-Cupcake.jpg" alt="taglite cupcake theme" width="500" /></td>
+    <td align="center"><strong>Emerald</strong><br /><img src="./assets/Demo-Emerald.jpg" alt="taglite emerald theme" width="500" /></td>
+  </tr>
+  <tr>
+    <td align="center"><strong>Corporate</strong><br /><img src="./assets/Demo-Corporate.jpg" alt="taglite corporate theme" width="500" /></td>
+    <td align="center"><strong>Retro</strong><br /><img src="./assets/Demo-Retro.jpg" alt="taglite retro theme" width="500" /></td>
+  </tr>
+  <tr>
+    <td align="center"><strong>Dracula</strong><br /><img src="./assets/Demo-Dracula.jpg" alt="taglite dracula theme" width="500" /></td>
+    <td align="center"><em>All themes use the same component API.</em></td>
+  </tr>
+</table>
+
+## Installation
+
+~~~bash
+npm install taglite
+~~~
+
+Or use another package manager:
+
+~~~bash
+yarn add taglite
+pnpm add taglite
+~~~
+
+<code>taglite</code> supports React <code>&gt;=18</code> and includes its own public TypeScript declarations.
+
+## Quick start
+
+~~~tsx
+import { useState } from 'react'
+import { SimpleTagInput } from 'taglite'
+import 'taglite/style.css'
+
+export default function Example() {
+    const [tags, setTags] = useState<string[]>([])
+
+    return (
+        <SimpleTagInput
+            value={tags}
+            onChange={setTags}
+            placeholder="Add a technology..."
+        />
+    )
+}
+~~~
+
+The component is controlled through <code>value</code> and <code>onChange</code>; the tag array is never stored internally. The text currently being typed is temporary UI state managed by the component.
+
+## Common interactions
+
+### Add tags with the keyboard
+
+By default, pressing <code>Enter</code> or <code>,</code> converts the current input into a tag. Empty values are ignored.
+
+~~~tsx
+<SimpleTagInput
+    value={tags}
+    onChange={setTags}
+    separators={['Enter', ',']}
+/>
+~~~
+
+~~~text
+React + Enter  ->  React
+Next.js + ,    ->  Next.js
+~~~
+
+### Paste multiple tags
+
+Comma-separated, newline-separated, and mixed input can be pasted in one operation:
+
+~~~text
+React, Next.js
+TypeScript, Tailwind CSS
+~~~
+
+~~~ts
+['React', 'Next.js', 'TypeScript', 'Tailwind CSS']
+~~~
+
+The same processing pipeline applies to pasted values:
+
+~~~text
+normalize -> validate -> duplicate check -> maxTags -> onChange
+~~~
+
+### Combine features
+
+~~~tsx
+import { useState } from 'react'
+import { SimpleTagInput } from 'taglite'
+
+export default function Example() {
+    const [tags, setTags] = useState<string[]>([])
+
+    return (
+        <SimpleTagInput
+            value={tags}
+            onChange={setTags}
+            placeholder="Add a technology..."
+            hintText="Enter, comma, or paste multiple tags"
+            separators={['Enter', ',']}
+            maxTags={8}
+            allowDuplicates={false}
+            normalizeTag={tag => tag.trim().toLowerCase()}
+            validateTag={tag =>
+                tag.length >= 2
+                    ? true
+                    : 'Tag must contain at least 2 characters'
+            }
+            onInvalidTag={(tag, reason) => {
+                console.log('Invalid tag:', tag, reason)
+            }}
+            onTagAdd={(tag, index) => {
+                console.log('Added:', tag, index)
+            }}
+            onTagRemove={(tag, index) => {
+                console.log('Removed:', tag, index)
+            }}
+            acceptOnBlur
+            clearable
+            onClear={() => console.log('All tags cleared')}
+            theme="dark"
+        />
+    )
+}
+~~~
+
+## API reference
+
+### Core props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| <code>value</code> | <code>string[]</code> | required | Controlled tag list |
+| <code>onChange</code> | <code>(tags: string[]) =&gt; void</code> | required | Called when tags change |
+| <code>direction</code> | <code>'ltr' or 'rtl'</code> | <code>'ltr'</code> | Text direction |
+| <code>theme</code> | <code>SimpleTagInputTheme</code> | <code>'light'</code> | Built-in visual theme |
+| <code>placeholder</code> | <code>string</code> | <code>'Add a new tag...'</code> | Input placeholder |
+| <code>hintText</code> | <code>ReactNode</code> | <code>'Press Enter to add a tag'</code> | Focus helper text |
+| <code>separators</code> | <code>string[]</code> | <code>['Enter', ',']</code> | Keys that create tags |
+| <code>maxTags</code> | <code>number</code> | — | Maximum number of tags |
+| <code>allowDuplicates</code> | <code>boolean</code> | <code>false</code> | Allow duplicate tags |
+| <code>normalizeTag</code> | <code>(tag: string) =&gt; string</code> | — | Normalizes tags before validation |
+| <code>validateTag</code> | <code>(tag: string) =&gt; boolean or string</code> | — | Validates tags |
+| <code>onInvalidTag</code> | <code>(tag, reason?) =&gt; void</code> | — | Called for validation failures |
+| <code>onTagAdd</code> | <code>(tag, index) =&gt; void</code> | — | Called after a tag is added |
+| <code>onTagRemove</code> | <code>(tag, index) =&gt; void</code> | — | Called after a tag is removed |
+| <code>acceptOnBlur</code> | <code>boolean</code> | <code>false</code> | Add current input on blur |
+| <code>clearable</code> | <code>boolean</code> | <code>false</code> | Show clear-all button |
+| <code>clearIcon</code> | <code>ReactNode</code> | built-in SVG | Custom clear icon |
+| <code>onClear</code> | <code>() =&gt; void</code> | — | Called after clearing all tags |
+| <code>tagIcon</code> | <code>ReactNode</code> | built-in SVG | Custom tag icon |
+| <code>removeIcon</code> | <code>ReactNode</code> | built-in SVG | Custom remove icon |
+| <code>removeButtonProps</code> | button attributes | — | Additional remove-button attributes |
+| <code>readOnly</code> | native input prop | <code>false</code> | Prevent tag editing |
+| <code>disabled</code> | native input prop | <code>false</code> | Disable interaction |
+| <code>ref</code> | <code>Ref&lt;HTMLInputElement&gt;</code> | — | Ref to the native input |
+
+<code>SimpleTagInput</code> also accepts standard <code>InputHTMLAttributes&lt;HTMLInputElement&gt;</code> props unless they conflict with the controlled <code>value</code> and tag-level <code>onChange</code> API.
+
+### <code>value</code> and <code>onChange</code>
+
+~~~ts
+value: string[]
+onChange: (tags: string[]) => void
+~~~
+
+<code>value</code> is the source of truth. <code>onChange</code> is called whenever the list changes, and the component does not mutate the existing array.
+
+~~~tsx
+const [tags, setTags] = useState<string[]>([
+    'React',
+    'Next.js',
+])
+
+<SimpleTagInput
+    value={tags}
+    onChange={setTags}
+/>
+~~~
+
+### <code>direction</code>
+
+~~~ts
+direction?: 'ltr' | 'rtl'
+~~~
+
+Controls text direction. Use <code>rtl</code> for Persian, Arabic, Hebrew, and other right-to-left interfaces.
+
+~~~tsx
+<SimpleTagInput
+    direction="rtl"
+    value={tags}
+    onChange={setTags}
+/>
+~~~
+
+### <code>theme</code>
+
+~~~ts
+theme?:
+    | 'default'
+    | 'light'
+    | 'dark'
+    | 'cupcake'
+    | 'emerald'
+    | 'corporate'
+    | 'retro'
+    | 'dracula'
+~~~
+
+<code>default</code> is a backward-compatible alias of <code>light</code>. The default theme is <code>light</code>.
+
+~~~tsx
+<SimpleTagInput
+    theme="dracula"
+    value={tags}
+    onChange={setTags}
+/>
+~~~
+
+### <code>placeholder</code> and <code>hintText</code>
+
+~~~ts
+placeholder?: string
+hintText?: ReactNode
+~~~
+
+The placeholder appears inside the input. <code>hintText</code> is rendered in the helper area while the component is focused.
+
+~~~tsx
+<SimpleTagInput
+    placeholder="Add technology..."
+    hintText="Press Enter or comma to add a tag"
+    value={tags}
+    onChange={setTags}
+/>
+~~~
+
+<code>hintText</code> also accepts JSX:
+
+~~~tsx
+<SimpleTagInput
+    hintText={<span>Add your technology tags</span>}
+    value={tags}
+    onChange={setTags}
+/>
+~~~
+
+### <code>separators</code>
+
+~~~ts
+separators?: string[]
+~~~
+
+Defines which <code>KeyboardEvent.key</code> values create a tag. The default is <code>['Enter', ',']</code>.
+
+~~~tsx
+<SimpleTagInput separators={['Enter']} value={tags} onChange={setTags} />
+<SimpleTagInput separators={['Enter', 'Tab']} value={tags} onChange={setTags} />
+<SimpleTagInput separators={['Enter', ';']} value={tags} onChange={setTags} />
+~~~
+
+### <code>maxTags</code> and <code>allowDuplicates</code>
+
+~~~ts
+maxTags?: number
+allowDuplicates?: boolean
+~~~
+
+<code>maxTags</code> ignores additional tags after the limit is reached; existing tags are never removed automatically. <code>allowDuplicates</code> defaults to <code>false</code> and controls whether an already-present tag can be added again.
+
+~~~tsx
+<SimpleTagInput
+    value={tags}
+    onChange={setTags}
+    maxTags={5}
+    allowDuplicates={false}
+/>
+~~~
+
+With duplicates disabled, adding <code>React</code>, <code>React</code>, and <code>React</code> produces one tag. With <code>allowDuplicates</code> enabled, all three can be added.
+
+### <code>normalizeTag</code>
+
+~~~ts
+normalizeTag?: (tag: string) => string
+~~~
+
+Transforms a tag before validation and duplicate checking. This is useful for trimming or normalizing case:
+
+~~~tsx
+<SimpleTagInput
+    value={tags}
+    onChange={setTags}
+    normalizeTag={tag => tag.trim().toLowerCase()}
+/>
+~~~
+
+Input <code>  REACT</code> becomes <code>react</code>. With <code>allowDuplicates={false}</code>, <code>React</code>, <code>react</code>, and <code>REACT</code> are treated as the same tag when using <code>tag =&gt; tag.toLowerCase()</code>.
+
+### <code>validateTag</code> and <code>onInvalidTag</code>
+
+~~~ts
+validateTag?: (tag: string) => boolean | string
+onInvalidTag?: (tag: string, reason?: string) => void
+~~~
+
+Validation runs after normalization. Return <code>true</code> to accept a tag, <code>false</code> to reject it without a reason, or a string to reject it and provide that reason.
+
+~~~tsx
+<SimpleTagInput
+    value={tags}
+    onChange={setTags}
+    validateTag={tag =>
+        tag.length >= 3
+            ? true
+            : 'Tag must contain at least 3 characters'
+    }
+    onInvalidTag={(tag, reason) => {
+        console.log(tag, reason)
+    }}
+/>
+~~~
+
+### <code>onTagAdd</code> and <code>onTagRemove</code>
+
+~~~ts
+onTagAdd?: (tag: string, index: number) => void
+onTagRemove?: (tag: string, index: number) => void
+~~~
+
+<code>onTagAdd</code> receives the final normalized tag and its resulting index. It is not called for empty, invalid, duplicate, or max-limit-rejected tags.
+
+<code>onTagRemove</code> is triggered by clicking a tag's remove button or pressing Backspace while the input is empty. Its index is the tag's index before removal.
+
+~~~tsx
+<SimpleTagInput
+    value={tags}
+    onChange={setTags}
+    onTagAdd={(tag, index) => console.log('Added:', tag, index)}
+    onTagRemove={(tag, index) => console.log('Removed:', tag, index)}
+/>
+~~~
+
+### <code>acceptOnBlur</code>
+
+~~~ts
+acceptOnBlur?: boolean
+~~~
+
+When enabled, the component attempts to add the current input when focus leaves it. The same normalization, validation, duplicate, and <code>maxTags</code> rules apply.
+
+~~~tsx
+<SimpleTagInput
+    value={tags}
+    onChange={setTags}
+    acceptOnBlur
+/>
+~~~
+
+### <code>clearable</code>, <code>onClear</code>, and <code>clearIcon</code>
+
+~~~ts
+clearable?: boolean
+onClear?: () => void
+clearIcon?: ReactNode
+~~~
+
+<code>clearable</code> shows a clear-all button when at least one tag exists. Clicking it calls <code>onChange([])</code> and then <code>onClear</code>, if provided. The clear action is disabled in read-only and disabled modes.
+
+~~~tsx
+<SimpleTagInput
+    value={tags}
+    onChange={setTags}
+    clearable
+    onClear={() => console.log('All tags cleared')}
+    clearIcon={<span aria-hidden="true">×</span>}
+/>
+~~~
+
+### <code>tagIcon</code> and <code>removeIcon</code>
+
+~~~ts
+tagIcon?: ReactNode
+removeIcon?: ReactNode
+~~~
+
+Both props accept any React node. A runtime icon dependency is not required by <code>taglite</code>.
+
+~~~tsx
+<SimpleTagInput
+    value={tags}
+    onChange={setTags}
+    tagIcon={<span aria-hidden="true">#</span>}
+    removeIcon={<span aria-hidden="true">×</span>}
+/>
+~~~
+
+You can also provide your own SVG:
+
+~~~tsx
+<SimpleTagInput
+    value={tags}
+    onChange={setTags}
+    tagIcon={
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+            {/* ... */}
+        </svg>
+    }
+/>
+~~~
+
+### <code>removeButtonProps</code>
+
+~~~ts
+removeButtonProps?: {
+    className?: string
+    [key: string]: unknown
+}
+~~~
+
+Adds attributes to the remove buttons rendered inside tags. <code>taglite</code> keeps control of the button type, click handler, disabled state, and core behavior.
+
+~~~tsx
+<SimpleTagInput
+    value={tags}
+    onChange={setTags}
+    removeButtonProps={{
+        title: 'Remove tag',
+        className: 'text-red-500',
+    }}
+/>
+~~~
+
+## Read-only, disabled, and native input props
+
+### <code>readOnly</code>
+
+<code>readOnly</code> is inherited from native input attributes. In read-only mode, new tags cannot be added, existing tags cannot be removed, Backspace and blur do not modify tags, and clear-all is disabled. The input can still be focused.
+
+~~~tsx
+<SimpleTagInput value={tags} onChange={setTags} readOnly />
+~~~
+
+### <code>disabled</code>
+
+In disabled mode, the input, tag actions, clear-all action, and keyboard tag actions are disabled. The component does not force focus onto the disabled input.
+
+~~~tsx
+<SimpleTagInput value={tags} onChange={setTags} disabled />
+~~~
+
+### Native input attributes
+
+<code>SimpleTagInput</code> extends <code>InputHTMLAttributes&lt;HTMLInputElement&gt;</code>, so standard attributes are supported unless they conflict with the controlled tag API.
+
+~~~tsx
+<SimpleTagInput
+    value={tags}
+    onChange={setTags}
+    name="tags"
+    id="project-tags"
+    autoComplete="off"
+    autoFocus
+    required
+/>
+~~~
+
+The component intentionally controls <code>value</code> and <code>onChange</code> as its tag-list API.
+
+## Forwarded ref
+
+The component forwards its ref directly to the underlying native <code>&lt;input&gt;</code> element. This is useful for forms, dialogs, keyboard shortcuts, and programmatic focus management.
+
+~~~tsx
+import { useRef } from 'react'
+import { SimpleTagInput } from 'taglite'
+
+export default function Example() {
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    return (
+        <>
+            <SimpleTagInput
+                ref={inputRef}
+                value={tags}
+                onChange={setTags}
+            />
+
+            <button
+                type="button"
+                onClick={() => inputRef.current?.focus()}
+            >
+                Focus input
+            </button>
+        </>
+    )
+}
+~~~
+
+## Common patterns
+
+### Technology tags
+
+~~~tsx
+<SimpleTagInput
+    value={technologies}
+    onChange={setTechnologies}
+    placeholder="Add technology..."
+    normalizeTag={tag => tag.trim()}
+    maxTags={10}
+/>
+~~~
+
+### Product keywords
+
+~~~tsx
+<SimpleTagInput
+    value={keywords}
+    onChange={setKeywords}
+    placeholder="Add keyword..."
+    allowDuplicates={false}
+/>
+~~~
+
+### RTL / Persian
+
+~~~tsx
+<SimpleTagInput
+    direction="rtl"
+    theme="light"
+    value={tags}
+    onChange={setTags}
+    placeholder="برچسب جدید..."
+    hintText="برای افزودن برچسب Enter را بزنید"
+/>
+~~~
+
+### Strict validation
+
+~~~tsx
+<SimpleTagInput
+    value={tags}
+    onChange={setTags}
+    validateTag={tag =>
+        /^[a-z0-9-]+$/i.test(tag)
+            ? true
+            : 'Only letters, numbers, and hyphens are allowed'
+    }
+/>
+~~~
+
+## Accessibility
+
+The component uses native HTML controls and provides accessible labels for tag removal buttons. The default remove button receives a label based on the tag name, such as:
+
+~~~text
+Remove tag React
+~~~
+
+When replacing icons with custom React nodes, keep decorative icons <code>aria-hidden</code> when the icon itself does not provide information. For form-level labels, descriptions, and validation messages, use your application's surrounding form or field structure rather than duplicating field abstractions inside <code>SimpleTagInput</code>.
+
+## TypeScript
+
+The package exposes its public component and theme types:
+
+~~~tsx
+import {
+    SimpleTagInput,
+    type SimpleTagInputProps,
+    type SimpleTagInputTheme,
+} from 'taglite'
+~~~
+
+~~~ts
+const theme: SimpleTagInputTheme = 'dracula'
+
+const props: SimpleTagInputProps = {
+    value: [],
+    onChange: tags => {
+        console.log(tags)
+    },
+    theme,
+}
+~~~
+
+## Performance notes
+
+<code>taglite</code> is designed to stay small and lightweight:
+
+- no runtime dependencies
+- inline SVG icons instead of an icon package
+- controlled tag state managed by the parent
+- memoized tag rendering
+- cached theme styles
+- simple array operations for normal add/remove flows
+- no animation library
+- no built-in network or asynchronous logic
+
+For large tag collections, keep the <code>value</code> reference stable when the tags themselves have not changed.
+
+## Development
+
+Clone the repository, install dependencies, and start the Vite development server:
+
+~~~bash
+npm install
+npm run dev
+~~~
+
+Available scripts:
+
+| Command | Purpose |
+| --- | --- |
+| <code>npm run dev</code> | Start the Vite dev server with HMR |
+| <code>npm run build</code> | Type-check and create the production app bundle |
+| <code>npm run build:lib</code> | Build the distributable library and declaration files |
+| <code>npm run lint</code> | Run ESLint across the repository |
+| <code>npm run preview</code> | Preview the production build locally |
+
+There is currently no automated test runner or <code>npm test</code> script. When behavior grows beyond manual verification, add focused component tests covering tag creation with Enter/comma, duplicate handling, removal, keyboard behavior, focus states, and each supported theme.
+
+## License
+
+MIT

package/dist/components/SimpleTagInput/SimpleTagInput.d.ts

@@ -0,0 +1,3 @@
+import type { SimpleTagInputProps } from './SimpleTagInput.types';
+declare const _default: import("react").ForwardRefExoticComponent<SimpleTagInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export default _default;

package/dist/components/SimpleTagInput/SimpleTagInput.types.d.ts

@@ -0,0 +1,28 @@
+import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+export type SimpleTagInputTheme = 'default' | 'light' | 'dark' | 'cupcake' | 'emerald' | 'corporate' | 'retro' | 'dracula';
+export interface SimpleTagInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    className?: string;
+    value: string[];
+    onChange: (tags: string[]) => void;
+    direction?: 'ltr' | 'rtl';
+    theme?: SimpleTagInputTheme;
+    placeholder?: string;
+    hintText?: ReactNode;
+    tagIcon?: ReactNode;
+    removeIcon?: ReactNode;
+    clearIcon?: ReactNode;
+    separators?: string[];
+    maxTags?: number;
+    allowDuplicates?: boolean;
+    normalizeTag?: (tag: string) => string;
+    validateTag?: (tag: string) => boolean | string;
+    onInvalidTag?: (tag: string, reason?: string) => void;
+    onTagAdd?: (tag: string, index: number) => void;
+    onTagRemove?: (tag: string, index: number) => void;
+    acceptOnBlur?: boolean;
+    clearable?: boolean;
+    onClear?: () => void;
+    removeButtonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'onClick' | 'disabled' | 'className'> & {
+        className?: string;
+    };
+}

package/dist/components/SimpleTagInput/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SimpleTagInput } from './SimpleTagInput';
+export { default as ProductTagsInput } from './SimpleTagInput';
+export type { SimpleTagInputProps, SimpleTagInputTheme } from './SimpleTagInput.types';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { SimpleTagInput } from './components/SimpleTagInput';
+export type { SimpleTagInputProps, SimpleTagInputTheme } from './components/SimpleTagInput';

package/dist/taglite.cjs

@@ -0,0 +1,3 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("react/jsx-runtime");var n={background:`#ffffff`,backgroundHover:`#ffffff`,border:`#d1d5db`,borderFocus:`#111827`,ring:`rgba(17, 24, 39, 0.10)`,text:`#111827`,placeholder:`#9ca3af`,mutedText:`#9ca3af`,tagBackground:`#f3f4f6`,tagBorder:`#e5e7eb`,tagText:`#374151`,tagHoverBackground:`#e5e7eb`,tagHoverBorder:`#d1d5db`,removeText:`#6b7280`,removeHoverBackground:`#e5e7eb`,removeHoverText:`#111827`,radius:`1rem`,tagRadius:`1rem`,shadow:`0 1px 2px rgba(0, 0, 0, 0.03)`,focusShadow:`0 0 0 3px rgba(17, 24, 39, 0.10)`},r={default:n,light:n,dark:{background:`#111827`,backgroundHover:`#111827`,border:`#374151`,borderFocus:`#f9fafb`,ring:`rgba(249, 250, 251, 0.10)`,text:`#f9fafb`,placeholder:`#6b7280`,mutedText:`#6b7280`,tagBackground:`#1f2937`,tagBorder:`#374151`,tagText:`#e5e7eb`,tagHoverBackground:`#374151`,tagHoverBorder:`#4b5563`,removeText:`#9ca3af`,removeHoverBackground:`#374151`,removeHoverText:`#f9fafb`,radius:`1rem`,tagRadius:`1rem`,shadow:`0 1px 2px rgba(0, 0, 0, 0.30)`,focusShadow:`0 0 0 3px rgba(249, 250, 251, 0.10)`},cupcake:{background:`#fff7f3`,backgroundHover:`#fffaf7`,border:`#f0c8c0`,borderFocus:`#e6a89c`,ring:`rgba(230, 168, 156, 0.20)`,text:`#5c4b51`,placeholder:`#a9959c`,mutedText:`#a9959c`,tagBackground:`#f9dfe5`,tagBorder:`#efc4ce`,tagText:`#7b4f5b`,tagHoverBackground:`#f6d2da`,tagHoverBorder:`#e8b4c0`,removeText:`#a86b78`,removeHoverBackground:`#efc4ce`,removeHoverText:`#693f4b`,radius:`1rem`,tagRadius:`1rem`,shadow:`0 2px 8px rgba(92, 75, 81, 0.06)`,focusShadow:`0 0 0 3px rgba(230, 168, 156, 0.20)`},emerald:{background:`#ffffff`,backgroundHover:`#fafffd`,border:`#a7d8c5`,borderFocus:`#10b981`,ring:`rgba(16, 185, 129, 0.14)`,text:`#163c31`,placeholder:`#7ca396`,mutedText:`#7ca396`,tagBackground:`#dff7ec`,tagBorder:`#b8ead4`,tagText:`#087f5b`,tagHoverBackground:`#cef1e1`,tagHoverBorder:`#9fdfc5`,removeText:`#2f9678`,removeHoverBackground:`#b8ead4`,removeHoverText:`#087f5b`,radius:`1rem`,tagRadius:`1rem`,shadow:`0 1px 3px rgba(16, 185, 129, 0.08)`,focusShadow:`0 0 0 3px rgba(16, 185, 129, 0.14)`},corporate:{background:`#ffffff`,backgroundHover:`#ffffff`,border:`#cbd5e1`,borderFocus:`#1d4ed8`,ring:`rgba(29, 78, 216, 0.12)`,text:`#0f172a`,placeholder:`#94a3b8`,mutedText:`#94a3b8`,tagBackground:`#eff6ff`,tagBorder:`#bfdbfe`,tagText:`#1d4ed8`,tagHoverBackground:`#dbeafe`,tagHoverBorder:`#93c5fd`,removeText:`#64748b`,removeHoverBackground:`#dbeafe`,removeHoverText:`#1d4ed8`,radius:`1rem`,tagRadius:`1rem`,shadow:`0 1px 2px rgba(15, 23, 42, 0.04)`,focusShadow:`0 0 0 3px rgba(29, 78, 216, 0.12)`},retro:{background:`#fdf6e3`,backgroundHover:`#fffaf0`,border:`#b8a27a`,borderFocus:`#9f1239`,ring:`rgba(159, 18, 57, 0.14)`,text:`#3f2f23`,placeholder:`#9b8b73`,mutedText:`#9b8b73`,tagBackground:`#f4d8a8`,tagBorder:`#d9b77a`,tagText:`#5c3b16`,tagHoverBackground:`#efd09a`,tagHoverBorder:`#cda967`,removeText:`#8b5e34`,removeHoverBackground:`#e7bf7e`,removeHoverText:`#5c3b16`,radius:`1rem`,tagRadius:`1rem`,shadow:`2px 2px 0 rgba(63, 47, 35, 0.12)`,focusShadow:`0 0 0 3px rgba(159, 18, 57, 0.14)`},dracula:{background:`#282a36`,backgroundHover:`#2d2f3b`,border:`#44475a`,borderFocus:`#bd93f9`,ring:`rgba(189, 147, 249, 0.18)`,text:`#f8f8f2`,placeholder:`#6272a4`,mutedText:`#6272a4`,tagBackground:`#44475a`,tagBorder:`#6272a4`,tagText:`#f8f8f2`,tagHoverBackground:`#4f5266`,tagHoverBorder:`#bd93f9`,removeText:`#bd93f9`,removeHoverBackground:`#6272a4`,removeHoverText:`#f8f8f2`,radius:`1rem`,tagRadius:`1rem`,shadow:`0 2px 8px rgba(0, 0, 0, 0.30)`,focusShadow:`0 0 0 3px rgba(189, 147, 249, 0.18)`}};function i(e){return{"--pti-background":e.background,"--pti-background-hover":e.backgroundHover,"--pti-border":e.border,"--pti-border-focus":e.borderFocus,"--pti-ring":e.ring,"--pti-text":e.text,"--pti-placeholder":e.placeholder,"--pti-muted-text":e.mutedText,"--pti-tag-background":e.tagBackground,"--pti-tag-border":e.tagBorder,"--pti-tag-text":e.tagText,"--pti-tag-hover-background":e.tagHoverBackground,"--pti-tag-hover-border":e.tagHoverBorder,"--pti-remove-text":e.removeText,"--pti-remove-hover-background":e.removeHoverBackground,"--pti-remove-hover-text":e.removeHoverText,"--pti-radius":e.radius,"--pti-tag-radius":e.tagRadius,"--pti-shadow":e.shadow,"--pti-focus-shadow":e.focusShadow}}var a={default:i(r.default),light:i(r.light),dark:i(r.dark),cupcake:i(r.cupcake),emerald:i(r.emerald),corporate:i(r.corporate),retro:i(r.retro),dracula:i(r.dracula)};function o(e){return(0,t.jsxs)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.8`,"aria-hidden":`true`,...e,children:[(0,t.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,d:`M20.59 13.41 13.41 20.59a2 2 0 0 1-2.82 0L3.41 13.41a2 2 0 0 1 0-2.82L10.59 3a2 2 0 0 1 1.41-.59H19a2 2 0 0 1 2 2v7a2 2 0 0 1-.59 1.41Z`}),(0,t.jsx)(`circle`,{cx:`16`,cy:`8`,r:`1`,fill:`currentColor`,stroke:`none`})]})}function s(e){return(0,t.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,"aria-hidden":`true`,...e,children:(0,t.jsx)(`path`,{strokeLinecap:`round`,d:`M6 6 18 18M18 6 6 18`})})}function c(e){return(0,t.jsx)(`svg`,{viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.8`,"aria-hidden":`true`,...e,children:(0,t.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,d:`m6 6 12 12M18 6 6 18`})})}var l=(0,e.memo)(function({value:e,onChange:n,tagIcon:r,removeIcon:i,onTagRemove:a,removeButtonProps:c,disabled:l=!1,readOnly:u=!1}){let d=t=>{let r=e[t];r!==void 0&&(n([...e.slice(0,t),...e.slice(t+1)]),a?.(r,t))};return(0,t.jsx)(t.Fragment,{children:e.map((e,n)=>(0,t.jsxs)(`span`,{className:`taglite-tag`,children:[r??(0,t.jsx)(o,{className:`taglite-tag-icon`}),(0,t.jsx)(`span`,{className:`taglite-tag-label`,children:e}),(0,t.jsx)(`button`,{type:`button`,"aria-label":c?.[`aria-label`]??`Remove tag ${e}`,...c,disabled:l||u,onClick:e=>{e.stopPropagation(),d(n)},className:`taglite-remove-button ${c?.className??``}`,children:i??(0,t.jsx)(s,{className:`taglite-remove-icon`})})]},`${e}-${n}`))})}),u=[`Enter`,`,`],d={Enter:`
+`,Tab:`	`,Space:` `},f=e=>e.replace(/[.*+?^${}()|[\]\\-]/g,`\\$&`),p=e=>{let t=new Set([`,`,`
+`,`\r`]);for(let n of e){if(n.length===1){t.add(n);continue}let e=d[n];e&&t.add(e)}return[...t]},m=(e,t)=>{let n=p(t).map(f).join(`|`),r=new RegExp(n);return{tags:e.split(r).map(e=>e.trim()).filter(Boolean),hasSeparator:r.test(e)}},h=(0,e.forwardRef)(function({className:n=``,placeholder:r=`Add a new tag...`,hintText:i=`Press Enter to add a tag`,value:o,onChange:s,direction:d=`ltr`,theme:f=`light`,tagIcon:p,removeIcon:h,clearIcon:g,separators:_=u,maxTags:v,allowDuplicates:y=!1,normalizeTag:b,validateTag:x,onInvalidTag:S,onTagAdd:C,onTagRemove:w,acceptOnBlur:T=!1,clearable:E=!1,onClear:D,removeButtonProps:O,disabled:k=!1,readOnly:A=!1,onKeyDown:j,onBlur:M,onPaste:N,...P},F){let[I,L]=(0,e.useState)(``),R=(0,e.useRef)(null),z=v!==void 0&&v<=o.length,B=new Set(_),V=e=>{R.current=e,typeof F==`function`?F(e):F&&(F.current=e)},H=e=>(b?b(e):e).trim(),U=(e,t=!0)=>{if(k||A||z)return t&&L(``),{tags:o,addedTags:[]};let n=[...o],r=[],i=b?new Set(o.map(e=>H(e))):new Set(o);for(let t of e){if(v!==void 0&&n.length>=v)break;let e=H(t);if(e){if(x){let t=x(e);if(t!==!0){S?.(e,typeof t==`string`?t:void 0);continue}}(y||!i.has(e))&&(n.push(e),r.push(e),i.add(e))}}if(r.length>0){let e=o.length;s(n);for(let t=0;t<r.length;t++)C?.(r[t],e+t)}return t&&L(``),{tags:n,addedTags:r}},W=e=>{L(e.target.value)},G=e=>{if(!k&&!A&&B.has(e.key)){e.preventDefault(),U([I]),j?.(e);return}if(!k&&!A&&e.key===`Backspace`&&!I&&o.length>0){let t=o.length-1,n=o[t];e.preventDefault(),s(o.slice(0,-1)),w?.(n,t),j?.(e);return}j?.(e)},K=e=>{if(!k&&!A){let{tags:t,hasSeparator:n}=m(e.clipboardData.getData(`text`),_);n&&(e.preventDefault(),U(t))}N?.(e)},q=e=>{T&&!k&&!A&&I.trim()&&U([I]),M?.(e)},J=()=>{k||A||o.length===0||(s([]),D?.(),L(``),R.current?.focus())};return(0,t.jsxs)(`div`,{dir:d,style:a[f],className:`taglite-root ${k?`taglite-root--disabled`:``} ${n}`,onClick:()=>{k||R.current?.focus()},children:[(0,t.jsx)(`span`,{"aria-hidden":`true`,className:`taglite-liquid-light`,style:{transform:`translate(-50%, -50%)`}}),(0,t.jsxs)(`div`,{className:`taglite-content`,children:[(0,t.jsx)(l,{value:o,onChange:s,tagIcon:p,removeIcon:h,onTagRemove:w,removeButtonProps:O,disabled:k,readOnly:A}),(0,t.jsx)(`input`,{ref:V,type:`text`,value:I,placeholder:r,disabled:k,readOnly:A,onChange:W,onKeyDown:G,onPaste:K,onBlur:q,className:`taglite-input`,...P})]}),E&&o.length>0&&(0,t.jsx)(`button`,{type:`button`,"aria-label":`Clear all tags`,disabled:k||A,onClick:e=>{e.stopPropagation(),J()},className:`taglite-clear-button`,children:g??(0,t.jsx)(c,{className:`taglite-clear-icon`})}),(0,t.jsx)(`div`,{className:`taglite-hint`,children:i})]})});exports.SimpleTagInput=h;

package/dist/taglite.css

@@ -0,0 +1,2 @@
+.taglite-root,.taglite-root *,.taglite-root :before,.taglite-root :after{box-sizing:border-box}.taglite-root{border:1px solid var(--pti-border);border-radius:var(--pti-radius);background:var(--pti-background);width:100%;min-height:3.5rem;color:var(--pti-text);box-shadow:var(--pti-shadow);padding:.625rem .75rem;transition:all .5s;position:relative;overflow:hidden}.taglite-root:focus-within{border-color:var(--pti-border-focus);box-shadow:var(--pti-focus-shadow)}.taglite-root--disabled{cursor:not-allowed;opacity:.6}.taglite-liquid-light{pointer-events:none;background:radial-gradient(circle, var(--pti-ring), transparent 65%);opacity:0;border-radius:9999px;width:100%;height:300%;transition:all .7s ease-out;position:absolute;top:-100%;left:-50%;transform:translate(-50%,-50%)}.taglite-root:focus-within .taglite-liquid-light{opacity:.2;top:50%;left:50%;scale:1}.taglite-content{flex-wrap:wrap;align-items:center;gap:.5rem;min-height:2rem;display:flex;position:relative}.taglite-tag{border:1px solid var(--pti-tag-border);border-radius:var(--pti-tag-radius);background:var(--pti-tag-background);color:var(--pti-tag-text);align-items:center;gap:.375rem;padding:.375rem .625rem;font-size:.75rem;font-weight:500;line-height:1rem;transition:color .3s ease-out,background-color .3s ease-out,border-color .3s ease-out;display:inline-flex}.taglite-tag:hover{border-color:var(--pti-tag-hover-border);background:var(--pti-tag-hover-background)}.taglite-tag-icon,.taglite-remove-icon{width:.75rem;height:.75rem}.taglite-tag-label{text-overflow:ellipsis;white-space:nowrap;max-width:10rem;overflow:hidden}.taglite-remove-button,.taglite-clear-button{cursor:pointer;color:inherit;font:inherit;background:0 0;border:0;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:color .2s,background-color .2s;display:flex}.taglite-remove-button{border-radius:9999px;width:1rem;height:1rem}.taglite-remove-button:hover{background:var(--pti-remove-hover-background)}.taglite-remove-button:disabled,.taglite-clear-button:disabled{pointer-events:none;cursor:not-allowed;opacity:.5}.taglite-input{min-width:8.75rem;color:var(--pti-text);font:inherit;background:0 0;border:0;outline:none;flex:1;padding:.375rem .25rem;font-size:.875rem;line-height:1.25rem;transition:color .3s}.taglite-input::placeholder{color:var(--pti-placeholder)}.taglite-input:disabled{cursor:not-allowed}.taglite-clear-button{inset-inline-end:.75rem;width:1.5rem;height:1.5rem;color:var(--pti-remove-text);border-radius:9999px;position:absolute;top:50%;transform:translateY(-50%)}.taglite-clear-button:hover{background:var(--pti-remove-hover-background);color:var(--pti-remove-hover-text)}.taglite-clear-icon{width:.875rem;height:.875rem}.taglite-hint{pointer-events:none;color:var(--pti-muted-text);opacity:0;margin-top:.375rem;padding:0 .25rem;font-size:10px;transition:opacity .3s,transform .3s;position:relative;transform:translateY(.25rem)}.taglite-root:focus-within .taglite-hint{opacity:1;transform:translateY(0)}
+/*$vite$:1*/

package/dist/taglite.js

@@ -0,0 +1,409 @@
+import { forwardRef as e, memo as t, useRef as n, useState as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/SimpleTagInput/SimpleTagInput.tsx
+var s = {
+	background: "#ffffff",
+	backgroundHover: "#ffffff",
+	border: "#d1d5db",
+	borderFocus: "#111827",
+	ring: "rgba(17, 24, 39, 0.10)",
+	text: "#111827",
+	placeholder: "#9ca3af",
+	mutedText: "#9ca3af",
+	tagBackground: "#f3f4f6",
+	tagBorder: "#e5e7eb",
+	tagText: "#374151",
+	tagHoverBackground: "#e5e7eb",
+	tagHoverBorder: "#d1d5db",
+	removeText: "#6b7280",
+	removeHoverBackground: "#e5e7eb",
+	removeHoverText: "#111827",
+	radius: "1rem",
+	tagRadius: "1rem",
+	shadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
+	focusShadow: "0 0 0 3px rgba(17, 24, 39, 0.10)"
+}, c = {
+	default: s,
+	light: s,
+	dark: {
+		background: "#111827",
+		backgroundHover: "#111827",
+		border: "#374151",
+		borderFocus: "#f9fafb",
+		ring: "rgba(249, 250, 251, 0.10)",
+		text: "#f9fafb",
+		placeholder: "#6b7280",
+		mutedText: "#6b7280",
+		tagBackground: "#1f2937",
+		tagBorder: "#374151",
+		tagText: "#e5e7eb",
+		tagHoverBackground: "#374151",
+		tagHoverBorder: "#4b5563",
+		removeText: "#9ca3af",
+		removeHoverBackground: "#374151",
+		removeHoverText: "#f9fafb",
+		radius: "1rem",
+		tagRadius: "1rem",
+		shadow: "0 1px 2px rgba(0, 0, 0, 0.30)",
+		focusShadow: "0 0 0 3px rgba(249, 250, 251, 0.10)"
+	},
+	cupcake: {
+		background: "#fff7f3",
+		backgroundHover: "#fffaf7",
+		border: "#f0c8c0",
+		borderFocus: "#e6a89c",
+		ring: "rgba(230, 168, 156, 0.20)",
+		text: "#5c4b51",
+		placeholder: "#a9959c",
+		mutedText: "#a9959c",
+		tagBackground: "#f9dfe5",
+		tagBorder: "#efc4ce",
+		tagText: "#7b4f5b",
+		tagHoverBackground: "#f6d2da",
+		tagHoverBorder: "#e8b4c0",
+		removeText: "#a86b78",
+		removeHoverBackground: "#efc4ce",
+		removeHoverText: "#693f4b",
+		radius: "1rem",
+		tagRadius: "1rem",
+		shadow: "0 2px 8px rgba(92, 75, 81, 0.06)",
+		focusShadow: "0 0 0 3px rgba(230, 168, 156, 0.20)"
+	},
+	emerald: {
+		background: "#ffffff",
+		backgroundHover: "#fafffd",
+		border: "#a7d8c5",
+		borderFocus: "#10b981",
+		ring: "rgba(16, 185, 129, 0.14)",
+		text: "#163c31",
+		placeholder: "#7ca396",
+		mutedText: "#7ca396",
+		tagBackground: "#dff7ec",
+		tagBorder: "#b8ead4",
+		tagText: "#087f5b",
+		tagHoverBackground: "#cef1e1",
+		tagHoverBorder: "#9fdfc5",
+		removeText: "#2f9678",
+		removeHoverBackground: "#b8ead4",
+		removeHoverText: "#087f5b",
+		radius: "1rem",
+		tagRadius: "1rem",
+		shadow: "0 1px 3px rgba(16, 185, 129, 0.08)",
+		focusShadow: "0 0 0 3px rgba(16, 185, 129, 0.14)"
+	},
+	corporate: {
+		background: "#ffffff",
+		backgroundHover: "#ffffff",
+		border: "#cbd5e1",
+		borderFocus: "#1d4ed8",
+		ring: "rgba(29, 78, 216, 0.12)",
+		text: "#0f172a",
+		placeholder: "#94a3b8",
+		mutedText: "#94a3b8",
+		tagBackground: "#eff6ff",
+		tagBorder: "#bfdbfe",
+		tagText: "#1d4ed8",
+		tagHoverBackground: "#dbeafe",
+		tagHoverBorder: "#93c5fd",
+		removeText: "#64748b",
+		removeHoverBackground: "#dbeafe",
+		removeHoverText: "#1d4ed8",
+		radius: "1rem",
+		tagRadius: "1rem",
+		shadow: "0 1px 2px rgba(15, 23, 42, 0.04)",
+		focusShadow: "0 0 0 3px rgba(29, 78, 216, 0.12)"
+	},
+	retro: {
+		background: "#fdf6e3",
+		backgroundHover: "#fffaf0",
+		border: "#b8a27a",
+		borderFocus: "#9f1239",
+		ring: "rgba(159, 18, 57, 0.14)",
+		text: "#3f2f23",
+		placeholder: "#9b8b73",
+		mutedText: "#9b8b73",
+		tagBackground: "#f4d8a8",
+		tagBorder: "#d9b77a",
+		tagText: "#5c3b16",
+		tagHoverBackground: "#efd09a",
+		tagHoverBorder: "#cda967",
+		removeText: "#8b5e34",
+		removeHoverBackground: "#e7bf7e",
+		removeHoverText: "#5c3b16",
+		radius: "1rem",
+		tagRadius: "1rem",
+		shadow: "2px 2px 0 rgba(63, 47, 35, 0.12)",
+		focusShadow: "0 0 0 3px rgba(159, 18, 57, 0.14)"
+	},
+	dracula: {
+		background: "#282a36",
+		backgroundHover: "#2d2f3b",
+		border: "#44475a",
+		borderFocus: "#bd93f9",
+		ring: "rgba(189, 147, 249, 0.18)",
+		text: "#f8f8f2",
+		placeholder: "#6272a4",
+		mutedText: "#6272a4",
+		tagBackground: "#44475a",
+		tagBorder: "#6272a4",
+		tagText: "#f8f8f2",
+		tagHoverBackground: "#4f5266",
+		tagHoverBorder: "#bd93f9",
+		removeText: "#bd93f9",
+		removeHoverBackground: "#6272a4",
+		removeHoverText: "#f8f8f2",
+		radius: "1rem",
+		tagRadius: "1rem",
+		shadow: "0 2px 8px rgba(0, 0, 0, 0.30)",
+		focusShadow: "0 0 0 3px rgba(189, 147, 249, 0.18)"
+	}
+};
+function l(e) {
+	return {
+		"--pti-background": e.background,
+		"--pti-background-hover": e.backgroundHover,
+		"--pti-border": e.border,
+		"--pti-border-focus": e.borderFocus,
+		"--pti-ring": e.ring,
+		"--pti-text": e.text,
+		"--pti-placeholder": e.placeholder,
+		"--pti-muted-text": e.mutedText,
+		"--pti-tag-background": e.tagBackground,
+		"--pti-tag-border": e.tagBorder,
+		"--pti-tag-text": e.tagText,
+		"--pti-tag-hover-background": e.tagHoverBackground,
+		"--pti-tag-hover-border": e.tagHoverBorder,
+		"--pti-remove-text": e.removeText,
+		"--pti-remove-hover-background": e.removeHoverBackground,
+		"--pti-remove-hover-text": e.removeHoverText,
+		"--pti-radius": e.radius,
+		"--pti-tag-radius": e.tagRadius,
+		"--pti-shadow": e.shadow,
+		"--pti-focus-shadow": e.focusShadow
+	};
+}
+var u = {
+	default: l(c.default),
+	light: l(c.light),
+	dark: l(c.dark),
+	cupcake: l(c.cupcake),
+	emerald: l(c.emerald),
+	corporate: l(c.corporate),
+	retro: l(c.retro),
+	dracula: l(c.dracula)
+};
+function d(e) {
+	return /* @__PURE__ */ o("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.8",
+		"aria-hidden": "true",
+		...e,
+		children: [/* @__PURE__ */ a("path", {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			d: "M20.59 13.41 13.41 20.59a2 2 0 0 1-2.82 0L3.41 13.41a2 2 0 0 1 0-2.82L10.59 3a2 2 0 0 1 1.41-.59H19a2 2 0 0 1 2 2v7a2 2 0 0 1-.59 1.41Z"
+		}), /* @__PURE__ */ a("circle", {
+			cx: "16",
+			cy: "8",
+			r: "1",
+			fill: "currentColor",
+			stroke: "none"
+		})]
+	});
+}
+function f(e) {
+	return /* @__PURE__ */ a("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		"aria-hidden": "true",
+		...e,
+		children: /* @__PURE__ */ a("path", {
+			strokeLinecap: "round",
+			d: "M6 6 18 18M18 6 6 18"
+		})
+	});
+}
+function p(e) {
+	return /* @__PURE__ */ a("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.8",
+		"aria-hidden": "true",
+		...e,
+		children: /* @__PURE__ */ a("path", {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			d: "m6 6 12 12M18 6 6 18"
+		})
+	});
+}
+var m = t(function({ value: e, onChange: t, tagIcon: n, removeIcon: r, onTagRemove: s, removeButtonProps: c, disabled: l = !1, readOnly: u = !1 }) {
+	let p = (n) => {
+		let r = e[n];
+		r !== void 0 && (t([...e.slice(0, n), ...e.slice(n + 1)]), s?.(r, n));
+	};
+	return /* @__PURE__ */ a(i, { children: e.map((e, t) => /* @__PURE__ */ o("span", {
+		className: "taglite-tag",
+		children: [
+			n ?? /* @__PURE__ */ a(d, { className: "taglite-tag-icon" }),
+			/* @__PURE__ */ a("span", {
+				className: "taglite-tag-label",
+				children: e
+			}),
+			/* @__PURE__ */ a("button", {
+				type: "button",
+				"aria-label": c?.["aria-label"] ?? `Remove tag ${e}`,
+				...c,
+				disabled: l || u,
+				onClick: (e) => {
+					e.stopPropagation(), p(t);
+				},
+				className: `taglite-remove-button ${c?.className ?? ""}`,
+				children: r ?? /* @__PURE__ */ a(f, { className: "taglite-remove-icon" })
+			})
+		]
+	}, `${e}-${t}`)) });
+}), h = ["Enter", ","], g = {
+	Enter: "\n",
+	Tab: "	",
+	Space: " "
+}, _ = (e) => e.replace(/[.*+?^${}()|[\]\\-]/g, "\\$&"), v = (e) => {
+	let t = /* @__PURE__ */ new Set([
+		",",
+		"\n",
+		"\r"
+	]);
+	for (let n of e) {
+		if (n.length === 1) {
+			t.add(n);
+			continue;
+		}
+		let e = g[n];
+		e && t.add(e);
+	}
+	return [...t];
+}, y = (e, t) => {
+	let n = v(t).map(_).join("|"), r = new RegExp(n);
+	return {
+		tags: e.split(r).map((e) => e.trim()).filter(Boolean),
+		hasSeparator: r.test(e)
+	};
+}, b = e(function({ className: e = "", placeholder: t = "Add a new tag...", hintText: i = "Press Enter to add a tag", value: s, onChange: c, direction: l = "ltr", theme: d = "light", tagIcon: f, removeIcon: g, clearIcon: _, separators: v = h, maxTags: b, allowDuplicates: x = !1, normalizeTag: S, validateTag: C, onInvalidTag: w, onTagAdd: T, onTagRemove: E, acceptOnBlur: D = !1, clearable: O = !1, onClear: k, removeButtonProps: A, disabled: j = !1, readOnly: M = !1, onKeyDown: N, onBlur: P, onPaste: F, ...I }, L) {
+	let [R, z] = r(""), B = n(null), V = b !== void 0 && b <= s.length, H = new Set(v), U = (e) => {
+		B.current = e, typeof L == "function" ? L(e) : L && (L.current = e);
+	}, W = (e) => (S ? S(e) : e).trim(), G = (e, t = !0) => {
+		if (j || M || V) return t && z(""), {
+			tags: s,
+			addedTags: []
+		};
+		let n = [...s], r = [], i = S ? new Set(s.map((e) => W(e))) : new Set(s);
+		for (let t of e) {
+			if (b !== void 0 && n.length >= b) break;
+			let e = W(t);
+			if (e) {
+				if (C) {
+					let t = C(e);
+					if (t !== !0) {
+						w?.(e, typeof t == "string" ? t : void 0);
+						continue;
+					}
+				}
+				(x || !i.has(e)) && (n.push(e), r.push(e), i.add(e));
+			}
+		}
+		if (r.length > 0) {
+			let e = s.length;
+			c(n);
+			for (let t = 0; t < r.length; t++) T?.(r[t], e + t);
+		}
+		return t && z(""), {
+			tags: n,
+			addedTags: r
+		};
+	}, K = (e) => {
+		z(e.target.value);
+	}, q = (e) => {
+		if (!j && !M && H.has(e.key)) {
+			e.preventDefault(), G([R]), N?.(e);
+			return;
+		}
+		if (!j && !M && e.key === "Backspace" && !R && s.length > 0) {
+			let t = s.length - 1, n = s[t];
+			e.preventDefault(), c(s.slice(0, -1)), E?.(n, t), N?.(e);
+			return;
+		}
+		N?.(e);
+	}, J = (e) => {
+		if (!j && !M) {
+			let { tags: t, hasSeparator: n } = y(e.clipboardData.getData("text"), v);
+			n && (e.preventDefault(), G(t));
+		}
+		F?.(e);
+	}, Y = (e) => {
+		D && !j && !M && R.trim() && G([R]), P?.(e);
+	}, X = () => {
+		j || M || s.length === 0 || (c([]), k?.(), z(""), B.current?.focus());
+	};
+	return /* @__PURE__ */ o("div", {
+		dir: l,
+		style: u[d],
+		className: `taglite-root ${j ? "taglite-root--disabled" : ""} ${e}`,
+		onClick: () => {
+			j || B.current?.focus();
+		},
+		children: [
+			/* @__PURE__ */ a("span", {
+				"aria-hidden": "true",
+				className: "taglite-liquid-light",
+				style: { transform: "translate(-50%, -50%)" }
+			}),
+			/* @__PURE__ */ o("div", {
+				className: "taglite-content",
+				children: [/* @__PURE__ */ a(m, {
+					value: s,
+					onChange: c,
+					tagIcon: f,
+					removeIcon: g,
+					onTagRemove: E,
+					removeButtonProps: A,
+					disabled: j,
+					readOnly: M
+				}), /* @__PURE__ */ a("input", {
+					ref: U,
+					type: "text",
+					value: R,
+					placeholder: t,
+					disabled: j,
+					readOnly: M,
+					onChange: K,
+					onKeyDown: q,
+					onPaste: J,
+					onBlur: Y,
+					className: "taglite-input",
+					...I
+				})]
+			}),
+			O && s.length > 0 && /* @__PURE__ */ a("button", {
+				type: "button",
+				"aria-label": "Clear all tags",
+				disabled: j || M,
+				onClick: (e) => {
+					e.stopPropagation(), X();
+				},
+				className: "taglite-clear-button",
+				children: _ ?? /* @__PURE__ */ a(p, { className: "taglite-clear-icon" })
+			}),
+			/* @__PURE__ */ a("div", {
+				className: "taglite-hint",
+				children: i
+			})
+		]
+	});
+});
+//#endregion
+export { b as SimpleTagInput };

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "taglite",
+  "version": "0.1.0",
+  "description": "A lightweight, dependency-free React tag input component.",
+  "keywords": [
+    "react",
+    "tag-input",
+    "tags-input",
+    "typescript",
+    "component"
+  ],
+  "homepage": "https://github.com/hossein-nj/taglite#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hossein-nj/taglite.git"
+  },
+  "bugs": {
+    "url": "https://github.com/hossein-nj/taglite/issues"
+  },
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/taglite.cjs",
+  "module": "./dist/taglite.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/taglite.js",
+      "require": "./dist/taglite.cjs"
+    },
+    "./style.css": "./dist/taglite.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --mode lib && tsc -p tsconfig.lib.json",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tailwindcss": "^4.3.3",
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@vitejs/plugin-react": "^6.1.1",
+    "eslint": "^10.10.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.6",
+    "globals": "^17.12.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.69.0",
+    "vite": "^8.3.0"
+  }
+}