npm - @intlayer/design-system - Versions diffs - 7.0.6 → 7.0.8-canary.0 - Mend

@intlayer/design-system 7.0.6 → 7.0.8-canary.0

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

Files changed (150) hide show

package/dist/esm/components/Popover/index.mjs CHANGED Viewed

@@ -1,191 +1,4 @@
-import { cn } from "../../utils/cn.mjs";
-import { Container } from "../Container/index.mjs";
-import { jsx } from "react/jsx-runtime";
+import { Detail, PopoverStatic, PopoverXAlign, PopoverYAlign } from "./static.mjs";
+import { Popover } from "./dynamic.mjs";
-//#region src/components/Popover/index.tsx
-/**
-* Horizontal alignment options for popover positioning
-*/
-let PopoverXAlign = /* @__PURE__ */ function(PopoverXAlign$1) {
-	/** Align popover to start (left) of trigger */
-	PopoverXAlign$1["START"] = "start";
-	/** Align popover to end (right) of trigger */
-	PopoverXAlign$1["END"] = "end";
-	return PopoverXAlign$1;
-}({});
-/**
-* Vertical alignment options for popover positioning
-*/
-let PopoverYAlign = /* @__PURE__ */ function(PopoverYAlign$1) {
-	/** Position popover below the trigger */
-	PopoverYAlign$1["BELOW"] = "bellow";
-	/** Position popover above the trigger */
-	PopoverYAlign$1["ABOVE"] = "above";
-	return PopoverYAlign$1;
-}({});
-/**
-* Popover Component
-*
-* A versatile popover container that displays contextual content when triggered by hover
-* or focus interactions. Built with accessibility in mind and supports multiple positioning
-* options with smooth animations.
-*
-* Features:
-* - Hover and focus-based triggering
-* - Multiple positioning options (above/below, start/end)
-* - Accessibility compliant with ARIA attributes
-* - Smooth animations with configurable delays
-* - Optional directional arrows
-* - Automatic z-index management
-* - Responsive design support
-*
-* Architecture:
-* - Main Popover acts as trigger container
-* - Popover.Detail renders the actual popover content
-* - Uses CSS groups for coordinated hover/focus states
-* - Unique identifier system prevents conflicts
-*
-* @example
-* Basic hover popover:
-* ```jsx
-* <Popover identifier="help-tooltip">
-*   <button>Need Help?</button>
-*
-*   <Popover.Detail identifier="help-tooltip">
-*     <div>This is helpful information!</div>
-*   </Popover.Detail>
-* </Popover>
-* ```
-*
-* @example
-* Focus-triggered popover:
-* ```jsx
-* <Popover identifier="focus-menu">
-*   <input placeholder="Focus me" />
-*
-*   <Popover.Detail
-*     identifier="focus-menu"
-*     isFocusable
-*     isOverable={false}
-*   >
-*     <div>Focus-only menu content</div>
-*   </Popover.Detail>
-* </Popover>
-* ```
-*
-* @example
-* Positioned popover with custom alignment:
-* ```jsx
-* <Popover identifier="positioned">
-*   <span>Hover me</span>
-*
-*   <Popover.Detail
-*     identifier="positioned"
-*     xAlign={PopoverXAlign.END}
-*     yAlign={PopoverYAlign.ABOVE}
-*     displayArrow={false}
-*   >
-*     <div>Above and right-aligned</div>
-*   </Popover.Detail>
-* </Popover>
-* ```
-*
-* Accessibility Features:
-* - Proper ARIA labeling and relationships
-* - Keyboard navigation support
-* - Screen reader compatibility
-* - Focus management
-*
-* Performance Considerations:
-* - CSS-only animations for smooth transitions
-* - Efficient group-based state management
-* - Minimal DOM updates during interactions
-*
-* @param props - Popover component props
-* @returns Trigger container with popover functionality
-*/
-const Popover = ({ children, className, identifier,...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("group/popover relative flex cursor-pointer", className),
-	id: `unrollable-panel-button-${identifier}`,
-	"aria-haspopup": true,
-	...props,
-	children
-});
-/**
-* Popover Detail Component
-*
-* The actual popover content container with advanced positioning, animation, and
-* accessibility features. Automatically manages visibility based on trigger interactions.
-*
-* Features:
-* - Precise positioning with alignment options
-* - Smooth fade and slide animations
-* - Configurable directional arrows
-* - Hover and focus interaction support
-* - Accessibility-compliant ARIA attributes
-* - High z-index for overlay behavior
-* - Automatic visibility management
-*
-* Positioning System:
-* - X-axis: START (left-aligned) or END (right-aligned)
-* - Y-axis: BELOW (underneath) or ABOVE (on top)
-* - Automatic spacing with 1rem gap from trigger
-* - Responsive minimum width matching trigger
-*
-* Arrow Indicators:
-* - CSS-generated triangular arrows
-* - Positioned based on alignment settings
-* - Points toward trigger for visual connection
-* - Can be disabled for clean, minimal appearance
-*
-* Animation Behavior:
-* - Starts invisible with opacity: 0
-* - Smooth 400ms transitions with easing
-* - 800ms delay for hover states (prevents flicker)
-* - Immediate hiding when trigger loses focus/hover
-*
-* @example
-* Rich content popover:
-* ```jsx
-* <Popover.Detail identifier="rich-content">
-*   <div className="p-4">
-*     <h3>Popover Title</h3>
-*     <p>Detailed information with multiple paragraphs.</p>
-*     <button>Action Button</button>
-*   </div>
-* </Popover.Detail>
-* ```
-*
-* @example
-* Menu-style popover:
-* ```jsx
-* <Popover.Detail
-*   identifier="context-menu"
-*   displayArrow={false}
-*   xAlign={PopoverXAlign.END}
-* >
-*   <ul className="py-2">
-*     <li><button className="w-full px-4 py-2">Edit</button></li>
-*     <li><button className="w-full px-4 py-2">Delete</button></li>
-*   </ul>
-* </Popover.Detail>
-* ```
-*
-* @param props - Popover Detail component props
-* @returns Positioned popover content with animations and accessibility
-*/
-const Detail = ({ children, isHidden = void 0, isOverable = true, isFocusable = false, xAlign = PopoverXAlign.START, yAlign = PopoverYAlign.BELOW, identifier, className, displayArrow = true,...props }) => /* @__PURE__ */ jsx(Container, {
-	transparency: "sm",
-	role: "group",
-	"aria-hidden": isHidden,
-	"aria-labelledby": `unrollable-panel-button-${identifier}`,
-	id: `unrollable-panel-${identifier}`,
-	className: cn("absolute z-[1000] min-w-full rounded-md ring-1 ring-neutral", xAlign === "start" && "left-0", xAlign === "end" && "right-0", yAlign === "bellow" && "top-[calc(100%+1rem)]", yAlign === "above" && "bottom-[calc(100%+1rem)]", displayArrow && "before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]", displayArrow && xAlign === "start" && "before:left-2", displayArrow && xAlign === "end" && "before:right-2", displayArrow && yAlign === "bellow" && "before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent", displayArrow && yAlign === "above" && "before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent", "overflow-x-visible opacity-0 transition-all duration-400 ease-in-out", isHidden !== false ? "invisible" : "visible opacity-100 delay-800", isOverable && "group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800", isFocusable && "group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800", className),
-	...props,
-	children
-});
-Popover.Detail = Detail;
-//#endregion
-export { Popover, PopoverXAlign, PopoverYAlign };
-//# sourceMappingURL=index.mjs.map
+export { Detail, Popover, PopoverStatic, PopoverXAlign, PopoverYAlign };

