npm - @intlayer/design-system - Versions diffs - 7.5.13 → 7.5.14 - Mend

@intlayer/design-system 7.5.13 → 7.5.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (520) hide show

package/dist/esm/components/Tag/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["Tag: FC<TagProps>"],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/*\n Properties for the Tag component extending HTML div attributes and variant options\n \n @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n \n @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property [className] - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n \n // Success tag with border\n * <Tag color={TagColor.SUCCESS} border={TagBorder.WITH}>\n * Success Status\n * </Tag>\n \n // Large warning tag\n * <Tag color={TagColor.WARNING} size={TagSize.LG}>\n * Important Warning\n * </Tag>\n * ```\n /\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\n/\n Enumeration for tag border radius sizes\n \n Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n \n @enum TagRoundedSize\n * @property NONE - 'none' - No border radius (sharp corners)\n * @property SM - 'sm' - Small border radius (2px)\n * @property MD - 'md' - Medium border radius (6px)\n * @property LG - 'lg' - Large border radius (8px)\n * @property XL - 'xl' - Extra large border radius (12px)\n * @property XXL - '2xl' - 2x large border radius (16px)\n * @property XXXL - '3xl' - 3x large border radius (24px)\n * @property FULL - 'full' - Fully rounded (50% border radius, pill shape)\n \n @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>\n \n // Pill-shaped tag\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>\n \n // Medium rounded corners\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>\n * ```\n /\nexport enum TagRoundedSize {\n NONE = 'none',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n XXL = '2xl',\n XXXL = '3xl',\n FULL = 'full',\n}\n\n/\n Enumeration for tag color themes\n \n Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n \n @enum TagColor\n * @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property TEXT - 'text' - Default text color theme for general purpose tags\n \n @example\n * ```tsx\n * // Status indicators\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>Pending</Tag>\n \n // Category tags\n * <Tag color={TagColor.NEUTRAL}>Category</Tag>\n * <Tag color={TagColor.TEXT}>General</Tag>\n * ```\n /\nexport enum TagColor {\n PRIMARY = 'primary',\n SUCCESS = 'success',\n ERROR = 'error',\n WARNING = 'warning',\n NEUTRAL = 'neutral',\n TEXT = 'text',\n BLUE = 'blue',\n YELLOW = 'yellow',\n GREEN = 'green',\n RED = 'red',\n ORANGE = 'orange',\n PURPLE = 'purple',\n PINK = 'pink',\n BROWN = 'brown',\n GRAY = 'gray',\n BLACK = 'black',\n WHITE = 'white',\n}\n\n/\n Enumeration for tag size variants\n \n Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n \n @enum TagSize\n * @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n \n @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size={TagSize.XS}>Small detail</Tag>\n * <Tag size={TagSize.SM}>Minor category</Tag>\n * <Tag size={TagSize.MD}>Standard tag</Tag>\n * <Tag size={TagSize.LG}>Important label</Tag>\n * <Tag size={TagSize.XL}>Hero tag</Tag>\n * ```\n /\nexport enum TagSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n}\n\n/\n Enumeration for tag border visibility\n \n Controls whether a border is displayed around the tag.\n \n @enum TagBorder\n * @property NONE - 'none' - No border (default)\n * @property WITH - 'with' - Show border with 1.5px thickness\n \n @example\n * ```tsx\n * <Tag border={TagBorder.NONE}>Borderless</Tag>\n * <Tag border={TagBorder.WITH}>With Border</Tag>\n * ```\n /\nexport enum TagBorder {\n NONE = 'none',\n WITH = 'with',\n}\n\n/\n Enumeration for tag background visibility\n \n Controls the background styling of the tag.\n \n @enum TagBackground\n * @property NONE - 'none' - No background styling\n * @property WITH - 'with' - Apply background styling\n \n @example\n * ```tsx\n * <Tag background={TagBackground.NONE}>No Background</Tag>\n * <Tag background={TagBackground.WITH}>With Background</Tag>\n * ```\n /\nexport enum TagBackground {\n NONE = 'none',\n WITH = 'with',\n}\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n variants: {\n roundedSize: {\n [`${TagRoundedSize.NONE}`]: 'rounded-none',\n [`${TagRoundedSize.SM}`]: 'rounded-sm',\n [`${TagRoundedSize.MD}`]: 'rounded-md',\n [`${TagRoundedSize.LG}`]: 'rounded-lg',\n [`${TagRoundedSize.XL}`]: 'rounded-xl',\n [`${TagRoundedSize.XXL}`]: 'rounded-2xl',\n [`${TagRoundedSize.XXXL}`]: 'rounded-3xl',\n [`${TagRoundedSize.FULL}`]: 'rounded-full',\n },\n color: {\n [`${TagColor.PRIMARY}`]: 'border-primary bg-primary/10 text-primary',\n [`${TagColor.SUCCESS}`]: 'border-success bg-success/10 text-success',\n [`${TagColor.ERROR}`]: 'border-error bg-error/10 text-error',\n [`${TagColor.WARNING}`]: 'border-warning bg-warning/10 text-warning',\n [`${TagColor.NEUTRAL}`]: '/10 border-neutral bg-neutral/10 text-neutral',\n [`${TagColor.TEXT}`]: 'border-text bg-text/10 text-text',\n [`${TagColor.BLUE}`]:\n 'border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300',\n [`${TagColor.YELLOW}`]:\n 'border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300',\n [`${TagColor.GREEN}`]:\n 'border-green-500 bg-green-500/10 text-green-500 dark:text-green-300',\n [`${TagColor.RED}`]:\n 'border-red-500 bg-red-500/10 text-red-500 dark:text-red-300',\n [`${TagColor.ORANGE}`]:\n 'border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300',\n [`${TagColor.PURPLE}`]:\n 'border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300',\n [`${TagColor.PINK}`]:\n 'border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300',\n [`${TagColor.BROWN}`]:\n 'border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300',\n [`${TagColor.GRAY}`]:\n 'border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300',\n [`${TagColor.BLACK}`]: 'border-black bg-black/10 text-black',\n [`${TagColor.WHITE}`]: 'border-white bg-white/10 text-white',\n },\n size: {\n [`${TagSize.XS}`]: 'border-[1.2px] px-2 py-0.5 text-xs',\n [`${TagSize.SM}`]: 'border-[1.3px] px-2 py-0.5 text-sm',\n [`${TagSize.MD}`]: 'border-2 px-2 py-1 text-base',\n [`${TagSize.LG}`]: 'border-2 px-3 py-2 text-lg',\n [`${TagSize.XL}`]: 'border-2 px-3 py-2 text-xl',\n },\n border: {\n [`${TagBorder.NONE}`]: 'border-none',\n [`${TagBorder.WITH}`]: 'border-[1.3px] border-text',\n },\n background: {\n [`${TagBackground.NONE}`]: 'bg-none',\n [`${TagBackground.WITH}`]: '',\n },\n },\n\n defaultVariants: {\n roundedSize: TagRoundedSize.FULL,\n border: TagBorder.NONE,\n color: TagColor.TEXT,\n size: TagSize.MD,\n },\n});\n\n/\n Tag component for displaying labels, categories, status indicators, and badges\n \n The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n \n ## Features\n * - Semantic Colors: Success, error, warning, neutral, and text color themes\n * - Flexible Sizing: Five size variants from extra small to extra large\n * - Border Radius Options: Eight rounding options from none to fully rounded\n * - Border Control: Optional borders for enhanced visual separation\n * - Background Control: Configurable background styling\n * - Accessibility: Proper HTML semantics and keyboard navigation support\n \n ## Use Cases\n * - Status Indicators: Show completion, error, or pending states\n * - Category Labels: Organize and categorize content\n * - Badges: Display counts, notifications, or achievements\n * - Keywords: Tag content with relevant keywords or topics\n * - Metadata: Show additional information like dates, authors, or types\n \n ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n \n @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n \n @example\n * ```tsx\n * // Basic status tags\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>In Progress</Tag>\n \n // Category tags with borders\n * <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>\n * Technology\n * </Tag>\n * <Tag color={TagColor.TEXT} border={TagBorder.WITH}>\n * Design\n * </Tag>\n \n // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n * <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>\n * <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>\n * <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>\n * </div>\n \n // Rounded variations\n * <div className=\"flex gap-2\">\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>\n * </div>\n \n // Custom styled tag\n * <Tag\n * color={TagColor.WARNING}\n * size={TagSize.LG}\n * border={TagBorder.WITH}\n * roundedSize={TagRoundedSize.LG}\n * className=\"font-bold uppercase tracking-wide\"\n * >\n * Custom Style\n * </Tag>\n \n // Interactive tags with click handlers\n * <Tag\n * color={TagColor.SUCCESS}\n * onClick={() => console.log('Tag clicked')}\n * className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n * Clickable Tag\n * </Tag>\n * ```\n \n @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n}) => {\n return (\n <div\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAY,4DAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BF,IAAY,gDAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BF,IAAY,8CAAL;AACL;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;AAkBF,IAAY,kDAAL;AACL;AACA;;;;;;;;;;;;;;;;;;AAkBF,IAAY,0DAAL;AACL;AACA;;;AAGF,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;IACV,GAAG,eAAe,SAAS;IAC3B,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,QAAQ;IAC1B,GAAG,eAAe,SAAS;IAC3B,GAAG,eAAe,SAAS;GAC7B;EACD,OAAO;IACJ,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,UAAU;IACtB,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,SAAS;IACrB,GAAG,SAAS,SACX;IACD,GAAG,SAAS,WACX;IACD,GAAG,SAAS,UACX;IACD,GAAG,SAAS,QACX;IACD,GAAG,SAAS,WACX;IACD,GAAG,SAAS,WACX;IACD,GAAG,SAAS,SACX;IACD,GAAG,SAAS,UACX;IACD,GAAG,SAAS,SACX;IACD,GAAG,SAAS,UAAU;IACtB,GAAG,SAAS,UAAU;GACxB;EACD,MAAM;IACH,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;GACpB;EACD,QAAQ;IACL,GAAG,UAAU,SAAS;IACtB,GAAG,UAAU,SAAS;GACxB;EACD,YAAY;IACT,GAAG,cAAc,SAAS;IAC1B,GAAG,cAAc,SAAS;GAC5B;EACF;CAED,iBAAiB;EACf,aAAa,eAAe;EAC5B,QAAQ,UAAU;EAClB,OAAO,SAAS;EAChB,MAAM,QAAQ;EACf;CACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFF,MAAaA,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;AACJ,QACE,oBAAC;EACC,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACF,GAAI;EAEH;GACG"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/*\n Properties for the Tag component extending HTML div attributes and variant options\n \n @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n \n @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property [className] - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n \n // Success tag with border\n * <Tag color={TagColor.SUCCESS} border={TagBorder.WITH}>\n * Success Status\n * </Tag>\n \n // Large warning tag\n * <Tag color={TagColor.WARNING} size={TagSize.LG}>\n * Important Warning\n * </Tag>\n * ```\n /\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\n/\n Enumeration for tag border radius sizes\n \n Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n \n @enum TagRoundedSize\n * @property NONE - 'none' - No border radius (sharp corners)\n * @property SM - 'sm' - Small border radius (2px)\n * @property MD - 'md' - Medium border radius (6px)\n * @property LG - 'lg' - Large border radius (8px)\n * @property XL - 'xl' - Extra large border radius (12px)\n * @property XXL - '2xl' - 2x large border radius (16px)\n * @property XXXL - '3xl' - 3x large border radius (24px)\n * @property FULL - 'full' - Fully rounded (50% border radius, pill shape)\n \n @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>\n \n // Pill-shaped tag\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>\n \n // Medium rounded corners\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>\n * ```\n /\nexport enum TagRoundedSize {\n NONE = 'none',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n XXL = '2xl',\n XXXL = '3xl',\n FULL = 'full',\n}\n\n/\n Enumeration for tag color themes\n \n Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n \n @enum TagColor\n * @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property TEXT - 'text' - Default text color theme for general purpose tags\n \n @example\n * ```tsx\n * // Status indicators\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>Pending</Tag>\n \n // Category tags\n * <Tag color={TagColor.NEUTRAL}>Category</Tag>\n * <Tag color={TagColor.TEXT}>General</Tag>\n * ```\n /\nexport enum TagColor {\n PRIMARY = 'primary',\n SUCCESS = 'success',\n ERROR = 'error',\n WARNING = 'warning',\n NEUTRAL = 'neutral',\n TEXT = 'text',\n BLUE = 'blue',\n YELLOW = 'yellow',\n GREEN = 'green',\n RED = 'red',\n ORANGE = 'orange',\n PURPLE = 'purple',\n PINK = 'pink',\n BROWN = 'brown',\n GRAY = 'gray',\n BLACK = 'black',\n WHITE = 'white',\n}\n\n/\n Enumeration for tag size variants\n \n Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n \n @enum TagSize\n * @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n \n @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size={TagSize.XS}>Small detail</Tag>\n * <Tag size={TagSize.SM}>Minor category</Tag>\n * <Tag size={TagSize.MD}>Standard tag</Tag>\n * <Tag size={TagSize.LG}>Important label</Tag>\n * <Tag size={TagSize.XL}>Hero tag</Tag>\n * ```\n /\nexport enum TagSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n}\n\n/\n Enumeration for tag border visibility\n \n Controls whether a border is displayed around the tag.\n \n @enum TagBorder\n * @property NONE - 'none' - No border (default)\n * @property WITH - 'with' - Show border with 1.5px thickness\n \n @example\n * ```tsx\n * <Tag border={TagBorder.NONE}>Borderless</Tag>\n * <Tag border={TagBorder.WITH}>With Border</Tag>\n * ```\n /\nexport enum TagBorder {\n NONE = 'none',\n WITH = 'with',\n}\n\n/\n Enumeration for tag background visibility\n \n Controls the background styling of the tag.\n \n @enum TagBackground\n * @property NONE - 'none' - No background styling\n * @property WITH - 'with' - Apply background styling\n \n @example\n * ```tsx\n * <Tag background={TagBackground.NONE}>No Background</Tag>\n * <Tag background={TagBackground.WITH}>With Background</Tag>\n * ```\n /\nexport enum TagBackground {\n NONE = 'none',\n WITH = 'with',\n}\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n variants: {\n roundedSize: {\n [`${TagRoundedSize.NONE}`]: 'rounded-none',\n [`${TagRoundedSize.SM}`]: 'rounded-sm',\n [`${TagRoundedSize.MD}`]: 'rounded-md',\n [`${TagRoundedSize.LG}`]: 'rounded-lg',\n [`${TagRoundedSize.XL}`]: 'rounded-xl',\n [`${TagRoundedSize.XXL}`]: 'rounded-2xl',\n [`${TagRoundedSize.XXXL}`]: 'rounded-3xl',\n [`${TagRoundedSize.FULL}`]: 'rounded-full',\n },\n color: {\n [`${TagColor.PRIMARY}`]: 'border-primary bg-primary/10 text-primary',\n [`${TagColor.SUCCESS}`]: 'border-success bg-success/10 text-success',\n [`${TagColor.ERROR}`]: 'border-error bg-error/10 text-error',\n [`${TagColor.WARNING}`]: 'border-warning bg-warning/10 text-warning',\n [`${TagColor.NEUTRAL}`]: '/10 border-neutral bg-neutral/10 text-neutral',\n [`${TagColor.TEXT}`]: 'border-text bg-text/10 text-text',\n [`${TagColor.BLUE}`]:\n 'border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300',\n [`${TagColor.YELLOW}`]:\n 'border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300',\n [`${TagColor.GREEN}`]:\n 'border-green-500 bg-green-500/10 text-green-500 dark:text-green-300',\n [`${TagColor.RED}`]:\n 'border-red-500 bg-red-500/10 text-red-500 dark:text-red-300',\n [`${TagColor.ORANGE}`]:\n 'border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300',\n [`${TagColor.PURPLE}`]:\n 'border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300',\n [`${TagColor.PINK}`]:\n 'border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300',\n [`${TagColor.BROWN}`]:\n 'border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300',\n [`${TagColor.GRAY}`]:\n 'border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300',\n [`${TagColor.BLACK}`]: 'border-black bg-black/10 text-black',\n [`${TagColor.WHITE}`]: 'border-white bg-white/10 text-white',\n },\n size: {\n [`${TagSize.XS}`]: 'border-[1.2px] px-2 py-0.5 text-xs',\n [`${TagSize.SM}`]: 'border-[1.3px] px-2 py-0.5 text-sm',\n [`${TagSize.MD}`]: 'border-2 px-2 py-1 text-base',\n [`${TagSize.LG}`]: 'border-2 px-3 py-2 text-lg',\n [`${TagSize.XL}`]: 'border-2 px-3 py-2 text-xl',\n },\n border: {\n [`${TagBorder.NONE}`]: 'border-none',\n [`${TagBorder.WITH}`]: 'border-[1.3px] border-text',\n },\n background: {\n [`${TagBackground.NONE}`]: 'bg-none',\n [`${TagBackground.WITH}`]: '',\n },\n },\n\n defaultVariants: {\n roundedSize: TagRoundedSize.FULL,\n border: TagBorder.NONE,\n color: TagColor.TEXT,\n size: TagSize.MD,\n },\n});\n\n/\n Tag component for displaying labels, categories, status indicators, and badges\n \n The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n \n ## Features\n * - Semantic Colors: Success, error, warning, neutral, and text color themes\n * - Flexible Sizing: Five size variants from extra small to extra large\n * - Border Radius Options: Eight rounding options from none to fully rounded\n * - Border Control: Optional borders for enhanced visual separation\n * - Background Control: Configurable background styling\n * - Accessibility: Proper HTML semantics and keyboard navigation support\n \n ## Use Cases\n * - Status Indicators: Show completion, error, or pending states\n * - Category Labels: Organize and categorize content\n * - Badges: Display counts, notifications, or achievements\n * - Keywords: Tag content with relevant keywords or topics\n * - Metadata: Show additional information like dates, authors, or types\n \n ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n \n @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n \n @example\n * ```tsx\n * // Basic status tags\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>In Progress</Tag>\n \n // Category tags with borders\n * <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>\n * Technology\n * </Tag>\n * <Tag color={TagColor.TEXT} border={TagBorder.WITH}>\n * Design\n * </Tag>\n \n // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n * <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>\n * <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>\n * <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>\n * </div>\n \n // Rounded variations\n * <div className=\"flex gap-2\">\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>\n * </div>\n \n // Custom styled tag\n * <Tag\n * color={TagColor.WARNING}\n * size={TagSize.LG}\n * border={TagBorder.WITH}\n * roundedSize={TagRoundedSize.LG}\n * className=\"font-bold uppercase tracking-wide\"\n * >\n * Custom Style\n * </Tag>\n \n // Interactive tags with click handlers\n * <Tag\n * color={TagColor.SUCCESS}\n * onClick={() => console.log('Tag clicked')}\n * className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n * Clickable Tag\n * </Tag>\n * ```\n \n @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n}) => {\n return (\n <div\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAY,4DAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BF,IAAY,gDAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BF,IAAY,8CAAL;AACL;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;AAkBF,IAAY,kDAAL;AACL;AACA;;;;;;;;;;;;;;;;;;AAkBF,IAAY,0DAAL;AACL;AACA;;;AAGF,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;IACV,GAAG,eAAe,SAAS;IAC3B,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,OAAO;IACzB,GAAG,eAAe,QAAQ;IAC1B,GAAG,eAAe,SAAS;IAC3B,GAAG,eAAe,SAAS;GAC7B;EACD,OAAO;IACJ,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,UAAU;IACtB,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,YAAY;IACxB,GAAG,SAAS,SAAS;IACrB,GAAG,SAAS,SACX;IACD,GAAG,SAAS,WACX;IACD,GAAG,SAAS,UACX;IACD,GAAG,SAAS,QACX;IACD,GAAG,SAAS,WACX;IACD,GAAG,SAAS,WACX;IACD,GAAG,SAAS,SACX;IACD,GAAG,SAAS,UACX;IACD,GAAG,SAAS,SACX;IACD,GAAG,SAAS,UAAU;IACtB,GAAG,SAAS,UAAU;GACxB;EACD,MAAM;IACH,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;IAClB,GAAG,QAAQ,OAAO;GACpB;EACD,QAAQ;IACL,GAAG,UAAU,SAAS;IACtB,GAAG,UAAU,SAAS;GACxB;EACD,YAAY;IACT,GAAG,cAAc,SAAS;IAC1B,GAAG,cAAc,SAAS;GAC5B;EACF;CAED,iBAAiB;EACf,aAAa,eAAe;EAC5B,QAAQ,UAAU;EAClB,OAAO,SAAS;EAChB,MAAM,QAAQ;EACf;CACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFF,MAAa,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;AACJ,QACE,oBAAC;EACC,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACF,GAAI;EAEH;GACG"}

package/dist/esm/components/Terminal/Terminal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Terminal.mjs","names":[~~"ANSI_COLORS: Record<string, { light: string; dark: string }>","segments: AnsiSegment[~~]","~~currentColor: string \| undefined","Terminal: FC<TerminalProps>"],"~~sources":["../../../../src/components/Terminal/Terminal.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { Input } from '@components/Input';\nimport { cn } from '@utils/cn';\nimport {\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n useMemo,\n useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ANSI color code mappings to CSS colors\nconst ANSI_COLORS: Record<string, { light: string; dark: string }> = {\n '\\x1b[0m': { light: '', dark: '' }, // RESET\n '\\x1b[90m': { light: 'text-gray-500', dark: 'text-gray-400' }, // GREY\n '\\x1b[38;5;239m': { light: 'text-gray-600', dark: 'text-gray-500' }, // GREY_DARK\n '\\x1b[38;5;252m': { light: 'text-gray-300', dark: 'text-gray-300' }, // GREY_LIGHT\n '\\x1b[34m': { light: 'text-blue-600', dark: 'text-blue-400' }, // BLUE\n '\\x1b[31m': { light: 'text-red-600', dark: 'text-red-400' }, // RED\n '\\x1b[32m': { light: 'text-green-600', dark: 'text-green-400' }, // GREEN\n '\\x1b[38;5;226m': { light: 'text-yellow-500', dark: 'text-yellow-300' }, // YELLOW\n '\\x1b[35m': { light: 'text-purple-600', dark: 'text-purple-400' }, // MAGENTA\n '\\x1b[38;5;3m': { light: 'text-amber-600', dark: 'text-amber-300' }, // BEIGE\n '\\x1b[38;5;208m': { light: 'text-orange-600', dark: 'text-orange-400' }, // ORANGE\n '\\x1b[36m': { light: 'text-cyan-600', dark: 'text-cyan-400' }, // CYAN\n '\\x1b[37m': { light: 'text-gray-800', dark: 'text-gray-200' }, // WHITE\n '\\x1b[1m': { light: 'font-bold', dark: 'font-bold' }, // BOLD\n};\n\ninterface AnsiSegment {\n text: string;\n color?: string;\n isBold?: boolean;\n}\n\nconst parseAnsiCodes = (text: string, isDarkMode: boolean): AnsiSegment[] => {\n const segments: AnsiSegment[] = [];\n // biome-ignore lint/suspicious/noControlCharactersInRegex: we need to parse ANSI codes\n const ansiRegex = /(\\x1b\\[[0-9;]m)/g;\n const parts = text.split(ansiRegex);\n\n let currentColor: string \| undefined;\n let isBold = false;\n\n for (const part of parts) {\n if (ansiRegex.test(part)) {\n // This is an ANSI code\n const colorMapping = ANSI_COLORS[part];\n if (colorMapping) {\n if (part === '\\x1b[0m') {\n // RESET\n currentColor = undefined;\n isBold = false;\n } else if (part === '\\x1b[1m') {\n // BOLD\n isBold = true;\n } else {\n currentColor = isDarkMode ? colorMapping.dark : colorMapping.light;\n }\n }\n } else if (part) {\n // This is actual text\n segments.push({\n text: part,\n color: currentColor,\n isBold,\n });\n }\n }\n\n return segments;\n};\n\nexport type TerminalProps = {\n children: string;\n isDarkMode?: boolean;\n title?: string;\n onClose?: () => void;\n onSubmit?: (value: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children' \| 'onSubmit'>;\n\nexport const Terminal: FC<TerminalProps> = ({\n className,\n children,\n isDarkMode = false,\n title = 'bash',\n onClose,\n onSubmit,\n ...props\n}) => {\n const content = useIntlayer('terminal');\n const lines = useMemo(() => children.split('\\n'), [children]);\n const [inputValue, setInputValue] = useState('');\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && inputValue.trim()) {\n onSubmit?.(inputValue);\n setInputValue('');\n }\n };\n\n // Explicitly type the container props to avoid type conflicts\n const containerProps = props as Omit<\n HTMLAttributes<HTMLDivElement>,\n 'children' \| 'onSubmit'\n >;\n\n return (\n <Container\n roundedSize=\"2xl\"\n className={cn(\n 'flex min-w-0 max-w-full flex-col overflow-hidden font-mono',\n className\n )}\n {...containerProps}\n >\n {/ Tab bar /}\n <div className=\"flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n <div className=\"size-3 rounded-full bg-red-500\" />\n <div className=\"size-3 rounded-full bg-yellow-500\" />\n <div className=\"size-3 rounded-full bg-green-500\" />\n </div>\n <div className=\"flex size-full overflow-y-auto\">\n <div className=\"flex h-8 min-w-20 items-center justify-between gap-2 bg-card px-3 py-1\">\n <span>{title}</span>\n {onClose && (\n <button\n type=\"button\"\n onClick={onClose}\n className=\"text-neutral transition-colors hover:text-text\"\n aria-label={content.closeTab.value}\n >\n ×\n </button>\n )}\n </div>\n </div>\n </div>\n\n {/ Terminal content - hide scrollbar /}\n <pre className=\"min-w-0 max-w-full overflow-x-auto overflow-y-auto border-neutral/30 border-b p-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n <code>\n {lines.map((line, lineIndex) => {\n const segments = parseAnsiCodes(line, isDarkMode);\n\n return (\n <span className=\"line block w-full\" key={`line-${lineIndex}`}>\n {segments.length === 0\n ? '\\n'\n : segments.map((segment, segIndex) => (\n <span\n key={`seg-${lineIndex}-${segIndex}`}\n className={cn(segment.color, {\n 'font-bold': segment.isBold,\n })}\n >\n {segment.text}\n </span>\n ))}\n </span>\n );\n })}\n </code>\n </pre>\n\n {/ Input area */}\n <Container className=\"p-2\">\n <span className=\"text-neutral\">~/Desktop/MyApp</span>\n <Input\n className=\"m-0.5 w-full\"\n variant=\"invisible\"\n value={inputValue}\n aria-label={content.terminalInput.value}\n onChange={(e) => setInputValue(e.target.value)}\n onKeyDown={handleKeyDown}\n />\n </Container>\n </Container>\n );\n};\n"],"mappings":";;;;;;;;;;AAeA,~~MAAMA~~,cAA+D;CACnE,WAAW;EAAE,OAAO;EAAI,MAAM;EAAI;CAClC,YAAY;EAAE,OAAO;EAAiB,MAAM;EAAiB;CAC7D,kBAAkB;EAAE,OAAO;EAAiB,MAAM;EAAiB;CACnE,kBAAkB;EAAE,OAAO;EAAiB,MAAM;EAAiB;CACnE,YAAY;EAAE,OAAO;EAAiB,MAAM;EAAiB;CAC7D,YAAY;EAAE,OAAO;EAAgB,MAAM;EAAgB;CAC3D,YAAY;EAAE,OAAO;EAAkB,MAAM;EAAkB;CAC/D,kBAAkB;EAAE,OAAO;EAAmB,MAAM;EAAmB;CACvE,YAAY;EAAE,OAAO;EAAmB,MAAM;EAAmB;CACjE,gBAAgB;EAAE,OAAO;EAAkB,MAAM;EAAkB;CACnE,kBAAkB;EAAE,OAAO;EAAmB,MAAM;EAAmB;CACvE,YAAY;EAAE,OAAO;EAAiB,MAAM;EAAiB;CAC7D,YAAY;EAAE,OAAO;EAAiB,MAAM;EAAiB;CAC7D,WAAW;EAAE,OAAO;EAAa,MAAM;EAAa;CACrD;AAQD,MAAM,kBAAkB,MAAc,eAAuC;CAC3E,~~MAAMC~~,WAA0B,EAAE;CAElC,MAAM,YAAY;CAClB,MAAM,QAAQ,KAAK,MAAM,UAAU;CAEnC,~~IAAIC~~;CACJ,IAAI,SAAS;AAEb,MAAK,MAAM,QAAQ,MACjB,KAAI,UAAU,KAAK,KAAK,EAAE;EAExB,MAAM,eAAe,YAAY;AACjC,MAAI,aACF,KAAI,SAAS,WAAW;AAEtB,kBAAe;AACf,YAAS;aACA,SAAS,UAElB,UAAS;MAET,gBAAe,aAAa,aAAa,OAAO,aAAa;YAGxD,KAET,UAAS,KAAK;EACZ,MAAM;EACN,OAAO;EACP;EACD,CAAC;AAIN,QAAO;;AAWT,~~MAAaC~~,YAA+B,EAC1C,WACA,UACA,aAAa,OACb,QAAQ,QACR,SACA,UACA,GAAG,YACC;CACJ,MAAM,UAAU,YAAY,WAAW;CACvC,MAAM,QAAQ,cAAc,SAAS,MAAM,KAAK,EAAE,CAAC,SAAS,CAAC;CAC7D,MAAM,CAAC,YAAY,iBAAiB,SAAS,GAAG;CAEhD,MAAM,iBAAiB,MAAuC;AAC5D,MAAI,EAAE,QAAQ,WAAW,WAAW,MAAM,EAAE;AAC1C,cAAW,WAAW;AACtB,iBAAc,GAAG;;;CAKrB,MAAM,iBAAiB;AAKvB,QACE,qBAAC;EACC,aAAY;EACZ,WAAW,GACT,8DACA,UACD;EACD,GAAI;;GAGJ,qBAAC;IAAI,WAAU;eACb,qBAAC;KAAI,WAAU;;MACb,oBAAC,SAAI,WAAU,mCAAmC;MAClD,oBAAC,SAAI,WAAU,sCAAsC;MACrD,oBAAC,SAAI,WAAU,qCAAqC;;MAChD,EACN,oBAAC;KAAI,WAAU;eACb,qBAAC;MAAI,WAAU;iBACb,oBAAC,oBAAM,QAAa,EACnB,WACC,oBAAC;OACC,MAAK;OACL,SAAS;OACT,WAAU;OACV,cAAY,QAAQ,SAAS;iBAC9B;QAEQ;OAEP;MACF;KACF;GAGN,oBAAC;IAAI,WAAU;cACb,oBAAC,oBACE,MAAM,KAAK,MAAM,cAAc;KAC9B,MAAM,WAAW,eAAe,MAAM,WAAW;AAEjD,YACE,oBAAC;MAAK,WAAU;gBACb,SAAS,WAAW,IACjB,OACA,SAAS,KAAK,SAAS,aACrB,oBAAC;OAEC,WAAW,GAAG,QAAQ,OAAO,EAC3B,aAAa,QAAQ,QACtB,CAAC;iBAED,QAAQ;SALJ,OAAO,UAAU,GAAG,WAMpB,CACP;QAZiC,QAAQ,YAa1C;MAET,GACG;KACH;GAGN,qBAAC;IAAU,WAAU;eACnB,oBAAC;KAAK,WAAU;eAAe;MAAsB,EACrD,oBAAC;KACC,WAAU;KACV,SAAQ;KACR,OAAO;KACP,cAAY,QAAQ,cAAc;KAClC,WAAW,MAAM,cAAc,EAAE,OAAO,MAAM;KAC9C,WAAW;MACX;KACQ;;GACF"}
1	+ {"version":3,"file":"Terminal.mjs","names":[],"sources":["../../../../src/components/Terminal/Terminal.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { Input } from '@components/Input';\nimport { cn } from '@utils/cn';\nimport {\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n useMemo,\n useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ANSI color code mappings to CSS colors\nconst ANSI_COLORS: Record<string, { light: string; dark: string }> = {\n '\\x1b[0m': { light: '', dark: '' }, // RESET\n '\\x1b[90m': { light: 'text-gray-500', dark: 'text-gray-400' }, // GREY\n '\\x1b[38;5;239m': { light: 'text-gray-600', dark: 'text-gray-500' }, // GREY_DARK\n '\\x1b[38;5;252m': { light: 'text-gray-300', dark: 'text-gray-300' }, // GREY_LIGHT\n '\\x1b[34m': { light: 'text-blue-600', dark: 'text-blue-400' }, // BLUE\n '\\x1b[31m': { light: 'text-red-600', dark: 'text-red-400' }, // RED\n '\\x1b[32m': { light: 'text-green-600', dark: 'text-green-400' }, // GREEN\n '\\x1b[38;5;226m': { light: 'text-yellow-500', dark: 'text-yellow-300' }, // YELLOW\n '\\x1b[35m': { light: 'text-purple-600', dark: 'text-purple-400' }, // MAGENTA\n '\\x1b[38;5;3m': { light: 'text-amber-600', dark: 'text-amber-300' }, // BEIGE\n '\\x1b[38;5;208m': { light: 'text-orange-600', dark: 'text-orange-400' }, // ORANGE\n '\\x1b[36m': { light: 'text-cyan-600', dark: 'text-cyan-400' }, // CYAN\n '\\x1b[37m': { light: 'text-gray-800', dark: 'text-gray-200' }, // WHITE\n '\\x1b[1m': { light: 'font-bold', dark: 'font-bold' }, // BOLD\n};\n\ninterface AnsiSegment {\n text: string;\n color?: string;\n isBold?: boolean;\n}\n\nconst parseAnsiCodes = (text: string, isDarkMode: boolean): AnsiSegment[] => {\n const segments: AnsiSegment[] = [];\n // biome-ignore lint/suspicious/noControlCharactersInRegex: we need to parse ANSI codes\n const ansiRegex = /(\\x1b\\[[0-9;]m)/g;\n const parts = text.split(ansiRegex);\n\n let currentColor: string \| undefined;\n let isBold = false;\n\n for (const part of parts) {\n if (ansiRegex.test(part)) {\n // This is an ANSI code\n const colorMapping = ANSI_COLORS[part];\n if (colorMapping) {\n if (part === '\\x1b[0m') {\n // RESET\n currentColor = undefined;\n isBold = false;\n } else if (part === '\\x1b[1m') {\n // BOLD\n isBold = true;\n } else {\n currentColor = isDarkMode ? colorMapping.dark : colorMapping.light;\n }\n }\n } else if (part) {\n // This is actual text\n segments.push({\n text: part,\n color: currentColor,\n isBold,\n });\n }\n }\n\n return segments;\n};\n\nexport type TerminalProps = {\n children: string;\n isDarkMode?: boolean;\n title?: string;\n onClose?: () => void;\n onSubmit?: (value: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children' \| 'onSubmit'>;\n\nexport const Terminal: FC<TerminalProps> = ({\n className,\n children,\n isDarkMode = false,\n title = 'bash',\n onClose,\n onSubmit,\n ...props\n}) => {\n const content = useIntlayer('terminal');\n const lines = useMemo(() => children.split('\\n'), [children]);\n const [inputValue, setInputValue] = useState('');\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && inputValue.trim()) {\n onSubmit?.(inputValue);\n setInputValue('');\n }\n };\n\n // Explicitly type the container props to avoid type conflicts\n const containerProps = props as Omit<\n HTMLAttributes<HTMLDivElement>,\n 'children' \| 'onSubmit'\n >;\n\n return (\n <Container\n roundedSize=\"2xl\"\n className={cn(\n 'flex min-w-0 max-w-full flex-col overflow-hidden font-mono',\n className\n )}\n {...containerProps}\n >\n {/ Tab bar /}\n <div className=\"flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n <div className=\"size-3 rounded-full bg-red-500\" />\n <div className=\"size-3 rounded-full bg-yellow-500\" />\n <div className=\"size-3 rounded-full bg-green-500\" />\n </div>\n <div className=\"flex size-full overflow-y-auto\">\n <div className=\"flex h-8 min-w-20 items-center justify-between gap-2 bg-card px-3 py-1\">\n <span>{title}</span>\n {onClose && (\n <button\n type=\"button\"\n onClick={onClose}\n className=\"text-neutral transition-colors hover:text-text\"\n aria-label={content.closeTab.value}\n >\n ×\n </button>\n )}\n </div>\n </div>\n </div>\n\n {/ Terminal content - hide scrollbar /}\n <pre className=\"min-w-0 max-w-full overflow-x-auto overflow-y-auto border-neutral/30 border-b p-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n <code>\n {lines.map((line, lineIndex) => {\n const segments = parseAnsiCodes(line, isDarkMode);\n\n return (\n <span className=\"line block w-full\" key={`line-${lineIndex}`}>\n {segments.length === 0\n ? '\\n'\n : segments.map((segment, segIndex) => (\n <span\n key={`seg-${lineIndex}-${segIndex}`}\n className={cn(segment.color, {\n 'font-bold': segment.isBold,\n })}\n >\n {segment.text}\n </span>\n ))}\n </span>\n );\n })}\n </code>\n </pre>\n\n {/ Input area */}\n <Container className=\"p-2\">\n <span className=\"text-neutral\">~/Desktop/MyApp</span>\n <Input\n className=\"m-0.5 w-full\"\n variant=\"invisible\"\n value={inputValue}\n aria-label={content.terminalInput.value}\n onChange={(e) => setInputValue(e.target.value)}\n onKeyDown={handleKeyDown}\n />\n </Container>\n </Container>\n );\n};\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AutoSizeTextArea.mjs","names":[~~"AutoSizedTextArea: FC<AutoSizedTextAreaProps>","handleChange: ChangeEventHandler<HTMLTextAreaElement>"~~],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n type ChangeEventHandler,\n type FC,\n useEffect,\n useImperativeHandle,\n useRef,\n} from 'react';\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('overflow-y-auto', autoSize && 'resize-none', className)}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;;;AAkDA,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DrB,~~MAAaA~~,qBAAiD,EAC5D,WACA,WAAW,MACX,UACA,UAAU,KACV,KACA,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,GAAG,mBAAmB,YAAY,eAAe,UAAU;EACtE,GAAI;GACJ"}
1	+ {"version":3,"file":"AutoSizeTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n type ChangeEventHandler,\n type FC,\n useEffect,\n useImperativeHandle,\n useRef,\n} from 'react';\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('overflow-y-auto', autoSize && 'resize-none', className)}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;;;AAkDA,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DrB,MAAa,qBAAiD,EAC5D,WACA,WAAW,MACX,UACA,UAAU,KACV,KACA,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,MAAM,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,GAAG,mBAAmB,YAAY,eAAe,UAAU;EACtE,GAAI;GACJ"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AutocompleteTextArea.mjs","names":["AutoCompleteTextarea: FC<AutocompleteTextAreaProps>"],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useAutocomplete } from '@hooks/reactQuery';\nimport type { AutocompleteResponse } from '@intlayer/backend';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\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 // TODO: Uncomment this when the autocomplete works well enough\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":"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"}
1	+ {"version":3,"file":"AutocompleteTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useAutocomplete } from '@hooks/reactQuery';\nimport type { AutocompleteResponse } from '@intlayer/backend';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport { type FC, useEffect, useRef, useState } from 'react';\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 // TODO: Uncomment this when the autocomplete works well enough\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":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.mjs","names":[~~"TextArea: FC<TextAreaProps>"~~],"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';\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,OACzB,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,eACA,cAAc;EACZ;EACA,wBAAwB,yBAAyB,YAAY;EAC7D;EACD,CAAC,CACH;CACD,GAAI;EACJ"}
1	+ {"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';\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,MAAa,YAA+B,EAC1C,WACA,SACA,yBAAyB,OACzB,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,eACA,cAAc;EACZ;EACA,wBAAwB,yBAAyB,YAAY;EAC7D;EACD,CAAC,CACH;CACD,GAAI;EACJ"}

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

	@@ -1 +1 @@
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,UAAU,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"}
1	+ {"version":3,"file":"DesktopThemeSwitcher.mjs","names":["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,MAAM,cAA+B,EAAE,MAAM,UAAU,GAAG,YACxD,oBAAC;CAAI,WAAU;WACb,oBAAC;EACC,WAAU;EACJ;EACN,aAAU;EACV,MAAK;EACL,SAAS,cAAc;EACvB,GAAI;EAEH;GACM;EACL;AASR,MAAa,wBAAuD,EAClE,OACA,UACA,kBACI;CAIJ,MAAM,CAAC,MAAM,WAAW,SAHG,gBAAgB,QACF,MAAM,SAAS,MAEJ;CAEpD,MAAM,cAAc,WAAgB;AAClC,MAAIA,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.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MobileThemeSwitcher.mjs","names":[~~"MobileThemeSwitcher: FC<MobileThemeSwitcherProps>"~~],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n theme: Modes;\n systemTheme: Modes;\n setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n isCurrentMode,\n isNextMode,\n}: {\n isCurrentMode: boolean;\n isNextMode: boolean;\n}) =>\n cn(\n `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n `opacity-0 transition-opacity duration-300 ease-in-out`,\n isCurrentMode && `opacity-100 group-hover:opacity-0`,\n isNextMode && `group-hover:opacity-100`\n );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n theme,\n systemTheme,\n setTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const nextMode =\n // Start loop\n // If mode is system, toggle the theme inverse of the system theme\n mode === Modes.system\n ? theme === Modes.dark\n ? Modes.light\n : Modes.dark\n : // Close loop\n // If current theme same as system theme, reset by toggle the system theme\n isThemeSystemTheme\n ? Modes.system\n : // Go to next step\n // Otherwise, toggle the remaining theme\n mode === Modes.light\n ? Modes.dark\n : Modes.light;\n\n const toggleMode = () => {\n if (nextMode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(nextMode);\n }\n setMode(nextMode);\n };\n\n return (\n <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n <CircleDashed\n className={getIconStyle({\n isCurrentMode: mode === Modes.system,\n isNextMode: nextMode === Modes.system,\n })}\n onClick={toggleMode}\n data-mode=\"system\"\n />\n\n <Moon\n className={getIconStyle({\n isCurrentMode: mode === Modes.light,\n isNextMode: nextMode === Modes.light,\n })}\n onClick={toggleMode}\n data-mode=\"light\"\n />\n\n <Sun\n className={getIconStyle({\n isCurrentMode: mode === Modes.dark,\n isNextMode: nextMode === Modes.dark,\n })}\n onClick={toggleMode}\n data-mode=\"dark\"\n />\n </button>\n );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,eACA,iBAKA,GACE,+DACA,yDACA,iBAAiB,qCACjB,cAAc,0BACf;AAEH,~~MAAaA~~,uBAAqD,EAChE,OACA,aACA,eACI;CACJ,MAAM,qBAAqB,gBAAgB;CAG3C,MAAM,CAAC,MAAM,WAAW,SAFJ,qBAAqB,MAAM,SAAS,MAEJ;CAEpD,MAAM,WAGJ,SAAS,MAAM,SACX,UAAU,MAAM,OACd,MAAM,QACN,MAAM,OAGR,qBACE,MAAM,SAGN,SAAS,MAAM,QACb,MAAM,OACN,MAAM;CAEhB,MAAM,mBAAmB;AACvB,MAAI,aAAa,MAAM,OACrB,UAAS,eAAe,MAAM,MAAM;MAEpC,UAAS,SAAS;AAEpB,UAAQ,SAAS;;AAGnB,QACE,qBAAC;EAAO,WAAU;EAAyB,cAAW;;GACpD,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;GAEF,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;GAEF,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;;GACK"}
1	+ {"version":3,"file":"MobileThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n theme: Modes;\n systemTheme: Modes;\n setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n isCurrentMode,\n isNextMode,\n}: {\n isCurrentMode: boolean;\n isNextMode: boolean;\n}) =>\n cn(\n `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n `opacity-0 transition-opacity duration-300 ease-in-out`,\n isCurrentMode && `opacity-100 group-hover:opacity-0`,\n isNextMode && `group-hover:opacity-100`\n );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n theme,\n systemTheme,\n setTheme,\n}) => {\n const isThemeSystemTheme = systemTheme === theme;\n const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n const [mode, setMode] = useState<Modes>(defaultMode);\n\n const nextMode =\n // Start loop\n // If mode is system, toggle the theme inverse of the system theme\n mode === Modes.system\n ? theme === Modes.dark\n ? Modes.light\n : Modes.dark\n : // Close loop\n // If current theme same as system theme, reset by toggle the system theme\n isThemeSystemTheme\n ? Modes.system\n : // Go to next step\n // Otherwise, toggle the remaining theme\n mode === Modes.light\n ? Modes.dark\n : Modes.light;\n\n const toggleMode = () => {\n if (nextMode === Modes.system) {\n setTheme(systemTheme ?? Modes.light);\n } else {\n setTheme(nextMode);\n }\n setMode(nextMode);\n };\n\n return (\n <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n <CircleDashed\n className={getIconStyle({\n isCurrentMode: mode === Modes.system,\n isNextMode: nextMode === Modes.system,\n })}\n onClick={toggleMode}\n data-mode=\"system\"\n />\n\n <Moon\n className={getIconStyle({\n isCurrentMode: mode === Modes.light,\n isNextMode: nextMode === Modes.light,\n })}\n onClick={toggleMode}\n data-mode=\"light\"\n />\n\n <Sun\n className={getIconStyle({\n isCurrentMode: mode === Modes.dark,\n isNextMode: nextMode === Modes.dark,\n })}\n onClick={toggleMode}\n data-mode=\"dark\"\n />\n </button>\n );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,eACA,iBAKA,GACE,+DACA,yDACA,iBAAiB,qCACjB,cAAc,0BACf;AAEH,MAAa,uBAAqD,EAChE,OACA,aACA,eACI;CACJ,MAAM,qBAAqB,gBAAgB;CAG3C,MAAM,CAAC,MAAM,WAAW,SAFJ,qBAAqB,MAAM,SAAS,MAEJ;CAEpD,MAAM,WAGJ,SAAS,MAAM,SACX,UAAU,MAAM,OACd,MAAM,QACN,MAAM,OAGR,qBACE,MAAM,SAGN,SAAS,MAAM,QACb,MAAM,OACN,MAAM;CAEhB,MAAM,mBAAmB;AACvB,MAAI,aAAa,MAAM,OACrB,UAAS,eAAe,MAAM,MAAM;MAEpC,UAAS,SAAS;AAEpB,UAAQ,SAAS;;AAGnB,QACE,qBAAC;EAAO,WAAU;EAAyB,cAAW;;GACpD,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;GAEF,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;GAEF,oBAAC;IACC,WAAW,aAAa;KACtB,eAAe,SAAS,MAAM;KAC9B,YAAY,aAAa,MAAM;KAChC,CAAC;IACF,SAAS;IACT,aAAU;KACV;;GACK"}

package/dist/esm/components/Toaster/Toast.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.mjs","names":["ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>>","Toast: FC<\n ComponentProps<typeof ToastPrimitives.Root> &\n VariantProps<typeof toastVariants>\n>","ToastAction: FC<ComponentProps<typeof ToastPrimitives.Action>>","ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>>","ToastTitle: FC<ComponentProps<typeof ToastPrimitives.Title>>","ToastDescription: FC<\n ComponentProps<typeof ToastPrimitives.Description>\n>"],"sources":["../../../../src/components/Toaster/Toast.tsx"],"sourcesContent":["'use client';\n\nimport * as ToastPrimitives from '@radix-ui/react-toast';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport type { ComponentProps, FC, ReactElement } from 'react';\n\nconst ToastProvider = ToastPrimitives;\n\nconst ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Viewport\n className={cn(\n 'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',\n className\n )}\n {...props}\n />\n);\n\n/*\n Toast variant styles using class-variance-authority.\n \n Defines visual styles for different toast types with semantic colors,\n * animations, and responsive behavior.\n \n @example\n * ```tsx\n * // Error toast with red background\n * <Toast variant=\"error\">Error message</Toast>\n \n // Success toast with green background\n * <Toast variant=\"success\">Success message</Toast>\n \n // Default toast with neutral styling\n * <Toast variant=\"default\">Info message</Toast>\n * ```\n /\nconst toastVariants = cva(\n 'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md p-4 pr-6 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',\n {\n variants: {\n /* Toast visual variants for different message types /\n variant: {\n /* Error state with red styling for failures and warnings /\n error: 'bg-error/40 text-text',\n /* Success state with green styling for confirmations /\n success: 'bg-success/30 text-text',\n /* Default neutral styling for general information /\n default: 'bg-card/80 text-text',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\n/\n Toast Component\n \n A notification component that displays temporary messages to users using Radix UI primitives.\n * Supports different visual variants, animations, and user interactions including swipe-to-dismiss.\n \n ## Features\n * - Visual Variants: Error, success, and default styling themes\n * - Animations: Smooth slide-in/slide-out transitions with fade effects\n * - Swipe Gestures: Touch-friendly swipe-to-dismiss functionality\n * - Accessibility: Full screen reader support and keyboard navigation\n * - Positioning: Smart positioning with responsive viewport handling\n * - Auto-dismiss: Configurable automatic dismissal timing\n \n ## Technical Implementation\n * - Built on Radix UI Toast primitives for accessibility compliance\n * - Uses Framer Motion for smooth animations and gestures\n * - CVA (class-variance-authority) for consistent styling variants\n * - Backdrop blur effects for modern visual appeal\n * - CSS transforms for hardware-accelerated animations\n \n @example\n * ```tsx\n * // Basic toast with title and description\n * <Toast variant=\"default\">\n * <ToastTitle>Notification</ToastTitle>\n * <ToastDescription>Your action was completed successfully.</ToastDescription>\n * <ToastClose />\n * </Toast>\n \n // Error toast with action button\n * <Toast variant=\"error\">\n * <ToastTitle>Upload Failed</ToastTitle>\n * <ToastDescription>Could not upload file. Please try again.</ToastDescription>\n * <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n * <ToastClose />\n * </Toast>\n * ```\n /\nconst Toast: FC<\n ComponentProps<typeof ToastPrimitives.Root> &\n VariantProps<typeof toastVariants>\n> = ({ className, variant, ...props }) => {\n return (\n <ToastPrimitives.Root\n className={cn(toastVariants({ variant }), className)}\n {...props}\n />\n );\n};\n\n/\n ToastAction Component\n \n An interactive button component for toast notifications that allows users to take\n * actions related to the notification message.\n \n ## Features\n * - Accessibility: Requires `altText` prop for screen readers\n * - Visual States: Hover, focus, and disabled state styling\n * - Theme Integration: Supports destructive and default themes\n * - Keyboard Navigation: Full keyboard accessibility support\n \n ## Usage Guidelines\n * - Use for actionable notifications (retry, undo, view details)\n * - Keep action text short and descriptive\n * - Provide meaningful `altText` for accessibility\n * - Limit to one primary action per toast\n \n @example\n * ```tsx\n * // Retry action for failed operations\n * <ToastAction altText=\"Retry the failed operation\">\n * Retry\n * </ToastAction>\n \n // Undo action for reversible operations\n * <ToastAction altText=\"Undo the last action\">\n * Undo\n * </ToastAction>\n \n // Navigation action\n * <ToastAction altText=\"View the uploaded file\">\n * View File\n * </ToastAction>\n * ```\n /\nconst ToastAction: FC<ComponentProps<typeof ToastPrimitives.Action>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Action\n className={cn(\n 'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',\n className\n )}\n {...props}\n />\n);\n\nconst ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Close\n className={cn(\n 'absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',\n className\n )}\n toast-close=\"\"\n {...props}\n >\n <X className=\"size-5\" />\n </ToastPrimitives.Close>\n);\n/\n ToastTitle Component\n \n The primary heading text for toast notifications. Provides semantic structure\n * and proper typography hierarchy within the toast.\n \n ## Styling Features\n * - Semi-bold font weight for emphasis\n * - Automatic text sizing adjustments for descriptions\n * - Proper spacing relationships with other toast elements\n \n @example\n * ```tsx\n * <ToastTitle>File Upload Complete</ToastTitle>\n * <ToastTitle>Error: Connection Failed</ToastTitle>\n * <ToastTitle>Settings Saved</ToastTitle>\n * ```\n /\nconst ToastTitle: FC<ComponentProps<typeof ToastPrimitives.Title>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Title\n className={cn('font-semibold text-sm [&+div]:text-xs', className)}\n {...props}\n />\n);\n\n/\n ToastDescription Component\n \n Supporting text that provides additional context or details for the toast notification.\n * Complements the ToastTitle with more detailed information.\n \n ## Styling Features\n * - Slightly reduced opacity for visual hierarchy\n * - Smaller text size than title\n * - Optimal line height for readability\n \n ## Content Guidelines\n * - Keep descriptions concise but informative\n * - Provide actionable information when possible\n * - Use plain language for better accessibility\n \n @example\n * ```tsx\n * <ToastDescription>\n * Your document has been uploaded successfully and is now available for sharing.\n * </ToastDescription>\n \n <ToastDescription>\n * Please check your internet connection and try again.\n * </ToastDescription>\n * ```\n /\nconst ToastDescription: FC<\n ComponentProps<typeof ToastPrimitives.Description>\n> = ({ className, ...props }) => (\n <ToastPrimitives.Description\n className={cn('text-sm opacity-90', className)}\n {...props}\n />\n);\n/\n Props type for Toast component including all Radix UI Toast.Root props\n * and variant styling options.\n /\ntype ToastProps = ComponentProps<typeof Toast>;\n\n/\n Type for ToastAction elements used in toast configurations.\n * Ensures type safety when passing action elements to toast functions.\n */\ntype ToastActionElement = ReactElement<typeof ToastAction>;\n\nexport {\n Toast,\n ToastAction,\n ToastClose,\n ToastDescription,\n ToastProvider,\n ToastTitle,\n ToastViewport,\n type ToastActionElement,\n type ToastProps,\n};\n"],"mappings":";;;;;;;;;AAQA,MAAM,gBAAgB;AAEtB,MAAMA,iBAAsE,EAC1E,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,mIACA,UACD;CACD,GAAI;EACJ;;;;;;;;;;;;;;;;;;;AAqBJ,MAAM,gBAAgB,IACpB,koBACA;CACE,UAAU,EAER,SAAS;EAEP,OAAO;EAEP,SAAS;EAET,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCD,MAAMC,SAGD,EAAE,WAAW,SAAS,GAAG,YAAY;AACxC,QACE,oBAAC,gBAAgB;EACf,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EACpD,GAAI;GACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCN,MAAMC,eAAkE,EACtE,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,wdACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAMC,cAAgE,EACpE,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,kVACA,UACD;CACD,eAAY;CACZ,GAAI;WAEJ,oBAAC,KAAE,WAAU,WAAW;EACF;;;;;;;;;;;;;;;;;;;AAoB1B,MAAMC,cAAgE,EACpE,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GAAG,yCAAyC,UAAU;CACjE,GAAI;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BJ,MAAMC,oBAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GAAG,sBAAsB,UAAU;CAC9C,GAAI;EACJ"}
1	+ {"version":3,"file":"Toast.mjs","names":[],"sources":["../../../../src/components/Toaster/Toast.tsx"],"sourcesContent":["'use client';\n\nimport * as ToastPrimitives from '@radix-ui/react-toast';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport type { ComponentProps, FC, ReactElement } from 'react';\n\nconst ToastProvider = ToastPrimitives;\n\nconst ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Viewport\n className={cn(\n 'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]',\n className\n )}\n {...props}\n />\n);\n\n/*\n Toast variant styles using class-variance-authority.\n \n Defines visual styles for different toast types with semantic colors,\n * animations, and responsive behavior.\n \n @example\n * ```tsx\n * // Error toast with red background\n * <Toast variant=\"error\">Error message</Toast>\n \n // Success toast with green background\n * <Toast variant=\"success\">Success message</Toast>\n \n // Default toast with neutral styling\n * <Toast variant=\"default\">Info message</Toast>\n * ```\n /\nconst toastVariants = cva(\n 'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md p-4 pr-6 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',\n {\n variants: {\n /* Toast visual variants for different message types /\n variant: {\n /* Error state with red styling for failures and warnings /\n error: 'bg-error/40 text-text',\n /* Success state with green styling for confirmations /\n success: 'bg-success/30 text-text',\n /* Default neutral styling for general information /\n default: 'bg-card/80 text-text',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n\n/\n Toast Component\n \n A notification component that displays temporary messages to users using Radix UI primitives.\n * Supports different visual variants, animations, and user interactions including swipe-to-dismiss.\n \n ## Features\n * - Visual Variants: Error, success, and default styling themes\n * - Animations: Smooth slide-in/slide-out transitions with fade effects\n * - Swipe Gestures: Touch-friendly swipe-to-dismiss functionality\n * - Accessibility: Full screen reader support and keyboard navigation\n * - Positioning: Smart positioning with responsive viewport handling\n * - Auto-dismiss: Configurable automatic dismissal timing\n \n ## Technical Implementation\n * - Built on Radix UI Toast primitives for accessibility compliance\n * - Uses Framer Motion for smooth animations and gestures\n * - CVA (class-variance-authority) for consistent styling variants\n * - Backdrop blur effects for modern visual appeal\n * - CSS transforms for hardware-accelerated animations\n \n @example\n * ```tsx\n * // Basic toast with title and description\n * <Toast variant=\"default\">\n * <ToastTitle>Notification</ToastTitle>\n * <ToastDescription>Your action was completed successfully.</ToastDescription>\n * <ToastClose />\n * </Toast>\n \n // Error toast with action button\n * <Toast variant=\"error\">\n * <ToastTitle>Upload Failed</ToastTitle>\n * <ToastDescription>Could not upload file. Please try again.</ToastDescription>\n * <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n * <ToastClose />\n * </Toast>\n * ```\n /\nconst Toast: FC<\n ComponentProps<typeof ToastPrimitives.Root> &\n VariantProps<typeof toastVariants>\n> = ({ className, variant, ...props }) => {\n return (\n <ToastPrimitives.Root\n className={cn(toastVariants({ variant }), className)}\n {...props}\n />\n );\n};\n\n/\n ToastAction Component\n \n An interactive button component for toast notifications that allows users to take\n * actions related to the notification message.\n \n ## Features\n * - Accessibility: Requires `altText` prop for screen readers\n * - Visual States: Hover, focus, and disabled state styling\n * - Theme Integration: Supports destructive and default themes\n * - Keyboard Navigation: Full keyboard accessibility support\n \n ## Usage Guidelines\n * - Use for actionable notifications (retry, undo, view details)\n * - Keep action text short and descriptive\n * - Provide meaningful `altText` for accessibility\n * - Limit to one primary action per toast\n \n @example\n * ```tsx\n * // Retry action for failed operations\n * <ToastAction altText=\"Retry the failed operation\">\n * Retry\n * </ToastAction>\n \n // Undo action for reversible operations\n * <ToastAction altText=\"Undo the last action\">\n * Undo\n * </ToastAction>\n \n // Navigation action\n * <ToastAction altText=\"View the uploaded file\">\n * View File\n * </ToastAction>\n * ```\n /\nconst ToastAction: FC<ComponentProps<typeof ToastPrimitives.Action>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Action\n className={cn(\n 'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 font-medium text-sm transition-colors hover:bg-text focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:focus:ring-destructive group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground',\n className\n )}\n {...props}\n />\n);\n\nconst ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Close\n className={cn(\n 'absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 group-[.destructive]:hover:text-red-50',\n className\n )}\n toast-close=\"\"\n {...props}\n >\n <X className=\"size-5\" />\n </ToastPrimitives.Close>\n);\n/\n ToastTitle Component\n \n The primary heading text for toast notifications. Provides semantic structure\n * and proper typography hierarchy within the toast.\n \n ## Styling Features\n * - Semi-bold font weight for emphasis\n * - Automatic text sizing adjustments for descriptions\n * - Proper spacing relationships with other toast elements\n \n @example\n * ```tsx\n * <ToastTitle>File Upload Complete</ToastTitle>\n * <ToastTitle>Error: Connection Failed</ToastTitle>\n * <ToastTitle>Settings Saved</ToastTitle>\n * ```\n /\nconst ToastTitle: FC<ComponentProps<typeof ToastPrimitives.Title>> = ({\n className,\n ...props\n}) => (\n <ToastPrimitives.Title\n className={cn('font-semibold text-sm [&+div]:text-xs', className)}\n {...props}\n />\n);\n\n/\n ToastDescription Component\n \n Supporting text that provides additional context or details for the toast notification.\n * Complements the ToastTitle with more detailed information.\n \n ## Styling Features\n * - Slightly reduced opacity for visual hierarchy\n * - Smaller text size than title\n * - Optimal line height for readability\n \n ## Content Guidelines\n * - Keep descriptions concise but informative\n * - Provide actionable information when possible\n * - Use plain language for better accessibility\n \n @example\n * ```tsx\n * <ToastDescription>\n * Your document has been uploaded successfully and is now available for sharing.\n * </ToastDescription>\n \n <ToastDescription>\n * Please check your internet connection and try again.\n * </ToastDescription>\n * ```\n /\nconst ToastDescription: FC<\n ComponentProps<typeof ToastPrimitives.Description>\n> = ({ className, ...props }) => (\n <ToastPrimitives.Description\n className={cn('text-sm opacity-90', className)}\n {...props}\n />\n);\n/\n Props type for Toast component including all Radix UI Toast.Root props\n * and variant styling options.\n /\ntype ToastProps = ComponentProps<typeof Toast>;\n\n/\n Type for ToastAction elements used in toast configurations.\n * Ensures type safety when passing action elements to toast functions.\n */\ntype ToastActionElement = ReactElement<typeof ToastAction>;\n\nexport {\n Toast,\n ToastAction,\n ToastClose,\n ToastDescription,\n ToastProvider,\n ToastTitle,\n ToastViewport,\n type ToastActionElement,\n type ToastProps,\n};\n"],"mappings":";;;;;;;;;AAQA,MAAM,gBAAgB;AAEtB,MAAM,iBAAsE,EAC1E,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,mIACA,UACD;CACD,GAAI;EACJ;;;;;;;;;;;;;;;;;;;AAqBJ,MAAM,gBAAgB,IACpB,koBACA;CACE,UAAU,EAER,SAAS;EAEP,OAAO;EAEP,SAAS;EAET,SAAS;EACV,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCD,MAAM,SAGD,EAAE,WAAW,SAAS,GAAG,YAAY;AACxC,QACE,oBAAC,gBAAgB;EACf,WAAW,GAAG,cAAc,EAAE,SAAS,CAAC,EAAE,UAAU;EACpD,GAAI;GACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCN,MAAM,eAAkE,EACtE,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,wdACA,UACD;CACD,GAAI;EACJ;AAGJ,MAAM,cAAgE,EACpE,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GACT,kVACA,UACD;CACD,eAAY;CACZ,GAAI;WAEJ,oBAAC,KAAE,WAAU,WAAW;EACF;;;;;;;;;;;;;;;;;;;AAoB1B,MAAM,cAAgE,EACpE,WACA,GAAG,YAEH,oBAAC,gBAAgB;CACf,WAAW,GAAG,yCAAyC,UAAU;CACjE,GAAI;EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BJ,MAAM,oBAED,EAAE,WAAW,GAAG,YACnB,oBAAC,gBAAgB;CACf,WAAW,GAAG,sBAAsB,UAAU;CAC9C,GAAI;EACJ"}

