@intlayer/design-system 8.11.2 → 8.12.0-canary.0

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

@@ -2,205 +2,51 @@ 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: {
-			[`none`]: "rounded-none",
-			[`sm`]: "rounded-sm",
-			[`md`]: "rounded-md",
-			[`lg`]: "rounded-lg",
-			[`xl`]: "rounded-xl",
-			[`2xl`]: "rounded-2xl",
-			[`3xl`]: "rounded-3xl",
-			[`full`]: "rounded-full"
+			none: "rounded-none",
+			sm: "rounded-sm",
+			md: "rounded-md",
+			lg: "rounded-lg",
+			xl: "rounded-xl",
+			[`xxl`]: "rounded-2xl",
+			[`xxxl`]: "rounded-3xl",
+			full: "rounded-full"
 		},
 		color: {
-			[`primary`]: "border-primary bg-primary/10 text-primary",
-			[`success`]: "border-success bg-success/10 text-success",
-			[`error`]: "border-error bg-error/10 text-error",
-			[`warning`]: "border-warning bg-warning/10 text-warning",
-			[`neutral`]: "/10 border-neutral bg-neutral/10 text-neutral",
-			[`text`]: "border-text bg-text/10 text-text",
-			[`blue`]: "border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300",
-			[`yellow`]: "border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300",
-			[`green`]: "border-green-500 bg-green-500/10 text-green-500 dark:text-green-300",
-			[`red`]: "border-error bg-error/10 text-error dark:text-red-300",
-			[`orange`]: "border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300",
-			[`purple`]: "border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300",
-			[`pink`]: "border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300",
-			[`brown`]: "border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300",
-			[`gray`]: "border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300",
-			[`black`]: "border-black bg-black/10 text-black",
-			[`white`]: "border-white bg-white/10 text-white"
+			primary: "border-primary bg-primary/10 text-primary",
+			success: "border-success bg-success/10 text-success",
+			error: "border-error bg-error/10 text-error",
+			warning: "border-warning bg-warning/10 text-warning",
+			neutral: "/10 border-neutral bg-neutral/10 text-neutral",
+			text: "border-text bg-text/10 text-text",
+			blue: "border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300",
+			yellow: "border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300",
+			green: "border-green-500 bg-green-500/10 text-green-500 dark:text-green-300",
+			red: "border-error bg-error/10 text-error dark:text-red-300",
+			orange: "border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300",
+			purple: "border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300",
+			pink: "border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300",
+			brown: "border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300",
+			gray: "border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300",
+			black: "border-black bg-black/10 text-black",
+			white: "border-white bg-white/10 text-white"
 		},
 		size: {
-			[`xs`]: "border-[1.2px] px-2 py-0.5 text-xs",
-			[`sm`]: "border-[1.3px] px-2 py-0.5 text-sm",
-			[`md`]: "border-2 px-2 py-1 text-base",
-			[`lg`]: "border-2 px-3 py-2 text-lg",
-			[`xl`]: "border-2 px-3 py-2 text-xl"
+			xs: "border-[1.2px] px-2 py-0.5 text-xs",
+			sm: "border-[1.3px] px-2 py-0.5 text-sm",
+			md: "border-2 px-2 py-1 text-base",
+			lg: "border-2 px-3 py-2 text-lg",
+			xl: "border-2 px-3 py-2 text-xl"
 		},
 		border: {
-			[`none`]: "border-none",
-			[`with`]: "border-[1.3px] border-text"
+			none: "border-none",
+			with: "border-[1.3px] border-text"
 		},
 		background: {
-			[`none`]: "bg-none",
-			[`with`]: ""
+			none: "bg-none",
+			with: ""
 		}
 	},
 	defaultVariants: {
@@ -244,38 +90,38 @@ const containerVariants = cva("w-fit backdrop-blur", {
 * @example
 * ```tsx
 * // Basic status tags
-* <Tag color={TagColor.SUCCESS}>Completed</Tag>
-* <Tag color={TagColor.ERROR}>Failed</Tag>
-* <Tag color={TagColor.WARNING}>In Progress</Tag>
+* <Tag color="success">Completed</Tag>
+* <Tag color="error">Failed</Tag>
+* <Tag color="warning">In Progress</Tag>
 *
 * // Category tags with borders
-* <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>
+* <Tag color="neutral" border="with">
 *   Technology
 * </Tag>
-* <Tag color={TagColor.TEXT} border={TagBorder.WITH}>
+* <Tag color="text" border="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>
+*   <Tag size="xs" color="neutral">Minor</Tag>
+*   <Tag size="sm" color="text">Standard</Tag>
+*   <Tag size="lg" color="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>
+*   <Tag roundedSize="none">Sharp</Tag>
+*   <Tag roundedSize="md">Rounded</Tag>
+*   <Tag roundedSize="full">Pill</Tag>
 * </div>
 *
 * // Custom styled tag
 * <Tag
-*   color={TagColor.WARNING}
-*   size={TagSize.LG}
-*   border={TagBorder.WITH}
-*   roundedSize={TagRoundedSize.LG}
+*   color="warning"
+*   size="lg"
+*   border="with"
+*   roundedSize="lg"
 *   className="font-bold uppercase tracking-wide"
 * >
 *   Custom Style
@@ -283,7 +129,7 @@ const containerVariants = cva("w-fit backdrop-blur", {
 *
 * // Interactive tags with click handlers
 * <Tag
-*   color={TagColor.SUCCESS}
+*   color="success"
 *   onClick={() => console.log('Tag clicked')}
 *   className="cursor-pointer hover:opacity-80 transition-opacity"
 * >
@@ -313,5 +159,5 @@ const Tag = ({ children, color, roundedSize, size, border, background, className
 };
 
 //#endregion
-export { Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize };
+export { Tag };
 //# 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-error bg-error/10 text-error 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;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,IAAY,WAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAY,UAAL;CACL;CACA;CACA;CACA;CACA;;AACF;;;;;;;;;;;;;;;;AAiBA,IAAY,YAAL;CACL;CACA;;AACF;;;;;;;;;;;;;;;;AAiBA,IAAY,gBAAL;CACL;CACA;;AACF;AAEA,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;IACV,SAA2B;IAC3B,OAAyB;IACzB,OAAyB;IACzB,OAAyB;IACzB,OAAyB;IACzB,QAA0B;IAC1B,QAA2B;IAC3B,SAA2B;EAC9B;EACA,OAAO;IACJ,YAAwB;IACxB,YAAwB;IACxB,UAAsB;IACtB,YAAwB;IACxB,YAAwB;IACxB,SAAqB;IACrB,SACC;IACD,WACC;IACD,UACC;IACD,QACC;IACD,WACC;IACD,WACC;IACD,SACC;IACD,UACC;IACD,SACC;IACD,UAAsB;IACtB,UAAsB;EACzB;EACA,MAAM;IACH,OAAkB;IAClB,OAAkB;IAClB,OAAkB;IAClB,OAAkB;IAClB,OAAkB;EACrB;EACA,QAAQ;IACL,SAAsB;IACtB,SAAsB;EACzB;EACA,YAAY;IACT,SAA0B;IAC1B,SAA0B;EAC7B;CACF;CAEA,iBAAiB;EACf;EACA;EACA;EACA;CACF;AACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFD,MAAa,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EACD,GAAI;EAEH;CACE;AAET"}
+{"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=\"success\" border=\"with\">\n *   Success Status\n * </Tag>\n *\n * // Large warning tag\n * <Tag color=\"warning\" size=\"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=\"none\">Sharp Tag</Tag>\n *\n * // Pill-shaped tag\n * <Tag roundedSize=\"full\">Pill Tag</Tag>\n *\n * // Medium rounded corners\n * <Tag roundedSize=\"md\">Rounded Tag</Tag>\n * ```\n */\nexport type TagRoundedSize = \n  | 'none' |\n  'sm' |\n  'md' |\n  'lg' |\n  'xl' |\n  '2xl' |\n  '3xl' |\n  'full';\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=\"success\">Completed</Tag>\n * <Tag color=\"error\">Failed</Tag>\n * <Tag color=\"warning\">Pending</Tag>\n *\n * // Category tags\n * <Tag color=\"neutral\">Category</Tag>\n * <Tag color=\"text\">General</Tag>\n * ```\n */\nexport type TagColor = \n  | 'primary' |\n  'success' |\n  'error' |\n  'warning' |\n  'neutral' |\n  'text' |\n  'blue' |\n  'yellow' |\n  'green' |\n  'red' |\n  'orange' |\n  'purple' |\n  'pink' |\n  'brown' |\n  'gray' |\n  'black' |\n  'white';\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=\"xs\">Small detail</Tag>\n * <Tag size=\"sm\">Minor category</Tag>\n * <Tag size=\"md\">Standard tag</Tag>\n * <Tag size=\"lg\">Important label</Tag>\n * <Tag size=\"xl\">Hero tag</Tag>\n * ```\n */\nexport type TagSize = \n  | 'xs' |\n  'sm' |\n  'md' |\n  'lg' |\n  'xl';\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=\"none\">Borderless</Tag>\n * <Tag border=\"with\">With Border</Tag>\n * ```\n */\nexport type TagBorder = \n  | 'none' |\n  'with';\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=\"none\">No Background</Tag>\n * <Tag background=\"with\">With Background</Tag>\n * ```\n */\nexport type TagBackground = \n  | 'none' |\n  'with';\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n  variants: {\n    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',\n    },\n    color: {\n      primary: 'border-primary bg-primary/10 text-primary',\n      success: 'border-success bg-success/10 text-success',\n      error: 'border-error bg-error/10 text-error',\n      warning: 'border-warning bg-warning/10 text-warning',\n      neutral: '/10 border-neutral bg-neutral/10 text-neutral',\n      text: 'border-text bg-text/10 text-text',\n      blue:\n        'border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300',\n      yellow:\n        'border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300',\n      green:\n        'border-green-500 bg-green-500/10 text-green-500 dark:text-green-300',\n      red:\n        'border-error bg-error/10 text-error dark:text-red-300',\n      orange:\n        'border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300',\n      purple:\n        'border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300',\n      pink:\n        'border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300',\n      brown:\n        'border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300',\n      gray:\n        'border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300',\n      black: 'border-black bg-black/10 text-black',\n      white: 'border-white bg-white/10 text-white',\n    },\n    size: {\n      xs: 'border-[1.2px] px-2 py-0.5 text-xs',\n      sm: 'border-[1.3px] px-2 py-0.5 text-sm',\n      md: 'border-2 px-2 py-1 text-base',\n      lg: 'border-2 px-3 py-2 text-lg',\n      xl: 'border-2 px-3 py-2 text-xl',\n    },\n    border: {\n      none: 'border-none',\n      with: 'border-[1.3px] border-text',\n    },\n    background: {\n      none: 'bg-none',\n      with: '',\n    },\n  },\n\n  defaultVariants: {\n    roundedSize: 'full',\n    border: 'none',\n    color: 'text',\n    size: '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=\"success\">Completed</Tag>\n * <Tag color=\"error\">Failed</Tag>\n * <Tag color=\"warning\">In Progress</Tag>\n *\n * // Category tags with borders\n * <Tag color=\"neutral\" border=\"with\">\n *   Technology\n * </Tag>\n * <Tag color=\"text\" border=\"with\">\n *   Design\n * </Tag>\n *\n * // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n *   <Tag size=\"xs\" color=\"neutral\">Minor</Tag>\n *   <Tag size=\"sm\" color=\"text\">Standard</Tag>\n *   <Tag size=\"lg\" color=\"success\">Important</Tag>\n * </div>\n *\n * // Rounded variations\n * <div className=\"flex gap-2\">\n *   <Tag roundedSize=\"none\">Sharp</Tag>\n *   <Tag roundedSize=\"md\">Rounded</Tag>\n *   <Tag roundedSize=\"full\">Pill</Tag>\n * </div>\n *\n * // Custom styled tag\n * <Tag\n *   color=\"warning\"\n *   size=\"lg\"\n *   border=\"with\"\n *   roundedSize=\"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=\"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":";;;;AA0LA,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;IACH,QAAa;IACb,SAAc;GACf,MAAM;EACR;EACA,OAAO;GACL,SAAS;GACT,SAAS;GACT,OAAO;GACP,SAAS;GACT,SAAS;GACT,MAAM;GACN,MACE;GACF,QACE;GACF,OACE;GACF,KACE;GACF,QACE;GACF,QACE;GACF,MACE;GACF,OACE;GACF,MACE;GACF,OAAO;GACP,OAAO;EACT;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,QAAQ;GACN,MAAM;GACN,MAAM;EACR;EACA,YAAY;GACV,MAAM;GACN,MAAM;EACR;CACF;CAEA,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,OAAO;EACP,MAAM;CACR;AACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFD,MAAa,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EACD,GAAI;EAEH;CACE;AAET"}

package/dist/esm/components/TechLogo/TechLogo.mjs

@@ -1,5 +1,4 @@
 import { cn } from "../../utils/cn.mjs";
-import { TechLogoName } from "./types.mjs";
 import { Suspense, lazy } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 
@@ -11,42 +10,42 @@ const dynamicLogo = (importFn, exportName) => lazy(async () => {
 	return { default: (await importFn())[exportName] };
 });
 const logoRecord = {
-	["adonis"]: dynamicLogo(() => import("./logos/Adonis.mjs"), "AdonisLogo"),
-	["angular"]: dynamicLogo(() => import("./logos/Angular.mjs"), "AngularLogo"),
-	["astro"]: dynamicLogo(() => import("./logos/Astro.mjs"), "AstroLogo"),
-	["express"]: dynamicLogo(() => import("./logos/Express.mjs"), "ExpressLogo"),
-	["fastify"]: dynamicLogo(() => import("./logos/Fastify.mjs"), "FastifyLogo"),
-	["hono"]: dynamicLogo(() => import("./logos/Hono.mjs"), "HonoLogo"),
-	["lynx"]: dynamicLogo(() => import("./logos/Lynx.mjs"), "LynxLogo"),
-	["nestjs"]: dynamicLogo(() => import("./logos/NestJS.mjs"), "NestJSLogo"),
-	["nextjs"]: dynamicLogo(() => import("./logos/Nextjs.mjs"), "NextJSLogo"),
-	["node"]: dynamicLogo(() => import("./logos/Node.mjs"), "NodejsLogo"),
-	["nuxt"]: dynamicLogo(() => import("./logos/Nuxt.mjs"), "NuxtLogo"),
-	["preact"]: dynamicLogo(() => import("./logos/Preact.mjs"), "PreactLogo"),
-	["react"]: dynamicLogo(() => import("./logos/Reactjs.mjs"), "ReactLogo"),
-	["solid"]: dynamicLogo(() => import("./logos/Solid.mjs"), "SolidLogo"),
-	["svelte"]: dynamicLogo(() => import("./logos/Svelte.mjs"), "SvelteLogo"),
-	["tanstack"]: dynamicLogo(() => import("./logos/Tanstack.mjs"), "TanstackLogo"),
-	["vite"]: dynamicLogo(() => import("./logos/Vitejs.mjs"), "ViteLogo"),
-	["vue"]: dynamicLogo(() => import("./logos/Vuejs.mjs"), "VuejsLogo"),
-	["lit"]: dynamicLogo(() => import("./logos/Lit.mjs"), "LitLogo"),
-	["vanilla"]: dynamicLogo(() => import("./logos/Vanilla.mjs"), "JavaScriptLogo"),
-	["anthropic"]: dynamicLogo(() => import("./logos/Anthropic.mjs"), "AnthropicLogo"),
-	["claude"]: dynamicLogo(() => import("./logos/Claude.mjs"), "ClaudeLogo"),
-	["chatgpt"]: dynamicLogo(() => import("./logos/ChatGPT.mjs"), "ChatGPTLogo"),
-	["deepseek"]: dynamicLogo(() => import("./logos/DeepSeek.mjs"), "DeepSeekLogo"),
-	["gemini"]: dynamicLogo(() => import("./logos/Gemini.mjs"), "GeminiLogo"),
-	["googleai"]: dynamicLogo(() => import("./logos/GoogleAI.mjs"), "GoogleAILogo"),
-	["grok"]: dynamicLogo(() => import("./logos/Grok.mjs"), "GrokLogo"),
-	["mistral"]: dynamicLogo(() => import("./logos/Mistral.mjs"), "MistralLogo"),
-	["ollama"]: dynamicLogo(() => import("./logos/Ollama.mjs"), "OllamaLogo"),
-	["openai"]: dynamicLogo(() => import("./logos/OpenAI.mjs"), "OpenAILogo"),
-	["perplexity"]: dynamicLogo(() => import("./logos/Perplexity.mjs"), "PerplexityLogo"),
-	["github"]: dynamicLogo(() => import("./logos/GitHub.mjs"), "GitHubLogo"),
-	["gitlab"]: dynamicLogo(() => import("./logos/GitLab.mjs"), "GitLabLogo"),
-	["bitbucket"]: dynamicLogo(() => import("./logos/Bitbucket.mjs"), "BitbucketLogo"),
-	["google"]: dynamicLogo(() => import("./logos/Google.mjs"), "GoogleLogo"),
-	["linkedin"]: dynamicLogo(() => import("./logos/LinkedIn.mjs"), "LinkedInLogo")
+	adonis: dynamicLogo(() => import("./logos/Adonis.mjs"), "AdonisLogo"),
+	angular: dynamicLogo(() => import("./logos/Angular.mjs"), "AngularLogo"),
+	astro: dynamicLogo(() => import("./logos/Astro.mjs"), "AstroLogo"),
+	express: dynamicLogo(() => import("./logos/Express.mjs"), "ExpressLogo"),
+	fastify: dynamicLogo(() => import("./logos/Fastify.mjs"), "FastifyLogo"),
+	hono: dynamicLogo(() => import("./logos/Hono.mjs"), "HonoLogo"),
+	lynx: dynamicLogo(() => import("./logos/Lynx.mjs"), "LynxLogo"),
+	nestjs: dynamicLogo(() => import("./logos/NestJS.mjs"), "NestJSLogo"),
+	nextjs: dynamicLogo(() => import("./logos/Nextjs.mjs"), "NextJSLogo"),
+	node: dynamicLogo(() => import("./logos/Node.mjs"), "NodejsLogo"),
+	nuxt: dynamicLogo(() => import("./logos/Nuxt.mjs"), "NuxtLogo"),
+	preact: dynamicLogo(() => import("./logos/Preact.mjs"), "PreactLogo"),
+	react: dynamicLogo(() => import("./logos/Reactjs.mjs"), "ReactLogo"),
+	solid: dynamicLogo(() => import("./logos/Solid.mjs"), "SolidLogo"),
+	svelte: dynamicLogo(() => import("./logos/Svelte.mjs"), "SvelteLogo"),
+	tanstack: dynamicLogo(() => import("./logos/Tanstack.mjs"), "TanstackLogo"),
+	vite: dynamicLogo(() => import("./logos/Vitejs.mjs"), "ViteLogo"),
+	vue: dynamicLogo(() => import("./logos/Vuejs.mjs"), "VuejsLogo"),
+	lit: dynamicLogo(() => import("./logos/Lit.mjs"), "LitLogo"),
+	vanilla: dynamicLogo(() => import("./logos/Vanilla.mjs"), "JavaScriptLogo"),
+	anthropic: dynamicLogo(() => import("./logos/Anthropic.mjs"), "AnthropicLogo"),
+	claude: dynamicLogo(() => import("./logos/Claude.mjs"), "ClaudeLogo"),
+	chatgpt: dynamicLogo(() => import("./logos/ChatGPT.mjs"), "ChatGPTLogo"),
+	deepseek: dynamicLogo(() => import("./logos/DeepSeek.mjs"), "DeepSeekLogo"),
+	gemini: dynamicLogo(() => import("./logos/Gemini.mjs"), "GeminiLogo"),
+	googleai: dynamicLogo(() => import("./logos/GoogleAI.mjs"), "GoogleAILogo"),
+	grok: dynamicLogo(() => import("./logos/Grok.mjs"), "GrokLogo"),
+	mistral: dynamicLogo(() => import("./logos/Mistral.mjs"), "MistralLogo"),
+	ollama: dynamicLogo(() => import("./logos/Ollama.mjs"), "OllamaLogo"),
+	openai: dynamicLogo(() => import("./logos/OpenAI.mjs"), "OpenAILogo"),
+	perplexity: dynamicLogo(() => import("./logos/Perplexity.mjs"), "PerplexityLogo"),
+	github: dynamicLogo(() => import("./logos/GitHub.mjs"), "GitHubLogo"),
+	gitlab: dynamicLogo(() => import("./logos/GitLab.mjs"), "GitLabLogo"),
+	bitbucket: dynamicLogo(() => import("./logos/Bitbucket.mjs"), "BitbucketLogo"),
+	google: dynamicLogo(() => import("./logos/Google.mjs"), "GoogleLogo"),
+	linkedin: dynamicLogo(() => import("./logos/LinkedIn.mjs"), "LinkedInLogo")
 };
 const TechLogo = ({ name, ...props }) => {
 	const LazyLogo = logoRecord[name];

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

@@ -1 +1 @@
-{"version":3,"file":"TechLogo.mjs","names":[],"sources":["../../../../src/components/TechLogo/TechLogo.tsx"],"sourcesContent":["import { type FC, type JSX, lazy, Suspense, type SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\nimport { TechLogoName } from './types';\n\nexport type TechLogoProps = SVGProps<SVGSVGElement> & {\n  name: TechLogoName;\n};\n\n/**\n * This ensures React.lazy always receives a valid component.\n */\nconst dynamicLogo = (importFn: () => Promise<any>, exportName: string) =>\n  lazy(async () => {\n    const module = await importFn();\n    const asset = module[exportName];\n\n    return { default: asset };\n  });\n\nconst logoRecord: Record<TechLogoName, ReturnType<typeof dynamicLogo>> = {\n  [TechLogoName.Adonis]: dynamicLogo(\n    () => import('./logos/Adonis'),\n    'AdonisLogo'\n  ),\n  [TechLogoName.Angular]: dynamicLogo(\n    () => import('./logos/Angular'),\n    'AngularLogo'\n  ),\n  [TechLogoName.Astro]: dynamicLogo(() => import('./logos/Astro'), 'AstroLogo'),\n  [TechLogoName.Express]: dynamicLogo(\n    () => import('./logos/Express'),\n    'ExpressLogo'\n  ),\n  [TechLogoName.Fastify]: dynamicLogo(\n    () => import('./logos/Fastify'),\n    'FastifyLogo'\n  ),\n  [TechLogoName.Hono]: dynamicLogo(() => import('./logos/Hono'), 'HonoLogo'),\n  [TechLogoName.Lynx]: dynamicLogo(() => import('./logos/Lynx'), 'LynxLogo'),\n  [TechLogoName.NestJS]: dynamicLogo(\n    () => import('./logos/NestJS'),\n    'NestJSLogo'\n  ),\n  [TechLogoName.Nextjs]: dynamicLogo(\n    () => import('./logos/Nextjs'),\n    'NextJSLogo'\n  ),\n  [TechLogoName.Node]: dynamicLogo(() => import('./logos/Node'), 'NodejsLogo'),\n  [TechLogoName.Nuxt]: dynamicLogo(() => import('./logos/Nuxt'), 'NuxtLogo'),\n  [TechLogoName.Preact]: dynamicLogo(\n    () => import('./logos/Preact'),\n    'PreactLogo'\n  ),\n  [TechLogoName.React]: dynamicLogo(\n    () => import('./logos/Reactjs'),\n    'ReactLogo'\n  ),\n  [TechLogoName.Solid]: dynamicLogo(() => import('./logos/Solid'), 'SolidLogo'),\n  [TechLogoName.Svelte]: dynamicLogo(\n    () => import('./logos/Svelte'),\n    'SvelteLogo'\n  ),\n  [TechLogoName.Tanstack]: dynamicLogo(\n    () => import('./logos/Tanstack'),\n    'TanstackLogo'\n  ),\n  [TechLogoName.Vite]: dynamicLogo(() => import('./logos/Vitejs'), 'ViteLogo'),\n  [TechLogoName.Vue]: dynamicLogo(() => import('./logos/Vuejs'), 'VuejsLogo'),\n  [TechLogoName.Lit]: dynamicLogo(() => import('./logos/Lit'), 'LitLogo'),\n  [TechLogoName.Vanilla]: dynamicLogo(\n    () => import('./logos/Vanilla'),\n    'JavaScriptLogo'\n  ),\n  [TechLogoName.Anthropic]: dynamicLogo(\n    () => import('./logos/Anthropic'),\n    'AnthropicLogo'\n  ),\n  [TechLogoName.Claude]: dynamicLogo(\n    () => import('./logos/Claude'),\n    'ClaudeLogo'\n  ),\n  [TechLogoName.ChatGPT]: dynamicLogo(\n    () => import('./logos/ChatGPT'),\n    'ChatGPTLogo'\n  ),\n  [TechLogoName.DeepSeek]: dynamicLogo(\n    () => import('./logos/DeepSeek'),\n    'DeepSeekLogo'\n  ),\n  [TechLogoName.Gemini]: dynamicLogo(\n    () => import('./logos/Gemini'),\n    'GeminiLogo'\n  ),\n  [TechLogoName.GoogleAI]: dynamicLogo(\n    () => import('./logos/GoogleAI'),\n    'GoogleAILogo'\n  ),\n  [TechLogoName.Grok]: dynamicLogo(() => import('./logos/Grok'), 'GrokLogo'),\n  [TechLogoName.Mistral]: dynamicLogo(\n    () => import('./logos/Mistral'),\n    'MistralLogo'\n  ),\n  [TechLogoName.Ollama]: dynamicLogo(\n    () => import('./logos/Ollama'),\n    'OllamaLogo'\n  ),\n  [TechLogoName.OpenAI]: dynamicLogo(\n    () => import('./logos/OpenAI'),\n    'OpenAILogo'\n  ),\n  [TechLogoName.Perplexity]: dynamicLogo(\n    () => import('./logos/Perplexity'),\n    'PerplexityLogo'\n  ),\n  [TechLogoName.GitHub]: dynamicLogo(\n    () => import('./logos/GitHub'),\n    'GitHubLogo'\n  ),\n  [TechLogoName.GitLab]: dynamicLogo(\n    () => import('./logos/GitLab'),\n    'GitLabLogo'\n  ),\n  [TechLogoName.Bitbucket]: dynamicLogo(\n    () => import('./logos/Bitbucket'),\n    'BitbucketLogo'\n  ),\n  [TechLogoName.Google]: dynamicLogo(\n    () => import('./logos/Google'),\n    'GoogleLogo'\n  ),\n  [TechLogoName.LinkedIn]: dynamicLogo(\n    () => import('./logos/LinkedIn'),\n    'LinkedInLogo'\n  ),\n};\n\nexport const TechLogo: FC<TechLogoProps> = ({\n  name,\n  ...props\n}): JSX.Element => {\n  const LazyLogo = logoRecord[name];\n\n  if (!LazyLogo) {\n    return <></>;\n  }\n\n  return (\n    <Suspense\n      fallback={\n        <div className={cn('animate-pulse bg-neutral-200', props.className)} />\n      }\n    >\n      <LazyLogo {...(props as any)} />\n    </Suspense>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,MAAM,eAAe,UAA8B,eACjD,KAAK,YAAY;CAIf,OAAO,EAAE,UAFK,MADO,SAAS,GACT,YAEG;AAC1B,CAAC;AAEH,MAAM,aAAmE;aAChD,kBACf,OAAO,uBACb,YACF;cACwB,kBAChB,OAAO,wBACb,aACF;YACsB,kBAAkB,OAAO,sBAAkB,WAAW;cACpD,kBAChB,OAAO,wBACb,aACF;cACwB,kBAChB,OAAO,wBACb,aACF;WACqB,kBAAkB,OAAO,qBAAiB,UAAU;WACpD,kBAAkB,OAAO,qBAAiB,UAAU;aAClD,kBACf,OAAO,uBACb,YACF;aACuB,kBACf,OAAO,uBACb,YACF;WACqB,kBAAkB,OAAO,qBAAiB,YAAY;WACtD,kBAAkB,OAAO,qBAAiB,UAAU;aAClD,kBACf,OAAO,uBACb,YACF;YACsB,kBACd,OAAO,wBACb,WACF;YACsB,kBAAkB,OAAO,sBAAkB,WAAW;aACrD,kBACf,OAAO,uBACb,YACF;eACyB,kBACjB,OAAO,yBACb,cACF;WACqB,kBAAkB,OAAO,uBAAmB,UAAU;UACvD,kBAAkB,OAAO,sBAAkB,WAAW;UACtD,kBAAkB,OAAO,oBAAgB,SAAS;cAC9C,kBAChB,OAAO,wBACb,gBACF;gBAC0B,kBAClB,OAAO,0BACb,eACF;aACuB,kBACf,OAAO,uBACb,YACF;cACwB,kBAChB,OAAO,wBACb,aACF;eACyB,kBACjB,OAAO,yBACb,cACF;aACuB,kBACf,OAAO,uBACb,YACF;eACyB,kBACjB,OAAO,yBACb,cACF;WACqB,kBAAkB,OAAO,qBAAiB,UAAU;cACjD,kBAChB,OAAO,wBACb,aACF;aACuB,kBACf,OAAO,uBACb,YACF;aACuB,kBACf,OAAO,uBACb,YACF;iBAC2B,kBACnB,OAAO,2BACb,gBACF;aACuB,kBACf,OAAO,uBACb,YACF;aACuB,kBACf,OAAO,uBACb,YACF;gBAC0B,kBAClB,OAAO,0BACb,eACF;aACuB,kBACf,OAAO,uBACb,YACF;eACyB,kBACjB,OAAO,yBACb,cACF;AACF;AAEA,MAAa,YAA+B,EAC1C,MACA,GAAG,YACc;CACjB,MAAM,WAAW,WAAW;CAE5B,IAAI,CAAC,UACH,OAAO,iCAAI;CAGb,OACE,oBAAC,UAAD;EACE,UACE,oBAAC,OAAD,EAAK,WAAW,GAAG,gCAAgC,MAAM,SAAS,EAAI;YAGxE,oBAAC,UAAD,EAAU,GAAK,MAAgB;CACvB;AAEd"}
+{"version":3,"file":"TechLogo.mjs","names":[],"sources":["../../../../src/components/TechLogo/TechLogo.tsx"],"sourcesContent":["import { type FC, type JSX, lazy, Suspense, type SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\nimport type { TechLogoName } from './types';\n\nexport type TechLogoProps = SVGProps<SVGSVGElement> & {\n  name: TechLogoName;\n};\n\n/**\n * This ensures React.lazy always receives a valid component.\n */\nconst dynamicLogo = (importFn: () => Promise<any>, exportName: string) =>\n  lazy(async () => {\n    const module = await importFn();\n    const asset = module[exportName];\n\n    return { default: asset };\n  });\n\nconst logoRecord: Record<TechLogoName, ReturnType<typeof dynamicLogo>> = {\n  adonis: dynamicLogo(() => import('./logos/Adonis'), 'AdonisLogo'),\n  angular: dynamicLogo(() => import('./logos/Angular'), 'AngularLogo'),\n  astro: dynamicLogo(() => import('./logos/Astro'), 'AstroLogo'),\n  express: dynamicLogo(() => import('./logos/Express'), 'ExpressLogo'),\n  fastify: dynamicLogo(() => import('./logos/Fastify'), 'FastifyLogo'),\n  hono: dynamicLogo(() => import('./logos/Hono'), 'HonoLogo'),\n  lynx: dynamicLogo(() => import('./logos/Lynx'), 'LynxLogo'),\n  nestjs: dynamicLogo(() => import('./logos/NestJS'), 'NestJSLogo'),\n  nextjs: dynamicLogo(() => import('./logos/Nextjs'), 'NextJSLogo'),\n  node: dynamicLogo(() => import('./logos/Node'), 'NodejsLogo'),\n  nuxt: dynamicLogo(() => import('./logos/Nuxt'), 'NuxtLogo'),\n  preact: dynamicLogo(() => import('./logos/Preact'), 'PreactLogo'),\n  react: dynamicLogo(() => import('./logos/Reactjs'), 'ReactLogo'),\n  solid: dynamicLogo(() => import('./logos/Solid'), 'SolidLogo'),\n  svelte: dynamicLogo(() => import('./logos/Svelte'), 'SvelteLogo'),\n  tanstack: dynamicLogo(() => import('./logos/Tanstack'), 'TanstackLogo'),\n  vite: dynamicLogo(() => import('./logos/Vitejs'), 'ViteLogo'),\n  vue: dynamicLogo(() => import('./logos/Vuejs'), 'VuejsLogo'),\n  lit: dynamicLogo(() => import('./logos/Lit'), 'LitLogo'),\n  vanilla: dynamicLogo(() => import('./logos/Vanilla'), 'JavaScriptLogo'),\n  anthropic: dynamicLogo(() => import('./logos/Anthropic'), 'AnthropicLogo'),\n  claude: dynamicLogo(() => import('./logos/Claude'), 'ClaudeLogo'),\n  chatgpt: dynamicLogo(() => import('./logos/ChatGPT'), 'ChatGPTLogo'),\n  deepseek: dynamicLogo(() => import('./logos/DeepSeek'), 'DeepSeekLogo'),\n  gemini: dynamicLogo(() => import('./logos/Gemini'), 'GeminiLogo'),\n  googleai: dynamicLogo(() => import('./logos/GoogleAI'), 'GoogleAILogo'),\n  grok: dynamicLogo(() => import('./logos/Grok'), 'GrokLogo'),\n  mistral: dynamicLogo(() => import('./logos/Mistral'), 'MistralLogo'),\n  ollama: dynamicLogo(() => import('./logos/Ollama'), 'OllamaLogo'),\n  openai: dynamicLogo(() => import('./logos/OpenAI'), 'OpenAILogo'),\n  perplexity: dynamicLogo(() => import('./logos/Perplexity'), 'PerplexityLogo'),\n  github: dynamicLogo(() => import('./logos/GitHub'), 'GitHubLogo'),\n  gitlab: dynamicLogo(() => import('./logos/GitLab'), 'GitLabLogo'),\n  bitbucket: dynamicLogo(() => import('./logos/Bitbucket'), 'BitbucketLogo'),\n  google: dynamicLogo(() => import('./logos/Google'), 'GoogleLogo'),\n  linkedin: dynamicLogo(() => import('./logos/LinkedIn'), 'LinkedInLogo'),\n};\n\nexport const TechLogo: FC<TechLogoProps> = ({\n  name,\n  ...props\n}): JSX.Element => {\n  const LazyLogo = logoRecord[name as TechLogoName];\n\n  if (!LazyLogo) {\n    return <></>;\n  }\n\n  return (\n    <Suspense\n      fallback={\n        <div className={cn('animate-pulse bg-neutral-200', props.className)} />\n      }\n    >\n      <LazyLogo {...(props as any)} />\n    </Suspense>\n  );\n};\n"],"mappings":";;;;;;;;AAWA,MAAM,eAAe,UAA8B,eACjD,KAAK,YAAY;CAIf,OAAO,EAAE,UAFK,MADO,SAAS,GACT,YAEG;AAC1B,CAAC;AAEH,MAAM,aAAmE;CACvE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,SAAS,kBAAkB,OAAO,wBAAoB,aAAa;CACnE,OAAO,kBAAkB,OAAO,sBAAkB,WAAW;CAC7D,SAAS,kBAAkB,OAAO,wBAAoB,aAAa;CACnE,SAAS,kBAAkB,OAAO,wBAAoB,aAAa;CACnE,MAAM,kBAAkB,OAAO,qBAAiB,UAAU;CAC1D,MAAM,kBAAkB,OAAO,qBAAiB,UAAU;CAC1D,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,MAAM,kBAAkB,OAAO,qBAAiB,YAAY;CAC5D,MAAM,kBAAkB,OAAO,qBAAiB,UAAU;CAC1D,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,OAAO,kBAAkB,OAAO,wBAAoB,WAAW;CAC/D,OAAO,kBAAkB,OAAO,sBAAkB,WAAW;CAC7D,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,UAAU,kBAAkB,OAAO,yBAAqB,cAAc;CACtE,MAAM,kBAAkB,OAAO,uBAAmB,UAAU;CAC5D,KAAK,kBAAkB,OAAO,sBAAkB,WAAW;CAC3D,KAAK,kBAAkB,OAAO,oBAAgB,SAAS;CACvD,SAAS,kBAAkB,OAAO,wBAAoB,gBAAgB;CACtE,WAAW,kBAAkB,OAAO,0BAAsB,eAAe;CACzE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,SAAS,kBAAkB,OAAO,wBAAoB,aAAa;CACnE,UAAU,kBAAkB,OAAO,yBAAqB,cAAc;CACtE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,UAAU,kBAAkB,OAAO,yBAAqB,cAAc;CACtE,MAAM,kBAAkB,OAAO,qBAAiB,UAAU;CAC1D,SAAS,kBAAkB,OAAO,wBAAoB,aAAa;CACnE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,YAAY,kBAAkB,OAAO,2BAAuB,gBAAgB;CAC5E,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,WAAW,kBAAkB,OAAO,0BAAsB,eAAe;CACzE,QAAQ,kBAAkB,OAAO,uBAAmB,YAAY;CAChE,UAAU,kBAAkB,OAAO,yBAAqB,cAAc;AACxE;AAEA,MAAa,YAA+B,EAC1C,MACA,GAAG,YACc;CACjB,MAAM,WAAW,WAAW;CAE5B,IAAI,CAAC,UACH,OAAO,iCAAI;CAGb,OACE,oBAAC,UAAD;EACE,UACE,oBAAC,OAAD,EAAK,WAAW,GAAG,gCAAgC,MAAM,SAAS,EAAI;YAGxE,oBAAC,UAAD,EAAU,GAAK,MAAgB;CACvB;AAEd"}

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

@@ -1,5 +1,4 @@
-import { TechLogoName } from "./types.mjs";
 import { TechLogo } from "./TechLogo.mjs";
 import { techLogos_exports } from "./techLogos.mjs";
 
-export { TechLogo, TechLogoName, techLogos_exports as TechLogos };
+export { TechLogo, techLogos_exports as TechLogos };

package/dist/esm/components/TechLogo/types.mjs

@@ -1,44 +0,0 @@
-//#region src/components/TechLogo/types.ts
-let TechLogoName = /* @__PURE__ */ function(TechLogoName) {
-	TechLogoName["Adonis"] = "adonis";
-	TechLogoName["Angular"] = "angular";
-	TechLogoName["Astro"] = "astro";
-	TechLogoName["Express"] = "express";
-	TechLogoName["Fastify"] = "fastify";
-	TechLogoName["Hono"] = "hono";
-	TechLogoName["Lynx"] = "lynx";
-	TechLogoName["NestJS"] = "nestjs";
-	TechLogoName["Nextjs"] = "nextjs";
-	TechLogoName["Node"] = "node";
-	TechLogoName["Nuxt"] = "nuxt";
-	TechLogoName["Preact"] = "preact";
-	TechLogoName["React"] = "react";
-	TechLogoName["Solid"] = "solid";
-	TechLogoName["Svelte"] = "svelte";
-	TechLogoName["Tanstack"] = "tanstack";
-	TechLogoName["Vite"] = "vite";
-	TechLogoName["Vue"] = "vue";
-	TechLogoName["Lit"] = "lit";
-	TechLogoName["Vanilla"] = "vanilla";
-	TechLogoName["Anthropic"] = "anthropic";
-	TechLogoName["Claude"] = "claude";
-	TechLogoName["ChatGPT"] = "chatgpt";
-	TechLogoName["DeepSeek"] = "deepseek";
-	TechLogoName["Gemini"] = "gemini";
-	TechLogoName["GoogleAI"] = "googleai";
-	TechLogoName["Grok"] = "grok";
-	TechLogoName["Mistral"] = "mistral";
-	TechLogoName["Ollama"] = "ollama";
-	TechLogoName["OpenAI"] = "openai";
-	TechLogoName["Perplexity"] = "perplexity";
-	TechLogoName["GitHub"] = "github";
-	TechLogoName["GitLab"] = "gitlab";
-	TechLogoName["Bitbucket"] = "bitbucket";
-	TechLogoName["Google"] = "google";
-	TechLogoName["LinkedIn"] = "linkedin";
-	return TechLogoName;
-}({});
-
-//#endregion
-export { TechLogoName };
-//# sourceMappingURL=types.mjs.map

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

@@ -62,7 +62,7 @@ const LINE_PADDING = 12;
 *   placeholder="Write your notes here..."
 *   autoSize={true}
 *   maxRows={20}
-*   variant={InputVariant.DEFAULT}
+*   variant="default"
 * />
 * ```
 */

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

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