package/dist/esm/components/SocialNetworks/DiscordLogo.mjs CHANGED Viewed

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 const DiscordLogo = (props) => /* @__PURE__ */ jsx("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	width: "800px",
-	height: "auto",
+	height: "800px",
 	viewBox: "0 0 71 80",
 	fill: "none",
 	role: "img",

package/dist/esm/components/SocialNetworks/DiscordLogo.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DiscordLogo.mjs","names":["DiscordLogo: FC<SVGProps<SVGSVGElement>>"],"sources":["../../../../src/components/SocialNetworks/DiscordLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const DiscordLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"800px\"\n height=\"~~auto~~\"\n viewBox=\"0 0 71 80\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Discord logo\"\n {...props}\n >\n <path\n d=\"M60.1045 13.8978C55.5792 11.8214 50.7265 10.2916 45.6527 9.41542C45.5603 9.39851 45.468 9.44077 45.4204 9.52529C44.7963 10.6353 44.105 12.0834 43.6209 13.2216C38.1637 12.4046 32.7345 12.4046 27.3892 13.2216C26.905 12.0581 26.1886 10.6353 25.5617 9.52529C25.5141 9.44359 25.4218 9.40133 25.3294 9.41542C20.2584 10.2888 15.4057 11.8186 10.8776 13.8978C10.8384 13.9147 10.8048 13.9429 10.7825 13.9795C1.57795 27.7309 -0.943561 41.1443 0.293408 54.3914C0.299005 54.4562 0.335386 54.5182 0.385761 54.5576C6.45866 59.0174 12.3413 61.7249 18.1147 63.5195C18.2071 63.5477 18.305 63.5139 18.3638 63.4378C19.7295 61.5728 20.9469 59.6063 21.9907 57.5383C22.0523 57.4172 21.9935 57.2735 21.8676 57.2256C19.9366 56.4931 18.0979 55.6 16.3292 54.5858C16.1893 54.5041 16.1781 54.304 16.3068 54.2082C16.679 53.9293 17.0513 53.6391 17.4067 53.3461C17.471 53.2926 17.5606 53.2813 17.6362 53.3151C29.2558 58.6202 41.8354 58.6202 53.3179 53.3151C53.3935 53.2785 53.4831 53.2898 53.5502 53.3433C53.9057 53.6363 54.2779 53.9293 54.6529 54.2082C54.7816 54.304 54.7732 54.5041 54.6333 54.5858C52.8646 55.6197 51.0259 56.4931 49.0921 57.2228C48.9662 57.2707 48.9102 57.4172 48.9718 57.5383C50.038 59.6034 51.2554 61.5699 52.5959 63.435C52.6519 63.5139 52.7526 63.5477 52.845 63.5195C58.6464 61.7249 64.529 59.0174 70.6019 54.5576C70.6551 54.5182 70.6887 54.459 70.6943 54.3942C72.1747 39.0791 68.2147 25.7757 60.1968 13.9823C60.1772 13.9429 60.1437 13.9147 60.1045 13.8978ZM23.7259 46.3253C20.2276 46.3253 17.3451 43.1136 17.3451 39.1693C17.3451 35.225 20.1717 32.0133 23.7259 32.0133C27.308 32.0133 30.1626 35.2532 30.1066 39.1693C30.1066 43.1136 27.28 46.3253 23.7259 46.3253ZM47.3178 46.3253C43.8196 46.3253 40.9371 43.1136 40.9371 39.1693C40.9371 35.225 43.7636 32.0133 47.3178 32.0133C50.9 32.0133 53.7545 35.2532 53.6986 39.1693C53.6986 43.1136 50.9 46.3253 47.3178 46.3253Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n"],"mappings":";;;AAEA,MAAaA,eAA4C,UACvD,oBAAC;CACC,OAAM;CACN,OAAM;CACN,QAAO;CACP,SAAQ;CACR,MAAK;CACL,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC;EACC,GAAE;EACF,MAAK;GACL;EACE"}
1	+ {"version":3,"file":"DiscordLogo.mjs","names":["DiscordLogo: FC<SVGProps<SVGSVGElement>>"],"sources":["../../../../src/components/SocialNetworks/DiscordLogo.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const DiscordLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"800px\"\n height=\"800px\"\n viewBox=\"0 0 71 80\"\n fill=\"none\"\n role=\"img\"\n aria-label=\"Discord logo\"\n {...props}\n >\n <path\n d=\"M60.1045 13.8978C55.5792 11.8214 50.7265 10.2916 45.6527 9.41542C45.5603 9.39851 45.468 9.44077 45.4204 9.52529C44.7963 10.6353 44.105 12.0834 43.6209 13.2216C38.1637 12.4046 32.7345 12.4046 27.3892 13.2216C26.905 12.0581 26.1886 10.6353 25.5617 9.52529C25.5141 9.44359 25.4218 9.40133 25.3294 9.41542C20.2584 10.2888 15.4057 11.8186 10.8776 13.8978C10.8384 13.9147 10.8048 13.9429 10.7825 13.9795C1.57795 27.7309 -0.943561 41.1443 0.293408 54.3914C0.299005 54.4562 0.335386 54.5182 0.385761 54.5576C6.45866 59.0174 12.3413 61.7249 18.1147 63.5195C18.2071 63.5477 18.305 63.5139 18.3638 63.4378C19.7295 61.5728 20.9469 59.6063 21.9907 57.5383C22.0523 57.4172 21.9935 57.2735 21.8676 57.2256C19.9366 56.4931 18.0979 55.6 16.3292 54.5858C16.1893 54.5041 16.1781 54.304 16.3068 54.2082C16.679 53.9293 17.0513 53.6391 17.4067 53.3461C17.471 53.2926 17.5606 53.2813 17.6362 53.3151C29.2558 58.6202 41.8354 58.6202 53.3179 53.3151C53.3935 53.2785 53.4831 53.2898 53.5502 53.3433C53.9057 53.6363 54.2779 53.9293 54.6529 54.2082C54.7816 54.304 54.7732 54.5041 54.6333 54.5858C52.8646 55.6197 51.0259 56.4931 49.0921 57.2228C48.9662 57.2707 48.9102 57.4172 48.9718 57.5383C50.038 59.6034 51.2554 61.5699 52.5959 63.435C52.6519 63.5139 52.7526 63.5477 52.845 63.5195C58.6464 61.7249 64.529 59.0174 70.6019 54.5576C70.6551 54.5182 70.6887 54.459 70.6943 54.3942C72.1747 39.0791 68.2147 25.7757 60.1968 13.9823C60.1772 13.9429 60.1437 13.9147 60.1045 13.8978ZM23.7259 46.3253C20.2276 46.3253 17.3451 43.1136 17.3451 39.1693C17.3451 35.225 20.1717 32.0133 23.7259 32.0133C27.308 32.0133 30.1626 35.2532 30.1066 39.1693C30.1066 43.1136 27.28 46.3253 23.7259 46.3253ZM47.3178 46.3253C43.8196 46.3253 40.9371 43.1136 40.9371 39.1693C40.9371 35.225 43.7636 32.0133 47.3178 32.0133C50.9 32.0133 53.7545 35.2532 53.6986 39.1693C53.6986 43.1136 50.9 46.3253 47.3178 46.3253Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n"],"mappings":";;;AAEA,MAAaA,eAA4C,UACvD,oBAAC;CACC,OAAM;CACN,OAAM;CACN,QAAO;CACP,SAAQ;CACR,MAAK;CACL,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC;EACC,GAAE;EACF,MAAK;GACL;EACE"}

