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

package/dist/types/components/Tag/index.d.ts

@@ -0,0 +1,273 @@
+import { FC, HTMLAttributes, PropsWithChildren } from "react";
+import * as class_variance_authority_types5 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/Tag/index.d.ts
+
+/**
+ * Properties for the Tag component extending HTML div attributes and variant options
+ *
+ * @interface TagProps
+ * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}
+ * @extends {HTMLAttributes<HTMLDivElement>}
+ *
+ * @property {ReactNode} children - The content to display inside the tag
+ * @property {TagColor} [color] - Color theme variant of the tag
+ * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag
+ * @property {TagSize} [size] - Size variant affecting padding and font size
+ * @property {TagBorder} [border] - Whether to show a border around the tag
+ * @property {TagBackground} [background] - Background visibility option
+ * @property {string} [className] - Additional CSS classes for custom styling
+ *
+ * @example
+ * ```tsx
+ * // Basic tag
+ * <Tag>Default Tag</Tag>
+ *
+ * // Success tag with border
+ * <Tag color={TagColor.SUCCESS} border={TagBorder.WITH}>
+ *   Success Status
+ * </Tag>
+ *
+ * // Large warning tag
+ * <Tag color={TagColor.WARNING} size={TagSize.LG}>
+ *   Important Warning
+ * </Tag>
+ * ```
+ */
+type TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> & HTMLAttributes<HTMLDivElement>;
+/**
+ * Enumeration for tag border radius sizes
+ *
+ * Controls the roundedness of tag corners, from sharp edges to fully rounded pills.
+ *
+ * @enum {string} TagRoundedSize
+ * @property {string} NONE - 'none' - No border radius (sharp corners)
+ * @property {string} SM - 'sm' - Small border radius (2px)
+ * @property {string} MD - 'md' - Medium border radius (6px)
+ * @property {string} LG - 'lg' - Large border radius (8px)
+ * @property {string} XL - 'xl' - Extra large border radius (12px)
+ * @property {string} XXL - '2xl' - 2x large border radius (16px)
+ * @property {string} XXXL - '3xl' - 3x large border radius (24px)
+ * @property {string} FULL - 'full' - Fully rounded (50% border radius, pill shape)
+ *
+ * @example
+ * ```tsx
+ * // Sharp corners
+ * <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>
+ *
+ * // Pill-shaped tag
+ * <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>
+ *
+ * // Medium rounded corners
+ * <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>
+ * ```
+ */
+declare enum TagRoundedSize {
+  NONE = "none",
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+  XL = "xl",
+  XXL = "2xl",
+  XXXL = "3xl",
+  FULL = "full",
+}
+/**
+ * Enumeration for tag color themes
+ *
+ * Provides semantic color options for different tag purposes and meanings.
+ * Each color includes background, border, and text color variations.
+ *
+ * @enum {string} TagColor
+ * @property {string} SUCCESS - 'success' - Green theme for positive states, success messages, or completed items
+ * @property {string} ERROR - 'error' - Red theme for error states, warnings, or failed operations
+ * @property {string} WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices
+ * @property {string} NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content
+ * @property {string} TEXT - 'text' - Default text color theme for general purpose tags
+ *
+ * @example
+ * ```tsx
+ * // Status indicators
+ * <Tag color={TagColor.SUCCESS}>Completed</Tag>
+ * <Tag color={TagColor.ERROR}>Failed</Tag>
+ * <Tag color={TagColor.WARNING}>Pending</Tag>
+ *
+ * // Category tags
+ * <Tag color={TagColor.NEUTRAL}>Category</Tag>
+ * <Tag color={TagColor.TEXT}>General</Tag>
+ * ```
+ */
+declare enum TagColor {
+  SUCCESS = "success",
+  ERROR = "error",
+  WARNING = "warning",
+  NEUTRAL = "neutral",
+  TEXT = "text",
+}
+/**
+ * Enumeration for tag size variants
+ *
+ * Controls the overall size of tags including padding, font size, and border thickness.
+ * Sizes are designed to maintain visual hierarchy and readability.
+ *
+ * @enum {string} TagSize
+ * @property {string} XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)
+ * @property {string} SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)
+ * @property {string} MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size
+ * @property {string} LG - 'lg' - Large (2rem padding, text-lg, 2px border)
+ * @property {string} XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)
+ *
+ * @example
+ * ```tsx
+ * // Different sizes for hierarchy
+ * <Tag size={TagSize.XS}>Small detail</Tag>
+ * <Tag size={TagSize.SM}>Minor category</Tag>
+ * <Tag size={TagSize.MD}>Standard tag</Tag>
+ * <Tag size={TagSize.LG}>Important label</Tag>
+ * <Tag size={TagSize.XL}>Hero tag</Tag>
+ * ```
+ */
+declare enum TagSize {
+  XS = "xs",
+  SM = "sm",
+  MD = "md",
+  LG = "lg",
+  XL = "xl",
+}
+/**
+ * Enumeration for tag border visibility
+ *
+ * Controls whether a border is displayed around the tag.
+ *
+ * @enum {string} TagBorder
+ * @property {string} NONE - 'none' - No border (default)
+ * @property {string} WITH - 'with' - Show border with 1.5px thickness
+ *
+ * @example
+ * ```tsx
+ * <Tag border={TagBorder.NONE}>Borderless</Tag>
+ * <Tag border={TagBorder.WITH}>With Border</Tag>
+ * ```
+ */
+declare enum TagBorder {
+  NONE = "none",
+  WITH = "with",
+}
+/**
+ * Enumeration for tag background visibility
+ *
+ * Controls the background styling of the tag.
+ *
+ * @enum {string} TagBackground
+ * @property {string} NONE - 'none' - No background styling
+ * @property {string} WITH - 'with' - Apply background styling
+ *
+ * @example
+ * ```tsx
+ * <Tag background={TagBackground.NONE}>No Background</Tag>
+ * <Tag background={TagBackground.WITH}>With Background</Tag>
+ * ```
+ */
+declare enum TagBackground {
+  NONE = "none",
+  WITH = "with",
+}
+declare const containerVariants: (props?: {
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full";
+  color?: "error" | "success" | "text" | "warning" | "neutral";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  border?: "none" | "with";
+  background?: "none" | "with";
+} & class_variance_authority_types5.ClassProp) => string;
+/**
+ * Tag component for displaying labels, categories, status indicators, and badges
+ *
+ * The Tag component is a versatile labeling element that supports multiple visual variants
+ * for different use cases. It provides semantic color options, flexible sizing, and
+ * customizable styling options for borders and backgrounds.
+ *
+ * ## Features
+ * - **Semantic Colors**: Success, error, warning, neutral, and text color themes
+ * - **Flexible Sizing**: Five size variants from extra small to extra large
+ * - **Border Radius Options**: Eight rounding options from none to fully rounded
+ * - **Border Control**: Optional borders for enhanced visual separation
+ * - **Background Control**: Configurable background styling
+ * - **Accessibility**: Proper HTML semantics and keyboard navigation support
+ *
+ * ## Use Cases
+ * - **Status Indicators**: Show completion, error, or pending states
+ * - **Category Labels**: Organize and categorize content
+ * - **Badges**: Display counts, notifications, or achievements
+ * - **Keywords**: Tag content with relevant keywords or topics
+ * - **Metadata**: Show additional information like dates, authors, or types
+ *
+ * ## Design Principles
+ * - Maintains readability across all size and color combinations
+ * - Uses backdrop blur effect for subtle transparency
+ * - Follows consistent spacing and typography scales
+ * - Provides sufficient color contrast for accessibility
+ *
+ * @param {TagProps} props - The properties for the Tag component
+ * @returns {JSX.Element} The rendered tag element
+ *
+ * @example
+ * ```tsx
+ * // Basic status tags
+ * <Tag color={TagColor.SUCCESS}>Completed</Tag>
+ * <Tag color={TagColor.ERROR}>Failed</Tag>
+ * <Tag color={TagColor.WARNING}>In Progress</Tag>
+ *
+ * // Category tags with borders
+ * <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>
+ *   Technology
+ * </Tag>
+ * <Tag color={TagColor.TEXT} border={TagBorder.WITH}>
+ *   Design
+ * </Tag>
+ *
+ * // Size variations for hierarchy
+ * <div className="flex items-center gap-2">
+ *   <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>
+ *   <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>
+ *   <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>
+ * </div>
+ *
+ * // Rounded variations
+ * <div className="flex gap-2">
+ *   <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>
+ *   <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>
+ *   <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>
+ * </div>
+ *
+ * // Custom styled tag
+ * <Tag
+ *   color={TagColor.WARNING}
+ *   size={TagSize.LG}
+ *   border={TagBorder.WITH}
+ *   roundedSize={TagRoundedSize.LG}
+ *   className="font-bold uppercase tracking-wide"
+ * >
+ *   Custom Style
+ * </Tag>
+ *
+ * // Interactive tags with click handlers
+ * <Tag
+ *   color={TagColor.SUCCESS}
+ *   onClick={() => console.log('Tag clicked')}
+ *   className="cursor-pointer hover:opacity-80 transition-opacity"
+ * >
+ *   Clickable Tag
+ * </Tag>
+ * ```
+ *
+ * @see {@link TagColor} - Available color theme options
+ * @see {@link TagSize} - Available size variants
+ * @see {@link TagRoundedSize} - Available border radius options
+ * @see {@link TagBorder} - Border visibility options
+ * @see {@link TagBackground} - Background styling options
+ */
+declare const Tag: FC<TagProps>;
+//#endregion
+export { Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize };
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/Tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AACmE;;;;;;;AA+DnE;AAoCA;AA+BA;AAuBA;AAoBA;AAGC;AAqID;;;;;;;;;;;;;;;KApRK,QAAA,GAAW,kBAAkB,oBAAoB,sBACpD,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;aA6BL,cAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAoCA,QAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aA+BA,OAAA;;;;;;;;;;;;;;;;;;;;;;aAuBA,SAAA;;;;;;;;;;;;;;;;;;;aAoBA,aAAA;;;;cAKN;;;;;;IA0CJ,+BAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAyFW,KAAK,GAAG"}

