npm - @intlayer/design-system - Versions diffs - 9.4.0 → 9.4.2 - Mend

@intlayer/design-system 9.4.0 → 9.4.2

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 (185) 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 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, scheduleMeasurement } = useItemSelector(\n optionsRefs,\n { isHoverable: hoverable, orientation }\n );\n\n useEffect(() => {\n scheduleMeasurement();\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,wBAAwB,gBACvD,aACA;EAAE,aAAa;EAAW;CAAY,CACxC;CAEA,gBAAgB;EACd,oBAAoB;CAEtB,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-foreground',\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-foreground',\n secondary: 'bg-secondary/10 aria-selected:text-foreground',\n error: 'bg-error/10 aria-selected:text-foreground',\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-foreground-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, scheduleMeasurement } = useItemSelector(\n optionsRefs,\n { isHoverable: hoverable, orientation }\n );\n\n useEffect(() => {\n scheduleMeasurement();\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,wBAAwB,gBACvD,aACA;EAAE,aAAa;EAAW;CAAY,CACxC;CAEA,gBAAgB;EACd,oBAAoB;CAEtB,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/Table/SmartTable.mjs CHANGED Viewed

@@ -161,7 +161,7 @@ const SmartTable = ({ className, isRollable = false, displayModal, isInteractive
 					behavior: "smooth",
 					block: "center"
 				});
-				row.classList.add("bg-neutral/40", "dark:bg-neutral-dark/40");
+				row.classList.add("bg-card");
 				row.style.transition = "background-color 0.3s ease-in-out";
 			}
 		}
@@ -185,7 +185,7 @@ const SmartTable = ({ className, isRollable = false, displayModal, isInteractive
 			displayModal && /* @__PURE__ */ jsx(ExpandButton, { setIsModalOpen }),
 			/* @__PURE__ */ jsx(ExpandCollapse, {
 				isRollable,
-				className: "max-w-full overflow-x-auto rounded-2xl bg-background text-left [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
+				className: "max-w-full overflow-x-auto bg-background text-left",
 				children: /* @__PURE__ */ jsx(Table, {
 					ref: tableRef,
 					className,

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 } 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"}
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-card');\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 bg-background text-left\"\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,SAAS;IAC3B,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/Table/Table.mjs CHANGED Viewed

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/Table/Table.tsx
 const Table = forwardRef(({ className, isInteractive, ...props }, ref) => /* @__PURE__ */ jsx("table", {
 	ref,
-	className: cn("w-full table-auto overflow-hidden text-left text-sm", isInteractive && "[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors", className),
+	className: cn("w-full table-auto border-separate border-spacing-0 overflow-hidden rounded-2xl text-left text-sm", "[&_thead_tr:first-child_th:first-child]:rounded-tl-2xl", "[&_thead_tr:first-child_th:last-child]:rounded-tr-2xl", "[&_tbody_tr:last-child_td:first-child]:rounded-bl-2xl", "[&_tbody_tr:last-child_td:last-child]:rounded-br-2xl", "supports-[corner-shape:squircle]:rounded-3xl", "supports-[corner-shape:squircle]:[&_thead_tr:first-child_th:first-child]:rounded-tl-3xl", "supports-[corner-shape:squircle]:[&_thead_tr:first-child_th:last-child]:rounded-tr-3xl", "supports-[corner-shape:squircle]:[&_tbody_tr:last-child_td:first-child]:rounded-bl-3xl", "supports-[corner-shape:squircle]:[&_tbody_tr:last-child_td:last-child]:rounded-br-3xl", isInteractive && "[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors", className),
 	...props
 }));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { forwardRef, type HTMLAttributes } from 'react';\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n /** Enables hover states and cursor changes for interactive rows */\n isInteractive?: boolean;\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n ({ className, isInteractive, ...props }, ref) => (\n <table\n ref={ref}\n className={cn(\n 'w-full table-auto overflow-hidden text-left text-sm',\n isInteractive &&\n '[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors',\n className\n )}\n {...props}\n />\n )\n);\n"],"mappings":";;;;;AAQA,MAAa,QAAQ,YAClB,EAAE,WAAW,eAAe,GAAG,SAAS,QACvC,oBAAC,SAAD;CACO;CACL,WAAW,GACT,~~uDACA~~,iBACE,0IACF,SACF;CACA,GAAI;AACL,EAEL"}
1	+ {"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { forwardRef, type HTMLAttributes } from 'react';\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n /** Enables hover states and cursor changes for interactive rows */\n isInteractive?: boolean;\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n ({ className, isInteractive, ...props }, ref) => (\n <table\n ref={ref}\n className={cn(\n 'w-full table-auto border-separate border-spacing-0 overflow-hidden rounded-2xl text-left text-sm',\n '[&_thead_tr:first-child_th:first-child]:rounded-tl-2xl',\n '[&_thead_tr:first-child_th:last-child]:rounded-tr-2xl',\n '[&_tbody_tr:last-child_td:first-child]:rounded-bl-2xl',\n '[&_tbody_tr:last-child_td:last-child]:rounded-br-2xl',\n 'supports-[corner-shape:squircle]:rounded-3xl',\n 'supports-[corner-shape:squircle]:[&_thead_tr:first-child_th:first-child]:rounded-tl-3xl',\n 'supports-[corner-shape:squircle]:[&_thead_tr:first-child_th:last-child]:rounded-tr-3xl',\n 'supports-[corner-shape:squircle]:[&_tbody_tr:last-child_td:first-child]:rounded-bl-3xl',\n 'supports-[corner-shape:squircle]:[&_tbody_tr:last-child_td:last-child]:rounded-br-3xl',\n isInteractive &&\n '[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors',\n className\n )}\n {...props}\n />\n )\n);\n"],"mappings":";;;;;AAQA,MAAa,QAAQ,YAClB,EAAE,WAAW,eAAe,GAAG,SAAS,QACvC,oBAAC,SAAD;CACO;CACL,WAAW,GACT,oGACA,0DACA,yDACA,yDACA,wDACA,gDACA,2FACA,0FACA,0FACA,yFACA,iBACE,0IACF,SACF;CACA,GAAI;AACL,EAEL"}

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

@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/Table/TableElements.tsx
 const Th = ({ className, ...props }) => /* @__PURE__ */ jsx("th", {
-	className: cn("border border-neutral/20 border-b border-solid bg-neutral/10 p-4", className),
+	className: cn("border border-b border-solid bg-neutral/10 p-4", className),
 	...props
 });
 const Tr = ({ className, ...props }) => /* @__PURE__ */ jsx("tr", {
@@ -11,7 +11,7 @@ const Tr = ({ className, ...props }) => /* @__PURE__ */ jsx("tr", {
 	...props
 });
 const Td = ({ className, ...props }) => /* @__PURE__ */ jsx("td", {
-	className: cn("border border-neutral/20 border-b border-solid p-4", className),
+	className: cn("border border-b border-solid p-4", className),
 	...props
 });
 const Hr = ({ className, ...props }) => /* @__PURE__ */ jsx("hr", {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TableElements.mjs","names":[],"sources":["../../../../src/components/Table/TableElements.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { ComponentProps } from 'react';\n\nexport const Th = ({ className, ...props }: ComponentProps<'th'>) => (\n <th\n className={cn(\n 'border border-~~neutral/20 border-~~b border-solid bg-neutral/10 p-4'~~,\n~~ className\n )}\n {...props}\n />\n);\n\nexport const Tr = ({ className, ...props }: ComponentProps<'tr'>) => (\n <tr className={cn('hover:bg-neutral/10', className)} {...props} />\n);\n\nexport const Td = ({ className, ...props }: ComponentProps<'td'>) => (\n <td\n className={cn(\n 'border border-~~neutral/20 border-~~b border-solid p-4'~~,\n~~ className\n )}\n {...props}\n />\n);\n\nexport const Hr = ({ className, ...props }: ComponentProps<'hr'>) => (\n <hr\n className={cn('mx-6 mt-16 border-dashed text-neutral', className)}\n {...props}\n />\n);\n"],"mappings":";;;;AAGA,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,~~GACT~~,~~oEACA~~,~~SACF~~;~~CACA~~,GAAI;AACL;AAGH,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CAAI,WAAW,GAAG,uBAAuB,SAAS;CAAG,GAAI;AAAQ;AAGnE,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,~~GACT~~,~~sDACA~~,~~SACF~~;~~CACA~~,GAAI;AACL;AAGH,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GAAG,yCAAyC,SAAS;CAChE,GAAI;AACL"}
1	+ {"version":3,"file":"TableElements.mjs","names":[],"sources":["../../../../src/components/Table/TableElements.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { ComponentProps } from 'react';\n\nexport const Th = ({ className, ...props }: ComponentProps<'th'>) => (\n <th\n className={cn('border border-b border-solid bg-neutral/10 p-4', className)}\n {...props}\n />\n);\n\nexport const Tr = ({ className, ...props }: ComponentProps<'tr'>) => (\n <tr className={cn('hover:bg-neutral/10', className)} {...props} />\n);\n\nexport const Td = ({ className, ...props }: ComponentProps<'td'>) => (\n <td\n className={cn('border border-b border-solid p-4', className)}\n {...props}\n />\n);\n\nexport const Hr = ({ className, ...props }: ComponentProps<'hr'>) => (\n <hr\n className={cn('mx-6 mt-16 border-dashed text-neutral', className)}\n {...props}\n />\n);\n"],"mappings":";;;;AAGA,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GAAG,kDAAkD,SAAS;CACzE,GAAI;AACL;AAGH,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CAAI,WAAW,GAAG,uBAAuB,SAAS;CAAG,GAAI;AAAQ;AAGnE,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GAAG,oCAAoC,SAAS;CAC3D,GAAI;AACL;AAGH,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GAAG,yCAAyC,SAAS;CAChE,GAAI;AACL"}

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

@@ -20,7 +20,7 @@ const containerVariants = cva("w-fit backdrop-blur", {
 			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",
+			text: "border-text bg-text/10 text-foreground",
 			black: "border-black bg-black/10 text-black",
 			white: "border-white bg-white/10 text-white"
 		},

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=\"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 = 'xs' \| 'sm' \| 'md' \| 'lg' \| '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 = 'none' \| '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 = 'none' \| '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 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":";;;;AAiLA,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,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"}
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 = 'xs' \| 'sm' \| 'md' \| 'lg' \| '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 = 'none' \| '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 = 'none' \| '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-foreground',\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":";;;;AAiLA,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,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

@@ -24,6 +24,7 @@ const logoRecord = {
 	nuxt: dynamicLogo(() => import("./logos/Nuxt.mjs"), "NuxtLogo"),
 	preact: dynamicLogo(() => import("./logos/Preact.mjs"), "PreactLogo"),
 	react: dynamicLogo(() => import("./logos/Reactjs.mjs"), "ReactLogo"),
+	remix: dynamicLogo(() => import("./logos/Remix.mjs"), "RemixLogo"),
 	solid: dynamicLogo(() => import("./logos/Solid.mjs"), "SolidLogo"),
 	svelte: dynamicLogo(() => import("./logos/Svelte.mjs"), "SvelteLogo"),
 	tanstack: dynamicLogo(() => import("./logos/Tanstack.mjs"), "TanstackLogo"),
@@ -31,6 +32,7 @@ const logoRecord = {
 	vue: dynamicLogo(() => import("./logos/Vuejs.mjs"), "VuejsLogo"),
 	lit: dynamicLogo(() => import("./logos/Lit.mjs"), "LitLogo"),
 	vanilla: dynamicLogo(() => import("./logos/Vanilla.mjs"), "JavaScriptLogo"),
+	htmx: dynamicLogo(() => import("./logos/HTMX.mjs"), "HTMXLogo"),
 	anthropic: dynamicLogo(() => import("./logos/Anthropic.mjs"), "AnthropicLogo"),
 	claude: dynamicLogo(() => import("./logos/Claude.mjs"), "ClaudeLogo"),
 	chatgpt: dynamicLogo(() => import("./logos/ChatGPT.mjs"), "ChatGPTLogo"),

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

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

package/dist/esm/components/TechLogo/logos/HTMX.mjs ADDED Viewed

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TechLogo/logos/HTMX.tsx
+const HTMXLogo = (props) => /* @__PURE__ */ jsx("svg", {
+	width: "256px",
+	height: "168px",
+	viewBox: "0 0 256 168",
+	version: "1.1",
+	xmlns: "http://www.w3.org/2000/svg",
+	"aria-label": "HTMX logo",
+	preserveAspectRatio: "xMidYMid",
+	...props,
+	children: /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("polygon", {
+			fill: "#111111",
+			points: "181.394935 42.749283 256 74.2039835 256 96.0617321 181.394935 127.078518 175.477838 105.581524 230.646979 84.8771384 175.477838 64.0931689"
+		}),
+		/* @__PURE__ */ jsx("polygon", {
+			fill: "#111111",
+			points: "74.6050654 42.7484751 6.6060424e-14 74.2039835 1.83634114e-13 96.0617321 74.6050654 127.078518 80.5221623 105.581524 25.3530206 84.8771384 80.5221623 64.0931689"
+		}),
+		/* @__PURE__ */ jsx("polygon", {
+			fill: "#4065C5",
+			points: "144.339858 -1.59458264e-15 170.003907 -1.59458264e-15 112.990192 167.110525 85.996093 167.110525"
+		})
+	] })
+});
+//#endregion
+export { HTMXLogo };
+//# sourceMappingURL=HTMX.mjs.map

package/dist/esm/components/TechLogo/logos/HTMX.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"HTMX.mjs","names":[],"sources":["../../../../../src/components/TechLogo/logos/HTMX.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const HTMXLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n width=\"256px\"\n height=\"168px\"\n viewBox=\"0 0 256 168\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-label=\"HTMX logo\"\n preserveAspectRatio=\"xMidYMid\"\n {...props}\n >\n <g>\n <polygon\n fill=\"#111111\"\n points=\"181.394935 42.749283 256 74.2039835 256 96.0617321 181.394935 127.078518 175.477838 105.581524 230.646979 84.8771384 175.477838 64.0931689\"\n ></polygon>\n <polygon\n fill=\"#111111\"\n points=\"74.6050654 42.7484751 6.6060424e-14 74.2039835 1.83634114e-13 96.0617321 74.6050654 127.078518 80.5221623 105.581524 25.3530206 84.8771384 80.5221623 64.0931689\"\n ></polygon>\n <polygon\n fill=\"#4065C5\"\n points=\"144.339858 -1.59458264e-15 170.003907 -1.59458264e-15 112.990192 167.110525 85.996093 167.110525\"\n ></polygon>\n </g>\n </svg>\n);\n"],"mappings":";;;AAEA,MAAa,YAAyC,UACpD,oBAAC,OAAD;CACE,OAAM;CACN,QAAO;CACP,SAAQ;CACR,SAAQ;CACR,OAAM;CACN,cAAW;CACX,qBAAoB;CACpB,GAAI;WAEJ,qBAAC,KAAD;EACE,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;EACV,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;EACV,oBAAC,WAAD;GACE,MAAK;GACL,QAAO;EACC;CACT;AACA"}

package/dist/esm/components/TechLogo/logos/Remix.mjs ADDED Viewed

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/TechLogo/logos/Remix.tsx
+const RemixLogo = (props) => /* @__PURE__ */ jsx("svg", {
+	width: "464",
+	height: "201",
+	viewBox: "0 0 464 201",
+	fill: "currentColor",
+	xmlns: "http://www.w3.org/2000/svg",
+	preserveAspectRatio: "xMidYMid",
+	role: "img",
+	"aria-label": "Remix logo",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		d: "M380.685 0.149414L380.68 0.154297V0.15918C433.871 0.15918 470.618 24.03 462.763 53.4785L457.439 73.4189C449.582 102.868 400.099 126.739 346.907 126.739H341.464L453.195 200.005H273.808L183.487 130.286C179.872 127.968 175.675 126.737 171.386 126.737H20.3965L34.624 73.4121H299.088C309.03 73.4121 318.287 68.9481 319.757 63.4414H319.762C321.231 57.9345 314.357 53.4697 304.41 53.4697H39.9443L54.1689 0.149414H380.685ZM145.9 145.143C150.911 145.143 154.561 149.916 153.263 154.778L141.199 199.998H0.853516L15.4873 145.143H145.9Z",
+		fill: "currentColor"
+	})
+});
+//#endregion
+export { RemixLogo };
+//# sourceMappingURL=Remix.mjs.map

package/dist/esm/components/TechLogo/logos/Remix.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Remix.mjs","names":[],"sources":["../../../../../src/components/TechLogo/logos/Remix.tsx"],"sourcesContent":["import type { FC, SVGProps } from 'react';\n\nexport const RemixLogo: FC<SVGProps<SVGSVGElement>> = (props) => (\n <svg\n width=\"464\"\n height=\"201\"\n viewBox=\"0 0 464 201\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n preserveAspectRatio=\"xMidYMid\"\n role=\"img\"\n aria-label=\"Remix logo\"\n {...props}\n >\n <path\n d=\"M380.685 0.149414L380.68 0.154297V0.15918C433.871 0.15918 470.618 24.03 462.763 53.4785L457.439 73.4189C449.582 102.868 400.099 126.739 346.907 126.739H341.464L453.195 200.005H273.808L183.487 130.286C179.872 127.968 175.675 126.737 171.386 126.737H20.3965L34.624 73.4121H299.088C309.03 73.4121 318.287 68.9481 319.757 63.4414H319.762C321.231 57.9345 314.357 53.4697 304.41 53.4697H39.9443L54.1689 0.149414H380.685ZM145.9 145.143C150.911 145.143 154.561 149.916 153.263 154.778L141.199 199.998H0.853516L15.4873 145.143H145.9Z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n"],"mappings":";;;AAEA,MAAa,aAA0C,UACrD,oBAAC,OAAD;CACE,OAAM;CACN,QAAO;CACP,SAAQ;CACR,MAAK;CACL,OAAM;CACN,qBAAoB;CACpB,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC,QAAD;EACE,GAAE;EACF,MAAK;CACN;AACE"}

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

@@ -19,6 +19,7 @@ import { GeminiLogo } from "./logos/Gemini.mjs";
 import { GoogleAILogo } from "./logos/GoogleAI.mjs";
 import { GrokLogo } from "./logos/Grok.mjs";
 import { HonoLogo } from "./logos/Hono.mjs";
+import { HTMXLogo } from "./logos/HTMX.mjs";
 import { LitLogo } from "./logos/Lit.mjs";
 import { LynxLogo } from "./logos/Lynx.mjs";
 import { MicrosoftLogo } from "./logos/Microsoft.mjs";
@@ -32,6 +33,7 @@ import { OpenAILogo } from "./logos/OpenAI.mjs";
 import { PerplexityLogo } from "./logos/Perplexity.mjs";
 import { PreactLogo } from "./logos/Preact.mjs";
 import { ReactLogo } from "./logos/Reactjs.mjs";
+import { RemixLogo } from "./logos/Remix.mjs";
 import { SolidLogo } from "./logos/Solid.mjs";
 import { SvelteLogo } from "./logos/Svelte.mjs";
 import { TanstackLogo } from "./logos/Tanstack.mjs";
@@ -60,6 +62,7 @@ var techLogos_exports = /* @__PURE__ */ __exportAll({
 	GOOGLE_AI: () => GoogleAILogo,
 	GROK: () => GrokLogo,
 	HONO: () => HonoLogo,
+	HTMX: () => HTMXLogo,
 	LINKEDIN: () => LinkedInLogo,
 	LIT: () => LitLogo,
 	LYNX: () => LynxLogo,
@@ -74,6 +77,7 @@ var techLogos_exports = /* @__PURE__ */ __exportAll({
 	PERPLEXITY: () => PerplexityLogo,
 	PREACT: () => PreactLogo,
 	REACT: () => ReactLogo,
+	REMIX: () => RemixLogo,
 	SOLID: () => SolidLogo,
 	SVELTE: () => SvelteLogo,
 	TANSTACK: () => TanstackLogo,
@@ -83,5 +87,5 @@ var techLogos_exports = /* @__PURE__ */ __exportAll({
 });
 //#endregion
-export { AdonisLogo as ADONIS, AngularLogo as ANGULAR, AnthropicLogo as ANTHROPIC, AstroLogo as ASTRO, AtlassianLogo as ATLASSIAN, BitbucketLogo as BITBUCKET, ChatGPTLogo as CHATGPT, ClaudeLogo as CLAUDE, DeepSeekLogo as DEEPSEEK, ElysiaLogo as ELYSIA, ExpressLogo as EXPRESS, FastifyLogo as FASTIFY, GeminiLogo as GEMINI, GitHubLogo as GITHUB, GitLabLogo as GITLAB, GoogleLogo as GOOGLE, GoogleAILogo as GOOGLE_AI, GrokLogo as GROK, HonoLogo as HONO, LinkedInLogo as LINKEDIN, LitLogo as LIT, LynxLogo as LYNX, MicrosoftLogo as MICROSOFT, MistralLogo as MISTRAL, NestJSLogo as NESTJS, NextJSLogo as NEXTJS, NodejsLogo as NODE, NuxtLogo as NUXT, OllamaLogo as OLLAMA, OpenAILogo as OPENAI, PerplexityLogo as PERPLEXITY, PreactLogo as PREACT, ReactLogo as REACT, SolidLogo as SOLID, SvelteLogo as SVELTE, TanstackLogo as TANSTACK, JavaScriptLogo as VANILLA, ViteLogo as VITE, VuejsLogo as VUE, techLogos_exports };
+export { AdonisLogo as ADONIS, AngularLogo as ANGULAR, AnthropicLogo as ANTHROPIC, AstroLogo as ASTRO, AtlassianLogo as ATLASSIAN, BitbucketLogo as BITBUCKET, ChatGPTLogo as CHATGPT, ClaudeLogo as CLAUDE, DeepSeekLogo as DEEPSEEK, ElysiaLogo as ELYSIA, ExpressLogo as EXPRESS, FastifyLogo as FASTIFY, GeminiLogo as GEMINI, GitHubLogo as GITHUB, GitLabLogo as GITLAB, GoogleLogo as GOOGLE, GoogleAILogo as GOOGLE_AI, GrokLogo as GROK, HonoLogo as HONO, HTMXLogo as HTMX, LinkedInLogo as LINKEDIN, LitLogo as LIT, LynxLogo as LYNX, MicrosoftLogo as MICROSOFT, MistralLogo as MISTRAL, NestJSLogo as NESTJS, NextJSLogo as NEXTJS, NodejsLogo as NODE, NuxtLogo as NUXT, OllamaLogo as OLLAMA, OpenAILogo as OPENAI, PerplexityLogo as PERPLEXITY, PreactLogo as PREACT, ReactLogo as REACT, RemixLogo as REMIX, SolidLogo as SOLID, SvelteLogo as SVELTE, TanstackLogo as TANSTACK, JavaScriptLogo as VANILLA, ViteLogo as VITE, VuejsLogo as VUE, techLogos_exports };
 //# sourceMappingURL=techLogos.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"techLogos.mjs","names":[],"sources":["../../../../src/components/TechLogo/techLogos.ts"],"sourcesContent":["export { AdonisLogo as ADONIS } from './logos/Adonis';\nexport { AngularLogo as ANGULAR } from './logos/Angular';\nexport { AnthropicLogo as ANTHROPIC } from './logos/Anthropic';\nexport { AstroLogo as ASTRO } from './logos/Astro';\nexport { AtlassianLogo as ATLASSIAN } from './logos/Atlassian';\nexport { BitbucketLogo as BITBUCKET } from './logos/Bitbucket';\nexport { ChatGPTLogo as CHATGPT } from './logos/ChatGPT';\nexport { ClaudeLogo as CLAUDE } from './logos/Claude';\nexport { DeepSeekLogo as DEEPSEEK } from './logos/DeepSeek';\nexport { ElysiaLogo as ELYSIA } from './logos/Elysia';\nexport { ExpressLogo as EXPRESS } from './logos/Express';\nexport { FastifyLogo as FASTIFY } from './logos/Fastify';\nexport { GeminiLogo as GEMINI } from './logos/Gemini';\nexport { GitHubLogo as GITHUB } from './logos/GitHub';\nexport { GitLabLogo as GITLAB } from './logos/GitLab';\nexport { GoogleLogo as GOOGLE } from './logos/Google';\nexport { GoogleAILogo as GOOGLE_AI } from './logos/GoogleAI';\nexport { GrokLogo as GROK } from './logos/Grok';\nexport { HonoLogo as HONO } from './logos/Hono';\nexport { LinkedInLogo as LINKEDIN } from './logos/LinkedIn';\nexport { LitLogo as LIT } from './logos/Lit';\nexport { LynxLogo as LYNX } from './logos/Lynx';\nexport { MicrosoftLogo as MICROSOFT } from './logos/Microsoft';\nexport { MistralLogo as MISTRAL } from './logos/Mistral';\nexport { NestJSLogo as NESTJS } from './logos/NestJS';\nexport { NextJSLogo as NEXTJS } from './logos/Nextjs';\nexport { NodejsLogo as NODE } from './logos/Node';\nexport { NuxtLogo as NUXT } from './logos/Nuxt';\nexport { OllamaLogo as OLLAMA } from './logos/Ollama';\nexport { OpenAILogo as OPENAI } from './logos/OpenAI';\nexport { PerplexityLogo as PERPLEXITY } from './logos/Perplexity';\nexport { PreactLogo as PREACT } from './logos/Preact';\nexport { ReactLogo as REACT } from './logos/Reactjs';\nexport { SolidLogo as SOLID } from './logos/Solid';\nexport { SvelteLogo as SVELTE } from './logos/Svelte';\nexport { TanstackLogo as TANSTACK } from './logos/Tanstack';\nexport { JavaScriptLogo as VANILLA } from './logos/Vanilla';\nexport { ViteLogo as VITE } from './logos/Vitejs';\nexport { VuejsLogo as VUE } from './logos/Vuejs';\n"],"mappings":""}
1	+ {"version":3,"file":"techLogos.mjs","names":[],"sources":["../../../../src/components/TechLogo/techLogos.ts"],"sourcesContent":["export { AdonisLogo as ADONIS } from './logos/Adonis';\nexport { AngularLogo as ANGULAR } from './logos/Angular';\nexport { AnthropicLogo as ANTHROPIC } from './logos/Anthropic';\nexport { AstroLogo as ASTRO } from './logos/Astro';\nexport { AtlassianLogo as ATLASSIAN } from './logos/Atlassian';\nexport { BitbucketLogo as BITBUCKET } from './logos/Bitbucket';\nexport { ChatGPTLogo as CHATGPT } from './logos/ChatGPT';\nexport { ClaudeLogo as CLAUDE } from './logos/Claude';\nexport { DeepSeekLogo as DEEPSEEK } from './logos/DeepSeek';\nexport { ElysiaLogo as ELYSIA } from './logos/Elysia';\nexport { ExpressLogo as EXPRESS } from './logos/Express';\nexport { FastifyLogo as FASTIFY } from './logos/Fastify';\nexport { GeminiLogo as GEMINI } from './logos/Gemini';\nexport { GitHubLogo as GITHUB } from './logos/GitHub';\nexport { GitLabLogo as GITLAB } from './logos/GitLab';\nexport { GoogleLogo as GOOGLE } from './logos/Google';\nexport { GoogleAILogo as GOOGLE_AI } from './logos/GoogleAI';\nexport { GrokLogo as GROK } from './logos/Grok';\nexport { HonoLogo as HONO } from './logos/Hono';\nexport { HTMXLogo as HTMX } from './logos/HTMX';\nexport { LinkedInLogo as LINKEDIN } from './logos/LinkedIn';\nexport { LitLogo as LIT } from './logos/Lit';\nexport { LynxLogo as LYNX } from './logos/Lynx';\nexport { MicrosoftLogo as MICROSOFT } from './logos/Microsoft';\nexport { MistralLogo as MISTRAL } from './logos/Mistral';\nexport { NestJSLogo as NESTJS } from './logos/NestJS';\nexport { NextJSLogo as NEXTJS } from './logos/Nextjs';\nexport { NodejsLogo as NODE } from './logos/Node';\nexport { NuxtLogo as NUXT } from './logos/Nuxt';\nexport { OllamaLogo as OLLAMA } from './logos/Ollama';\nexport { OpenAILogo as OPENAI } from './logos/OpenAI';\nexport { PerplexityLogo as PERPLEXITY } from './logos/Perplexity';\nexport { PreactLogo as PREACT } from './logos/Preact';\nexport { ReactLogo as REACT } from './logos/Reactjs';\nexport { RemixLogo as REMIX } from './logos/Remix';\nexport { SolidLogo as SOLID } from './logos/Solid';\nexport { SvelteLogo as SVELTE } from './logos/Svelte';\nexport { TanstackLogo as TANSTACK } from './logos/Tanstack';\nexport { JavaScriptLogo as VANILLA } from './logos/Vanilla';\nexport { ViteLogo as VITE } from './logos/Vitejs';\nexport { VuejsLogo as VUE } from './logos/Vuejs';\n"],"mappings":""}

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

@@ -100,12 +100,12 @@ const Terminal = ({ className, children, isDarkMode = false, title = "bash", onC
 	};
 	const containerProps = props;
 	return /* @__PURE__ */ jsxs(Container, {
-		roundedSize: "2xl",
-		className: cn("flex min-w-0 max-w-full flex-col overflow-hidden font-mono", className),
+		roundedSize: "lg",
+		className: cn("flex min-w-0 max-w-full flex-col overflow-hidden border font-mono", className),
 		...containerProps,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950",
+				className: "flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-muted-foreground text-xs dark:bg-neutral-950",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: "mx-2 flex items-center justify-start gap-2 p-1",
 					children: [
@@ -120,7 +120,7 @@ const Terminal = ({ className, children, isDarkMode = false, title = "bash", onC
 						children: [/* @__PURE__ */ jsx("span", { children: title }), onClose && /* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: onClose,
-							className: "text-neutral transition-colors hover:text-text",
+							className: "text-neutral transition-colors hover:text-foreground",
 							"aria-label": content.closeTab.value,
 							children: "×"
 						})]

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Terminal.mjs","names":[],"sources":["../../../../src/components/Terminal/Terminal.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { Input } from '@components/Input';\nimport { cn } from '@utils/cn';\nimport {\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ANSI color code mappings to CSS colors\nconst ANSI_COLORS: Record<string, { light: string; dark: string }> = {\n '\\x1b[0m': { light: '', dark: '' }, // RESET\n '\\x1b[90m': { light: 'text-gray-500', dark: 'text-gray-400' }, // GREY\n '\\x1b[38;5;239m': { light: 'text-gray-600', dark: 'text-gray-500' }, // GREY_DARK\n '\\x1b[38;5;252m': { light: 'text-gray-300', dark: 'text-gray-300' }, // GREY_LIGHT\n '\\x1b[34m': { light: 'text-blue-600', dark: 'text-blue-400' }, // BLUE\n '\\x1b[31m': { light: 'text-red-600', dark: 'text-red-400' }, // RED\n '\\x1b[32m': { light: 'text-green-600', dark: 'text-green-400' }, // GREEN\n '\\x1b[38;5;226m': { light: 'text-yellow-500', dark: 'text-yellow-300' }, // YELLOW\n '\\x1b[35m': { light: 'text-purple-600', dark: 'text-purple-400' }, // MAGENTA\n '\\x1b[38;5;3m': { light: 'text-amber-600', dark: 'text-amber-300' }, // BEIGE\n '\\x1b[38;5;208m': { light: 'text-orange-600', dark: 'text-orange-400' }, // ORANGE\n '\\x1b[36m': { light: 'text-cyan-600', dark: 'text-cyan-400' }, // CYAN\n '\\x1b[37m': { light: 'text-gray-800', dark: 'text-gray-200' }, // WHITE\n '\\x1b[1m': { light: 'font-bold', dark: 'font-bold' }, // BOLD\n};\n\ninterface AnsiSegment {\n text: string;\n color?: string;\n isBold?: boolean;\n}\n\nconst parseAnsiCodes = (text: string, isDarkMode: boolean): AnsiSegment[] => {\n const segments: AnsiSegment[] = [];\n // biome-ignore lint/suspicious/noControlCharactersInRegex: we need to parse ANSI codes\n const ansiRegex = /(\\x1b\\[[0-9;]m)/g;\n const parts = text.split(ansiRegex);\n\n let currentColor: string \| undefined;\n let isBold = false;\n\n for (const part of parts) {\n if (ansiRegex.test(part)) {\n // This is an ANSI code\n const colorMapping = ANSI_COLORS[part];\n if (colorMapping) {\n if (part === '\\x1b[0m') {\n // RESET\n currentColor = undefined;\n isBold = false;\n } else if (part === '\\x1b[1m') {\n // BOLD\n isBold = true;\n } else {\n currentColor = isDarkMode ? colorMapping.dark : colorMapping.light;\n }\n }\n } else if (part) {\n // This is actual text\n segments.push({\n text: part,\n color: currentColor,\n isBold,\n });\n }\n }\n\n return segments;\n};\n\nexport type TerminalProps = {\n children: string;\n isDarkMode?: boolean;\n title?: string;\n onClose?: () => void;\n onSubmit?: (value: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children' \| 'onSubmit'>;\n\nexport const Terminal: FC<TerminalProps> = ({\n className,\n children,\n isDarkMode = false,\n title = 'bash',\n onClose,\n onSubmit,\n ...props\n}) => {\n const content = useIntlayer('terminal');\n const lines = typeof children === 'string' ? children.split('\\n') : [];\n const [inputValue, setInputValue] = useState('');\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && inputValue.trim()) {\n onSubmit?.(inputValue);\n setInputValue('');\n }\n };\n\n // Explicitly type the container props to avoid type conflicts\n const containerProps = props as Omit<\n HTMLAttributes<HTMLDivElement>,\n 'children' \| 'onSubmit'\n >;\n\n return (\n <Container\n roundedSize=\"~~2xl~~\"\n className={cn(\n 'flex min-w-0 max-w-full flex-col overflow-hidden font-mono',\n className\n )}\n {...containerProps}\n >\n {/ Tab bar /}\n <div className=\"flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-~~neutral~~ text-xs dark:bg-neutral-950\">\n <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n <div className=\"size-3 rounded-full bg-error\" />\n <div className=\"size-3 rounded-full bg-yellow-500\" />\n <div className=\"size-3 rounded-full bg-green-500\" />\n </div>\n <div className=\"flex size-full overflow-y-auto\">\n <div className=\"flex h-8 min-w-20 items-center justify-between gap-2 bg-card px-3 py-1\">\n <span>{title}</span>\n {onClose && (\n <button\n type=\"button\"\n onClick={onClose}\n className=\"text-neutral transition-colors hover:text-~~text~~\"\n aria-label={content.closeTab.value}\n >\n ×\n </button>\n )}\n </div>\n </div>\n </div>\n\n {/ Terminal content - hide scrollbar /}\n <pre className=\"min-w-0 max-w-full overflow-x-auto overflow-y-auto border-neutral/30 border-b p-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n <code>\n {lines.map((line, lineIndex) => {\n const segments = parseAnsiCodes(line, isDarkMode);\n\n return (\n <span className=\"line block w-full\" key={`line-${lineIndex}`}>\n {segments.length === 0\n ? '\\n'\n : segments.map((segment, segIndex) => (\n <span\n key={`seg-${lineIndex}-${segIndex}`}\n className={cn(segment.color, {\n 'font-bold': segment.isBold,\n })}\n >\n {segment.text}\n </span>\n ))}\n </span>\n );\n })}\n </code>\n </pre>\n\n {/ Input area */}\n <Container className=\"p-2\">\n <span className=\"text-neutral\">~/Desktop/MyApp</span>\n <Input\n className=\"m-0.5 w-full\"\n variant=\"invisible\"\n value={inputValue}\n aria-label={content.terminalInput.value}\n onChange={(e) => setInputValue(e.target.value)}\n onKeyDown={handleKeyDown}\n />\n </Container>\n </Container>\n );\n};\n"],"mappings":";;;;;;;;;;AAcA,MAAM,cAA+D;CACnE,WAAW;EAAE,OAAO;EAAI,MAAM;CAAG;CACjC,YAAY;EAAE,OAAO;EAAiB,MAAM;CAAgB;CAC5D,kBAAkB;EAAE,OAAO;EAAiB,MAAM;CAAgB;CAClE,kBAAkB;EAAE,OAAO;EAAiB,MAAM;CAAgB;CAClE,YAAY;EAAE,OAAO;EAAiB,MAAM;CAAgB;CAC5D,YAAY;EAAE,OAAO;EAAgB,MAAM;CAAe;CAC1D,YAAY;EAAE,OAAO;EAAkB,MAAM;CAAiB;CAC9D,kBAAkB;EAAE,OAAO;EAAmB,MAAM;CAAkB;CACtE,YAAY;EAAE,OAAO;EAAmB,MAAM;CAAkB;CAChE,gBAAgB;EAAE,OAAO;EAAkB,MAAM;CAAiB;CAClE,kBAAkB;EAAE,OAAO;EAAmB,MAAM;CAAkB;CACtE,YAAY;EAAE,OAAO;EAAiB,MAAM;CAAgB;CAC5D,YAAY;EAAE,OAAO;EAAiB,MAAM;CAAgB;CAC5D,WAAW;EAAE,OAAO;EAAa,MAAM;CAAY;AACrD;AAQA,MAAM,kBAAkB,MAAc,eAAuC;CAC3E,MAAM,WAA0B,CAAC;CAEjC,MAAM,YAAY;CAClB,MAAM,QAAQ,KAAK,MAAM,SAAS;CAElC,IAAI;CACJ,IAAI,SAAS;CAEb,KAAK,MAAM,QAAQ,OACjB,IAAI,UAAU,KAAK,IAAI,GAAG;EAExB,MAAM,eAAe,YAAY;EACjC,IAAI,cAAc;GAChB,IAAI,SAAS,WAAW;IAEtB,eAAe;IACf,SAAS;GACX,OAAO,IAAI,SAAS,WAElB,SAAS;QAET,eAAe,aAAa,aAAa,OAAO,aAAa;EAEjE;CACF,OAAO,IAAI,MAET,SAAS,KAAK;EACZ,MAAM;EACN,OAAO;EACP;CACF,CAAC;CAIL,OAAO;AACT;AAUA,MAAa,YAA+B,EAC1C,WACA,UACA,aAAa,OACb,QAAQ,QACR,SACA,UACA,GAAG,YACC;CACJ,MAAM,UAAU,YAAY,UAAU;CACtC,MAAM,QAAQ,OAAO,aAAa,WAAW,SAAS,MAAM,IAAI,IAAI,CAAC;CACrE,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAE/C,MAAM,iBAAiB,MAAuC;EAC5D,IAAI,EAAE,QAAQ,WAAW,WAAW,KAAK,GAAG;GAC1C,WAAW,UAAU;GACrB,cAAc,EAAE;EAClB;CACF;CAGA,MAAM,iBAAiB;CAKvB,OACE,qBAAC,WAAD;EACE,aAAY;EACZ,WAAW,GACT,~~8DACA~~,SACF;EACA,GAAI;YANN;GASE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,oBAAC,OAAD,EAAK,WAAU,+BAAgC;MAC/C,oBAAC,OAAD,EAAK,WAAU,oCAAqC;MACpD,oBAAC,OAAD,EAAK,WAAU,mCAAoC;KAChD;QACL,oBAAC,OAAD;KAAK,WAAU;eACb,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD,YAAO,MAAY,IAClB,WACC,oBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;OACV,cAAY,QAAQ,SAAS;iBAC9B;MAEO,EAEP;;IACF,EACF;;GAGL,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,QAAD,YACG,MAAM,KAAK,MAAM,cAAc;KAC9B,MAAM,WAAW,eAAe,MAAM,UAAU;KAEhD,OACE,oBAAC,QAAD;MAAM,WAAU;gBACb,SAAS,WAAW,IACjB,OACA,SAAS,KAAK,SAAS,aACrB,oBAAC,QAAD;OAEE,WAAW,GAAG,QAAQ,OAAO,EAC3B,aAAa,QAAQ,OACvB,CAAC;iBAEA,QAAQ;MACL,GANC,OAAO,UAAU,GAAG,UAMrB,CACP;KACD,GAbmC,QAAQ,WAa3C;IAEV,CAAC,EACG;GACH;GAGL,qBAAC,WAAD;IAAW,WAAU;cAArB,CACE,oBAAC,QAAD;KAAM,WAAU;eAAe;IAAqB,IACpD,oBAAC,OAAD;KACE,WAAU;KACV,SAAQ;KACR,OAAO;KACP,cAAY,QAAQ,cAAc;KAClC,WAAW,MAAM,cAAc,EAAE,OAAO,KAAK;KAC7C,WAAW;IACZ,EACQ;;EACF;;AAEf"}
1	+ {"version":3,"file":"Terminal.mjs","names":[],"sources":["../../../../src/components/Terminal/Terminal.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { Input } from '@components/Input';\nimport { cn } from '@utils/cn';\nimport {\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ANSI color code mappings to CSS colors\nconst ANSI_COLORS: Record<string, { light: string; dark: string }> = {\n '\\x1b[0m': { light: '', dark: '' }, // RESET\n '\\x1b[90m': { light: 'text-gray-500', dark: 'text-gray-400' }, // GREY\n '\\x1b[38;5;239m': { light: 'text-gray-600', dark: 'text-gray-500' }, // GREY_DARK\n '\\x1b[38;5;252m': { light: 'text-gray-300', dark: 'text-gray-300' }, // GREY_LIGHT\n '\\x1b[34m': { light: 'text-blue-600', dark: 'text-blue-400' }, // BLUE\n '\\x1b[31m': { light: 'text-red-600', dark: 'text-red-400' }, // RED\n '\\x1b[32m': { light: 'text-green-600', dark: 'text-green-400' }, // GREEN\n '\\x1b[38;5;226m': { light: 'text-yellow-500', dark: 'text-yellow-300' }, // YELLOW\n '\\x1b[35m': { light: 'text-purple-600', dark: 'text-purple-400' }, // MAGENTA\n '\\x1b[38;5;3m': { light: 'text-amber-600', dark: 'text-amber-300' }, // BEIGE\n '\\x1b[38;5;208m': { light: 'text-orange-600', dark: 'text-orange-400' }, // ORANGE\n '\\x1b[36m': { light: 'text-cyan-600', dark: 'text-cyan-400' }, // CYAN\n '\\x1b[37m': { light: 'text-gray-800', dark: 'text-gray-200' }, // WHITE\n '\\x1b[1m': { light: 'font-bold', dark: 'font-bold' }, // BOLD\n};\n\ninterface AnsiSegment {\n text: string;\n color?: string;\n isBold?: boolean;\n}\n\nconst parseAnsiCodes = (text: string, isDarkMode: boolean): AnsiSegment[] => {\n const segments: AnsiSegment[] = [];\n // biome-ignore lint/suspicious/noControlCharactersInRegex: we need to parse ANSI codes\n const ansiRegex = /(\\x1b\\[[0-9;]m)/g;\n const parts = text.split(ansiRegex);\n\n let currentColor: string \| undefined;\n let isBold = false;\n\n for (const part of parts) {\n if (ansiRegex.test(part)) {\n // This is an ANSI code\n const colorMapping = ANSI_COLORS[part];\n if (colorMapping) {\n if (part === '\\x1b[0m') {\n // RESET\n currentColor = undefined;\n isBold = false;\n } else if (part === '\\x1b[1m') {\n // BOLD\n isBold = true;\n } else {\n currentColor = isDarkMode ? colorMapping.dark : colorMapping.light;\n }\n }\n } else if (part) {\n // This is actual text\n segments.push({\n text: part,\n color: currentColor,\n isBold,\n });\n }\n }\n\n return segments;\n};\n\nexport type TerminalProps = {\n children: string;\n isDarkMode?: boolean;\n title?: string;\n onClose?: () => void;\n onSubmit?: (value: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children' \| 'onSubmit'>;\n\nexport const Terminal: FC<TerminalProps> = ({\n className,\n children,\n isDarkMode = false,\n title = 'bash',\n onClose,\n onSubmit,\n ...props\n}) => {\n const content = useIntlayer('terminal');\n const lines = typeof children === 'string' ? children.split('\\n') : [];\n const [inputValue, setInputValue] = useState('');\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && inputValue.trim()) {\n onSubmit?.(inputValue);\n setInputValue('');\n }\n };\n\n // Explicitly type the container props to avoid type conflicts\n const containerProps = props as Omit<\n HTMLAttributes<HTMLDivElement>,\n 'children' \| 'onSubmit'\n >;\n\n return (\n <Container\n roundedSize=\"lg\"\n className={cn(\n 'flex min-w-0 max-w-full flex-col overflow-hidden border font-mono',\n className\n )}\n {...containerProps}\n >\n {/ Tab bar /}\n <div className=\"flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-muted-foreground text-xs dark:bg-neutral-950\">\n <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n <div className=\"size-3 rounded-full bg-error\" />\n <div className=\"size-3 rounded-full bg-yellow-500\" />\n <div className=\"size-3 rounded-full bg-green-500\" />\n </div>\n <div className=\"flex size-full overflow-y-auto\">\n <div className=\"flex h-8 min-w-20 items-center justify-between gap-2 bg-card px-3 py-1\">\n <span>{title}</span>\n {onClose && (\n <button\n type=\"button\"\n onClick={onClose}\n className=\"text-neutral transition-colors hover:text-foreground\"\n aria-label={content.closeTab.value}\n >\n ×\n </button>\n )}\n </div>\n </div>\n </div>\n\n {/ Terminal content - hide scrollbar /}\n <pre className=\"min-w-0 max-w-full overflow-x-auto overflow-y-auto border-neutral/30 border-b p-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n <code>\n {lines.map((line, lineIndex) => {\n const segments = parseAnsiCodes(line, isDarkMode);\n\n return (\n <span className=\"line block w-full\" key={`line-${lineIndex}`}>\n {segments.length === 0\n ? '\\n'\n : segments.map((segment, segIndex) => (\n <span\n key={`seg-${lineIndex}-${segIndex}`}\n className={cn(segment.color, {\n 'font-bold': segment.isBold,\n })}\n >\n {segment.text}\n </span>\n ))}\n </span>\n );\n })}\n </code>\n </pre>\n\n {/ Input area */}\n <Container className=\"p-2\">\n <span className=\"text-neutral\">~/Desktop/MyApp</span>\n <Input\n className=\"m-0.5 w-full\"\n variant=\"invisible\"\n value={inputValue}\n aria-label={content.terminalInput.value}\n onChange={(e) => setInputValue(e.target.value)}\n onKeyDown={handleKeyDown}\n />\n </Container>\n </Container>\n );\n};\n"],"mappings":";;;;;;;;;;AAcA,MAAM,cAA+D;CACnE,WAAW;EAAE,OAAO;EAAI,MAAM;CAAG;CACjC,YAAY;EAAE,OAAO;EAAiB,MAAM;CAAgB;CAC5D,kBAAkB;EAAE,OAAO;EAAiB,MAAM;CAAgB;CAClE,kBAAkB;EAAE,OAAO;EAAiB,MAAM;CAAgB;CAClE,YAAY;EAAE,OAAO;EAAiB,MAAM;CAAgB;CAC5D,YAAY;EAAE,OAAO;EAAgB,MAAM;CAAe;CAC1D,YAAY;EAAE,OAAO;EAAkB,MAAM;CAAiB;CAC9D,kBAAkB;EAAE,OAAO;EAAmB,MAAM;CAAkB;CACtE,YAAY;EAAE,OAAO;EAAmB,MAAM;CAAkB;CAChE,gBAAgB;EAAE,OAAO;EAAkB,MAAM;CAAiB;CAClE,kBAAkB;EAAE,OAAO;EAAmB,MAAM;CAAkB;CACtE,YAAY;EAAE,OAAO;EAAiB,MAAM;CAAgB;CAC5D,YAAY;EAAE,OAAO;EAAiB,MAAM;CAAgB;CAC5D,WAAW;EAAE,OAAO;EAAa,MAAM;CAAY;AACrD;AAQA,MAAM,kBAAkB,MAAc,eAAuC;CAC3E,MAAM,WAA0B,CAAC;CAEjC,MAAM,YAAY;CAClB,MAAM,QAAQ,KAAK,MAAM,SAAS;CAElC,IAAI;CACJ,IAAI,SAAS;CAEb,KAAK,MAAM,QAAQ,OACjB,IAAI,UAAU,KAAK,IAAI,GAAG;EAExB,MAAM,eAAe,YAAY;EACjC,IAAI,cAAc;GAChB,IAAI,SAAS,WAAW;IAEtB,eAAe;IACf,SAAS;GACX,OAAO,IAAI,SAAS,WAElB,SAAS;QAET,eAAe,aAAa,aAAa,OAAO,aAAa;EAEjE;CACF,OAAO,IAAI,MAET,SAAS,KAAK;EACZ,MAAM;EACN,OAAO;EACP;CACF,CAAC;CAIL,OAAO;AACT;AAUA,MAAa,YAA+B,EAC1C,WACA,UACA,aAAa,OACb,QAAQ,QACR,SACA,UACA,GAAG,YACC;CACJ,MAAM,UAAU,YAAY,UAAU;CACtC,MAAM,QAAQ,OAAO,aAAa,WAAW,SAAS,MAAM,IAAI,IAAI,CAAC;CACrE,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAE/C,MAAM,iBAAiB,MAAuC;EAC5D,IAAI,EAAE,QAAQ,WAAW,WAAW,KAAK,GAAG;GAC1C,WAAW,UAAU;GACrB,cAAc,EAAE;EAClB;CACF;CAGA,MAAM,iBAAiB;CAKvB,OACE,qBAAC,WAAD;EACE,aAAY;EACZ,WAAW,GACT,qEACA,SACF;EACA,GAAI;YANN;GASE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,qBAAC,OAAD;KAAK,WAAU;eAAf;MACE,oBAAC,OAAD,EAAK,WAAU,+BAAgC;MAC/C,oBAAC,OAAD,EAAK,WAAU,oCAAqC;MACpD,oBAAC,OAAD,EAAK,WAAU,mCAAoC;KAChD;QACL,oBAAC,OAAD;KAAK,WAAU;eACb,qBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,oBAAC,QAAD,YAAO,MAAY,IAClB,WACC,oBAAC,UAAD;OACE,MAAK;OACL,SAAS;OACT,WAAU;OACV,cAAY,QAAQ,SAAS;iBAC9B;MAEO,EAEP;;IACF,EACF;;GAGL,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,QAAD,YACG,MAAM,KAAK,MAAM,cAAc;KAC9B,MAAM,WAAW,eAAe,MAAM,UAAU;KAEhD,OACE,oBAAC,QAAD;MAAM,WAAU;gBACb,SAAS,WAAW,IACjB,OACA,SAAS,KAAK,SAAS,aACrB,oBAAC,QAAD;OAEE,WAAW,GAAG,QAAQ,OAAO,EAC3B,aAAa,QAAQ,OACvB,CAAC;iBAEA,QAAQ;MACL,GANC,OAAO,UAAU,GAAG,UAMrB,CACP;KACD,GAbmC,QAAQ,WAa3C;IAEV,CAAC,EACG;GACH;GAGL,qBAAC,WAAD;IAAW,WAAU;cAArB,CACE,oBAAC,QAAD;KAAM,WAAU;eAAe;IAAqB,IACpD,oBAAC,OAAD;KACE,WAAU;KACV,SAAQ;KACR,OAAO;KACP,cAAY,QAAQ,cAAc;KAClC,WAAW,MAAM,cAAc,EAAE,OAAO,KAAK;KAC7C,WAAW;IACZ,EACQ;;EACF;;AAEf"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';\nimport { inputVariants } from '../Input';\n\n/*\n Props for the TextArea component.\n \n Extends standard HTML textarea attributes with additional design system variants\n * and validation styling options.\n \n @example\n * ```tsx\n * // Basic usage\n * <TextArea placeholder=\"Enter your message...\" />\n \n // With error validation styling\n * <TextArea\n * value={message}\n * onChange={handleChange}\n * variant=\"error\"\n * validationStyleEnabled={true}\n * placeholder=\"Message is required\"\n * />\n \n // Large multiline input\n * <TextArea\n * rows={6}\n * cols={50}\n * variant=\"default\"\n * className=\"min-h-30\"\n * placeholder=\"Write a detailed description...\"\n * />\n * ```\n /\nexport type TextAreaProps = DetailedHTMLProps<\n DetailedHTMLProps<\n TextareaHTMLAttributes<HTMLTextAreaElement>,\n HTMLTextAreaElement\n >,\n HTMLTextAreaElement\n> & {\n /* Enable validation styling based on the variant prop /\n validationStyleEnabled?: boolean;\n} & Omit<\n VariantProps<typeof inputVariants>,\n 'validationStyleEnabled' \| 'variant'\n > & {\n /* Visual variant of the textarea (default, success, error, warning, etc.) /\n variant?: InputVariant;\n };\n\n/\n TextArea Component\n \n A flexible textarea component that extends the standard HTML textarea with\n * design system styling variants, validation states, and consistent visual appearance.\n \n ## Features\n * - Variant Support: Multiple visual states (default, error, success, warning)\n * - Validation Styling: Optional validation feedback styling\n * - Resize Control: Disabled by default for consistent layout\n * - Design System Integration: Uses shared input variants for consistency\n * - Accessibility: Maintains all standard textarea accessibility features\n \n ## Use Cases\n * - Multi-line text input forms\n * - Comment and message composition\n * - Description and content fields\n * - Feedback and review forms\n * - Code snippet input (when combined with monospace styling)\n \n @example\n * ```tsx\n * // Basic textarea\n * <TextArea\n * placeholder=\"Enter your thoughts...\"\n * rows={4}\n * />\n \n // Controlled with validation\n * const [content, setContent] = useState('');\n * const hasError = content.length < 10;\n \n <TextArea\n * value={content}\n * onChange={(e) => setContent(e.target.value)}\n * variant={hasError ? 'error' : 'success'}\n * validationStyleEnabled={true}\n * placeholder=\"Minimum 10 characters required\"\n * className=\"min-top-25\"\n * />\n * ```\n */\nexport const TextArea: FC<TextAreaProps> = ({\n className,\n variant,\n validationStyleEnabled = false,\n ...props\n}) => (\n <textarea\n className={cn(\n 'resize-none',\n inputVariants({\n variant,\n validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n className,\n })\n )}\n {...props}\n />\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAa,YAA+B,EAC1C,WACA,SACA,yBAAyB,OACzB,GAAG,YAEH,oBAAC,YAAD;CACE,WAAW,GACT,eACA,cAAc;EACZ;EACA,wBAAwB,yBAAyB,YAAY;EAC7D;CACF,CAAC,CACH;CACA,GAAI;AACL"}
1	+ {"version":3,"file":"TextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';\nimport { type InputVariant, inputVariants } from '../Input';\n\n/*\n Props for the TextArea component.\n \n Extends standard HTML textarea attributes with additional design system variants\n * and validation styling options.\n \n @example\n * ```tsx\n * // Basic usage\n * <TextArea placeholder=\"Enter your message...\" />\n \n // With error validation styling\n * <TextArea\n * value={message}\n * onChange={handleChange}\n * variant=\"error\"\n * validationStyleEnabled={true}\n * placeholder=\"Message is required\"\n * />\n \n // Large multiline input\n * <TextArea\n * rows={6}\n * cols={50}\n * variant=\"default\"\n * className=\"min-h-30\"\n * placeholder=\"Write a detailed description...\"\n * />\n * ```\n /\nexport type TextAreaProps = DetailedHTMLProps<\n DetailedHTMLProps<\n TextareaHTMLAttributes<HTMLTextAreaElement>,\n HTMLTextAreaElement\n >,\n HTMLTextAreaElement\n> & {\n /* Enable validation styling based on the variant prop /\n validationStyleEnabled?: boolean;\n} & Omit<\n VariantProps<typeof inputVariants>,\n 'validationStyleEnabled' \| 'variant'\n > & {\n /* Visual variant of the textarea (default, success, error, warning, etc.) /\n variant?: InputVariant;\n };\n\n/\n TextArea Component\n \n A flexible textarea component that extends the standard HTML textarea with\n * design system styling variants, validation states, and consistent visual appearance.\n \n ## Features\n * - Variant Support: Multiple visual states (default, error, success, warning)\n * - Validation Styling: Optional validation feedback styling\n * - Resize Control: Disabled by default for consistent layout\n * - Design System Integration: Uses shared input variants for consistency\n * - Accessibility: Maintains all standard textarea accessibility features\n \n ## Use Cases\n * - Multi-line text input forms\n * - Comment and message composition\n * - Description and content fields\n * - Feedback and review forms\n * - Code snippet input (when combined with monospace styling)\n \n @example\n * ```tsx\n * // Basic textarea\n * <TextArea\n * placeholder=\"Enter your thoughts...\"\n * rows={4}\n * />\n \n // Controlled with validation\n * const [content, setContent] = useState('');\n * const hasError = content.length < 10;\n \n <TextArea\n * value={content}\n * onChange={(e) => setContent(e.target.value)}\n * variant={hasError ? 'error' : 'success'}\n * validationStyleEnabled={true}\n * placeholder=\"Minimum 10 characters required\"\n * className=\"min-top-25\"\n * />\n * ```\n */\nexport const TextArea: FC<TextAreaProps> = ({\n className,\n variant,\n validationStyleEnabled = false,\n ...props\n}) => (\n <textarea\n className={cn(\n 'resize-none',\n inputVariants({\n variant,\n validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n className,\n })\n )}\n {...props}\n />\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAa,YAA+B,EAC1C,WACA,SACA,yBAAyB,OACzB,GAAG,YAEH,oBAAC,YAAD;CACE,WAAW,GACT,eACA,cAAc;EACZ;EACA,wBAAwB,yBAAyB,YAAY;EAC7D;CACF,CAAC,CACH;CACA,GAAI;AACL"}

package/dist/esm/components/Toaster/Toast.mjs CHANGED Viewed

@@ -35,11 +35,11 @@ const toastVariants = cva("group data-[state=closed]:fade-out-80 data-[state=clo
 	/** Toast visual variants for different message types */
 variant: {
 		/** Error state with red styling for failures and warnings */
-		error: "bg-error/40 text-text",
+		error: "bg-error/40 text-foreground",
 		/** Success state with green styling for confirmations */
-		success: "bg-success/30 text-text",
+		success: "bg-success/30 text-foreground",
 		/** Default neutral styling for general information */
-		default: "bg-card/80 text-text"
+		default: "bg-card/80 text-foreground"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -129,7 +129,7 @@ const ToastAction = ({ className, ...props }) => /* @__PURE__ */ jsx(ToastPrimit
 	...props
 });
 const ToastClose = ({ className, ...props }) => /* @__PURE__ */ jsx(ToastPrimitives.Close, {
-	className: cn("absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.error]:text-red-300 group-[.error]:focus:ring-red-400 group-[.error]:focus:ring-offset-red-600 group-[.error]:hover:text-red-50", className),
+	className: cn("absolute top-1 right-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.error]:text-red-300 group-[.error]:focus:ring-red-400 group-[.error]:focus:ring-offset-red-600 group-[.error]:hover:text-red-50", className),
 	"toast-close": "",
 	...props,
 	children: /* @__PURE__ */ jsx(X, { className: "size-5" })