@intlayer/design-system 6.1.6 → 7.0.0-canary.0

package/dist/esm/components/TextArea/AutoSizeTextArea.mjs

@@ -0,0 +1,108 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { TextArea } from "./TextArea.mjs";
+import { useEffect, useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/TextArea/AutoSizeTextArea.tsx
+const LINE_HEIGHT = 24;
+const LINE_PADDING = 12;
+/**
+* AutoSizedTextArea Component
+*
+* An enhanced textarea that automatically adjusts its height based on content,
+* providing a smooth user experience for variable-length text input.
+*
+* ## Features
+* - **Auto-Sizing**: Dynamically grows and shrinks based on content
+* - **Row Limits**: Configurable maximum rows before scrolling
+* - **Smooth Transitions**: Seamless height adjustments as user types
+* - **Scroll Management**: Automatic overflow handling when max height reached
+* - **Performance Optimized**: Efficient height calculations and updates
+*
+* ## Technical Details
+* - Line height: 24px with 12px padding
+* - Height calculation: `scrollHeight` vs `maxRows * lineHeight + padding`
+* - Resize: Disabled when auto-sizing is active for smooth experience
+* - Ref forwarding: Supports imperative access to textarea element
+*
+* ## Use Cases
+* - Chat message composition with dynamic sizing
+* - Comment forms that expand with content
+* - Note-taking interfaces with variable length
+* - Social media post creation
+* - Code snippet input with growth limits
+*
+* @example
+* ```tsx
+* // Chat-style auto-expanding textarea
+* const [message, setMessage] = useState('');
+*
+* <AutoSizedTextArea
+*   value={message}
+*   onChange={(e) => setMessage(e.target.value)}
+*   placeholder="Type your message..."
+*   autoSize={true}
+*   maxRows={8}
+*   className="min-h-[40px]"
+*   onKeyDown={(e) => {
+*     if (e.key === 'Enter' && !e.shiftKey) {
+*       e.preventDefault();
+*       sendMessage(message);
+*       setMessage('');
+*     }
+*   }}
+* />
+*
+* // Note-taking with generous height limits
+* <AutoSizedTextArea
+*   defaultValue={note.content}
+*   onChange={handleNoteChange}
+*   placeholder="Write your notes here..."
+*   autoSize={true}
+*   maxRows={20}
+*   variant={InputVariant.DEFAULT}
+* />
+* ```
+*/
+const AutoSizedTextArea = ({ className, autoSize = true, onChange, maxRows = 999, ref,...props }) => {
+	const textAreaRef = useRef(null);
+	useImperativeHandle(ref, () => textAreaRef.current);
+	const adjustHeight = () => {
+		const textAreaEl = textAreaRef.current;
+		if (!textAreaEl || !autoSize) return;
+		const textAreaStyle = textAreaEl.style;
+		textAreaStyle.height = "auto";
+		const scrollHeight = textAreaEl.scrollHeight;
+		const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;
+		const minHeight = LINE_HEIGHT + LINE_PADDING;
+		textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;
+	};
+	useEffect(() => {
+		adjustHeight();
+	}, [
+		props.value,
+		props.defaultValue,
+		adjustHeight
+	]);
+	const handleChange = (e) => {
+		onChange?.(e);
+		adjustHeight();
+	};
+	const setRef = (el) => {
+		textAreaRef.current = el;
+		if (el) adjustHeight();
+	};
+	return /* @__PURE__ */ jsx(TextArea, {
+		ref: setRef,
+		onChange: handleChange,
+		className: cn("overflow-y-auto", autoSize ? "resize-none" : "", className),
+		...props
+	});
+};
+
+//#endregion
+export { AutoSizedTextArea };
+//# sourceMappingURL=AutoSizeTextArea.mjs.map

package/dist/esm/components/TextArea/AutoSizeTextArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSizeTextArea.mjs","names":["AutoSizedTextArea: FC<AutoSizedTextAreaProps>","handleChange: ChangeEventHandler<HTMLTextAreaElement>"],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { TextArea, type TextAreaProps } from './TextArea';\n\n/**\n * Props for the AutoSizedTextArea component.\n *\n * Extends TextAreaProps with auto-sizing functionality and row limitations.\n *\n * @example\n * ```tsx\n * // Auto-sizing textarea that grows with content\n * <AutoSizedTextArea\n *   placeholder=\"Start typing and watch it grow...\"\n *   autoSize={true}\n *   maxRows={10}\n * />\n *\n * // Limited height with scroll when exceeded\n * <AutoSizedTextArea\n *   value={longText}\n *   onChange={handleChange}\n *   autoSize={true}\n *   maxRows={5}\n *   className=\"max-h-[120px]\"\n * />\n *\n * // Disable auto-sizing for fixed height\n * <AutoSizedTextArea\n *   autoSize={false}\n *   rows={3}\n *   placeholder=\"Fixed height textarea\"\n * />\n * ```\n */\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  /** Whether to automatically adjust height based on content */\n  autoSize?: boolean;\n  /** Maximum number of rows before scrolling is enabled */\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\n/**\n * AutoSizedTextArea Component\n *\n * An enhanced textarea that automatically adjusts its height based on content,\n * providing a smooth user experience for variable-length text input.\n *\n * ## Features\n * - **Auto-Sizing**: Dynamically grows and shrinks based on content\n * - **Row Limits**: Configurable maximum rows before scrolling\n * - **Smooth Transitions**: Seamless height adjustments as user types\n * - **Scroll Management**: Automatic overflow handling when max height reached\n * - **Performance Optimized**: Efficient height calculations and updates\n *\n * ## Technical Details\n * - Line height: 24px with 12px padding\n * - Height calculation: `scrollHeight` vs `maxRows * lineHeight + padding`\n * - Resize: Disabled when auto-sizing is active for smooth experience\n * - Ref forwarding: Supports imperative access to textarea element\n *\n * ## Use Cases\n * - Chat message composition with dynamic sizing\n * - Comment forms that expand with content\n * - Note-taking interfaces with variable length\n * - Social media post creation\n * - Code snippet input with growth limits\n *\n * @example\n * ```tsx\n * // Chat-style auto-expanding textarea\n * const [message, setMessage] = useState('');\n *\n * <AutoSizedTextArea\n *   value={message}\n *   onChange={(e) => setMessage(e.target.value)}\n *   placeholder=\"Type your message...\"\n *   autoSize={true}\n *   maxRows={8}\n *   className=\"min-h-[40px]\"\n *   onKeyDown={(e) => {\n *     if (e.key === 'Enter' && !e.shiftKey) {\n *       e.preventDefault();\n *       sendMessage(message);\n *       setMessage('');\n *     }\n *   }}\n * />\n *\n * // Note-taking with generous height limits\n * <AutoSizedTextArea\n *   defaultValue={note.content}\n *   onChange={handleNoteChange}\n *   placeholder=\"Write your notes here...\"\n *   autoSize={true}\n *   maxRows={20}\n *   variant={InputVariant.DEFAULT}\n * />\n * ```\n */\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = () => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;\n  };\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = (el: HTMLTextAreaElement | null) => {\n    textAreaRef.current = el;\n    if (el) {\n      adjustHeight();\n    }\n  };\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn(\n        'overflow-y-auto',\n        autoSize ? 'resize-none' : '',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;AAkDA,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DrB,MAAaA,qBAAiD,EAC5D,WACA,WAAW,MACX,UACA,UAAU,KACV,IACA,GAAG,YACC;CACJ,MAAM,cAAc,OAAmC,KAAK;AAE5D,qBAAoB,WAAW,YAAY,QAAS;CAEpD,MAAM,qBAAqB;EACzB,MAAM,aAAa,YAAY;AAE/B,MAAI,CAAC,cAAc,CAAC,SAAU;EAE9B,MAAM,gBAAgB,WAAW;AAGjC,gBAAc,SAAS;EACvB,MAAM,eAAe,WAAW;EAChC,MAAM,YAAY,cAAc,UAAU;EAC1C,MAAM,YAAY,cAAc;AAGhC,gBAAc,SAAS,GAAG,KAAK,IAAI,KAAK,IAAI,cAAc,UAAU,EAAE,UAAU,CAAC;;AAGnF,iBAAgB;AACd,gBAAc;IACb;EAAC,MAAM;EAAO,MAAM;EAAc;EAAa,CAAC;CAEnD,MAAMC,gBAAyD,MAAM;AACnE,aAAW,EAAE;AACb,gBAAc;;CAGhB,MAAM,UAAU,OAAmC;AACjD,cAAY,UAAU;AACtB,MAAI,GACF,eAAc;;AAIlB,QACE,oBAAC;EACC,KAAK;EACL,UAAU;EACV,WAAW,GACT,mBACA,WAAW,gBAAgB,IAC3B,UACD;EACD,GAAI;GACJ"}

