npm - @intlayer/design-system - Versions diffs - 6.1.4 → 6.1.6-canary.0 - Mend

@intlayer/design-system 6.1.4 → 6.1.6-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 (320) hide show

package/dist/components/SwitchSelector/index.d.ts CHANGED Viewed

@@ -1,51 +1,200 @@
 import { VariantProps } from 'class-variance-authority';
 import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Configuration for a single choice in the SwitchSelector
+ *
+ * @template T - The type of the choice value
+ * @interface SwitchSelectorChoice
+ */
 export type SwitchSelectorChoice<T = boolean> = {
+    /** The visual content displayed for this choice (text, icons, or React elements) */
     content: ReactNode;
+    /** The value associated with this choice */
     value: T;
 } & HTMLAttributes<HTMLButtonElement>;
+/**
+ * Array of choices for the SwitchSelector component
+ *
+ * @template T - The type of the choice values
+ */
 export type SwitchSelectorChoices<T> = SwitchSelectorChoice<T>[];
+/**
+ * Props interface for the SwitchSelector component
+ *
+ * @template T - The type of the choice values
+ * @interface SwitchSelectorProps
+ */
 export type SwitchSelectorProps<T = boolean> = {
+    /**
+     * Array of selectable choices
+     * @default [{ content: 'Off', value: false }, { content: 'On', value: true }]
+     * @example
+     * ```tsx
+     * <SwitchSelector choices={[
+     *   { content: 'Draft', value: 'draft' },
+     *   { content: 'Published', value: 'published' },
+     *   { content: 'Archived', value: 'archived' }
+     * ]} />
+     * ```
+     */
     choices?: SwitchSelectorChoices<T>;
+    /**
+     * Controlled value for the selected choice
+     * @example
+     * ```tsx
+     * const [status, setStatus] = useState('draft');
+     * <SwitchSelector value={status} onChange={setStatus} />
+     * ```
+     */
     value?: T;
+    /**
+     * Default selected value for uncontrolled mode
+     * @example
+     * ```tsx
+     * <SwitchSelector defaultValue="published" />
+     * ```
+     */
     defaultValue?: T;
+    /**
+     * Callback function triggered when selection changes
+     * @param choice - The newly selected choice value
+     * @example
+     * ```tsx
+     * <SwitchSelector onChange={(value) => console.log('Selected:', value)} />
+     * ```
+     */
     onChange?: (choice: T) => void;
+    /** Additional CSS classes for custom styling */
     className?: string;
 } & VariantProps<typeof switchSelectorVariant> & VariantProps<typeof choiceVariant>;
