jaci-ui 0.1.0

package/dist/components/tabs/tabs.cjs

@@ -0,0 +1,65 @@
+"use client";
+const require_base_ui = require("../base-ui.cjs");
+const require_tabs = require("../../styled-system/recipes/tabs.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_tabs = require("@base-ui/react/tabs");
+//#region src/components/tabs/tabs.tsx
+const TabsVariantContext = (0, react.createContext)("underline");
+function useTabsStyles() {
+	return require_tabs.tabs({ variant: (0, react.useContext)(TabsVariantContext) });
+}
+const TabsRoot = (0, react.forwardRef)(function TabsRoot({ className, variant = "underline", ...props }, ref) {
+	const styles = require_tabs.tabs({ variant });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsVariantContext.Provider, {
+		value: variant,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Root, {
+			...props,
+			ref,
+			className: require_base_ui.withRecipeClassName(styles.root, className),
+			"data-jaci-component": "tabs",
+			"data-slot": "tabs"
+		})
+	});
+});
+const TabsList = (0, react.forwardRef)(function TabsList({ className, ...props }, ref) {
+	const styles = useTabsStyles();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.List, {
+		...props,
+		ref,
+		className: require_base_ui.withRecipeClassName(styles.list, className),
+		"data-slot": "tabs-list"
+	});
+});
+const TabsTab = (0, react.forwardRef)(function TabsTab({ className, ...props }, ref) {
+	const styles = useTabsStyles();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Tab, {
+		...props,
+		ref,
+		className: require_base_ui.withRecipeClassName(styles.tab, className),
+		"data-slot": "tabs-tab"
+	});
+});
+const TabsPanel = (0, react.forwardRef)(function TabsPanel({ className, ...props }, ref) {
+	const styles = useTabsStyles();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.Panel, {
+		...props,
+		ref,
+		className: require_base_ui.withRecipeClassName(styles.panel, className),
+		"data-slot": "tabs-panel"
+	});
+});
+const Tabs = {
+	Root: TabsRoot,
+	List: TabsList,
+	Tab: TabsTab,
+	Panel: TabsPanel
+};
+//#endregion
+exports.Tabs = Tabs;
+exports.TabsList = TabsList;
+exports.TabsPanel = TabsPanel;
+exports.TabsRoot = TabsRoot;
+exports.TabsTab = TabsTab;
+
+//# sourceMappingURL=tabs.cjs.map

package/dist/components/tabs/tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.cjs","names":["tabs","BaseTabs","withRecipeClassName"],"sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { withRecipeClassName } from \"../base-ui\";\nimport { tabs } from \"../../styled-system/recipes\";\n\nexport type TabsVariant = \"underline\" | \"pills\";\n\nconst TabsVariantContext = createContext<TabsVariant>(\"underline\");\n\nfunction useTabsStyles() {\n  return tabs({ variant: useContext(TabsVariantContext) });\n}\n\nexport interface TabsRootProps extends ComponentPropsWithoutRef<typeof BaseTabs.Root> {\n  variant?: TabsVariant;\n}\n\nexport const TabsRoot = forwardRef<HTMLDivElement, TabsRootProps>(function TabsRoot(\n  { className, variant = \"underline\", ...props },\n  ref,\n) {\n  const styles = tabs({ variant });\n\n  return (\n    <TabsVariantContext.Provider value={variant}>\n      <BaseTabs.Root\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.root, className)}\n        data-jaci-component=\"tabs\"\n        data-slot=\"tabs\"\n      />\n    </TabsVariantContext.Provider>\n  );\n});\n\nexport type TabsListProps = ComponentPropsWithoutRef<typeof BaseTabs.List>;\n\nexport const TabsList = forwardRef<HTMLDivElement, TabsListProps>(function TabsList(\n  { className, ...props },\n  ref,\n) {\n  const styles = useTabsStyles();\n\n  return (\n    <BaseTabs.List\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(styles.list, className)}\n      data-slot=\"tabs-list\"\n    />\n  );\n});\n\nexport type TabsTabProps = ComponentPropsWithoutRef<typeof BaseTabs.Tab>;\n\nexport const TabsTab = forwardRef<HTMLElement, TabsTabProps>(function TabsTab(\n  { className, ...props },\n  ref,\n) {\n  const styles = useTabsStyles();\n\n  return (\n    <BaseTabs.Tab\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(styles.tab, className)}\n      data-slot=\"tabs-tab\"\n    />\n  );\n});\n\nexport type TabsPanelProps = ComponentPropsWithoutRef<typeof BaseTabs.Panel>;\n\nexport const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(function TabsPanel(\n  { className, ...props },\n  ref,\n) {\n  const styles = useTabsStyles();\n\n  return (\n    <BaseTabs.Panel\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(styles.panel, className)}\n      data-slot=\"tabs-panel\"\n    />\n  );\n});\n\nexport const Tabs = {\n  Root: TabsRoot,\n  List: TabsList,\n  Tab: TabsTab,\n  Panel: TabsPanel,\n};\n"],"mappings":";;;;;;;AAWA,MAAM,sBAAA,GAAA,MAAA,cAAA,CAAgD,WAAW;AAEjE,SAAS,gBAAgB;CACvB,OAAOA,aAAAA,KAAK,EAAE,UAAA,GAAA,MAAA,WAAA,CAAoB,kBAAkB,EAAE,CAAC;AACzD;AAMA,MAAa,YAAA,GAAA,MAAA,WAAA,CAAqD,SAAS,SACzE,EAAE,WAAW,UAAU,aAAa,GAAG,SACvC,KACA;CACA,MAAM,SAASA,aAAAA,KAAK,EAAE,QAAQ,CAAC;CAE/B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,KAAS,MAAV;GACE,GAAI;GACC;GACL,WAAWC,gBAAAA,oBAAoB,OAAO,MAAM,SAAS;GACrD,uBAAoB;GACpB,aAAU;EACX,CAAA;CAC0B,CAAA;AAEjC,CAAC;AAID,MAAa,YAAA,GAAA,MAAA,WAAA,CAAqD,SAAS,SACzE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,SAAS,cAAc;CAE7B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,oBAAAA,KAAS,MAAV;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoB,OAAO,MAAM,SAAS;EACrD,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,WAAA,GAAA,MAAA,WAAA,CAAgD,SAAS,QACpE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,SAAS,cAAc;CAE7B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,oBAAAA,KAAS,KAAV;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoB,OAAO,KAAK,SAAS;EACpD,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,aAAA,GAAA,MAAA,WAAA,CAAuD,SAAS,UAC3E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,SAAS,cAAc;CAE7B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,oBAAAA,KAAS,OAAV;EACE,GAAI;EACC;EACL,WAAWC,gBAAAA,oBAAoB,OAAO,OAAO,SAAS;EACtD,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAa,OAAO;CAClB,MAAM;CACN,MAAM;CACN,KAAK;CACL,OAAO;AACT"}