package/dist/types/components/TextArea/AutoSizeTextArea.d.ts

@@ -0,0 +1,104 @@
+import { TextAreaProps } from "./TextArea.js";
+import { FC } from "react";
+
+//#region src/components/TextArea/AutoSizeTextArea.d.ts
+
+/**
+ * Props for the AutoSizedTextArea component.
+ *
+ * Extends TextAreaProps with auto-sizing functionality and row limitations.
+ *
+ * @example
+ * ```tsx
+ * // Auto-sizing textarea that grows with content
+ * <AutoSizedTextArea
+ *   placeholder="Start typing and watch it grow..."
+ *   autoSize={true}
+ *   maxRows={10}
+ * />
+ *
+ * // Limited height with scroll when exceeded
+ * <AutoSizedTextArea
+ *   value={longText}
+ *   onChange={handleChange}
+ *   autoSize={true}
+ *   maxRows={5}
+ *   className="max-h-[120px]"
+ * />
+ *
+ * // Disable auto-sizing for fixed height
+ * <AutoSizedTextArea
+ *   autoSize={false}
+ *   rows={3}
+ *   placeholder="Fixed height textarea"
+ * />
+ * ```
+ */
+type AutoSizedTextAreaProps = TextAreaProps & {
+  /** Whether to automatically adjust height based on content */
+  autoSize?: boolean;
+  /** Maximum number of rows before scrolling is enabled */
+  maxRows?: number;
+};
+/**
+ * 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}
+ * />
+ * ```
+ */
+declare const AutoSizedTextArea: FC<AutoSizedTextAreaProps>;
+//#endregion
+export { AutoSizedTextArea, AutoSizedTextAreaProps };
+//# sourceMappingURL=AutoSizeTextArea.d.ts.map