package/dist/esm/components/SocialNetworks/index.mjs CHANGED Viewed

@@ -55,7 +55,7 @@ const socialNetworks = [
 const DefaultRenderItem = ({ href, component, label,...iconProps }) => /* @__PURE__ */ jsx("a", {
 	href,
 	"aria-label": label,
-	className: "max-h-4 max-w-4",
+	className: "max-h-4 max-w-4 shrink-0",
 	...iconProps,
 	children: component
 }, href);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["DefaultRenderItem: FC<DefaultRenderItemProps>"],"sources":["../../../../src/components/SocialNetworks/index.tsx"],"sourcesContent":["import type {\n AnchorHTMLAttributes,\n DetailedHTMLProps,\n FC,\n ReactNode,\n} from 'react';\nimport { DiscordLogo } from './DiscordLogo';\nimport { FacebookLogo } from './FacebookLogo';\nimport { InstagramLogo } from './InstagramLogo';\nimport { LinkedInLogo } from './LinkedInLogo';\nimport { ProductHuntLogo } from './ProductHuntLogo';\nimport { TiktokLogo } from './TiktokLogo';\nimport { XLogo } from './XLogo';\nimport { YoutubeLogo } from './YoutubeLogo';\n\nconst socialNetworks = [\n {\n href: 'https://discord.gg/7uxamYVeCk',\n component: <DiscordLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Discord',\n },\n {\n href: 'https://www.producthunt.com/posts/intlayer?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-intlayer',\n component: <ProductHuntLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Product Hunt',\n },\n {\n href: 'https://x.com/Intlayer183096',\n component: <XLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'X',\n },\n {\n href: 'https://www.youtube.com/@intlayer',\n component: <YoutubeLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'YouTube',\n },\n {\n href: 'https://www.linkedin.com/company/intlayerorg',\n component: <LinkedInLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'LinkedIn',\n },\n {\n href: 'https://www.tiktok.com/@intlayer',\n component: <TiktokLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'TikTok',\n },\n {\n href: 'https://www.instagram.com/intlayer/',\n component: <InstagramLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Instagram',\n },\n {\n href: 'https://www.facebook.com/intlayer',\n component: <FacebookLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Facebook',\n },\n];\n\ntype SocialNetworksProps = {\n renderItem?: (item: (typeof socialNetworks)[number]) => ReactNode;\n} & DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n>;\n\ntype DefaultRenderItemProps = DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n> & {\n component: ReactNode;\n label: string;\n};\n\nconst DefaultRenderItem: FC<DefaultRenderItemProps> = ({\n href,\n component,\n label,\n ...iconProps\n}) => (\n <a\n key={href}\n href={href}\n aria-label={label}\n className=\"max-h-4 max-w-4\"\n {...iconProps}\n >\n {component}\n </a>\n);\n\nexport const SocialNetworks = ({\n renderItem,\n ...iconProps\n}: SocialNetworksProps) =>\n socialNetworks.map(\n renderItem ??\n ((props) => (\n <DefaultRenderItem {...props} {...iconProps} key={props.label} />\n ))\n );\n\nexport * from './DiscordLogo';\nexport * from './FacebookLogo';\nexport * from './InstagramLogo';\nexport * from './LinkedInLogo';\nexport * from './ProductHuntLogo';\nexport * from './TiktokLogo';\nexport * from './XLogo';\nexport * from './YoutubeLogo';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,oBAAC,eAAY,WAAU,iCAAiC;EACnE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,mBAAgB,WAAU,iCAAiC;EACvE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,SAAM,WAAU,iCAAiC;EAC7D,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,eAAY,WAAU,iCAAiC;EACnE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,gBAAa,WAAU,iCAAiC;EACpE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,cAAW,WAAU,iCAAiC;EAClE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,iBAAc,WAAU,iCAAiC;EACrE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,gBAAa,WAAU,iCAAiC;EACpE,OAAO;EACR;CACF;AAiBD,MAAMA,qBAAiD,EACrD,MACA,WACA,MACA,GAAG,gBAEH,oBAAC;CAEO;CACN,cAAY;CACZ,WAAU;CACV,GAAI;WAEH;GANI,KAOH;AAGN,MAAa,kBAAkB,EAC7B,WACA,GAAG,gBAEH,eAAe,IACb,gBACI,UACA,8BAAC;CAAkB,GAAI;CAAO,GAAI;CAAW,KAAK,MAAM;EAAS,EAEtE"}
1	+ {"version":3,"file":"index.mjs","names":["DefaultRenderItem: FC<DefaultRenderItemProps>"],"sources":["../../../../src/components/SocialNetworks/index.tsx"],"sourcesContent":["import type {\n AnchorHTMLAttributes,\n DetailedHTMLProps,\n FC,\n ReactNode,\n} from 'react';\nimport { DiscordLogo } from './DiscordLogo';\nimport { FacebookLogo } from './FacebookLogo';\nimport { InstagramLogo } from './InstagramLogo';\nimport { LinkedInLogo } from './LinkedInLogo';\nimport { ProductHuntLogo } from './ProductHuntLogo';\nimport { TiktokLogo } from './TiktokLogo';\nimport { XLogo } from './XLogo';\nimport { YoutubeLogo } from './YoutubeLogo';\n\nconst socialNetworks = [\n {\n href: 'https://discord.gg/7uxamYVeCk',\n component: <DiscordLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Discord',\n },\n {\n href: 'https://www.producthunt.com/posts/intlayer?embed=true&utm_source=badge-featured&utm_medium=badge&utm_souce=badge-intlayer',\n component: <ProductHuntLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Product Hunt',\n },\n {\n href: 'https://x.com/Intlayer183096',\n component: <XLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'X',\n },\n {\n href: 'https://www.youtube.com/@intlayer',\n component: <YoutubeLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'YouTube',\n },\n {\n href: 'https://www.linkedin.com/company/intlayerorg',\n component: <LinkedInLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'LinkedIn',\n },\n {\n href: 'https://www.tiktok.com/@intlayer',\n component: <TiktokLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'TikTok',\n },\n {\n href: 'https://www.instagram.com/intlayer/',\n component: <InstagramLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Instagram',\n },\n {\n href: 'https://www.facebook.com/intlayer',\n component: <FacebookLogo className=\"h-auto max-h-full max-w-full\" />,\n label: 'Facebook',\n },\n];\n\ntype SocialNetworksProps = {\n renderItem?: (item: (typeof socialNetworks)[number]) => ReactNode;\n} & DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n>;\n\ntype DefaultRenderItemProps = DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n> & {\n component: ReactNode;\n label: string;\n};\n\nconst DefaultRenderItem: FC<DefaultRenderItemProps> = ({\n href,\n component,\n label,\n ...iconProps\n}) => (\n <a\n key={href}\n href={href}\n aria-label={label}\n className=\"max-h-4 max-w-4 shrink-0\"\n {...iconProps}\n >\n {component}\n </a>\n);\n\nexport const SocialNetworks = ({\n renderItem,\n ...iconProps\n}: SocialNetworksProps) =>\n socialNetworks.map(\n renderItem ??\n ((props) => (\n <DefaultRenderItem {...props} {...iconProps} key={props.label} />\n ))\n );\n\nexport * from './DiscordLogo';\nexport * from './FacebookLogo';\nexport * from './InstagramLogo';\nexport * from './LinkedInLogo';\nexport * from './ProductHuntLogo';\nexport * from './TiktokLogo';\nexport * from './XLogo';\nexport * from './YoutubeLogo';\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,oBAAC,eAAY,WAAU,iCAAiC;EACnE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,mBAAgB,WAAU,iCAAiC;EACvE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,SAAM,WAAU,iCAAiC;EAC7D,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,eAAY,WAAU,iCAAiC;EACnE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,gBAAa,WAAU,iCAAiC;EACpE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,cAAW,WAAU,iCAAiC;EAClE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,iBAAc,WAAU,iCAAiC;EACrE,OAAO;EACR;CACD;EACE,MAAM;EACN,WAAW,oBAAC,gBAAa,WAAU,iCAAiC;EACpE,OAAO;EACR;CACF;AAiBD,MAAMA,qBAAiD,EACrD,MACA,WACA,MACA,GAAG,gBAEH,oBAAC;CAEO;CACN,cAAY;CACZ,WAAU;CACV,GAAI;WAEH;GANI,KAOH;AAGN,MAAa,kBAAkB,EAC7B,WACA,GAAG,gBAEH,eAAe,IACb,gBACI,UACA,8BAAC;CAAkB,GAAI;CAAO,GAAI;CAAW,KAAK,MAAM;EAAS,EAEtE"}

package/dist/esm/components/SwitchSelector/index.mjs CHANGED Viewed

@@ -15,25 +15,13 @@ const defaultChoices = [{
 	content: "On",
 	value: true
 }];
-/**
-* Color variants for the SwitchSelector component
-*
-* @enum SwitchSelectorColor
-*/
 let SwitchSelectorColor = /* @__PURE__ */ function(SwitchSelectorColor$1) {
-	/** Primary brand color theme */
 	SwitchSelectorColor$1["PRIMARY"] = "primary";
-	/** Secondary accent color theme */
 	SwitchSelectorColor$1["SECONDARY"] = "secondary";
-	/** Destructive/error color theme for dangerous actions */
 	SwitchSelectorColor$1["DESTRUCTIVE"] = "destructive";
-	/** Neutral gray color theme */
 	SwitchSelectorColor$1["NEUTRAL"] = "neutral";
-	/** Light color theme for dark backgrounds */
 	SwitchSelectorColor$1["LIGHT"] = "light";
-	/** Dark color theme for light backgrounds */
 	SwitchSelectorColor$1["DARK"] = "dark";
-	/** Text color theme that adapts to content */
 	SwitchSelectorColor$1["TEXT"] = "text";
 	return SwitchSelectorColor$1;
 }({});
@@ -49,17 +37,9 @@ const switchSelectorVariant = cva("flex w-fit flex-row gap-2 rounded-full border
 	} },
 	defaultVariants: { color: SwitchSelectorColor.PRIMARY }
 });