package/dist/components/tabs/tabs.d.cts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef } from "react";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs.d.ts
+type TabsVariant = "underline" | "pills";
+interface TabsRootProps extends ComponentPropsWithoutRef<typeof Tabs.Root> {
+  variant?: TabsVariant;
+}
+declare const TabsRoot: import("react").ForwardRefExoticComponent<TabsRootProps & import("react").RefAttributes<HTMLDivElement>>;
+type TabsListProps = ComponentPropsWithoutRef<typeof Tabs.List>;
+declare const TabsList: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type TabsTabProps = ComponentPropsWithoutRef<typeof Tabs.Tab>;
+declare const TabsTab: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsTabProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+type TabsPanelProps = ComponentPropsWithoutRef<typeof Tabs.Panel>;
+declare const TabsPanel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Tabs$1: {
+  Root: import("react").ForwardRefExoticComponent<TabsRootProps & import("react").RefAttributes<HTMLDivElement>>;
+  List: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Tab: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsTabProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  Panel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Tabs$1 as Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsRoot, TabsRootProps, TabsTab, TabsTabProps, TabsVariant };
+//# sourceMappingURL=tabs.d.cts.map

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef } from "react";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs.d.ts
+type TabsVariant = "underline" | "pills";
+interface TabsRootProps extends ComponentPropsWithoutRef<typeof Tabs.Root> {
+  variant?: TabsVariant;
+}
+declare const TabsRoot: import("react").ForwardRefExoticComponent<TabsRootProps & import("react").RefAttributes<HTMLDivElement>>;
+type TabsListProps = ComponentPropsWithoutRef<typeof Tabs.List>;
+declare const TabsList: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type TabsTabProps = ComponentPropsWithoutRef<typeof Tabs.Tab>;
+declare const TabsTab: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsTabProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+type TabsPanelProps = ComponentPropsWithoutRef<typeof Tabs.Panel>;
+declare const TabsPanel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Tabs$1: {
+  Root: import("react").ForwardRefExoticComponent<TabsRootProps & import("react").RefAttributes<HTMLDivElement>>;
+  List: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Tab: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsTabProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  Panel: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").TabsPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Tabs$1 as Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsRoot, TabsRootProps, TabsTab, TabsTabProps, TabsVariant };
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs/tabs.js

@@ -0,0 +1,61 @@
+"use client";
+import { withRecipeClassName } from "../base-ui.js";
+import { tabs } from "../../styled-system/recipes/tabs.js";
+import { createContext, forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs.tsx
+const TabsVariantContext = createContext("underline");
+function useTabsStyles() {
+	return tabs({ variant: useContext(TabsVariantContext) });
+}
+const TabsRoot = forwardRef(function TabsRoot({ className, variant = "underline", ...props }, ref) {
+	const styles = tabs({ variant });
+	return /* @__PURE__ */ jsx(TabsVariantContext.Provider, {
+		value: variant,
+		children: /* @__PURE__ */ jsx(Tabs.Root, {
+			...props,
+			ref,
+			className: withRecipeClassName(styles.root, className),
+			"data-jaci-component": "tabs",
+			"data-slot": "tabs"
+		})
+	});
+});
+const TabsList = forwardRef(function TabsList({ className, ...props }, ref) {
+	const styles = useTabsStyles();
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		...props,
+		ref,
+		className: withRecipeClassName(styles.list, className),
+		"data-slot": "tabs-list"
+	});
+});
+const TabsTab = forwardRef(function TabsTab({ className, ...props }, ref) {
+	const styles = useTabsStyles();
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		...props,
+		ref,
+		className: withRecipeClassName(styles.tab, className),
+		"data-slot": "tabs-tab"
+	});
+});
+const TabsPanel = forwardRef(function TabsPanel({ className, ...props }, ref) {
+	const styles = useTabsStyles();
+	return /* @__PURE__ */ jsx(Tabs.Panel, {
+		...props,
+		ref,
+		className: withRecipeClassName(styles.panel, className),
+		"data-slot": "tabs-panel"
+	});
+});
+const Tabs$1 = {
+	Root: TabsRoot,
+	List: TabsList,
+	Tab: TabsTab,
+	Panel: TabsPanel
+};
+//#endregion
+export { Tabs$1 as Tabs, TabsList, TabsPanel, TabsRoot, TabsTab };
+
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":["BaseTabs","Tabs"],"sources":["../../../src/components/tabs/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tabs as BaseTabs } from \"@base-ui/react/tabs\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { withRecipeClassName } from \"../base-ui\";\nimport { tabs } from \"../../styled-system/recipes\";\n\nexport type TabsVariant = \"underline\" | \"pills\";\n\nconst TabsVariantContext = createContext<TabsVariant>(\"underline\");\n\nfunction useTabsStyles() {\n  return tabs({ variant: useContext(TabsVariantContext) });\n}\n\nexport interface TabsRootProps extends ComponentPropsWithoutRef<typeof BaseTabs.Root> {\n  variant?: TabsVariant;\n}\n\nexport const TabsRoot = forwardRef<HTMLDivElement, TabsRootProps>(function TabsRoot(\n  { className, variant = \"underline\", ...props },\n  ref,\n) {\n  const styles = tabs({ variant });\n\n  return (\n    <TabsVariantContext.Provider value={variant}>\n      <BaseTabs.Root\n        {...props}\n        ref={ref}\n        className={withRecipeClassName(styles.root, className)}\n        data-jaci-component=\"tabs\"\n        data-slot=\"tabs\"\n      />\n    </TabsVariantContext.Provider>\n  );\n});\n\nexport type TabsListProps = ComponentPropsWithoutRef<typeof BaseTabs.List>;\n\nexport const TabsList = forwardRef<HTMLDivElement, TabsListProps>(function TabsList(\n  { className, ...props },\n  ref,\n) {\n  const styles = useTabsStyles();\n\n  return (\n    <BaseTabs.List\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(styles.list, className)}\n      data-slot=\"tabs-list\"\n    />\n  );\n});\n\nexport type TabsTabProps = ComponentPropsWithoutRef<typeof BaseTabs.Tab>;\n\nexport const TabsTab = forwardRef<HTMLElement, TabsTabProps>(function TabsTab(\n  { className, ...props },\n  ref,\n) {\n  const styles = useTabsStyles();\n\n  return (\n    <BaseTabs.Tab\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(styles.tab, className)}\n      data-slot=\"tabs-tab\"\n    />\n  );\n});\n\nexport type TabsPanelProps = ComponentPropsWithoutRef<typeof BaseTabs.Panel>;\n\nexport const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(function TabsPanel(\n  { className, ...props },\n  ref,\n) {\n  const styles = useTabsStyles();\n\n  return (\n    <BaseTabs.Panel\n      {...props}\n      ref={ref}\n      className={withRecipeClassName(styles.panel, className)}\n      data-slot=\"tabs-panel\"\n    />\n  );\n});\n\nexport const Tabs = {\n  Root: TabsRoot,\n  List: TabsList,\n  Tab: TabsTab,\n  Panel: TabsPanel,\n};\n"],"mappings":";;;;;;;AAWA,MAAM,qBAAqB,cAA2B,WAAW;AAEjE,SAAS,gBAAgB;CACvB,OAAO,KAAK,EAAE,SAAS,WAAW,kBAAkB,EAAE,CAAC;AACzD;AAMA,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,WAAW,UAAU,aAAa,GAAG,SACvC,KACA;CACA,MAAM,SAAS,KAAK,EAAE,QAAQ,CAAC;CAE/B,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,oBAACA,KAAS,MAAV;GACE,GAAI;GACC;GACL,WAAW,oBAAoB,OAAO,MAAM,SAAS;GACrD,uBAAoB;GACpB,aAAU;EACX,CAAA;CAC0B,CAAA;AAEjC,CAAC;AAID,MAAa,WAAW,WAA0C,SAAS,SACzE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,SAAS,cAAc;CAE7B,OACE,oBAACA,KAAS,MAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,MAAM,SAAS;EACrD,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,UAAU,WAAsC,SAAS,QACpE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,SAAS,cAAc;CAE7B,OACE,oBAACA,KAAS,KAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,KAAK,SAAS;EACpD,aAAU;CACX,CAAA;AAEL,CAAC;AAID,MAAa,YAAY,WAA2C,SAAS,UAC3E,EAAE,WAAW,GAAG,SAChB,KACA;CACA,MAAM,SAAS,cAAc;CAE7B,OACE,oBAACA,KAAS,OAAV;EACE,GAAI;EACC;EACL,WAAW,oBAAoB,OAAO,OAAO,SAAS;EACtD,aAAU;CACX,CAAA;AAEL,CAAC;AAED,MAAaC,SAAO;CAClB,MAAM;CACN,MAAM;CACN,KAAK;CACL,OAAO;AACT"}

