@intlayer/design-system 6.1.6 → 7.0.0-canary.1

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

@@ -0,0 +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"}

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

@@ -0,0 +1,222 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { useItemSelector } from "../../hooks/useItemSelector.mjs";
+import { createElement, useEffect, useRef, useState } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/SwitchSelector/index.tsx
+const defaultChoices = [{
+	content: "Off",
+	value: false
+}, {
+	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;
+}({});
+const switchSelectorVariant = cva("flex w-fit flex-row gap-2 rounded-full border-[1.5px] p-[1.5px]", {
+	variants: { color: {
+		[SwitchSelectorColor.PRIMARY]: "border-primary text-primary",
+		[SwitchSelectorColor.SECONDARY]: "border-secondary text-secondary",
+		[SwitchSelectorColor.DESTRUCTIVE]: "border-destructive bg-destructive text-destructive",
+		[SwitchSelectorColor.NEUTRAL]: "border-neutral text-neutral",
+		[SwitchSelectorColor.LIGHT]: "border-white text-white",
+		[SwitchSelectorColor.DARK]: "border-neutral-800 text-neutral-800",
+		[SwitchSelectorColor.TEXT]: "border-text text-text"
+	} },
+	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;
+}({});
+const choiceVariant = cva("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", {
+	variants: { size: {
+		[SwitchSelectorSize.SM]: "px-2 py-1 text-xs",
+		[SwitchSelectorSize.MD]: "p-2 text-sm",
+		[SwitchSelectorSize.LG]: "p-4 text-base"
+	} },
+	defaultVariants: { size: SwitchSelectorSize.MD }
+});
+const indicatorVariant = cva("absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none", { variants: { color: {
+	[SwitchSelectorColor.PRIMARY]: "bg-primary aria-selected:text-text",
+	[SwitchSelectorColor.SECONDARY]: "bg-secondary aria-selected:text-text",
+	[SwitchSelectorColor.DESTRUCTIVE]: "bg-destructive aria-selected:text-text",
+	[SwitchSelectorColor.NEUTRAL]: "bg-neutral aria-selected:text-white",
+	[SwitchSelectorColor.LIGHT]: "bg-white aria-selected:text-black",
+	[SwitchSelectorColor.DARK]: "bg-neutral-800 aria-selected:text-white",
+	[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)}
+* />
+* ```
+*
+* @example
+* Theme selector with icons:
+* ```tsx
+* <SwitchSelector
+*   choices={[
+*     { content: <>☀️ Light</>, value: 'light' },
+*     { content: <>🌙 Dark</>, value: 'dark' },
+*     { content: <>⚙️ System</>, value: 'system' }
+*   ]}
+*   value={theme}
+*   onChange={setTheme}
+*   size={SwitchSelectorSize.SM}
+* />
+* ```
+*/
+const SwitchSelector = ({ choices = defaultChoices, value, defaultValue, onChange, color = SwitchSelectorColor.PRIMARY, size = SwitchSelectorSize.MD, className }) => {
+	const [valueState, setValue] = useState(value ?? defaultValue ?? choices[0].value);
+	const optionsRefs = useRef([]);
+	const indicatorRef = useRef(null);
+	const { choiceIndicatorPosition } = useItemSelector(optionsRefs);
+	const handleChange = (newValue) => {
+		setValue(newValue);
+		onChange?.(newValue);
+	};
+	useEffect(() => {
+		if (value === void 0) return;
+		setValue(value);
+	}, [value]);
+	return /* @__PURE__ */ jsx("div", {
+		className: switchSelectorVariant({
+			color,
+			className
+		}),
+		role: "tablist",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative flex size-full flex-row items-center justify-center",
+			children: [choices.map((choice, index) => {
+				const { content, value: value$1,...buttonProps } = choice;
+				const isKeyOfKey = typeof value$1 === "string" || typeof value$1 === "number";
+				const isSelected = value$1 === valueState;
+				return /* @__PURE__ */ createElement("button", {
+					...buttonProps,
+					className: cn(choiceVariant({ size })),
+					key: isKeyOfKey ? value$1 : index,
+					role: "tab",
+					onClick: () => handleChange(value$1),
+					"aria-selected": isSelected,
+					disabled: isSelected,
+					ref: (el) => {
+						optionsRefs.current[index] = el;
+					}
+				}, content);
+			}), choiceIndicatorPosition && /* @__PURE__ */ jsx("div", {
+				className: cn(indicatorVariant({ color })),
+				style: choiceIndicatorPosition,
+				ref: indicatorRef
+			})]
+		})
+	});
+};
+
+//#endregion
+export { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +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"}

package/dist/esm/components/Tab/Tab.mjs

@@ -0,0 +1,143 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
+import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
+import { useTabContext } from "./TabContext.mjs";
+import { Children, createContext, isValidElement, useState } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Tab/Tab.tsx
+const TabContext = createContext(void 0);
+const tabContainerVariant = cva("relative w-full rounded-lg border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur", {
+	variants: { variant: {
+		default: "",
+		bordered: "border-2",
+		ghost: "border-0 bg-transparent shadow-none"
+	} },
+	defaultVariants: { variant: "default" }
+});
+/**
+* TabItem component that represents a single tab
+* Must be used as a child of the Tab component
+*/
+const TabItem = ({ children,...props }) => /* @__PURE__ */ jsx("div", {
+	...props,
+	children
+});
+TabItem.displayName = "TabItem";
+/**
+* Tab container component that manages tab state and renders tab headers and content
+*
+* Example:
+* ```jsx
+* <Tab defaultTab="tab1">
+*   <Tab.Item label="First Tab" value="tab1">
+*     Content for first tab
+*   </Tab.Item>
+*   <Tab.Item label="Second Tab" value="tab2">
+*     Content for second tab
+*   </Tab.Item>
+* </Tab>
+* ```
+*/
+const TabComponent = ({ defaultTab, group, variant, children, className,...props }) => {
+	const tabItems = Children.toArray(children).filter((child) => {
+		return isValidElement(child) && child.type === TabItem;
+	});
+	const firstTabValue = tabItems[0]?.props?.value;
+	const { tabsValues, setTabsValues } = useTabContext();
+	const [activeTab, setActiveTab] = useState(defaultTab ?? firstTabValue ?? "");
+	const currentTabValue = (group && typeof tabsValues === "object" ? tabsValues?.[group] : activeTab) ?? defaultTab ?? firstTabValue;
+	const activeTabIndex = tabItems.findIndex((tab) => tab.props.value === currentTabValue);
+	const tabsCount = tabItems.length;
+	const { containerProps, dragDeltaPct, isDragging } = useHorizontalSwipe({
+		itemIndex: activeTabIndex,
+		itemCount: tabsCount,
+		onSwipeLeft: () => {
+			const nextValue = tabItems[Math.min(tabsCount - 1, activeTabIndex + 1)]?.props?.value;
+			if (nextValue) handleSetActiveTab(nextValue);
+		},
+		onSwipeRight: () => {
+			const nextValue = tabItems[Math.max(0, activeTabIndex - 1)]?.props?.value;
+			if (nextValue) handleSetActiveTab(nextValue);
+		}
+	});
+	const handleSetActiveTab = (tab) => {
+		setActiveTab(tab);
+		if (typeof setTabsValues === "function") setTabsValues((prev) => ({
+			...prev,
+			[group]: tab
+		}));
+	};
+	const contextValue = {
+		activeTab: activeTab ?? firstTabValue ?? "",
+		setActiveTab: handleSetActiveTab
+	};
+	return /* @__PURE__ */ jsx(TabContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn(tabContainerVariant({ variant }), className),
+			...props,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "sticky top-36 z-10 flex gap-3 bg-background/70 p-3 backdrop-blur",
+				children: /* @__PURE__ */ jsx(TabSelector, {
+					selectedChoice: currentTabValue,
+					tabs: tabItems.map((child) => {
+						const { label, value, disabled } = child.props;
+						const isActive = currentTabValue === value;
+						return /* @__PURE__ */ jsx("button", {
+							className: cn("cursor-pointer rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none", !isActive && "text-neutral/70"),
+							"data-active": isActive,
+							disabled,
+							onClick: () => !disabled && handleSetActiveTab(value),
+							role: "tab",
+							"aria-selected": isActive,
+							"aria-controls": `tabpanel-${value}`,
+							id: `tab-${value}`,
+							children: label
+						}, value);
+					}),
+					hoverable: true,
+					color: TabSelectorColor.TEXT
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "relative w-full min-w-0 overflow-x-clip [-webkit-clip-path:inset(0)] [clip-path:inset(0)]",
+				...containerProps,
+				children: /* @__PURE__ */ jsx("div", {
+					role: "tablist",
+					"aria-orientation": "horizontal",
+					className: cn("grid w-full min-w-0", isDragging ? "transition-none" : "transition-transform duration-300 ease-in-out"),
+					style: {
+						gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,
+						transform: `translateX(-${activeTabIndex * 100 - (isDragging ? dragDeltaPct : 0)}%)`
+					},
+					children: tabItems.map(({ props: props$1 }, index) => {
+						const { value, children: children$1 } = props$1;
+						const isActive = index === activeTabIndex;
+						return /* @__PURE__ */ jsx("div", {
+							role: "tabpanel",
+							"aria-labelledby": `tab-${value}`,
+							id: `tabpanel-${value}`,
+							"aria-hidden": !isActive,
+							tabIndex: isActive ? 0 : -1,
+							"data-active": isActive,
+							className: cn("w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out", !isActive && "pointer-events-none opacity-0"),
+							children: /* @__PURE__ */ jsx("div", {
+								className: "flex w-full min-w-0 flex-col items-stretch gap-6",
+								children: children$1
+							})
+						}, value);
+					})
+				})
+			})]
+		})
+	});
+};
+const Tab = Object.assign(TabComponent, { Item: TabItem });
+
+//#endregion
+export { Tab };
+//# sourceMappingURL=Tab.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.mjs","names":["contextValue: TabContextType","props","children"],"sources":["../../../../src/components/Tab/Tab.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  Children,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useState,\n} from 'react';\nimport { useHorizontalSwipe } from '../../hooks';\nimport { cn } from '../../utils/cn';\nimport { TabSelector, TabSelectorColor } from '../TabSelector';\nimport { useTabContext } from './TabContext';\n\n// Context for managing tab state\ntype TabContextType = {\n  activeTab: string;\n  setActiveTab: (tab: string) => void;\n};\n\nconst TabContext = createContext<TabContextType | undefined>(undefined);\n\n// Tab container variants\nconst tabContainerVariant = cva(\n  'relative w-full rounded-lg border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur',\n  {\n    variants: {\n      variant: {\n        default: '',\n        bordered: 'border-2',\n        ghost: 'border-0 bg-transparent shadow-none',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n\nexport type TabProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof tabContainerVariant> & {\n    defaultTab?: string;\n    group?: string;\n    children: ReactNode;\n  };\n\nexport type TabItemProps = HTMLAttributes<HTMLDivElement> & {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  children: ReactNode;\n};\n\n/**\n * TabItem component that represents a single tab\n * Must be used as a child of the Tab component\n */\nconst TabItem = ({ children, ...props }: TabItemProps) => (\n  // This component is primarily used for its props by the parent Tab component\n  // The actual rendering is handled by the Tab component\n  <div {...props}>{children}</div>\n);\n\n// Add display name for better debugging\nTabItem.displayName = 'TabItem';\n\n/**\n * Tab container component that manages tab state and renders tab headers and content\n *\n * Example:\n * ```jsx\n * <Tab defaultTab=\"tab1\">\n *   <Tab.Item label=\"First Tab\" value=\"tab1\">\n *     Content for first tab\n *   </Tab.Item>\n *   <Tab.Item label=\"Second Tab\" value=\"tab2\">\n *     Content for second tab\n *   </Tab.Item>\n * </Tab>\n * ```\n */\nconst TabComponent = ({\n  defaultTab,\n  group,\n  variant,\n  children,\n  className,\n  ...props\n}: TabProps) => {\n  // Extract TabItem children to get their props\n  const tabItems = Children.toArray(children).filter((child) => {\n    return isValidElement(child) && child.type === TabItem;\n  }) as ReactElement<TabItemProps>[];\n\n  const firstTabValue = tabItems[0]?.props?.value;\n  const { tabsValues, setTabsValues } = useTabContext();\n  const [activeTab, setActiveTab] = useState(defaultTab ?? firstTabValue ?? '');\n  const hasGroup = group && typeof tabsValues === 'object';\n  const currentTabValue =\n    (hasGroup ? tabsValues?.[group] : activeTab) ?? defaultTab ?? firstTabValue;\n  const activeTabIndex = tabItems.findIndex(\n    (tab) => tab.props.value === currentTabValue\n  );\n\n  const tabsCount = tabItems.length;\n\n  const { containerProps, dragDeltaPct, isDragging } = useHorizontalSwipe({\n    itemIndex: activeTabIndex,\n    itemCount: tabsCount,\n    onSwipeLeft: () => {\n      const targetIndex = Math.min(tabsCount - 1, activeTabIndex + 1);\n      const nextValue = tabItems[targetIndex]?.props?.value;\n      if (nextValue) handleSetActiveTab(nextValue);\n    },\n    onSwipeRight: () => {\n      const targetIndex = Math.max(0, activeTabIndex - 1);\n      const nextValue = tabItems[targetIndex]?.props?.value;\n      if (nextValue) handleSetActiveTab(nextValue);\n    },\n  });\n\n  const handleSetActiveTab = (tab: string) => {\n    setActiveTab(tab);\n\n    if (typeof setTabsValues === 'function') {\n      setTabsValues((prev) => ({ ...prev, [group!]: tab }));\n    }\n  };\n\n  const contextValue: TabContextType = {\n    activeTab: activeTab ?? firstTabValue ?? '',\n    setActiveTab: handleSetActiveTab,\n  };\n\n  return (\n    <TabContext.Provider value={contextValue}>\n      <div\n        className={cn(tabContainerVariant({ variant }), className)}\n        {...props}\n      >\n        {/* Tab Headers */}\n        <div className=\"sticky top-36 z-10 flex gap-3 bg-background/70 p-3 backdrop-blur\">\n          <TabSelector\n            selectedChoice={currentTabValue}\n            tabs={tabItems.map((child) => {\n              const { label, value, disabled } = child.props;\n              const isActive = currentTabValue === value;\n\n              return (\n                <button\n                  key={value}\n                  className={cn(\n                    'cursor-pointer rounded-md px-4 py-1 font-medium text-sm transition-colors focus:outline-none',\n                    !isActive && 'text-neutral/70'\n                  )}\n                  data-active={isActive}\n                  disabled={disabled}\n                  onClick={() => !disabled && handleSetActiveTab(value)}\n                  role=\"tab\"\n                  aria-selected={isActive}\n                  aria-controls={`tabpanel-${value}`}\n                  id={`tab-${value}`}\n                >\n                  {label}\n                </button>\n              );\n            })}\n            hoverable\n            color={TabSelectorColor.TEXT}\n          />\n        </div>\n        {/* Tab Content */}\n        {/* Clipper: no overflow; uses clip-path */}\n        <div\n          className=\"relative w-full min-w-0 overflow-x-clip [-webkit-clip-path:inset(0)] [clip-path:inset(0)]\"\n          {...containerProps}\n        >\n          {/* Track */}\n          <div\n            role=\"tablist\"\n            aria-orientation=\"horizontal\"\n            className={cn(\n              'grid w-full min-w-0',\n              isDragging\n                ? 'transition-none'\n                : 'transition-transform duration-300 ease-in-out'\n            )}\n            style={{\n              gridTemplateColumns: `repeat(${tabItems.length}, 100%)`,\n              transform: `translateX(-${activeTabIndex * 100 - (isDragging ? dragDeltaPct : 0)}%)`,\n            }}\n          >\n            {tabItems.map(({ props }, index) => {\n              const { value, children } = props;\n              const isActive = index === activeTabIndex;\n\n              return (\n                <div\n                  key={value}\n                  role=\"tabpanel\"\n                  aria-labelledby={`tab-${value}`}\n                  id={`tabpanel-${value}`}\n                  aria-hidden={!isActive}\n                  tabIndex={isActive ? 0 : -1}\n                  data-active={isActive}\n                  className={cn(\n                    'w-full min-w-0 p-6 opacity-100 transition-opacity duration-300 ease-in-out',\n                    !isActive && 'pointer-events-none opacity-0' // prevent offscreen interaction\n                  )}\n                >\n                  <div className=\"flex w-full min-w-0 flex-col items-stretch gap-6\">\n                    {children}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </TabContext.Provider>\n  );\n};\n\n// Create the compound component\nexport const Tab = Object.assign(TabComponent, {\n  Item: TabItem,\n});\n\n// Add display name for better debugging\n"],"mappings":";;;;;;;;;;;;AAuBA,MAAM,aAAa,cAA0C,OAAU;AAGvE,MAAM,sBAAsB,IAC1B,6HACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,UAAU;EACV,OAAO;EACR,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;;;;;AAoBD,MAAM,WAAW,EAAE,SAAU,GAAG,YAG9B,oBAAC;CAAI,GAAI;CAAQ;EAAe;AAIlC,QAAQ,cAAc;;;;;;;;;;;;;;;;AAiBtB,MAAM,gBAAgB,EACpB,YACA,OACA,SACA,UACA,UACA,GAAG,YACW;CAEd,MAAM,WAAW,SAAS,QAAQ,SAAS,CAAC,QAAQ,UAAU;AAC5D,SAAO,eAAe,MAAM,IAAI,MAAM,SAAS;GAC/C;CAEF,MAAM,gBAAgB,SAAS,IAAI,OAAO;CAC1C,MAAM,EAAE,YAAY,kBAAkB,eAAe;CACrD,MAAM,CAAC,WAAW,gBAAgB,SAAS,cAAc,iBAAiB,GAAG;CAE7E,MAAM,mBADW,SAAS,OAAO,eAAe,WAElC,aAAa,SAAS,cAAc,cAAc;CAChE,MAAM,iBAAiB,SAAS,WAC7B,QAAQ,IAAI,MAAM,UAAU,gBAC9B;CAED,MAAM,YAAY,SAAS;CAE3B,MAAM,EAAE,gBAAgB,cAAc,eAAe,mBAAmB;EACtE,WAAW;EACX,WAAW;EACX,mBAAmB;GAEjB,MAAM,YAAY,SADE,KAAK,IAAI,YAAY,GAAG,iBAAiB,EAAE,GACtB,OAAO;AAChD,OAAI,UAAW,oBAAmB,UAAU;;EAE9C,oBAAoB;GAElB,MAAM,YAAY,SADE,KAAK,IAAI,GAAG,iBAAiB,EAAE,GACV,OAAO;AAChD,OAAI,UAAW,oBAAmB,UAAU;;EAE/C,CAAC;CAEF,MAAM,sBAAsB,QAAgB;AAC1C,eAAa,IAAI;AAEjB,MAAI,OAAO,kBAAkB,WAC3B,gBAAe,UAAU;GAAE,GAAG;IAAO,QAAS;GAAK,EAAE;;CAIzD,MAAMA,eAA+B;EACnC,WAAW,aAAa,iBAAiB;EACzC,cAAc;EACf;AAED,QACE,oBAAC,WAAW;EAAS,OAAO;YAC1B,qBAAC;GACC,WAAW,GAAG,oBAAoB,EAAE,SAAS,CAAC,EAAE,UAAU;GAC1D,GAAI;cAGJ,oBAAC;IAAI,WAAU;cACb,oBAAC;KACC,gBAAgB;KAChB,MAAM,SAAS,KAAK,UAAU;MAC5B,MAAM,EAAE,OAAO,OAAO,aAAa,MAAM;MACzC,MAAM,WAAW,oBAAoB;AAErC,aACE,oBAAC;OAEC,WAAW,GACT,gGACA,CAAC,YAAY,kBACd;OACD,eAAa;OACH;OACV,eAAe,CAAC,YAAY,mBAAmB,MAAM;OACrD,MAAK;OACL,iBAAe;OACf,iBAAe,YAAY;OAC3B,IAAI,OAAO;iBAEV;SAbI,MAcE;OAEX;KACF;KACA,OAAO,iBAAiB;MACxB;KACE,EAGN,oBAAC;IACC,WAAU;IACV,GAAI;cAGJ,oBAAC;KACC,MAAK;KACL,oBAAiB;KACjB,WAAW,GACT,uBACA,aACI,oBACA,gDACL;KACD,OAAO;MACL,qBAAqB,UAAU,SAAS,OAAO;MAC/C,WAAW,eAAe,iBAAiB,OAAO,aAAa,eAAe,GAAG;MAClF;eAEA,SAAS,KAAK,EAAE,kBAAS,UAAU;MAClC,MAAM,EAAE,OAAO,yBAAaC;MAC5B,MAAM,WAAW,UAAU;AAE3B,aACE,oBAAC;OAEC,MAAK;OACL,mBAAiB,OAAO;OACxB,IAAI,YAAY;OAChB,eAAa,CAAC;OACd,UAAU,WAAW,IAAI;OACzB,eAAa;OACb,WAAW,GACT,8EACA,CAAC,YAAY,gCACd;iBAED,oBAAC;QAAI,WAAU;kBACZC;SACG;SAdD,MAeD;OAER;MACE;KACF;IACF;GACc;;AAK1B,MAAa,MAAM,OAAO,OAAO,cAAc,EAC7C,MAAM,SACP,CAAC"}

package/dist/esm/components/Tab/TabContext.mjs

@@ -0,0 +1,35 @@
+'use client';
+
+
+import { createContext, useContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Tab/TabContext.tsx
+/**
+* Context that store the current locale on the client side
+*/
+const TabContext = createContext({
+	tabsValues: {},
+	setTabsValues: (() => {})
+});
+/**
+* Hook that provides the current locale
+*/
+const useTabContext = () => useContext(TabContext);
+/**
+* Provider that store the current locale on the client side
+*/
+const TabProvider = ({ children }) => {
+	const [tabsValues, setTabsValues] = useState({});
+	return /* @__PURE__ */ jsx(TabContext, {
+		value: {
+			tabsValues,
+			setTabsValues
+		},
+		children
+	});
+};
+
+//#endregion
+export { TabContext, TabProvider, useTabContext };
+//# sourceMappingURL=TabContext.mjs.map

package/dist/esm/components/Tab/TabContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabContext.mjs","names":["TabProvider: FC<PropsWithChildren>"],"sources":["../../../../src/components/Tab/TabContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type Dispatch,\n  type FC,\n  type PropsWithChildren,\n  type SetStateAction,\n  useContext,\n  useState,\n} from 'react';\n\ntype TabContextValue = {\n  tabsValues: Record<string, any>;\n  setTabsValues: Dispatch<SetStateAction<Record<string, any>>>;\n};\n\n/**\n * Context that store the current locale on the client side\n */\nexport const TabContext = createContext<TabContextValue>({\n  tabsValues: {},\n  setTabsValues: (() => {}) as Dispatch<SetStateAction<Record<string, any>>>,\n});\n\n/**\n * Hook that provides the current locale\n */\nexport const useTabContext = () => useContext(TabContext);\n\n/**\n * Provider that store the current locale on the client side\n */\nexport const TabProvider: FC<PropsWithChildren> = ({ children }) => {\n  const [tabsValues, setTabsValues] = useState<Record<string, any>>({});\n\n  return (\n    <TabContext\n      value={{\n        tabsValues,\n        setTabsValues,\n      }}\n    >\n      {children}\n    </TabContext>\n  );\n};\n"],"mappings":";;;;;;;;;;AAoBA,MAAa,aAAa,cAA+B;CACvD,YAAY,EAAE;CACd,sBAAsB;CACvB,CAAC;;;;AAKF,MAAa,sBAAsB,WAAW,WAAW;;;;AAKzD,MAAaA,eAAsC,EAAE,eAAe;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAA8B,EAAE,CAAC;AAErE,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACD;EAEA;GACU"}

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

@@ -0,0 +1,3 @@
+import { Tab } from "./Tab.mjs";
+
+export { Tab };

package/dist/esm/components/TabSelector/TabSelector.mjs

@@ -0,0 +1,98 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { useItemSelector } from "../../hooks/useItemSelector.mjs";
+import { cloneElement, useEffect, useRef } from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/TabSelector/TabSelector.tsx
+let TabSelectorColor = /* @__PURE__ */ function(TabSelectorColor$1) {
+	TabSelectorColor$1["PRIMARY"] = "primary";
+	TabSelectorColor$1["SECONDARY"] = "secondary";
+	TabSelectorColor$1["DESTRUCTIVE"] = "destructive";
+	TabSelectorColor$1["NEUTRAL"] = "neutral";
+	TabSelectorColor$1["LIGHT"] = "light";
+	TabSelectorColor$1["DARK"] = "dark";
+	TabSelectorColor$1["TEXT"] = "text";
+	return TabSelectorColor$1;
+}({});
+const tabSelectorVariant = cva("relative flex size-full flex-row items-center gap-2", {
+	variants: { color: {
+		primary: "border-primary text-primary",
+		secondary: "border-secondary text-secondary",
+		destructive: "border-destructive bg-destructive text-destructive",
+		neutral: "border-neutral text-neutral",
+		light: "border-white text-white",
+		dark: "border-neutral-800 text-neutral-800",
+		text: "border-text text-text"
+	} },
+	defaultVariants: { color: "primary" }
+});
+const indicatorVariant = cva("absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none", { variants: { color: {
+	primary: "bg-primary/10 aria-selected:text-text",
+	secondary: "bg-secondary/10 aria-selected:text-text",
+	destructive: "bg-destructive/10 aria-selected:text-text",
+	neutral: "bg-neutral/10 aria-selected:text-white/10",
+	light: "bg-white/10 aria-selected:text-black",
+	dark: "bg-neutral-800/10 aria-selected:text-white",
+	text: "bg-text/10 aria-selected:text-text-opposite"
+} } });
+/**
+*
+* Component that allows the user to select one of the provided choices.
+*
+* Example:
+* ```jsx
+* <TabSelector
+*   selectedChoice="option1"
+*   onTabClick={(choice) => console.log(choice)}
+*   hoverable={true}
+* >
+*   <Button key="option1"/>
+*   <Button key="option2"/>
+*   <Button key="option3"/>
+* </TabSelector>
+* ```
+*/
+const TabSelector = ({ tabs, selectedChoice, onTabClick, color = TabSelectorColor.PRIMARY, hoverable = false, className }) => {
+	const optionsRefs = useRef([]);
+	const indicatorRef = useRef(null);
+	const { choiceIndicatorPosition, calculatePosition } = useItemSelector(optionsRefs, void 0, hoverable);
+	useEffect(() => {
+		calculatePosition();
+	}, [selectedChoice, tabs]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(tabSelectorVariant({ color }), className),
+		"aria-orientation": "horizontal",
+		"aria-multiselectable": "false",
+		role: "tablist",
+		children: [tabs.map((Tab, index) => {
+			const key = Tab.key;
+			const isSelected = selectedChoice === key;
+			return cloneElement(Tab, {
+				key: key ?? index,
+				role: "tab",
+				onClick: (e) => {
+					Tab.props?.onClick?.(e);
+					onTabClick?.(key);
+				},
+				"aria-selected": isSelected,
+				"data-active": isSelected,
+				tabIndex: isSelected ? 0 : -1,
+				ref: (el) => {
+					optionsRefs.current[index] = el;
+				}
+			});
+		}), choiceIndicatorPosition && /* @__PURE__ */ jsx("div", {
+			className: cn(indicatorVariant({ color })),
+			style: choiceIndicatorPosition,
+			ref: indicatorRef
+		}, `${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`)]
+	});
+};
+
+//#endregion
+export { TabSelector, TabSelectorColor };
+//# sourceMappingURL=TabSelector.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabSelector.mjs","names":[],"sources":["../../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  cloneElement,\n  type HTMLAttributes,\n  type MouseEvent,\n  type ReactElement,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useItemSelector } from '../../hooks';\nimport { cn } from '../../utils/cn';\n\nexport enum TabSelectorColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n}\n\nconst tabSelectorVariant = cva(\n  'relative flex size-full flex-row items-center gap-2',\n  {\n    variants: {\n      color: {\n        primary: 'border-primary text-primary',\n        secondary: 'border-secondary text-secondary',\n        destructive: 'border-destructive bg-destructive text-destructive',\n        neutral: 'border-neutral text-neutral',\n        light: 'border-white text-white',\n        dark: 'border-neutral-800 text-neutral-800',\n        text: 'border-text text-text',\n      },\n    },\n    defaultVariants: {\n      color: 'primary',\n    },\n  }\n);\n\nconst indicatorVariant = cva(\n  'absolute top-0 z-[-1] h-full w-auto rounded-lg transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none',\n  {\n    variants: {\n      color: {\n        primary: 'bg-primary/10 aria-selected:text-text',\n        secondary: 'bg-secondary/10 aria-selected:text-text',\n        destructive: 'bg-destructive/10 aria-selected:text-text',\n        neutral: 'bg-neutral/10 aria-selected:text-white/10',\n        light: 'bg-white/10 aria-selected:text-black',\n        dark: 'bg-neutral-800/10 aria-selected:text-white',\n        text: 'bg-text/10 aria-selected:text-text-opposite',\n      },\n    },\n  }\n);\n\nexport type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {\n  key: string | number;\n};\n\nexport type TabSelectorProps<T extends TabSelectorItemProps> = {\n  tabs: ReactElement<T>[];\n  selectedChoice: T['key'];\n  onTabClick?: (choice: T['key']) => void;\n  hoverable?: boolean;\n} & HTMLAttributes<HTMLElement> &\n  Omit<VariantProps<typeof tabSelectorVariant>, 'color'> & {\n    color?: TabSelectorColor | `${TabSelectorColor}`;\n  };\n\n/**\n *\n * Component that allows the user to select one of the provided choices.\n *\n * Example:\n * ```jsx\n * <TabSelector\n *   selectedChoice=\"option1\"\n *   onTabClick={(choice) => console.log(choice)}\n *   hoverable={true}\n * >\n *   <Button key=\"option1\"/>\n *   <Button key=\"option2\"/>\n *   <Button key=\"option3\"/>\n * </TabSelector>\n * ```\n */\nexport const TabSelector = <T extends TabSelectorItemProps>({\n  tabs,\n  selectedChoice,\n  onTabClick,\n  color = TabSelectorColor.PRIMARY,\n  hoverable = false,\n  className,\n}: TabSelectorProps<T>) => {\n  const optionsRefs = useRef<HTMLElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n    optionsRefs,\n    undefined,\n    hoverable\n  );\n\n  useEffect(() => {\n    calculatePosition();\n  }, [selectedChoice, tabs]);\n\n  return (\n    <div\n      className={cn(\n        tabSelectorVariant({\n          color,\n        }),\n        className\n      )}\n      aria-orientation=\"horizontal\"\n      aria-multiselectable=\"false\"\n      role=\"tablist\"\n    >\n      {tabs.map((Tab, index) => {\n        const key = Tab.key!;\n\n        const isSelected = selectedChoice === key;\n\n        return cloneElement(Tab, {\n          key: key ?? index,\n          role: 'tab',\n          onClick: (e: MouseEvent<HTMLElement>) => {\n            Tab.props?.onClick?.(e);\n            onTabClick?.(key);\n          },\n          'aria-selected': isSelected,\n          'data-active': isSelected as unknown as string,\n          tabIndex: isSelected ? 0 : -1,\n          ref: (el: HTMLElement) => {\n            optionsRefs.current[index] = el!;\n          },\n        } as unknown as T);\n      })}\n      {choiceIndicatorPosition && (\n        <div\n          className={cn(\n            indicatorVariant({\n              color,\n            })\n          )}\n          style={choiceIndicatorPosition}\n          ref={indicatorRef}\n          key={`${selectedChoice}${JSON.stringify(tabs.map((tab) => tab.key))}`}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;AAcA,IAAY,gEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGF,MAAM,qBAAqB,IACzB,uDACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,WAAW;EACX,aAAa;EACb,SAAS;EACT,OAAO;EACP,MAAM;EACN,MAAM;EACP,EACF;CACD,iBAAiB,EACf,OAAO,WACR;CACF,CACF;AAED,MAAM,mBAAmB,IACvB,iIACA,EACE,UAAU,EACR,OAAO;CACL,SAAS;CACT,WAAW;CACX,aAAa;CACb,SAAS;CACT,OAAO;CACP,MAAM;CACN,MAAM;CACP,EACF,EACF,CACF;;;;;;;;;;;;;;;;;;AAiCD,MAAa,eAA+C,EAC1D,MACA,gBACA,YACA,QAAQ,iBAAiB,SACzB,YAAY,OACZ,gBACyB;CACzB,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA,QACA,UACD;AAED,iBAAgB;AACd,qBAAmB;IAClB,CAAC,gBAAgB,KAAK,CAAC;AAE1B,QACE,qBAAC;EACC,WAAW,GACT,mBAAmB,EACjB,OACD,CAAC,EACF,UACD;EACD,oBAAiB;EACjB,wBAAqB;EACrB,MAAK;aAEJ,KAAK,KAAK,KAAK,UAAU;GACxB,MAAM,MAAM,IAAI;GAEhB,MAAM,aAAa,mBAAmB;AAEtC,UAAO,aAAa,KAAK;IACvB,KAAK,OAAO;IACZ,MAAM;IACN,UAAU,MAA+B;AACvC,SAAI,OAAO,UAAU,EAAE;AACvB,kBAAa,IAAI;;IAEnB,iBAAiB;IACjB,eAAe;IACf,UAAU,aAAa,IAAI;IAC3B,MAAM,OAAoB;AACxB,iBAAY,QAAQ,SAAS;;IAEhC,CAAiB;IAClB,EACD,2BACC,oBAAC;GACC,WAAW,GACT,iBAAiB,EACf,OACD,CAAC,CACH;GACD,OAAO;GACP,KAAK;KACA,GAAG,iBAAiB,KAAK,UAAU,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,GACnE;GAEA"}

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

@@ -0,0 +1,3 @@
+import { TabSelector, TabSelectorColor } from "./TabSelector.mjs";
+
+export { TabSelector, TabSelectorColor };