package/dist/esm/components/Toaster/useToast.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useToast.mjs","names":["toast","listeners: ((state: State) => void)[]","memoryState: State","props"],"sources":["../../../../src/components/Toaster/useToast.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useEffect, useState } from 'react';\nimport type { ToastActionElement, ToastProps } from './Toast';\n\n/*\n Maximum number of toasts that can be displayed simultaneously.\n * Prevents UI overflow and maintains clean notification experience.\n /\nconst TOAST_LIMIT = 1;\n\n/\n Delay before automatically removing dismissed toasts from memory.\n * Set to 15 minutes (900,000ms) to allow for potential undo actions.\n /\nconst TOAST_REMOVE_DELAY = 15 60 * 1000; // 15 seconds\n\n/*\n Extended toast configuration with additional properties for the toast system.\n \n Combines base ToastProps with specific fields needed for toast management\n * including unique identification and content elements.\n \n @example\n * ```tsx\n * const toast: ToasterToast = {\n * id: '1',\n * variant: 'success',\n * title: 'Success!',\n * description: 'Your action completed successfully.',\n * action: <ToastAction altText=\"View details\">View</ToastAction>\n * };\n * ```\n /\ntype ToasterToast = ToastProps & {\n /* Unique identifier for the toast instance /\n id: string;\n /* Optional title text or React element /\n title?: ReactNode;\n /* Optional description text or React element /\n description?: ReactNode;\n /* Optional action button element /\n action?: ToastActionElement;\n};\n\n/\n Action types for toast state management using reducer pattern.\n \n Defines all possible actions that can be performed on the toast state,\n * enabling predictable state updates and better debugging.\n /\nenum ActionTypes {\n /* Add a new toast to the display queue /\n ADD_TOAST = 'ADD_TOAST',\n /* Update properties of an existing toast /\n UPDATE_TOAST = 'UPDATE_TOAST',\n /* Mark a toast as dismissed (triggers exit animation) /\n DISMISS_TOAST = 'DISMISS_TOAST',\n /* Completely remove a toast from memory /\n REMOVE_TOAST = 'REMOVE_TOAST',\n}\n\nlet count = 0;\n\nconst genId = () => {\n count = (count + 1) % Number.MAX_SAFE_INTEGER;\n return count.toString();\n};\n\ntype Action =\n \| {\n type: ActionTypes.ADD_TOAST;\n toast: ToasterToast;\n }\n \| {\n type: ActionTypes.UPDATE_TOAST;\n toast: Partial<ToasterToast>;\n }\n \| {\n type: ActionTypes.DISMISS_TOAST;\n toastId?: ToasterToast['id'];\n }\n \| {\n type: ActionTypes.REMOVE_TOAST;\n toastId?: ToasterToast['id'];\n };\n\ntype State = {\n toasts: ToasterToast[];\n};\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({\n type: ActionTypes.REMOVE_TOAST,\n toastId: toastId,\n });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\n/\n Toast state reducer function that handles all toast state transitions.\n \n Implements predictable state updates using the reducer pattern, ensuring\n * consistent behavior across all toast operations.\n \n ## State Management\n * - ADD_TOAST: Adds new toast and enforces limit by removing excess toasts\n * - UPDATE_TOAST: Updates existing toast properties while preserving identity\n * - DISMISS_TOAST: Marks toasts as closed and schedules removal\n * - REMOVE_TOAST: Permanently removes toasts from state\n \n ## Side Effects\n * The DISMISS_TOAST action includes side effects for scheduling toast removal,\n * which could be extracted but is kept here for simplicity.\n \n @param state - Current toast state\n * @param action - Action to perform on the state\n * @returns Updated toast state\n \n @example\n * ```tsx\n * // Add a new toast\n * const newState = reducer(state, {\n * type: ActionTypes.ADD_TOAST,\n * toast: { id: '1', title: 'Hello', variant: 'default' }\n * });\n \n // Dismiss a specific toast\n * const dismissedState = reducer(state, {\n * type: ActionTypes.DISMISS_TOAST,\n * toastId: '1'\n * });\n * ```\n /\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionTypes.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionTypes.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionTypes.DISMISS_TOAST: {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId \|\| toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t\n ),\n };\n }\n case ActionTypes.REMOVE_TOAST:\n if (action.toastId === undefined) {\n return {\n ...state,\n toasts: [],\n };\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId),\n };\n }\n};\n\nconst listeners: ((state: State) => void)[] = [];\n\nlet memoryState: State = { toasts: [] };\n\nconst dispatch = (action: Action) => {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n};\n\n/\n Toast configuration type for creating new toasts.\n * Omits the 'id' field as it's automatically generated.\n /\ntype Toast = Omit<ToasterToast, 'id'>;\n\n/\n Creates and displays a new toast notification.\n \n This is the primary function for showing toast notifications to users.\n * It automatically generates unique IDs, handles state updates, and provides\n * control functions for managing the toast lifecycle.\n \n ## Features\n * - Automatic ID Generation: Each toast gets a unique identifier\n * - State Management: Integrates with global toast state\n * - Lifecycle Control: Returns functions to update or dismiss the toast\n * - Auto-dismiss: Automatically closes when user dismisses\n \n ## Return Value\n * Returns an object with control functions:\n * - `id`: Unique identifier for the toast\n * - `dismiss()`: Function to manually dismiss the toast\n * - `update()`: Function to update toast properties\n \n @param props - Toast configuration (title, description, variant, etc.)\n * @returns Object with toast ID and control functions\n \n @example\n * ```tsx\n * // Basic success toast\n * const { dismiss } = toast({\n * title: 'Success!',\n * description: 'Your file was uploaded successfully.',\n * variant: 'success'\n * });\n \n // Error toast with retry action\n * const errorToast = toast({\n * title: 'Upload Failed',\n * description: 'Could not upload file. Please try again.',\n * variant: 'error',\n * action: <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n * });\n \n // Update toast content dynamically\n * errorToast.update({\n * title: 'Retrying...',\n * description: 'Please wait while we retry the upload.',\n * variant: 'default'\n * });\n \n // Manually dismiss toast\n * setTimeout(() => errorToast.dismiss(), 5000);\n * ```\n /\nconst toast = ({ ...props }: Toast) => {\n const id = genId();\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: ActionTypes.UPDATE_TOAST,\n toast: { ...props, id },\n });\n const dismiss = () =>\n dispatch({ type: ActionTypes.DISMISS_TOAST, toastId: id });\n\n dispatch({\n type: ActionTypes.ADD_TOAST,\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n },\n },\n });\n\n return {\n id: id,\n dismiss,\n update,\n };\n};\n\n/\n React hook for managing toast notifications.\n \n Provides access to the global toast state and functions for creating and\n * managing toast notifications. This hook connects components to the toast\n * system and ensures reactive updates when toasts change.\n \n ## Features\n * - State Synchronization: Automatically updates when toast state changes\n * - Toast Creation: Provides the `toast()` function for creating notifications\n * - Batch Dismissal: Can dismiss all toasts or specific toasts by ID\n * - Memory Management: Handles proper cleanup of listeners\n \n ## Return Value\n * - `toasts`: Array of current toast objects\n * - `toast()`: Function to create new toast notifications\n * - `dismiss()`: Function to dismiss toasts (all or by ID)\n \n @returns Toast state and control functions\n \n @example\n * ```tsx\n * function NotificationButton() {\n * const { toast, toasts, dismiss } = useToast();\n \n const showSuccess = () => {\n * toast({\n * title: 'Success!',\n * description: 'Operation completed successfully.',\n * variant: 'success'\n * });\n * };\n \n const clearAll = () => {\n * dismiss(); // Dismisses all toasts\n * };\n \n return (\n * <div>\n * <button onClick={showSuccess}>Show Success</button>\n * <button onClick={clearAll}>Clear All ({toasts.length})</button>\n * </div>\n * );\n * }\n \n // Usage in a form component\n * function ContactForm() {\n * const { toast } = useToast();\n \n const handleSubmit = async (data) => {\n * try {\n * await submitForm(data);\n * toast({\n * title: 'Form Submitted',\n * description: 'We\\'ll get back to you soon!',\n * variant: 'success'\n * });\n * } catch (error) {\n * toast({\n * title: 'Submission Failed',\n * description: 'Please check your connection and try again.',\n * variant: 'error',\n * action: <ToastAction altText=\"Retry\">Retry</ToastAction>\n * });\n * }\n * };\n \n // ... form JSX\n * }\n * ```\n \n ## Usage Notes\n * - Must be used within a component tree that includes `<Toaster />`\n * - Toast state is global - changes affect all components using this hook\n * - Toasts are automatically cleaned up after the configured delay\n * - Consider UX best practices: don't overwhelm users with too many toasts\n */\nconst useToast = () => {\n const [state, setState] = useState<State>(memoryState);\n\n useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) =>\n dispatch({ type: ActionTypes.DISMISS_TOAST, toastId }),\n };\n};\n\nexport { toast, useToast };\n"],"mappings":"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"}
1	+ {"version":3,"file":"useToast.mjs","names":["toast","props"],"sources":["../../../../src/components/Toaster/useToast.tsx"],"sourcesContent":["'use client';\n\nimport { type ReactNode, useEffect, useState } from 'react';\nimport type { ToastActionElement, ToastProps } from './Toast';\n\n/*\n Maximum number of toasts that can be displayed simultaneously.\n * Prevents UI overflow and maintains clean notification experience.\n /\nconst TOAST_LIMIT = 1;\n\n/\n Delay before automatically removing dismissed toasts from memory.\n * Set to 15 minutes (900,000ms) to allow for potential undo actions.\n /\nconst TOAST_REMOVE_DELAY = 15 60 * 1000; // 15 seconds\n\n/*\n Extended toast configuration with additional properties for the toast system.\n \n Combines base ToastProps with specific fields needed for toast management\n * including unique identification and content elements.\n \n @example\n * ```tsx\n * const toast: ToasterToast = {\n * id: '1',\n * variant: 'success',\n * title: 'Success!',\n * description: 'Your action completed successfully.',\n * action: <ToastAction altText=\"View details\">View</ToastAction>\n * };\n * ```\n /\ntype ToasterToast = ToastProps & {\n /* Unique identifier for the toast instance /\n id: string;\n /* Optional title text or React element /\n title?: ReactNode;\n /* Optional description text or React element /\n description?: ReactNode;\n /* Optional action button element /\n action?: ToastActionElement;\n};\n\n/\n Action types for toast state management using reducer pattern.\n \n Defines all possible actions that can be performed on the toast state,\n * enabling predictable state updates and better debugging.\n /\nenum ActionTypes {\n /* Add a new toast to the display queue /\n ADD_TOAST = 'ADD_TOAST',\n /* Update properties of an existing toast /\n UPDATE_TOAST = 'UPDATE_TOAST',\n /* Mark a toast as dismissed (triggers exit animation) /\n DISMISS_TOAST = 'DISMISS_TOAST',\n /* Completely remove a toast from memory /\n REMOVE_TOAST = 'REMOVE_TOAST',\n}\n\nlet count = 0;\n\nconst genId = () => {\n count = (count + 1) % Number.MAX_SAFE_INTEGER;\n return count.toString();\n};\n\ntype Action =\n \| {\n type: ActionTypes.ADD_TOAST;\n toast: ToasterToast;\n }\n \| {\n type: ActionTypes.UPDATE_TOAST;\n toast: Partial<ToasterToast>;\n }\n \| {\n type: ActionTypes.DISMISS_TOAST;\n toastId?: ToasterToast['id'];\n }\n \| {\n type: ActionTypes.REMOVE_TOAST;\n toastId?: ToasterToast['id'];\n };\n\ntype State = {\n toasts: ToasterToast[];\n};\n\nconst toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({\n type: ActionTypes.REMOVE_TOAST,\n toastId: toastId,\n });\n }, TOAST_REMOVE_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\n/\n Toast state reducer function that handles all toast state transitions.\n \n Implements predictable state updates using the reducer pattern, ensuring\n * consistent behavior across all toast operations.\n \n ## State Management\n * - ADD_TOAST: Adds new toast and enforces limit by removing excess toasts\n * - UPDATE_TOAST: Updates existing toast properties while preserving identity\n * - DISMISS_TOAST: Marks toasts as closed and schedules removal\n * - REMOVE_TOAST: Permanently removes toasts from state\n \n ## Side Effects\n * The DISMISS_TOAST action includes side effects for scheduling toast removal,\n * which could be extracted but is kept here for simplicity.\n \n @param state - Current toast state\n * @param action - Action to perform on the state\n * @returns Updated toast state\n \n @example\n * ```tsx\n * // Add a new toast\n * const newState = reducer(state, {\n * type: ActionTypes.ADD_TOAST,\n * toast: { id: '1', title: 'Hello', variant: 'default' }\n * });\n \n // Dismiss a specific toast\n * const dismissedState = reducer(state, {\n * type: ActionTypes.DISMISS_TOAST,\n * toastId: '1'\n * });\n * ```\n /\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionTypes.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionTypes.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionTypes.DISMISS_TOAST: {\n const { toastId } = action;\n\n // ! Side effects ! - This could be extracted into a dismissToast() action,\n // but I'll keep it here for simplicity\n if (toastId) {\n addToRemoveQueue(toastId);\n } else {\n state.toasts.forEach((toast) => {\n addToRemoveQueue(toast.id);\n });\n }\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId \|\| toastId === undefined\n ? {\n ...t,\n open: false,\n }\n : t\n ),\n };\n }\n case ActionTypes.REMOVE_TOAST:\n if (action.toastId === undefined) {\n return {\n ...state,\n toasts: [],\n };\n }\n return {\n ...state,\n toasts: state.toasts.filter((t) => t.id !== action.toastId),\n };\n }\n};\n\nconst listeners: ((state: State) => void)[] = [];\n\nlet memoryState: State = { toasts: [] };\n\nconst dispatch = (action: Action) => {\n memoryState = reducer(memoryState, action);\n listeners.forEach((listener) => {\n listener(memoryState);\n });\n};\n\n/\n Toast configuration type for creating new toasts.\n * Omits the 'id' field as it's automatically generated.\n /\ntype Toast = Omit<ToasterToast, 'id'>;\n\n/\n Creates and displays a new toast notification.\n \n This is the primary function for showing toast notifications to users.\n * It automatically generates unique IDs, handles state updates, and provides\n * control functions for managing the toast lifecycle.\n \n ## Features\n * - Automatic ID Generation: Each toast gets a unique identifier\n * - State Management: Integrates with global toast state\n * - Lifecycle Control: Returns functions to update or dismiss the toast\n * - Auto-dismiss: Automatically closes when user dismisses\n \n ## Return Value\n * Returns an object with control functions:\n * - `id`: Unique identifier for the toast\n * - `dismiss()`: Function to manually dismiss the toast\n * - `update()`: Function to update toast properties\n \n @param props - Toast configuration (title, description, variant, etc.)\n * @returns Object with toast ID and control functions\n \n @example\n * ```tsx\n * // Basic success toast\n * const { dismiss } = toast({\n * title: 'Success!',\n * description: 'Your file was uploaded successfully.',\n * variant: 'success'\n * });\n \n // Error toast with retry action\n * const errorToast = toast({\n * title: 'Upload Failed',\n * description: 'Could not upload file. Please try again.',\n * variant: 'error',\n * action: <ToastAction altText=\"Retry upload\">Retry</ToastAction>\n * });\n \n // Update toast content dynamically\n * errorToast.update({\n * title: 'Retrying...',\n * description: 'Please wait while we retry the upload.',\n * variant: 'default'\n * });\n \n // Manually dismiss toast\n * setTimeout(() => errorToast.dismiss(), 5000);\n * ```\n /\nconst toast = ({ ...props }: Toast) => {\n const id = genId();\n\n const update = (props: ToasterToast) =>\n dispatch({\n type: ActionTypes.UPDATE_TOAST,\n toast: { ...props, id },\n });\n const dismiss = () =>\n dispatch({ type: ActionTypes.DISMISS_TOAST, toastId: id });\n\n dispatch({\n type: ActionTypes.ADD_TOAST,\n toast: {\n ...props,\n id,\n open: true,\n onOpenChange: (open) => {\n if (!open) dismiss();\n },\n },\n });\n\n return {\n id: id,\n dismiss,\n update,\n };\n};\n\n/\n React hook for managing toast notifications.\n \n Provides access to the global toast state and functions for creating and\n * managing toast notifications. This hook connects components to the toast\n * system and ensures reactive updates when toasts change.\n \n ## Features\n * - State Synchronization: Automatically updates when toast state changes\n * - Toast Creation: Provides the `toast()` function for creating notifications\n * - Batch Dismissal: Can dismiss all toasts or specific toasts by ID\n * - Memory Management: Handles proper cleanup of listeners\n \n ## Return Value\n * - `toasts`: Array of current toast objects\n * - `toast()`: Function to create new toast notifications\n * - `dismiss()`: Function to dismiss toasts (all or by ID)\n \n @returns Toast state and control functions\n \n @example\n * ```tsx\n * function NotificationButton() {\n * const { toast, toasts, dismiss } = useToast();\n \n const showSuccess = () => {\n * toast({\n * title: 'Success!',\n * description: 'Operation completed successfully.',\n * variant: 'success'\n * });\n * };\n \n const clearAll = () => {\n * dismiss(); // Dismisses all toasts\n * };\n \n return (\n * <div>\n * <button onClick={showSuccess}>Show Success</button>\n * <button onClick={clearAll}>Clear All ({toasts.length})</button>\n * </div>\n * );\n * }\n \n // Usage in a form component\n * function ContactForm() {\n * const { toast } = useToast();\n \n const handleSubmit = async (data) => {\n * try {\n * await submitForm(data);\n * toast({\n * title: 'Form Submitted',\n * description: 'We\\'ll get back to you soon!',\n * variant: 'success'\n * });\n * } catch (error) {\n * toast({\n * title: 'Submission Failed',\n * description: 'Please check your connection and try again.',\n * variant: 'error',\n * action: <ToastAction altText=\"Retry\">Retry</ToastAction>\n * });\n * }\n * };\n \n // ... form JSX\n * }\n * ```\n \n ## Usage Notes\n * - Must be used within a component tree that includes `<Toaster />`\n * - Toast state is global - changes affect all components using this hook\n * - Toasts are automatically cleaned up after the configured delay\n * - Consider UX best practices: don't overwhelm users with too many toasts\n */\nconst useToast = () => {\n const [state, setState] = useState<State>(memoryState);\n\n useEffect(() => {\n listeners.push(setState);\n return () => {\n const index = listeners.indexOf(setState);\n if (index > -1) {\n listeners.splice(index, 1);\n }\n };\n }, [state]);\n\n return {\n ...state,\n toast,\n dismiss: (toastId?: string) =>\n dispatch({ type: ActionTypes.DISMISS_TOAST, toastId }),\n };\n};\n\nexport { toast, useToast };\n"],"mappings":"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"}

