@intlayer/design-system 8.1.2 → 8.1.3

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

@@ -1,317 +1,2 @@
-import { cva } from "class-variance-authority";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/Tag/index.tsx
-/**
-* Enumeration for tag border radius sizes
-*
-* Controls the roundedness of tag corners, from sharp edges to fully rounded pills.
-*
-* @enum TagRoundedSize
-* @property NONE - 'none' - No border radius (sharp corners)
-* @property SM - 'sm' - Small border radius (2px)
-* @property MD - 'md' - Medium border radius (6px)
-* @property LG - 'lg' - Large border radius (8px)
-* @property XL - 'xl' - Extra large border radius (12px)
-* @property XXL - '2xl' - 2x large border radius (16px)
-* @property XXXL - '3xl' - 3x large border radius (24px)
-* @property FULL - 'full' - Fully rounded (50% border radius, pill shape)
-*
-* @example
-* ```tsx
-* // Sharp corners
-* <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>
-*
-* // Pill-shaped tag
-* <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>
-*
-* // Medium rounded corners
-* <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>
-* ```
-*/
-let TagRoundedSize = /* @__PURE__ */ function(TagRoundedSize) {
-	TagRoundedSize["NONE"] = "none";
-	TagRoundedSize["SM"] = "sm";
-	TagRoundedSize["MD"] = "md";
-	TagRoundedSize["LG"] = "lg";
-	TagRoundedSize["XL"] = "xl";
-	TagRoundedSize["XXL"] = "2xl";
-	TagRoundedSize["XXXL"] = "3xl";
-	TagRoundedSize["FULL"] = "full";
-	return TagRoundedSize;
-}({});
-/**
-* Enumeration for tag color themes
-*
-* Provides semantic color options for different tag purposes and meanings.
-* Each color includes background, border, and text color variations.
-*
-* @enum TagColor
-* @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items
-* @property ERROR - 'error' - Red theme for error states, warnings, or failed operations
-* @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices
-* @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content
-* @property TEXT - 'text' - Default text color theme for general purpose tags
-*
-* @example
-* ```tsx
-* // Status indicators
-* <Tag color={TagColor.SUCCESS}>Completed</Tag>
-* <Tag color={TagColor.ERROR}>Failed</Tag>
-* <Tag color={TagColor.WARNING}>Pending</Tag>
-*
-* // Category tags
-* <Tag color={TagColor.NEUTRAL}>Category</Tag>
-* <Tag color={TagColor.TEXT}>General</Tag>
-* ```
-*/
-let TagColor = /* @__PURE__ */ function(TagColor) {
-	TagColor["PRIMARY"] = "primary";
-	TagColor["SUCCESS"] = "success";
-	TagColor["ERROR"] = "error";
-	TagColor["WARNING"] = "warning";
-	TagColor["NEUTRAL"] = "neutral";
-	TagColor["TEXT"] = "text";
-	TagColor["BLUE"] = "blue";
-	TagColor["YELLOW"] = "yellow";
-	TagColor["GREEN"] = "green";
-	TagColor["RED"] = "red";
-	TagColor["ORANGE"] = "orange";
-	TagColor["PURPLE"] = "purple";
-	TagColor["PINK"] = "pink";
-	TagColor["BROWN"] = "brown";
-	TagColor["GRAY"] = "gray";
-	TagColor["BLACK"] = "black";
-	TagColor["WHITE"] = "white";
-	return TagColor;
-}({});
-/**
-* Enumeration for tag size variants
-*
-* Controls the overall size of tags including padding, font size, and border thickness.
-* Sizes are designed to maintain visual hierarchy and readability.
-*
-* @enum TagSize
-* @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)
-* @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)
-* @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size
-* @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)
-* @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)
-*
-* @example
-* ```tsx
-* // Different sizes for hierarchy
-* <Tag size={TagSize.XS}>Small detail</Tag>
-* <Tag size={TagSize.SM}>Minor category</Tag>
-* <Tag size={TagSize.MD}>Standard tag</Tag>
-* <Tag size={TagSize.LG}>Important label</Tag>
-* <Tag size={TagSize.XL}>Hero tag</Tag>
-* ```
-*/
-let TagSize = /* @__PURE__ */ function(TagSize) {
-	TagSize["XS"] = "xs";
-	TagSize["SM"] = "sm";
-	TagSize["MD"] = "md";
-	TagSize["LG"] = "lg";
-	TagSize["XL"] = "xl";
-	return TagSize;
-}({});
-/**
-* Enumeration for tag border visibility
-*
-* Controls whether a border is displayed around the tag.
-*
-* @enum TagBorder
-* @property NONE - 'none' - No border (default)
-* @property WITH - 'with' - Show border with 1.5px thickness
-*
-* @example
-* ```tsx
-* <Tag border={TagBorder.NONE}>Borderless</Tag>
-* <Tag border={TagBorder.WITH}>With Border</Tag>
-* ```
-*/
-let TagBorder = /* @__PURE__ */ function(TagBorder) {
-	TagBorder["NONE"] = "none";
-	TagBorder["WITH"] = "with";
-	return TagBorder;
-}({});
-/**
-* Enumeration for tag background visibility
-*
-* Controls the background styling of the tag.
-*
-* @enum TagBackground
-* @property NONE - 'none' - No background styling
-* @property WITH - 'with' - Apply background styling
-*
-* @example
-* ```tsx
-* <Tag background={TagBackground.NONE}>No Background</Tag>
-* <Tag background={TagBackground.WITH}>With Background</Tag>
-* ```
-*/
-let TagBackground = /* @__PURE__ */ function(TagBackground) {
-	TagBackground["NONE"] = "none";
-	TagBackground["WITH"] = "with";
-	return TagBackground;
-}({});
-const containerVariants = cva("w-fit backdrop-blur", {
-	variants: {
-		roundedSize: {
-			[`${TagRoundedSize.NONE}`]: "rounded-none",
-			[`${TagRoundedSize.SM}`]: "rounded-sm",
-			[`${TagRoundedSize.MD}`]: "rounded-md",
-			[`${TagRoundedSize.LG}`]: "rounded-lg",
-			[`${TagRoundedSize.XL}`]: "rounded-xl",
-			[`${TagRoundedSize.XXL}`]: "rounded-2xl",
-			[`${TagRoundedSize.XXXL}`]: "rounded-3xl",
-			[`${TagRoundedSize.FULL}`]: "rounded-full"
-		},
-		color: {
-			[`${TagColor.PRIMARY}`]: "border-primary bg-primary/10 text-primary",
-			[`${TagColor.SUCCESS}`]: "border-success bg-success/10 text-success",
-			[`${TagColor.ERROR}`]: "border-error bg-error/10 text-error",
-			[`${TagColor.WARNING}`]: "border-warning bg-warning/10 text-warning",
-			[`${TagColor.NEUTRAL}`]: "/10 border-neutral bg-neutral/10 text-neutral",
-			[`${TagColor.TEXT}`]: "border-text bg-text/10 text-text",
-			[`${TagColor.BLUE}`]: "border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300",
-			[`${TagColor.YELLOW}`]: "border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300",
-			[`${TagColor.GREEN}`]: "border-green-500 bg-green-500/10 text-green-500 dark:text-green-300",
-			[`${TagColor.RED}`]: "border-red-500 bg-red-500/10 text-red-500 dark:text-red-300",
-			[`${TagColor.ORANGE}`]: "border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300",
-			[`${TagColor.PURPLE}`]: "border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300",
-			[`${TagColor.PINK}`]: "border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300",
-			[`${TagColor.BROWN}`]: "border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300",
-			[`${TagColor.GRAY}`]: "border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300",
-			[`${TagColor.BLACK}`]: "border-black bg-black/10 text-black",
-			[`${TagColor.WHITE}`]: "border-white bg-white/10 text-white"
-		},
-		size: {
-			[`${TagSize.XS}`]: "border-[1.2px] px-2 py-0.5 text-xs",
-			[`${TagSize.SM}`]: "border-[1.3px] px-2 py-0.5 text-sm",
-			[`${TagSize.MD}`]: "border-2 px-2 py-1 text-base",
-			[`${TagSize.LG}`]: "border-2 px-3 py-2 text-lg",
-			[`${TagSize.XL}`]: "border-2 px-3 py-2 text-xl"
-		},
-		border: {
-			[`${TagBorder.NONE}`]: "border-none",
-			[`${TagBorder.WITH}`]: "border-[1.3px] border-text"
-		},
-		background: {
-			[`${TagBackground.NONE}`]: "bg-none",
-			[`${TagBackground.WITH}`]: ""
-		}
-	},
-	defaultVariants: {
-		roundedSize: TagRoundedSize.FULL,
-		border: TagBorder.NONE,
-		color: TagColor.TEXT,
-		size: TagSize.MD
-	}
-});
-/**
-* Tag component for displaying labels, categories, status indicators, and badges
-*
-* The Tag component is a versatile labeling element that supports multiple visual variants
-* for different use cases. It provides semantic color options, flexible sizing, and
-* customizable styling options for borders and backgrounds.
-*
-* ## Features
-* - **Semantic Colors**: Success, error, warning, neutral, and text color themes
-* - **Flexible Sizing**: Five size variants from extra small to extra large
-* - **Border Radius Options**: Eight rounding options from none to fully rounded
-* - **Border Control**: Optional borders for enhanced visual separation
-* - **Background Control**: Configurable background styling
-* - **Accessibility**: Proper HTML semantics and keyboard navigation support
-*
-* ## Use Cases
-* - **Status Indicators**: Show completion, error, or pending states
-* - **Category Labels**: Organize and categorize content
-* - **Badges**: Display counts, notifications, or achievements
-* - **Keywords**: Tag content with relevant keywords or topics
-* - **Metadata**: Show additional information like dates, authors, or types
-*
-* ## Design Principles
-* - Maintains readability across all size and color combinations
-* - Uses backdrop blur effect for subtle transparency
-* - Follows consistent spacing and typography scales
-* - Provides sufficient color contrast for accessibility
-*
-* @param {TagProps} props - The properties for the Tag component
-* @returns {JSX.Element} The rendered tag element
-*
-* @example
-* ```tsx
-* // Basic status tags
-* <Tag color={TagColor.SUCCESS}>Completed</Tag>
-* <Tag color={TagColor.ERROR}>Failed</Tag>
-* <Tag color={TagColor.WARNING}>In Progress</Tag>
-*
-* // Category tags with borders
-* <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>
-*   Technology
-* </Tag>
-* <Tag color={TagColor.TEXT} border={TagBorder.WITH}>
-*   Design
-* </Tag>
-*
-* // Size variations for hierarchy
-* <div className="flex items-center gap-2">
-*   <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>
-*   <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>
-*   <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>
-* </div>
-*
-* // Rounded variations
-* <div className="flex gap-2">
-*   <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>
-*   <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>
-*   <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>
-* </div>
-*
-* // Custom styled tag
-* <Tag
-*   color={TagColor.WARNING}
-*   size={TagSize.LG}
-*   border={TagBorder.WITH}
-*   roundedSize={TagRoundedSize.LG}
-*   className="font-bold uppercase tracking-wide"
-* >
-*   Custom Style
-* </Tag>
-*
-* // Interactive tags with click handlers
-* <Tag
-*   color={TagColor.SUCCESS}
-*   onClick={() => console.log('Tag clicked')}
-*   className="cursor-pointer hover:opacity-80 transition-opacity"
-* >
-*   Clickable Tag
-* </Tag>
-* ```
-*
-* @see {@link TagColor} - Available color theme options
-* @see {@link TagSize} - Available size variants
-* @see {@link TagRoundedSize} - Available border radius options
-* @see {@link TagBorder} - Border visibility options
-* @see {@link TagBackground} - Background styling options
-*/
-const Tag = ({ children, color, roundedSize, size, border, background, className, ...props }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: containerVariants({
-			color,
-			roundedSize,
-			size,
-			border,
-			background,
-			className
-		}),
-		...props,
-		children
-	});
-};
-
-//#endregion
-export { Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize };
+import{cva as e}from"class-variance-authority";import{jsx as t}from"react/jsx-runtime";let n=function(e){return e.NONE=`none`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e.XXL=`2xl`,e.XXXL=`3xl`,e.FULL=`full`,e}({}),r=function(e){return e.PRIMARY=`primary`,e.SUCCESS=`success`,e.ERROR=`error`,e.WARNING=`warning`,e.NEUTRAL=`neutral`,e.TEXT=`text`,e.BLUE=`blue`,e.YELLOW=`yellow`,e.GREEN=`green`,e.RED=`red`,e.ORANGE=`orange`,e.PURPLE=`purple`,e.PINK=`pink`,e.BROWN=`brown`,e.GRAY=`gray`,e.BLACK=`black`,e.WHITE=`white`,e}({}),i=function(e){return e.XS=`xs`,e.SM=`sm`,e.MD=`md`,e.LG=`lg`,e.XL=`xl`,e}({}),a=function(e){return e.NONE=`none`,e.WITH=`with`,e}({}),o=function(e){return e.NONE=`none`,e.WITH=`with`,e}({});const s=e(`w-fit backdrop-blur`,{variants:{roundedSize:{[`${n.NONE}`]:`rounded-none`,[`${n.SM}`]:`rounded-sm`,[`${n.MD}`]:`rounded-md`,[`${n.LG}`]:`rounded-lg`,[`${n.XL}`]:`rounded-xl`,[`${n.XXL}`]:`rounded-2xl`,[`${n.XXXL}`]:`rounded-3xl`,[`${n.FULL}`]:`rounded-full`},color:{[`${r.PRIMARY}`]:`border-primary bg-primary/10 text-primary`,[`${r.SUCCESS}`]:`border-success bg-success/10 text-success`,[`${r.ERROR}`]:`border-error bg-error/10 text-error`,[`${r.WARNING}`]:`border-warning bg-warning/10 text-warning`,[`${r.NEUTRAL}`]:`/10 border-neutral bg-neutral/10 text-neutral`,[`${r.TEXT}`]:`border-text bg-text/10 text-text`,[`${r.BLUE}`]:`border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300`,[`${r.YELLOW}`]:`border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300`,[`${r.GREEN}`]:`border-green-500 bg-green-500/10 text-green-500 dark:text-green-300`,[`${r.RED}`]:`border-red-500 bg-red-500/10 text-red-500 dark:text-red-300`,[`${r.ORANGE}`]:`border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300`,[`${r.PURPLE}`]:`border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300`,[`${r.PINK}`]:`border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300`,[`${r.BROWN}`]:`border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300`,[`${r.GRAY}`]:`border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300`,[`${r.BLACK}`]:`border-black bg-black/10 text-black`,[`${r.WHITE}`]:`border-white bg-white/10 text-white`},size:{[`${i.XS}`]:`border-[1.2px] px-2 py-0.5 text-xs`,[`${i.SM}`]:`border-[1.3px] px-2 py-0.5 text-sm`,[`${i.MD}`]:`border-2 px-2 py-1 text-base`,[`${i.LG}`]:`border-2 px-3 py-2 text-lg`,[`${i.XL}`]:`border-2 px-3 py-2 text-xl`},border:{[`${a.NONE}`]:`border-none`,[`${a.WITH}`]:`border-[1.3px] border-text`},background:{[`${o.NONE}`]:`bg-none`,[`${o.WITH}`]:``}},defaultVariants:{roundedSize:n.FULL,border:a.NONE,color:r.TEXT,size:i.MD}}),c=({children:e,color:n,roundedSize:r,size:i,border:a,background:o,className:c,...l})=>t(`div`,{className:s({color:n,roundedSize:r,size:i,border:a,background:o,className:c}),...l,children:e});export{c as Tag,o as TagBackground,a as TagBorder,r as TagColor,n as TagRoundedSize,i as TagSize};
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +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,0DAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BF,IAAY,8CAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BF,IAAY,4CAAL;AACL;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;AAkBF,IAAY,gDAAL;AACL;AACA;;;;;;;;;;;;;;;;;;AAkBF,IAAY,wDAAL;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"}
+{"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":"uFAgEA,IAAY,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,IAAA,MACA,EAAA,KAAA,MACA,EAAA,KAAA,cA4BU,EAAA,SAAA,EAAL,OACL,GAAA,QAAA,UACA,EAAA,QAAA,UACA,EAAA,MAAA,QACA,EAAA,QAAA,UACA,EAAA,QAAA,UACA,EAAA,KAAA,OACA,EAAA,KAAA,OACA,EAAA,OAAA,SACA,EAAA,MAAA,QACA,EAAA,IAAA,MACA,EAAA,OAAA,SACA,EAAA,OAAA,SACA,EAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,KAAA,OACA,EAAA,MAAA,QACA,EAAA,MAAA,eA0BU,EAAA,SAAA,EAAL,OACL,GAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,YAkBU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,KAAA,cAkBU,EAAA,SAAA,EAAL,OACL,GAAA,KAAA,OACA,EAAA,KAAA,cAGF,MAAM,EAAoB,EAAI,sBAAuB,CACnD,SAAU,CACR,YAAa,EACV,GAAG,EAAe,QAAS,gBAC3B,GAAG,EAAe,MAAO,cACzB,GAAG,EAAe,MAAO,cACzB,GAAG,EAAe,MAAO,cACzB,GAAG,EAAe,MAAO,cACzB,GAAG,EAAe,OAAQ,eAC1B,GAAG,EAAe,QAAS,eAC3B,GAAG,EAAe,QAAS,eAC7B,CACD,MAAO,EACJ,GAAG,EAAS,WAAY,6CACxB,GAAG,EAAS,WAAY,6CACxB,GAAG,EAAS,SAAU,uCACtB,GAAG,EAAS,WAAY,6CACxB,GAAG,EAAS,WAAY,iDACxB,GAAG,EAAS,QAAS,oCACrB,GAAG,EAAS,QACX,mEACD,GAAG,EAAS,UACX,2EACD,GAAG,EAAS,SACX,uEACD,GAAG,EAAS,OACX,+DACD,GAAG,EAAS,UACX,2EACD,GAAG,EAAS,UACX,2EACD,GAAG,EAAS,QACX,mEACD,GAAG,EAAS,SACX,uEACD,GAAG,EAAS,QACX,mEACD,GAAG,EAAS,SAAU,uCACtB,GAAG,EAAS,SAAU,sCACxB,CACD,KAAM,EACH,GAAG,EAAQ,MAAO,sCAClB,GAAG,EAAQ,MAAO,sCAClB,GAAG,EAAQ,MAAO,gCAClB,GAAG,EAAQ,MAAO,8BAClB,GAAG,EAAQ,MAAO,6BACpB,CACD,OAAQ,EACL,GAAG,EAAU,QAAS,eACtB,GAAG,EAAU,QAAS,6BACxB,CACD,WAAY,EACT,GAAG,EAAc,QAAS,WAC1B,GAAG,EAAc,QAAS,GAC5B,CACF,CAED,gBAAiB,CACf,YAAa,EAAe,KAC5B,OAAQ,EAAU,KAClB,MAAO,EAAS,KAChB,KAAM,EAAQ,GACf,CACF,CAAC,CAyFW,GAAqB,CAChC,WACA,QACA,cACA,OACA,SACA,aACA,YACA,GAAG,KAGD,EAAC,MAAA,CACC,UAAW,EAAkB,CAC3B,QACA,cACA,OACA,SACA,aACA,YACD,CAAC,CACF,GAAI,EAEH,YACG"}