package/dist/components/tags-input/index.d.cts

@@ -0,0 +1,2 @@
+import { TagsInput, TagsInputProps } from "./tags-input.cjs";
+export { TagsInput, TagsInputProps };

package/dist/components/tags-input/index.d.ts

@@ -0,0 +1,2 @@
+import { TagsInput, TagsInputProps } from "./tags-input.js";
+export { TagsInput, TagsInputProps };

package/dist/components/tags-input/tags-input.cjs

@@ -0,0 +1,172 @@
+"use client";
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_tags_input = require("../../styled-system/recipes/tags-input.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/tags-input/tags-input.tsx
+function changedEvent(event, value) {
+	const target = event.target;
+	const nextTarget = {
+		checked: target.checked,
+		id: target.id,
+		name: target.name,
+		value
+	};
+	return {
+		...event,
+		currentTarget: nextTarget,
+		target: nextTarget
+	};
+}
+const TagsInput = (0, react.forwardRef)(function TagsInput({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, className, data = [], defaultTags = [], defaultValue = "", disabled = false, id: providedId, label, onBlur, onChange, onFocus, onInputValueChange, onTagsChange, placeholder, tags: controlledTags, value: controlledInputValue, ...props }, ref) {
+	const generatedId = (0, react.useId)();
+	const id = providedId ?? generatedId;
+	const [uncontrolledTags, setUncontrolledTags] = (0, react.useState)(() => [...defaultTags]);
+	const [uncontrolledInputValue, setUncontrolledInputValue] = (0, react.useState)(defaultValue);
+	const [focused, setFocused] = (0, react.useState)(false);
+	const rootRef = (0, react.useRef)(null);
+	const styles = require_tags_input.tagsInput();
+	const selectedTags = controlledTags === void 0 ? uncontrolledTags : [...controlledTags];
+	const inputValue = controlledInputValue === void 0 ? uncontrolledInputValue : controlledInputValue;
+	const updateTags = (0, react.useCallback)((nextTags) => {
+		if (controlledTags === void 0) setUncontrolledTags(nextTags);
+		onTagsChange?.(nextTags);
+	}, [controlledTags, onTagsChange]);
+	const clearInput = (0, react.useCallback)((event) => {
+		if (controlledInputValue === void 0) setUncontrolledInputValue("");
+		onInputValueChange?.("");
+		if (event) onChange?.(changedEvent(event, ""));
+	}, [
+		controlledInputValue,
+		onChange,
+		onInputValueChange
+	]);
+	const addTag = (0, react.useCallback)((rawTag, event) => {
+		const tag = rawTag.trim();
+		if (tag && !selectedTags.includes(tag) && data.includes(tag)) updateTags([...selectedTags, tag]);
+		clearInput(event);
+	}, [
+		clearInput,
+		data,
+		selectedTags,
+		updateTags
+	]);
+	const suggestions = (0, react.useMemo)(() => {
+		const query = inputValue.trim().toLocaleLowerCase();
+		return data.filter((item) => !selectedTags.includes(item) && (query.length === 0 || item.toLocaleLowerCase().includes(query)));
+	}, [
+		data,
+		inputValue,
+		selectedTags
+	]);
+	function handleChange(event) {
+		const nextValue = event.currentTarget.value;
+		if (nextValue.trim() === "") {
+			clearInput(event);
+			onChange?.(event);
+			return;
+		}
+		if (nextValue.endsWith(",")) {
+			addTag(nextValue.slice(0, -1), event);
+			return;
+		}
+		if (controlledInputValue === void 0) setUncontrolledInputValue(nextValue);
+		onInputValueChange?.(nextValue);
+		onChange?.(event);
+	}
+	function handleBlur(event) {
+		setFocused(false);
+		onBlur?.(event);
+	}
+	function removeTag(index) {
+		updateTags(selectedTags.filter((_, currentIndex) => currentIndex !== index));
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: styles.root,
+		"data-jaci-component": "tags-input",
+		"data-slot": "tags-input",
+		ref: rootRef,
+		children: [
+			label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				className: styles.label,
+				"data-slot": "tags-input-label",
+				htmlFor: id,
+				children: label
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: require_cx.cx(styles.control, className),
+				"data-disabled": disabled || void 0,
+				"data-focus": focused || void 0,
+				"data-slot": "tags-input-control",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: styles.tagList,
+					"data-slot": "tags-input-tag-list",
+					children: selectedTags.map((tag, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: styles.tag,
+						"data-slot": "tags-input-tag",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: styles.tagLabel,
+							"data-slot": "tags-input-tag-label",
+							children: tag
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							"aria-label": `Remove ${tag}`,
+							className: styles.tagRemove,
+							"data-slot": "tags-input-tag-remove",
+							disabled,
+							onClick: () => removeTag(index),
+							type: "button",
+							children: "×"
+						})]
+					}, tag))
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					...props,
+					...ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {},
+					...ariaInvalid !== void 0 ? { "aria-invalid": ariaInvalid } : {},
+					...ariaLabel ? { "aria-label": ariaLabel } : {},
+					autoComplete: "off",
+					className: styles.input,
+					disabled,
+					id,
+					onBlur: handleBlur,
+					onChange: handleChange,
+					onFocus: (event) => {
+						setFocused(true);
+						onFocus?.(event);
+					},
+					placeholder,
+					ref,
+					type: "text",
+					value: inputValue
+				})]
+			}),
+			focused && data.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: styles.positioner,
+				"data-slot": "tags-input-positioner",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"aria-label": "Suggestions",
+					className: styles.list,
+					"data-slot": "tags-input-list",
+					role: "listbox",
+					children: suggestions.length > 0 ? suggestions.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						"aria-selected": false,
+						className: styles.item,
+						"data-slot": "tags-input-item",
+						onClick: () => addTag(item),
+						onMouseDown: (event) => event.preventDefault(),
+						role: "option",
+						type: "button",
+						children: item
+					}, item)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: styles.empty,
+						"data-slot": "tags-input-empty",
+						children: "No options"
+					})
+				})
+			}) : null
+		]
+	});
+});
+//#endregion
+exports.TagsInput = TagsInput;
+
+//# sourceMappingURL=tags-input.cjs.map

