@memelabui/ui 0.8.0 → 0.8.1

package/dist/index.cjs

@@ -513,126 +513,129 @@ var Textarea = React.forwardRef(function Textarea2({ hasError, label, error, hel
     helperText && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: "text-white/40 text-xs mt-1", children: helperText })
   ] });
 });
-function TagInput({
-  value,
-  onChange,
-  placeholder,
-  disabled = false,
-  label,
-  error,
-  maxTags,
-  className,
-  id: externalId
-}) {
-  const generatedId = React.useId();
-  const inputId = externalId ?? generatedId;
-  const errorId = error ? `${inputId}-error` : void 0;
-  const inputRef = React.useRef(null);
-  const atMax = maxTags !== void 0 && value.length >= maxTags;
-  function addTag(raw) {
-    const tag = raw.trim();
-    if (!tag || value.includes(tag) || atMax) return;
-    onChange([...value, tag]);
-  }
-  function removeTag(index) {
-    onChange(value.filter((_, i) => i !== index));
-  }
-  function handleKeyDown(e) {
-    const input = inputRef.current;
-    if (!input) return;
-    if (e.key === "Enter" || e.key === "," || e.key === "Tab") {
-      if (input.value) {
-        e.preventDefault();
-        addTag(input.value);
-        input.value = "";
-      }
-      return;
+var TagInput = React.forwardRef(
+  function TagInput2({
+    value,
+    onChange,
+    placeholder,
+    disabled = false,
+    label,
+    error,
+    maxTags,
+    className,
+    id: externalId
+  }, ref) {
+    const generatedId = React.useId();
+    const inputId = externalId ?? generatedId;
+    const errorId = error ? `${inputId}-error` : void 0;
+    const internalRef = React.useRef(null);
+    const inputRef = ref ?? internalRef;
+    const atMax = maxTags !== void 0 && value.length >= maxTags;
+    function addTag(raw) {
+      const tag = raw.trim();
+      if (!tag || value.includes(tag) || atMax) return;
+      onChange([...value, tag]);
     }
-    if (e.key === "Backspace" && !input.value && value.length > 0) {
-      removeTag(value.length - 1);
+    function removeTag(index) {
+      onChange(value.filter((_, i) => i !== index));
     }
-  }
-  function handlePaste(e) {
-    const pasted = e.clipboardData.getData("text");
-    if (!pasted.includes(",")) return;
-    e.preventDefault();
-    const parts = pasted.split(",");
-    const next = [...value];
-    for (const part of parts) {
-      const tag = part.trim();
-      if (tag && !next.includes(tag)) {
-        if (maxTags !== void 0 && next.length >= maxTags) break;
-        next.push(tag);
+    function handleKeyDown(e) {
+      const input = inputRef.current;
+      if (!input) return;
+      if (e.key === "Enter" || e.key === "," || e.key === "Tab") {
+        if (input.value) {
+          e.preventDefault();
+          addTag(input.value);
+          input.value = "";
+        }
+        return;
+      }
+      if (e.key === "Backspace" && !input.value && value.length > 0) {
+        removeTag(value.length - 1);
       }
     }
-    onChange(next);
-    if (inputRef.current) inputRef.current.value = "";
-  }
-  const wrapper = /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "flex flex-wrap items-center gap-1.5 min-h-[42px] w-full rounded-xl px-3 py-2 bg-white/10 ring-1 ring-white/10 transition-shadow focus-within:ring-2 focus-within:ring-primary/40",
-        error && "ring-2 ring-rose-500/40 focus-within:ring-rose-500/40",
-        disabled && "opacity-50 cursor-not-allowed",
-        className
-      ),
-      onClick: () => inputRef.current?.focus(),
-      children: [
-        value.map((tag, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
-          {
-            className: "inline-flex items-center gap-1 bg-white/10 text-white/90 rounded-full text-xs px-2.5 py-1 ring-1 ring-white/10",
-            children: [
-              tag,
-              !disabled && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": `Remove ${tag}`,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    removeTag(i);
-                  },
-                  className: "text-white/50 hover:text-white/90 transition-colors leading-none",
-                  children: "\u2715"
-                }
-              )
-            ]
-          },
-          `${tag}-${i}`
-        )),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ref: inputRef,
-            id: inputId,
-            type: "text",
-            disabled: disabled || atMax,
-            placeholder: value.length === 0 ? placeholder : void 0,
-            "aria-invalid": !!error || void 0,
-            "aria-describedby": errorId,
-            onKeyDown: handleKeyDown,
-            onPaste: handlePaste,
-            onBlur: (e) => {
-              if (e.target.value) {
-                addTag(e.target.value);
-                e.target.value = "";
-              }
-            },
-            className: "flex-1 min-w-[120px] bg-transparent text-sm text-white outline-none placeholder-white/30 disabled:cursor-not-allowed"
-          }
-        )
-      ]
+    function handlePaste(e) {
+      const pasted = e.clipboardData.getData("text");
+      if (!pasted.includes(",")) return;
+      e.preventDefault();
+      const parts = pasted.split(",");
+      const next = [...value];
+      for (const part of parts) {
+        const tag = part.trim();
+        if (tag && !next.includes(tag)) {
+          if (maxTags !== void 0 && next.length >= maxTags) break;
+          next.push(tag);
+        }
+      }
+      onChange(next);
+      if (inputRef.current) inputRef.current.value = "";
     }
-  );
-  if (!label && !error) return wrapper;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "block text-sm text-white/70 mb-1.5", children: label }),
-    wrapper,
-    error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: "text-rose-400 text-xs mt-1", children: error })
-  ] });
-}
+    const wrapper = /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-wrap items-center gap-1.5 min-h-[42px] w-full rounded-xl px-3 py-2 bg-white/10 ring-1 ring-white/10 transition-shadow focus-within:ring-2 focus-within:ring-primary/40",
+          error && "ring-2 ring-rose-500/40 focus-within:ring-rose-500/40",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        onClick: () => inputRef.current?.focus(),
+        children: [
+          value.map((tag, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 bg-white/10 text-white/90 rounded-full text-xs px-2.5 py-1 ring-1 ring-white/10",
+              children: [
+                tag,
+                !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${tag}`,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeTag(i);
+                    },
+                    className: "text-white/50 hover:text-white/90 transition-colors leading-none",
+                    children: "\u2715"
+                  }
+                )
+              ]
+            },
+            `${tag}-${i}`
+          )),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: inputId,
+              type: "text",
+              disabled: disabled || atMax,
+              placeholder: value.length === 0 ? placeholder : void 0,
+              "aria-invalid": !!error || void 0,
+              "aria-describedby": errorId,
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              onBlur: (e) => {
+                if (e.target.value) {
+                  addTag(e.target.value);
+                  e.target.value = "";
+                }
+              },
+              className: "flex-1 min-w-[120px] bg-transparent text-sm text-white outline-none placeholder-white/30 disabled:cursor-not-allowed"
+            }
+          )
+        ]
+      }
+    );
+    if (!label && !error) return wrapper;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "block text-sm text-white/70 mb-1.5", children: label }),
+      wrapper,
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: "text-rose-400 text-xs mt-1", children: error })
+    ] });
+  }
+);
 var base3 = "inline-flex items-center justify-center rounded-full font-semibold ring-1 ring-white/10";
 var sizeClass4 = {
   sm: "text-xs px-2.5 py-1",

package/dist/index.d.cts

@@ -199,7 +199,7 @@ type TagInputProps = {
     className?: string;
     id?: string;
 };
-declare function TagInput({ value, onChange, placeholder, disabled, label, error, maxTags, className, id: externalId, }: TagInputProps): react_jsx_runtime.JSX.Element;
+declare const TagInput: react.ForwardRefExoticComponent<TagInputProps & react.RefAttributes<HTMLInputElement>>;
 
 type BadgeVariant = 'neutral' | 'primary' | 'success' | 'successSolid' | 'warning' | 'danger' | 'dangerSolid' | 'accent';
 type BadgeSize = 'sm' | 'md';

package/dist/index.d.ts

@@ -199,7 +199,7 @@ type TagInputProps = {
     className?: string;
     id?: string;
 };
-declare function TagInput({ value, onChange, placeholder, disabled, label, error, maxTags, className, id: externalId, }: TagInputProps): react_jsx_runtime.JSX.Element;
+declare const TagInput: react.ForwardRefExoticComponent<TagInputProps & react.RefAttributes<HTMLInputElement>>;
 
 type BadgeVariant = 'neutral' | 'primary' | 'success' | 'successSolid' | 'warning' | 'danger' | 'dangerSolid' | 'accent';
 type BadgeSize = 'sm' | 'md';

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useId, useMemo, useRef, useEffect, createContext, useCallback, isValidElement, cloneElement, useReducer, useContext, Component } from 'react';
+import React, { forwardRef, useState, useId, useRef, useMemo, useEffect, createContext, useCallback, isValidElement, cloneElement, useReducer, useContext, Component } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -507,126 +507,129 @@ var Textarea = forwardRef(function Textarea2({ hasError, label, error, helperTex
     helperText && !error && /* @__PURE__ */ jsx("p", { id: helperId, className: "text-white/40 text-xs mt-1", children: helperText })
   ] });
 });
-function TagInput({
-  value,
-  onChange,
-  placeholder,
-  disabled = false,
-  label,
-  error,
-  maxTags,
-  className,
-  id: externalId
-}) {
-  const generatedId = useId();
-  const inputId = externalId ?? generatedId;
-  const errorId = error ? `${inputId}-error` : void 0;
-  const inputRef = useRef(null);
-  const atMax = maxTags !== void 0 && value.length >= maxTags;
-  function addTag(raw) {
-    const tag = raw.trim();
-    if (!tag || value.includes(tag) || atMax) return;
-    onChange([...value, tag]);
-  }
-  function removeTag(index) {
-    onChange(value.filter((_, i) => i !== index));
-  }
-  function handleKeyDown(e) {
-    const input = inputRef.current;
-    if (!input) return;
-    if (e.key === "Enter" || e.key === "," || e.key === "Tab") {
-      if (input.value) {
-        e.preventDefault();
-        addTag(input.value);
-        input.value = "";
-      }
-      return;
+var TagInput = forwardRef(
+  function TagInput2({
+    value,
+    onChange,
+    placeholder,
+    disabled = false,
+    label,
+    error,
+    maxTags,
+    className,
+    id: externalId
+  }, ref) {
+    const generatedId = useId();
+    const inputId = externalId ?? generatedId;
+    const errorId = error ? `${inputId}-error` : void 0;
+    const internalRef = useRef(null);
+    const inputRef = ref ?? internalRef;
+    const atMax = maxTags !== void 0 && value.length >= maxTags;
+    function addTag(raw) {
+      const tag = raw.trim();
+      if (!tag || value.includes(tag) || atMax) return;
+      onChange([...value, tag]);
     }
-    if (e.key === "Backspace" && !input.value && value.length > 0) {
-      removeTag(value.length - 1);
+    function removeTag(index) {
+      onChange(value.filter((_, i) => i !== index));
     }
-  }
-  function handlePaste(e) {
-    const pasted = e.clipboardData.getData("text");
-    if (!pasted.includes(",")) return;
-    e.preventDefault();
-    const parts = pasted.split(",");
-    const next = [...value];
-    for (const part of parts) {
-      const tag = part.trim();
-      if (tag && !next.includes(tag)) {
-        if (maxTags !== void 0 && next.length >= maxTags) break;
-        next.push(tag);
+    function handleKeyDown(e) {
+      const input = inputRef.current;
+      if (!input) return;
+      if (e.key === "Enter" || e.key === "," || e.key === "Tab") {
+        if (input.value) {
+          e.preventDefault();
+          addTag(input.value);
+          input.value = "";
+        }
+        return;
+      }
+      if (e.key === "Backspace" && !input.value && value.length > 0) {
+        removeTag(value.length - 1);
       }
     }
-    onChange(next);
-    if (inputRef.current) inputRef.current.value = "";
-  }
-  const wrapper = /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex flex-wrap items-center gap-1.5 min-h-[42px] w-full rounded-xl px-3 py-2 bg-white/10 ring-1 ring-white/10 transition-shadow focus-within:ring-2 focus-within:ring-primary/40",
-        error && "ring-2 ring-rose-500/40 focus-within:ring-rose-500/40",
-        disabled && "opacity-50 cursor-not-allowed",
-        className
-      ),
-      onClick: () => inputRef.current?.focus(),
-      children: [
-        value.map((tag, i) => /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: "inline-flex items-center gap-1 bg-white/10 text-white/90 rounded-full text-xs px-2.5 py-1 ring-1 ring-white/10",
-            children: [
-              tag,
-              !disabled && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": `Remove ${tag}`,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    removeTag(i);
-                  },
-                  className: "text-white/50 hover:text-white/90 transition-colors leading-none",
-                  children: "\u2715"
-                }
-              )
-            ]
-          },
-          `${tag}-${i}`
-        )),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: inputRef,
-            id: inputId,
-            type: "text",
-            disabled: disabled || atMax,
-            placeholder: value.length === 0 ? placeholder : void 0,
-            "aria-invalid": !!error || void 0,
-            "aria-describedby": errorId,
-            onKeyDown: handleKeyDown,
-            onPaste: handlePaste,
-            onBlur: (e) => {
-              if (e.target.value) {
-                addTag(e.target.value);
-                e.target.value = "";
-              }
-            },
-            className: "flex-1 min-w-[120px] bg-transparent text-sm text-white outline-none placeholder-white/30 disabled:cursor-not-allowed"
-          }
-        )
-      ]
+    function handlePaste(e) {
+      const pasted = e.clipboardData.getData("text");
+      if (!pasted.includes(",")) return;
+      e.preventDefault();
+      const parts = pasted.split(",");
+      const next = [...value];
+      for (const part of parts) {
+        const tag = part.trim();
+        if (tag && !next.includes(tag)) {
+          if (maxTags !== void 0 && next.length >= maxTags) break;
+          next.push(tag);
+        }
+      }
+      onChange(next);
+      if (inputRef.current) inputRef.current.value = "";
     }
-  );
-  if (!label && !error) return wrapper;
-  return /* @__PURE__ */ jsxs("div", { children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm text-white/70 mb-1.5", children: label }),
-    wrapper,
-    error && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-rose-400 text-xs mt-1", children: error })
-  ] });
-}
+    const wrapper = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-wrap items-center gap-1.5 min-h-[42px] w-full rounded-xl px-3 py-2 bg-white/10 ring-1 ring-white/10 transition-shadow focus-within:ring-2 focus-within:ring-primary/40",
+          error && "ring-2 ring-rose-500/40 focus-within:ring-rose-500/40",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        onClick: () => inputRef.current?.focus(),
+        children: [
+          value.map((tag, i) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 bg-white/10 text-white/90 rounded-full text-xs px-2.5 py-1 ring-1 ring-white/10",
+              children: [
+                tag,
+                !disabled && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${tag}`,
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeTag(i);
+                    },
+                    className: "text-white/50 hover:text-white/90 transition-colors leading-none",
+                    children: "\u2715"
+                  }
+                )
+              ]
+            },
+            `${tag}-${i}`
+          )),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: inputId,
+              type: "text",
+              disabled: disabled || atMax,
+              placeholder: value.length === 0 ? placeholder : void 0,
+              "aria-invalid": !!error || void 0,
+              "aria-describedby": errorId,
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              onBlur: (e) => {
+                if (e.target.value) {
+                  addTag(e.target.value);
+                  e.target.value = "";
+                }
+              },
+              className: "flex-1 min-w-[120px] bg-transparent text-sm text-white outline-none placeholder-white/30 disabled:cursor-not-allowed"
+            }
+          )
+        ]
+      }
+    );
+    if (!label && !error) return wrapper;
+    return /* @__PURE__ */ jsxs("div", { children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "block text-sm text-white/70 mb-1.5", children: label }),
+      wrapper,
+      error && /* @__PURE__ */ jsx("p", { id: errorId, className: "text-rose-400 text-xs mt-1", children: error })
+    ] });
+  }
+);
 var base3 = "inline-flex items-center justify-center rounded-full font-semibold ring-1 ring-white/10";
 var sizeClass4 = {
   sm: "text-xs px-2.5 py-1",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memelabui/ui",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "MemeLab shared UI component library — React + Tailwind + Glassmorphism",
   "type": "module",
   "sideEffects": [