@pixpilot/shadcn-ui 0.4.0 → 0.4.1

package/dist/tags-input.cjs

@@ -1 +1,226 @@
-"use client";const e=require(`./_virtual/rolldown_runtime.cjs`),t=require(`./CommandOptionList.cjs`);let n=require(`@pixpilot/shadcn`);n=e.__toESM(n);let r=require(`react`);r=e.__toESM(r);let i=require(`react/jsx-runtime`);i=e.__toESM(i);const a=[],o=[];function s({value:e=a,onChange:s,options:c=o,freeSolo:l=!0,placeholder:u=`Add tags...`,emptyText:d=`No options found.`,className:f,disabled:p=!1,readOnly:m=!1,maxTags:h,allowDuplicates:g=!1,editable:_=!1,label:v,delimiter:y=`,`,addOnPaste:b=!0,addOnTab:x=!0,onValidate:S}){let[C,w]=(0,r.useState)(!1),[T,E]=(0,r.useState)(``),D=(0,r.useRef)(null),O=c.length>0;(0,r.useEffect)(()=>{if(C&&D.current){let e=setTimeout(()=>{D.current?.focus()},0);return()=>{clearTimeout(e)}}},[C]);let k=(0,r.useMemo)(()=>e.map(e=>String(e)),[e]),A=(0,r.useCallback)(e=>O?c.find(t=>String(t.value)===String(e))?.label??String(e):String(e),[c,O]),j=(0,r.useMemo)(()=>O?c.filter(e=>T?e.label.toLowerCase().includes(T.toLowerCase()):!0):[],[c,T,O]),M=(0,r.useCallback)(e=>{if(E(``),O){let t=e.map(e=>c.find(t=>String(t.value)===e)?.value??e);s?.(t)}else s?.(e)},[s,c,O]),N=(0,r.useCallback)(t=>h!==void 0&&e.length>=h||!g&&k.includes(t)||O&&!l&&!c.some(e=>String(e.value)===t)?!1:S?S(t):!0,[e,h,g,S,k,O,l,c]),P=(0,r.useCallback)(t=>{let n=e.some(e=>String(e)===String(t)),r;r=n?e.filter(e=>String(e)!==String(t)):[...e,t],s?.(r),E(``)},[e,s]);return O?(0,i.jsxs)(`div`,{className:(0,n.cn)(`relative`,f),children:[v!==void 0&&v!==``?(0,i.jsx)(n.TagsInputInLineLabel,{children:v}):null,(0,i.jsxs)(n.Popover,{open:C&&!p&&!m,onOpenChange:w,children:[(0,i.jsx)(n.PopoverTrigger,{asChild:!0,children:(0,i.jsx)(`div`,{className:`w-full`,children:(0,i.jsxs)(n.TagsInputInLineRoot,{disabled:p,editable:_,max:h,onValueChange:M,onValidate:N,readOnly:m,value:k,delimiter:l?y:void 0,addOnPaste:l?b:!1,addOnTab:l?x:!1,children:[(0,i.jsxs)(n.TagsInputInLineList,{onClick:e=>{!p&&!m&&(e.stopPropagation(),w(!0))},children:[e.map(e=>{let t=A(e);return(0,i.jsx)(n.TagsInputInLineItem,{value:String(e),children:t},String(e))}),(0,i.jsx)(n.TagsInputInLineInput,{ref:D,placeholder:u,onFocus:e=>{e.stopPropagation(),w(!0)},onChange:e=>{e.stopPropagation(),E(e.target.value)},onKeyDown:e=>{if(C&&(e.key===`ArrowDown`||e.key===`ArrowUp`)){e.preventDefault(),e.stopPropagation();let t=document.querySelector(`[cmdk-root]`);if(t){let n=new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0});t.dispatchEvent(n)}return}if(C&&e.key===`Enter`){let t=document.querySelector(`[cmdk-item][data-selected="true"]`);if(t){e.preventDefault(),e.stopPropagation(),t.click();return}}e.stopPropagation()},onMouseDown:e=>{e.stopPropagation()}})]}),e.length>0&&!p&&!m&&(0,i.jsx)(n.TagsInputInLineClear,{})]})})}),(0,i.jsx)(n.PopoverContent,{className:`p-0`,align:`start`,style:{width:`var(--radix-popover-trigger-width)`},onOpenAutoFocus:e=>{e.preventDefault()},children:(0,i.jsx)(n.Command,{shouldFilter:!1,value:T,loop:!0,children:(0,i.jsx)(t.CommandOptionList,{options:j,value:e,onChange:P,emptyText:d})})})]})]}):(0,i.jsxs)(n.TagsInputInLineRoot,{className:f,disabled:p,editable:_,max:h,onValueChange:M,onValidate:N,readOnly:m,value:k,delimiter:y,addOnPaste:b,addOnTab:x,children:[v!==void 0&&v!==``?(0,i.jsx)(n.TagsInputInLineLabel,{children:v}):null,(0,i.jsxs)(n.TagsInputInLineList,{children:[k.map(e=>(0,i.jsx)(n.TagsInputInLineItem,{value:e,children:e},e)),(0,i.jsx)(n.TagsInputInLineInput,{placeholder:u})]}),e.length>0&&!p&&!m&&(0,i.jsx)(n.TagsInputInLineClear,{})]})}exports.TagsInput=s;
+'use client';
+
+
+const require_rolldown_runtime = require('./_virtual/rolldown_runtime.cjs');
+const require_CommandOptionList = require('./CommandOptionList.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/tags-input.tsx
+const EMPTY_ARRAY = [];
+const EMPTY_OPTIONS = [];
+/**
+* TagsInput component - Inline tags input based on DiceUI
+*
+* This is a different implementation than TagsInput, using the DiceUI library
+* for a more streamlined inline editing experience.
+*
+* Features:
+* - Inline tag display and editing
+* - Keyboard navigation (Arrow keys, Home, End, Delete, Backspace)
+* - Optional tag editing (editable prop)
+* - Validation support
+* - Paste support with delimiter parsing
+* - Max tags limit
+* - Options support with dropdown (like Select)
+* - freeSolo mode for custom tags (like MUI Autocomplete)
+*/
+function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const [searchValue, setSearchValue] = (0, react.useState)("");
+	const inputRef = (0, react.useRef)(null);
+	const hasOptions = options.length > 0;
+	(0, react.useEffect)(() => {
+		if (open && inputRef.current) {
+			const timer = setTimeout(() => {
+				inputRef.current?.focus();
+			}, 0);
+			return () => {
+				clearTimeout(timer);
+			};
+		}
+	}, [open]);
+	const stringValues = (0, react.useMemo)(() => {
+		return value.map((v) => String(v));
+	}, [value]);
+	const getLabel = (0, react.useCallback)((val) => {
+		if (!hasOptions) return String(val);
+		return options.find((opt) => String(opt.value) === String(val))?.label ?? String(val);
+	}, [options, hasOptions]);
+	const filteredOptions = (0, react.useMemo)(() => {
+		if (!hasOptions) return [];
+		return options.filter((option) => {
+			if (searchValue) return option.label.toLowerCase().includes(searchValue.toLowerCase());
+			return true;
+		});
+	}, [
+		options,
+		searchValue,
+		hasOptions
+	]);
+	const handleValueChange = (0, react.useCallback)((newTags) => {
+		setSearchValue("");
+		if (hasOptions) {
+			const convertedValues = newTags.map((tag) => {
+				return options.find((opt) => String(opt.value) === tag)?.value ?? tag;
+			});
+			onChange?.(convertedValues);
+		} else onChange?.(newTags);
+	}, [
+		onChange,
+		options,
+		hasOptions
+	]);
+	const handleValidate = (0, react.useCallback)((tag) => {
+		if (maxTags !== void 0 && value.length >= maxTags) return false;
+		if (!allowDuplicates && stringValues.includes(tag)) return false;
+		if (hasOptions && !freeSolo) {
+			if (!options.some((opt) => String(opt.value) === tag)) return false;
+		}
+		if (onValidate) return onValidate(tag);
+		return true;
+	}, [
+		value,
+		maxTags,
+		allowDuplicates,
+		onValidate,
+		stringValues,
+		hasOptions,
+		freeSolo,
+		options
+	]);
+	const handleSelectOption = (0, react.useCallback)((optionValue) => {
+		const isSelected = value.some((v) => String(v) === String(optionValue));
+		let newValues;
+		if (isSelected) newValues = value.filter((v) => String(v) !== String(optionValue));
+		else newValues = [...value, optionValue];
+		onChange?.(newValues);
+		setSearchValue("");
+	}, [value, onChange]);
+	if (!hasOptions) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.TagsInputInLineRoot, {
+		className,
+		disabled,
+		editable,
+		max: maxTags,
+		onValueChange: handleValueChange,
+		onValidate: handleValidate,
+		readOnly,
+		value: stringValues,
+		delimiter,
+		addOnPaste,
+		addOnTab,
+		children: [
+			label !== void 0 && label !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineLabel, { children: label }) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.TagsInputInLineList, { children: [stringValues.map((tag) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineItem, {
+				value: tag,
+				children: tag
+			}, tag)), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineInput, { placeholder })] }),
+			value.length > 0 && !disabled && !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineClear, {})
+		]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, __pixpilot_shadcn.cn)("relative", className),
+		children: [label !== void 0 && label !== "" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineLabel, { children: label }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.Popover, {
+			open: open && !disabled && !readOnly,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "w-full",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.TagsInputInLineRoot, {
+						disabled,
+						editable,
+						max: maxTags,
+						onValueChange: handleValueChange,
+						onValidate: handleValidate,
+						readOnly,
+						value: stringValues,
+						delimiter: freeSolo ? delimiter : void 0,
+						addOnPaste: freeSolo ? addOnPaste : false,
+						addOnTab: freeSolo ? addOnTab : false,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__pixpilot_shadcn.TagsInputInLineList, {
+							onClick: (e) => {
+								if (!disabled && !readOnly) {
+									e.stopPropagation();
+									setOpen(true);
+								}
+							},
+							children: [value.map((val) => {
+								const displayLabel = getLabel(val);
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineItem, {
+									value: String(val),
+									children: displayLabel
+								}, String(val));
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineInput, {
+								ref: inputRef,
+								placeholder,
+								onFocus: (e) => {
+									e.stopPropagation();
+									setOpen(true);
+								},
+								onChange: (e) => {
+									e.stopPropagation();
+									setSearchValue(e.target.value);
+								},
+								onKeyDown: (e) => {
+									if (open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+										e.preventDefault();
+										e.stopPropagation();
+										const command = document.querySelector("[cmdk-root]");
+										if (command) {
+											const event = new KeyboardEvent("keydown", {
+												key: e.key,
+												bubbles: true,
+												cancelable: true
+											});
+											command.dispatchEvent(event);
+										}
+										return;
+									}
+									if (open && e.key === "Enter") {
+										const selectedItem = document.querySelector("[cmdk-item][data-selected=\"true\"]");
+										if (selectedItem) {
+											e.preventDefault();
+											e.stopPropagation();
+											selectedItem.click();
+											return;
+										}
+									}
+									e.stopPropagation();
+								},
+								onMouseDown: (e) => {
+									e.stopPropagation();
+								}
+							})]
+						}), value.length > 0 && !disabled && !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.TagsInputInLineClear, {})]
+					})
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.PopoverContent, {
+				className: "p-0",
+				align: "start",
+				style: { width: "var(--radix-popover-trigger-width)" },
+				onOpenAutoFocus: (e) => {
+					e.preventDefault();
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__pixpilot_shadcn.Command, {
+					shouldFilter: false,
+					value: searchValue,
+					loop: true,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CommandOptionList.CommandOptionList, {
+						options: filteredOptions,
+						value,
+						onChange: handleSelectOption,
+						emptyText
+					})
+				})
+			})]
+		})]
+	});
+}
+
+//#endregion
+exports.TagsInput = TagsInput;