package/dist/components/tags-input/tags-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.cjs","names":["tagsInput","cx"],"sources":["../../../src/components/tags-input/tags-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  MouseEvent,\n  ReactNode,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { tagsInput } from \"../../styled-system/recipes\";\n\nexport interface TagsInputProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"children\" | \"defaultValue\" | \"onChange\" | \"type\" | \"value\"\n  > {\n  /** Current tags. Omit this prop to use the uncontrolled API. */\n  tags?: readonly string[];\n  /** Initial tags for the uncontrolled API. */\n  defaultTags?: readonly string[];\n  /** Called whenever a tag is added or removed. */\n  onTagsChange?: (tags: string[]) => void;\n  /** Optional suggestions. A tag is accepted after a comma only when it is in this list. */\n  data?: readonly string[];\n  /** Visible label for the input. */\n  label?: ReactNode;\n  /** Current text query. This is the native input value, not the selected tags. */\n  value?: string;\n  /** Initial text query for an uncontrolled input. */\n  defaultValue?: string;\n  /** Native input change callback. */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /** Optional callback useful when a controlled query is cleared by selecting a tag. */\n  onInputValueChange?: (value: string) => void;\n}\n\nfunction changedEvent(event: ChangeEvent<HTMLInputElement>, value: string) {\n  const target = event.target;\n  const nextTarget = {\n    checked: target.checked,\n    id: target.id,\n    name: target.name,\n    value,\n  } as HTMLInputElement;\n\n  return {\n    ...event,\n    currentTarget: nextTarget,\n    target: nextTarget,\n  } as ChangeEvent<HTMLInputElement>;\n}\n\nexport const TagsInput = forwardRef<HTMLInputElement, TagsInputProps>(function TagsInput(\n  {\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-label\": ariaLabel,\n    className,\n    data = [],\n    defaultTags = [],\n    defaultValue = \"\",\n    disabled = false,\n    id: providedId,\n    label,\n    onBlur,\n    onChange,\n    onFocus,\n    onInputValueChange,\n    onTagsChange,\n    placeholder,\n    tags: controlledTags,\n    value: controlledInputValue,\n    ...props\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = providedId ?? generatedId;\n  const [uncontrolledTags, setUncontrolledTags] = useState<string[]>(() => [...defaultTags]);\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState(defaultValue);\n  const [focused, setFocused] = useState(false);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const styles = tagsInput();\n  const selectedTags = controlledTags === undefined ? uncontrolledTags : [...controlledTags];\n  const inputValue =\n    controlledInputValue === undefined ? uncontrolledInputValue : controlledInputValue;\n\n  const updateTags = useCallback(\n    (nextTags: string[]) => {\n      if (controlledTags === undefined) setUncontrolledTags(nextTags);\n      onTagsChange?.(nextTags);\n    },\n    [controlledTags, onTagsChange],\n  );\n\n  const clearInput = useCallback(\n    (event?: ChangeEvent<HTMLInputElement>) => {\n      if (controlledInputValue === undefined) setUncontrolledInputValue(\"\");\n      onInputValueChange?.(\"\");\n      if (event) onChange?.(changedEvent(event, \"\"));\n    },\n    [controlledInputValue, onChange, onInputValueChange],\n  );\n\n  const addTag = useCallback(\n    (rawTag: string, event?: ChangeEvent<HTMLInputElement>) => {\n      const tag = rawTag.trim();\n      if (tag && !selectedTags.includes(tag) && data.includes(tag)) {\n        updateTags([...selectedTags, tag]);\n      }\n      clearInput(event);\n    },\n    [clearInput, data, selectedTags, updateTags],\n  );\n\n  const suggestions = useMemo(() => {\n    const query = inputValue.trim().toLocaleLowerCase();\n    return data.filter(\n      (item) =>\n        !selectedTags.includes(item) &&\n        (query.length === 0 || item.toLocaleLowerCase().includes(query)),\n    );\n  }, [data, inputValue, selectedTags]);\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    const nextValue = event.currentTarget.value;\n    if (nextValue.trim() === \"\") {\n      clearInput(event);\n      onChange?.(event);\n      return;\n    }\n\n    if (nextValue.endsWith(\",\")) {\n      addTag(nextValue.slice(0, -1), event);\n      return;\n    }\n\n    if (controlledInputValue === undefined) setUncontrolledInputValue(nextValue);\n    onInputValueChange?.(nextValue);\n    onChange?.(event);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    setFocused(false);\n    onBlur?.(event);\n  }\n\n  function removeTag(index: number) {\n    updateTags(selectedTags.filter((_, currentIndex) => currentIndex !== index));\n  }\n\n  return (\n    <div\n      className={styles.root}\n      data-jaci-component=\"tags-input\"\n      data-slot=\"tags-input\"\n      ref={rootRef}\n    >\n      {label ? (\n        <label className={styles.label} data-slot=\"tags-input-label\" htmlFor={id}>\n          {label}\n        </label>\n      ) : null}\n      <div\n        className={cx(styles.control, className)}\n        data-disabled={disabled || undefined}\n        data-focus={focused || undefined}\n        data-slot=\"tags-input-control\"\n      >\n        <div className={styles.tagList} data-slot=\"tags-input-tag-list\">\n          {selectedTags.map((tag, index) => (\n            <span className={styles.tag} data-slot=\"tags-input-tag\" key={tag}>\n              <span className={styles.tagLabel} data-slot=\"tags-input-tag-label\">\n                {tag}\n              </span>\n              <button\n                aria-label={`Remove ${tag}`}\n                className={styles.tagRemove}\n                data-slot=\"tags-input-tag-remove\"\n                disabled={disabled}\n                onClick={() => removeTag(index)}\n                type=\"button\"\n              >\n                ×\n              </button>\n            </span>\n          ))}\n        </div>\n        <input\n          {...props}\n          {...(ariaDescribedBy ? { \"aria-describedby\": ariaDescribedBy } : {})}\n          {...(ariaInvalid !== undefined ? { \"aria-invalid\": ariaInvalid } : {})}\n          {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n          autoComplete=\"off\"\n          className={styles.input}\n          disabled={disabled}\n          id={id}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={(event) => {\n            setFocused(true);\n            onFocus?.(event);\n          }}\n          placeholder={placeholder}\n          ref={ref}\n          type=\"text\"\n          value={inputValue}\n        />\n      </div>\n      {focused && data.length > 0 ? (\n        <div className={styles.positioner} data-slot=\"tags-input-positioner\">\n          <div\n            aria-label=\"Suggestions\"\n            className={styles.list}\n            data-slot=\"tags-input-list\"\n            role=\"listbox\"\n          >\n            {suggestions.length > 0 ? (\n              suggestions.map((item) => (\n                <button\n                  aria-selected={false}\n                  className={styles.item}\n                  data-slot=\"tags-input-item\"\n                  key={item}\n                  onClick={() => addTag(item)}\n                  onMouseDown={(event: MouseEvent<HTMLButtonElement>) => event.preventDefault()}\n                  role=\"option\"\n                  type=\"button\"\n                >\n                  {item}\n                </button>\n              ))\n            ) : (\n              <div className={styles.empty} data-slot=\"tags-input-empty\">\n                No options\n              </div>\n            )}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/tags-input/tags-input.d.cts