-/**
-* Size variants for the SwitchSelector component
-*
-* @enum SwitchSelectorSize
-*/
 let SwitchSelectorSize = /* @__PURE__ */ function(SwitchSelectorSize$1) {
-	/** Small size - compact for tight layouts */
 	SwitchSelectorSize$1["SM"] = "sm";
-	/** Medium size - standard for most use cases */
 	SwitchSelectorSize$1["MD"] = "md";
-	/** Large size - prominent for important selections */
 	SwitchSelectorSize$1["LG"] = "lg";
 	return SwitchSelectorSize$1;
 }({});
@@ -81,93 +61,19 @@ const indicatorVariant = cva("absolute top-0 z-[-1] h-full w-auto rounded-full t
 	[SwitchSelectorColor.TEXT]: "bg-text aria-selected:text-text-opposite"
 } } });
 /**
-* SwitchSelector - A versatile toggle component for multi-option selection
-*
-* A sophisticated switch selector component that provides an elegant way to choose between
-* multiple options with smooth animations and visual feedback. Built with accessibility
-* in mind, it supports keyboard navigation and screen reader announcements.
 *
-* ## Key Features
-* - **Smooth Animations**: Fluid indicator transitions between options
-* - **Accessible**: Full keyboard navigation and ARIA support
-* - **Flexible Styling**: Multiple color themes and size variants
-* - **Generic Types**: Type-safe values with TypeScript generics
-* - **Controlled/Uncontrolled**: Supports both usage patterns
-* - **Custom Content**: Rich content support including icons and text
-*
-* ## Use Cases
-* - Settings toggles (On/Off, Light/Dark theme)
-* - Status selectors (Draft/Published/Archived)
-* - View mode switches (List/Grid/Card)
-* - Filter options (All/Active/Completed)
-* - Language or region selection
-* - Any multi-option toggle interface
-*
-* ## Accessibility
-* - **Keyboard Navigation**: Tab to focus, arrow keys to navigate options
-* - **Screen Readers**: Proper ARIA labels and role attributes
-* - **Focus Management**: Clear visual focus indicators
-* - **State Announcements**: Selection changes announced to assistive technology
-*
-* ## Visual Design
-* The component features a pill-shaped container with individual choice buttons.
-* A smooth-sliding background indicator highlights the active selection, creating
-* an intuitive and polished user experience.
-*
-* @template T - The type of values for the choices (string, number, boolean, etc.)
-*
-* @example
-* Basic boolean toggle:
-* ```tsx
-* <SwitchSelector
-*   defaultValue={false}
-*   onChange={(value) => setEnabled(value)}
-* />
-* ```
-*
-* @example
-* Multi-option selector with custom content:
-* ```tsx
-* <SwitchSelector
-*   choices={[
-*     { content: <>📝 Draft</>, value: 'draft' },
-*     { content: <>✅ Published</>, value: 'published' },
-*     { content: <>📦 Archived</>, value: 'archived' }
-*   ]}
-*   value={currentStatus}
-*   onChange={setStatus}
-*   color={SwitchSelectorColor.SECONDARY}
-*   size={SwitchSelectorSize.LG}
-* />
-* ```
-*
-* @example
-* View mode switcher:
-* ```tsx
-* <SwitchSelector
-*   choices={[
-*     { content: 'List', value: 'list' },
-*     { content: 'Grid', value: 'grid' },
-*     { content: 'Card', value: 'card' }
-*   ]}
-*   defaultValue="grid"
-*   color={SwitchSelectorColor.NEUTRAL}
-*   onChange={(view) => setViewMode(view)}
-* />
-* ```
+* Component that allows the user to select one of the provided choices.
 *
-* @example
-* Theme selector with icons:
-* ```tsx
+* Example:
+* ```jsx
 * <SwitchSelector
 *   choices={[
-*     { content: <>☀️ Light</>, value: 'light' },
-*     { content: <>🌙 Dark</>, value: 'dark' },
-*     { content: <>⚙️ System</>, value: 'system' }
+*     { content: 'Option 1', value: 'option1' },
+*     { content: 'Option 2', value: 'option2' },
+*     { content: 'Option 3', value: 'option3' },
 *   ]}
-*   value={theme}
-*   onChange={setTheme}
-*   size={SwitchSelectorSize.SM}
+*   value="option1"
+*   onChange={(choice) => console.log(choice)}
 * />
 * ```
 */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["defaultChoices: SwitchSelectorChoices<boolean>","value"],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n type HTMLAttributes,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\n/*\n Configuration for a single choice in the SwitchSelector\n \n @template T - The type of the choice value\n * @interface SwitchSelectorChoice\n /\nexport type SwitchSelectorChoice<T = boolean> = {\n /* The visual content displayed for this choice (text, icons, or React elements) /\n content: ReactNode;\n /* The value associated with this choice /\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\n\n/\n Array of choices for the SwitchSelector component\n \n @template T - The type of the choice values\n /\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\n/\n Props interface for the SwitchSelector component\n \n @template T - The type of the choice values\n * @interface SwitchSelectorProps\n /\nexport type SwitchSelectorProps<T = boolean> = {\n /\n Array of selectable choices\n * @default [{ content: 'Off', value: false }, { content: 'On', value: true }]\n * @example\n * ```tsx\n * <SwitchSelector choices={[\n * { content: 'Draft', value: 'draft' },\n * { content: 'Published', value: 'published' },\n * { content: 'Archived', value: 'archived' }\n * ]} />\n * ```\n /\n choices?: SwitchSelectorChoices<T>;\n\n /\n Controlled value for the selected choice\n * @example\n * ```tsx\n * const [status, setStatus] = useState('draft');\n * <SwitchSelector value={status} onChange={setStatus} />\n * ```\n /\n value?: T;\n\n /\n Default selected value for uncontrolled mode\n * @example\n * ```tsx\n * <SwitchSelector defaultValue=\"published\" />\n * ```\n /\n defaultValue?: T;\n\n /\n Callback function triggered when selection changes\n * @param choice - The newly selected choice value\n * @example\n * ```tsx\n * <SwitchSelector onChange={(value) => console.log('Selected:', value)} />\n * ```\n /\n onChange?: (choice: T) => void;\n\n /* Additional CSS classes for custom styling /\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\n/\n Color variants for the SwitchSelector component\n \n @enum SwitchSelectorColor\n /\nexport enum SwitchSelectorColor {\n /* Primary brand color theme /\n PRIMARY = 'primary',\n /* Secondary accent color theme /\n SECONDARY = 'secondary',\n /* Destructive/error color theme for dangerous actions /\n DESTRUCTIVE = 'destructive',\n /* Neutral gray color theme /\n NEUTRAL = 'neutral',\n /* Light color theme for dark backgrounds /\n LIGHT = 'light',\n /* Dark color theme for light backgrounds /\n DARK = 'dark',\n /* Text color theme that adapts to content /\n TEXT = 'text',\n}\n\nconst switchSelectorVariant = cva(\n 'flex w-fit flex-row gap-2 rounded-full border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n [SwitchSelectorColor.PRIMARY]: 'border-primary text-primary',\n [SwitchSelectorColor.SECONDARY]: 'border-secondary text-secondary',\n [SwitchSelectorColor.DESTRUCTIVE]:\n 'border-destructive bg-destructive text-destructive',\n [SwitchSelectorColor.NEUTRAL]: 'border-neutral text-neutral',\n [SwitchSelectorColor.LIGHT]: 'border-white text-white',\n [SwitchSelectorColor.DARK]: 'border-neutral-800 text-neutral-800',\n [SwitchSelectorColor.TEXT]: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: SwitchSelectorColor.PRIMARY,\n },\n }\n);\n\n/\n Size variants for the SwitchSelector component\n \n @enum SwitchSelectorSize\n /\nexport enum SwitchSelectorSize {\n /* Small size - compact for tight layouts /\n SM = 'sm',\n /* Medium size - standard for most use cases /\n MD = 'md',\n /* Large size - prominent for important selections /\n LG = 'lg',\n}\n\nconst choiceVariant = cva(\n 'z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n [SwitchSelectorSize.SM]: 'px-2 py-1 text-xs',\n [SwitchSelectorSize.MD]: 'p-2 text-sm',\n [SwitchSelectorSize.LG]: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: SwitchSelectorSize.MD,\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n [SwitchSelectorColor.PRIMARY]: 'bg-primary aria-selected:text-text',\n [SwitchSelectorColor.SECONDARY]: 'bg-secondary aria-selected:text-text',\n [SwitchSelectorColor.DESTRUCTIVE]:\n 'bg-destructive aria-selected:text-text',\n [SwitchSelectorColor.NEUTRAL]: 'bg-neutral aria-selected:text-white',\n [SwitchSelectorColor.LIGHT]: 'bg-white aria-selected:text-black',\n [SwitchSelectorColor.DARK]: 'bg-neutral-800 aria-selected:text-white',\n [SwitchSelectorColor.TEXT]: 'bg-text aria-selected:text-text-opposite',\n },\n },\n }\n);\n\n/\n SwitchSelector - A versatile toggle component for multi-option selection\n \n A sophisticated switch selector component that provides an elegant way to choose between\n * multiple options with smooth animations and visual feedback. Built with accessibility\n * in mind, it supports keyboard navigation and screen reader announcements.\n \n ## Key Features\n * - Smooth Animations: Fluid indicator transitions between options\n * - Accessible: Full keyboard navigation and ARIA support\n * - Flexible Styling: Multiple color themes and size variants\n * - Generic Types: Type-safe values with TypeScript generics\n * - Controlled/Uncontrolled: Supports both usage patterns\n * - Custom Content: Rich content support including icons and text\n \n ## Use Cases\n * - Settings toggles (On/Off, Light/Dark theme)\n * - Status selectors (Draft/Published/Archived)\n * - View mode switches (List/Grid/Card)\n * - Filter options (All/Active/Completed)\n * - Language or region selection\n * - Any multi-option toggle interface\n \n ## Accessibility\n * - Keyboard Navigation: Tab to focus, arrow keys to navigate options\n * - Screen Readers: Proper ARIA labels and role attributes\n * - Focus Management: Clear visual focus indicators\n * - State Announcements: Selection changes announced to assistive technology\n \n ## Visual Design\n * The component features a pill-shaped container with individual choice buttons.\n * A smooth-sliding background indicator highlights the active selection, creating\n * an intuitive and polished user experience.\n \n @template T - The type of values for the choices (string, number, boolean, etc.)\n \n @example\n * Basic boolean toggle:\n * ```tsx\n * <SwitchSelector\n * defaultValue={false}\n * onChange={(value) => setEnabled(value)}\n * />\n * ```\n \n @example\n * Multi-option selector with custom content:\n * ```tsx\n * <SwitchSelector\n * choices={[\n * { content: <>📝 Draft</>, value: 'draft' },\n * { content: <>✅ Published</>, value: 'published' },\n * { content: <>📦 Archived</>, value: 'archived' }\n * ]}\n * value={currentStatus}\n * onChange={setStatus}\n * color={SwitchSelectorColor.SECONDARY}\n * size={SwitchSelectorSize.LG}\n * />\n * ```\n \n @example\n * View mode switcher:\n * ```tsx\n * <SwitchSelector\n * choices={[\n * { content: 'List', value: 'list' },\n * { content: 'Grid', value: 'grid' },\n * { content: 'Card', value: 'card' }\n * ]}\n * defaultValue=\"grid\"\n * color={SwitchSelectorColor.NEUTRAL}\n * onChange={(view) => setViewMode(view)}\n * />\n * ```\n \n @example\n * Theme selector with icons:\n * ```tsx\n * <SwitchSelector\n * choices={[\n * { content: <>☀️ Light</>, value: 'light' },\n * { content: <>🌙 Dark</>, value: 'dark' },\n * { content: <>⚙️ System</>, value: 'system' }\n * ]}\n * value={theme}\n * onChange={setTheme}\n * size={SwitchSelectorSize.SM}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = SwitchSelectorColor.PRIMARY,\n size = SwitchSelectorSize.MD,\n className,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n useEffect(() => {\n if (value === undefined) return;\n setValue(value);\n }, [value]);\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = value === valueState;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected}\n disabled={isSelected}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n >\n {content}\n </button>\n );\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAiCA,MAAMA,iBAAiD,CACrD;CAAE,SAAS;CAAO,OAAO;CAAO,EAChC;CAAE,SAAS;CAAM,OAAO;CAAM,CAC/B;;;;;;AA8DD,IAAY,sEAAL;;AAEL;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;;AAGF,MAAM,wBAAwB,IAC5B,mEACA;CACE,UAAU,EACR,OAAO;GACJ,oBAAoB,UAAU;GAC9B,oBAAoB,YAAY;GAChC,oBAAoB,cACnB;GACD,oBAAoB,UAAU;GAC9B,oBAAoB,QAAQ;GAC5B,oBAAoB,OAAO;GAC3B,oBAAoB,OAAO;EAC7B,EACF;CACD,iBAAiB,EACf,OAAO,oBAAoB,SAC5B;CACF,CACF;;;;;;AAOD,IAAY,oEAAL;;AAEL;;AAEA;;AAEA;;;AAGF,MAAM,gBAAgB,IACpB,4LACA;CACE,UAAU,EACR,MAAM;GACH,mBAAmB,KAAK;GACxB,mBAAmB,KAAK;GACxB,mBAAmB,KAAK;EAC1B,EACF;CACD,iBAAiB,EACf,MAAM,mBAAmB,IAC1B;CACF,CACF;AAED,MAAM,mBAAmB,IACvB,mIACA,EACE,UAAU,EACR,OAAO;EACJ,oBAAoB,UAAU;EAC9B,oBAAoB,YAAY;EAChC,oBAAoB,cACnB;EACD,oBAAoB,UAAU;EAC9B,oBAAoB,QAAQ;EAC5B,oBAAoB,OAAO;EAC3B,oBAAoB,OAAO;CAC7B,EACF,EACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6FD,MAAa,kBAAsB,EACjC,UAAU,gBACV,OACA,cACA,UACA,QAAQ,oBAAoB,SAC5B,OAAO,mBAAmB,IAC1B,gBAC4B;CAC5B,MAAM,CAAC,YAAY,YAAY,SAC7B,SAAS,gBAAgB,QAAQ,GAAG,MACrC;CACD,MAAM,cAAc,OAA4B,EAAE,CAAC;CACnD,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,4BAA4B,gBAAgB,YAAY;CAEhE,MAAM,gBAAgB,aAAgB;AACpC,WAAS,SAAS;AAClB,aAAW,SAAS;;AAGtB,iBAAgB;AACd,MAAI,UAAU,OAAW;AACzB,WAAS,MAAM;IACd,CAAC,MAAM,CAAC;AAEX,QACE,oBAAC;EACC,WAAW,sBAAsB;GAC/B;GACA;GACD,CAAC;EACF,MAAK;YAEL,qBAAC;GAAI,WAAU;cACZ,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,eAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAOC,YAAU,YAAY,OAAOA,YAAU;IAEhD,MAAM,aAAaA,YAAU;AAE7B,WACE,8BAAC;KACC,GAAI;KACJ,WAAW,GACT,cAAc,EACZ,MACD,CAAC,CACH;KACD,KAAK,aAAaA,UAAQ;KAC1B,MAAK;KACL,eAAe,aAAaA,QAAM;KAClC,iBAAe;KACf,UAAU;KACV,MAAM,OAAO;AACX,kBAAY,QAAQ,SAAS;;OAG9B,QACM;KAEX,EACD,2BACC,oBAAC;IACC,WAAW,GACT,iBAAiB,EACf,OACD,CAAC,CACH;IACD,OAAO;IACP,KAAK;KACL;IAEA;GACF"}
1	+ {"version":3,"file":"index.mjs","names":["defaultChoices: SwitchSelectorChoices<boolean>","value"],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n type HTMLAttributes,\n type ReactNode,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport type SwitchSelectorChoice<T = boolean> = {\n content: ReactNode;\n value: T;\n} & HTMLAttributes<HTMLButtonElement>;\nexport type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];\n\nconst defaultChoices: SwitchSelectorChoices<boolean> = [\n { content: 'Off', value: false },\n { content: 'On', value: true },\n];\n\nexport type SwitchSelectorProps<T = boolean> = {\n choices?: SwitchSelectorChoices<T>;\n value?: T;\n defaultValue?: T;\n onChange?: (choice: T) => void;\n className?: string;\n} & VariantProps<typeof switchSelectorVariant> &\n VariantProps<typeof choiceVariant>;\n\nexport enum SwitchSelectorColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n}\n\nconst switchSelectorVariant = cva(\n 'flex w-fit flex-row gap-2 rounded-full border-[1.5px] p-[1.5px]',\n {\n variants: {\n color: {\n [SwitchSelectorColor.PRIMARY]: 'border-primary text-primary',\n [SwitchSelectorColor.SECONDARY]: 'border-secondary text-secondary',\n [SwitchSelectorColor.DESTRUCTIVE]:\n 'border-destructive bg-destructive text-destructive',\n [SwitchSelectorColor.NEUTRAL]: 'border-neutral text-neutral',\n [SwitchSelectorColor.LIGHT]: 'border-white text-white',\n [SwitchSelectorColor.DARK]: 'border-neutral-800 text-neutral-800',\n [SwitchSelectorColor.TEXT]: 'border-text text-text',\n },\n },\n defaultVariants: {\n color: SwitchSelectorColor.PRIMARY,\n },\n }\n);\n\nexport enum SwitchSelectorSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n}\n\nconst choiceVariant = cva(\n 'z-1 w-full flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n [SwitchSelectorSize.SM]: 'px-2 py-1 text-xs',\n [SwitchSelectorSize.MD]: 'p-2 text-sm',\n [SwitchSelectorSize.LG]: 'p-4 text-base',\n },\n },\n defaultVariants: {\n size: SwitchSelectorSize.MD,\n },\n }\n);\n\nconst indicatorVariant = cva(\n 'absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n {\n variants: {\n color: {\n [SwitchSelectorColor.PRIMARY]: 'bg-primary aria-selected:text-text',\n [SwitchSelectorColor.SECONDARY]: 'bg-secondary aria-selected:text-text',\n [SwitchSelectorColor.DESTRUCTIVE]:\n 'bg-destructive aria-selected:text-text',\n [SwitchSelectorColor.NEUTRAL]: 'bg-neutral aria-selected:text-white',\n [SwitchSelectorColor.LIGHT]: 'bg-white aria-selected:text-black',\n [SwitchSelectorColor.DARK]: 'bg-neutral-800 aria-selected:text-white',\n [SwitchSelectorColor.TEXT]: 'bg-text aria-selected:text-text-opposite',\n },\n },\n }\n);\n\n/*\n \n * Component that allows the user to select one of the provided choices.\n \n Example:\n * ```jsx\n * <SwitchSelector\n * choices={[\n * { content: 'Option 1', value: 'option1' },\n * { content: 'Option 2', value: 'option2' },\n * { content: 'Option 3', value: 'option3' },\n * ]}\n * value=\"option1\"\n * onChange={(choice) => console.log(choice)}\n * />\n * ```\n */\nexport const SwitchSelector = <T,>({\n choices = defaultChoices as SwitchSelectorChoices<T>,\n value,\n defaultValue,\n onChange,\n color = SwitchSelectorColor.PRIMARY,\n size = SwitchSelectorSize.MD,\n className,\n}: SwitchSelectorProps<T>) => {\n const [valueState, setValue] = useState<T>(\n value ?? defaultValue ?? choices[0].value\n );\n const optionsRefs = useRef<HTMLButtonElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition } = useItemSelector(optionsRefs);\n\n const handleChange = (newValue: T) => {\n setValue(newValue);\n onChange?.(newValue);\n };\n\n useEffect(() => {\n if (value === undefined) return;\n setValue(value);\n }, [value]);\n\n return (\n <div\n className={switchSelectorVariant({\n color,\n className,\n })}\n role=\"tablist\"\n >\n <div className=\"relative flex size-full flex-row items-center justify-center\">\n {choices.map((choice, index) => {\n const { content, value, ...buttonProps } = choice;\n\n const isKeyOfKey =\n typeof value === 'string' \|\| typeof value === 'number';\n\n const isSelected = value === valueState;\n\n return (\n <button\n {...buttonProps}\n className={cn(\n choiceVariant({\n size,\n })\n )}\n key={isKeyOfKey ? value : index}\n role=\"tab\"\n onClick={() => handleChange(value)}\n aria-selected={isSelected}\n disabled={isSelected}\n ref={(el) => {\n optionsRefs.current[index] = el!;\n }}\n >\n {content}\n </button>\n );\n })}\n {choiceIndicatorPosition && (\n <div\n className={cn(\n indicatorVariant({\n color,\n })\n )}\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAmBA,MAAMA,iBAAiD,CACrD;CAAE,SAAS;CAAO,OAAO;CAAO,EAChC;CAAE,SAAS;CAAM,OAAO;CAAM,CAC/B;AAWD,IAAY,sEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGF,MAAM,wBAAwB,IAC5B,mEACA;CACE,UAAU,EACR,OAAO;GACJ,oBAAoB,UAAU;GAC9B,oBAAoB,YAAY;GAChC,oBAAoB,cACnB;GACD,oBAAoB,UAAU;GAC9B,oBAAoB,QAAQ;GAC5B,oBAAoB,OAAO;GAC3B,oBAAoB,OAAO;EAC7B,EACF;CACD,iBAAiB,EACf,OAAO,oBAAoB,SAC5B;CACF,CACF;AAED,IAAY,oEAAL;AACL;AACA;AACA;;;AAGF,MAAM,gBAAgB,IACpB,4LACA;CACE,UAAU,EACR,MAAM;GACH,mBAAmB,KAAK;GACxB,mBAAmB,KAAK;GACxB,mBAAmB,KAAK;EAC1B,EACF;CACD,iBAAiB,EACf,MAAM,mBAAmB,IAC1B;CACF,CACF;AAED,MAAM,mBAAmB,IACvB,mIACA,EACE,UAAU,EACR,OAAO;EACJ,oBAAoB,UAAU;EAC9B,oBAAoB,YAAY;EAChC,oBAAoB,cACnB;EACD,oBAAoB,UAAU;EAC9B,oBAAoB,QAAQ;EAC5B,oBAAoB,OAAO;EAC3B,oBAAoB,OAAO;CAC7B,EACF,EACF,CACF;;;;;;;;;;;;;;;;;;AAmBD,MAAa,kBAAsB,EACjC,UAAU,gBACV,OACA,cACA,UACA,QAAQ,oBAAoB,SAC5B,OAAO,mBAAmB,IAC1B,gBAC4B;CAC5B,MAAM,CAAC,YAAY,YAAY,SAC7B,SAAS,gBAAgB,QAAQ,GAAG,MACrC;CACD,MAAM,cAAc,OAA4B,EAAE,CAAC;CACnD,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,4BAA4B,gBAAgB,YAAY;CAEhE,MAAM,gBAAgB,aAAgB;AACpC,WAAS,SAAS;AAClB,aAAW,SAAS;;AAGtB,iBAAgB;AACd,MAAI,UAAU,OAAW;AACzB,WAAS,MAAM;IACd,CAAC,MAAM,CAAC;AAEX,QACE,oBAAC;EACC,WAAW,sBAAsB;GAC/B;GACA;GACD,CAAC;EACF,MAAK;YAEL,qBAAC;GAAI,WAAU;cACZ,QAAQ,KAAK,QAAQ,UAAU;IAC9B,MAAM,EAAE,SAAS,eAAO,GAAG,gBAAgB;IAE3C,MAAM,aACJ,OAAOC,YAAU,YAAY,OAAOA,YAAU;IAEhD,MAAM,aAAaA,YAAU;AAE7B,WACE,8BAAC;KACC,GAAI;KACJ,WAAW,GACT,cAAc,EACZ,MACD,CAAC,CACH;KACD,KAAK,aAAaA,UAAQ;KAC1B,MAAK;KACL,eAAe,aAAaA,QAAM;KAClC,iBAAe;KACf,UAAU;KACV,MAAM,OAAO;AACX,kBAAY,QAAQ,SAAS;;OAG9B,QACM;KAEX,EACD,2BACC,oBAAC;IACC,WAAW,GACT,iBAAiB,EACf,OACD,CAAC,CACH;IACD,OAAO;IACP,KAAK;KACL;IAEA;GACF"}

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