package/dist/esm/components/TextArea/AutocompleteTextArea.mjs

@@ -0,0 +1,286 @@
+'use client';
+
+
+import { useAutocomplete } from "../../hooks/reactQuery.mjs";
+import { AutoSizedTextArea } from "./AutoSizeTextArea.mjs";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useConfiguration } from "@intlayer/editor-react";
+
+//#region src/components/TextArea/AutocompleteTextArea.tsx
+/**
+* Custom hook for debouncing values to prevent excessive API calls.
+*
+* Delays updating the returned value until the input value has stopped changing
+* for the specified delay period.
+*
+* @param value - The value to debounce
+* @param delay - Delay in milliseconds before updating the debounced value
+* @returns The debounced value that only updates after the delay period
+*
+* @example
+* ```tsx
+* const [searchTerm, setSearchTerm] = useState('');
+* const debouncedSearchTerm = useDebounce(searchTerm, 300);
+*
+* useEffect(() => {
+*   if (debouncedSearchTerm) {
+*     performSearch(debouncedSearchTerm);
+*   }
+* }, [debouncedSearchTerm]);
+* ```
+*/
+const useDebounce = (value, delay) => {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+		return () => clearTimeout(timer);
+	}, [value, delay]);
+	return debouncedValue;
+};
+/**
+* AutoCompleteTextarea Component
+*
+* An intelligent textarea that provides AI-powered autocomplete suggestions as users type,
+* combining auto-sizing functionality with contextual text completion.
+*
+* ## Features
+* - **AI-Powered Suggestions**: Context-aware autocomplete using configured AI models
+* - **Debounced API Calls**: Efficient suggestion fetching with 200ms debounce
+* - **Visual Suggestions**: Inline preview of suggested completions
+* - **Keyboard Navigation**: Tab key to accept suggestions
+* - **Context Analysis**: Uses surrounding text for better suggestions
+* - **Auto-Sizing**: Inherits all AutoSizedTextArea capabilities
+* - **Performance Optimized**: Smart caching and minimal re-renders
+*
+* ## Technical Implementation
+* - **Debounce Strategy**: 200ms delay before fetching suggestions
+* - **Context Window**: 5 lines before/after cursor for context
+* - **Minimum Trigger**: Requires 3+ characters before suggesting
+* - **Position Tracking**: Ghost layer for accurate suggestion positioning
+* - **Cursor Management**: Tracks cursor position during suggestion fetch
+*
+* ## AI Integration
+* - Uses configured AI model (OpenAI, Anthropic, etc.)
+* - Sends context-aware prompts for relevant suggestions
+* - Respects temperature and model settings from configuration
+* - Handles API errors gracefully without interrupting user flow
+*
+* ## Use Cases
+* - **Content Creation**: Blog posts, articles, documentation
+* - **Code Comments**: Intelligent code documentation assistance
+* - **Email Composition**: Professional email writing assistance
+* - **Creative Writing**: Story and narrative completion
+* - **Technical Documentation**: API docs, README files
+* - **Social Media**: Post creation with engagement optimization
+*
+* @example
+* ```tsx
+* // Blog writing assistant
+* const [blogPost, setBlogPost] = useState('');
+* const [isAiEnabled, setIsAiEnabled] = useState(true);
+*
+* <div className="space-y-4">
+*   <div className="flex items-center gap-2">
+*     <Switch
+*       checked={isAiEnabled}
+*       onChange={setIsAiEnabled}
+*     />
+*     <label>AI Writing Assistant</label>
+*   </div>
+*
+*   <AutoCompleteTextarea
+*     value={blogPost}
+*     onChange={(e) => setBlogPost(e.target.value)}
+*     placeholder="Start writing your blog post..."
+*     isActive={isAiEnabled}
+*     autoSize={true}
+*     maxRows={15}
+*     className="min-h-[200px] font-serif text-lg leading-relaxed"
+*   />
+* </div>
+*
+* // Code documentation assistant
+* <AutoCompleteTextarea
+*   value={docComment}
+*   onChange={handleDocChange}
+*   placeholder="/** Describe this function... *\/"
+*   isActive={true}
+*   autoSize={true}
+*   maxRows={8}
+*   className="font-mono text-sm"
+* />
+*
+* // Email composition with templates
+* <AutoCompleteTextarea
+*   defaultValue="Dear "
+*   placeholder="AI will help complete your email..."
+*   isActive={true}
+*   autoSize={true}
+*   maxRows={12}
+*   variant={InputVariant.DEFAULT}
+* />
+* ```
+*
+* ## Accessibility
+* - Ghost layer is properly hidden from screen readers
+* - Maintains focus management during suggestion acceptance
+* - Preserves keyboard navigation patterns
+* - Respects reduced motion preferences
+*/
+const AutoCompleteTextarea = ({ isActive = true, suggestion: suggestionProp,...props }) => {
+	const defaultValue = String(props.value ?? props.defaultValue ?? "");
+	const { mutate: autocomplete } = useAutocomplete();
+	const configuration = useConfiguration();
+	const [isTyped, setIsTyped] = useState(false);
+	const [text, setText] = useState(defaultValue);
+	const [suggestion, setSuggestion] = useState("");
+	const textareaRef = useRef(null);
+	const placeholderRef = useRef(null);
+	const ghostLayerRef = useRef(null);
+	const [suggestionPosition, setSuggestionPosition] = useState(null);
+	const [cursorAtFetch, setCursorAtFetch] = useState(-1);
+	const debouncedText = useDebounce(text, 200);
+	useEffect(() => {
+		if (typeof props.value === "undefined") return;
+		setText(defaultValue);
+	}, [props.value, props.defaultValue]);
+	useEffect(() => {
+		if (!isActive) return;
+		if (!isTyped) return;
+		const fetchSuggestion = async () => {
+			try {
+				const cursor = textareaRef.current?.selectionStart ?? debouncedText.length;
+				const before = debouncedText.slice(0, cursor);
+				const after = debouncedText.slice(cursor);
+				const numLines = 5;
+				const beforeLines = before.split("\n");
+				autocomplete({
+					text: before,
+					contextBefore: beforeLines.slice(Math.max(0, beforeLines.length - numLines - 1), -1).join("\n"),
+					currentLine: beforeLines[beforeLines.length - 1] ?? "",
+					contextAfter: after.split("\n").slice(1, numLines + 1).join("\n"),
+					aiOptions: {
+						apiKey: configuration.ai?.apiKey,
+						model: configuration.ai?.model,
+						temperature: configuration.ai?.temperature
+					}
+				}, { onSuccess: (data) => {
+					setSuggestion(data.data?.autocompletion ?? "");
+					setCursorAtFetch(cursor);
+				} });
+			} catch (err) {
+				console.error("Autocomplete error:", err);
+			}
+		};
+		if (debouncedText.length > 3) {
+			setSuggestion("");
+			fetchSuggestion();
+		} else setSuggestion("");
+	}, [
+		debouncedText,
+		isActive,
+		autocomplete,
+		configuration
+	]);
+	useEffect(() => {
+		if (!suggestion || cursorAtFetch === -1 || !placeholderRef.current || !ghostLayerRef.current) {
+			setSuggestionPosition(null);
+			return;
+		}
+		const rect = placeholderRef.current.getBoundingClientRect();
+		const parentRect = ghostLayerRef.current.getBoundingClientRect();
+		setSuggestionPosition({
+			left: rect.left - parentRect.left,
+			top: rect.top - parentRect.top
+		});
+	}, [
+		suggestion,
+		cursorAtFetch,
+		text
+	]);
+	const acceptSuggestion = () => {
+		const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;
+		if (currentCursor !== cursorAtFetch) return;
+		setText(text.slice(0, currentCursor) + suggestion + text.slice(currentCursor));
+		setSuggestion("");
+		setCursorAtFetch(-1);
+		setTimeout(() => {
+			textareaRef.current?.focus();
+			const newCursorPos = currentCursor + suggestion.length;
+			textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);
+		}, 0);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative w-full",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: ghostLayerRef,
+				className: "pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]",
+				"aria-hidden": "true",
+				children: [suggestion && cursorAtFetch !== -1 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "align-text-top text-transparent",
+						children: text.slice(0, cursorAtFetch)
+					}),
+					/* @__PURE__ */ jsx("span", {
+						ref: placeholderRef,
+						style: { visibility: "hidden" },
+						"aria-hidden": "true",
+						children: suggestion
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "align-text-top text-transparent",
+						children: text.slice(cursorAtFetch)
+					})
+				] }) : /* @__PURE__ */ jsx("span", {
+					className: "align-text-top text-transparent",
+					children: text
+				}), suggestionProp && /* @__PURE__ */ jsx("span", {
+					className: "align-text-top text-neutral",
+					children: suggestionProp
+				})]
+			}),
+			suggestion && suggestionPosition && /* @__PURE__ */ jsx("div", {
+				className: "pointer-events-none whitespace-pre-wrap break-words text-base text-neutral leading-[1.45rem] md:text-sm md:leading-[1.23rem]",
+				style: {
+					position: "absolute",
+					left: suggestionPosition.left,
+					top: suggestionPosition.top
+				},
+				children: suggestion
+			}),
+			/* @__PURE__ */ jsx(AutoSizedTextArea, {
+				...props,
+				ref: textareaRef,
+				value: text,
+				onChange: (e) => {
+					setIsTyped(true);
+					setText(e.target.value);
+					setSuggestion("");
+					props.onChange?.(e);
+				},
+				onKeyDown: (e) => {
+					if (e.key === "Tab" && suggestion) {
+						e.preventDefault();
+						acceptSuggestion();
+					}
+					props.onKeyDown?.(e);
+				},
+				onSelect: (e) => {
+					if (suggestion && e.target.selectionStart !== cursorAtFetch) {
+						setSuggestion("");
+						setCursorAtFetch(-1);
+					}
+					props.onSelect?.(e);
+				}
+			})
+		]
+	});
+};
+
+//#endregion
+export { AutoCompleteTextarea, useDebounce };
+//# sourceMappingURL=AutocompleteTextArea.mjs.map

