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

package/dist/components/Table/Table.mjs

@@ -1,65 +0,0 @@
-"use client";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { MoveDiagonal } from "lucide-react";
-import { useState } from "react";
-import { cn } from "../../utils/cn.mjs";
-import { Button } from "../Button/Button.mjs";
-import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
-import { Modal, ModalSize } from "../Modal/Modal.mjs";
-const Table = ({ className, isRollable, ...props }) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx("div", { className: "sticky top-48 z-10", children: /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-2", children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "hoverable",
-        size: "icon-md",
-        onClick: () => {
-          setIsModalOpen(true);
-        },
-        label: "Move",
-        Icon: MoveDiagonal
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx(
-      ExpandCollapse,
-      {
-        isRollable,
-        className: "max-w-full overflow-x-auto",
-        children: /* @__PURE__ */ jsx(
-          "table",
-          {
-            className: cn(
-              "max-w-full overflow-x-auto table-auto text-left min-w-full bg-background",
-              className
-            ),
-            ...props
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Modal,
-      {
-        isOpen: isModalOpen,
-        onClose: () => setIsModalOpen(false),
-        size: ModalSize.XL,
-        hasCloseButton: true,
-        children: isModalOpen ? /* @__PURE__ */ jsx("div", { className: "grid", children: /* @__PURE__ */ jsx(
-          "table",
-          {
-            className: cn(
-              "max-w-full table-auto text-left min-w-full",
-              className
-            ),
-            ...props
-          }
-        ) }) : /* @__PURE__ */ jsx(Fragment, {})
-      }
-    )
-  ] });
-};
-export {
-  Table
-};
-//# sourceMappingURL=Table.mjs.map

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

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

package/dist/components/Table/index.cjs

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const components_Table_Table = require("./Table.cjs");
-exports.Table = components_Table_Table.Table;
-//# sourceMappingURL=index.cjs.map

package/dist/components/Table/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/Table/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Table';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Table/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/Table/index.mjs

@@ -1,5 +0,0 @@
-import { Table } from "./Table.mjs";
-export {
-  Table
-};
-//# sourceMappingURL=index.mjs.map

package/dist/components/Table/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Table/table.content.cjs

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const intlayer = require("intlayer");
-const tableContent = {
-  key: "table",
-  autoFill: "./{{key}}.content.json",
-  content: {
-    show: intlayer.t({
-      en: "Show all table content",
-      fr: "Afficher tout le contenu du tableau",
-      es: "Mostrar todo el contenido de la tabla",
-      "en-GB": "Show all table content",
-      de: "Alle Tabellendaten anzeigen",
-      ja: "テーブルのすべての内容を表示",
-      ko: "테이블의 모든 내용 표시",
-      zh: "显示表格的所有内容",
-      it: "Mostra tutto il contenuto della tabella",
-      pt: "Mostrar todo o conteúdo da tabela",
-      hi: "सभी तालिका सामग्री दिखाएं",
-      ar: "اظهار جميع محتويات الجدول",
-      ru: "Показать все данные таблицы",
-      tr: "Tüm tablo içeriğini göster"
-    })
-  }
-};
-exports.default = tableContent;
-//# sourceMappingURL=table.content.cjs.map

package/dist/components/Table/table.content.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"table.content.cjs","sources":["../../../src/components/Table/table.content.ts"],"sourcesContent":["import { t, type Dictionary } from 'intlayer';\n\nconst tableContent = {\n  key: 'table',\n  autoFill: './{{key}}.content.json',\n  content: {\n    show: t({\n      en: 'Show all table content',\n      fr: 'Afficher tout le contenu du tableau',\n      es: 'Mostrar todo el contenido de la tabla',\n      'en-GB': 'Show all table content',\n      de: 'Alle Tabellendaten anzeigen',\n      ja: 'テーブルのすべての内容を表示',\n      ko: '테이블의 모든 내용 표시',\n      zh: '显示表格的所有内容',\n      it: 'Mostra tutto il contenuto della tabella',\n      pt: 'Mostrar todo o conteúdo da tabela',\n      hi: 'सभी तालिका सामग्री दिखाएं',\n      ar: 'اظهار جميع محتويات الجدول',\n      ru: 'Показать все данные таблицы',\n      tr: 'Tüm tablo içeriğini göster',\n    }),\n  },\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"names":["t"],"mappings":";;;AAEA,MAAM,eAAe;AAAA,EACnB,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACP,MAAMA,SAAAA,EAAE;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,EAAA;AAEL;;"}

package/dist/components/Table/table.content.d.ts

@@ -1,43 +0,0 @@
-declare const tableContent: {
-    key: string;
-    autoFill: string;
-    content: {
-        show: import('@intlayer/core').TypedNodeModel<import("@intlayer/core").NodeType.Translation, {
-            en: string;
-            fr: string;
-            es: string;
-            'en-GB': string;
-            de: string;
-            ja: string;
-            ko: string;
-            zh: string;
-            it: string;
-            pt: string;
-            hi: string;
-            ar: string;
-            ru: string;
-            tr: string;
-        }, {
-            nodeType: import("@intlayer/core").NodeType.Translation | "translation";
-        } & {
-            translation: {
-                en: string;
-                fr: string;
-                es: string;
-                'en-GB': string;
-                de: string;
-                ja: string;
-                ko: string;
-                zh: string;
-                it: string;
-                pt: string;
-                hi: string;
-                ar: string;
-                ru: string;
-                tr: string;
-            };
-        }>;
-    };
-};
-export default tableContent;
-//# sourceMappingURL=table.content.d.ts.map

package/dist/components/Table/table.content.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"table.content.d.ts","sourceRoot":"","sources":["../../../src/components/Table/table.content.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqBI,CAAC;AAEvB,eAAe,YAAY,CAAC"}

package/dist/components/Table/table.content.mjs

@@ -1,27 +0,0 @@
-import { t } from "intlayer";
-const tableContent = {
-  key: "table",
-  autoFill: "./{{key}}.content.json",
-  content: {
-    show: t({
-      en: "Show all table content",
-      fr: "Afficher tout le contenu du tableau",
-      es: "Mostrar todo el contenido de la tabla",
-      "en-GB": "Show all table content",
-      de: "Alle Tabellendaten anzeigen",
-      ja: "テーブルのすべての内容を表示",
-      ko: "테이블의 모든 내용 표시",
-      zh: "显示表格的所有内容",
-      it: "Mostra tutto il contenuto della tabella",
-      pt: "Mostrar todo o conteúdo da tabela",
-      hi: "सभी तालिका सामग्री दिखाएं",
-      ar: "اظهار جميع محتويات الجدول",
-      ru: "Показать все данные таблицы",
-      tr: "Tüm tablo içeriğini göster"
-    })
-  }
-};
-export {
-  tableContent as default
-};
-//# sourceMappingURL=table.content.mjs.map

package/dist/components/Table/table.content.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"table.content.mjs","sources":["../../../src/components/Table/table.content.ts"],"sourcesContent":["import { t, type Dictionary } from 'intlayer';\n\nconst tableContent = {\n  key: 'table',\n  autoFill: './{{key}}.content.json',\n  content: {\n    show: t({\n      en: 'Show all table content',\n      fr: 'Afficher tout le contenu du tableau',\n      es: 'Mostrar todo el contenido de la tabla',\n      'en-GB': 'Show all table content',\n      de: 'Alle Tabellendaten anzeigen',\n      ja: 'テーブルのすべての内容を表示',\n      ko: '테이블의 모든 내용 표시',\n      zh: '显示表格的所有内容',\n      it: 'Mostra tutto il contenuto della tabella',\n      pt: 'Mostrar todo o conteúdo da tabela',\n      hi: 'सभी तालिका सामग्री दिखाएं',\n      ar: 'اظهار جميع محتويات الجدول',\n      ru: 'Показать все данные таблицы',\n      tr: 'Tüm tablo içeriğini göster',\n    }),\n  },\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"names":[],"mappings":";AAEA,MAAM,eAAe;AAAA,EACnB,KAAK;AAAA,EACL,UAAU;AAAA,EACV,SAAS;AAAA,IACP,MAAM,EAAE;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA,CACL;AAAA,EAAA;AAEL;"}

package/dist/components/Tag/index.cjs

@@ -1,117 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const classVarianceAuthority = require("class-variance-authority");
-var TagRoundedSize = /* @__PURE__ */ ((TagRoundedSize2) => {
-  TagRoundedSize2["NONE"] = "none";
-  TagRoundedSize2["SM"] = "sm";
-  TagRoundedSize2["MD"] = "md";
-  TagRoundedSize2["LG"] = "lg";
-  TagRoundedSize2["XL"] = "xl";
-  TagRoundedSize2["XXL"] = "2xl";
-  TagRoundedSize2["XXXL"] = "3xl";
-  TagRoundedSize2["FULL"] = "full";
-  return TagRoundedSize2;
-})(TagRoundedSize || {});
-var TagColor = /* @__PURE__ */ ((TagColor2) => {
-  TagColor2["SUCCESS"] = "success";
-  TagColor2["ERROR"] = "error";
-  TagColor2["WARNING"] = "warning";
-  TagColor2["NEUTRAL"] = "neutral";
-  TagColor2["TEXT"] = "text";
-  return TagColor2;
-})(TagColor || {});
-var TagSize = /* @__PURE__ */ ((TagSize2) => {
-  TagSize2["XS"] = "xs";
-  TagSize2["SM"] = "sm";
-  TagSize2["MD"] = "md";
-  TagSize2["LG"] = "lg";
-  TagSize2["XL"] = "xl";
-  return TagSize2;
-})(TagSize || {});
-var TagBorder = /* @__PURE__ */ ((TagBorder2) => {
-  TagBorder2["NONE"] = "none";
-  TagBorder2["WITH"] = "with";
-  return TagBorder2;
-})(TagBorder || {});
-var TagBackground = /* @__PURE__ */ ((TagBackground2) => {
-  TagBackground2["NONE"] = "none";
-  TagBackground2["WITH"] = "with";
-  return TagBackground2;
-})(TagBackground || {});
-const containerVariants = classVarianceAuthority.cva("backdrop-blur w-fit", {
-  variants: {
-    roundedSize: {
-      [`${"none"}`]: "rounded-none",
-      [`${"sm"}`]: "rounded-sm",
-      [`${"md"}`]: "rounded-md",
-      [`${"lg"}`]: "rounded-lg",
-      [`${"xl"}`]: "rounded-xl",
-      [`${"2xl"}`]: "rounded-2xl",
-      [`${"3xl"}`]: "rounded-3xl",
-      [`${"full"}`]: "rounded-full"
-    },
-    color: {
-      [`${"success"}`]: "bg-success/10 border-success text-success ",
-      [`${"error"}`]: "bg-error/10 border-error text-error",
-      [`${"warning"}`]: "bg-warning/10 border-warning text-warning",
-      [`${"neutral"}`]: "bg-neutral/10 /10 border-neutral text-neutral ",
-      [`${"text"}`]: "bg-text/10  border-text  text-text"
-    },
-    size: {
-      [`${"xs"}`]: "py-0.5 px-2 text-xs border-[1.2px]",
-      [`${"sm"}`]: "py-0.5 px-2 text-sm border-[1.5px]",
-      [`${"md"}`]: "py-1 px-2 text-base border-2",
-      [`${"lg"}`]: "py-2 px-3 text-lg border-2",
-      [`${"xl"}`]: "py-4 px-5 text-xl border-2"
-    },
-    border: {
-      [`${"none"}`]: "border-none",
-      [`${"with"}`]: "border-text  border-[1.5px]"
-    },
-    background: {
-      [`${"none"}`]: "bg-none",
-      [`${"with"}`]: ""
-    }
-  },
-  defaultVariants: {
-    roundedSize: "full",
-    border: "none",
-    color: "text",
-    size: "md"
-    /* MD */
-  }
-});
-const Tag = ({
-  children,
-  color,
-  roundedSize,
-  size,
-  border,
-  background,
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: containerVariants({
-        color,
-        roundedSize,
-        size,
-        border,
-        background,
-        className
-      }),
-      ...props,
-      children
-    }
-  );
-};
-exports.Tag = Tag;
-exports.TagBackground = TagBackground;
-exports.TagBorder = TagBorder;
-exports.TagColor = TagColor;
-exports.TagRoundedSize = TagRoundedSize;
-exports.TagSize = TagSize;
-//# sourceMappingURL=index.cjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Tag/index.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/**\n * Properties for the Tag component extending HTML div attributes and variant options\n *\n * @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n *\n * @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property {string} [className] - Additional CSS classes for custom styling\n *\n * @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n *\n * // Success tag with border\n * <Tag color={TagColor.SUCCESS} border={TagBorder.WITH}>\n *   Success Status\n * </Tag>\n *\n * // Large warning tag\n * <Tag color={TagColor.WARNING} size={TagSize.LG}>\n *   Important Warning\n * </Tag>\n * ```\n */\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n  HTMLAttributes<HTMLDivElement>;\n\n/**\n * Enumeration for tag border radius sizes\n *\n * Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n *\n * @enum {string} TagRoundedSize\n * @property {string} NONE - 'none' - No border radius (sharp corners)\n * @property {string} SM - 'sm' - Small border radius (2px)\n * @property {string} MD - 'md' - Medium border radius (6px)\n * @property {string} LG - 'lg' - Large border radius (8px)\n * @property {string} XL - 'xl' - Extra large border radius (12px)\n * @property {string} XXL - '2xl' - 2x large border radius (16px)\n * @property {string} XXXL - '3xl' - 3x large border radius (24px)\n * @property {string} FULL - 'full' - Fully rounded (50% border radius, pill shape)\n *\n * @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>\n *\n * // Pill-shaped tag\n * <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>\n *\n * // Medium rounded corners\n * <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>\n * ```\n */\nexport enum TagRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  XXL = '2xl',\n  XXXL = '3xl',\n  FULL = 'full',\n}\n\n/**\n * Enumeration for tag color themes\n *\n * Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n *\n * @enum {string} TagColor\n * @property {string} SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property {string} ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property {string} WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property {string} NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property {string} TEXT - 'text' - Default text color theme for general purpose tags\n *\n * @example\n * ```tsx\n * // Status indicators\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>Pending</Tag>\n *\n * // Category tags\n * <Tag color={TagColor.NEUTRAL}>Category</Tag>\n * <Tag color={TagColor.TEXT}>General</Tag>\n * ```\n */\nexport enum TagColor {\n  SUCCESS = 'success',\n  ERROR = 'error',\n  WARNING = 'warning',\n  NEUTRAL = 'neutral',\n  TEXT = 'text',\n}\n\n/**\n * Enumeration for tag size variants\n *\n * Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n *\n * @enum {string} TagSize\n * @property {string} XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property {string} SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property {string} MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property {string} LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property {string} XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n *\n * @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size={TagSize.XS}>Small detail</Tag>\n * <Tag size={TagSize.SM}>Minor category</Tag>\n * <Tag size={TagSize.MD}>Standard tag</Tag>\n * <Tag size={TagSize.LG}>Important label</Tag>\n * <Tag size={TagSize.XL}>Hero tag</Tag>\n * ```\n */\nexport enum TagSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/**\n * Enumeration for tag border visibility\n *\n * Controls whether a border is displayed around the tag.\n *\n * @enum {string} TagBorder\n * @property {string} NONE - 'none' - No border (default)\n * @property {string} WITH - 'with' - Show border with 1.5px thickness\n *\n * @example\n * ```tsx\n * <Tag border={TagBorder.NONE}>Borderless</Tag>\n * <Tag border={TagBorder.WITH}>With Border</Tag>\n * ```\n */\nexport enum TagBorder {\n  NONE = 'none',\n  WITH = 'with',\n}\n\n/**\n * Enumeration for tag background visibility\n *\n * Controls the background styling of the tag.\n *\n * @enum {string} TagBackground\n * @property {string} NONE - 'none' - No background styling\n * @property {string} WITH - 'with' - Apply background styling\n *\n * @example\n * ```tsx\n * <Tag background={TagBackground.NONE}>No Background</Tag>\n * <Tag background={TagBackground.WITH}>With Background</Tag>\n * ```\n */\nexport enum TagBackground {\n  NONE = 'none',\n  WITH = 'with',\n}\n\nconst containerVariants = cva('backdrop-blur w-fit', {\n  variants: {\n    roundedSize: {\n      [`${TagRoundedSize.NONE}`]: 'rounded-none',\n      [`${TagRoundedSize.SM}`]: 'rounded-sm',\n      [`${TagRoundedSize.MD}`]: 'rounded-md',\n      [`${TagRoundedSize.LG}`]: 'rounded-lg',\n      [`${TagRoundedSize.XL}`]: 'rounded-xl',\n      [`${TagRoundedSize.XXL}`]: 'rounded-2xl',\n      [`${TagRoundedSize.XXXL}`]: 'rounded-3xl',\n      [`${TagRoundedSize.FULL}`]: 'rounded-full',\n    },\n    color: {\n      [`${TagColor.SUCCESS}`]: 'bg-success/10 border-success text-success ',\n      [`${TagColor.ERROR}`]: 'bg-error/10 border-error text-error',\n      [`${TagColor.WARNING}`]: 'bg-warning/10 border-warning text-warning',\n      [`${TagColor.NEUTRAL}`]: 'bg-neutral/10 /10 border-neutral text-neutral ',\n      [`${TagColor.TEXT}`]: 'bg-text/10  border-text  text-text',\n    },\n    size: {\n      [`${TagSize.XS}`]: 'py-0.5 px-2 text-xs border-[1.2px]',\n      [`${TagSize.SM}`]: 'py-0.5 px-2 text-sm border-[1.5px]',\n      [`${TagSize.MD}`]: 'py-1 px-2 text-base border-2',\n      [`${TagSize.LG}`]: 'py-2 px-3 text-lg border-2',\n      [`${TagSize.XL}`]: 'py-4 px-5 text-xl border-2',\n    },\n    border: {\n      [`${TagBorder.NONE}`]: 'border-none',\n      [`${TagBorder.WITH}`]: 'border-text  border-[1.5px]',\n    },\n    background: {\n      [`${TagBackground.NONE}`]: 'bg-none',\n      [`${TagBackground.WITH}`]: '',\n    },\n  },\n\n  defaultVariants: {\n    roundedSize: TagRoundedSize.FULL,\n    border: TagBorder.NONE,\n    color: TagColor.TEXT,\n    size: TagSize.MD,\n  },\n});\n\n/**\n * Tag component for displaying labels, categories, status indicators, and badges\n *\n * The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n *\n * ## Features\n * - **Semantic Colors**: Success, error, warning, neutral, and text color themes\n * - **Flexible Sizing**: Five size variants from extra small to extra large\n * - **Border Radius Options**: Eight rounding options from none to fully rounded\n * - **Border Control**: Optional borders for enhanced visual separation\n * - **Background Control**: Configurable background styling\n * - **Accessibility**: Proper HTML semantics and keyboard navigation support\n *\n * ## Use Cases\n * - **Status Indicators**: Show completion, error, or pending states\n * - **Category Labels**: Organize and categorize content\n * - **Badges**: Display counts, notifications, or achievements\n * - **Keywords**: Tag content with relevant keywords or topics\n * - **Metadata**: Show additional information like dates, authors, or types\n *\n * ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n *\n * @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n *\n * @example\n * ```tsx\n * // Basic status tags\n * <Tag color={TagColor.SUCCESS}>Completed</Tag>\n * <Tag color={TagColor.ERROR}>Failed</Tag>\n * <Tag color={TagColor.WARNING}>In Progress</Tag>\n *\n * // Category tags with borders\n * <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>\n *   Technology\n * </Tag>\n * <Tag color={TagColor.TEXT} border={TagBorder.WITH}>\n *   Design\n * </Tag>\n *\n * // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n *   <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>\n *   <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>\n *   <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>\n * </div>\n *\n * // Rounded variations\n * <div className=\"flex gap-2\">\n *   <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>\n *   <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>\n *   <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>\n * </div>\n *\n * // Custom styled tag\n * <Tag\n *   color={TagColor.WARNING}\n *   size={TagSize.LG}\n *   border={TagBorder.WITH}\n *   roundedSize={TagRoundedSize.LG}\n *   className=\"font-bold uppercase tracking-wide\"\n * >\n *   Custom Style\n * </Tag>\n *\n * // Interactive tags with click handlers\n * <Tag\n *   color={TagColor.SUCCESS}\n *   onClick={() => console.log('Tag clicked')}\n *   className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n *   Clickable Tag\n * </Tag>\n * ```\n *\n * @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n  children,\n  color,\n  roundedSize,\n  size,\n  border,\n  background,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={containerVariants({\n        color,\n        roundedSize,\n        size,\n        border,\n        background,\n        className,\n      })}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["TagRoundedSize","TagColor","TagSize","TagBorder","TagBackground","cva","jsx"],"mappings":"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"}

package/dist/components/Tag/index.d.ts

@@ -1,268 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import { FC, HTMLAttributes, PropsWithChildren } from 'react';
-/**
- * Properties for the Tag component extending HTML div attributes and variant options
- *
- * @interface TagProps
- * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}
- * @extends {HTMLAttributes<HTMLDivElement>}
- *
- * @property {ReactNode} children - The content to display inside the tag
- * @property {TagColor} [color] - Color theme variant of the tag
- * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag
- * @property {TagSize} [size] - Size variant affecting padding and font size
- * @property {TagBorder} [border] - Whether to show a border around the tag
- * @property {TagBackground} [background] - Background visibility option
- * @property {string} [className] - Additional CSS classes for custom styling
- *
- * @example
- * ```tsx
- * // Basic tag
- * <Tag>Default Tag</Tag>
- *
- * // Success tag with border
- * <Tag color={TagColor.SUCCESS} border={TagBorder.WITH}>
- *   Success Status
- * </Tag>
- *
- * // Large warning tag
- * <Tag color={TagColor.WARNING} size={TagSize.LG}>
- *   Important Warning
- * </Tag>
- * ```
- */
-type TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> & HTMLAttributes<HTMLDivElement>;
-/**
- * Enumeration for tag border radius sizes
- *
- * Controls the roundedness of tag corners, from sharp edges to fully rounded pills.
- *
- * @enum {string} TagRoundedSize
- * @property {string} NONE - 'none' - No border radius (sharp corners)
- * @property {string} SM - 'sm' - Small border radius (2px)
- * @property {string} MD - 'md' - Medium border radius (6px)
- * @property {string} LG - 'lg' - Large border radius (8px)
- * @property {string} XL - 'xl' - Extra large border radius (12px)
- * @property {string} XXL - '2xl' - 2x large border radius (16px)
- * @property {string} XXXL - '3xl' - 3x large border radius (24px)
- * @property {string} FULL - 'full' - Fully rounded (50% border radius, pill shape)
- *
- * @example
- * ```tsx
- * // Sharp corners
- * <Tag roundedSize={TagRoundedSize.NONE}>Sharp Tag</Tag>
- *
- * // Pill-shaped tag
- * <Tag roundedSize={TagRoundedSize.FULL}>Pill Tag</Tag>
- *
- * // Medium rounded corners
- * <Tag roundedSize={TagRoundedSize.MD}>Rounded Tag</Tag>
- * ```
- */
-export declare enum TagRoundedSize {
-    NONE = "none",
-    SM = "sm",
-    MD = "md",
-    LG = "lg",
-    XL = "xl",
-    XXL = "2xl",
-    XXXL = "3xl",
-    FULL = "full"
-}
-/**
- * Enumeration for tag color themes
- *
- * Provides semantic color options for different tag purposes and meanings.
- * Each color includes background, border, and text color variations.
- *
- * @enum {string} TagColor
- * @property {string} SUCCESS - 'success' - Green theme for positive states, success messages, or completed items
- * @property {string} ERROR - 'error' - Red theme for error states, warnings, or failed operations
- * @property {string} WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices
- * @property {string} NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content
- * @property {string} TEXT - 'text' - Default text color theme for general purpose tags
- *
- * @example
- * ```tsx
- * // Status indicators
- * <Tag color={TagColor.SUCCESS}>Completed</Tag>
- * <Tag color={TagColor.ERROR}>Failed</Tag>
- * <Tag color={TagColor.WARNING}>Pending</Tag>
- *
- * // Category tags
- * <Tag color={TagColor.NEUTRAL}>Category</Tag>
- * <Tag color={TagColor.TEXT}>General</Tag>
- * ```
- */
-export declare enum TagColor {
-    SUCCESS = "success",
-    ERROR = "error",
-    WARNING = "warning",
-    NEUTRAL = "neutral",
-    TEXT = "text"
-}
-/**
- * Enumeration for tag size variants
- *
- * Controls the overall size of tags including padding, font size, and border thickness.
- * Sizes are designed to maintain visual hierarchy and readability.
- *
- * @enum {string} TagSize
- * @property {string} XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)
- * @property {string} SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)
- * @property {string} MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size
- * @property {string} LG - 'lg' - Large (2rem padding, text-lg, 2px border)
- * @property {string} XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)
- *
- * @example
- * ```tsx
- * // Different sizes for hierarchy
- * <Tag size={TagSize.XS}>Small detail</Tag>
- * <Tag size={TagSize.SM}>Minor category</Tag>
- * <Tag size={TagSize.MD}>Standard tag</Tag>
- * <Tag size={TagSize.LG}>Important label</Tag>
- * <Tag size={TagSize.XL}>Hero tag</Tag>
- * ```
- */
-export declare enum TagSize {
-    XS = "xs",
-    SM = "sm",
-    MD = "md",
-    LG = "lg",
-    XL = "xl"
-}
-/**
- * Enumeration for tag border visibility
- *
- * Controls whether a border is displayed around the tag.
- *
- * @enum {string} TagBorder
- * @property {string} NONE - 'none' - No border (default)
- * @property {string} WITH - 'with' - Show border with 1.5px thickness
- *
- * @example
- * ```tsx
- * <Tag border={TagBorder.NONE}>Borderless</Tag>
- * <Tag border={TagBorder.WITH}>With Border</Tag>
- * ```
- */
-export declare enum TagBorder {
-    NONE = "none",
-    WITH = "with"
-}
-/**
- * Enumeration for tag background visibility
- *
- * Controls the background styling of the tag.
- *
- * @enum {string} TagBackground
- * @property {string} NONE - 'none' - No background styling
- * @property {string} WITH - 'with' - Apply background styling
- *
- * @example
- * ```tsx
- * <Tag background={TagBackground.NONE}>No Background</Tag>
- * <Tag background={TagBackground.WITH}>With Background</Tag>
- * ```
- */
-export declare enum TagBackground {
-    NONE = "none",
-    WITH = "with"
-}
-declare const containerVariants: (props?: ({
-    roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
-    color?: "text" | "neutral" | "error" | "success" | "warning" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-    border?: "none" | "with" | null | undefined;
-    background?: "none" | "with" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-/**
- * Tag component for displaying labels, categories, status indicators, and badges
- *
- * The Tag component is a versatile labeling element that supports multiple visual variants
- * for different use cases. It provides semantic color options, flexible sizing, and
- * customizable styling options for borders and backgrounds.
- *
- * ## Features
- * - **Semantic Colors**: Success, error, warning, neutral, and text color themes
- * - **Flexible Sizing**: Five size variants from extra small to extra large
- * - **Border Radius Options**: Eight rounding options from none to fully rounded
- * - **Border Control**: Optional borders for enhanced visual separation
- * - **Background Control**: Configurable background styling
- * - **Accessibility**: Proper HTML semantics and keyboard navigation support
- *
- * ## Use Cases
- * - **Status Indicators**: Show completion, error, or pending states
- * - **Category Labels**: Organize and categorize content
- * - **Badges**: Display counts, notifications, or achievements
- * - **Keywords**: Tag content with relevant keywords or topics
- * - **Metadata**: Show additional information like dates, authors, or types
- *
- * ## Design Principles
- * - Maintains readability across all size and color combinations
- * - Uses backdrop blur effect for subtle transparency
- * - Follows consistent spacing and typography scales
- * - Provides sufficient color contrast for accessibility
- *
- * @param {TagProps} props - The properties for the Tag component
- * @returns {JSX.Element} The rendered tag element
- *
- * @example
- * ```tsx
- * // Basic status tags
- * <Tag color={TagColor.SUCCESS}>Completed</Tag>
- * <Tag color={TagColor.ERROR}>Failed</Tag>
- * <Tag color={TagColor.WARNING}>In Progress</Tag>
- *
- * // Category tags with borders
- * <Tag color={TagColor.NEUTRAL} border={TagBorder.WITH}>
- *   Technology
- * </Tag>
- * <Tag color={TagColor.TEXT} border={TagBorder.WITH}>
- *   Design
- * </Tag>
- *
- * // Size variations for hierarchy
- * <div className="flex items-center gap-2">
- *   <Tag size={TagSize.XS} color={TagColor.NEUTRAL}>Minor</Tag>
- *   <Tag size={TagSize.SM} color={TagColor.TEXT}>Standard</Tag>
- *   <Tag size={TagSize.LG} color={TagColor.SUCCESS}>Important</Tag>
- * </div>
- *
- * // Rounded variations
- * <div className="flex gap-2">
- *   <Tag roundedSize={TagRoundedSize.NONE}>Sharp</Tag>
- *   <Tag roundedSize={TagRoundedSize.MD}>Rounded</Tag>
- *   <Tag roundedSize={TagRoundedSize.FULL}>Pill</Tag>
- * </div>
- *
- * // Custom styled tag
- * <Tag
- *   color={TagColor.WARNING}
- *   size={TagSize.LG}
- *   border={TagBorder.WITH}
- *   roundedSize={TagRoundedSize.LG}
- *   className="font-bold uppercase tracking-wide"
- * >
- *   Custom Style
- * </Tag>
- *
- * // Interactive tags with click handlers
- * <Tag
- *   color={TagColor.SUCCESS}
- *   onClick={() => console.log('Tag clicked')}
- *   className="cursor-pointer hover:opacity-80 transition-opacity"
- * >
- *   Clickable Tag
- * </Tag>
- * ```
- *
- * @see {@link TagColor} - Available color theme options
- * @see {@link TagSize} - Available size variants
- * @see {@link TagRoundedSize} - Available border radius options
- * @see {@link TagBorder} - Border visibility options
- * @see {@link TagBackground} - Background styling options
- */
-export declare const Tag: FC<TagProps>;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Tag/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,KAAK,QAAQ,GAAG,iBAAiB,CAAC,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC,GACvE,cAAc,CAAC,cAAc,CAAC,CAAC;AAEjC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,oBAAY,cAAc;IACxB,IAAI,SAAS;IACb,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,GAAG,QAAQ;IACX,IAAI,QAAQ;IACZ,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,oBAAY,QAAQ;IAClB,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,oBAAY,OAAO;IACjB,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;CACV;AAED;;;;;;;;;;;;;;GAcG;AACH,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;GAcG;AACH,oBAAY,aAAa;IACvB,IAAI,SAAS;IACb,IAAI,SAAS;CACd;AAED,QAAA,MAAM,iBAAiB;;;;;;8EA0CrB,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;AACH,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,QAAQ,CAyB5B,CAAC"}