package/dist/tags-input.js

@@ -1 +1,222 @@
-"use client";import{CommandOptionList as e}from"./CommandOptionList.js";import{Command as t,Popover as n,PopoverContent as r,PopoverTrigger as i,TagsInputInLineClear as a,TagsInputInLineInput as o,TagsInputInLineItem as s,TagsInputInLineLabel as c,TagsInputInLineList as l,TagsInputInLineRoot as u,cn as d}from"@pixpilot/shadcn";import{useCallback as f,useEffect as p,useMemo as m,useRef as h,useState as g}from"react";import{jsx as _,jsxs as v}from"react/jsx-runtime";const y=[],b=[];function x({value:x=y,onChange:S,options:C=b,freeSolo:w=!0,placeholder:T=`Add tags...`,emptyText:E=`No options found.`,className:D,disabled:O=!1,readOnly:k=!1,maxTags:A,allowDuplicates:j=!1,editable:M=!1,label:N,delimiter:P=`,`,addOnPaste:F=!0,addOnTab:I=!0,onValidate:L}){let[R,z]=g(!1),[B,V]=g(``),H=h(null),U=C.length>0;p(()=>{if(R&&H.current){let e=setTimeout(()=>{H.current?.focus()},0);return()=>{clearTimeout(e)}}},[R]);let W=m(()=>x.map(e=>String(e)),[x]),G=f(e=>U?C.find(t=>String(t.value)===String(e))?.label??String(e):String(e),[C,U]),K=m(()=>U?C.filter(e=>B?e.label.toLowerCase().includes(B.toLowerCase()):!0):[],[C,B,U]),q=f(e=>{if(V(``),U){let t=e.map(e=>C.find(t=>String(t.value)===e)?.value??e);S?.(t)}else S?.(e)},[S,C,U]),J=f(e=>A!==void 0&&x.length>=A||!j&&W.includes(e)||U&&!w&&!C.some(t=>String(t.value)===e)?!1:L?L(e):!0,[x,A,j,L,W,U,w,C]),Y=f(e=>{let t=x.some(t=>String(t)===String(e)),n;n=t?x.filter(t=>String(t)!==String(e)):[...x,e],S?.(n),V(``)},[x,S]);return U?v(`div`,{className:d(`relative`,D),children:[N!==void 0&&N!==``?_(c,{children:N}):null,v(n,{open:R&&!O&&!k,onOpenChange:z,children:[_(i,{asChild:!0,children:_(`div`,{className:`w-full`,children:v(u,{disabled:O,editable:M,max:A,onValueChange:q,onValidate:J,readOnly:k,value:W,delimiter:w?P:void 0,addOnPaste:w?F:!1,addOnTab:w?I:!1,children:[v(l,{onClick:e=>{!O&&!k&&(e.stopPropagation(),z(!0))},children:[x.map(e=>{let t=G(e);return _(s,{value:String(e),children:t},String(e))}),_(o,{ref:H,placeholder:T,onFocus:e=>{e.stopPropagation(),z(!0)},onChange:e=>{e.stopPropagation(),V(e.target.value)},onKeyDown:e=>{if(R&&(e.key===`ArrowDown`||e.key===`ArrowUp`)){e.preventDefault(),e.stopPropagation();let t=document.querySelector(`[cmdk-root]`);if(t){let n=new KeyboardEvent(`keydown`,{key:e.key,bubbles:!0,cancelable:!0});t.dispatchEvent(n)}return}if(R&&e.key===`Enter`){let t=document.querySelector(`[cmdk-item][data-selected="true"]`);if(t){e.preventDefault(),e.stopPropagation(),t.click();return}}e.stopPropagation()},onMouseDown:e=>{e.stopPropagation()}})]}),x.length>0&&!O&&!k&&_(a,{})]})})}),_(r,{className:`p-0`,align:`start`,style:{width:`var(--radix-popover-trigger-width)`},onOpenAutoFocus:e=>{e.preventDefault()},children:_(t,{shouldFilter:!1,value:B,loop:!0,children:_(e,{options:K,value:x,onChange:Y,emptyText:E})})})]})]}):v(u,{className:D,disabled:O,editable:M,max:A,onValueChange:q,onValidate:J,readOnly:k,value:W,delimiter:P,addOnPaste:F,addOnTab:I,children:[N!==void 0&&N!==``?_(c,{children:N}):null,v(l,{children:[W.map(e=>_(s,{value:e,children:e},e)),_(o,{placeholder:T})]}),x.length>0&&!O&&!k&&_(a,{})]})}export{x as TagsInput};
+'use client';
+
+
+import { CommandOptionList } from "./CommandOptionList.js";
+import { Command, Popover, PopoverContent, PopoverTrigger, TagsInputInLineClear, TagsInputInLineInput, TagsInputInLineItem, TagsInputInLineLabel, TagsInputInLineList, TagsInputInLineRoot, cn } from "@pixpilot/shadcn";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/tags-input.tsx
+const EMPTY_ARRAY = [];
+const EMPTY_OPTIONS = [];
+/**
+* TagsInput component - Inline tags input based on DiceUI
+*
+* This is a different implementation than TagsInput, using the DiceUI library
+* for a more streamlined inline editing experience.
+*
+* Features:
+* - Inline tag display and editing
+* - Keyboard navigation (Arrow keys, Home, End, Delete, Backspace)
+* - Optional tag editing (editable prop)
+* - Validation support
+* - Paste support with delimiter parsing
+* - Max tags limit
+* - Options support with dropdown (like Select)
+* - freeSolo mode for custom tags (like MUI Autocomplete)
+*/
+function TagsInput({ value = EMPTY_ARRAY, onChange, options = EMPTY_OPTIONS, freeSolo = true, placeholder = "Add tags...", emptyText = "No options found.", className, disabled = false, readOnly = false, maxTags, allowDuplicates = false, editable = false, label, delimiter = ",", addOnPaste = true, addOnTab = true, onValidate }) {
+	const [open, setOpen] = useState(false);
+	const [searchValue, setSearchValue] = useState("");
+	const inputRef = useRef(null);
+	const hasOptions = options.length > 0;
+	useEffect(() => {
+		if (open && inputRef.current) {
+			const timer = setTimeout(() => {
+				inputRef.current?.focus();
+			}, 0);
+			return () => {
+				clearTimeout(timer);
+			};
+		}
+	}, [open]);
+	const stringValues = useMemo(() => {
+		return value.map((v) => String(v));
+	}, [value]);
+	const getLabel = useCallback((val) => {
+		if (!hasOptions) return String(val);
+		return options.find((opt) => String(opt.value) === String(val))?.label ?? String(val);
+	}, [options, hasOptions]);
+	const filteredOptions = useMemo(() => {
+		if (!hasOptions) return [];
+		return options.filter((option) => {
+			if (searchValue) return option.label.toLowerCase().includes(searchValue.toLowerCase());
+			return true;
+		});
+	}, [
+		options,
+		searchValue,
+		hasOptions
+	]);
+	const handleValueChange = useCallback((newTags) => {
+		setSearchValue("");
+		if (hasOptions) {
+			const convertedValues = newTags.map((tag) => {
+				return options.find((opt) => String(opt.value) === tag)?.value ?? tag;
+			});
+			onChange?.(convertedValues);
+		} else onChange?.(newTags);
+	}, [
+		onChange,
+		options,
+		hasOptions
+	]);
+	const handleValidate = useCallback((tag) => {
+		if (maxTags !== void 0 && value.length >= maxTags) return false;
+		if (!allowDuplicates && stringValues.includes(tag)) return false;
+		if (hasOptions && !freeSolo) {
+			if (!options.some((opt) => String(opt.value) === tag)) return false;
+		}
+		if (onValidate) return onValidate(tag);
+		return true;
+	}, [
+		value,
+		maxTags,
+		allowDuplicates,
+		onValidate,
+		stringValues,
+		hasOptions,
+		freeSolo,
+		options
+	]);
+	const handleSelectOption = useCallback((optionValue) => {
+		const isSelected = value.some((v) => String(v) === String(optionValue));
+		let newValues;
+		if (isSelected) newValues = value.filter((v) => String(v) !== String(optionValue));
+		else newValues = [...value, optionValue];
+		onChange?.(newValues);
+		setSearchValue("");
+	}, [value, onChange]);
+	if (!hasOptions) return /* @__PURE__ */ jsxs(TagsInputInLineRoot, {
+		className,
+		disabled,
+		editable,
+		max: maxTags,
+		onValueChange: handleValueChange,
+		onValidate: handleValidate,
+		readOnly,
+		value: stringValues,
+		delimiter,
+		addOnPaste,
+		addOnTab,
+		children: [
+			label !== void 0 && label !== "" ? /* @__PURE__ */ jsx(TagsInputInLineLabel, { children: label }) : null,
+			/* @__PURE__ */ jsxs(TagsInputInLineList, { children: [stringValues.map((tag) => /* @__PURE__ */ jsx(TagsInputInLineItem, {
+				value: tag,
+				children: tag
+			}, tag)), /* @__PURE__ */ jsx(TagsInputInLineInput, { placeholder })] }),
+			value.length > 0 && !disabled && !readOnly && /* @__PURE__ */ jsx(TagsInputInLineClear, {})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [label !== void 0 && label !== "" ? /* @__PURE__ */ jsx(TagsInputInLineLabel, { children: label }) : null, /* @__PURE__ */ jsxs(Popover, {
+			open: open && !disabled && !readOnly,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-full",
+					children: /* @__PURE__ */ jsxs(TagsInputInLineRoot, {
+						disabled,
+						editable,
+						max: maxTags,
+						onValueChange: handleValueChange,
+						onValidate: handleValidate,
+						readOnly,
+						value: stringValues,
+						delimiter: freeSolo ? delimiter : void 0,
+						addOnPaste: freeSolo ? addOnPaste : false,
+						addOnTab: freeSolo ? addOnTab : false,
+						children: [/* @__PURE__ */ jsxs(TagsInputInLineList, {
+							onClick: (e) => {
+								if (!disabled && !readOnly) {
+									e.stopPropagation();
+									setOpen(true);
+								}
+							},
+							children: [value.map((val) => {
+								const displayLabel = getLabel(val);
+								return /* @__PURE__ */ jsx(TagsInputInLineItem, {
+									value: String(val),
+									children: displayLabel
+								}, String(val));
+							}), /* @__PURE__ */ jsx(TagsInputInLineInput, {
+								ref: inputRef,
+								placeholder,
+								onFocus: (e) => {
+									e.stopPropagation();
+									setOpen(true);
+								},
+								onChange: (e) => {
+									e.stopPropagation();
+									setSearchValue(e.target.value);
+								},
+								onKeyDown: (e) => {
+									if (open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+										e.preventDefault();
+										e.stopPropagation();
+										const command = document.querySelector("[cmdk-root]");
+										if (command) {
+											const event = new KeyboardEvent("keydown", {
+												key: e.key,
+												bubbles: true,
+												cancelable: true
+											});
+											command.dispatchEvent(event);
+										}
+										return;
+									}
+									if (open && e.key === "Enter") {
+										const selectedItem = document.querySelector("[cmdk-item][data-selected=\"true\"]");
+										if (selectedItem) {
+											e.preventDefault();
+											e.stopPropagation();
+											selectedItem.click();
+											return;
+										}
+									}
+									e.stopPropagation();
+								},
+								onMouseDown: (e) => {
+									e.stopPropagation();
+								}
+							})]
+						}), value.length > 0 && !disabled && !readOnly && /* @__PURE__ */ jsx(TagsInputInLineClear, {})]
+					})
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				className: "p-0",
+				align: "start",
+				style: { width: "var(--radix-popover-trigger-width)" },
+				onOpenAutoFocus: (e) => {
+					e.preventDefault();
+				},
+				children: /* @__PURE__ */ jsx(Command, {
+					shouldFilter: false,
+					value: searchValue,
+					loop: true,
+					children: /* @__PURE__ */ jsx(CommandOptionList, {
+						options: filteredOptions,
+						value,
+						onChange: handleSelectOption,
+						emptyText
+					})
+				})
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { TagsInput };

package/dist/theme-provider/ThemeProvider.cjs

@@ -1 +1,27 @@
-"use client";const e=require(`../_virtual/rolldown_runtime.cjs`);let t=require(`react`);t=e.__toESM(t);let n=require(`react/jsx-runtime`);n=e.__toESM(n);let r=require(`next-themes`);r=e.__toESM(r);const i=e=>{let{children:t}=e;return(0,n.jsx)(r.ThemeProvider,{attribute:`class`,defaultTheme:`system`,enableSystem:!0,disableTransitionOnChange:!1,...e,children:t})};i.displayName=`ThemeProvider`,exports.ThemeProvider=i;
+'use client';
+
+
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let next_themes = require("next-themes");
+next_themes = require_rolldown_runtime.__toESM(next_themes);
+
+//#region src/theme-provider/ThemeProvider.tsx
+const ThemeProvider = (props) => {
+	const { children } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(next_themes.ThemeProvider, {
+		attribute: "class",
+		defaultTheme: "system",
+		enableSystem: true,
+		disableTransitionOnChange: false,
+		...props,
+		children
+	});
+};
+ThemeProvider.displayName = "ThemeProvider";
+
+//#endregion
+exports.ThemeProvider = ThemeProvider;

package/dist/theme-provider/ThemeProvider.js

@@ -1 +1,23 @@
-"use client";import e from"react";import{jsx as t}from"react/jsx-runtime";import{ThemeProvider as n}from"next-themes";const r=e=>{let{children:r}=e;return t(n,{attribute:`class`,defaultTheme:`system`,enableSystem:!0,disableTransitionOnChange:!1,...e,children:r})};r.displayName=`ThemeProvider`;export{r as ThemeProvider};
+'use client';
+
+
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { ThemeProvider } from "next-themes";
+
+//#region src/theme-provider/ThemeProvider.tsx
+const ThemeProvider$1 = (props) => {
+	const { children } = props;
+	return /* @__PURE__ */ jsx(ThemeProvider, {
+		attribute: "class",
+		defaultTheme: "system",
+		enableSystem: true,
+		disableTransitionOnChange: false,
+		...props,
+		children
+	});
+};
+ThemeProvider$1.displayName = "ThemeProvider";
+
+//#endregion
+export { ThemeProvider$1 as ThemeProvider };

package/dist/theme-provider/index.cjs

@@ -1 +1,4 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./ThemeProvider.cjs`);let n=require(`next-themes`);n=e.__toESM(n);
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_ThemeProvider = require('./ThemeProvider.cjs');
+let next_themes = require("next-themes");
+next_themes = require_rolldown_runtime.__toESM(next_themes);

package/dist/theme-provider/index.js

@@ -1 +1,4 @@
-import{ThemeProvider as e}from"./ThemeProvider.js";import{useTheme as t}from"next-themes";export{t as useTheme};
+import { ThemeProvider as ThemeProvider$1 } from "./ThemeProvider.js";
+import { useTheme as useTheme$1 } from "next-themes";
+
+export { useTheme$1 as useTheme };

package/dist/toast/AlertToast.cjs

@@ -1 +1,36 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`../Alert.cjs`);let n=require(`@pixpilot/shadcn`);n=e.__toESM(n);let r=require(`lucide-react`);r=e.__toESM(r);let i=require(`react`);i=e.__toESM(i);let a=require(`react/jsx-runtime`);a=e.__toESM(a);const o=e=>{let{duration:i,onClose:o,...s}=e;return(0,a.jsx)(t.Alert,{icon:!0,...s,className:(0,n.cn)(`shadow-md`,e.className,{"pr-3":o}),children:o&&(0,a.jsx)(`div`,{className:`flex items-start pt-0.5 pl-1`,children:(0,a.jsxs)(`button`,{type:`button`,className:`cursor-pointer opacity-80 transition-opacity hover:opacity-100`,onClick:o,children:[(0,a.jsx)(r.XIcon,{className:`size-4.5`}),(0,a.jsx)(`span`,{className:`sr-only`,children:`Close`})]})})})};o.displayName=`AlertToast`,exports.AlertToast=o;
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_Alert = require('../Alert.cjs');
+let __pixpilot_shadcn = require("@pixpilot/shadcn");
+__pixpilot_shadcn = require_rolldown_runtime.__toESM(__pixpilot_shadcn);
+let lucide_react = require("lucide-react");
+lucide_react = require_rolldown_runtime.__toESM(lucide_react);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+
+//#region src/toast/AlertToast.tsx
+const AlertToast = (props) => {
+	const { duration, onClose,...rest } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Alert.Alert, {
+		icon: true,
+		...rest,
+		className: (0, __pixpilot_shadcn.cn)("shadow-md", props.className, { "pr-3": onClose }),
+		children: onClose && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex items-start pt-0.5 pl-1",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				className: "cursor-pointer opacity-80 transition-opacity hover:opacity-100",
+				onClick: onClose,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, { className: "size-4.5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})
+		})
+	});
+};
+AlertToast.displayName = "AlertToast";
+
+//#endregion
+exports.AlertToast = AlertToast;

package/dist/toast/AlertToast.js

@@ -1 +1,31 @@
-import{Alert as e}from"../Alert.js";import{cn as t}from"@pixpilot/shadcn";import{XIcon as n}from"lucide-react";import r from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=r=>{let{duration:o,onClose:s,...c}=r;return i(e,{icon:!0,...c,className:t(`shadow-md`,r.className,{"pr-3":s}),children:s&&i(`div`,{className:`flex items-start pt-0.5 pl-1`,children:a(`button`,{type:`button`,className:`cursor-pointer opacity-80 transition-opacity hover:opacity-100`,onClick:s,children:[i(n,{className:`size-4.5`}),i(`span`,{className:`sr-only`,children:`Close`})]})})})};o.displayName=`AlertToast`;export{o as AlertToast};
+import { Alert } from "../Alert.js";
+import { cn } from "@pixpilot/shadcn";
+import { XIcon } from "lucide-react";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/toast/AlertToast.tsx
+const AlertToast = (props) => {
+	const { duration, onClose,...rest } = props;
+	return /* @__PURE__ */ jsx(Alert, {
+		icon: true,
+		...rest,
+		className: cn("shadow-md", props.className, { "pr-3": onClose }),
+		children: onClose && /* @__PURE__ */ jsx("div", {
+			className: "flex items-start pt-0.5 pl-1",
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "cursor-pointer opacity-80 transition-opacity hover:opacity-100",
+				onClick: onClose,
+				children: [/* @__PURE__ */ jsx(XIcon, { className: "size-4.5" }), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Close"
+				})]
+			})
+		})
+	});
+};
+AlertToast.displayName = "AlertToast";
+
+//#endregion
+export { AlertToast };

package/dist/toast/index.cjs

@@ -1 +1,2 @@
-const e=require(`../_virtual/rolldown_runtime.cjs`),t=require(`./toast.cjs`);
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_toast = require('./toast.cjs');

package/dist/toast/index.js

@@ -1 +1 @@
-import{DEFAULT_ALERT_DURATION as e,toast as t,toastError as n,toastInfo as r,toastSuccess as i,toastWarning as a}from"./toast.js";
+import { DEFAULT_ALERT_DURATION, toast, toastError, toastInfo, toastSuccess, toastWarning } from "./toast.js";