package/dist/esm/components/TextArea/AutocompleteTextArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteTextArea.mjs","names":["AutoCompleteTextarea: FC<AutocompleteTextAreaProps>"],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport type { AutocompleteResponse } from '@intlayer/backend';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { useAutocomplete } from '../../hooks/reactQuery';\nimport {\n  AutoSizedTextArea,\n  type AutoSizedTextAreaProps,\n} from './AutoSizeTextArea';\n\n/**\n * Custom hook for debouncing values to prevent excessive API calls.\n *\n * Delays updating the returned value until the input value has stopped changing\n * for the specified delay period.\n *\n * @param value - The value to debounce\n * @param delay - Delay in milliseconds before updating the debounced value\n * @returns The debounced value that only updates after the delay period\n *\n * @example\n * ```tsx\n * const [searchTerm, setSearchTerm] = useState('');\n * const debouncedSearchTerm = useDebounce(searchTerm, 300);\n *\n * useEffect(() => {\n *   if (debouncedSearchTerm) {\n *     performSearch(debouncedSearchTerm);\n *   }\n * }, [debouncedSearchTerm]);\n * ```\n */\nexport const useDebounce = <T,>(value: T, delay: number): T => {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      setDebouncedValue(value);\n    }, delay);\n\n    // Cleanup the timer if value changes before 'delay' ms\n    return () => clearTimeout(timer);\n  }, [value, delay]);\n\n  return debouncedValue;\n};\n\n/**\n * Props for the AutocompleteTextArea component.\n *\n * Extends AutoSizedTextAreaProps with AI-powered autocomplete functionality.\n *\n * @example\n * ```tsx\n * // AI-powered autocomplete textarea\n * <AutoCompleteTextarea\n *   placeholder=\"Start typing for AI suggestions...\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={10}\n * />\n *\n * // Manual suggestion mode\n * <AutoCompleteTextarea\n *   value={content}\n *   onChange={handleChange}\n *   suggestion=\"Consider adding more details about...\"\n *   isActive={false}\n * />\n *\n * // Disabled autocomplete for sensitive content\n * <AutoCompleteTextarea\n *   placeholder=\"Private notes (no AI assistance)\"\n *   isActive={false}\n *   autoSize={true}\n * />\n * ```\n */\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  /** Whether AI autocomplete is active and should fetch suggestions */\n  isActive?: boolean;\n  /** Manual suggestion text to display (overrides AI suggestions) */\n  suggestion?: string;\n};\n\n/**\n * AutoCompleteTextarea Component\n *\n * An intelligent textarea that provides AI-powered autocomplete suggestions as users type,\n * combining auto-sizing functionality with contextual text completion.\n *\n * ## Features\n * - **AI-Powered Suggestions**: Context-aware autocomplete using configured AI models\n * - **Debounced API Calls**: Efficient suggestion fetching with 200ms debounce\n * - **Visual Suggestions**: Inline preview of suggested completions\n * - **Keyboard Navigation**: Tab key to accept suggestions\n * - **Context Analysis**: Uses surrounding text for better suggestions\n * - **Auto-Sizing**: Inherits all AutoSizedTextArea capabilities\n * - **Performance Optimized**: Smart caching and minimal re-renders\n *\n * ## Technical Implementation\n * - **Debounce Strategy**: 200ms delay before fetching suggestions\n * - **Context Window**: 5 lines before/after cursor for context\n * - **Minimum Trigger**: Requires 3+ characters before suggesting\n * - **Position Tracking**: Ghost layer for accurate suggestion positioning\n * - **Cursor Management**: Tracks cursor position during suggestion fetch\n *\n * ## AI Integration\n * - Uses configured AI model (OpenAI, Anthropic, etc.)\n * - Sends context-aware prompts for relevant suggestions\n * - Respects temperature and model settings from configuration\n * - Handles API errors gracefully without interrupting user flow\n *\n * ## Use Cases\n * - **Content Creation**: Blog posts, articles, documentation\n * - **Code Comments**: Intelligent code documentation assistance\n * - **Email Composition**: Professional email writing assistance\n * - **Creative Writing**: Story and narrative completion\n * - **Technical Documentation**: API docs, README files\n * - **Social Media**: Post creation with engagement optimization\n *\n * @example\n * ```tsx\n * // Blog writing assistant\n * const [blogPost, setBlogPost] = useState('');\n * const [isAiEnabled, setIsAiEnabled] = useState(true);\n *\n * <div className=\"space-y-4\">\n *   <div className=\"flex items-center gap-2\">\n *     <Switch\n *       checked={isAiEnabled}\n *       onChange={setIsAiEnabled}\n *     />\n *     <label>AI Writing Assistant</label>\n *   </div>\n *\n *   <AutoCompleteTextarea\n *     value={blogPost}\n *     onChange={(e) => setBlogPost(e.target.value)}\n *     placeholder=\"Start writing your blog post...\"\n *     isActive={isAiEnabled}\n *     autoSize={true}\n *     maxRows={15}\n *     className=\"min-h-[200px] font-serif text-lg leading-relaxed\"\n *   />\n * </div>\n *\n * // Code documentation assistant\n * <AutoCompleteTextarea\n *   value={docComment}\n *   onChange={handleDocChange}\n *   placeholder=\"/** Describe this function... *\\/\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={8}\n *   className=\"font-mono text-sm\"\n * />\n *\n * // Email composition with templates\n * <AutoCompleteTextarea\n *   defaultValue=\"Dear \"\n *   placeholder=\"AI will help complete your email...\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={12}\n *   variant={InputVariant.DEFAULT}\n * />\n * ```\n *\n * ## Accessibility\n * - Ghost layer is properly hidden from screen readers\n * - Maintains focus management during suggestion acceptance\n * - Preserves keyboard navigation patterns\n * - Respects reduced motion preferences\n */\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n  isActive = true,\n  suggestion: suggestionProp,\n  ...props\n}) => {\n  const defaultValue = String(props.value ?? props.defaultValue ?? '');\n  const { mutate: autocomplete } = useAutocomplete();\n  const configuration = useConfiguration();\n  const [isTyped, setIsTyped] = useState(false);\n  const [text, setText] = useState(defaultValue);\n  const [suggestion, setSuggestion] = useState('');\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const placeholderRef = useRef<HTMLSpanElement>(null);\n  const ghostLayerRef = useRef<HTMLDivElement>(null);\n  const [suggestionPosition, setSuggestionPosition] = useState<{\n    left: number;\n    top: number;\n  } | null>(null);\n  const [cursorAtFetch, setCursorAtFetch] = useState(-1);\n\n  // Only update this “debouncedText” after the user stops typing for 200ms\n  const debouncedText = useDebounce(text, 200);\n\n  useEffect(() => {\n    if (typeof props.value === 'undefined') return;\n    setText(defaultValue);\n  }, [props.value, props.defaultValue]);\n\n  useEffect(() => {\n    if (!isActive) return;\n    if (!isTyped) return;\n\n    const fetchSuggestion = async () => {\n      try {\n        const cursor =\n          textareaRef.current?.selectionStart ?? debouncedText.length;\n        const before = debouncedText.slice(0, cursor);\n        const after = debouncedText.slice(cursor);\n        const numLines = 5;\n        const beforeLines = before.split('\\n');\n        const contextBeforeLines = beforeLines.slice(\n          Math.max(0, beforeLines.length - numLines - 1),\n          -1\n        );\n        const contextBefore = contextBeforeLines.join('\\n');\n        const currentLine = beforeLines[beforeLines.length - 1] ?? '';\n        const afterLines = after.split('\\n');\n        const contextAfter = afterLines.slice(1, numLines + 1).join('\\n');\n\n        autocomplete(\n          {\n            text: before,\n            contextBefore,\n            currentLine,\n            contextAfter,\n            aiOptions: {\n              apiKey: configuration.ai?.apiKey,\n              model: configuration.ai?.model,\n              temperature: configuration.ai?.temperature,\n            },\n          },\n          {\n            onSuccess: (data: AutocompleteResponse) => {\n              setSuggestion(data.data?.autocompletion ?? '');\n              setCursorAtFetch(cursor);\n            },\n          }\n        );\n      } catch (err) {\n        console.error('Autocomplete error:', err);\n      }\n    };\n\n    if (debouncedText.length > 3) {\n      // Only fetch if user typed more than 3 chars and has paused\n      setSuggestion('');\n      fetchSuggestion();\n    } else {\n      // If typed less than threshold, clear the suggestion\n      setSuggestion('');\n    }\n  }, [debouncedText, isActive, autocomplete, configuration]);\n\n  useEffect(() => {\n    if (\n      !suggestion ||\n      cursorAtFetch === -1 ||\n      !placeholderRef.current ||\n      !ghostLayerRef.current\n    ) {\n      setSuggestionPosition(null);\n      return;\n    }\n\n    const rect = placeholderRef.current.getBoundingClientRect();\n    const parentRect = ghostLayerRef.current.getBoundingClientRect();\n    setSuggestionPosition({\n      left: rect.left - parentRect.left,\n      top: rect.top - parentRect.top,\n    });\n  }, [suggestion, cursorAtFetch, text]);\n\n  const acceptSuggestion = () => {\n    const currentCursor = textareaRef.current?.selectionStart ?? cursorAtFetch;\n    if (currentCursor !== cursorAtFetch) return;\n    const newText =\n      text.slice(0, currentCursor) + suggestion + text.slice(currentCursor);\n    setText(newText);\n    setSuggestion('');\n    setCursorAtFetch(-1);\n    setTimeout(() => {\n      textareaRef.current?.focus();\n      const newCursorPos = currentCursor + suggestion.length;\n      textareaRef.current?.setSelectionRange(newCursorPos, newCursorPos);\n    }, 0);\n  };\n\n  return (\n    <div className=\"relative w-full\">\n      <div\n        ref={ghostLayerRef}\n        className=\"pointer-events-none absolute inset-0 whitespace-pre-wrap break-words px-1 py-3 text-base leading-[1.45rem] md:py-1 md:text-sm md:leading-[1.23rem]\"\n        aria-hidden=\"true\"\n      >\n        {suggestion && cursorAtFetch !== -1 ? (\n          <>\n            <span className=\"align-text-top text-transparent\">\n              {text.slice(0, cursorAtFetch)}\n            </span>\n            <span\n              ref={placeholderRef}\n              style={{ visibility: 'hidden' }}\n              aria-hidden=\"true\"\n            >\n              {suggestion}\n            </span>\n            <span className=\"align-text-top text-transparent\">\n              {text.slice(cursorAtFetch)}\n            </span>\n          </>\n        ) : (\n          <span className=\"align-text-top text-transparent\">{text}</span>\n        )}\n        {suggestionProp && (\n          <span className=\"align-text-top text-neutral\">{suggestionProp}</span>\n        )}\n      </div>\n      {suggestion && suggestionPosition && (\n        <div\n          className=\"pointer-events-none whitespace-pre-wrap break-words text-base text-neutral leading-[1.45rem] md:text-sm md:leading-[1.23rem]\"\n          style={{\n            position: 'absolute',\n            left: suggestionPosition.left,\n            top: suggestionPosition.top,\n          }}\n        >\n          {suggestion}\n        </div>\n      )}\n      <AutoSizedTextArea\n        {...props}\n        ref={textareaRef}\n        value={text}\n        onChange={(e) => {\n          setIsTyped(true);\n          setText(e.target.value);\n          setSuggestion('');\n          props.onChange?.(e);\n        }}\n        onKeyDown={(e) => {\n          if (e.key === 'Tab' && suggestion) {\n            e.preventDefault();\n            acceptSuggestion();\n          }\n          props.onKeyDown?.(e);\n        }}\n        onSelect={(e) => {\n          if (\n            suggestion &&\n            (e.target as HTMLTextAreaElement).selectionStart !== cursorAtFetch\n          ) {\n            setSuggestion('');\n            setCursorAtFetch(-1);\n          }\n          props.onSelect?.(e);\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAa,eAAmB,OAAU,UAAqB;CAC7D,MAAM,CAAC,gBAAgB,qBAAqB,SAAY,MAAM;AAE9D,iBAAgB;EACd,MAAM,QAAQ,iBAAiB;AAC7B,qBAAkB,MAAM;KACvB,MAAM;AAGT,eAAa,aAAa,MAAM;IAC/B,CAAC,OAAO,MAAM,CAAC;AAElB,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmIT,MAAaA,wBAAuD,EAClE,WAAW,MACX,YAAY,eACZ,GAAG,YACC;CACJ,MAAM,eAAe,OAAO,MAAM,SAAS,MAAM,gBAAgB,GAAG;CACpE,MAAM,EAAE,QAAQ,iBAAiB,iBAAiB;CAClD,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,CAAC,MAAM,WAAW,SAAS,aAAa;CAC9C,MAAM,CAAC,YAAY,iBAAiB,SAAS,GAAG;CAChD,MAAM,cAAc,OAA4B,KAAK;CACrD,MAAM,iBAAiB,OAAwB,KAAK;CACpD,MAAM,gBAAgB,OAAuB,KAAK;CAClD,MAAM,CAAC,oBAAoB,yBAAyB,SAG1C,KAAK;CACf,MAAM,CAAC,eAAe,oBAAoB,SAAS,GAAG;CAGtD,MAAM,gBAAgB,YAAY,MAAM,IAAI;AAE5C,iBAAgB;AACd,MAAI,OAAO,MAAM,UAAU,YAAa;AACxC,UAAQ,aAAa;IACpB,CAAC,MAAM,OAAO,MAAM,aAAa,CAAC;AAErC,iBAAgB;AACd,MAAI,CAAC,SAAU;AACf,MAAI,CAAC,QAAS;EAEd,MAAM,kBAAkB,YAAY;AAClC,OAAI;IACF,MAAM,SACJ,YAAY,SAAS,kBAAkB,cAAc;IACvD,MAAM,SAAS,cAAc,MAAM,GAAG,OAAO;IAC7C,MAAM,QAAQ,cAAc,MAAM,OAAO;IACzC,MAAM,WAAW;IACjB,MAAM,cAAc,OAAO,MAAM,KAAK;AAUtC,iBACE;KACE,MAAM;KACN,eAZuB,YAAY,MACrC,KAAK,IAAI,GAAG,YAAY,SAAS,WAAW,EAAE,EAC9C,GACD,CACwC,KAAK,KAAK;KAS/C,aARgB,YAAY,YAAY,SAAS,MAAM;KASvD,cARe,MAAM,MAAM,KAAK,CACJ,MAAM,GAAG,WAAW,EAAE,CAAC,KAAK,KAAK;KAQ7D,WAAW;MACT,QAAQ,cAAc,IAAI;MAC1B,OAAO,cAAc,IAAI;MACzB,aAAa,cAAc,IAAI;MAChC;KACF,EACD,EACE,YAAY,SAA+B;AACzC,mBAAc,KAAK,MAAM,kBAAkB,GAAG;AAC9C,sBAAiB,OAAO;OAE3B,CACF;YACM,KAAK;AACZ,YAAQ,MAAM,uBAAuB,IAAI;;;AAI7C,MAAI,cAAc,SAAS,GAAG;AAE5B,iBAAc,GAAG;AACjB,oBAAiB;QAGjB,eAAc,GAAG;IAElB;EAAC;EAAe;EAAU;EAAc;EAAc,CAAC;AAE1D,iBAAgB;AACd,MACE,CAAC,cACD,kBAAkB,MAClB,CAAC,eAAe,WAChB,CAAC,cAAc,SACf;AACA,yBAAsB,KAAK;AAC3B;;EAGF,MAAM,OAAO,eAAe,QAAQ,uBAAuB;EAC3D,MAAM,aAAa,cAAc,QAAQ,uBAAuB;AAChE,wBAAsB;GACpB,MAAM,KAAK,OAAO,WAAW;GAC7B,KAAK,KAAK,MAAM,WAAW;GAC5B,CAAC;IACD;EAAC;EAAY;EAAe;EAAK,CAAC;CAErC,MAAM,yBAAyB;EAC7B,MAAM,gBAAgB,YAAY,SAAS,kBAAkB;AAC7D,MAAI,kBAAkB,cAAe;AAGrC,UADE,KAAK,MAAM,GAAG,cAAc,GAAG,aAAa,KAAK,MAAM,cAAc,CACvD;AAChB,gBAAc,GAAG;AACjB,mBAAiB,GAAG;AACpB,mBAAiB;AACf,eAAY,SAAS,OAAO;GAC5B,MAAM,eAAe,gBAAgB,WAAW;AAChD,eAAY,SAAS,kBAAkB,cAAc,aAAa;KACjE,EAAE;;AAGP,QACE,qBAAC;EAAI,WAAU;;GACb,qBAAC;IACC,KAAK;IACL,WAAU;IACV,eAAY;eAEX,cAAc,kBAAkB,KAC/B;KACE,oBAAC;MAAK,WAAU;gBACb,KAAK,MAAM,GAAG,cAAc;OACxB;KACP,oBAAC;MACC,KAAK;MACL,OAAO,EAAE,YAAY,UAAU;MAC/B,eAAY;gBAEX;OACI;KACP,oBAAC;MAAK,WAAU;gBACb,KAAK,MAAM,cAAc;OACrB;QACN,GAEH,oBAAC;KAAK,WAAU;eAAmC;MAAY,EAEhE,kBACC,oBAAC;KAAK,WAAU;eAA+B;MAAsB;KAEnE;GACL,cAAc,sBACb,oBAAC;IACC,WAAU;IACV,OAAO;KACL,UAAU;KACV,MAAM,mBAAmB;KACzB,KAAK,mBAAmB;KACzB;cAEA;KACG;GAER,oBAAC;IACC,GAAI;IACJ,KAAK;IACL,OAAO;IACP,WAAW,MAAM;AACf,gBAAW,KAAK;AAChB,aAAQ,EAAE,OAAO,MAAM;AACvB,mBAAc,GAAG;AACjB,WAAM,WAAW,EAAE;;IAErB,YAAY,MAAM;AAChB,SAAI,EAAE,QAAQ,SAAS,YAAY;AACjC,QAAE,gBAAgB;AAClB,wBAAkB;;AAEpB,WAAM,YAAY,EAAE;;IAEtB,WAAW,MAAM;AACf,SACE,cACC,EAAE,OAA+B,mBAAmB,eACrD;AACA,oBAAc,GAAG;AACjB,uBAAiB,GAAG;;AAEtB,WAAM,WAAW,EAAE;;KAErB;;GACE"}