@@ -7,15 +7,15 @@ import { jsx } from "react/jsx-runtime";
 *
 * Controls the roundedness of tag corners, from sharp edges to fully rounded pills.
 *
-* @enum {string} TagRoundedSize
-* @property {string} NONE - 'none' - No border radius (sharp corners)
-* @property {string} SM - 'sm' - Small border radius (2px)
-* @property {string} MD - 'md' - Medium border radius (6px)
-* @property {string} LG - 'lg' - Large border radius (8px)
-* @property {string} XL - 'xl' - Extra large border radius (12px)
-* @property {string} XXL - '2xl' - 2x large border radius (16px)
-* @property {string} XXXL - '3xl' - 3x large border radius (24px)
-* @property {string} FULL - 'full' - Fully rounded (50% border radius, pill shape)
+* @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
@@ -46,12 +46,12 @@ let TagRoundedSize = /* @__PURE__ */ function(TagRoundedSize$1) {
 * Provides semantic color options for different tag purposes and meanings.
 * Each color includes background, border, and text color variations.
 *
-* @enum {string} TagColor
-* @property {string} SUCCESS - 'success' - Green theme for positive states, success messages, or completed items
-* @property {string} ERROR - 'error' - Red theme for error states, warnings, or failed operations
-* @property {string} WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices
-* @property {string} NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content
-* @property {string} TEXT - 'text' - Default text color theme for general purpose tags
+* @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
@@ -90,12 +90,12 @@ let TagColor = /* @__PURE__ */ function(TagColor$1) {
 * Controls the overall size of tags including padding, font size, and border thickness.
 * Sizes are designed to maintain visual hierarchy and readability.
 *
-* @enum {string} TagSize
-* @property {string} XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)
-* @property {string} SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)
-* @property {string} MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size
-* @property {string} LG - 'lg' - Large (2rem padding, text-lg, 2px border)
-* @property {string} XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)
+* @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
@@ -120,9 +120,9 @@ let TagSize = /* @__PURE__ */ function(TagSize$1) {
 *
 * Controls whether a border is displayed around the tag.
 *
-* @enum {string} TagBorder
-* @property {string} NONE - 'none' - No border (default)
-* @property {string} WITH - 'with' - Show border with 1.5px thickness
+* @enum TagBorder
+* @property NONE - 'none' - No border (default)
+* @property WITH - 'with' - Show border with 1.5px thickness
 *
 * @example
 * ```tsx
@@ -140,9 +140,9 @@ let TagBorder = /* @__PURE__ */ function(TagBorder$1) {
 *
 * Controls the background styling of the tag.
 *
-* @enum {string} TagBackground
-* @property {string} NONE - 'none' - No background styling
-* @property {string} WITH - 'with' - Apply background styling
+* @enum TagBackground
+* @property NONE - 'none' - No background styling
+* @property WITH - 'with' - Apply background styling
 *
 * @example
 * ```tsx
@@ -190,7 +190,7 @@ const containerVariants = cva("w-fit backdrop-blur", {
 			[`${TagSize.SM}`]: "border-[1.5px] 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-5 py-4 text-xl"
+			[`${TagSize.XL}`]: "border-2 px-3 py-2 text-xl"
 		},
 		border: {
 			[`${TagBorder.NONE}`]: "border-none",

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

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