package/dist/esm/components/WithResizer/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["WithResizer: FC<PropsWithChildren<WithResizerProps>>"],"sources":["../../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport React, {\n type FC,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\n/*\n Props for the WithResizer component.\n \n Defines the configuration for a resizable container with drag-based width adjustment.\n \n @example\n * ```tsx\n * // Basic resizable container\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={600}>\n * <div className=\"p-4\">Resizable content</div>\n * </WithResizer>\n \n // Sidebar with resizing\n * <WithResizer\n * initialWidth={250}\n * minWidth={180}\n * maxWidth={400}\n * >\n * <nav className=\"h-full p-4\">\n * <SidebarContent />\n * </nav>\n * </WithResizer>\n \n // Panel with unlimited growth\n * <WithResizer initialWidth={400} minWidth={300}>\n * <div className=\"h-full overflow-auto\">\n * <PanelContent />\n * </div>\n * </WithResizer>\n * ```\n /\ntype WithResizerProps = {\n /* Initial width of the resizable container in pixels /\n initialWidth: number;\n /* Maximum allowed width in pixels (optional, no limit if not specified) /\n maxWidth?: number;\n /* Minimum allowed width in pixels /\n minWidth?: number;\n /* Position of the resize handle (default: 'right') /\n handlePosition?: 'left' \| 'right';\n};\n\n/\n WithResizer Component\n \n A flexible container component that allows users to dynamically resize its width\n * through mouse or touch drag interactions. Perfect for creating adjustable panels,\n * sidebars, and split-pane layouts.\n \n ## Features\n * - Mouse & Touch Support: Works with both mouse drag and touch interactions\n * - Constraint Enforcement: Respects minimum and maximum width boundaries\n * - Visual Feedback: Clear resize handle with hover and active states\n * - Smooth Interactions: Passive event listeners for optimal performance\n * - Accessibility: ARIA slider role with proper value announcements\n * - Responsive Design: Adapts to different screen sizes and containers\n \n ## Technical Implementation\n * - Event Handling: Uses `useCallback` for optimal performance\n * - Boundary Calculation: Real-time width calculation based on mouse/touch position\n * - State Management: Tracks resizing state for visual feedback\n * - Memory Management: Proper cleanup of global event listeners\n * - Touch Events: Full support for mobile touch interactions\n \n ## Visual Design\n * - Resize Handle: Rounded handle positioned on the right border\n * - Border Indicator: Visual border showing resizable edge\n * - State Feedback: Different colors for normal, hover, and active states\n * - Dark Mode: Full support with appropriate color scheme\n * - Smooth Transitions: CSS transitions for visual polish\n \n ## Use Cases\n * - Application Sidebars: Collapsible navigation and tool panels\n * - Content Panels: Adjustable content areas in complex layouts\n * - Split Panes: Dividing screen space between multiple content areas\n * - Inspector Panels: Debugging tools and property inspectors\n * - File Explorers: Tree views with adjustable column widths\n * - Dashboard Widgets: Customizable widget sizes for dashboards\n \n ## Accessibility Features\n * - ARIA Slider: Proper slider role for screen readers\n * - Value Announcements: Current, minimum, and maximum values announced\n * - Keyboard Focus: Focusable with tab navigation\n * - Clear Affordances: Visual indicators for interactive elements\n \n @example\n * ```tsx\n * // Application sidebar with resizing\n * const [sidebarWidth, setSidebarWidth] = useState(250);\n \n <div className=\"flex h-screen\">\n * <WithResizer\n * initialWidth={sidebarWidth}\n * minWidth={200}\n * maxWidth={400}\n * >\n * <aside className=\"h-full bg-gray-100 p-4\">\n * <nav>\n * <NavItems />\n * </nav>\n * </aside>\n * </WithResizer>\n \n <main className=\"flex-1 p-6\">\n * <MainContent />\n * </main>\n * </div>\n \n // Developer tools panel\n * <WithResizer\n * initialWidth={350}\n * minWidth={250}\n * maxWidth={600}\n * >\n * <div className=\"h-full flex flex-col\">\n * <div className=\"flex-1 overflow-auto p-4\">\n * <InspectorContent />\n * </div>\n * <div className=\"border-t p-2\">\n * <Controls />\n * </div>\n * </div>\n * </WithResizer>\n \n // Multi-column layout\n * <div className=\"flex h-full\">\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={500}>\n * <FileExplorer />\n * </WithResizer>\n \n <WithResizer initialWidth={400} minWidth={300}>\n * <CodeEditor />\n * </WithResizer>\n \n <div className=\"flex-1 min-w-0\">\n * <OutputPanel />\n * </div>\n * </div>\n * ```\n \n ## Performance Considerations\n * - Uses passive event listeners to prevent scroll blocking\n * - Optimized with `useCallback` to prevent unnecessary re-renders\n * - Efficient boundary calculations using `getBoundingClientRect`\n * - Minimal DOM manipulation for smooth drag interactions\n \n ## Browser Support\n * - Modern browsers with support for touch events\n * - Graceful degradation for older browsers\n * - Mobile-first touch interaction handling\n /\nexport const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({\n initialWidth,\n maxWidth,\n minWidth = 0,\n handlePosition = 'right',\n children,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [width, setWidth] = useState(initialWidth);\n\n const resizeState = useRef({\n startX: 0,\n startWidth: 0,\n factor: 1,\n });\n\n // Handler to resize the div\n const resize = useCallback(\n (mouseMoveEvent: MouseEvent \| TouchEvent) => {\n if (resizeState.current.startWidth === 0) return;\n\n let clientX = 0;\n if (mouseMoveEvent instanceof MouseEvent) {\n clientX = mouseMoveEvent.clientX;\n } else if (\n typeof TouchEvent !== 'undefined' &&\n mouseMoveEvent instanceof TouchEvent\n ) {\n clientX = mouseMoveEvent.touches[0].clientX;\n }\n\n const { startX, startWidth, factor } = resizeState.current;\n const delta = (clientX - startX) / factor;\n // Invert delta for left handle (moving left decreases width, moving right increases width)\n const adjustedDelta = handlePosition === 'left' ? -delta : delta;\n const newWidth = startWidth + adjustedDelta;\n\n const constrainedWidth = Math.max(\n Math.min(newWidth, maxWidth ?? Infinity),\n minWidth\n );\n\n setWidth(constrainedWidth);\n },\n [maxWidth, minWidth, handlePosition]\n );\n\n // Handler to stop resizing\n const stopResizing = useCallback(() => {\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n window.removeEventListener('mousemove', resize);\n window.removeEventListener('mouseup', stopResizing);\n window.removeEventListener('touchmove', resize);\n window.removeEventListener('touchend', stopResizing);\n }, [resize]);\n\n // Handler to start resizing\n const startResizing = useCallback(\n (\n mouseDownEvent:\n \| React.MouseEvent<HTMLDivElement>\n \| React.TouchEvent<HTMLDivElement>\n ) => {\n mouseDownEvent.preventDefault();\n const container = containerRef.current;\n\n if (!container) return;\n\n const { width: rectWidth } = container.getBoundingClientRect();\n const offsetWidth = container.offsetWidth;\n const factor = offsetWidth > 0 ? rectWidth / offsetWidth : 1;\n\n let clientX = 0;\n if ('touches' in mouseDownEvent) {\n clientX = mouseDownEvent.touches[0].clientX;\n } else {\n clientX = mouseDownEvent.clientX;\n }\n\n resizeState.current = {\n startX: clientX,\n startWidth: offsetWidth,\n factor,\n };\n\n document.body.style.cursor = 'ew-resize';\n document.body.style.userSelect = 'none';\n\n window.addEventListener('mousemove', resize, { passive: true });\n window.addEventListener('mouseup', stopResizing);\n window.addEventListener('touchmove', resize, { passive: true });\n window.addEventListener('touchend', stopResizing);\n },\n [resize, stopResizing]\n );\n\n useEffect(() => {\n return () => {\n window.removeEventListener('mousemove', resize);\n window.removeEventListener('mouseup', stopResizing);\n window.removeEventListener('touchmove', resize);\n window.removeEventListener('touchend', stopResizing);\n };\n }, [resize, stopResizing]);\n\n return (\n <div\n className={cn(\n 'relative h-full w-full max-w-[80%] shrink-0 cursor-ew-resize border-neutral-200 transition dark:border-neutral-950',\n handlePosition === 'right'\n ? [\n 'border-r-[2px]',\n 'after:absolute after:top-1/2 after:right-0 after:block after:h-10 after:w-2 after:translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n ]\n : [\n 'border-l-[2px]',\n 'after:absolute after:top-1/2 after:left-0 after:block after:h-10 after:w-2 after:-translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n ],\n 'active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600',\n minWidth && `min-w-[${minWidth}px]`,\n maxWidth && `max-w-[${maxWidth}px]`\n )}\n style={{\n width: `${width}px`,\n }}\n ref={containerRef}\n onMouseDown={startResizing}\n onTouchStart={startResizing}\n aria-valuemin={minWidth}\n aria-valuemax={maxWidth}\n aria-valuenow={width}\n aria-label=\"Resizable component\"\n role=\"slider\"\n tabIndex={0}\n >\n {/ biome-ignore lint/a11y/noStaticElementInteractions: This div stops event propagation to prevent content clicks from triggering resize */}\n <div\n role=\"presentation\"\n className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n onMouseDown={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmKA,MAAaA,eAAwD,EACnE,cACA,UACA,WAAW,GACX,iBAAiB,SACjB,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAEhD,MAAM,cAAc,OAAO;EACzB,QAAQ;EACR,YAAY;EACZ,QAAQ;EACT,CAAC;CAGF,MAAM,SAAS,aACZ,mBAA4C;AAC3C,MAAI,YAAY,QAAQ,eAAe,EAAG;EAE1C,IAAI,UAAU;AACd,MAAI,0BAA0B,WAC5B,WAAU,eAAe;WAEzB,OAAO,eAAe,eACtB,0BAA0B,WAE1B,WAAU,eAAe,QAAQ,GAAG;EAGtC,MAAM,EAAE,QAAQ,YAAY,WAAW,YAAY;EACnD,MAAM,SAAS,UAAU,UAAU;EAGnC,MAAM,WAAW,cADK,mBAAmB,SAAS,CAAC,QAAQ;AAQ3D,WALyB,KAAK,IAC5B,KAAK,IAAI,UAAU,YAAY,SAAS,EACxC,SACD,CAEyB;IAE5B;EAAC;EAAU;EAAU;EAAe,CACrC;CAGD,MAAM,eAAe,kBAAkB;AACrC,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,KAAK,MAAM,aAAa;AACjC,SAAO,oBAAoB,aAAa,OAAO;AAC/C,SAAO,oBAAoB,WAAW,aAAa;AACnD,SAAO,oBAAoB,aAAa,OAAO;AAC/C,SAAO,oBAAoB,YAAY,aAAa;IACnD,CAAC,OAAO,CAAC;CAGZ,MAAM,gBAAgB,aAElB,mBAGG;AACH,iBAAe,gBAAgB;EAC/B,MAAM,YAAY,aAAa;AAE/B,MAAI,CAAC,UAAW;EAEhB,MAAM,EAAE,OAAO,cAAc,UAAU,uBAAuB;EAC9D,MAAM,cAAc,UAAU;EAC9B,MAAM,SAAS,cAAc,IAAI,YAAY,cAAc;EAE3D,IAAI,UAAU;AACd,MAAI,aAAa,eACf,WAAU,eAAe,QAAQ,GAAG;MAEpC,WAAU,eAAe;AAG3B,cAAY,UAAU;GACpB,QAAQ;GACR,YAAY;GACZ;GACD;AAED,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,KAAK,MAAM,aAAa;AAEjC,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,WAAW,aAAa;AAChD,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,YAAY,aAAa;IAEnD,CAAC,QAAQ,aAAa,CACvB;AAED,iBAAgB;AACd,eAAa;AACX,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,WAAW,aAAa;AACnD,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,YAAY,aAAa;;IAErD,CAAC,QAAQ,aAAa,CAAC;AAE1B,QACE,oBAAC;EACC,WAAW,GACT,sHACA,mBAAmB,UACf,CACE,kBACA,0QACD,GACD,CACE,kBACA,0QACD,EACL,yHACA,YAAY,UAAU,SAAS,MAC/B,YAAY,UAAU,SAAS,KAChC;EACD,OAAO,EACL,OAAO,GAAG,MAAM,KACjB;EACD,KAAK;EACL,aAAa;EACb,cAAc;EACd,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,MAAK;EACL,UAAU;YAGV,oBAAC;GACC,MAAK;GACL,WAAU;GACV,cAAc,MAAM,EAAE,iBAAiB;GACvC,eAAe,MAAM,EAAE,iBAAiB;GAEvC;IACG;GACF"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/WithResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport React, {\n type FC,\n type PropsWithChildren,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\n/*\n Props for the WithResizer component.\n \n Defines the configuration for a resizable container with drag-based width adjustment.\n \n @example\n * ```tsx\n * // Basic resizable container\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={600}>\n * <div className=\"p-4\">Resizable content</div>\n * </WithResizer>\n \n // Sidebar with resizing\n * <WithResizer\n * initialWidth={250}\n * minWidth={180}\n * maxWidth={400}\n * >\n * <nav className=\"h-full p-4\">\n * <SidebarContent />\n * </nav>\n * </WithResizer>\n \n // Panel with unlimited growth\n * <WithResizer initialWidth={400} minWidth={300}>\n * <div className=\"h-full overflow-auto\">\n * <PanelContent />\n * </div>\n * </WithResizer>\n * ```\n /\ntype WithResizerProps = {\n /* Initial width of the resizable container in pixels /\n initialWidth: number;\n /* Maximum allowed width in pixels (optional, no limit if not specified) /\n maxWidth?: number;\n /* Minimum allowed width in pixels /\n minWidth?: number;\n /* Position of the resize handle (default: 'right') /\n handlePosition?: 'left' \| 'right';\n};\n\n/\n WithResizer Component\n \n A flexible container component that allows users to dynamically resize its width\n * through mouse or touch drag interactions. Perfect for creating adjustable panels,\n * sidebars, and split-pane layouts.\n \n ## Features\n * - Mouse & Touch Support: Works with both mouse drag and touch interactions\n * - Constraint Enforcement: Respects minimum and maximum width boundaries\n * - Visual Feedback: Clear resize handle with hover and active states\n * - Smooth Interactions: Passive event listeners for optimal performance\n * - Accessibility: ARIA slider role with proper value announcements\n * - Responsive Design: Adapts to different screen sizes and containers\n \n ## Technical Implementation\n * - Event Handling: Uses `useCallback` for optimal performance\n * - Boundary Calculation: Real-time width calculation based on mouse/touch position\n * - State Management: Tracks resizing state for visual feedback\n * - Memory Management: Proper cleanup of global event listeners\n * - Touch Events: Full support for mobile touch interactions\n \n ## Visual Design\n * - Resize Handle: Rounded handle positioned on the right border\n * - Border Indicator: Visual border showing resizable edge\n * - State Feedback: Different colors for normal, hover, and active states\n * - Dark Mode: Full support with appropriate color scheme\n * - Smooth Transitions: CSS transitions for visual polish\n \n ## Use Cases\n * - Application Sidebars: Collapsible navigation and tool panels\n * - Content Panels: Adjustable content areas in complex layouts\n * - Split Panes: Dividing screen space between multiple content areas\n * - Inspector Panels: Debugging tools and property inspectors\n * - File Explorers: Tree views with adjustable column widths\n * - Dashboard Widgets: Customizable widget sizes for dashboards\n \n ## Accessibility Features\n * - ARIA Slider: Proper slider role for screen readers\n * - Value Announcements: Current, minimum, and maximum values announced\n * - Keyboard Focus: Focusable with tab navigation\n * - Clear Affordances: Visual indicators for interactive elements\n \n @example\n * ```tsx\n * // Application sidebar with resizing\n * const [sidebarWidth, setSidebarWidth] = useState(250);\n \n <div className=\"flex h-screen\">\n * <WithResizer\n * initialWidth={sidebarWidth}\n * minWidth={200}\n * maxWidth={400}\n * >\n * <aside className=\"h-full bg-gray-100 p-4\">\n * <nav>\n * <NavItems />\n * </nav>\n * </aside>\n * </WithResizer>\n \n <main className=\"flex-1 p-6\">\n * <MainContent />\n * </main>\n * </div>\n \n // Developer tools panel\n * <WithResizer\n * initialWidth={350}\n * minWidth={250}\n * maxWidth={600}\n * >\n * <div className=\"h-full flex flex-col\">\n * <div className=\"flex-1 overflow-auto p-4\">\n * <InspectorContent />\n * </div>\n * <div className=\"border-t p-2\">\n * <Controls />\n * </div>\n * </div>\n * </WithResizer>\n \n // Multi-column layout\n * <div className=\"flex h-full\">\n * <WithResizer initialWidth={300} minWidth={200} maxWidth={500}>\n * <FileExplorer />\n * </WithResizer>\n \n <WithResizer initialWidth={400} minWidth={300}>\n * <CodeEditor />\n * </WithResizer>\n \n <div className=\"flex-1 min-w-0\">\n * <OutputPanel />\n * </div>\n * </div>\n * ```\n \n ## Performance Considerations\n * - Uses passive event listeners to prevent scroll blocking\n * - Optimized with `useCallback` to prevent unnecessary re-renders\n * - Efficient boundary calculations using `getBoundingClientRect`\n * - Minimal DOM manipulation for smooth drag interactions\n \n ## Browser Support\n * - Modern browsers with support for touch events\n * - Graceful degradation for older browsers\n * - Mobile-first touch interaction handling\n /\nexport const WithResizer: FC<PropsWithChildren<WithResizerProps>> = ({\n initialWidth,\n maxWidth,\n minWidth = 0,\n handlePosition = 'right',\n children,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const [width, setWidth] = useState(initialWidth);\n\n const resizeState = useRef({\n startX: 0,\n startWidth: 0,\n factor: 1,\n });\n\n // Handler to resize the div\n const resize = useCallback(\n (mouseMoveEvent: MouseEvent \| TouchEvent) => {\n if (resizeState.current.startWidth === 0) return;\n\n let clientX = 0;\n if (mouseMoveEvent instanceof MouseEvent) {\n clientX = mouseMoveEvent.clientX;\n } else if (\n typeof TouchEvent !== 'undefined' &&\n mouseMoveEvent instanceof TouchEvent\n ) {\n clientX = mouseMoveEvent.touches[0].clientX;\n }\n\n const { startX, startWidth, factor } = resizeState.current;\n const delta = (clientX - startX) / factor;\n // Invert delta for left handle (moving left decreases width, moving right increases width)\n const adjustedDelta = handlePosition === 'left' ? -delta : delta;\n const newWidth = startWidth + adjustedDelta;\n\n const constrainedWidth = Math.max(\n Math.min(newWidth, maxWidth ?? Infinity),\n minWidth\n );\n\n setWidth(constrainedWidth);\n },\n [maxWidth, minWidth, handlePosition]\n );\n\n // Handler to stop resizing\n const stopResizing = useCallback(() => {\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n window.removeEventListener('mousemove', resize);\n window.removeEventListener('mouseup', stopResizing);\n window.removeEventListener('touchmove', resize);\n window.removeEventListener('touchend', stopResizing);\n }, [resize]);\n\n // Handler to start resizing\n const startResizing = useCallback(\n (\n mouseDownEvent:\n \| React.MouseEvent<HTMLDivElement>\n \| React.TouchEvent<HTMLDivElement>\n ) => {\n mouseDownEvent.preventDefault();\n const container = containerRef.current;\n\n if (!container) return;\n\n const { width: rectWidth } = container.getBoundingClientRect();\n const offsetWidth = container.offsetWidth;\n const factor = offsetWidth > 0 ? rectWidth / offsetWidth : 1;\n\n let clientX = 0;\n if ('touches' in mouseDownEvent) {\n clientX = mouseDownEvent.touches[0].clientX;\n } else {\n clientX = mouseDownEvent.clientX;\n }\n\n resizeState.current = {\n startX: clientX,\n startWidth: offsetWidth,\n factor,\n };\n\n document.body.style.cursor = 'ew-resize';\n document.body.style.userSelect = 'none';\n\n window.addEventListener('mousemove', resize, { passive: true });\n window.addEventListener('mouseup', stopResizing);\n window.addEventListener('touchmove', resize, { passive: true });\n window.addEventListener('touchend', stopResizing);\n },\n [resize, stopResizing]\n );\n\n useEffect(() => {\n return () => {\n window.removeEventListener('mousemove', resize);\n window.removeEventListener('mouseup', stopResizing);\n window.removeEventListener('touchmove', resize);\n window.removeEventListener('touchend', stopResizing);\n };\n }, [resize, stopResizing]);\n\n return (\n <div\n className={cn(\n 'relative h-full w-full max-w-[80%] shrink-0 cursor-ew-resize border-neutral-200 transition dark:border-neutral-950',\n handlePosition === 'right'\n ? [\n 'border-r-[2px]',\n 'after:absolute after:top-1/2 after:right-0 after:block after:h-10 after:w-2 after:translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n ]\n : [\n 'border-l-[2px]',\n 'after:absolute after:top-1/2 after:left-0 after:block after:h-10 after:w-2 after:-translate-x-1/2 after:-translate-y-1/2 after:transform after:cursor-ew-resize after:rounded-full after:bg-neutral-200 after:transition after:content-[\"\"] dark:after:bg-neutral-950',\n ],\n 'active:border-neutral-400 active:after:bg-neutral-400 dark:active:border-neutral-600 active:dark:after:bg-neutral-600',\n minWidth && `min-w-[${minWidth}px]`,\n maxWidth && `max-w-[${maxWidth}px]`\n )}\n style={{\n width: `${width}px`,\n }}\n ref={containerRef}\n onMouseDown={startResizing}\n onTouchStart={startResizing}\n aria-valuemin={minWidth}\n aria-valuemax={maxWidth}\n aria-valuenow={width}\n aria-label=\"Resizable component\"\n role=\"slider\"\n tabIndex={0}\n >\n {/ biome-ignore lint/a11y/noStaticElementInteractions: This div stops event propagation to prevent content clicks from triggering resize */}\n <div\n role=\"presentation\"\n className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n onMouseDown={(e) => e.stopPropagation()}\n onTouchStart={(e) => e.stopPropagation()}\n >\n {children}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmKA,MAAa,eAAwD,EACnE,cACA,UACA,WAAW,GACX,iBAAiB,SACjB,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAEhD,MAAM,cAAc,OAAO;EACzB,QAAQ;EACR,YAAY;EACZ,QAAQ;EACT,CAAC;CAGF,MAAM,SAAS,aACZ,mBAA4C;AAC3C,MAAI,YAAY,QAAQ,eAAe,EAAG;EAE1C,IAAI,UAAU;AACd,MAAI,0BAA0B,WAC5B,WAAU,eAAe;WAEzB,OAAO,eAAe,eACtB,0BAA0B,WAE1B,WAAU,eAAe,QAAQ,GAAG;EAGtC,MAAM,EAAE,QAAQ,YAAY,WAAW,YAAY;EACnD,MAAM,SAAS,UAAU,UAAU;EAGnC,MAAM,WAAW,cADK,mBAAmB,SAAS,CAAC,QAAQ;AAQ3D,WALyB,KAAK,IAC5B,KAAK,IAAI,UAAU,YAAY,SAAS,EACxC,SACD,CAEyB;IAE5B;EAAC;EAAU;EAAU;EAAe,CACrC;CAGD,MAAM,eAAe,kBAAkB;AACrC,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,KAAK,MAAM,aAAa;AACjC,SAAO,oBAAoB,aAAa,OAAO;AAC/C,SAAO,oBAAoB,WAAW,aAAa;AACnD,SAAO,oBAAoB,aAAa,OAAO;AAC/C,SAAO,oBAAoB,YAAY,aAAa;IACnD,CAAC,OAAO,CAAC;CAGZ,MAAM,gBAAgB,aAElB,mBAGG;AACH,iBAAe,gBAAgB;EAC/B,MAAM,YAAY,aAAa;AAE/B,MAAI,CAAC,UAAW;EAEhB,MAAM,EAAE,OAAO,cAAc,UAAU,uBAAuB;EAC9D,MAAM,cAAc,UAAU;EAC9B,MAAM,SAAS,cAAc,IAAI,YAAY,cAAc;EAE3D,IAAI,UAAU;AACd,MAAI,aAAa,eACf,WAAU,eAAe,QAAQ,GAAG;MAEpC,WAAU,eAAe;AAG3B,cAAY,UAAU;GACpB,QAAQ;GACR,YAAY;GACZ;GACD;AAED,WAAS,KAAK,MAAM,SAAS;AAC7B,WAAS,KAAK,MAAM,aAAa;AAEjC,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,WAAW,aAAa;AAChD,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,YAAY,aAAa;IAEnD,CAAC,QAAQ,aAAa,CACvB;AAED,iBAAgB;AACd,eAAa;AACX,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,WAAW,aAAa;AACnD,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,YAAY,aAAa;;IAErD,CAAC,QAAQ,aAAa,CAAC;AAE1B,QACE,oBAAC;EACC,WAAW,GACT,sHACA,mBAAmB,UACf,CACE,kBACA,0QACD,GACD,CACE,kBACA,0QACD,EACL,yHACA,YAAY,UAAU,SAAS,MAC/B,YAAY,UAAU,SAAS,KAChC;EACD,OAAO,EACL,OAAO,GAAG,MAAM,KACjB;EACD,KAAK;EACL,aAAa;EACb,cAAc;EACd,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,MAAK;EACL,UAAU;YAGV,oBAAC;GACC,MAAK;GACL,WAAU;GACV,cAAc,MAAM,EAAE,iBAAiB;GACvC,eAAe,MAAM,EAAE,iBAAiB;GAEvC;IACG;GACF"}