package/dist/esm/components/TextArea/TextArea.mjs

@@ -0,0 +1,59 @@
+import { cn } from "../../utils/cn.mjs";
+import { inputVariants } from "../Input/Input.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/TextArea/TextArea.tsx
+/**
+* TextArea Component
+*
+* A flexible textarea component that extends the standard HTML textarea with
+* design system styling variants, validation states, and consistent visual appearance.
+*
+* ## Features
+* - **Variant Support**: Multiple visual states (default, error, success, warning)
+* - **Validation Styling**: Optional validation feedback styling
+* - **Resize Control**: Disabled by default for consistent layout
+* - **Design System Integration**: Uses shared input variants for consistency
+* - **Accessibility**: Maintains all standard textarea accessibility features
+*
+* ## Use Cases
+* - Multi-line text input forms
+* - Comment and message composition
+* - Description and content fields
+* - Feedback and review forms
+* - Code snippet input (when combined with monospace styling)
+*
+* @example
+* ```tsx
+* // Basic textarea
+* <TextArea
+*   placeholder="Enter your thoughts..."
+*   rows={4}
+* />
+*
+* // Controlled with validation
+* const [content, setContent] = useState('');
+* const hasError = content.length < 10;
+*
+* <TextArea
+*   value={content}
+*   onChange={(e) => setContent(e.target.value)}
+*   variant={hasError ? InputVariant.ERROR : InputVariant.SUCCESS}
+*   validationStyleEnabled={true}
+*   placeholder="Minimum 10 characters required"
+*   className="min-h-[100px]"
+* />
+* ```
+*/
+const TextArea = ({ className, variant, validationStyleEnabled = false,...props }) => /* @__PURE__ */ jsx("textarea", {
+	className: cn("resize-none", inputVariants({
+		variant,
+		validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled",
+		className
+	})),
+	...props
+});
+
+//#endregion
+export { TextArea };
+//# sourceMappingURL=TextArea.mjs.map

