npm - @intlayer/design-system - Versions diffs - 8.11.3 → 8.12.0-canary.0 - Mend

@intlayer/design-system 8.11.3 → 8.12.0-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 (259) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TabSelector.mjs","names":[],"sources":["../../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ItemSelectorOrientation,\n useItemSelector,\n} from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\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';\n\nexport ~~enum~~ TabSelectorColor {\n ~~PRIMARY~~ = 'primary',\n ~~SECONDARY =~~ 'secondary',\n ~~ERROR =~~ 'error',\n ~~NEUTRAL =~~ 'neutral',\n ~~LIGHT =~~ 'light',\n ~~DARK =~~ 'dark',\n ~~TEXT =~~ 'text',\n}\n\nconst tabSelectorVariant = cva(\n 'relative z-0 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 error: 'border-error bg-error text-error',\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 -z-1 rounded-lg 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 error: 'bg-error/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 orientation: {\n horizontal: 'top-0 h-full w-auto transition-[left,width]',\n vertical: 'left-0 h-auto w-full transition-[top,height]',\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\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 orientation?: ItemSelectorOrientation;\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 orientation = 'horizontal',\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 { isHoverable: hoverable, orientation }\n );\n\n useEffect(() => {\n calculatePosition();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedChoice]);\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation={orientation}\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 orientation,\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":";;;;;;;;;~~AAiBA~~,~~IAAY,mBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,~~MAAM,qBAAqB,IACzB,2DACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,WAAW;EACX,OAAO;EACP,SAAS;EACT,OAAO;EACP,MAAM;EACN,MAAM;CACR,EACF;CACA,iBAAiB,EACf,OAAO,UACT;AACF,CACF;AAEA,MAAM,mBAAmB,IACvB,mFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;GACX,OAAO;GACP,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;EACR;EACA,aAAa;GACX,YAAY;GACZ,UAAU;EACZ;CACF;CACA,iBAAiB,EACf,aAAa,aACf;AACF,CACF;;;;;;;;;;;;;;;;;;AAkCA,MAAa,eAA+C,EAC1D,MACA,gBACA,YACA,~~mBACA~~,YAAY,OACZ,cAAc,cACd,gBACyB;CACzB,MAAM,cAAc,OAAsB,CAAC,CAAC;CAC5C,MAAM,eAAe,OAA8B,IAAI;CACvD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EAAE,aAAa;EAAW;CAAY,CACxC;CAEA,gBAAgB;EACd,kBAAkB;CAEpB,GAAG,CAAC,cAAc,CAAC;CAEnB,OACE,qBAAC,OAAD;EACE,WAAW,GACT,mBAAmB,EACjB,MACF,CAAC,GACD,SACF;EACA,oBAAkB;EAClB,wBAAqB;EACrB,MAAK;YATP,CAWG,KAAK,KAAK,KAAK,UAAU;GACxB,MAAM,MAAM,IAAI;GAEhB,MAAM,aAAa,mBAAmB;GAEtC,OAAO,aAAa,KAAK;IACvB,KAAK,OAAO;IACZ,MAAM;IACN,UAAU,MAA+B;KACvC,IAAI,OAAO,UAAU,CAAC;KACtB,aAAa,GAAG;IAClB;IACA,iBAAiB;IACjB,eAAe;IACf,UAAU,aAAa,IAAI;IAC3B,MAAM,OAAoB;KACxB,YAAY,QAAQ,SAAS;IAC/B;GACF,CAAiB;EACnB,CAAC,GACA,2BACC,oBAAC,OAAD;GACE,WAAW,GACT,iBAAiB;IACf;IACA;GACF,CAAC,CACH;GACA,OAAO;GACP,KAAK;EAEN,GADM,GAAG,iBAAiB,KAAK,UAAU,KAAK,KAAK,QAAQ,IAAI,GAAG,CAAC,GACnE,CAEA;;AAET"}
1	+ {"version":3,"file":"TabSelector.mjs","names":[],"sources":["../../../../src/components/TabSelector/TabSelector.tsx"],"sourcesContent":["'use client';\n\nimport {\n type ItemSelectorOrientation,\n useItemSelector,\n} from '@hooks/useItemSelector';\nimport { cn } from '@utils/cn';\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';\n\nexport type TabSelectorColor = \n \| 'primary' \|\n 'secondary' \|\n 'error' \|\n 'neutral' \|\n 'light' \|\n 'dark' \|\n 'text';\n\nconst tabSelectorVariant = cva(\n 'relative z-0 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 error: 'border-error bg-error text-error',\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 -z-1 rounded-lg 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 error: 'bg-error/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 orientation: {\n horizontal: 'top-0 h-full w-auto transition-[left,width]',\n vertical: 'left-0 h-auto w-full transition-[top,height]',\n },\n },\n defaultVariants: {\n orientation: 'horizontal',\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 orientation?: ItemSelectorOrientation;\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 = 'primary',\n hoverable = false,\n orientation = 'horizontal',\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 { isHoverable: hoverable, orientation }\n );\n\n useEffect(() => {\n calculatePosition();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedChoice]);\n\n return (\n <div\n className={cn(\n tabSelectorVariant({\n color,\n }),\n className\n )}\n aria-orientation={orientation}\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 orientation,\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":";;;;;;;;;AA0BA,MAAM,qBAAqB,IACzB,2DACA;CACE,UAAU,EACR,OAAO;EACL,SAAS;EACT,WAAW;EACX,OAAO;EACP,SAAS;EACT,OAAO;EACP,MAAM;EACN,MAAM;CACR,EACF;CACA,iBAAiB,EACf,OAAO,UACT;AACF,CACF;AAEA,MAAM,mBAAmB,IACvB,mFACA;CACE,UAAU;EACR,OAAO;GACL,SAAS;GACT,WAAW;GACX,OAAO;GACP,SAAS;GACT,OAAO;GACP,MAAM;GACN,MAAM;EACR;EACA,aAAa;GACX,YAAY;GACZ,UAAU;EACZ;CACF;CACA,iBAAiB,EACf,aAAa,aACf;AACF,CACF;;;;;;;;;;;;;;;;;;AAkCA,MAAa,eAA+C,EAC1D,MACA,gBACA,YACA,QAAQ,WACR,YAAY,OACZ,cAAc,cACd,gBACyB;CACzB,MAAM,cAAc,OAAsB,CAAC,CAAC;CAC5C,MAAM,eAAe,OAA8B,IAAI;CACvD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EAAE,aAAa;EAAW;CAAY,CACxC;CAEA,gBAAgB;EACd,kBAAkB;CAEpB,GAAG,CAAC,cAAc,CAAC;CAEnB,OACE,qBAAC,OAAD;EACE,WAAW,GACT,mBAAmB,EACjB,MACF,CAAC,GACD,SACF;EACA,oBAAkB;EAClB,wBAAqB;EACrB,MAAK;YATP,CAWG,KAAK,KAAK,KAAK,UAAU;GACxB,MAAM,MAAM,IAAI;GAEhB,MAAM,aAAa,mBAAmB;GAEtC,OAAO,aAAa,KAAK;IACvB,KAAK,OAAO;IACZ,MAAM;IACN,UAAU,MAA+B;KACvC,IAAI,OAAO,UAAU,CAAC;KACtB,aAAa,GAAG;IAClB;IACA,iBAAiB;IACjB,eAAe;IACf,UAAU,aAAa,IAAI;IAC3B,MAAM,OAAoB;KACxB,YAAY,QAAQ,SAAS;IAC/B;GACF,CAAiB;EACnB,CAAC,GACA,2BACC,oBAAC,OAAD;GACE,WAAW,GACT,iBAAiB;IACf;IACA;GACF,CAAC,CACH;GACA,OAAO;GACP,KAAK;EAEN,GADM,GAAG,iBAAiB,KAAK,UAAU,KAAK,KAAK,QAAQ,IAAI,GAAG,CAAC,GACnE,CAEA;;AAET"}

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

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

package/dist/esm/components/Table/ExpandButton.mjs CHANGED Viewed

@@ -1,5 +1,4 @@
 import { Button } from "../Button/Button.mjs";
-import { PopoverXAlign } from "../Popover/static.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
 import { MoveDiagonal } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandButton.mjs","names":[],"sources":["../../../../src/components/Table/ExpandButton.tsx"],"sourcesContent":["import { Popover, ~~PopoverXAlign~~ } from '@components/Popover';\nimport { MoveDiagonal } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\n\ntype ExpandButtonProps = {\n setIsModalOpen: (isOpen: boolean) => void;\n};\n\nexport const ExpandButton: FC<ExpandButtonProps> = ({ setIsModalOpen }) => {\n const { modal: modalContent } = useIntlayer('table');\n\n return (\n <div className=\"pointer-events-none absolute inset-y-0 right-4 z-10\">\n <div className=\"pointer-events-auto sticky top-48 pt-4\">\n <Popover identifier=\"expand\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label={modalContent.title}\n Icon={MoveDiagonal}\n />\n\n <Popover.Detail\n identifier=\"expand\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign~~={PopoverXAlign.END}~~\n >\n <strong>{modalContent.title}</strong>\n <p className=\"text-neutral\">{modalContent.description}</p>\n </Popover.Detail>\n </Popover>\n </div>\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;;~~AAUA,MAAa,gBAAuC,EAAE,qBAAqB;CACzE,MAAM,EAAE,OAAO,iBAAiB,YAAY,OAAO;CAEnD,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,SAAD;IAAS,YAAW;cAApB,CACE,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,eAAe;MACb,eAAe,IAAI;KACrB;KACA,OAAO,aAAa;KACpB,MAAM;IACP,IAED,qBAAC,QAAQ,QAAT;KACE,YAAW;KACX,WAAU;KACV;~~eAHF~~,CAKE,oBAAC,UAAD,YAAS,aAAa,MAAc,IACpC,oBAAC,KAAD;MAAG,WAAU;gBAAgB,aAAa;KAAe,EAC3C;MACT;;EACN;CACF;AAET"}
1	+ {"version":3,"file":"ExpandButton.mjs","names":[],"sources":["../../../../src/components/Table/ExpandButton.tsx"],"sourcesContent":["import { Popover } from '@components/Popover';\nimport { MoveDiagonal } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\n\ntype ExpandButtonProps = {\n setIsModalOpen: (isOpen: boolean) => void;\n};\n\nexport const ExpandButton: FC<ExpandButtonProps> = ({ setIsModalOpen }) => {\n const { modal: modalContent } = useIntlayer('table');\n\n return (\n <div className=\"pointer-events-none absolute inset-y-0 right-4 z-10\">\n <div className=\"pointer-events-auto sticky top-48 pt-4\">\n <Popover identifier=\"expand\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label={modalContent.title}\n Icon={MoveDiagonal}\n />\n\n <Popover.Detail\n identifier=\"expand\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign=\"end\"\n >\n <strong>{modalContent.title}</strong>\n <p className=\"text-neutral\">{modalContent.description}</p>\n </Popover.Detail>\n </Popover>\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;AAUA,MAAa,gBAAuC,EAAE,qBAAqB;CACzE,MAAM,EAAE,OAAO,iBAAiB,YAAY,OAAO;CAEnD,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,SAAD;IAAS,YAAW;cAApB,CACE,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,eAAe;MACb,eAAe,IAAI;KACrB;KACA,OAAO,aAAa;KACpB,MAAM;IACP,IAED,qBAAC,QAAQ,QAAT;KACE,YAAW;KACX,WAAU;KACV,QAAO;eAHT,CAKE,oBAAC,UAAD,YAAS,aAAa,MAAc,IACpC,oBAAC,KAAD;MAAG,WAAU;gBAAgB,aAAa;KAAe,EAC3C;MACT;;EACN;CACF;AAET"}

package/dist/esm/components/Table/SmartTable.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
-import { Modal, ModalSize } from "../Modal/Modal.mjs";
+import { Modal } from "../Modal/Modal.mjs";
 import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
 import { ExpandButton } from "./ExpandButton.mjs";
 import { Table } from "./Table.mjs";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SmartTable.mjs","names":[],"sources":["../../../../src/components/Table/SmartTable.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\nimport { ExpandButton } from './ExpandButton';\nimport type { TableProps } from './Table';\nimport { Table } from './Table';\nimport { useTableWidths } from './useTableWidths';\n\n/*\n Properties for the SmartTable component\n \n @interface SmartTableProps\n * @extends {TableProps}\n \n @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {boolean} [displayModal] - Whether the table should be able to expand into a modal\n /\ntype SmartTableProps = TableProps & {\n isRollable?: boolean;\n displayModal?: 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 {SmartTableProps} 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 * <SmartTable>\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 * </SmartTable>\n \n // Large collapsible table with custom styling\n * <SmartTable\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 * </SmartTable>\n \n // Financial data table with formatted numbers\n * <SmartTable 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 * </SmartTable>\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 SmartTable: FC<SmartTableProps> = ({\n className,\n isRollable = false,\n displayModal,\n isInteractive,\n onClick,\n ...props\n}) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [highlightedRowIndex, setHighlightedRowIndex] = useState<number \| null>(\n null\n );\n\n const tableRef = useRef<HTMLTableElement>(null);\n const modalTableRef = useRef<HTMLTableElement>(null);\n\n useTableWidths(tableRef, modalTableRef, [props.children, isModalOpen]);\n\n useEffect(() => {\n if (isModalOpen && highlightedRowIndex !== null && modalTableRef.current) {\n const row = modalTableRef.current.rows[highlightedRowIndex];\n\n if (row) {\n row.scrollIntoView({ behavior: 'smooth', block: 'center' });\n\n row.classList.add('bg-neutral/40', 'dark:bg-neutral-dark/40');\n row.style.transition = 'background-color 0.3s ease-in-out';\n }\n }\n }, [isModalOpen, highlightedRowIndex]);\n\n useEffect(() => {\n if (!isModalOpen) {\n setHighlightedRowIndex(null);\n }\n }, [isModalOpen]);\n\n const handleTableClick = (e: React.MouseEvent<HTMLTableElement>) => {\n if (displayModal) {\n const target = e.target as HTMLElement;\n const tr = target.closest('tr');\n\n if (tr?.closest('tbody')) {\n setHighlightedRowIndex(tr.rowIndex);\n setIsModalOpen(true);\n }\n }\n onClick?.(e);\n };\n\n return (\n <div className=\"group relative\">\n {displayModal && <ExpandButton setIsModalOpen={setIsModalOpen} />}\n\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto rounded-2xl bg-background text-left [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\"\n >\n <Table\n ref={tableRef}\n className={className}\n isInteractive={isInteractive ?? displayModal}\n onClick={handleTableClick}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n handleTableClick(\n e as unknown as React.MouseEvent<HTMLTableElement>\n );\n }\n }}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n isScrollable\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <Table\n ref={modalTableRef}\n className={cn('min-w-full max-w-full text-left', className)}\n isInteractive={isInteractive}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkKA,MAAa,cAAmC,EAC9C,WACA,aAAa,OACb,cACA,eACA,SACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,IACF;CAEA,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,gBAAgB,OAAyB,IAAI;CAEnD,eAAe,UAAU,eAAe,CAAC,MAAM,UAAU,WAAW,CAAC;CAErE,gBAAgB;EACd,IAAI,eAAe,wBAAwB,QAAQ,cAAc,SAAS;GACxE,MAAM,MAAM,cAAc,QAAQ,KAAK;GAEvC,IAAI,KAAK;IACP,IAAI,eAAe;KAAE,UAAU;KAAU,OAAO;IAAS,CAAC;IAE1D,IAAI,UAAU,IAAI,iBAAiB,yBAAyB;IAC5D,IAAI,MAAM,aAAa;GACzB;EACF;CACF,GAAG,CAAC,aAAa,mBAAmB,CAAC;CAErC,gBAAgB;EACd,IAAI,CAAC,aACH,uBAAuB,IAAI;CAE/B,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,oBAAoB,MAA0C;EAClE,IAAI,cAAc;GAEhB,MAAM,KADS,EAAE,OACC,QAAQ,IAAI;GAE9B,IAAI,IAAI,QAAQ,OAAO,GAAG;IACxB,uBAAuB,GAAG,QAAQ;IAClC,eAAe,IAAI;GACrB;EACF;EACA,UAAU,CAAC;CACb;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBAAgB,oBAAC,cAAD,EAA8B,eAAiB;GAEhE,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,OAAD;KACE,KAAK;KACM;KACX,eAAe,iBAAiB;KAChC,SAAS;KACT,YAAY,MAAM;MAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KACjC,iBACE,CACF;KAEJ;KACA,GAAI;IACL;GACa;GAEhB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,KAAK;IACnC;IACA;IACA;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MACE,KAAK;MACL,WAAW,GAAG,mCAAmC,SAAS;MAC3C;MACf,GAAI;KACL;IACE,KAEL,iCAAI;GAED;EACJ;;AAET"}
1	+ {"version":3,"file":"SmartTable.mjs","names":[],"sources":["../../../../src/components/Table/SmartTable.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, useEffect, useRef, useState } from 'react';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal } from '../Modal';\nimport { ExpandButton } from './ExpandButton';\nimport type { TableProps } from './Table';\nimport { Table } from './Table';\nimport { useTableWidths } from './useTableWidths';\n\n/*\n Properties for the SmartTable component\n \n @interface SmartTableProps\n * @extends {TableProps}\n \n @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {boolean} [displayModal] - Whether the table should be able to expand into a modal\n /\ntype SmartTableProps = TableProps & {\n isRollable?: boolean;\n displayModal?: 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 {SmartTableProps} 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 * <SmartTable>\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 * </SmartTable>\n \n // Large collapsible table with custom styling\n * <SmartTable\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 * </SmartTable>\n \n // Financial data table with formatted numbers\n * <SmartTable 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 * </SmartTable>\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 SmartTable: FC<SmartTableProps> = ({\n className,\n isRollable = false,\n displayModal,\n isInteractive,\n onClick,\n ...props\n}) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [highlightedRowIndex, setHighlightedRowIndex] = useState<number \| null>(\n null\n );\n\n const tableRef = useRef<HTMLTableElement>(null);\n const modalTableRef = useRef<HTMLTableElement>(null);\n\n useTableWidths(tableRef, modalTableRef, [props.children, isModalOpen]);\n\n useEffect(() => {\n if (isModalOpen && highlightedRowIndex !== null && modalTableRef.current) {\n const row = modalTableRef.current.rows[highlightedRowIndex];\n\n if (row) {\n row.scrollIntoView({ behavior: 'smooth', block: 'center' });\n\n row.classList.add('bg-neutral/40', 'dark:bg-neutral-dark/40');\n row.style.transition = 'background-color 0.3s ease-in-out';\n }\n }\n }, [isModalOpen, highlightedRowIndex]);\n\n useEffect(() => {\n if (!isModalOpen) {\n setHighlightedRowIndex(null);\n }\n }, [isModalOpen]);\n\n const handleTableClick = (e: React.MouseEvent<HTMLTableElement>) => {\n if (displayModal) {\n const target = e.target as HTMLElement;\n const tr = target.closest('tr');\n\n if (tr?.closest('tbody')) {\n setHighlightedRowIndex(tr.rowIndex);\n setIsModalOpen(true);\n }\n }\n onClick?.(e);\n };\n\n return (\n <div className=\"group relative\">\n {displayModal && <ExpandButton setIsModalOpen={setIsModalOpen} />}\n\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto rounded-2xl bg-background text-left [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\"\n >\n <Table\n ref={tableRef}\n className={className}\n isInteractive={isInteractive ?? displayModal}\n onClick={handleTableClick}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n handleTableClick(\n e as unknown as React.MouseEvent<HTMLTableElement>\n );\n }\n }}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size=\"xl\"\n hasCloseButton\n isScrollable\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <Table\n ref={modalTableRef}\n className={cn('min-w-full max-w-full text-left', className)}\n isInteractive={isInteractive}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkKA,MAAa,cAAmC,EAC9C,WACA,aAAa,OACb,cACA,eACA,SACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,IACF;CAEA,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,gBAAgB,OAAyB,IAAI;CAEnD,eAAe,UAAU,eAAe,CAAC,MAAM,UAAU,WAAW,CAAC;CAErE,gBAAgB;EACd,IAAI,eAAe,wBAAwB,QAAQ,cAAc,SAAS;GACxE,MAAM,MAAM,cAAc,QAAQ,KAAK;GAEvC,IAAI,KAAK;IACP,IAAI,eAAe;KAAE,UAAU;KAAU,OAAO;IAAS,CAAC;IAE1D,IAAI,UAAU,IAAI,iBAAiB,yBAAyB;IAC5D,IAAI,MAAM,aAAa;GACzB;EACF;CACF,GAAG,CAAC,aAAa,mBAAmB,CAAC;CAErC,gBAAgB;EACd,IAAI,CAAC,aACH,uBAAuB,IAAI;CAE/B,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,oBAAoB,MAA0C;EAClE,IAAI,cAAc;GAEhB,MAAM,KADS,EAAE,OACC,QAAQ,IAAI;GAE9B,IAAI,IAAI,QAAQ,OAAO,GAAG;IACxB,uBAAuB,GAAG,QAAQ;IAClC,eAAe,IAAI;GACrB;EACF;EACA,UAAU,CAAC;CACb;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBAAgB,oBAAC,cAAD,EAA8B,eAAiB;GAEhE,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,OAAD;KACE,KAAK;KACM;KACX,eAAe,iBAAiB;KAChC,SAAS;KACT,YAAY,MAAM;MAChB,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KACjC,iBACE,CACF;KAEJ;KACA,GAAI;IACL;GACa;GAEhB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,KAAK;IACnC,MAAK;IACL;IACA;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MACE,KAAK;MACL,WAAW,GAAG,mCAAmC,SAAS;MAC3C;MACf,GAAI;KACL;IACE,KAEL,iCAAI;GAED;EACJ;;AAET"}

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

@@ -2,205 +2,51 @@ import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Tag/index.tsx
-/**
-* Enumeration for tag border radius sizes
-*
-* Controls the roundedness of tag corners, from sharp edges to fully rounded pills.
-*
-* @enum TagRoundedSize
-* @property NONE - 'none' - No border radius (sharp corners)
-* @property SM - 'sm' - Small border radius (2px)
-* @property MD - 'md' - Medium border radius (6px)
-* @property LG - 'lg' - Large border radius (8px)
-* @property XL - 'xl' - Extra large border radius (12px)
-* @property XXL - '2xl' - 2x large border radius (16px)
-* @property XXXL - '3xl' - 3x large border radius (24px)
-* @property FULL - 'full' - Fully rounded (50% border radius, pill shape)
-*
-* @example
-* ```tsx
-* // Sharp corners
-* <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>
-*
-* // Pill-shaped tag
-* <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>
-*
-* // Medium rounded corners
-* <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>
-* ```
-*/
-let TagRoundedSize = /* @__PURE__ */ function(TagRoundedSize) {
-	TagRoundedSize["NONE"] = "none";
-	TagRoundedSize["SM"] = "sm";
-	TagRoundedSize["MD"] = "md";
-	TagRoundedSize["LG"] = "lg";
-	TagRoundedSize["XL"] = "xl";
-	TagRoundedSize["XXL"] = "2xl";
-	TagRoundedSize["XXXL"] = "3xl";
-	TagRoundedSize["FULL"] = "full";
-	return TagRoundedSize;
-}({});
-/**
-* Enumeration for tag color themes
-*
-* Provides semantic color options for different tag purposes and meanings.
-* Each color includes background, border, and text color variations.
-*
-* @enum TagColor
-* @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items
-* @property ERROR - 'error' - Red theme for error states, warnings, or failed operations
-* @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices
-* @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content
-* @property TEXT - 'text' - Default text color theme for general purpose tags
-*
-* @example
-* ```tsx
-* // Status indicators
-* <Tag color={TagColor.SUCCESS}>Completed</Tag>
-* <Tag color={TagColor.ERROR}>Failed</Tag>
-* <Tag color={TagColor.WARNING}>Pending</Tag>
-*
-* // Category tags
-* <Tag color={TagColor.NEUTRAL}>Category</Tag>
-* <Tag color={TagColor.TEXT}>General</Tag>
-* ```
-*/
-let TagColor = /* @__PURE__ */ function(TagColor) {
-	TagColor["PRIMARY"] = "primary";
-	TagColor["SUCCESS"] = "success";
-	TagColor["ERROR"] = "error";
-	TagColor["WARNING"] = "warning";
-	TagColor["NEUTRAL"] = "neutral";
-	TagColor["TEXT"] = "text";
-	TagColor["BLUE"] = "blue";
-	TagColor["YELLOW"] = "yellow";
-	TagColor["GREEN"] = "green";
-	TagColor["RED"] = "red";
-	TagColor["ORANGE"] = "orange";
-	TagColor["PURPLE"] = "purple";
-	TagColor["PINK"] = "pink";
-	TagColor["BROWN"] = "brown";
-	TagColor["GRAY"] = "gray";
-	TagColor["BLACK"] = "black";
-	TagColor["WHITE"] = "white";
-	return TagColor;
-}({});
-/**
-* Enumeration for tag size variants
-*
-* Controls the overall size of tags including padding, font size, and border thickness.
-* Sizes are designed to maintain visual hierarchy and readability.
-*
-* @enum TagSize
-* @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)
-* @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)
-* @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size
-* @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)
-* @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)
-*
-* @example
-* ```tsx
-* // Different sizes for hierarchy
-* <Tag size={TagSize.XS}>Small detail</Tag>
-* <Tag size={TagSize.SM}>Minor category</Tag>
-* <Tag size={TagSize.MD}>Standard tag</Tag>
-* <Tag size={TagSize.LG}>Important label</Tag>
-* <Tag size={TagSize.XL}>Hero tag</Tag>
-* ```
-*/
-let TagSize = /* @__PURE__ */ function(TagSize) {
-	TagSize["XS"] = "xs";
-	TagSize["SM"] = "sm";
-	TagSize["MD"] = "md";
-	TagSize["LG"] = "lg";
-	TagSize["XL"] = "xl";
-	return TagSize;
-}({});
-/**
-* Enumeration for tag border visibility
-*
-* Controls whether a border is displayed around the tag.
-*
-* @enum TagBorder
-* @property NONE - 'none' - No border (default)
-* @property WITH - 'with' - Show border with 1.5px thickness
-*
-* @example
-* ```tsx
-* <Tag border={TagBorder.NONE}>Borderless</Tag>
-* <Tag border={TagBorder.WITH}>With Border</Tag>
-* ```
-*/
-let TagBorder = /* @__PURE__ */ function(TagBorder) {
-	TagBorder["NONE"] = "none";
-	TagBorder["WITH"] = "with";
-	return TagBorder;
-}({});
-/**
-* Enumeration for tag background visibility
-*
-* Controls the background styling of the tag.
-*
-* @enum TagBackground
-* @property NONE - 'none' - No background styling
-* @property WITH - 'with' - Apply background styling
-*
-* @example
-* ```tsx
-* <Tag background={TagBackground.NONE}>No Background</Tag>
-* <Tag background={TagBackground.WITH}>With Background</Tag>
-* ```
-*/
-let TagBackground = /* @__PURE__ */ function(TagBackground) {
-	TagBackground["NONE"] = "none";
-	TagBackground["WITH"] = "with";
-	return TagBackground;
-}({});
 const containerVariants = cva("w-fit backdrop-blur", {
 	variants: {
 		roundedSize: {
-			[`none`]: "rounded-none",
-			[`sm`]: "rounded-sm",
-			[`md`]: "rounded-md",
-			[`lg`]: "rounded-lg",
-			[`xl`]: "rounded-xl",
-			[`2xl`]: "rounded-2xl",
-			[`3xl`]: "rounded-3xl",
-			[`full`]: "rounded-full"
+			none: "rounded-none",
+			sm: "rounded-sm",
+			md: "rounded-md",
+			lg: "rounded-lg",
+			xl: "rounded-xl",
+			[`xxl`]: "rounded-2xl",
+			[`xxxl`]: "rounded-3xl",
+			full: "rounded-full"
 		},
 		color: {
-			[`primary`]: "border-primary bg-primary/10 text-primary",
-			[`success`]: "border-success bg-success/10 text-success",
-			[`error`]: "border-error bg-error/10 text-error",
-			[`warning`]: "border-warning bg-warning/10 text-warning",
-			[`neutral`]: "/10 border-neutral bg-neutral/10 text-neutral",
-			[`text`]: "border-text bg-text/10 text-text",
-			[`blue`]: "border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300",
-			[`yellow`]: "border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300",
-			[`green`]: "border-green-500 bg-green-500/10 text-green-500 dark:text-green-300",
-			[`red`]: "border-error bg-error/10 text-error dark:text-red-300",
-			[`orange`]: "border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300",
-			[`purple`]: "border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300",
-			[`pink`]: "border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300",
-			[`brown`]: "border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300",
-			[`gray`]: "border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300",
-			[`black`]: "border-black bg-black/10 text-black",
-			[`white`]: "border-white bg-white/10 text-white"
+			primary: "border-primary bg-primary/10 text-primary",
+			success: "border-success bg-success/10 text-success",
+			error: "border-error bg-error/10 text-error",
+			warning: "border-warning bg-warning/10 text-warning",
+			neutral: "/10 border-neutral bg-neutral/10 text-neutral",
+			text: "border-text bg-text/10 text-text",
+			blue: "border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300",
+			yellow: "border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300",
+			green: "border-green-500 bg-green-500/10 text-green-500 dark:text-green-300",
+			red: "border-error bg-error/10 text-error dark:text-red-300",
+			orange: "border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300",
+			purple: "border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300",
+			pink: "border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300",
+			brown: "border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300",
+			gray: "border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300",
+			black: "border-black bg-black/10 text-black",
+			white: "border-white bg-white/10 text-white"
 		},
 		size: {
-			[`xs`]: "border-[1.2px] px-2 py-0.5 text-xs",
-			[`sm`]: "border-[1.3px] px-2 py-0.5 text-sm",
-			[`md`]: "border-2 px-2 py-1 text-base",
-			[`lg`]: "border-2 px-3 py-2 text-lg",
-			[`xl`]: "border-2 px-3 py-2 text-xl"
+			xs: "border-[1.2px] px-2 py-0.5 text-xs",
+			sm: "border-[1.3px] px-2 py-0.5 text-sm",
+			md: "border-2 px-2 py-1 text-base",
+			lg: "border-2 px-3 py-2 text-lg",
+			xl: "border-2 px-3 py-2 text-xl"
 		},
 		border: {
-			[`none`]: "border-none",
-			[`with`]: "border-[1.3px] border-text"
+			none: "border-none",
+			with: "border-[1.3px] border-text"
 		},
 		background: {
-			[`none`]: "bg-none",
-			[`with`]: ""
+			none: "bg-none",
+			with: ""
 		}
 	},
 	defaultVariants: {
@@ -244,38 +90,38 @@ const containerVariants = cva("w-fit backdrop-blur", {
 * @example
 * ```tsx
 * // Basic status tags
-* <Tag color={TagColor.SUCCESS}>Completed</Tag>
-* <Tag color={TagColor.ERROR}>Failed</Tag>
-* <Tag color={TagColor.WARNING}>In Progress</Tag>
+* <Tag color="success">Completed</Tag>
+* <Tag color="error">Failed</Tag>
+* <Tag color="warning">In Progress</Tag>
 *
 * // Category tags with borders
-* <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>
+* <Tag color="neutral" border="with">
 *   Technology
 * </Tag>
-* <Tag color={TagColor.TEXT} border={TagBorder.WITH}>
+* <Tag color="text" border="with">
 *   Design
 * </Tag>
 *
 * // Size variations for hierarchy
 * <div className="flex items-center gap-2">
-*   <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>
-*   <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>
-*   <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>
+*   <Tag size="xs" color="neutral">Minor</Tag>
+*   <Tag size="sm" color="text">Standard</Tag>
+*   <Tag size="lg" color="success">Important</Tag>
 * </div>
 *
 * // Rounded variations
 * <div className="flex gap-2">
-*   <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>
-*   <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>
-*   <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>
+*   <Tag roundedSize="none">Sharp</Tag>
+*   <Tag roundedSize="md">Rounded</Tag>
+*   <Tag roundedSize="full">Pill</Tag>
 * </div>
 *
 * // Custom styled tag
 * <Tag
-*   color={TagColor.WARNING}
-*   size={TagSize.LG}
-*   border={TagBorder.WITH}
-*   roundedSize={TagRoundedSize.LG}
+*   color="warning"
+*   size="lg"
+*   border="with"
+*   roundedSize="lg"
 *   className="font-bold uppercase tracking-wide"
 * >
 *   Custom Style
@@ -283,7 +129,7 @@ const containerVariants = cva("w-fit backdrop-blur", {
 *
 * // Interactive tags with click handlers
 * <Tag
-*   color={TagColor.SUCCESS}
+*   color="success"
 *   onClick={() => console.log('Tag clicked')}
 *   className="cursor-pointer hover:opacity-80 transition-opacity"
 * >
@@ -313,5 +159,5 @@ const Tag = ({ children, color, roundedSize, size, border, background, className
 };
 //#endregion
-export { Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize };
+export { Tag };
 //# sourceMappingURL=index.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/*\n Properties for the Tag component extending HTML div attributes and variant options\n \n @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n \n @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property [className] - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n \n // Success tag with border\n * <Tag color={TagColor.SUCCESS} border={TagBorder.WITH}>\n * Success Status\n * </Tag>\n \n // Large warning tag\n * <Tag color={TagColor.WARNING} size={TagSize.LG}>\n * Important Warning\n * </Tag>\n * ```\n /\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\n/\n Enumeration for tag border radius sizes\n \n Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n \n @enum TagRoundedSize\n * @property NONE - 'none' - No border radius (sharp corners)\n * @property SM - 'sm' - Small border radius (2px)\n * @property MD - 'md' - Medium border radius (6px)\n * @property LG - 'lg' - Large border radius (8px)\n * @property XL - 'xl' - Extra large border radius (12px)\n * @property XXL - '2xl' - 2x large border radius (16px)\n * @property XXXL - '3xl' - 3x large border radius (24px)\n * @property FULL - 'full' - Fully rounded (50% border radius, pill shape)\n \n @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>\n \n // Pill-shaped tag\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>\n \n // Medium rounded corners\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>\n * ```\n /\nexport enum TagRoundedSize {\n NONE = 'none',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n XXL = '2xl',\n XXXL = '3xl',\n FULL = 'full',\n}\n\n/\n Enumeration for tag color themes\n \n Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n \n @enum TagColor\n * @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property TEXT - 'text' - Default text color theme for general purpose tags\n \n @example\n * ```tsx\n * // Status indicators\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>Pending</Tag>\n \n // Category tags\n * <Tag color={TagColor.NEUTRAL}>Category</Tag>\n * <Tag color={TagColor.TEXT}>General</Tag>\n * ```\n /\nexport enum TagColor {\n PRIMARY = 'primary',\n SUCCESS = 'success',\n ERROR = 'error',\n WARNING = 'warning',\n NEUTRAL = 'neutral',\n TEXT = 'text',\n BLUE = 'blue',\n YELLOW = 'yellow',\n GREEN = 'green',\n RED = 'red',\n ORANGE = 'orange',\n PURPLE = 'purple',\n PINK = 'pink',\n BROWN = 'brown',\n GRAY = 'gray',\n BLACK = 'black',\n WHITE = 'white',\n}\n\n/\n Enumeration for tag size variants\n \n Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n \n @enum TagSize\n * @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n \n @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size={TagSize.XS}>Small detail</Tag>\n * <Tag size={TagSize.SM}>Minor category</Tag>\n * <Tag size={TagSize.MD}>Standard tag</Tag>\n * <Tag size={TagSize.LG}>Important label</Tag>\n * <Tag size={TagSize.XL}>Hero tag</Tag>\n * ```\n /\nexport enum TagSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n}\n\n/\n Enumeration for tag border visibility\n \n Controls whether a border is displayed around the tag.\n \n @enum TagBorder\n * @property NONE - 'none' - No border (default)\n * @property WITH - 'with' - Show border with 1.5px thickness\n \n @example\n * ```tsx\n * <Tag border={TagBorder.NONE}>Borderless</Tag>\n * <Tag border={TagBorder.WITH}>With Border</Tag>\n * ```\n /\nexport enum TagBorder {\n NONE = 'none',\n WITH = 'with',\n}\n\n/\n Enumeration for tag background visibility\n \n Controls the background styling of the tag.\n \n @enum TagBackground\n * @property NONE - 'none' - No background styling\n * @property WITH - 'with' - Apply background styling\n \n @example\n * ```tsx\n * <Tag background={TagBackground.NONE}>No Background</Tag>\n * <Tag background={TagBackground.WITH}>With Background</Tag>\n * ```\n /\nexport enum TagBackground {\n NONE = 'none',\n WITH = 'with',\n}\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n variants: {\n roundedSize: {\n [`${TagRoundedSize.NONE}`]: 'rounded-none',\n [`${TagRoundedSize.SM}`]: 'rounded-sm',\n [`${TagRoundedSize.MD}`]: 'rounded-md',\n [`${TagRoundedSize.LG}`]: 'rounded-lg',\n [`${TagRoundedSize.XL}`]: 'rounded-xl',\n [`${TagRoundedSize.XXL}`]: 'rounded-2xl',\n [`${TagRoundedSize.XXXL}`]: 'rounded-3xl',\n [`${TagRoundedSize.FULL}`]: 'rounded-full',\n },\n color: {\n [`${TagColor.PRIMARY}`]: 'border-primary bg-primary/10 text-primary',\n [`${TagColor.SUCCESS}`]: 'border-success bg-success/10 text-success',\n [`${TagColor.ERROR}`]: 'border-error bg-error/10 text-error',\n [`${TagColor.WARNING}`]: 'border-warning bg-warning/10 text-warning',\n [`${TagColor.NEUTRAL}`]: '/10 border-neutral bg-neutral/10 text-neutral',\n [`${TagColor.TEXT}`]: 'border-text bg-text/10 text-text',\n [`${TagColor.BLUE}`]:\n 'border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300',\n [`${TagColor.YELLOW}`]:\n 'border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300',\n [`${TagColor.GREEN}`]:\n 'border-green-500 bg-green-500/10 text-green-500 dark:text-green-300',\n [`${TagColor.RED}`]:\n 'border-error bg-error/10 text-error dark:text-red-300',\n [`${TagColor.ORANGE}`]:\n 'border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300',\n [`${TagColor.PURPLE}`]:\n 'border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300',\n [`${TagColor.PINK}`]:\n 'border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300',\n [`${TagColor.BROWN}`]:\n 'border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300',\n [`${TagColor.GRAY}`]:\n 'border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300',\n [`${TagColor.BLACK}`]: 'border-black bg-black/10 text-black',\n [`${TagColor.WHITE}`]: 'border-white bg-white/10 text-white',\n },\n size: {\n [`${TagSize.XS}`]: 'border-[1.2px] px-2 py-0.5 text-xs',\n [`${TagSize.SM}`]: 'border-[1.3px] px-2 py-0.5 text-sm',\n [`${TagSize.MD}`]: 'border-2 px-2 py-1 text-base',\n [`${TagSize.LG}`]: 'border-2 px-3 py-2 text-lg',\n [`${TagSize.XL}`]: 'border-2 px-3 py-2 text-xl',\n },\n border: {\n [`${TagBorder.NONE}`]: 'border-none',\n [`${TagBorder.WITH}`]: 'border-[1.3px] border-text',\n },\n background: {\n [`${TagBackground.NONE}`]: 'bg-none',\n [`${TagBackground.WITH}`]: '',\n },\n },\n\n defaultVariants: {\n roundedSize: TagRoundedSize.FULL,\n border: TagBorder.NONE,\n color: TagColor.TEXT,\n size: TagSize.MD,\n },\n});\n\n/\n Tag component for displaying labels, categories, status indicators, and badges\n \n The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n \n ## Features\n * - Semantic Colors: Success, error, warning, neutral, and text color themes\n * - Flexible Sizing: Five size variants from extra small to extra large\n * - Border Radius Options: Eight rounding options from none to fully rounded\n * - Border Control: Optional borders for enhanced visual separation\n * - Background Control: Configurable background styling\n * - Accessibility: Proper HTML semantics and keyboard navigation support\n \n ## Use Cases\n * - Status Indicators: Show completion, error, or pending states\n * - Category Labels: Organize and categorize content\n * - Badges: Display counts, notifications, or achievements\n * - Keywords: Tag content with relevant keywords or topics\n * - Metadata: Show additional information like dates, authors, or types\n \n ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n \n @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n \n @example\n * ```tsx\n * // Basic status tags\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>In Progress</Tag>\n \n // Category tags with borders\n * <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>\n * Technology\n * </Tag>\n * <Tag color={TagColor.TEXT} border={TagBorder.WITH}>\n * Design\n * </Tag>\n \n // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n * <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>\n * <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>\n * <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>\n * </div>\n \n // Rounded variations\n * <div className=\"flex gap-2\">\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>\n * </div>\n \n // Custom styled tag\n * <Tag\n * color={TagColor.WARNING}\n * size={TagSize.LG}\n * border={TagBorder.WITH}\n * roundedSize={TagRoundedSize.LG}\n * className=\"font-bold uppercase tracking-wide\"\n * >\n * Custom Style\n * </Tag>\n \n // Interactive tags with click handlers\n * <Tag\n * color={TagColor.SUCCESS}\n * onClick={() => console.log('Tag clicked')}\n * className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n * Clickable Tag\n * </Tag>\n * ```\n \n @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n}) => {\n return (\n <div\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,IAAY,iBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,IAAY,WAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAY,UAAL;CACL;CACA;CACA;CACA;CACA;;AACF;;;;;;;;;;;;;;;;AAiBA,IAAY,YAAL;CACL;CACA;;AACF;;;;;;;;;;;;;;;;AAiBA,IAAY,gBAAL;CACL;CACA;;AACF;AAEA,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;IACV,SAA2B;IAC3B,OAAyB;IACzB,OAAyB;IACzB,OAAyB;IACzB,OAAyB;IACzB,QAA0B;IAC1B,QAA2B;IAC3B,SAA2B;EAC9B;EACA,OAAO;IACJ,YAAwB;IACxB,YAAwB;IACxB,UAAsB;IACtB,YAAwB;IACxB,YAAwB;IACxB,SAAqB;IACrB,SACC;IACD,WACC;IACD,UACC;IACD,QACC;IACD,WACC;IACD,WACC;IACD,SACC;IACD,UACC;IACD,SACC;IACD,UAAsB;IACtB,UAAsB;EACzB;EACA,MAAM;IACH,OAAkB;IAClB,OAAkB;IAClB,OAAkB;IAClB,OAAkB;IAClB,OAAkB;EACrB;EACA,QAAQ;IACL,SAAsB;IACtB,SAAsB;EACzB;EACA,YAAY;IACT,SAA0B;IAC1B,SAA0B;EAC7B;CACF;CAEA,iBAAiB;EACf;EACA;EACA;EACA;CACF;AACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFD,MAAa,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EACD,GAAI;EAEH;CACE;AAET"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/*\n Properties for the Tag component extending HTML div attributes and variant options\n \n @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n \n @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property [className] - Additional CSS classes for custom styling\n \n @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n \n // Success tag with border\n * <Tag color=\"success\" border=\"with\">\n * Success Status\n * </Tag>\n \n // Large warning tag\n * <Tag color=\"warning\" size=\"lg\">\n * Important Warning\n * </Tag>\n * ```\n /\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n HTMLAttributes<HTMLDivElement>;\n\n/\n Enumeration for tag border radius sizes\n \n Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n \n @enum TagRoundedSize\n * @property NONE - 'none' - No border radius (sharp corners)\n * @property SM - 'sm' - Small border radius (2px)\n * @property MD - 'md' - Medium border radius (6px)\n * @property LG - 'lg' - Large border radius (8px)\n * @property XL - 'xl' - Extra large border radius (12px)\n * @property XXL - '2xl' - 2x large border radius (16px)\n * @property XXXL - '3xl' - 3x large border radius (24px)\n * @property FULL - 'full' - Fully rounded (50% border radius, pill shape)\n \n @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize=\"none\">Sharp Tag</Tag>\n \n // Pill-shaped tag\n * <Tag roundedSize=\"full\">Pill Tag</Tag>\n \n // Medium rounded corners\n * <Tag roundedSize=\"md\">Rounded Tag</Tag>\n * ```\n /\nexport type TagRoundedSize = \n \| 'none' \|\n 'sm' \|\n 'md' \|\n 'lg' \|\n 'xl' \|\n '2xl' \|\n '3xl' \|\n 'full';\n\n/\n Enumeration for tag color themes\n \n Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n \n @enum TagColor\n * @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property TEXT - 'text' - Default text color theme for general purpose tags\n \n @example\n * ```tsx\n * // Status indicators\n * <Tag color=\"success\">Completed</Tag>\n * <Tag color=\"error\">Failed</Tag>\n * <Tag color=\"warning\">Pending</Tag>\n \n // Category tags\n * <Tag color=\"neutral\">Category</Tag>\n * <Tag color=\"text\">General</Tag>\n * ```\n /\nexport type TagColor = \n \| 'primary' \|\n 'success' \|\n 'error' \|\n 'warning' \|\n 'neutral' \|\n 'text' \|\n 'blue' \|\n 'yellow' \|\n 'green' \|\n 'red' \|\n 'orange' \|\n 'purple' \|\n 'pink' \|\n 'brown' \|\n 'gray' \|\n 'black' \|\n 'white';\n\n/\n Enumeration for tag size variants\n \n Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n \n @enum TagSize\n * @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n \n @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size=\"xs\">Small detail</Tag>\n * <Tag size=\"sm\">Minor category</Tag>\n * <Tag size=\"md\">Standard tag</Tag>\n * <Tag size=\"lg\">Important label</Tag>\n * <Tag size=\"xl\">Hero tag</Tag>\n * ```\n /\nexport type TagSize = \n \| 'xs' \|\n 'sm' \|\n 'md' \|\n 'lg' \|\n 'xl';\n\n/\n Enumeration for tag border visibility\n \n Controls whether a border is displayed around the tag.\n \n @enum TagBorder\n * @property NONE - 'none' - No border (default)\n * @property WITH - 'with' - Show border with 1.5px thickness\n \n @example\n * ```tsx\n * <Tag border=\"none\">Borderless</Tag>\n * <Tag border=\"with\">With Border</Tag>\n * ```\n /\nexport type TagBorder = \n \| 'none' \|\n 'with';\n\n/\n Enumeration for tag background visibility\n \n Controls the background styling of the tag.\n \n @enum TagBackground\n * @property NONE - 'none' - No background styling\n * @property WITH - 'with' - Apply background styling\n \n @example\n * ```tsx\n * <Tag background=\"none\">No Background</Tag>\n * <Tag background=\"with\">With Background</Tag>\n * ```\n /\nexport type TagBackground = \n \| 'none' \|\n 'with';\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n variants: {\n roundedSize: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n [`${\"xxl\"}`]: 'rounded-2xl',\n [`${\"xxxl\"}`]: 'rounded-3xl',\n full: 'rounded-full',\n },\n color: {\n primary: 'border-primary bg-primary/10 text-primary',\n success: 'border-success bg-success/10 text-success',\n error: 'border-error bg-error/10 text-error',\n warning: 'border-warning bg-warning/10 text-warning',\n neutral: '/10 border-neutral bg-neutral/10 text-neutral',\n text: 'border-text bg-text/10 text-text',\n blue:\n 'border-blue-500 bg-blue-500/10 text-blue-500 dark:text-blue-300',\n yellow:\n 'border-yellow-500 bg-yellow-500/10 text-yellow-500 dark:text-yellow-300',\n green:\n 'border-green-500 bg-green-500/10 text-green-500 dark:text-green-300',\n red:\n 'border-error bg-error/10 text-error dark:text-red-300',\n orange:\n 'border-orange-500 bg-orange-500/10 text-orange-500 dark:text-orange-300',\n purple:\n 'border-purple-500 bg-purple-500/10 text-purple-500 dark:text-purple-300',\n pink:\n 'border-pink-500 bg-pink-500/10 text-pink-500 dark:text-pink-300',\n brown:\n 'border-brown-500 bg-brown-500/10 text-brown-500 dark:text-brown-300',\n gray:\n 'border-gray-500 bg-gray-500/10 text-gray-500 dark:text-gray-300',\n black: 'border-black bg-black/10 text-black',\n white: 'border-white bg-white/10 text-white',\n },\n size: {\n xs: 'border-[1.2px] px-2 py-0.5 text-xs',\n sm: 'border-[1.3px] px-2 py-0.5 text-sm',\n md: 'border-2 px-2 py-1 text-base',\n lg: 'border-2 px-3 py-2 text-lg',\n xl: 'border-2 px-3 py-2 text-xl',\n },\n border: {\n none: 'border-none',\n with: 'border-[1.3px] border-text',\n },\n background: {\n none: 'bg-none',\n with: '',\n },\n },\n\n defaultVariants: {\n roundedSize: 'full',\n border: 'none',\n color: 'text',\n size: 'md',\n },\n});\n\n/\n Tag component for displaying labels, categories, status indicators, and badges\n \n The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n \n ## Features\n * - Semantic Colors: Success, error, warning, neutral, and text color themes\n * - Flexible Sizing: Five size variants from extra small to extra large\n * - Border Radius Options: Eight rounding options from none to fully rounded\n * - Border Control: Optional borders for enhanced visual separation\n * - Background Control: Configurable background styling\n * - Accessibility: Proper HTML semantics and keyboard navigation support\n \n ## Use Cases\n * - Status Indicators: Show completion, error, or pending states\n * - Category Labels: Organize and categorize content\n * - Badges: Display counts, notifications, or achievements\n * - Keywords: Tag content with relevant keywords or topics\n * - Metadata: Show additional information like dates, authors, or types\n \n ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n \n @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n \n @example\n * ```tsx\n * // Basic status tags\n * <Tag color=\"success\">Completed</Tag>\n * <Tag color=\"error\">Failed</Tag>\n * <Tag color=\"warning\">In Progress</Tag>\n \n // Category tags with borders\n * <Tag color=\"neutral\" border=\"with\">\n * Technology\n * </Tag>\n * <Tag color=\"text\" border=\"with\">\n * Design\n * </Tag>\n \n // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n * <Tag size=\"xs\" color=\"neutral\">Minor</Tag>\n * <Tag size=\"sm\" color=\"text\">Standard</Tag>\n * <Tag size=\"lg\" color=\"success\">Important</Tag>\n * </div>\n \n // Rounded variations\n * <div className=\"flex gap-2\">\n * <Tag roundedSize=\"none\">Sharp</Tag>\n * <Tag roundedSize=\"md\">Rounded</Tag>\n * <Tag roundedSize=\"full\">Pill</Tag>\n * </div>\n \n // Custom styled tag\n * <Tag\n * color=\"warning\"\n * size=\"lg\"\n * border=\"with\"\n * roundedSize=\"lg\"\n * className=\"font-bold uppercase tracking-wide\"\n * >\n * Custom Style\n * </Tag>\n \n // Interactive tags with click handlers\n * <Tag\n * color=\"success\"\n * onClick={() => console.log('Tag clicked')}\n * className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n * Clickable Tag\n * </Tag>\n * ```\n \n @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n children,\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n ...props\n}) => {\n return (\n <div\n className={containerVariants({\n color,\n roundedSize,\n size,\n border,\n background,\n className,\n })}\n {...props}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;AA0LA,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;IACH,QAAa;IACb,SAAc;GACf,MAAM;EACR;EACA,OAAO;GACL,SAAS;GACT,SAAS;GACT,OAAO;GACP,SAAS;GACT,SAAS;GACT,MAAM;GACN,MACE;GACF,QACE;GACF,OACE;GACF,KACE;GACF,QACE;GACF,QACE;GACF,MACE;GACF,OACE;GACF,MACE;GACF,OAAO;GACP,OAAO;EACT;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,QAAQ;GACN,MAAM;GACN,MAAM;EACR;EACA,YAAY;GACV,MAAM;GACN,MAAM;EACR;CACF;CAEA,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,OAAO;EACP,MAAM;CACR;AACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFD,MAAa,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EACD,GAAI;EAEH;CACE;AAET"}

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

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