@@ -0,0 +1,26 @@
+import { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/tags-input/tags-input.d.ts
+interface TagsInputProps extends Omit<ComponentPropsWithoutRef<"input">, "children" | "defaultValue" | "onChange" | "type" | "value"> {
+  /** Current tags. Omit this prop to use the uncontrolled API. */
+  tags?: readonly string[];
+  /** Initial tags for the uncontrolled API. */
+  defaultTags?: readonly string[];
+  /** Called whenever a tag is added or removed. */
+  onTagsChange?: (tags: string[]) => void;
+  /** Optional suggestions. A tag is accepted after a comma only when it is in this list. */
+  data?: readonly string[];
+  /** Visible label for the input. */
+  label?: ReactNode;
+  /** Current text query. This is the native input value, not the selected tags. */
+  value?: string;
+  /** Initial text query for an uncontrolled input. */
+  defaultValue?: string;
+  /** Native input change callback. */
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  /** Optional callback useful when a controlled query is cleared by selecting a tag. */
+  onInputValueChange?: (value: string) => void;
+}
+declare const TagsInput: import("react").ForwardRefExoticComponent<TagsInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+export { TagsInput, TagsInputProps };
+//# sourceMappingURL=tags-input.d.cts.map

package/dist/components/tags-input/tags-input.d.ts

@@ -0,0 +1,26 @@
+import { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/tags-input/tags-input.d.ts
+interface TagsInputProps extends Omit<ComponentPropsWithoutRef<"input">, "children" | "defaultValue" | "onChange" | "type" | "value"> {
+  /** Current tags. Omit this prop to use the uncontrolled API. */
+  tags?: readonly string[];
+  /** Initial tags for the uncontrolled API. */
+  defaultTags?: readonly string[];
+  /** Called whenever a tag is added or removed. */
+  onTagsChange?: (tags: string[]) => void;
+  /** Optional suggestions. A tag is accepted after a comma only when it is in this list. */
+  data?: readonly string[];
+  /** Visible label for the input. */
+  label?: ReactNode;
+  /** Current text query. This is the native input value, not the selected tags. */
+  value?: string;
+  /** Initial text query for an uncontrolled input. */
+  defaultValue?: string;
+  /** Native input change callback. */
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  /** Optional callback useful when a controlled query is cleared by selecting a tag. */
+  onInputValueChange?: (value: string) => void;
+}
+declare const TagsInput: import("react").ForwardRefExoticComponent<TagsInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+export { TagsInput, TagsInputProps };
+//# sourceMappingURL=tags-input.d.ts.map

package/dist/components/tags-input/tags-input.js

@@ -0,0 +1,172 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { tagsInput } from "../../styled-system/recipes/tags-input.js";
+import { forwardRef, useCallback, useId, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tags-input/tags-input.tsx
+function changedEvent(event, value) {
+	const target = event.target;
+	const nextTarget = {
+		checked: target.checked,
+		id: target.id,
+		name: target.name,
+		value
+	};
+	return {
+		...event,
+		currentTarget: nextTarget,
+		target: nextTarget
+	};
+}
+const TagsInput = forwardRef(function TagsInput({ "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, className, data = [], defaultTags = [], defaultValue = "", disabled = false, id: providedId, label, onBlur, onChange, onFocus, onInputValueChange, onTagsChange, placeholder, tags: controlledTags, value: controlledInputValue, ...props }, ref) {
+	const generatedId = useId();
+	const id = providedId ?? generatedId;
+	const [uncontrolledTags, setUncontrolledTags] = useState(() => [...defaultTags]);
+	const [uncontrolledInputValue, setUncontrolledInputValue] = useState(defaultValue);
+	const [focused, setFocused] = useState(false);
+	const rootRef = useRef(null);
+	const styles = tagsInput();
+	const selectedTags = controlledTags === void 0 ? uncontrolledTags : [...controlledTags];
+	const inputValue = controlledInputValue === void 0 ? uncontrolledInputValue : controlledInputValue;
+	const updateTags = useCallback((nextTags) => {
+		if (controlledTags === void 0) setUncontrolledTags(nextTags);
+		onTagsChange?.(nextTags);
+	}, [controlledTags, onTagsChange]);
+	const clearInput = useCallback((event) => {
+		if (controlledInputValue === void 0) setUncontrolledInputValue("");
+		onInputValueChange?.("");
+		if (event) onChange?.(changedEvent(event, ""));
+	}, [
+		controlledInputValue,
+		onChange,
+		onInputValueChange
+	]);
+	const addTag = useCallback((rawTag, event) => {
+		const tag = rawTag.trim();
+		if (tag && !selectedTags.includes(tag) && data.includes(tag)) updateTags([...selectedTags, tag]);
+		clearInput(event);
+	}, [
+		clearInput,
+		data,
+		selectedTags,
+		updateTags
+	]);
+	const suggestions = useMemo(() => {
+		const query = inputValue.trim().toLocaleLowerCase();
+		return data.filter((item) => !selectedTags.includes(item) && (query.length === 0 || item.toLocaleLowerCase().includes(query)));
+	}, [
+		data,
+		inputValue,
+		selectedTags
+	]);
+	function handleChange(event) {
+		const nextValue = event.currentTarget.value;
+		if (nextValue.trim() === "") {
+			clearInput(event);
+			onChange?.(event);
+			return;
+		}
+		if (nextValue.endsWith(",")) {
+			addTag(nextValue.slice(0, -1), event);
+			return;
+		}
+		if (controlledInputValue === void 0) setUncontrolledInputValue(nextValue);
+		onInputValueChange?.(nextValue);
+		onChange?.(event);
+	}
+	function handleBlur(event) {
+		setFocused(false);
+		onBlur?.(event);
+	}
+	function removeTag(index) {
+		updateTags(selectedTags.filter((_, currentIndex) => currentIndex !== index));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles.root,
+		"data-jaci-component": "tags-input",
+		"data-slot": "tags-input",
+		ref: rootRef,
+		children: [
+			label ? /* @__PURE__ */ jsx("label", {
+				className: styles.label,
+				"data-slot": "tags-input-label",
+				htmlFor: id,
+				children: label
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: cx(styles.control, className),
+				"data-disabled": disabled || void 0,
+				"data-focus": focused || void 0,
+				"data-slot": "tags-input-control",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: styles.tagList,
+					"data-slot": "tags-input-tag-list",
+					children: selectedTags.map((tag, index) => /* @__PURE__ */ jsxs("span", {
+						className: styles.tag,
+						"data-slot": "tags-input-tag",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: styles.tagLabel,
+							"data-slot": "tags-input-tag-label",
+							children: tag
+						}), /* @__PURE__ */ jsx("button", {
+							"aria-label": `Remove ${tag}`,
+							className: styles.tagRemove,
+							"data-slot": "tags-input-tag-remove",
+							disabled,
+							onClick: () => removeTag(index),
+							type: "button",
+							children: "×"
+						})]
+					}, tag))
+				}), /* @__PURE__ */ jsx("input", {
+					...props,
+					...ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {},
+					...ariaInvalid !== void 0 ? { "aria-invalid": ariaInvalid } : {},
+					...ariaLabel ? { "aria-label": ariaLabel } : {},
+					autoComplete: "off",
+					className: styles.input,
+					disabled,
+					id,
+					onBlur: handleBlur,
+					onChange: handleChange,
+					onFocus: (event) => {
+						setFocused(true);
+						onFocus?.(event);
+					},
+					placeholder,
+					ref,
+					type: "text",
+					value: inputValue
+				})]
+			}),
+			focused && data.length > 0 ? /* @__PURE__ */ jsx("div", {
+				className: styles.positioner,
+				"data-slot": "tags-input-positioner",
+				children: /* @__PURE__ */ jsx("div", {
+					"aria-label": "Suggestions",
+					className: styles.list,
+					"data-slot": "tags-input-list",
+					role: "listbox",
+					children: suggestions.length > 0 ? suggestions.map((item) => /* @__PURE__ */ jsx("button", {
+						"aria-selected": false,
+						className: styles.item,
+						"data-slot": "tags-input-item",
+						onClick: () => addTag(item),
+						onMouseDown: (event) => event.preventDefault(),
+						role: "option",
+						type: "button",
+						children: item
+					}, item)) : /* @__PURE__ */ jsx("div", {
+						className: styles.empty,
+						"data-slot": "tags-input-empty",
+						children: "No options"
+					})
+				})
+			}) : null
+		]
+	});
+});
+//#endregion
+export { TagsInput };
+
+//# sourceMappingURL=tags-input.js.map