package/dist/esm/components/Terminal/Terminal.mjs

@@ -1,161 +1,4 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { Container } from "../Container/index.mjs";
-import { Input } from "../Input/Input.mjs";
-import { useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
-
-//#region src/components/Terminal/Terminal.tsx
-const ANSI_COLORS = {
-	"\x1B[0m": {
-		light: "",
-		dark: ""
-	},
-	"\x1B[90m": {
-		light: "text-gray-500",
-		dark: "text-gray-400"
-	},
-	"\x1B[38;5;239m": {
-		light: "text-gray-600",
-		dark: "text-gray-500"
-	},
-	"\x1B[38;5;252m": {
-		light: "text-gray-300",
-		dark: "text-gray-300"
-	},
-	"\x1B[34m": {
-		light: "text-blue-600",
-		dark: "text-blue-400"
-	},
-	"\x1B[31m": {
-		light: "text-red-600",
-		dark: "text-red-400"
-	},
-	"\x1B[32m": {
-		light: "text-green-600",
-		dark: "text-green-400"
-	},
-	"\x1B[38;5;226m": {
-		light: "text-yellow-500",
-		dark: "text-yellow-300"
-	},
-	"\x1B[35m": {
-		light: "text-purple-600",
-		dark: "text-purple-400"
-	},
-	"\x1B[38;5;3m": {
-		light: "text-amber-600",
-		dark: "text-amber-300"
-	},
-	"\x1B[38;5;208m": {
-		light: "text-orange-600",
-		dark: "text-orange-400"
-	},
-	"\x1B[36m": {
-		light: "text-cyan-600",
-		dark: "text-cyan-400"
-	},
-	"\x1B[37m": {
-		light: "text-gray-800",
-		dark: "text-gray-200"
-	},
-	"\x1B[1m": {
-		light: "font-bold",
-		dark: "font-bold"
-	}
-};
-const parseAnsiCodes = (text, isDarkMode) => {
-	const segments = [];
-	const ansiRegex = /(\x1b\[[0-9;]*m)/g;
-	const parts = text.split(ansiRegex);
-	let currentColor;
-	let isBold = false;
-	for (const part of parts) if (ansiRegex.test(part)) {
-		const colorMapping = ANSI_COLORS[part];
-		if (colorMapping) if (part === "\x1B[0m") {
-			currentColor = void 0;
-			isBold = false;
-		} else if (part === "\x1B[1m") isBold = true;
-		else currentColor = isDarkMode ? colorMapping.dark : colorMapping.light;
-	} else if (part) segments.push({
-		text: part,
-		color: currentColor,
-		isBold
-	});
-	return segments;
-};
-const Terminal = ({ className, children, isDarkMode = false, title = "bash", onClose, onSubmit, ...props }) => {
-	const content = useIntlayer("terminal");
-	const lines = typeof children === "string" ? children.split("\n") : [];
-	const [inputValue, setInputValue] = useState("");
-	const handleKeyDown = (e) => {
-		if (e.key === "Enter" && inputValue.trim()) {
-			onSubmit?.(inputValue);
-			setInputValue("");
-		}
-	};
-	const containerProps = props;
-	return /* @__PURE__ */ jsxs(Container, {
-		roundedSize: "2xl",
-		className: cn("flex min-w-0 max-w-full flex-col overflow-hidden font-mono", className),
-		...containerProps,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "mx-2 flex items-center justify-start gap-2 p-1",
-					children: [
-						/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
-						/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
-						/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
-					]
-				}), /* @__PURE__ */ jsx("div", {
-					className: "flex size-full overflow-y-auto",
-					children: /* @__PURE__ */ jsxs("div", {
-						className: "flex h-8 min-w-20 items-center justify-between gap-2 bg-card px-3 py-1",
-						children: [/* @__PURE__ */ jsx("span", { children: title }), onClose && /* @__PURE__ */ jsx("button", {
-							type: "button",
-							onClick: onClose,
-							className: "text-neutral transition-colors hover:text-text",
-							"aria-label": content.closeTab.value,
-							children: "×"
-						})]
-					})
-				})]
-			}),
-			/* @__PURE__ */ jsx("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",
-				children: /* @__PURE__ */ jsx("code", { children: lines.map((line, lineIndex) => {
-					const segments = parseAnsiCodes(line, isDarkMode);
-					return /* @__PURE__ */ jsx("span", {
-						className: "line block w-full",
-						children: segments.length === 0 ? "\n" : segments.map((segment, segIndex) => /* @__PURE__ */ jsx("span", {
-							className: cn(segment.color, { "font-bold": segment.isBold }),
-							children: segment.text
-						}, `seg-${lineIndex}-${segIndex}`))
-					}, `line-${lineIndex}`);
-				}) })
-			}),
-			/* @__PURE__ */ jsxs(Container, {
-				className: "p-2",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-neutral",
-					children: "~/Desktop/MyApp"
-				}), /* @__PURE__ */ jsx(Input, {
-					className: "m-0.5 w-full",
-					variant: "invisible",
-					value: inputValue,
-					"aria-label": content.terminalInput.value,
-					onChange: (e) => setInputValue(e.target.value),
-					onKeyDown: handleKeyDown
-				})]
-			})
-		]
-	});
-};
-
-//#endregion
-export { Terminal };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{Container as t}from"../Container/index.mjs";import{Input as n}from"../Input/Input.mjs";import{useState as r}from"react";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{useIntlayer as o}from"react-intlayer";const s={"\x1B[0m":{light:``,dark:``},"\x1B[90m":{light:`text-gray-500`,dark:`text-gray-400`},"\x1B[38;5;239m":{light:`text-gray-600`,dark:`text-gray-500`},"\x1B[38;5;252m":{light:`text-gray-300`,dark:`text-gray-300`},"\x1B[34m":{light:`text-blue-600`,dark:`text-blue-400`},"\x1B[31m":{light:`text-red-600`,dark:`text-red-400`},"\x1B[32m":{light:`text-green-600`,dark:`text-green-400`},"\x1B[38;5;226m":{light:`text-yellow-500`,dark:`text-yellow-300`},"\x1B[35m":{light:`text-purple-600`,dark:`text-purple-400`},"\x1B[38;5;3m":{light:`text-amber-600`,dark:`text-amber-300`},"\x1B[38;5;208m":{light:`text-orange-600`,dark:`text-orange-400`},"\x1B[36m":{light:`text-cyan-600`,dark:`text-cyan-400`},"\x1B[37m":{light:`text-gray-800`,dark:`text-gray-200`},"\x1B[1m":{light:`font-bold`,dark:`font-bold`}},c=(e,t)=>{let n=[],r=/(\x1b\[[0-9;]*m)/g,i=e.split(r),a,o=!1;for(let e of i)if(r.test(e)){let n=s[e];n&&(e===`\x1B[0m`?(a=void 0,o=!1):e===`\x1B[1m`?o=!0:a=t?n.dark:n.light)}else e&&n.push({text:e,color:a,isBold:o});return n},l=({className:s,children:l,isDarkMode:u=!1,title:d=`bash`,onClose:f,onSubmit:p,...m})=>{let h=o(`terminal`),g=typeof l==`string`?l.split(`
+`):[],[_,v]=r(``),y=e=>{e.key===`Enter`&&_.trim()&&(p?.(_),v(``))},b=m;return a(t,{roundedSize:`2xl`,className:e(`flex min-w-0 max-w-full flex-col overflow-hidden font-mono`,s),...b,children:[a(`div`,{className:`flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950`,children:[a(`div`,{className:`mx-2 flex items-center justify-start gap-2 p-1`,children:[i(`div`,{className:`size-3 rounded-full bg-red-500`}),i(`div`,{className:`size-3 rounded-full bg-yellow-500`}),i(`div`,{className:`size-3 rounded-full bg-green-500`})]}),i(`div`,{className:`flex size-full overflow-y-auto`,children:a(`div`,{className:`flex h-8 min-w-20 items-center justify-between gap-2 bg-card px-3 py-1`,children:[i(`span`,{children:d}),f&&i(`button`,{type:`button`,onClick:f,className:`text-neutral transition-colors hover:text-text`,"aria-label":h.closeTab.value,children:`×`})]})})]}),i(`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`,children:i(`code`,{children:g.map((t,n)=>{let r=c(t,u);return i(`span`,{className:`line block w-full`,children:r.length===0?`
+`:r.map((t,r)=>i(`span`,{className:e(t.color,{"font-bold":t.isBold}),children:t.text},`seg-${n}-${r}`))},`line-${n}`)})})}),a(t,{className:`p-2`,children:[i(`span`,{className:`text-neutral`,children:`~/Desktop/MyApp`}),i(n,{className:`m-0.5 w-full`,variant:`invisible`,value:_,"aria-label":h.terminalInput.value,onChange:e=>v(e.target.value),onKeyDown:y})]})]})};export{l as Terminal};
 //# sourceMappingURL=Terminal.mjs.map

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

@@ -1 +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  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 = typeof children === 'string' ? children.split('\\n') : [];\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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"}
+{"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  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 = typeof children === 'string' ? children.split('\\n') : [];\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/Terminal/index.mjs

@@ -1,3 +1 @@
-import { Terminal } from "./Terminal.mjs";
-
-export { Terminal };
+import{Terminal as e}from"./Terminal.mjs";export{e as Terminal};