+/**
+ * Color variants for the SwitchSelector component
+ *
+ * @enum SwitchSelectorColor
+ */
 export declare enum SwitchSelectorColor {
+    /** Primary brand color theme */
     PRIMARY = "primary",
+    /** Secondary accent color theme */
     SECONDARY = "secondary",
+    /** Destructive/error color theme for dangerous actions */
     DESTRUCTIVE = "destructive",
+    /** Neutral gray color theme */
     NEUTRAL = "neutral",
+    /** Light color theme for dark backgrounds */
     LIGHT = "light",
+    /** Dark color theme for light backgrounds */
     DARK = "dark",
+    /** Text color theme that adapts to content */
     TEXT = "text"
 }
 declare const switchSelectorVariant: (props?: ({
     color?: SwitchSelectorColor | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Size variants for the SwitchSelector component
+ *
+ * @enum SwitchSelectorSize
+ */
 export declare enum SwitchSelectorSize {
+    /** Small size - compact for tight layouts */
     SM = "sm",
+    /** Medium size - standard for most use cases */
     MD = "md",
+    /** Large size - prominent for important selections */
     LG = "lg"
 }
 declare const choiceVariant: (props?: ({
     size?: SwitchSelectorSize | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
+ * 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
  *
- * Component that allows the user to select one of the provided choices.
+ * ## 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:
- * ```jsx
+ * @example
+ * Theme selector with icons:
+ * ```tsx
  * <SwitchSelector
  *   choices={[
- *     { content: 'Option 1', value: 'option1' },
- *     { content: 'Option 2', value: 'option2' },
- *     { content: 'Option 3', value: 'option3' },
+ *     { content: <>☀️ Light</>, value: 'light' },
+ *     { content: <>🌙 Dark</>, value: 'dark' },
+ *     { content: <>⚙️ System</>, value: 'system' }
  *   ]}
- *   value="option1"
- *   onChange={(choice) => console.log(choice)}
+ *   value={theme}
+ *   onChange={setTheme}
+ *   size={SwitchSelectorSize.SM}
  * />
  * ```
  */

package/dist/components/SwitchSelector/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SwitchSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;CACV,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;~~AACtC~~,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;AAOjE,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC7C,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;~~IACnC~~,KAAK,CAAC,EAAE,CAAC,CAAC;~~IACV~~,YAAY,CAAC,EAAE,CAAC,CAAC;~~IACjB~~,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;~~IAC~~/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAC5C,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,oBAAY,mBAAmB;IAC7B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,QAAA,MAAM,qBAAqB;;8EAmB1B,CAAC;AAEF,oBAAY,kBAAkB;IAC5B,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;CACV;AAED,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAoBF~~;;;;;;;;;;;;;;;;GAgBG~~;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,EAAG,qEAQhC,mBAAmB,CAAC,CAAC,CAAC,4CAsExB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SwitchSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC9C,oFAAoF;IACpF,OAAO,EAAE,SAAS,CAAC;IACnB,4CAA4C;IAC5C,KAAK,EAAE,CAAC,CAAC;CACV,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAEtC;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,CAAC,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC;AAOjE;;;;;GAKG;AACH,MAAM,MAAM,mBAAmB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC7C;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAEnC;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IAEV;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC;IAEjB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAE/B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAC5C,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC;;;;GAIG;AACH,oBAAY,mBAAmB;IAC7B,gCAAgC;IAChC,OAAO,YAAY;IACnB,mCAAmC;IACnC,SAAS,cAAc;IACvB,0DAA0D;IAC1D,WAAW,gBAAgB;IAC3B,+BAA+B;IAC/B,OAAO,YAAY;IACnB,6CAA6C;IAC7C,KAAK,UAAU;IACf,6CAA6C;IAC7C,IAAI,SAAS;IACb,8CAA8C;IAC9C,IAAI,SAAS;CACd;AAED,QAAA,MAAM,qBAAqB;;8EAmB1B,CAAC;AAEF;;;;GAIG;AACH,oBAAY,kBAAkB;IAC5B,6CAA6C;IAC7C,EAAE,OAAO;IACT,gDAAgD;IAChD,EAAE,OAAO;IACT,sDAAsD;IACtD,EAAE,OAAO;CACV;AAED,QAAA,MAAM,aAAa;;8EAclB,CAAC;AAoBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0FG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,EAAG,qEAQhC,mBAAmB,CAAC,CAAC,CAAC,4CAsExB,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n useEffect,\n useRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\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 flex-row gap-2 rounded-full w-fit 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 text-sm font-medium transition-all duration-300 ease-in-out cursor-pointer aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n [SwitchSelectorSize.SM]: 'py-1 px-2 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"],"names":["SwitchSelectorColor","SwitchSelectorSize","value"],"mappings":"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"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../src/components/SwitchSelector/index.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n useEffect,\n useRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\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 flex-row gap-2 rounded-full w-fit 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 text-sm font-medium transition-all duration-300 ease-in-out cursor-pointer aria-selected:cursor-default aria-selected:text-text-opposite motion-reduce:transition-none',\n {\n variants: {\n size: {\n [SwitchSelectorSize.SM]: 'py-1 px-2 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"],"names":["SwitchSelectorColor","SwitchSelectorSize","value"],"mappings":"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"}

package/dist/components/Table/Table.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.cjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n};\n\nexport const Table: FC<TableProps> = ({ className, isRollable, ...props }) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n className={cn(\n 'max-w-full overflow-x-auto table-auto text-left min-w-full bg-background',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'max-w-full table-auto text-left min-w-full',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"names":["useState","jsxs","jsx","Button","MoveDiagonal","ExpandCollapse","cn","Modal","ModalSize","Fragment"],"mappings":";;;;;;;;;;~~AAaO~~,MAAM,QAAwB,CAAC,EAAE,WAAW,YAAY,GAAG,YAAY;AAC5E,QAAM,CAAC,aAAa,cAAc,IAAIA,aAAAA,SAAS,KAAK;AAEpD,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAAC,2BAAAA,IAAC,SAAI,WAAU,sBACb,UAAAA,+BAAC,OAAA,EAAI,WAAU,0BACb,UAAAA,2BAAAA;AAAAA,MAACC,yBAAAA;AAAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,yBAAe,IAAI;AAAA,QACrB;AAAA,QACA,OAAM;AAAA,QACN,MAAMC,YAAAA;AAAAA,MAAA;AAAA,IAAA,GAEV,EAAA,CACF;AAAA,IACAF,2BAAAA;AAAAA,MAACG,yCAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QAEV,UAAAH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,IAGFJ,2BAAAA;AAAAA,MAACK,uBAAAA;AAAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,MAAMC,uBAAAA,UAAU;AAAA,QAChB,gBAAc;AAAA,QAEb,UAAA,cACCN,+BAAC,OAAA,EAAI,WAAU,QACb,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA,GAER,IAEAJ,+BAAAO,WAAAA,UAAA,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAEN,GACF;AAEJ;;"}
1	+ {"version":3,"file":"Table.cjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\n/*\n Properties for the Table component that extends standard HTML table attributes\n \n @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n \n @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n \n @example\n * ```tsx\n * // Basic table usage\n * <Table>\n * <thead>\n * <tr>\n * <th>Name</th>\n * <th>Email</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n * <thead>\n * <tr>\n * <th>Product</th>\n * <th>Price</th>\n * <th>Stock</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>Laptop</td>\n * <td>$999</td>\n * <td>15</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n /\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n};\n\n/\n Table component that provides an enhanced table experience with modal expansion and collapsible content\n \n The Table component wraps a standard HTML table element with additional functionality:\n * - Modal Expansion: Click the diagonal arrow button to view the table in a full-screen modal\n * - Collapsible Content: Optionally wrap content in an ExpandCollapse component for space-saving\n * - Responsive Design: Handles large tables gracefully with modal overflow\n * - Sticky Controls: Table controls remain accessible even when scrolling\n \n ## Features\n * - Modal View: Full-screen modal for better viewing of large tables\n * - Expand/Collapse: Optional collapsible wrapper to save space\n * - Responsive: Handles overflow and responsive behavior automatically\n * - Accessibility: Maintains proper table semantics and keyboard navigation\n * - Customizable: Supports all standard HTML table attributes and styling\n \n ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n \n @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n \n @example\n * ```tsx\n * // Simple data table\n * <Table>\n * <thead>\n * <tr>\n * <th scope=\"col\">Name</th>\n * <th scope=\"col\">Email</th>\n * <th scope=\"col\">Status</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n * Active\n * </span>\n * </td>\n * </tr>\n * <tr>\n * <td>Jane Smith</td>\n * <td>jane@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n * Pending\n * </span>\n * </td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Large collapsible table with custom styling\n * <Table\n * isRollable\n * className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n * <thead className=\"bg-gray-50\">\n * <tr>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Product ID\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Name\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Category\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Price\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Stock\n * </th>\n * </tr>\n * </thead>\n * <tbody className=\"bg-white divide-y divide-gray-200\">\n * {products.map((product) => (\n * <tr key={product.id} className=\"hover:bg-gray-50\">\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * #{product.id}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n * {product.name}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.category}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * ${product.price.toFixed(2)}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.stock} units\n * </td>\n * </tr>\n * ))}\n * </tbody>\n * </Table>\n \n // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n * <thead>\n * <tr className=\"border-b-2 border-gray-300\">\n * <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n * </tr>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n \n @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const Table: FC<TableProps> = ({ className, isRollable, ...props }) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n className={cn(\n 'max-w-full overflow-x-auto table-auto text-left min-w-full bg-background',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'max-w-full table-auto text-left min-w-full',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"names":["useState","jsxs","jsx","Button","MoveDiagonal","ExpandCollapse","cn","Modal","ModalSize","Fragment"],"mappings":";;;;;;;;;;AAqMO,MAAM,QAAwB,CAAC,EAAE,WAAW,YAAY,GAAG,YAAY;AAC5E,QAAM,CAAC,aAAa,cAAc,IAAIA,aAAAA,SAAS,KAAK;AAEpD,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAAC,2BAAAA,IAAC,SAAI,WAAU,sBACb,UAAAA,+BAAC,OAAA,EAAI,WAAU,0BACb,UAAAA,2BAAAA;AAAAA,MAACC,yBAAAA;AAAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,yBAAe,IAAI;AAAA,QACrB;AAAA,QACA,OAAM;AAAA,QACN,MAAMC,YAAAA;AAAAA,MAAA;AAAA,IAAA,GAEV,EAAA,CACF;AAAA,IACAF,2BAAAA;AAAAA,MAACG,yCAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QAEV,UAAAH,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,IAGFJ,2BAAAA;AAAAA,MAACK,uBAAAA;AAAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,MAAMC,uBAAAA,UAAU;AAAA,QAChB,gBAAc;AAAA,QAEb,UAAA,cACCN,+BAAC,OAAA,EAAI,WAAU,QACb,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA,GAER,IAEAJ,+BAAAO,WAAAA,UAAA,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAEN,GACF;AAEJ;;"}

package/dist/components/Table/Table.d.ts CHANGED Viewed

@@ -1,7 +1,191 @@
 import { HTMLAttributes, FC } from 'react';
+/**
+ * Properties for the Table component that extends standard HTML table attributes
+ *
+ * @interface TableProps
+ * @extends {HTMLAttributes<HTMLTableElement>}
+ *
+ * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper
+ * @property {string} [className] - Additional CSS classes for custom styling
+ * @property {ReactNode} children - The table content including thead, tbody, tfoot elements
+ *
+ * @example
+ * ```tsx
+ * // Basic table usage
+ * <Table>
+ *   <thead>
+ *     <tr>
+ *       <th>Name</th>
+ *       <th>Email</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td>John Doe</td>
+ *       <td>john@example.com</td>
+ *     </tr>
+ *   </tbody>
+ * </Table>
+ *
+ * // Collapsible table with custom styling
+ * <Table isRollable className="border border-gray-300 rounded-lg">
+ *   <thead>
+ *     <tr>
+ *       <th>Product</th>
+ *       <th>Price</th>
+ *       <th>Stock</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td>Laptop</td>
+ *       <td>$999</td>
+ *       <td>15</td>
+ *     </tr>
+ *   </tbody>
+ * </Table>
+ * ```
+ */
 type TableProps = HTMLAttributes<HTMLTableElement> & {
     isRollable?: boolean;
 };
+/**
+ * Table component that provides an enhanced table experience with modal expansion and collapsible content
+ *
+ * The Table component wraps a standard HTML table element with additional functionality:
+ * - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal
+ * - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving
+ * - **Responsive Design**: Handles large tables gracefully with modal overflow
+ * - **Sticky Controls**: Table controls remain accessible even when scrolling
+ *
+ * ## Features
+ * - **Modal View**: Full-screen modal for better viewing of large tables
+ * - **Expand/Collapse**: Optional collapsible wrapper to save space
+ * - **Responsive**: Handles overflow and responsive behavior automatically
+ * - **Accessibility**: Maintains proper table semantics and keyboard navigation
+ * - **Customizable**: Supports all standard HTML table attributes and styling
+ *
+ * ## Best Practices
+ * - Use semantic HTML table structure (thead, tbody, tfoot)
+ * - Provide proper column headers with scope attributes
+ * - Use the isRollable prop for large tables that might need space management
+ * - Apply consistent styling through the className prop
+ * - Consider pagination for very large datasets
+ *
+ * @param {TableProps} props - The properties for the Table component
+ * @returns {JSX.Element} The rendered table with enhanced functionality
+ *
+ * @example
+ * ```tsx
+ * // Simple data table
+ * <Table>
+ *   <thead>
+ *     <tr>
+ *       <th scope="col">Name</th>
+ *       <th scope="col">Email</th>
+ *       <th scope="col">Status</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td>John Doe</td>
+ *       <td>john@example.com</td>
+ *       <td>
+ *         <span className="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">
+ *           Active
+ *         </span>
+ *       </td>
+ *     </tr>
+ *     <tr>
+ *       <td>Jane Smith</td>
+ *       <td>jane@example.com</td>
+ *       <td>
+ *         <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">
+ *           Pending
+ *         </span>
+ *       </td>
+ *     </tr>
+ *   </tbody>
+ * </Table>
+ *
+ * // Large collapsible table with custom styling
+ * <Table
+ *   isRollable
+ *   className="border border-gray-200 rounded-lg overflow-hidden"
+ * >
+ *   <thead className="bg-gray-50">
+ *     <tr>
+ *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+ *         Product ID
+ *       </th>
+ *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+ *         Name
+ *       </th>
+ *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+ *         Category
+ *       </th>
+ *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+ *         Price
+ *       </th>
+ *       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+ *         Stock
+ *       </th>
+ *     </tr>
+ *   </thead>
+ *   <tbody className="bg-white divide-y divide-gray-200">
+ *     {products.map((product) => (
+ *       <tr key={product.id} className="hover:bg-gray-50">
+ *         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+ *           #{product.id}
+ *         </td>
+ *         <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+ *           {product.name}
+ *         </td>
+ *         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+ *           {product.category}
+ *         </td>
+ *         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+ *           ${product.price.toFixed(2)}
+ *         </td>
+ *         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+ *           {product.stock} units
+ *         </td>
+ *       </tr>
+ *     ))}
+ *   </tbody>
+ * </Table>
+ *
+ * // Financial data table with formatted numbers
+ * <Table className="w-full border-collapse">
+ *   <thead>
+ *     <tr className="border-b-2 border-gray-300">
+ *       <th scope="col" className="text-left py-3 px-4">Quarter</th>
+ *       <th scope="col" className="text-right py-3 px-4">Revenue</th>
+ *       <th scope="col" className="text-right py-3 px-4">Profit</th>
+ *       <th scope="col" className="text-right py-3 px-4">Growth</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr className="border-b border-gray-200">
+ *       <td className="py-3 px-4 font-medium">Q1 2024</td>
+ *       <td className="py-3 px-4 text-right">$2,450,000</td>
+ *       <td className="py-3 px-4 text-right text-green-600">$345,000</td>
+ *       <td className="py-3 px-4 text-right text-green-600">+12.5%</td>
+ *     </tr>
+ *     <tr className="border-b border-gray-200">
+ *       <td className="py-3 px-4 font-medium">Q2 2024</td>
+ *       <td className="py-3 px-4 text-right">$2,780,000</td>
+ *       <td className="py-3 px-4 text-right text-green-600">$398,000</td>
+ *       <td className="py-3 px-4 text-right text-green-600">+13.5%</td>
+ *     </tr>
+ *   </tbody>
+ * </Table>
+ * ```
+ *
+ * @see {@link ExpandCollapse} - Component used for collapsible table content
+ * @see {@link Modal} - Component used for full-screen table view
+ * @see {@link Button} - Component used for the modal trigger button
+ */
 export declare const Table: FC<TableProps>;
 export {};
 //# sourceMappingURL=Table.d.ts.map

package/dist/components/Table/Table.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAM1D,KAAK,UAAU,GAAG,cAAc,CAAC,gBAAgB,CAAC,GAAG;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAqDhC,CAAC"}
1	+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAY,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAM1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,KAAK,UAAU,GAAG,cAAc,CAAC,gBAAgB,CAAC,GAAG;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwIG;AACH,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAqDhC,CAAC"}

package/dist/components/Table/Table.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n};\n\nexport const Table: FC<TableProps> = ({ className, isRollable, ...props }) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n className={cn(\n 'max-w-full overflow-x-auto table-auto text-left min-w-full bg-background',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'max-w-full table-auto text-left min-w-full',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;~~AAaO~~,MAAM,QAAwB,CAAC,EAAE,WAAW,YAAY,GAAG,YAAY;AAC5E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,SACE,qBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAU,sBACb,UAAA,oBAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,yBAAe,IAAI;AAAA,QACrB;AAAA,QACA,OAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IAAA,GAEV,EAAA,CACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QAEV,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,IAGF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,MAAM,UAAU;AAAA,QAChB,gBAAc;AAAA,QAEb,UAAA,cACC,oBAAC,OAAA,EAAI,WAAU,QACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA,GAER,IAEA,oBAAA,UAAA,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAEN,GACF;AAEJ;"}
1	+ {"version":3,"file":"Table.mjs","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { MoveDiagonal } from 'lucide-react';\nimport { HTMLAttributes, useState, type FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\n/*\n Properties for the Table component that extends standard HTML table attributes\n \n @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n \n @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n \n @example\n * ```tsx\n * // Basic table usage\n * <Table>\n * <thead>\n * <tr>\n * <th>Name</th>\n * <th>Email</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n * <thead>\n * <tr>\n * <th>Product</th>\n * <th>Price</th>\n * <th>Stock</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>Laptop</td>\n * <td>$999</td>\n * <td>15</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n /\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n};\n\n/\n Table component that provides an enhanced table experience with modal expansion and collapsible content\n \n The Table component wraps a standard HTML table element with additional functionality:\n * - Modal Expansion: Click the diagonal arrow button to view the table in a full-screen modal\n * - Collapsible Content: Optionally wrap content in an ExpandCollapse component for space-saving\n * - Responsive Design: Handles large tables gracefully with modal overflow\n * - Sticky Controls: Table controls remain accessible even when scrolling\n \n ## Features\n * - Modal View: Full-screen modal for better viewing of large tables\n * - Expand/Collapse: Optional collapsible wrapper to save space\n * - Responsive: Handles overflow and responsive behavior automatically\n * - Accessibility: Maintains proper table semantics and keyboard navigation\n * - Customizable: Supports all standard HTML table attributes and styling\n \n ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n \n @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n \n @example\n * ```tsx\n * // Simple data table\n * <Table>\n * <thead>\n * <tr>\n * <th scope=\"col\">Name</th>\n * <th scope=\"col\">Email</th>\n * <th scope=\"col\">Status</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n * Active\n * </span>\n * </td>\n * </tr>\n * <tr>\n * <td>Jane Smith</td>\n * <td>jane@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n * Pending\n * </span>\n * </td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Large collapsible table with custom styling\n * <Table\n * isRollable\n * className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n * <thead className=\"bg-gray-50\">\n * <tr>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Product ID\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Name\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Category\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Price\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Stock\n * </th>\n * </tr>\n * </thead>\n * <tbody className=\"bg-white divide-y divide-gray-200\">\n * {products.map((product) => (\n * <tr key={product.id} className=\"hover:bg-gray-50\">\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * #{product.id}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n * {product.name}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.category}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * ${product.price.toFixed(2)}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.stock} units\n * </td>\n * </tr>\n * ))}\n * </tbody>\n * </Table>\n \n // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n * <thead>\n * <tr className=\"border-b-2 border-gray-300\">\n * <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n * </tr>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n \n @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const Table: FC<TableProps> = ({ className, isRollable, ...props }) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n className={cn(\n 'max-w-full overflow-x-auto table-auto text-left min-w-full bg-background',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'max-w-full table-auto text-left min-w-full',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;AAqMO,MAAM,QAAwB,CAAC,EAAE,WAAW,YAAY,GAAG,YAAY;AAC5E,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,SACE,qBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAU,sBACb,UAAA,oBAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,yBAAe,IAAI;AAAA,QACrB;AAAA,QACA,OAAM;AAAA,QACN,MAAM;AAAA,MAAA;AAAA,IAAA,GAEV,EAAA,CACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QAEV,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,IAAA;AAAA,IAGF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,QAAQ;AAAA,QACR,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,MAAM,UAAU;AAAA,QAChB,gBAAc;AAAA,QAEb,UAAA,cACC,oBAAC,OAAA,EAAI,WAAU,QACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAG;AAAA,UAAA;AAAA,QAAA,GAER,IAEA,oBAAA,UAAA,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAEN,GACF;AAEJ;"}

package/dist/components/Tag/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\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\nexport enum TagColor {\n SUCCESS = 'success',\n ERROR = 'error',\n WARNING = 'warning',\n NEUTRAL = 'neutral',\n TEXT = 'text',\n}\n\nexport enum TagSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n}\n\nexport enum TagBorder {\n NONE = 'none',\n WITH = 'with',\n}\n\nexport enum TagBackground {\n NONE = 'none',\n WITH = 'with',\n}\n\nconst containerVariants = cva('backdrop-blur w-fit', {\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}`]: 'bg-success/10 border-success text-success ',\n [`${TagColor.ERROR}`]: 'bg-error/10 border-error text-error',\n [`${TagColor.WARNING}`]: 'bg-warning/10 border-warning text-warning',\n [`${TagColor.NEUTRAL}`]: 'bg-neutral/10 /10 border-neutral text-neutral ',\n [`${TagColor.TEXT}`]: 'bg-text/10 border-text text-text',\n },\n size: {\n [`${TagSize.XS}`]: 'py-0.5 px-2 text-xs border-[1.2px]',\n [`${TagSize.SM}`]: 'py-0.5 px-2 text-sm border-[1.5px]',\n [`${TagSize.MD}`]: 'py-1 px-2 text-base border-2',\n [`${TagSize.LG}`]: 'py-2 px-3 text-lg border-2',\n [`${TagSize.XL}`]: 'py-4 px-5 text-xl border-2',\n },\n border: {\n [`${TagBorder.NONE}`]: 'border-none',\n [`${TagBorder.WITH}`]: 'border-text border-[1.5px]',\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\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"],"names":["TagRoundedSize","TagColor","TagSize","TagBorder","TagBackground","cva","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import { type VariantProps, cva } 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}\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('backdrop-blur w-fit', {\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}`]: 'bg-success/10 border-success text-success ',\n [`${TagColor.ERROR}`]: 'bg-error/10 border-error text-error',\n [`${TagColor.WARNING}`]: 'bg-warning/10 border-warning text-warning',\n [`${TagColor.NEUTRAL}`]: 'bg-neutral/10 /10 border-neutral text-neutral ',\n [`${TagColor.TEXT}`]: 'bg-text/10 border-text text-text',\n },\n size: {\n [`${TagSize.XS}`]: 'py-0.5 px-2 text-xs border-[1.2px]',\n [`${TagSize.SM}`]: 'py-0.5 px-2 text-sm border-[1.5px]',\n [`${TagSize.MD}`]: 'py-1 px-2 text-base border-2',\n [`${TagSize.LG}`]: 'py-2 px-3 text-lg border-2',\n [`${TagSize.XL}`]: 'py-4 px-5 text-xl border-2',\n },\n border: {\n [`${TagBorder.NONE}`]: 'border-none',\n [`${TagBorder.WITH}`]: 'border-text border-[1.5px]',\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"],"names":["TagRoundedSize","TagColor","TagSize","TagBorder","TagBackground","cva","jsx"],"mappings":"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"}