package/dist/types/components/TextArea/AutoSizeTextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSizeTextArea.d.ts","names":[],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":[],"mappings":";;;;;;;AA2CA;AAoEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;KApEY,sBAAA,GAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAoExB,mBAAmB,GAAG"}

package/dist/types/components/TextArea/AutocompleteTextArea.d.ts

@@ -0,0 +1,159 @@
+import { AutoSizedTextAreaProps } from "./AutoSizeTextArea.js";
+import { FC } from "react";
+
+//#region src/components/TextArea/AutocompleteTextArea.d.ts
+
+/**
+ * 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]);
+ * ```
+ */
+declare const useDebounce: <T>(value: T, delay: number) => T;
+/**
+ * Props for the AutocompleteTextArea component.
+ *
+ * Extends AutoSizedTextAreaProps with AI-powered autocomplete functionality.
+ *
+ * @example
+ * ```tsx
+ * // AI-powered autocomplete textarea
+ * <AutoCompleteTextarea
+ *   placeholder="Start typing for AI suggestions..."
+ *   isActive={true}
+ *   autoSize={true}
+ *   maxRows={10}
+ * />
+ *
+ * // Manual suggestion mode
+ * <AutoCompleteTextarea
+ *   value={content}
+ *   onChange={handleChange}
+ *   suggestion="Consider adding more details about..."
+ *   isActive={false}
+ * />
+ *
+ * // Disabled autocomplete for sensitive content
+ * <AutoCompleteTextarea
+ *   placeholder="Private notes (no AI assistance)"
+ *   isActive={false}
+ *   autoSize={true}
+ * />
+ * ```
+ */
+type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {
+  /** Whether AI autocomplete is active and should fetch suggestions */
+  isActive?: boolean;
+  /** Manual suggestion text to display (overrides AI suggestions) */
+  suggestion?: string;
+};
+/**
+ * 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
+ */
+declare const AutoCompleteTextarea: FC<AutocompleteTextAreaProps>;
+//#endregion
+export { AutoCompleteTextarea, AutocompleteTextAreaProps, useDebounce };
+//# sourceMappingURL=AutocompleteTextArea.d.ts.map