package/dist/esm/components/TextArea/TextArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.mjs","names":["TextArea: FC<TextAreaProps>"],"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import type { VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { type InputVariant, inputVariants } from '../Input';\n\n/**\n * Props for the TextArea component.\n *\n * Extends standard HTML textarea attributes with additional design system variants\n * and validation styling options.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TextArea placeholder=\"Enter your message...\" />\n *\n * // With error validation styling\n * <TextArea\n *   value={message}\n *   onChange={handleChange}\n *   variant={InputVariant.ERROR}\n *   validationStyleEnabled={true}\n *   placeholder=\"Message is required\"\n * />\n *\n * // Large multiline input\n * <TextArea\n *   rows={6}\n *   cols={50}\n *   variant={InputVariant.DEFAULT}\n *   className=\"min-h-[120px]\"\n *   placeholder=\"Write a detailed description...\"\n * />\n * ```\n */\nexport type TextAreaProps = DetailedHTMLProps<\n  DetailedHTMLProps<\n    TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HTMLTextAreaElement\n  >,\n  HTMLTextAreaElement\n> & {\n  /** Enable validation styling based on the variant prop */\n  validationStyleEnabled?: boolean;\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant'\n  > & {\n    /** Visual variant of the textarea (default, success, error, warning, etc.) */\n    variant?: InputVariant | `${InputVariant}`;\n  };\n\n/**\n * TextArea Component\n *\n * A flexible textarea component that extends the standard HTML textarea with\n * design system styling variants, validation states, and consistent visual appearance.\n *\n * ## Features\n * - **Variant Support**: Multiple visual states (default, error, success, warning)\n * - **Validation Styling**: Optional validation feedback styling\n * - **Resize Control**: Disabled by default for consistent layout\n * - **Design System Integration**: Uses shared input variants for consistency\n * - **Accessibility**: Maintains all standard textarea accessibility features\n *\n * ## Use Cases\n * - Multi-line text input forms\n * - Comment and message composition\n * - Description and content fields\n * - Feedback and review forms\n * - Code snippet input (when combined with monospace styling)\n *\n * @example\n * ```tsx\n * // Basic textarea\n * <TextArea\n *   placeholder=\"Enter your thoughts...\"\n *   rows={4}\n * />\n *\n * // Controlled with validation\n * const [content, setContent] = useState('');\n * const hasError = content.length < 10;\n *\n * <TextArea\n *   value={content}\n *   onChange={(e) => setContent(e.target.value)}\n *   variant={hasError ? InputVariant.ERROR : InputVariant.SUCCESS}\n *   validationStyleEnabled={true}\n *   placeholder=\"Minimum 10 characters required\"\n *   className=\"min-h-[100px]\"\n * />\n * ```\n */\nexport const TextArea: FC<TextAreaProps> = ({\n  className,\n  variant,\n  validationStyleEnabled = false,\n  ...props\n}) => (\n  <textarea\n    className={cn(\n      'resize-none',\n      inputVariants({\n        variant,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n        className,\n      })\n    )}\n    {...props}\n  />\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAaA,YAA+B,EAC1C,WACA,SACA,yBAAyB,MACzB,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,eACA,cAAc;EACZ;EACA,wBAAwB,yBAAyB,YAAY;EAC7D;EACD,CAAC,CACH;CACD,GAAI;EACJ"}

package/dist/esm/components/TextArea/index.mjs

@@ -0,0 +1,5 @@
+import { TextArea } from "./TextArea.mjs";
+import { AutoSizedTextArea } from "./AutoSizeTextArea.mjs";
+import { AutoCompleteTextarea, useDebounce } from "./AutocompleteTextArea.mjs";
+
+export { AutoCompleteTextarea, AutoSizedTextArea, TextArea, useDebounce };

package/dist/esm/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs

@@ -0,0 +1,81 @@
+'use client';
+
+
+import { Button, ButtonVariant } from "../Button/Button.mjs";
+import { Container } from "../Container/index.mjs";
+import { DropDown } from "../DropDown/index.mjs";
+import { Modes } from "./types.mjs";
+import { CircleDashed, Moon, Sun } from "lucide-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx
+const ButtonItem = ({ Icon, children,...props }) => /* @__PURE__ */ jsx("div", {
+	className: "relative w-full p-0.5",
+	children: /* @__PURE__ */ jsx(Button, {
+		className: "w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25",
+		Icon,
+		"data-mode": "system",
+		role: "option",
+		variant: ButtonVariant.NONE,
+		...props,
+		children
+	})
+});
+const DesktopThemeSwitcher = ({ theme, setTheme, systemTheme }) => {
+	const [mode, setMode] = useState(systemTheme === theme ? Modes.system : theme);
+	const switchMode = (mode$1) => {
+		if (mode$1 === Modes.system) setTheme(systemTheme ?? Modes.light);
+		else setTheme(mode$1);
+		setMode(mode$1);
+	};
+	const panelIdentifier = "theme-switcher";
+	return /* @__PURE__ */ jsxs(DropDown, {
+		identifier: panelIdentifier,
+		children: [/* @__PURE__ */ jsxs(DropDown.Trigger, {
+			className: "p-2",
+			identifier: panelIdentifier,
+			"aria-label": "Theme selector",
+			children: [
+				mode === Modes.system && /* @__PURE__ */ jsx(CircleDashed, { "data-mode": "system" }),
+				mode === Modes.light && /* @__PURE__ */ jsx(Sun, { "data-mode": "light" }),
+				mode === Modes.dark && /* @__PURE__ */ jsx(Moon, { "data-mode": "dark" })
+			]
+		}), /* @__PURE__ */ jsx(DropDown.Panel, {
+			identifier: panelIdentifier,
+			isFocusable: true,
+			isOverable: true,
+			children: /* @__PURE__ */ jsxs(Container, {
+				className: "min-w-[100px] items-start p-1",
+				separator: "y",
+				children: [
+					/* @__PURE__ */ jsx(ButtonItem, {
+						Icon: CircleDashed,
+						onClick: () => switchMode(Modes.system),
+						isActive: mode === Modes.system,
+						label: "Restore to system mode",
+						children: "System"
+					}),
+					/* @__PURE__ */ jsx(ButtonItem, {
+						Icon: Sun,
+						onClick: () => switchMode(Modes.light),
+						isActive: mode === Modes.light,
+						label: "Switch to light mode",
+						children: "Light"
+					}),
+					/* @__PURE__ */ jsx(ButtonItem, {
+						Icon: Moon,
+						onClick: () => switchMode(Modes.dark),
+						isActive: mode === Modes.dark,
+						label: "Switch to dark mode",
+						children: "Dark"
+					})
+				]
+			})
+		})]
+	});
+};
+
+//#endregion
+export { DesktopThemeSwitcher };
+//# sourceMappingURL=DesktopThemeSwitcher.mjs.map

package/dist/esm/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopThemeSwitcher.mjs","names":["ButtonItem: FC<ButtonProps>","DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps>","mode"],"sources":["../../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Button, type ButtonProps, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n  <div className=\"relative w-full p-0.5\">\n    <Button\n      className=\"w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25\"\n      Icon={Icon}\n      data-mode=\"system\"\n      role=\"option\"\n      variant={ButtonVariant.NONE}\n      {...props}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n  theme: Modes;\n  setTheme: (theme: Modes) => void;\n  systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n  theme,\n  setTheme,\n  systemTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const switchMode = (mode: Modes) => {\n    if (mode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(mode);\n    }\n    setMode(mode);\n  };\n\n  const panelIdentifier = 'theme-switcher';\n\n  return (\n    <DropDown identifier={panelIdentifier}>\n      <DropDown.Trigger\n        className=\"p-2\"\n        identifier={panelIdentifier}\n        aria-label=\"Theme selector\"\n      >\n        {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n        {mode === Modes.light && <Sun data-mode=\"light\" />}\n        {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n      </DropDown.Trigger>\n\n      <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n        <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n          <ButtonItem\n            Icon={CircleDashed}\n            onClick={() => switchMode(Modes.system)}\n            isActive={mode === Modes.system}\n            label=\"Restore to system mode\"\n          >\n            System\n          </ButtonItem>\n          <ButtonItem\n            Icon={Sun}\n            onClick={() => switchMode(Modes.light)}\n            isActive={mode === Modes.light}\n            label=\"Switch to light mode\"\n          >\n            Light\n          </ButtonItem>\n          <ButtonItem\n            Icon={Moon}\n            onClick={() => switchMode(Modes.dark)}\n            isActive={mode === Modes.dark}\n            label=\"Switch to dark mode\"\n          >\n            Dark\n          </ButtonItem>\n        </Container>\n      </DropDown.Panel>\n    </DropDown>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AASA,MAAMA,cAA+B,EAAE,MAAM,SAAU,GAAG,YACxD,oBAAC;CAAI,WAAU;WACb,oBAAC;EACC,WAAU;EACJ;EACN,aAAU;EACV,MAAK;EACL,SAAS,cAAc;EACvB,GAAI;EAEH;GACM;EACL;AASR,MAAaC,wBAAuD,EAClE,OACA,UACA,kBACI;CAIJ,MAAM,CAAC,MAAM,WAAW,SAHG,gBAAgB,QACF,MAAM,SAAS,MAEJ;CAEpD,MAAM,cAAc,WAAgB;AAClC,MAAIC,WAAS,MAAM,OACjB,UAAS,eAAe,MAAM,MAAM;MAEpC,UAASA,OAAK;AAEhB,UAAQA,OAAK;;CAGf,MAAM,kBAAkB;AAExB,QACE,qBAAC;EAAS,YAAY;aACpB,qBAAC,SAAS;GACR,WAAU;GACV,YAAY;GACZ,cAAW;;IAEV,SAAS,MAAM,UAAU,oBAAC,gBAAa,aAAU,WAAW;IAC5D,SAAS,MAAM,SAAS,oBAAC,OAAI,aAAU,UAAU;IACjD,SAAS,MAAM,QAAQ,oBAAC,QAAK,aAAU,SAAS;;IAChC,EAEnB,oBAAC,SAAS;GAAM,YAAY;GAAiB;GAAY;aACvD,qBAAC;IAAU,WAAU;IAAgC,WAAU;;KAC7D,oBAAC;MACC,MAAM;MACN,eAAe,WAAW,MAAM,OAAO;MACvC,UAAU,SAAS,MAAM;MACzB,OAAM;gBACP;OAEY;KACb,oBAAC;MACC,MAAM;MACN,eAAe,WAAW,MAAM,MAAM;MACtC,UAAU,SAAS,MAAM;MACzB,OAAM;gBACP;OAEY;KACb,oBAAC;MACC,MAAM;MACN,eAAe,WAAW,MAAM,KAAK;MACrC,UAAU,SAAS,MAAM;MACzB,OAAM;gBACP;OAEY;;KACH;IACG;GACR"}

package/dist/esm/components/ThemeSwitcherDropDown/MobileThemeSwitcher.mjs

@@ -0,0 +1,55 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { Modes } from "./types.mjs";
+import { CircleDashed, Moon, Sun } from "lucide-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx
+const getIconStyle = ({ isCurrentMode, isNextMode }) => cn(`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`, `opacity-0 transition-opacity duration-300 ease-in-out`, isCurrentMode && `opacity-100 group-hover:opacity-0`, isNextMode && `group-hover:opacity-100`);
+const MobileThemeSwitcher = ({ theme, systemTheme, setTheme }) => {
+	const isThemeSystemTheme = systemTheme === theme;
+	const [mode, setMode] = useState(isThemeSystemTheme ? Modes.system : theme);
+	const nextMode = mode === Modes.system ? theme === Modes.dark ? Modes.light : Modes.dark : isThemeSystemTheme ? Modes.system : mode === Modes.light ? Modes.dark : Modes.light;
+	const toggleMode = () => {
+		if (nextMode === Modes.system) setTheme(systemTheme ?? Modes.light);
+		else setTheme(nextMode);
+		setMode(nextMode);
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		className: "group relative size-10",
+		"aria-label": "Theme selector",
+		children: [
+			/* @__PURE__ */ jsx(CircleDashed, {
+				className: getIconStyle({
+					isCurrentMode: mode === Modes.system,
+					isNextMode: nextMode === Modes.system
+				}),
+				onClick: toggleMode,
+				"data-mode": "system"
+			}),
+			/* @__PURE__ */ jsx(Moon, {
+				className: getIconStyle({
+					isCurrentMode: mode === Modes.light,
+					isNextMode: nextMode === Modes.light
+				}),
+				onClick: toggleMode,
+				"data-mode": "light"
+			}),
+			/* @__PURE__ */ jsx(Sun, {
+				className: getIconStyle({
+					isCurrentMode: mode === Modes.dark,
+					isNextMode: nextMode === Modes.dark
+				}),
+				onClick: toggleMode,
+				"data-mode": "dark"
+			})
+		]
+	});
+};
+
+//#endregion
+export { MobileThemeSwitcher };
+//# sourceMappingURL=MobileThemeSwitcher.mjs.map