@intlayer/design-system 8.4.3 → 8.4.5

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

@@ -1,2 +1,317 @@
-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};
+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 };
 //# 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":"uFAgEA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,IAAA,MACA,EAAA,KAAA,MACA,EAAA,KAAA,aACD,CA2BW,EAAL,SAAA,EAAA,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,cACD,CAyBW,EAAL,SAAA,EAAA,OACL,GAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,KACA,EAAA,GAAA,WACD,CAiBW,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,KAAA,aACD,CAiBW,EAAL,SAAA,EAAA,OACL,GAAA,KAAA,OACA,EAAA,KAAA,aACD,CAED,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,MAAD,CACE,UAAW,EAAkB,CAC3B,QACA,cACA,OACA,SACA,aACA,YACD,CAAC,CACF,GAAI,EAEH,WACG,CAAA"}
+{"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,iBAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BD,IAAY,WAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;;;;;;;;;;;;;;;;;;;;;;;;AAyBD,IAAY,UAAL;AACL;AACA;AACA;AACA;AACA;;KACD;;;;;;;;;;;;;;;;AAiBD,IAAY,YAAL;AACL;AACA;;KACD;;;;;;;;;;;;;;;;AAiBD,IAAY,gBAAL;AACL;AACA;;KACD;AAED,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,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;GACD,CAAC;EACF,GAAI;EAEH;EACG"}

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

@@ -1,4 +1,161 @@
-"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};
+'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 };
 //# 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 +1,3 @@
-import{Terminal as e}from"./Terminal.mjs";export{e as Terminal};
+import { Terminal } from "./Terminal.mjs";
+
+export { Terminal };