package/dist/types/components/TextArea/AutocompleteTextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteTextArea.d.ts","names":[],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAiCA;AA8CA;AAiGA;;;;;;;;;;;;;;;;;;cA/Ia,wBAA0B,qBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8C9C,yBAAA,GAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiG3B,sBAAsB,GAAG"}

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

@@ -0,0 +1,89 @@
+import { InputVariant, inputVariants } from "../Input/Input.js";
+import { DetailedHTMLProps, FC, TextareaHTMLAttributes } from "react";
+import { VariantProps } from "class-variance-authority";
+
+//#region src/components/TextArea/TextArea.d.ts
+
+/**
+ * Props for the TextArea component.
+ *
+ * Extends standard HTML textarea attributes with additional design system variants
+ * and validation styling options.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TextArea placeholder="Enter your message..." />
+ *
+ * // With error validation styling
+ * <TextArea
+ *   value={message}
+ *   onChange={handleChange}
+ *   variant={InputVariant.ERROR}
+ *   validationStyleEnabled={true}
+ *   placeholder="Message is required"
+ * />
+ *
+ * // Large multiline input
+ * <TextArea
+ *   rows={6}
+ *   cols={50}
+ *   variant={InputVariant.DEFAULT}
+ *   className="min-h-[120px]"
+ *   placeholder="Write a detailed description..."
+ * />
+ * ```
+ */
+type TextAreaProps = DetailedHTMLProps<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, HTMLTextAreaElement> & {
+  /** Enable validation styling based on the variant prop */
+  validationStyleEnabled?: boolean;
+} & Omit<VariantProps<typeof inputVariants>, 'validationStyleEnabled' | 'variant'> & {
+  /** Visual variant of the textarea (default, success, error, warning, etc.) */
+  variant?: InputVariant | `${InputVariant}`;
+};
+/**
+ * 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]"
+ * />
+ * ```
+ */
+declare const TextArea: FC<TextAreaProps>;
+//#endregion
+export { TextArea, TextAreaProps };
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/types/components/TextArea/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","names":[],"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAmCA;;;;;;;;;;;;;AA2DA;;;;;;;;;;;;;;;KA3DY,aAAA,GAAgB,kBAC1B,kBACE,uBAAuB,sBACvB,sBAEF;;;IAIE,KACA,oBAAoB;;YAIV,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6CnB,UAAU,GAAG"}

package/dist/types/components/TextArea/index.d.ts

@@ -0,0 +1,4 @@
+import { TextArea, TextAreaProps } from "./TextArea.js";
+import { AutoSizedTextArea, AutoSizedTextAreaProps } from "./AutoSizeTextArea.js";
+import { AutoCompleteTextarea, AutocompleteTextAreaProps, useDebounce } from "./AutocompleteTextArea.js";
+export { AutoCompleteTextarea, AutoSizedTextArea, AutoSizedTextAreaProps, AutocompleteTextAreaProps, TextArea, TextAreaProps, useDebounce };

package/dist/types/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.d.ts

@@ -0,0 +1,13 @@
+import { Modes } from "./types.js";
+import { FC } from "react";
+
+//#region src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.d.ts
+type DesktopThemeSwitcherProps = {
+  theme: Modes;
+  setTheme: (theme: Modes) => void;
+  systemTheme: Modes;
+};
+declare const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps>;
+//#endregion
+export { DesktopThemeSwitcher };
+//# sourceMappingURL=DesktopThemeSwitcher.d.ts.map

package/dist/types/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DesktopThemeSwitcher.d.ts","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":[],"mappings":";;;;KAwBK,yBAAA;SACI;EADJ,QAAA,EAAA,CAAA,KAAA,EAEe,KAFf,EAAA,GAAyB,IAAA;EACrB,WAAA,EAEM,KAFN;CACW;AACL,cAGF,oBAHE,EAGoB,EAHpB,CAGuB,yBAHvB,CAAA"}

package/dist/types/components/ThemeSwitcherDropDown/MobileThemeSwitcher.d.ts

@@ -0,0 +1,13 @@
+import { Modes } from "./types.js";
+import { FC } from "react";
+
+//#region src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.d.ts
+type MobileThemeSwitcherProps = {
+  theme: Modes;
+  systemTheme: Modes;
+  setTheme: (theme: Modes) => void;
+};
+declare const MobileThemeSwitcher: FC<MobileThemeSwitcherProps>;
+//#endregion
+export { MobileThemeSwitcher };
+//# sourceMappingURL=MobileThemeSwitcher.d.ts.map

package/dist/types/components/ThemeSwitcherDropDown/MobileThemeSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileThemeSwitcher.d.ts","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":[],"mappings":";;;;KAOK,wBAAA;SACI;EADJ,WAAA,EAEU,KAFV;EACI,QAAA,EAAA,CAAA,KAAA,EAEW,KAFX,EAAA,GAAA,IAAA;CACM;AACK,cAiBP,mBAjBO,EAiBc,EAjBd,CAiBiB,wBAjBjB,CAAA"}

package/dist/types/components/ThemeSwitcherDropDown/index.d.ts

@@ -0,0 +1,4 @@
+import { Modes } from "./types.js";
+import { DesktopThemeSwitcher } from "./DesktopThemeSwitcher.js";
+import { MobileThemeSwitcher } from "./MobileThemeSwitcher.js";
+export { DesktopThemeSwitcher, MobileThemeSwitcher, Modes };