@intlayer/design-system 8.9.1 → 8.9.3

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"SmartTable.mjs","names":[],"sources":["../../../../src/components/Table/SmartTable.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  type FC,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\nimport { ExpandButton } from './ExpandButton';\nimport type { TableProps } from './Table';\nimport { Table } from './Table';\nimport { useTableWidths } from './useTableWidths';\n\n/**\n * Properties for the SmartTable component\n *\n * @interface SmartTableProps\n * @extends {TableProps}\n *\n * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {boolean} [displayModal] - Whether the table should be able to expand into a modal\n */\ntype SmartTableProps = TableProps & {\n  isRollable?: boolean;\n  displayModal?: boolean;\n};\n\n/**\n * Table component that provides an enhanced table experience with modal expansion and collapsible content\n *\n * The Table component wraps a standard HTML table element with additional functionality:\n * - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal\n * - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving\n * - **Responsive Design**: Handles large tables gracefully with modal overflow\n * - **Sticky Controls**: Table controls remain accessible even when scrolling\n *\n * ## Features\n * - **Modal View**: Full-screen modal for better viewing of large tables\n * - **Expand/Collapse**: Optional collapsible wrapper to save space\n * - **Responsive**: Handles overflow and responsive behavior automatically\n * - **Accessibility**: Maintains proper table semantics and keyboard navigation\n * - **Customizable**: Supports all standard HTML table attributes and styling\n *\n * ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n *\n * @param {SmartTableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n *\n * @example\n * ```tsx\n * // Simple data table\n * <SmartTable>\n *   <thead>\n *     <tr>\n *       <th scope=\"col\">Name</th>\n *       <th scope=\"col\">Email</th>\n *       <th scope=\"col\">Status</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>John Doe</td>\n *       <td>john@example.com</td>\n *       <td>\n *         <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n *           Active\n *         </span>\n *       </td>\n *     </tr>\n *     <tr>\n *       <td>Jane Smith</td>\n *       <td>jane@example.com</td>\n *       <td>\n *         <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n *           Pending\n *         </span>\n *       </td>\n *     </tr>\n *   </tbody>\n * </SmartTable>\n *\n * // Large collapsible table with custom styling\n * <SmartTable\n *   isRollable\n *   className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n *   <thead className=\"bg-gray-50\">\n *     <tr>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Product ID\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Name\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Category\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Price\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Stock\n *       </th>\n *     </tr>\n *   </thead>\n *   <tbody className=\"bg-white divide-y divide-gray-200\">\n *     {products.map((product) => (\n *       <tr key={product.id} className=\"hover:bg-gray-50\">\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n *           #{product.id}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n *           {product.name}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n *           {product.category}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n *           ${product.price.toFixed(2)}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n *           {product.stock} units\n *         </td>\n *       </tr>\n *     ))}\n *   </tbody>\n * </SmartTable>\n *\n * // Financial data table with formatted numbers\n * <SmartTable className=\"w-full border-collapse\">\n *   <thead>\n *     <tr className=\"border-b-2 border-gray-300\">\n *       <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr className=\"border-b border-gray-200\">\n *       <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n *       <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n *     </tr>\n *     <tr className=\"border-b border-gray-200\">\n *       <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n *       <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n *     </tr>\n *   </tbody>\n * </SmartTable>\n * ```\n *\n * @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const SmartTable: FC<SmartTableProps> = ({\n  className,\n  isRollable = false,\n  displayModal,\n  isInteractive,\n  onClick,\n  ...props\n}) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [highlightedRowIndex, setHighlightedRowIndex] = useState<number | null>(\n    null\n  );\n\n  const tableRef = useRef<HTMLTableElement>(null);\n  const modalTableRef = useRef<HTMLTableElement>(null);\n\n  useTableWidths(tableRef, modalTableRef, [props.children, isModalOpen]);\n\n  useEffect(() => {\n    if (isModalOpen && highlightedRowIndex !== null && modalTableRef.current) {\n      const row = modalTableRef.current.rows[highlightedRowIndex];\n\n      if (row) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'center' });\n\n        row.classList.add('bg-neutral/40', 'dark:bg-neutral-dark/40');\n        row.style.transition = 'background-color 0.3s ease-in-out';\n      }\n    }\n  }, [isModalOpen, highlightedRowIndex]);\n\n  useEffect(() => {\n    if (!isModalOpen) {\n      setHighlightedRowIndex(null);\n    }\n  }, [isModalOpen]);\n\n  const handleTableClick = (e: React.MouseEvent<HTMLTableElement>) => {\n    if (displayModal) {\n      const target = e.target as HTMLElement;\n      const tr = target.closest('tr');\n\n      if (tr?.closest('tbody')) {\n        setHighlightedRowIndex(tr.rowIndex);\n        setIsModalOpen(true);\n      }\n    }\n    onClick?.(e);\n  };\n\n  return (\n    <div className=\"group relative\">\n      {displayModal && <ExpandButton setIsModalOpen={setIsModalOpen} />}\n\n      <ExpandCollapse\n        isRollable={isRollable}\n        className=\"max-w-full overflow-x-auto rounded-2xl bg-background text-left [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\"\n      >\n        <Table\n          ref={tableRef}\n          className={className}\n          isInteractive={isInteractive ?? displayModal}\n          onClick={handleTableClick}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              handleTableClick(\n                e as unknown as React.MouseEvent<HTMLTableElement>\n              );\n            }\n          }}\n          {...props}\n        />\n      </ExpandCollapse>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        size={ModalSize.XL}\n        hasCloseButton\n        isScrollable\n      >\n        {isModalOpen ? (\n          <div className=\"grid\">\n            <Table\n              ref={modalTableRef}\n              className={cn('min-w-full max-w-full text-left', className)}\n              isInteractive={isInteractive}\n              {...props}\n            />\n          </div>\n        ) : (\n          <></>\n        )}\n      </Modal>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuKA,MAAa,cAAmC,EAC9C,WACA,aAAa,OACb,cACA,eACA,SACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,KACD;CAED,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,gBAAgB,OAAyB,KAAK;AAEpD,gBAAe,UAAU,eAAe,CAAC,MAAM,UAAU,YAAY,CAAC;AAEtE,iBAAgB;AACd,MAAI,eAAe,wBAAwB,QAAQ,cAAc,SAAS;GACxE,MAAM,MAAM,cAAc,QAAQ,KAAK;AAEvC,OAAI,KAAK;AACP,QAAI,eAAe;KAAE,UAAU;KAAU,OAAO;KAAU,CAAC;AAE3D,QAAI,UAAU,IAAI,iBAAiB,0BAA0B;AAC7D,QAAI,MAAM,aAAa;;;IAG1B,CAAC,aAAa,oBAAoB,CAAC;AAEtC,iBAAgB;AACd,MAAI,CAAC,YACH,wBAAuB,KAAK;IAE7B,CAAC,YAAY,CAAC;CAEjB,MAAM,oBAAoB,MAA0C;AAClE,MAAI,cAAc;GAEhB,MAAM,KADS,EAAE,OACC,QAAQ,KAAK;AAE/B,OAAI,IAAI,QAAQ,QAAQ,EAAE;AACxB,2BAAuB,GAAG,SAAS;AACnC,mBAAe,KAAK;;;AAGxB,YAAU,EAAE;;AAGd,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBAAgB,oBAAC,cAAD,EAA8B,gBAAkB;GAEjE,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,OAAD;KACE,KAAK;KACM;KACX,eAAe,iBAAiB;KAChC,SAAS;KACT,YAAY,MAAM;AAChB,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACjC,kBACE,EACD;;KAGL,GAAI;KACJ;IACa;GAEjB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC;IACA;IACA;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MACE,KAAK;MACL,WAAW,GAAG,mCAAmC,UAAU;MAC5C;MACf,GAAI;MACJ;KACE,IAEN,kCAAK;IAED;GACJ"}
+{"version":3,"file":"SmartTable.mjs","names":[],"sources":["../../../../src/components/Table/SmartTable.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  type FC,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\nimport { ExpandButton } from './ExpandButton';\nimport type { TableProps } from './Table';\nimport { Table } from './Table';\nimport { useTableWidths } from './useTableWidths';\n\n/**\n * Properties for the SmartTable component\n *\n * @interface SmartTableProps\n * @extends {TableProps}\n *\n * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {boolean} [displayModal] - Whether the table should be able to expand into a modal\n */\ntype SmartTableProps = TableProps & {\n  isRollable?: boolean;\n  displayModal?: boolean;\n};\n\n/**\n * Table component that provides an enhanced table experience with modal expansion and collapsible content\n *\n * The Table component wraps a standard HTML table element with additional functionality:\n * - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal\n * - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving\n * - **Responsive Design**: Handles large tables gracefully with modal overflow\n * - **Sticky Controls**: Table controls remain accessible even when scrolling\n *\n * ## Features\n * - **Modal View**: Full-screen modal for better viewing of large tables\n * - **Expand/Collapse**: Optional collapsible wrapper to save space\n * - **Responsive**: Handles overflow and responsive behavior automatically\n * - **Accessibility**: Maintains proper table semantics and keyboard navigation\n * - **Customizable**: Supports all standard HTML table attributes and styling\n *\n * ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n *\n * @param {SmartTableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n *\n * @example\n * ```tsx\n * // Simple data table\n * <SmartTable>\n *   <thead>\n *     <tr>\n *       <th scope=\"col\">Name</th>\n *       <th scope=\"col\">Email</th>\n *       <th scope=\"col\">Status</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>John Doe</td>\n *       <td>john@example.com</td>\n *       <td>\n *         <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n *           Active\n *         </span>\n *       </td>\n *     </tr>\n *     <tr>\n *       <td>Jane Smith</td>\n *       <td>jane@example.com</td>\n *       <td>\n *         <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n *           Pending\n *         </span>\n *       </td>\n *     </tr>\n *   </tbody>\n * </SmartTable>\n *\n * // Large collapsible table with custom styling\n * <SmartTable\n *   isRollable\n *   className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n *   <thead className=\"bg-gray-50\">\n *     <tr>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Product ID\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Name\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Category\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Price\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Stock\n *       </th>\n *     </tr>\n *   </thead>\n *   <tbody className=\"bg-white divide-y divide-gray-200\">\n *     {products.map((product) => (\n *       <tr key={product.id} className=\"hover:bg-gray-50\">\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n *           #{product.id}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n *           {product.name}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n *           {product.category}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n *           ${product.price.toFixed(2)}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n *           {product.stock} units\n *         </td>\n *       </tr>\n *     ))}\n *   </tbody>\n * </SmartTable>\n *\n * // Financial data table with formatted numbers\n * <SmartTable className=\"w-full border-collapse\">\n *   <thead>\n *     <tr className=\"border-b-2 border-gray-300\">\n *       <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr className=\"border-b border-gray-200\">\n *       <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n *       <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n *     </tr>\n *     <tr className=\"border-b border-gray-200\">\n *       <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n *       <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n *     </tr>\n *   </tbody>\n * </SmartTable>\n * ```\n *\n * @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const SmartTable: FC<SmartTableProps> = ({\n  className,\n  isRollable = false,\n  displayModal,\n  isInteractive,\n  onClick,\n  ...props\n}) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [highlightedRowIndex, setHighlightedRowIndex] = useState<number | null>(\n    null\n  );\n\n  const tableRef = useRef<HTMLTableElement>(null);\n  const modalTableRef = useRef<HTMLTableElement>(null);\n\n  useTableWidths(tableRef, modalTableRef, [props.children, isModalOpen]);\n\n  useEffect(() => {\n    if (isModalOpen && highlightedRowIndex !== null && modalTableRef.current) {\n      const row = modalTableRef.current.rows[highlightedRowIndex];\n\n      if (row) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'center' });\n\n        row.classList.add('bg-neutral/40', 'dark:bg-neutral-dark/40');\n        row.style.transition = 'background-color 0.3s ease-in-out';\n      }\n    }\n  }, [isModalOpen, highlightedRowIndex]);\n\n  useEffect(() => {\n    if (!isModalOpen) {\n      setHighlightedRowIndex(null);\n    }\n  }, [isModalOpen]);\n\n  const handleTableClick = (e: React.MouseEvent<HTMLTableElement>) => {\n    if (displayModal) {\n      const target = e.target as HTMLElement;\n      const tr = target.closest('tr');\n\n      if (tr?.closest('tbody')) {\n        setHighlightedRowIndex(tr.rowIndex);\n        setIsModalOpen(true);\n      }\n    }\n    onClick?.(e);\n  };\n\n  return (\n    <div className=\"group relative\">\n      {displayModal && <ExpandButton setIsModalOpen={setIsModalOpen} />}\n\n      <ExpandCollapse\n        isRollable={isRollable}\n        className=\"max-w-full overflow-x-auto rounded-2xl bg-background text-left [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\"\n      >\n        <Table\n          ref={tableRef}\n          className={className}\n          isInteractive={isInteractive ?? displayModal}\n          onClick={handleTableClick}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              handleTableClick(\n                e as unknown as React.MouseEvent<HTMLTableElement>\n              );\n            }\n          }}\n          {...props}\n        />\n      </ExpandCollapse>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        size={ModalSize.XL}\n        hasCloseButton\n        isScrollable\n      >\n        {isModalOpen ? (\n          <div className=\"grid\">\n            <Table\n              ref={modalTableRef}\n              className={cn('min-w-full max-w-full text-left', className)}\n              isInteractive={isInteractive}\n              {...props}\n            />\n          </div>\n        ) : (\n          <></>\n        )}\n      </Modal>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuKA,MAAa,cAAmC,EAC9C,WACA,aAAa,OACb,cACA,eACA,SACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,KACD;CAED,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,gBAAgB,OAAyB,KAAK;CAEpD,eAAe,UAAU,eAAe,CAAC,MAAM,UAAU,YAAY,CAAC;CAEtE,gBAAgB;EACd,IAAI,eAAe,wBAAwB,QAAQ,cAAc,SAAS;GACxE,MAAM,MAAM,cAAc,QAAQ,KAAK;GAEvC,IAAI,KAAK;IACP,IAAI,eAAe;KAAE,UAAU;KAAU,OAAO;KAAU,CAAC;IAE3D,IAAI,UAAU,IAAI,iBAAiB,0BAA0B;IAC7D,IAAI,MAAM,aAAa;;;IAG1B,CAAC,aAAa,oBAAoB,CAAC;CAEtC,gBAAgB;EACd,IAAI,CAAC,aACH,uBAAuB,KAAK;IAE7B,CAAC,YAAY,CAAC;CAEjB,MAAM,oBAAoB,MAA0C;EAClE,IAAI,cAAc;GAEhB,MAAM,KADS,EAAE,OACC,QAAQ,KAAK;GAE/B,IAAI,IAAI,QAAQ,QAAQ,EAAE;IACxB,uBAAuB,GAAG,SAAS;IACnC,eAAe,KAAK;;;EAGxB,UAAU,EAAE;;CAGd,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBAAgB,oBAAC,cAAD,EAA8B,gBAAkB;GAEjE,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,EACD;;KAGL,GAAI;KACJ;IACa;GAEjB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC;IACA;IACA;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,OAAD;MACE,KAAK;MACL,WAAW,GAAG,mCAAmC,UAAU;MAC5C;MACf,GAAI;MACJ;KACE,IAEN,kCAAK;IAED;GACJ"}

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

@@ -0,0 +1,24 @@
+import { cn } from "../../utils/cn.mjs";
+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),
+	...props
+});
+const Tr = ({ className, ...props }) => /* @__PURE__ */ jsx("tr", {
+	className: cn("hover:bg-neutral/10", className),
+	...props
+});
+const Td = ({ className, ...props }) => /* @__PURE__ */ jsx("td", {
+	className: cn("border border-neutral/20 border-b border-solid p-4", className),
+	...props
+});
+const Hr = ({ className, ...props }) => /* @__PURE__ */ jsx("hr", {
+	className: cn("mx-6 mt-16 text-neutral", className),
+	...props
+});
+
+//#endregion
+export { Hr, Td, Th, Tr };
+//# sourceMappingURL=TableElements.mjs.map

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

@@ -0,0 +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 className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n);\n"],"mappings":";;;;AAGA,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GACT,oEACA,UACD;CACD,GAAI;CACJ;AAGJ,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CAAI,WAAW,GAAG,uBAAuB,UAAU;CAAE,GAAI;CAAS;AAGpE,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CACE,WAAW,GACT,sDACA,UACD;CACD,GAAI;CACJ;AAGJ,MAAa,MAAM,EAAE,WAAW,GAAG,YACjC,oBAAC,MAAD;CAAI,WAAW,GAAG,2BAA2B,UAAU;CAAE,GAAI;CAAS"}

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

@@ -1,4 +1,5 @@
 import { Table } from "./Table.mjs";
 import { SmartTable } from "./SmartTable.mjs";
+import { Hr, Td, Th, Tr } from "./TableElements.mjs";
 
-export { SmartTable, Table };
+export { Hr, SmartTable, Table, Td, Th, Tr };

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

@@ -1 +1 @@
-{"version":3,"file":"useTableWidths.mjs","names":[],"sources":["../../../../src/components/Table/useTableWidths.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\n// ~0.55rem per character (mid-point for proportional fonts)\nconst CHAR_WIDTH_REM = 0.55;\nconst MIN_WIDTH_REM = 5; // ~80px at 16px base\nconst MAX_WIDTH_REM = 30; // ~480px at 16px base\n\nexport const useTableWidths = (\n  tableRef: RefObject<HTMLTableElement | null>,\n  modalTableRef: RefObject<HTMLTableElement | null>,\n  dependencies: any[]\n) => {\n  useEffect(() => {\n    if (!tableRef.current) return;\n\n    // Calculate the maximum character length per column from the main table\n    const colLengths: number[] = [];\n    Array.from(tableRef.current.querySelectorAll('tr')).forEach((row) => {\n      Array.from(row.children).forEach((cell, index) => {\n        const len = cell.textContent?.trim().length ?? 0;\n        if (colLengths[index] === undefined || len > colLengths[index]) {\n          colLengths[index] = len;\n        }\n      });\n    });\n\n    const applyToTable = (table: HTMLTableElement) => {\n      const rows = Array.from(table.querySelectorAll('tr'));\n      if (rows.length === 0) return;\n\n      const applyColStyle = (el: HTMLElement, index: number) => {\n        const minRem = Math.min(\n          MAX_WIDTH_REM,\n          Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM)\n        );\n        el.style.minWidth = `${minRem}rem`;\n        el.style.maxWidth = `${MAX_WIDTH_REM}rem`;\n      };\n\n      table.querySelectorAll('th').forEach((th, index) => {\n        applyColStyle(th, index);\n      });\n      rows.forEach((row) => {\n        row.querySelectorAll('td').forEach((td, index) => {\n          applyColStyle(td, index);\n        });\n      });\n    };\n\n    applyToTable(tableRef.current);\n\n    if (modalTableRef.current) applyToTable(modalTableRef.current);\n  }, dependencies);\n};\n"],"mappings":";;;AAGA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AAEtB,MAAa,kBACX,UACA,eACA,iBACG;AACH,iBAAgB;AACd,MAAI,CAAC,SAAS,QAAS;EAGvB,MAAM,aAAuB,EAAE;AAC/B,QAAM,KAAK,SAAS,QAAQ,iBAAiB,KAAK,CAAC,CAAC,SAAS,QAAQ;AACnE,SAAM,KAAK,IAAI,SAAS,CAAC,SAAS,MAAM,UAAU;IAChD,MAAM,MAAM,KAAK,aAAa,MAAM,CAAC,UAAU;AAC/C,QAAI,WAAW,WAAW,UAAa,MAAM,WAAW,OACtD,YAAW,SAAS;KAEtB;IACF;EAEF,MAAM,gBAAgB,UAA4B;GAChD,MAAM,OAAO,MAAM,KAAK,MAAM,iBAAiB,KAAK,CAAC;AACrD,OAAI,KAAK,WAAW,EAAG;GAEvB,MAAM,iBAAiB,IAAiB,UAAkB;IACxD,MAAM,SAAS,KAAK,IAClB,eACA,KAAK,IAAI,gBAAgB,WAAW,UAAU,KAAK,eAAe,CACnE;AACD,OAAG,MAAM,WAAW,GAAG,OAAO;AAC9B,OAAG,MAAM,WAAW,GAAG,cAAc;;AAGvC,SAAM,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAClD,kBAAc,IAAI,MAAM;KACxB;AACF,QAAK,SAAS,QAAQ;AACpB,QAAI,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAChD,mBAAc,IAAI,MAAM;MACxB;KACF;;AAGJ,eAAa,SAAS,QAAQ;AAE9B,MAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;IAC7D,aAAa"}
+{"version":3,"file":"useTableWidths.mjs","names":[],"sources":["../../../../src/components/Table/useTableWidths.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\n// ~0.55rem per character (mid-point for proportional fonts)\nconst CHAR_WIDTH_REM = 0.55;\nconst MIN_WIDTH_REM = 5; // ~80px at 16px base\nconst MAX_WIDTH_REM = 30; // ~480px at 16px base\n\nexport const useTableWidths = (\n  tableRef: RefObject<HTMLTableElement | null>,\n  modalTableRef: RefObject<HTMLTableElement | null>,\n  dependencies: any[]\n) => {\n  useEffect(() => {\n    if (!tableRef.current) return;\n\n    // Calculate the maximum character length per column from the main table\n    const colLengths: number[] = [];\n    Array.from(tableRef.current.querySelectorAll('tr')).forEach((row) => {\n      Array.from(row.children).forEach((cell, index) => {\n        const len = cell.textContent?.trim().length ?? 0;\n        if (colLengths[index] === undefined || len > colLengths[index]) {\n          colLengths[index] = len;\n        }\n      });\n    });\n\n    const applyToTable = (table: HTMLTableElement) => {\n      const rows = Array.from(table.querySelectorAll('tr'));\n      if (rows.length === 0) return;\n\n      const applyColStyle = (el: HTMLElement, index: number) => {\n        const minRem = Math.min(\n          MAX_WIDTH_REM,\n          Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM)\n        );\n        el.style.minWidth = `${minRem}rem`;\n        el.style.maxWidth = `${MAX_WIDTH_REM}rem`;\n      };\n\n      table.querySelectorAll('th').forEach((th, index) => {\n        applyColStyle(th, index);\n      });\n      rows.forEach((row) => {\n        row.querySelectorAll('td').forEach((td, index) => {\n          applyColStyle(td, index);\n        });\n      });\n    };\n\n    applyToTable(tableRef.current);\n\n    if (modalTableRef.current) applyToTable(modalTableRef.current);\n  }, dependencies);\n};\n"],"mappings":";;;AAGA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AAEtB,MAAa,kBACX,UACA,eACA,iBACG;CACH,gBAAgB;EACd,IAAI,CAAC,SAAS,SAAS;EAGvB,MAAM,aAAuB,EAAE;EAC/B,MAAM,KAAK,SAAS,QAAQ,iBAAiB,KAAK,CAAC,CAAC,SAAS,QAAQ;GACnE,MAAM,KAAK,IAAI,SAAS,CAAC,SAAS,MAAM,UAAU;IAChD,MAAM,MAAM,KAAK,aAAa,MAAM,CAAC,UAAU;IAC/C,IAAI,WAAW,WAAW,UAAa,MAAM,WAAW,QACtD,WAAW,SAAS;KAEtB;IACF;EAEF,MAAM,gBAAgB,UAA4B;GAChD,MAAM,OAAO,MAAM,KAAK,MAAM,iBAAiB,KAAK,CAAC;GACrD,IAAI,KAAK,WAAW,GAAG;GAEvB,MAAM,iBAAiB,IAAiB,UAAkB;IACxD,MAAM,SAAS,KAAK,IAClB,eACA,KAAK,IAAI,gBAAgB,WAAW,UAAU,KAAK,eAAe,CACnE;IACD,GAAG,MAAM,WAAW,GAAG,OAAO;IAC9B,GAAG,MAAM,WAAW,GAAG,cAAc;;GAGvC,MAAM,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;IAClD,cAAc,IAAI,MAAM;KACxB;GACF,KAAK,SAAS,QAAQ;IACpB,IAAI,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;KAChD,cAAc,IAAI,MAAM;MACxB;KACF;;EAGJ,aAAa,SAAS,QAAQ;EAE9B,IAAI,cAAc,SAAS,aAAa,cAAc,QAAQ;IAC7D,aAAa"}

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

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

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

@@ -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 { 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  [TechLogoName.Adonis]: dynamicLogo(\n    () => import('./logos/Adonis'),\n    'AdonisLogo'\n  ),\n  [TechLogoName.Angular]: dynamicLogo(\n    () => import('./logos/Angular'),\n    'AngularLogo'\n  ),\n  [TechLogoName.Astro]: dynamicLogo(() => import('./logos/Astro'), 'AstroLogo'),\n  [TechLogoName.Express]: dynamicLogo(\n    () => import('./logos/Express'),\n    'ExpressLogo'\n  ),\n  [TechLogoName.Fastify]: dynamicLogo(\n    () => import('./logos/Fastify'),\n    'FastifyLogo'\n  ),\n  [TechLogoName.Hono]: dynamicLogo(() => import('./logos/Hono'), 'HonoLogo'),\n  [TechLogoName.Lynx]: dynamicLogo(() => import('./logos/Lynx'), 'LynxLogo'),\n  [TechLogoName.NestJS]: dynamicLogo(\n    () => import('./logos/NestJS'),\n    'NestJSLogo'\n  ),\n  [TechLogoName.Nextjs]: dynamicLogo(\n    () => import('./logos/Nextjs'),\n    'NextJSLogo'\n  ),\n  [TechLogoName.Node]: dynamicLogo(() => import('./logos/Node'), 'NodejsLogo'),\n  [TechLogoName.Nuxt]: dynamicLogo(() => import('./logos/Nuxt'), 'NuxtLogo'),\n  [TechLogoName.Preact]: dynamicLogo(\n    () => import('./logos/Preact'),\n    'PreactLogo'\n  ),\n  [TechLogoName.React]: dynamicLogo(\n    () => import('./logos/Reactjs'),\n    'ReactLogo'\n  ),\n  [TechLogoName.Solid]: dynamicLogo(() => import('./logos/Solid'), 'SolidLogo'),\n  [TechLogoName.Svelte]: dynamicLogo(\n    () => import('./logos/Svelte'),\n    'SvelteLogo'\n  ),\n  [TechLogoName.Tanstack]: dynamicLogo(\n    () => import('./logos/Tanstack'),\n    'TanstackLogo'\n  ),\n  [TechLogoName.Vite]: dynamicLogo(() => import('./logos/Vitejs'), 'ViteLogo'),\n  [TechLogoName.Vue]: dynamicLogo(() => import('./logos/Vuejs'), 'VuejsLogo'),\n  [TechLogoName.Lit]: dynamicLogo(() => import('./logos/Lit'), 'LitLogo'),\n  [TechLogoName.Vanilla]: dynamicLogo(\n    () => import('./logos/Vanilla'),\n    'JavaScriptLogo'\n  ),\n  [TechLogoName.Anthropic]: dynamicLogo(\n    () => import('./logos/Anthropic'),\n    'AnthropicLogo'\n  ),\n  [TechLogoName.Claude]: dynamicLogo(\n    () => import('./logos/Claude'),\n    'ClaudeLogo'\n  ),\n  [TechLogoName.ChatGPT]: dynamicLogo(\n    () => import('./logos/ChatGPT'),\n    'ChatGPTLogo'\n  ),\n  [TechLogoName.DeepSeek]: dynamicLogo(\n    () => import('./logos/DeepSeek'),\n    'DeepSeekLogo'\n  ),\n  [TechLogoName.Gemini]: dynamicLogo(\n    () => import('./logos/Gemini'),\n    'GeminiLogo'\n  ),\n  [TechLogoName.GoogleAI]: dynamicLogo(\n    () => import('./logos/GoogleAI'),\n    'GoogleAILogo'\n  ),\n  [TechLogoName.Grok]: dynamicLogo(() => import('./logos/Grok'), 'GrokLogo'),\n  [TechLogoName.Mistral]: dynamicLogo(\n    () => import('./logos/Mistral'),\n    'MistralLogo'\n  ),\n  [TechLogoName.Ollama]: dynamicLogo(\n    () => import('./logos/Ollama'),\n    'OllamaLogo'\n  ),\n  [TechLogoName.OpenAI]: dynamicLogo(\n    () => import('./logos/OpenAI'),\n    'OpenAILogo'\n  ),\n  [TechLogoName.Perplexity]: dynamicLogo(\n    () => import('./logos/Perplexity'),\n    'PerplexityLogo'\n  ),\n  [TechLogoName.GitHub]: dynamicLogo(\n    () => import('./logos/GitHub'),\n    'GitHubLogo'\n  ),\n  [TechLogoName.GitLab]: dynamicLogo(\n    () => import('./logos/GitLab'),\n    'GitLabLogo'\n  ),\n  [TechLogoName.Bitbucket]: dynamicLogo(\n    () => import('./logos/Bitbucket'),\n    'BitbucketLogo'\n  ),\n  [TechLogoName.Google]: dynamicLogo(\n    () => import('./logos/Google'),\n    'GoogleLogo'\n  ),\n  [TechLogoName.LinkedIn]: dynamicLogo(\n    () => import('./logos/LinkedIn'),\n    'LinkedInLogo'\n  ),\n};\n\nexport const TechLogo: FC<TechLogoProps> = ({\n  name,\n  ...props\n}): JSX.Element => {\n  const LazyLogo = logoRecord[name];\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;AAIf,QAAO,EAAE,UAFK,MADO,UAAU,EACV,aAEI;EACzB;AAEJ,MAAM,aAAmE;aAChD,kBACf,OAAO,uBACb,aACD;cACuB,kBAChB,OAAO,wBACb,cACD;YACqB,kBAAkB,OAAO,sBAAkB,YAAY;cACrD,kBAChB,OAAO,wBACb,cACD;cACuB,kBAChB,OAAO,wBACb,cACD;WACoB,kBAAkB,OAAO,qBAAiB,WAAW;WACrD,kBAAkB,OAAO,qBAAiB,WAAW;aACnD,kBACf,OAAO,uBACb,aACD;aACsB,kBACf,OAAO,uBACb,aACD;WACoB,kBAAkB,OAAO,qBAAiB,aAAa;WACvD,kBAAkB,OAAO,qBAAiB,WAAW;aACnD,kBACf,OAAO,uBACb,aACD;YACqB,kBACd,OAAO,wBACb,YACD;YACqB,kBAAkB,OAAO,sBAAkB,YAAY;aACtD,kBACf,OAAO,uBACb,aACD;eACwB,kBACjB,OAAO,yBACb,eACD;WACoB,kBAAkB,OAAO,uBAAmB,WAAW;UACxD,kBAAkB,OAAO,sBAAkB,YAAY;UACvD,kBAAkB,OAAO,oBAAgB,UAAU;cAC/C,kBAChB,OAAO,wBACb,iBACD;gBACyB,kBAClB,OAAO,0BACb,gBACD;aACsB,kBACf,OAAO,uBACb,aACD;cACuB,kBAChB,OAAO,wBACb,cACD;eACwB,kBACjB,OAAO,yBACb,eACD;aACsB,kBACf,OAAO,uBACb,aACD;eACwB,kBACjB,OAAO,yBACb,eACD;WACoB,kBAAkB,OAAO,qBAAiB,WAAW;cAClD,kBAChB,OAAO,wBACb,cACD;aACsB,kBACf,OAAO,uBACb,aACD;aACsB,kBACf,OAAO,uBACb,aACD;iBAC0B,kBACnB,OAAO,2BACb,iBACD;aACsB,kBACf,OAAO,uBACb,aACD;aACsB,kBACf,OAAO,uBACb,aACD;gBACyB,kBAClB,OAAO,0BACb,gBACD;aACsB,kBACf,OAAO,uBACb,aACD;eACwB,kBACjB,OAAO,yBACb,eACD;CACF;AAED,MAAa,YAA+B,EAC1C,MACA,GAAG,YACc;CACjB,MAAM,WAAW,WAAW;AAE5B,KAAI,CAAC,SACH,QAAO,kCAAK;AAGd,QACE,oBAAC,UAAD;EACE,UACE,oBAAC,OAAD,EAAK,WAAW,GAAG,gCAAgC,MAAM,UAAU,EAAI;YAGzE,oBAAC,UAAD,EAAU,GAAK,OAAiB;EACvB"}
+{"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 { 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  [TechLogoName.Adonis]: dynamicLogo(\n    () => import('./logos/Adonis'),\n    'AdonisLogo'\n  ),\n  [TechLogoName.Angular]: dynamicLogo(\n    () => import('./logos/Angular'),\n    'AngularLogo'\n  ),\n  [TechLogoName.Astro]: dynamicLogo(() => import('./logos/Astro'), 'AstroLogo'),\n  [TechLogoName.Express]: dynamicLogo(\n    () => import('./logos/Express'),\n    'ExpressLogo'\n  ),\n  [TechLogoName.Fastify]: dynamicLogo(\n    () => import('./logos/Fastify'),\n    'FastifyLogo'\n  ),\n  [TechLogoName.Hono]: dynamicLogo(() => import('./logos/Hono'), 'HonoLogo'),\n  [TechLogoName.Lynx]: dynamicLogo(() => import('./logos/Lynx'), 'LynxLogo'),\n  [TechLogoName.NestJS]: dynamicLogo(\n    () => import('./logos/NestJS'),\n    'NestJSLogo'\n  ),\n  [TechLogoName.Nextjs]: dynamicLogo(\n    () => import('./logos/Nextjs'),\n    'NextJSLogo'\n  ),\n  [TechLogoName.Node]: dynamicLogo(() => import('./logos/Node'), 'NodejsLogo'),\n  [TechLogoName.Nuxt]: dynamicLogo(() => import('./logos/Nuxt'), 'NuxtLogo'),\n  [TechLogoName.Preact]: dynamicLogo(\n    () => import('./logos/Preact'),\n    'PreactLogo'\n  ),\n  [TechLogoName.React]: dynamicLogo(\n    () => import('./logos/Reactjs'),\n    'ReactLogo'\n  ),\n  [TechLogoName.Solid]: dynamicLogo(() => import('./logos/Solid'), 'SolidLogo'),\n  [TechLogoName.Svelte]: dynamicLogo(\n    () => import('./logos/Svelte'),\n    'SvelteLogo'\n  ),\n  [TechLogoName.Tanstack]: dynamicLogo(\n    () => import('./logos/Tanstack'),\n    'TanstackLogo'\n  ),\n  [TechLogoName.Vite]: dynamicLogo(() => import('./logos/Vitejs'), 'ViteLogo'),\n  [TechLogoName.Vue]: dynamicLogo(() => import('./logos/Vuejs'), 'VuejsLogo'),\n  [TechLogoName.Lit]: dynamicLogo(() => import('./logos/Lit'), 'LitLogo'),\n  [TechLogoName.Vanilla]: dynamicLogo(\n    () => import('./logos/Vanilla'),\n    'JavaScriptLogo'\n  ),\n  [TechLogoName.Anthropic]: dynamicLogo(\n    () => import('./logos/Anthropic'),\n    'AnthropicLogo'\n  ),\n  [TechLogoName.Claude]: dynamicLogo(\n    () => import('./logos/Claude'),\n    'ClaudeLogo'\n  ),\n  [TechLogoName.ChatGPT]: dynamicLogo(\n    () => import('./logos/ChatGPT'),\n    'ChatGPTLogo'\n  ),\n  [TechLogoName.DeepSeek]: dynamicLogo(\n    () => import('./logos/DeepSeek'),\n    'DeepSeekLogo'\n  ),\n  [TechLogoName.Gemini]: dynamicLogo(\n    () => import('./logos/Gemini'),\n    'GeminiLogo'\n  ),\n  [TechLogoName.GoogleAI]: dynamicLogo(\n    () => import('./logos/GoogleAI'),\n    'GoogleAILogo'\n  ),\n  [TechLogoName.Grok]: dynamicLogo(() => import('./logos/Grok'), 'GrokLogo'),\n  [TechLogoName.Mistral]: dynamicLogo(\n    () => import('./logos/Mistral'),\n    'MistralLogo'\n  ),\n  [TechLogoName.Ollama]: dynamicLogo(\n    () => import('./logos/Ollama'),\n    'OllamaLogo'\n  ),\n  [TechLogoName.OpenAI]: dynamicLogo(\n    () => import('./logos/OpenAI'),\n    'OpenAILogo'\n  ),\n  [TechLogoName.Perplexity]: dynamicLogo(\n    () => import('./logos/Perplexity'),\n    'PerplexityLogo'\n  ),\n  [TechLogoName.GitHub]: dynamicLogo(\n    () => import('./logos/GitHub'),\n    'GitHubLogo'\n  ),\n  [TechLogoName.GitLab]: dynamicLogo(\n    () => import('./logos/GitLab'),\n    'GitLabLogo'\n  ),\n  [TechLogoName.Bitbucket]: dynamicLogo(\n    () => import('./logos/Bitbucket'),\n    'BitbucketLogo'\n  ),\n  [TechLogoName.Google]: dynamicLogo(\n    () => import('./logos/Google'),\n    'GoogleLogo'\n  ),\n  [TechLogoName.LinkedIn]: dynamicLogo(\n    () => import('./logos/LinkedIn'),\n    'LinkedInLogo'\n  ),\n};\n\nexport const TechLogo: FC<TechLogoProps> = ({\n  name,\n  ...props\n}): JSX.Element => {\n  const LazyLogo = logoRecord[name];\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,UAAU,EACV,aAEI;EACzB;AAEJ,MAAM,aAAmE;aAChD,kBACf,OAAO,uBACb,aACD;cACuB,kBAChB,OAAO,wBACb,cACD;YACqB,kBAAkB,OAAO,sBAAkB,YAAY;cACrD,kBAChB,OAAO,wBACb,cACD;cACuB,kBAChB,OAAO,wBACb,cACD;WACoB,kBAAkB,OAAO,qBAAiB,WAAW;WACrD,kBAAkB,OAAO,qBAAiB,WAAW;aACnD,kBACf,OAAO,uBACb,aACD;aACsB,kBACf,OAAO,uBACb,aACD;WACoB,kBAAkB,OAAO,qBAAiB,aAAa;WACvD,kBAAkB,OAAO,qBAAiB,WAAW;aACnD,kBACf,OAAO,uBACb,aACD;YACqB,kBACd,OAAO,wBACb,YACD;YACqB,kBAAkB,OAAO,sBAAkB,YAAY;aACtD,kBACf,OAAO,uBACb,aACD;eACwB,kBACjB,OAAO,yBACb,eACD;WACoB,kBAAkB,OAAO,uBAAmB,WAAW;UACxD,kBAAkB,OAAO,sBAAkB,YAAY;UACvD,kBAAkB,OAAO,oBAAgB,UAAU;cAC/C,kBAChB,OAAO,wBACb,iBACD;gBACyB,kBAClB,OAAO,0BACb,gBACD;aACsB,kBACf,OAAO,uBACb,aACD;cACuB,kBAChB,OAAO,wBACb,cACD;eACwB,kBACjB,OAAO,yBACb,eACD;aACsB,kBACf,OAAO,uBACb,aACD;eACwB,kBACjB,OAAO,yBACb,eACD;WACoB,kBAAkB,OAAO,qBAAiB,WAAW;cAClD,kBAChB,OAAO,wBACb,cACD;aACsB,kBACf,OAAO,uBACb,aACD;aACsB,kBACf,OAAO,uBACb,aACD;iBAC0B,kBACnB,OAAO,2BACb,iBACD;aACsB,kBACf,OAAO,uBACb,aACD;aACsB,kBACf,OAAO,uBACb,aACD;gBACyB,kBAClB,OAAO,0BACb,gBACD;aACsB,kBACf,OAAO,uBACb,aACD;eACwB,kBACjB,OAAO,yBACb,eACD;CACF;AAED,MAAa,YAA+B,EAC1C,MACA,GAAG,YACc;CACjB,MAAM,WAAW,WAAW;CAE5B,IAAI,CAAC,UACH,OAAO,kCAAK;CAGd,OACE,oBAAC,UAAD;EACE,UACE,oBAAC,OAAD,EAAK,WAAW,GAAG,gCAAgC,MAAM,UAAU,EAAI;YAGzE,oBAAC,UAAD,EAAU,GAAK,OAAiB;EACvB"}

package/dist/esm/components/TechLogo/types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.mjs","names":[],"sources":["../../../../src/components/TechLogo/types.ts"],"sourcesContent":["export enum TechLogoName {\n  Adonis = 'adonis',\n  Angular = 'angular',\n  Astro = 'astro',\n  Express = 'express',\n  Fastify = 'fastify',\n  Hono = 'hono',\n  Lynx = 'lynx',\n  NestJS = 'nestjs',\n  Nextjs = 'nextjs',\n  Node = 'node',\n  Nuxt = 'nuxt',\n  Preact = 'preact',\n  React = 'react',\n  Solid = 'solid',\n  Svelte = 'svelte',\n  Tanstack = 'tanstack',\n  Vite = 'vite',\n  Vue = 'vue',\n  Lit = 'lit',\n  Vanilla = 'vanilla',\n  Anthropic = 'anthropic',\n  Claude = 'claude',\n  ChatGPT = 'chatgpt',\n  DeepSeek = 'deepseek',\n  Gemini = 'gemini',\n  GoogleAI = 'googleai',\n  Grok = 'grok',\n  Mistral = 'mistral',\n  Ollama = 'ollama',\n  OpenAI = 'openai',\n  Perplexity = 'perplexity',\n  GitHub = 'github',\n  GitLab = 'gitlab',\n  Bitbucket = 'bitbucket',\n  Google = 'google',\n  LinkedIn = 'linkedin',\n}\n"],"mappings":";AAAA,IAAY,eAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;KACD"}
+{"version":3,"file":"types.mjs","names":[],"sources":["../../../../src/components/TechLogo/types.ts"],"sourcesContent":["export enum TechLogoName {\n  Adonis = 'adonis',\n  Angular = 'angular',\n  Astro = 'astro',\n  Express = 'express',\n  Fastify = 'fastify',\n  Hono = 'hono',\n  Lynx = 'lynx',\n  NestJS = 'nestjs',\n  Nextjs = 'nextjs',\n  Node = 'node',\n  Nuxt = 'nuxt',\n  Preact = 'preact',\n  React = 'react',\n  Solid = 'solid',\n  Svelte = 'svelte',\n  Tanstack = 'tanstack',\n  Vite = 'vite',\n  Vue = 'vue',\n  Lit = 'lit',\n  Vanilla = 'vanilla',\n  Anthropic = 'anthropic',\n  Claude = 'claude',\n  ChatGPT = 'chatgpt',\n  DeepSeek = 'deepseek',\n  Gemini = 'gemini',\n  GoogleAI = 'googleai',\n  Grok = 'grok',\n  Mistral = 'mistral',\n  Ollama = 'ollama',\n  OpenAI = 'openai',\n  Perplexity = 'perplexity',\n  GitHub = 'github',\n  GitLab = 'gitlab',\n  Bitbucket = 'bitbucket',\n  Google = 'google',\n  LinkedIn = 'linkedin',\n}\n"],"mappings":";AAAA,IAAY,eAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;KACD"}

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

@@ -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-red-500\" />\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":"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"}
+{"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-red-500\" />\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":"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"}

package/dist/esm/components/TextArea/AutoSizeTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSizeTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { TextArea, type TextAreaProps } from './TextArea';\n\n/**\n * Props for the AutoSizedTextArea component.\n *\n * Extends TextAreaProps with auto-sizing functionality and row limitations.\n *\n * @example\n * ```tsx\n * // Auto-sizing textarea that grows with content\n * <AutoSizedTextArea\n *   placeholder=\"Start typing and watch it grow...\"\n *   autoSize={true}\n *   maxRows={10}\n * />\n *\n * // Limited height with scroll when exceeded\n * <AutoSizedTextArea\n *   value={longText}\n *   onChange={handleChange}\n *   autoSize={true}\n *   maxRows={5}\n *   className=\"max-h-[120px]\"\n * />\n *\n * // Disable auto-sizing for fixed height\n * <AutoSizedTextArea\n *   autoSize={false}\n *   rows={3}\n *   placeholder=\"Fixed height textarea\"\n * />\n * ```\n */\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  /** Whether to automatically adjust height based on content */\n  autoSize?: boolean;\n  /** Maximum number of rows before scrolling is enabled */\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\n/**\n * AutoSizedTextArea Component\n *\n * An enhanced textarea that automatically adjusts its height based on content,\n * providing a smooth user experience for variable-length text input.\n *\n * ## Features\n * - **Auto-Sizing**: Dynamically grows and shrinks based on content\n * - **Row Limits**: Configurable maximum rows before scrolling\n * - **Smooth Transitions**: Seamless height adjustments as user types\n * - **Scroll Management**: Automatic overflow handling when max height reached\n * - **Performance Optimized**: Efficient height calculations and updates\n *\n * ## Technical Details\n * - Line height: 24px with 12px padding\n * - Height calculation: `scrollHeight` vs `maxRows * lineHeight + padding`\n * - Resize: Disabled when auto-sizing is active for smooth experience\n * - Ref forwarding: Supports imperative access to textarea element\n *\n * ## Use Cases\n * - Chat message composition with dynamic sizing\n * - Comment forms that expand with content\n * - Note-taking interfaces with variable length\n * - Social media post creation\n * - Code snippet input with growth limits\n *\n * @example\n * ```tsx\n * // Chat-style auto-expanding textarea\n * const [message, setMessage] = useState('');\n *\n * <AutoSizedTextArea\n *   value={message}\n *   onChange={(e) => setMessage(e.target.value)}\n *   placeholder=\"Type your message...\"\n *   autoSize={true}\n *   maxRows={8}\n *   className=\"min-h-[40px]\"\n *   onKeyDown={(e) => {\n *     if (e.key === 'Enter' && !e.shiftKey) {\n *       e.preventDefault();\n *       sendMessage(message);\n *       setMessage('');\n *     }\n *   }}\n * />\n *\n * // Note-taking with generous height limits\n * <AutoSizedTextArea\n *   defaultValue={note.content}\n *   onChange={handleNoteChange}\n *   placeholder=\"Write your notes here...\"\n *   autoSize={true}\n *   maxRows={20}\n *   variant={InputVariant.DEFAULT}\n * />\n * ```\n */\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = () => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;\n  };\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = (el: HTMLTextAreaElement | null) => {\n    textAreaRef.current = el;\n    if (el) {\n      adjustHeight();\n    }\n  };\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn('overflow-y-auto', autoSize && 'resize-none', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAkDA,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DrB,MAAa,qBAAiD,EAC5D,WACA,WAAW,MACX,UACA,UAAU,KACV,KACA,GAAG,YACC;CACJ,MAAM,cAAc,OAAmC,KAAK;AAE5D,qBAAoB,WAAW,YAAY,QAAS;CAEpD,MAAM,qBAAqB;EACzB,MAAM,aAAa,YAAY;AAE/B,MAAI,CAAC,cAAc,CAAC,SAAU;EAE9B,MAAM,gBAAgB,WAAW;AAGjC,gBAAc,SAAS;EACvB,MAAM,eAAe,WAAW;EAChC,MAAM,YAAY,cAAc,UAAU;EAC1C,MAAM,YAAY,cAAc;AAGhC,gBAAc,SAAS,GAAG,KAAK,IAAI,KAAK,IAAI,cAAc,UAAU,EAAE,UAAU,CAAC;;AAGnF,iBAAgB;AACd,gBAAc;IACb;EAAC,MAAM;EAAO,MAAM;EAAc;EAAa,CAAC;CAEnD,MAAM,gBAAyD,MAAM;AACnE,aAAW,EAAE;AACb,gBAAc;;CAGhB,MAAM,UAAU,OAAmC;AACjD,cAAY,UAAU;AACtB,MAAI,GACF,eAAc;;AAIlB,QACE,oBAAC,UAAD;EACE,KAAK;EACL,UAAU;EACV,WAAW,GAAG,mBAAmB,YAAY,eAAe,UAAU;EACtE,GAAI;EACJ"}
+{"version":3,"file":"AutoSizeTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutoSizeTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { TextArea, type TextAreaProps } from './TextArea';\n\n/**\n * Props for the AutoSizedTextArea component.\n *\n * Extends TextAreaProps with auto-sizing functionality and row limitations.\n *\n * @example\n * ```tsx\n * // Auto-sizing textarea that grows with content\n * <AutoSizedTextArea\n *   placeholder=\"Start typing and watch it grow...\"\n *   autoSize={true}\n *   maxRows={10}\n * />\n *\n * // Limited height with scroll when exceeded\n * <AutoSizedTextArea\n *   value={longText}\n *   onChange={handleChange}\n *   autoSize={true}\n *   maxRows={5}\n *   className=\"max-h-[120px]\"\n * />\n *\n * // Disable auto-sizing for fixed height\n * <AutoSizedTextArea\n *   autoSize={false}\n *   rows={3}\n *   placeholder=\"Fixed height textarea\"\n * />\n * ```\n */\nexport type AutoSizedTextAreaProps = TextAreaProps & {\n  /** Whether to automatically adjust height based on content */\n  autoSize?: boolean;\n  /** Maximum number of rows before scrolling is enabled */\n  maxRows?: number;\n};\n\nconst LINE_HEIGHT = 24; // px\nconst LINE_PADDING = 12; // px\n\n/**\n * AutoSizedTextArea Component\n *\n * An enhanced textarea that automatically adjusts its height based on content,\n * providing a smooth user experience for variable-length text input.\n *\n * ## Features\n * - **Auto-Sizing**: Dynamically grows and shrinks based on content\n * - **Row Limits**: Configurable maximum rows before scrolling\n * - **Smooth Transitions**: Seamless height adjustments as user types\n * - **Scroll Management**: Automatic overflow handling when max height reached\n * - **Performance Optimized**: Efficient height calculations and updates\n *\n * ## Technical Details\n * - Line height: 24px with 12px padding\n * - Height calculation: `scrollHeight` vs `maxRows * lineHeight + padding`\n * - Resize: Disabled when auto-sizing is active for smooth experience\n * - Ref forwarding: Supports imperative access to textarea element\n *\n * ## Use Cases\n * - Chat message composition with dynamic sizing\n * - Comment forms that expand with content\n * - Note-taking interfaces with variable length\n * - Social media post creation\n * - Code snippet input with growth limits\n *\n * @example\n * ```tsx\n * // Chat-style auto-expanding textarea\n * const [message, setMessage] = useState('');\n *\n * <AutoSizedTextArea\n *   value={message}\n *   onChange={(e) => setMessage(e.target.value)}\n *   placeholder=\"Type your message...\"\n *   autoSize={true}\n *   maxRows={8}\n *   className=\"min-h-[40px]\"\n *   onKeyDown={(e) => {\n *     if (e.key === 'Enter' && !e.shiftKey) {\n *       e.preventDefault();\n *       sendMessage(message);\n *       setMessage('');\n *     }\n *   }}\n * />\n *\n * // Note-taking with generous height limits\n * <AutoSizedTextArea\n *   defaultValue={note.content}\n *   onChange={handleNoteChange}\n *   placeholder=\"Write your notes here...\"\n *   autoSize={true}\n *   maxRows={20}\n *   variant={InputVariant.DEFAULT}\n * />\n * ```\n */\nexport const AutoSizedTextArea: FC<AutoSizedTextAreaProps> = ({\n  className,\n  autoSize = true,\n  onChange,\n  maxRows = 999,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);\n\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const adjustHeight = () => {\n    const textAreaEl = textAreaRef.current;\n\n    if (!textAreaEl || !autoSize) return;\n\n    const textAreaStyle = textAreaEl.style;\n\n    // Reset height to get accurate scrollHeight\n    textAreaStyle.height = 'auto';\n    const scrollHeight = textAreaEl.scrollHeight;\n    const maxHeight = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const minHeight = LINE_HEIGHT + LINE_PADDING;\n\n    // Set the new height\n    textAreaStyle.height = `${Math.max(Math.min(scrollHeight, maxHeight), minHeight)}px`;\n  };\n\n  useEffect(() => {\n    adjustHeight();\n  }, [props.value, props.defaultValue, adjustHeight]);\n\n  const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n    onChange?.(e);\n    adjustHeight();\n  };\n\n  const setRef = (el: HTMLTextAreaElement | null) => {\n    textAreaRef.current = el;\n    if (el) {\n      adjustHeight();\n    }\n  };\n\n  return (\n    <TextArea\n      ref={setRef}\n      onChange={handleChange}\n      className={cn('overflow-y-auto', autoSize && 'resize-none', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;AAkDA,MAAM,cAAc;AACpB,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DrB,MAAa,qBAAiD,EAC5D,WACA,WAAW,MACX,UACA,UAAU,KACV,KACA,GAAG,YACC;CACJ,MAAM,cAAc,OAAmC,KAAK;CAE5D,oBAAoB,WAAW,YAAY,QAAS;CAEpD,MAAM,qBAAqB;EACzB,MAAM,aAAa,YAAY;EAE/B,IAAI,CAAC,cAAc,CAAC,UAAU;EAE9B,MAAM,gBAAgB,WAAW;EAGjC,cAAc,SAAS;EACvB,MAAM,eAAe,WAAW;EAChC,MAAM,YAAY,cAAc,UAAU;EAC1C,MAAM,YAAY,cAAc;EAGhC,cAAc,SAAS,GAAG,KAAK,IAAI,KAAK,IAAI,cAAc,UAAU,EAAE,UAAU,CAAC;;CAGnF,gBAAgB;EACd,cAAc;IACb;EAAC,MAAM;EAAO,MAAM;EAAc;EAAa,CAAC;CAEnD,MAAM,gBAAyD,MAAM;EACnE,WAAW,EAAE;EACb,cAAc;;CAGhB,MAAM,UAAU,OAAmC;EACjD,YAAY,UAAU;EACtB,IAAI,IACF,cAAc;;CAIlB,OACE,oBAAC,UAAD;EACE,KAAK;EACL,UAAU;EACV,WAAW,GAAG,mBAAmB,YAAY,eAAe,UAAU;EACtE,GAAI;EACJ"}

package/dist/esm/components/TextArea/AutocompleteTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEvent,\n  type FC,\n  type KeyboardEvent,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport type { AutoSizedTextAreaProps } from './AutoSizeTextArea';\nimport {\n  ContentEditableTextArea,\n  type ContentEditableTextAreaHandle,\n} from './ContentEditableTextArea';\n\n/**\n * Props for the AutocompleteTextArea component.\n *\n * Extends AutoSizedTextAreaProps with inline autocomplete functionality\n * using a contentEditable-based textarea.\n *\n * @example\n * ```tsx\n * <AutoCompleteTextarea\n *   placeholder=\"Start typing...\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={10}\n * />\n * ```\n */\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  /** Whether inline autocomplete ghost text is active */\n  isActive?: boolean;\n  /** Manual suggestion text to display as ghost text after the cursor */\n  suggestion?: string;\n};\n\n/**\n * AutoCompleteTextarea Component\n *\n * A textarea with inline autocomplete ghost text, built on a contentEditable div\n * instead of a native `<textarea>`. Ghost text (suggestions) is rendered inline\n * at the cursor position and can be accepted with the Tab key.\n *\n * The component wraps `ContentEditableTextArea` and manages suggestion state.\n * When `suggestion` prop is provided it is shown as ghost text at the end of the\n * current text. When `isActive` is false, ghost text is hidden.\n *\n * @example\n * ```tsx\n * <AutoCompleteTextarea\n *   value={content}\n *   onChange={handleChange}\n *   suggestion=\"suggested completion...\"\n *   isActive={true}\n *   autoSize={true}\n * />\n * ```\n */\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n  isActive = true,\n  suggestion: suggestionProp,\n  ...props\n}) => {\n  const defaultValue = String(props.value ?? props.defaultValue ?? '');\n  const [text, setText] = useState(defaultValue);\n  const [suggestion, setSuggestion] = useState('');\n  const editorRef = useRef<ContentEditableTextAreaHandle>(null);\n\n  useEffect(() => {\n    if (typeof props.value === 'undefined') return;\n    setText(String(props.value ?? props.defaultValue ?? ''));\n  }, [props.value, props.defaultValue]);\n\n  const acceptSuggestion = () => {\n    const active = suggestionProp ?? suggestion;\n    if (!active) return;\n\n    const cursor = editorRef.current?.getCursorOffset() ?? text.length;\n    const next = text.slice(0, cursor) + active + text.slice(cursor);\n    setText(next);\n    setSuggestion('');\n\n    setTimeout(() => {\n      editorRef.current?.focus();\n      editorRef.current?.setCursorAtOffset(cursor + active.length);\n    }, 0);\n  };\n\n  const activeGhost = isActive\n    ? (suggestionProp ?? (suggestion || undefined))\n    : undefined;\n  const textLines = text.split('\\n');\n  const activeLine = suggestionProp ? textLines.length - 1 : undefined;\n  const activeOffset = suggestionProp\n    ? (textLines[textLines.length - 1]?.length ?? 0)\n    : undefined;\n\n  return (\n    <ContentEditableTextArea\n      ref={editorRef}\n      value={text}\n      onChange={(val) => {\n        setText(val);\n        setSuggestion('');\n\n        if (props.onChange) {\n          const evt = {\n            target: { value: val },\n            currentTarget: { value: val },\n          } as ChangeEvent<HTMLTextAreaElement>;\n          props.onChange(evt);\n        }\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Tab' && (suggestionProp ?? suggestion)) {\n          e.preventDefault();\n          acceptSuggestion();\n        }\n        props.onKeyDown?.(e as unknown as KeyboardEvent<HTMLTextAreaElement>);\n      }}\n      ghostText={activeGhost}\n      ghostLine={activeLine}\n      ghostOffset={activeOffset}\n      placeholder={props.placeholder}\n      disabled={props.disabled}\n      autoSize={props.autoSize}\n      maxRows={props.maxRows}\n      minRows={props.rows}\n      variant={props.variant}\n      validationStyleEnabled={props.validationStyleEnabled}\n      className={props.className}\n      dir={props.dir as 'ltr' | 'rtl' | 'auto'}\n      aria-label={props['aria-label']}\n      aria-invalid={props['aria-invalid']}\n      aria-describedby={props['aria-describedby']}\n      data-testid={(props as Record<string, unknown>)['data-testid'] as string}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAa,wBAAuD,EAClE,WAAW,MACX,YAAY,gBACZ,GAAG,YACC;CAEJ,MAAM,CAAC,MAAM,WAAW,SADH,OAAO,MAAM,SAAS,MAAM,gBAAgB,GACpB,CAAC;CAC9C,MAAM,CAAC,YAAY,iBAAiB,SAAS,GAAG;CAChD,MAAM,YAAY,OAAsC,KAAK;AAE7D,iBAAgB;AACd,MAAI,OAAO,MAAM,UAAU,YAAa;AACxC,UAAQ,OAAO,MAAM,SAAS,MAAM,gBAAgB,GAAG,CAAC;IACvD,CAAC,MAAM,OAAO,MAAM,aAAa,CAAC;CAErC,MAAM,yBAAyB;EAC7B,MAAM,SAAS,kBAAkB;AACjC,MAAI,CAAC,OAAQ;EAEb,MAAM,SAAS,UAAU,SAAS,iBAAiB,IAAI,KAAK;AAE5D,UADa,KAAK,MAAM,GAAG,OAAO,GAAG,SAAS,KAAK,MAAM,OAAO,CACnD;AACb,gBAAc,GAAG;AAEjB,mBAAiB;AACf,aAAU,SAAS,OAAO;AAC1B,aAAU,SAAS,kBAAkB,SAAS,OAAO,OAAO;KAC3D,EAAE;;CAGP,MAAM,cAAc,WACf,mBAAmB,cAAc,UAClC;CACJ,MAAM,YAAY,KAAK,MAAM,KAAK;AAMlC,QACE,oBAAC,yBAAD;EACE,KAAK;EACL,OAAO;EACP,WAAW,QAAQ;AACjB,WAAQ,IAAI;AACZ,iBAAc,GAAG;AAEjB,OAAI,MAAM,UAAU;IAClB,MAAM,MAAM;KACV,QAAQ,EAAE,OAAO,KAAK;KACtB,eAAe,EAAE,OAAO,KAAK;KAC9B;AACD,UAAM,SAAS,IAAI;;;EAGvB,YAAY,MAAM;AAChB,OAAI,EAAE,QAAQ,UAAU,kBAAkB,aAAa;AACrD,MAAE,gBAAgB;AAClB,sBAAkB;;AAEpB,SAAM,YAAY,EAAmD;;EAEvE,WAAW;EACX,WA7Be,iBAAiB,UAAU,SAAS,IAAI;EA8BvD,aA7BiB,iBAChB,UAAU,UAAU,SAAS,IAAI,UAAU,IAC5C;EA4BA,aAAa,MAAM;EACnB,UAAU,MAAM;EAChB,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,SAAS,MAAM;EACf,SAAS,MAAM;EACf,wBAAwB,MAAM;EAC9B,WAAW,MAAM;EACjB,KAAK,MAAM;EACX,cAAY,MAAM;EAClB,gBAAc,MAAM;EACpB,oBAAkB,MAAM;EACxB,eAAc,MAAkC;EAChD"}
+{"version":3,"file":"AutocompleteTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/AutocompleteTextArea.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ChangeEvent,\n  type FC,\n  type KeyboardEvent,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport type { AutoSizedTextAreaProps } from './AutoSizeTextArea';\nimport {\n  ContentEditableTextArea,\n  type ContentEditableTextAreaHandle,\n} from './ContentEditableTextArea';\n\n/**\n * Props for the AutocompleteTextArea component.\n *\n * Extends AutoSizedTextAreaProps with inline autocomplete functionality\n * using a contentEditable-based textarea.\n *\n * @example\n * ```tsx\n * <AutoCompleteTextarea\n *   placeholder=\"Start typing...\"\n *   isActive={true}\n *   autoSize={true}\n *   maxRows={10}\n * />\n * ```\n */\nexport type AutocompleteTextAreaProps = AutoSizedTextAreaProps & {\n  /** Whether inline autocomplete ghost text is active */\n  isActive?: boolean;\n  /** Manual suggestion text to display as ghost text after the cursor */\n  suggestion?: string;\n};\n\n/**\n * AutoCompleteTextarea Component\n *\n * A textarea with inline autocomplete ghost text, built on a contentEditable div\n * instead of a native `<textarea>`. Ghost text (suggestions) is rendered inline\n * at the cursor position and can be accepted with the Tab key.\n *\n * The component wraps `ContentEditableTextArea` and manages suggestion state.\n * When `suggestion` prop is provided it is shown as ghost text at the end of the\n * current text. When `isActive` is false, ghost text is hidden.\n *\n * @example\n * ```tsx\n * <AutoCompleteTextarea\n *   value={content}\n *   onChange={handleChange}\n *   suggestion=\"suggested completion...\"\n *   isActive={true}\n *   autoSize={true}\n * />\n * ```\n */\nexport const AutoCompleteTextarea: FC<AutocompleteTextAreaProps> = ({\n  isActive = true,\n  suggestion: suggestionProp,\n  ...props\n}) => {\n  const defaultValue = String(props.value ?? props.defaultValue ?? '');\n  const [text, setText] = useState(defaultValue);\n  const [suggestion, setSuggestion] = useState('');\n  const editorRef = useRef<ContentEditableTextAreaHandle>(null);\n\n  useEffect(() => {\n    if (typeof props.value === 'undefined') return;\n    setText(String(props.value ?? props.defaultValue ?? ''));\n  }, [props.value, props.defaultValue]);\n\n  const acceptSuggestion = () => {\n    const active = suggestionProp ?? suggestion;\n    if (!active) return;\n\n    const cursor = editorRef.current?.getCursorOffset() ?? text.length;\n    const next = text.slice(0, cursor) + active + text.slice(cursor);\n    setText(next);\n    setSuggestion('');\n\n    setTimeout(() => {\n      editorRef.current?.focus();\n      editorRef.current?.setCursorAtOffset(cursor + active.length);\n    }, 0);\n  };\n\n  const activeGhost = isActive\n    ? (suggestionProp ?? (suggestion || undefined))\n    : undefined;\n  const textLines = text.split('\\n');\n  const activeLine = suggestionProp ? textLines.length - 1 : undefined;\n  const activeOffset = suggestionProp\n    ? (textLines[textLines.length - 1]?.length ?? 0)\n    : undefined;\n\n  return (\n    <ContentEditableTextArea\n      ref={editorRef}\n      value={text}\n      onChange={(val) => {\n        setText(val);\n        setSuggestion('');\n\n        if (props.onChange) {\n          const evt = {\n            target: { value: val },\n            currentTarget: { value: val },\n          } as ChangeEvent<HTMLTextAreaElement>;\n          props.onChange(evt);\n        }\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Tab' && (suggestionProp ?? suggestion)) {\n          e.preventDefault();\n          acceptSuggestion();\n        }\n        props.onKeyDown?.(e as unknown as KeyboardEvent<HTMLTextAreaElement>);\n      }}\n      ghostText={activeGhost}\n      ghostLine={activeLine}\n      ghostOffset={activeOffset}\n      placeholder={props.placeholder}\n      disabled={props.disabled}\n      autoSize={props.autoSize}\n      maxRows={props.maxRows}\n      minRows={props.rows}\n      variant={props.variant}\n      validationStyleEnabled={props.validationStyleEnabled}\n      className={props.className}\n      dir={props.dir as 'ltr' | 'rtl' | 'auto'}\n      aria-label={props['aria-label']}\n      aria-invalid={props['aria-invalid']}\n      aria-describedby={props['aria-describedby']}\n      data-testid={(props as Record<string, unknown>)['data-testid'] as string}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAa,wBAAuD,EAClE,WAAW,MACX,YAAY,gBACZ,GAAG,YACC;CAEJ,MAAM,CAAC,MAAM,WAAW,SADH,OAAO,MAAM,SAAS,MAAM,gBAAgB,GACpB,CAAC;CAC9C,MAAM,CAAC,YAAY,iBAAiB,SAAS,GAAG;CAChD,MAAM,YAAY,OAAsC,KAAK;CAE7D,gBAAgB;EACd,IAAI,OAAO,MAAM,UAAU,aAAa;EACxC,QAAQ,OAAO,MAAM,SAAS,MAAM,gBAAgB,GAAG,CAAC;IACvD,CAAC,MAAM,OAAO,MAAM,aAAa,CAAC;CAErC,MAAM,yBAAyB;EAC7B,MAAM,SAAS,kBAAkB;EACjC,IAAI,CAAC,QAAQ;EAEb,MAAM,SAAS,UAAU,SAAS,iBAAiB,IAAI,KAAK;EAE5D,QADa,KAAK,MAAM,GAAG,OAAO,GAAG,SAAS,KAAK,MAAM,OAAO,CACnD;EACb,cAAc,GAAG;EAEjB,iBAAiB;GACf,UAAU,SAAS,OAAO;GAC1B,UAAU,SAAS,kBAAkB,SAAS,OAAO,OAAO;KAC3D,EAAE;;CAGP,MAAM,cAAc,WACf,mBAAmB,cAAc,UAClC;CACJ,MAAM,YAAY,KAAK,MAAM,KAAK;CAMlC,OACE,oBAAC,yBAAD;EACE,KAAK;EACL,OAAO;EACP,WAAW,QAAQ;GACjB,QAAQ,IAAI;GACZ,cAAc,GAAG;GAEjB,IAAI,MAAM,UAAU;IAClB,MAAM,MAAM;KACV,QAAQ,EAAE,OAAO,KAAK;KACtB,eAAe,EAAE,OAAO,KAAK;KAC9B;IACD,MAAM,SAAS,IAAI;;;EAGvB,YAAY,MAAM;GAChB,IAAI,EAAE,QAAQ,UAAU,kBAAkB,aAAa;IACrD,EAAE,gBAAgB;IAClB,kBAAkB;;GAEpB,MAAM,YAAY,EAAmD;;EAEvE,WAAW;EACX,WA7Be,iBAAiB,UAAU,SAAS,IAAI;EA8BvD,aA7BiB,iBAChB,UAAU,UAAU,SAAS,IAAI,UAAU,IAC5C;EA4BA,aAAa,MAAM;EACnB,UAAU,MAAM;EAChB,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,SAAS,MAAM;EACf,SAAS,MAAM;EACf,wBAAwB,MAAM;EAC9B,WAAW,MAAM;EACjB,KAAK,MAAM;EACX,cAAY,MAAM;EAClB,gBAAc,MAAM;EACpB,oBAAkB,MAAM;EACxB,eAAc,MAAkC;EAChD"}

package/dist/esm/components/TextArea/ContentEditableTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditableTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/ContentEditableTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport {\n  type ClipboardEvent,\n  type DragEvent,\n  type FC,\n  type HTMLAttributes,\n  type InputEvent,\n  type KeyboardEvent,\n  type MutableRefObject,\n  type Ref,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { type InputVariant, inputVariants } from '../Input';\n\ntype CaretPosition = {\n  line: number;\n  offset: number;\n};\n\ntype UseContentEditableOptions = {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n};\n\nconst ZERO_WIDTH_SPACE = '\\u200B';\n\nconst getTextFromContainer = (container: HTMLDivElement): string => {\n  const lineEls = container.querySelectorAll('[data-line]');\n  if (lineEls.length === 0) {\n    return (container.textContent ?? '').split(ZERO_WIDTH_SPACE).join('');\n  }\n\n  return Array.from(lineEls)\n    .map((el) => {\n      const editable = el.querySelector('[data-editable]');\n      const raw = editable?.textContent ?? el.textContent ?? '';\n      return raw === ZERO_WIDTH_SPACE\n        ? ''\n        : raw.split(ZERO_WIDTH_SPACE).join('');\n    })\n    .join('\\n');\n};\n\nconst splitLines = (text: string): string[] => {\n  const lines = text.split('\\n');\n  return lines.length === 0 ? [''] : lines;\n};\n\n// Cached Intl.Segmenter for grapheme-aware deletion (emoji, CJK, etc.)\n// Intl.Segmenter is ES2022+ but we feature-detect at runtime.\ntype GraphemeSegmenter = {\n  segment: (input: string) => Iterable<{ segment: string }>;\n};\n\nconst createGraphemeSegmenter = (): GraphemeSegmenter | null => {\n  if (typeof Intl === 'undefined' || !('Segmenter' in Intl)) return null;\n  const SegmenterCtor = (\n    Intl as unknown as Record<\n      string,\n      new (\n        ...args: unknown[]\n      ) => GraphemeSegmenter\n    >\n  ).Segmenter;\n  return new SegmenterCtor(undefined, { granularity: 'grapheme' });\n};\n\nconst graphemeSegmenter = createGraphemeSegmenter();\n\n/**\n * Find the previous grapheme cluster boundary for safe deletion.\n * Falls back to code-point-aware deletion if Intl.Segmenter is unavailable.\n */\nconst prevGraphemeBoundary = (text: string, offset: number): number => {\n  if (offset <= 0) return 0;\n\n  if (graphemeSegmenter) {\n    const segments = [...graphemeSegmenter.segment(text.slice(0, offset))];\n    const last = segments[segments.length - 1];\n    return last ? offset - last.segment.length : offset - 1;\n  }\n\n  // Fallback: handle surrogate pairs\n  const code = text.charCodeAt(offset - 1);\n  if (code >= 0xdc00 && code <= 0xdfff && offset >= 2) {\n    return offset - 2;\n  }\n  return offset - 1;\n};\n\n/**\n * Find the next grapheme cluster boundary for safe forward deletion.\n */\nconst nextGraphemeBoundary = (text: string, offset: number): number => {\n  if (offset >= text.length) return text.length;\n\n  if (graphemeSegmenter) {\n    const segments = [...graphemeSegmenter.segment(text.slice(offset))];\n    const first = segments[0];\n    return first ? offset + first.segment.length : offset + 1;\n  }\n\n  // Fallback: handle surrogate pairs\n  const code = text.charCodeAt(offset);\n  if (code >= 0xd800 && code <= 0xdbff && offset + 1 < text.length) {\n    return offset + 2;\n  }\n  return offset + 1;\n};\n\n/**\n * Find the previous word boundary for Option+Backspace.\n */\nconst prevWordBoundary = (text: string, offset: number): number => {\n  if (offset <= 0) return 0;\n  let i = offset - 1;\n  // Skip whitespace\n  while (i > 0 && /\\s/.test(text[i - 1])) i--;\n  // Skip word characters\n  while (i > 0 && /\\S/.test(text[i - 1])) i--;\n  return i;\n};\n\n/**\n * Find the next word boundary for Option+Delete.\n */\nconst nextWordBoundary = (text: string, offset: number): number => {\n  if (offset >= text.length) return text.length;\n  let i = offset;\n  // Skip word characters\n  while (i < text.length && /\\S/.test(text[i])) i++;\n  // Skip whitespace\n  while (i < text.length && /\\s/.test(text[i])) i++;\n  return i;\n};\n\n/**\n * Find the start of the current line (for Cmd+Backspace).\n */\nconst lineStart = (text: string, offset: number): number => {\n  const before = text.slice(0, offset);\n  const lastNewline = before.lastIndexOf('\\n');\n  return lastNewline + 1;\n};\n\n/**\n * Find the end of the current line (for Cmd+Delete).\n */\nconst lineEnd = (text: string, offset: number): number => {\n  const nextNewline = text.indexOf('\\n', offset);\n  return nextNewline === -1 ? text.length : nextNewline;\n};\n\nexport const useContentEditable = ({\n  value,\n  defaultValue,\n  onChange,\n  disabled = false,\n}: UseContentEditableOptions) => {\n  const initialValue = value ?? defaultValue ?? '';\n  const [lines, setLines] = useState<string[]>(() => splitLines(initialValue));\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const pendingCaretRef = useRef<CaretPosition | null>(null);\n  const isControlled = value !== undefined;\n\n  // Keep a ref to the latest lines to avoid stale closures in rapid typing\n  const linesRef = useRef(lines);\n  linesRef.current = lines;\n\n  useEffect(() => {\n    if (isControlled && value !== undefined) {\n      setLines(splitLines(value));\n    }\n  }, [value, isControlled]);\n\n  const getText = () => linesRef.current.join('\\n');\n\n  const getCaretPosition = (): CaretPosition | null => {\n    const sel = window.getSelection();\n    if (!sel?.rangeCount || !containerRef.current) return null;\n\n    const range = sel.getRangeAt(0);\n    const lineEls = containerRef.current.querySelectorAll('[data-line]');\n\n    for (let i = 0; i < lineEls.length; i++) {\n      if (lineEls[i].contains(range.startContainer)) {\n        return { line: i, offset: range.startOffset };\n      }\n    }\n    return null;\n  };\n\n  const getSelectionOffsets = (): {\n    start: number;\n    end: number;\n    hasSelection: boolean;\n  } | null => {\n    const sel = window.getSelection();\n    if (!sel?.rangeCount || !containerRef.current) return null;\n\n    const range = sel.getRangeAt(0);\n    const lineEls = containerRef.current.querySelectorAll('[data-line]');\n    const currentLines = linesRef.current;\n\n    const findOffset = (node: Node, nodeOffset: number): number => {\n      for (let i = 0; i < lineEls.length; i++) {\n        if (lineEls[i].contains(node)) {\n          let flat = 0;\n          for (let j = 0; j < i; j++) {\n            flat += currentLines[j].length + 1;\n          }\n          return flat + Math.min(nodeOffset, currentLines[i]?.length ?? 0);\n        }\n      }\n      // Selection is on the root container (e.g. select-all)\n      if (node === containerRef.current) {\n        if (nodeOffset === 0) return 0;\n        return currentLines.join('\\n').length;\n      }\n      return 0;\n    };\n\n    const start = findOffset(range.startContainer, range.startOffset);\n    const end = findOffset(range.endContainer, range.endOffset);\n\n    return {\n      start: Math.min(start, end),\n      end: Math.max(start, end),\n      hasSelection: !range.collapsed,\n    };\n  };\n\n  const setCaretPosition = (pos: CaretPosition) => {\n    if (!containerRef.current) return;\n\n    const lineEls = containerRef.current.querySelectorAll('[data-line]');\n    const lineEl = lineEls[pos.line];\n    if (!lineEl) return;\n\n    const editable = lineEl.querySelector('[data-editable]');\n    const node =\n      editable?.firstChild ?? editable ?? lineEl.firstChild ?? lineEl;\n\n    const sel = window.getSelection();\n    if (!sel) return;\n\n    const range = document.createRange();\n    const maxOff = Math.min(pos.offset, node.textContent?.length ?? 0);\n\n    try {\n      range.setStart(node, maxOff);\n      range.collapse(true);\n      sel.removeAllRanges();\n      sel.addRange(range);\n    } catch {\n      range.selectNodeContents(node);\n      range.collapse(false);\n      sel.removeAllRanges();\n      sel.addRange(range);\n    }\n  };\n\n  useEffect(() => {\n    if (pendingCaretRef.current && containerRef.current) {\n      setCaretPosition(pendingCaretRef.current);\n      pendingCaretRef.current = null;\n    }\n  });\n\n  const flatOffsetFromCaret = (pos: CaretPosition): number => {\n    const currentLines = linesRef.current;\n    let offset = 0;\n    for (let i = 0; i < pos.line; i++) {\n      offset += currentLines[i].length + 1;\n    }\n    return offset + pos.offset;\n  };\n\n  const caretFromFlatOffset = (\n    flat: number,\n    targetLines: string[]\n  ): CaretPosition => {\n    let rem = flat;\n    for (let i = 0; i < targetLines.length; i++) {\n      if (rem <= targetLines[i].length) {\n        return { line: i, offset: rem };\n      }\n      rem -= targetLines[i].length + 1;\n    }\n    return {\n      line: targetLines.length - 1,\n      offset: targetLines[targetLines.length - 1]?.length ?? 0,\n    };\n  };\n\n  const getCursorOffset = (): number => {\n    const pos = getCaretPosition();\n    if (!pos) return 0;\n    return flatOffsetFromCaret(pos);\n  };\n\n  /**\n   * Applies a text mutation: computes new lines, sets pending caret, updates state.\n   */\n  const applyTextChange = (newText: string, caretOffset: number) => {\n    const newLines = splitLines(newText);\n    pendingCaretRef.current = caretFromFlatOffset(caretOffset, newLines);\n    setLines(newLines);\n    onChange?.(newText);\n  };\n\n  const handleInput = () => {\n    if (pendingCaretRef.current !== null) return;\n    if (disabled || !containerRef.current) return;\n\n    const caretPos = getCaretPosition();\n    const newText = getTextFromContainer(containerRef.current);\n    const newLines = splitLines(newText);\n\n    pendingCaretRef.current = caretPos;\n    setLines(newLines);\n    onChange?.(newText);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    // Don't intercept during IME composition (CJK input)\n    if (e.nativeEvent.isComposing) return;\n\n    // Block undo/redo - browser would mutate DOM out of sync with React\n    if ((e.metaKey || e.ctrlKey) && e.key === 'z') {\n      e.preventDefault();\n      return;\n    }\n\n    const selInfo = getSelectionOffsets();\n    if (!selInfo) return;\n\n    const currentText = linesRef.current.join('\\n');\n\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      const newText =\n        currentText.slice(0, selInfo.start) +\n        '\\n' +\n        currentText.slice(selInfo.end);\n      applyTextChange(newText, selInfo.start + 1);\n      return;\n    }\n\n    if (e.key === 'Backspace') {\n      e.preventDefault();\n\n      if (selInfo.hasSelection) {\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n        applyTextChange(newText, selInfo.start);\n      } else {\n        if (selInfo.start === 0) return;\n\n        let deleteFrom: number;\n        if (e.metaKey) {\n          // Cmd+Backspace: delete to start of line\n          deleteFrom = lineStart(currentText, selInfo.start);\n        } else if (e.altKey) {\n          // Option+Backspace: delete previous word\n          deleteFrom = prevWordBoundary(currentText, selInfo.start);\n        } else {\n          // Regular backspace: delete one grapheme\n          deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);\n        }\n\n        const newText =\n          currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);\n        applyTextChange(newText, deleteFrom);\n      }\n      return;\n    }\n\n    if (e.key === 'Delete') {\n      e.preventDefault();\n\n      if (selInfo.hasSelection) {\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n        applyTextChange(newText, selInfo.start);\n      } else {\n        if (selInfo.start >= currentText.length) return;\n\n        let deleteTo: number;\n        if (e.metaKey) {\n          // Cmd+Delete: delete to end of line\n          deleteTo = lineEnd(currentText, selInfo.start);\n        } else if (e.altKey) {\n          // Option+Delete: delete next word\n          deleteTo = nextWordBoundary(currentText, selInfo.start);\n        } else {\n          // Regular delete: delete one grapheme\n          deleteTo = nextGraphemeBoundary(currentText, selInfo.start);\n        }\n\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);\n        applyTextChange(newText, selInfo.start);\n      }\n      return;\n    }\n  };\n\n  const handleCut = (e: ClipboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    e.preventDefault();\n    const selInfo = getSelectionOffsets();\n    if (!selInfo?.hasSelection) return;\n\n    const currentText = linesRef.current.join('\\n');\n    const selectedText = currentText.slice(selInfo.start, selInfo.end);\n\n    // Write selected text to clipboard\n    e.clipboardData.setData('text/plain', selectedText);\n\n    // Delete the selected text\n    const newText =\n      currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n    applyTextChange(newText, selInfo.start);\n  };\n\n  const handlePaste = (e: ClipboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    e.preventDefault();\n    const pastedText = e.clipboardData.getData('text/plain');\n    if (!pastedText) return;\n\n    const selInfo = getSelectionOffsets();\n    if (!selInfo) return;\n\n    const currentText = linesRef.current.join('\\n');\n    const newText =\n      currentText.slice(0, selInfo.start) +\n      pastedText +\n      currentText.slice(selInfo.end);\n    applyTextChange(newText, selInfo.start + pastedText.length);\n  };\n\n  const handleBeforeInput = (e: InputEvent<HTMLDivElement>) => {\n    if (disabled) return;\n\n    const inputEvent = e.nativeEvent as InputEvent;\n\n    // Don't intercept during IME composition (CJK input)\n    if (inputEvent.isComposing) return;\n\n    const inputType = inputEvent.inputType;\n\n    // Skip types handled by handleKeyDown (when keydown fires)\n    if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {\n      return;\n    }\n\n    // Handle deletions as fallback for mobile keyboards that don't fire keydown\n    if (\n      inputType === 'deleteContentBackward' ||\n      inputType === 'deleteContentForward'\n    ) {\n      e.preventDefault();\n      const selInfo = getSelectionOffsets();\n      if (!selInfo) return;\n\n      const currentText = linesRef.current.join('\\n');\n\n      if (selInfo.hasSelection) {\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n        applyTextChange(newText, selInfo.start);\n      } else if (inputType === 'deleteContentBackward') {\n        if (selInfo.start === 0) return;\n        const deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);\n        const newText =\n          currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);\n        applyTextChange(newText, deleteFrom);\n      } else {\n        if (selInfo.start >= currentText.length) return;\n        const deleteTo = nextGraphemeBoundary(currentText, selInfo.start);\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);\n        applyTextChange(newText, selInfo.start);\n      }\n      return;\n    }\n\n    // Handle spell-check replacements\n    if (inputType === 'insertReplacementText') {\n      e.preventDefault();\n      const selInfo = getSelectionOffsets();\n      if (!selInfo) return;\n\n      const currentText = linesRef.current.join('\\n');\n      const replacement =\n        inputEvent.data ?? inputEvent.dataTransfer?.getData('text/plain') ?? '';\n      const newText =\n        currentText.slice(0, selInfo.start) +\n        replacement +\n        currentText.slice(selInfo.end);\n      applyTextChange(newText, selInfo.start + replacement.length);\n      return;\n    }\n\n    if (inputType === 'insertText' && inputEvent.data) {\n      e.preventDefault();\n\n      const selInfo = getSelectionOffsets();\n      if (!selInfo) return;\n\n      const currentText = linesRef.current.join('\\n');\n      const inserted = inputEvent.data;\n      const newText =\n        currentText.slice(0, selInfo.start) +\n        inserted +\n        currentText.slice(selInfo.end);\n      applyTextChange(newText, selInfo.start + inserted.length);\n    }\n  };\n\n  const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n    // Block drag-and-drop to prevent uncontrolled DOM mutations\n    e.preventDefault();\n  };\n\n  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n  };\n\n  return {\n    lines,\n    containerRef,\n    getText,\n    handleInput,\n    handleBeforeInput,\n    handleKeyDown,\n    handleCut,\n    handlePaste,\n    handleDrop,\n    handleDragOver,\n    getCaretPosition,\n    setCaretPosition,\n    getCursorOffset,\n    caretFromFlatOffset,\n  };\n};\n\ntype LineProps = {\n  index: number;\n  text: string;\n  isLast: boolean;\n  ghostText?: string;\n};\n\nconst Line: FC<LineProps> = ({ index, text, isLast, ghostText }) => (\n  <span data-line={index} className=\"block min-h-[1.5rem]\">\n    <span data-editable>{text || '\\u200B'}</span>\n    {ghostText && (\n      <span\n        data-ghost\n        className=\"pointer-events-none select-none text-neutral\"\n        aria-hidden=\"true\"\n      >\n        {ghostText}\n      </span>\n    )}\n    {!isLast && <br />}\n  </span>\n);\n\nexport type ContentEditableTextAreaHandle = {\n  getContainer: () => HTMLDivElement | null;\n  getText: () => string;\n  focus: () => void;\n  getCursorOffset: () => number;\n  setCursorAtOffset: (offset: number) => void;\n};\n\nexport type ContentEditableTextAreaProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> & {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  minRows?: number;\n  maxRows?: number;\n  autoSize?: boolean;\n  validationStyleEnabled?: boolean;\n  variant?: InputVariant | `${InputVariant}`;\n  ghostText?: string;\n  ghostLine?: number;\n  ghostOffset?: number;\n  ref?: Ref<ContentEditableTextAreaHandle>;\n  dir?: 'ltr' | 'rtl' | 'auto';\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant'\n  >;\n\nconst LINE_HEIGHT = 24;\nconst LINE_PADDING = 12;\n\nexport const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({\n  value,\n  defaultValue,\n  onChange,\n  placeholder,\n  disabled = false,\n  minRows = 1,\n  maxRows = 999,\n  autoSize = true,\n  validationStyleEnabled = false,\n  variant,\n  ghostText,\n  ghostLine,\n  ghostOffset,\n  onClick,\n  className,\n  dir = 'auto',\n  ref,\n  ...rest\n}) => {\n  const {\n    lines,\n    containerRef,\n    getText,\n    handleInput,\n    handleBeforeInput,\n    handleKeyDown,\n    handleCut,\n    handlePaste,\n    handleDrop,\n    handleDragOver,\n    getCursorOffset,\n    setCaretPosition,\n    caretFromFlatOffset,\n  } = useContentEditable({ value, defaultValue, onChange, disabled });\n\n  const elRef = useRef<HTMLDivElement | null>(null);\n\n  const setRef = (el: HTMLDivElement | null) => {\n    elRef.current = el;\n    (containerRef as MutableRefObject<HTMLDivElement | null>).current = el;\n  };\n\n  useImperativeHandle(ref, () => ({\n    getContainer: () => elRef.current,\n    getText,\n    focus: () => elRef.current?.focus(),\n    getCursorOffset,\n    setCursorAtOffset: (offset: number) => {\n      setCaretPosition(caretFromFlatOffset(offset, lines));\n    },\n  }));\n\n  useEffect(() => {\n    if (!autoSize || !elRef.current) return;\n\n    const el = elRef.current;\n    const max = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const min = LINE_HEIGHT * minRows + LINE_PADDING;\n\n    el.style.height = 'auto';\n    const sh = el.scrollHeight;\n    el.style.height = `${Math.max(Math.min(sh, max), min)}px`;\n    el.style.overflowY = sh > max ? 'auto' : 'hidden';\n  }, [lines, autoSize, maxRows, minRows]);\n\n  const isEmpty = lines.length === 1 && lines[0] === '';\n  const hasGhost =\n    ghostText && ghostLine !== undefined && ghostOffset !== undefined;\n\n  return (\n    <div className=\"relative w-full\">\n      {isEmpty && placeholder && (\n        <div\n          className=\"pointer-events-none absolute inset-0 select-none px-2 py-3 text-base text-neutral-400 leading-[1.5rem] md:py-2 md:text-sm\"\n          aria-hidden=\"true\"\n        >\n          {placeholder}\n        </div>\n      )}\n\n      <div\n        {...rest}\n        ref={setRef}\n        role=\"textbox\"\n        aria-multiline=\"true\"\n        aria-placeholder={placeholder}\n        aria-disabled={disabled}\n        aria-autocomplete={hasGhost ? 'inline' : undefined}\n        tabIndex={disabled ? -1 : 0}\n        contentEditable={!disabled}\n        suppressContentEditableWarning\n        dir={dir}\n        onInput={handleInput}\n        onBeforeInput={handleBeforeInput}\n        onKeyDown={handleKeyDown}\n        onCut={handleCut}\n        onPaste={handlePaste}\n        onDrop={handleDrop}\n        onDragOver={handleDragOver}\n        onClick={onClick}\n        className={cn(\n          'resize-none whitespace-pre-wrap break-words outline-none',\n          inputVariants({\n            variant,\n            validationStyleEnabled: validationStyleEnabled\n              ? 'enabled'\n              : 'disabled',\n          }),\n          autoSize && 'overflow-y-auto',\n          className\n        )}\n      >\n        {lines.map((text, i) => (\n          <Line\n            key={i}\n            index={i}\n            text={text}\n            isLast={i === lines.length - 1}\n            ghostText={hasGhost && ghostLine === i ? ghostText : undefined}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ContentEditableTextArea.mjs","names":[],"sources":["../../../../src/components/TextArea/ContentEditableTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { VariantProps } from 'class-variance-authority';\nimport {\n  type ClipboardEvent,\n  type DragEvent,\n  type FC,\n  type HTMLAttributes,\n  type InputEvent,\n  type KeyboardEvent,\n  type MutableRefObject,\n  type Ref,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { type InputVariant, inputVariants } from '../Input';\n\ntype CaretPosition = {\n  line: number;\n  offset: number;\n};\n\ntype UseContentEditableOptions = {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n};\n\nconst ZERO_WIDTH_SPACE = '\\u200B';\n\nconst getTextFromContainer = (container: HTMLDivElement): string => {\n  const lineEls = container.querySelectorAll('[data-line]');\n  if (lineEls.length === 0) {\n    return (container.textContent ?? '').split(ZERO_WIDTH_SPACE).join('');\n  }\n\n  return Array.from(lineEls)\n    .map((el) => {\n      const editable = el.querySelector('[data-editable]');\n      const raw = editable?.textContent ?? el.textContent ?? '';\n      return raw === ZERO_WIDTH_SPACE\n        ? ''\n        : raw.split(ZERO_WIDTH_SPACE).join('');\n    })\n    .join('\\n');\n};\n\nconst splitLines = (text: string): string[] => {\n  const lines = text.split('\\n');\n  return lines.length === 0 ? [''] : lines;\n};\n\n// Cached Intl.Segmenter for grapheme-aware deletion (emoji, CJK, etc.)\n// Intl.Segmenter is ES2022+ but we feature-detect at runtime.\ntype GraphemeSegmenter = {\n  segment: (input: string) => Iterable<{ segment: string }>;\n};\n\nconst createGraphemeSegmenter = (): GraphemeSegmenter | null => {\n  if (typeof Intl === 'undefined' || !('Segmenter' in Intl)) return null;\n  const SegmenterCtor = (\n    Intl as unknown as Record<\n      string,\n      new (\n        ...args: unknown[]\n      ) => GraphemeSegmenter\n    >\n  ).Segmenter;\n  return new SegmenterCtor(undefined, { granularity: 'grapheme' });\n};\n\nconst graphemeSegmenter = createGraphemeSegmenter();\n\n/**\n * Find the previous grapheme cluster boundary for safe deletion.\n * Falls back to code-point-aware deletion if Intl.Segmenter is unavailable.\n */\nconst prevGraphemeBoundary = (text: string, offset: number): number => {\n  if (offset <= 0) return 0;\n\n  if (graphemeSegmenter) {\n    const segments = [...graphemeSegmenter.segment(text.slice(0, offset))];\n    const last = segments[segments.length - 1];\n    return last ? offset - last.segment.length : offset - 1;\n  }\n\n  // Fallback: handle surrogate pairs\n  const code = text.charCodeAt(offset - 1);\n  if (code >= 0xdc00 && code <= 0xdfff && offset >= 2) {\n    return offset - 2;\n  }\n  return offset - 1;\n};\n\n/**\n * Find the next grapheme cluster boundary for safe forward deletion.\n */\nconst nextGraphemeBoundary = (text: string, offset: number): number => {\n  if (offset >= text.length) return text.length;\n\n  if (graphemeSegmenter) {\n    const segments = [...graphemeSegmenter.segment(text.slice(offset))];\n    const first = segments[0];\n    return first ? offset + first.segment.length : offset + 1;\n  }\n\n  // Fallback: handle surrogate pairs\n  const code = text.charCodeAt(offset);\n  if (code >= 0xd800 && code <= 0xdbff && offset + 1 < text.length) {\n    return offset + 2;\n  }\n  return offset + 1;\n};\n\n/**\n * Find the previous word boundary for Option+Backspace.\n */\nconst prevWordBoundary = (text: string, offset: number): number => {\n  if (offset <= 0) return 0;\n  let i = offset - 1;\n  // Skip whitespace\n  while (i > 0 && /\\s/.test(text[i - 1])) i--;\n  // Skip word characters\n  while (i > 0 && /\\S/.test(text[i - 1])) i--;\n  return i;\n};\n\n/**\n * Find the next word boundary for Option+Delete.\n */\nconst nextWordBoundary = (text: string, offset: number): number => {\n  if (offset >= text.length) return text.length;\n  let i = offset;\n  // Skip word characters\n  while (i < text.length && /\\S/.test(text[i])) i++;\n  // Skip whitespace\n  while (i < text.length && /\\s/.test(text[i])) i++;\n  return i;\n};\n\n/**\n * Find the start of the current line (for Cmd+Backspace).\n */\nconst lineStart = (text: string, offset: number): number => {\n  const before = text.slice(0, offset);\n  const lastNewline = before.lastIndexOf('\\n');\n  return lastNewline + 1;\n};\n\n/**\n * Find the end of the current line (for Cmd+Delete).\n */\nconst lineEnd = (text: string, offset: number): number => {\n  const nextNewline = text.indexOf('\\n', offset);\n  return nextNewline === -1 ? text.length : nextNewline;\n};\n\nexport const useContentEditable = ({\n  value,\n  defaultValue,\n  onChange,\n  disabled = false,\n}: UseContentEditableOptions) => {\n  const initialValue = value ?? defaultValue ?? '';\n  const [lines, setLines] = useState<string[]>(() => splitLines(initialValue));\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const pendingCaretRef = useRef<CaretPosition | null>(null);\n  const isControlled = value !== undefined;\n\n  // Keep a ref to the latest lines to avoid stale closures in rapid typing\n  const linesRef = useRef(lines);\n  linesRef.current = lines;\n\n  useEffect(() => {\n    if (isControlled && value !== undefined) {\n      setLines(splitLines(value));\n    }\n  }, [value, isControlled]);\n\n  const getText = () => linesRef.current.join('\\n');\n\n  const getCaretPosition = (): CaretPosition | null => {\n    const sel = window.getSelection();\n    if (!sel?.rangeCount || !containerRef.current) return null;\n\n    const range = sel.getRangeAt(0);\n    const lineEls = containerRef.current.querySelectorAll('[data-line]');\n\n    for (let i = 0; i < lineEls.length; i++) {\n      if (lineEls[i].contains(range.startContainer)) {\n        return { line: i, offset: range.startOffset };\n      }\n    }\n    return null;\n  };\n\n  const getSelectionOffsets = (): {\n    start: number;\n    end: number;\n    hasSelection: boolean;\n  } | null => {\n    const sel = window.getSelection();\n    if (!sel?.rangeCount || !containerRef.current) return null;\n\n    const range = sel.getRangeAt(0);\n    const lineEls = containerRef.current.querySelectorAll('[data-line]');\n    const currentLines = linesRef.current;\n\n    const findOffset = (node: Node, nodeOffset: number): number => {\n      for (let i = 0; i < lineEls.length; i++) {\n        if (lineEls[i].contains(node)) {\n          let flat = 0;\n          for (let j = 0; j < i; j++) {\n            flat += currentLines[j].length + 1;\n          }\n          return flat + Math.min(nodeOffset, currentLines[i]?.length ?? 0);\n        }\n      }\n      // Selection is on the root container (e.g. select-all)\n      if (node === containerRef.current) {\n        if (nodeOffset === 0) return 0;\n        return currentLines.join('\\n').length;\n      }\n      return 0;\n    };\n\n    const start = findOffset(range.startContainer, range.startOffset);\n    const end = findOffset(range.endContainer, range.endOffset);\n\n    return {\n      start: Math.min(start, end),\n      end: Math.max(start, end),\n      hasSelection: !range.collapsed,\n    };\n  };\n\n  const setCaretPosition = (pos: CaretPosition) => {\n    if (!containerRef.current) return;\n\n    const lineEls = containerRef.current.querySelectorAll('[data-line]');\n    const lineEl = lineEls[pos.line];\n    if (!lineEl) return;\n\n    const editable = lineEl.querySelector('[data-editable]');\n    const node =\n      editable?.firstChild ?? editable ?? lineEl.firstChild ?? lineEl;\n\n    const sel = window.getSelection();\n    if (!sel) return;\n\n    const range = document.createRange();\n    const maxOff = Math.min(pos.offset, node.textContent?.length ?? 0);\n\n    try {\n      range.setStart(node, maxOff);\n      range.collapse(true);\n      sel.removeAllRanges();\n      sel.addRange(range);\n    } catch {\n      range.selectNodeContents(node);\n      range.collapse(false);\n      sel.removeAllRanges();\n      sel.addRange(range);\n    }\n  };\n\n  useEffect(() => {\n    if (pendingCaretRef.current && containerRef.current) {\n      setCaretPosition(pendingCaretRef.current);\n      pendingCaretRef.current = null;\n    }\n  });\n\n  const flatOffsetFromCaret = (pos: CaretPosition): number => {\n    const currentLines = linesRef.current;\n    let offset = 0;\n    for (let i = 0; i < pos.line; i++) {\n      offset += currentLines[i].length + 1;\n    }\n    return offset + pos.offset;\n  };\n\n  const caretFromFlatOffset = (\n    flat: number,\n    targetLines: string[]\n  ): CaretPosition => {\n    let rem = flat;\n    for (let i = 0; i < targetLines.length; i++) {\n      if (rem <= targetLines[i].length) {\n        return { line: i, offset: rem };\n      }\n      rem -= targetLines[i].length + 1;\n    }\n    return {\n      line: targetLines.length - 1,\n      offset: targetLines[targetLines.length - 1]?.length ?? 0,\n    };\n  };\n\n  const getCursorOffset = (): number => {\n    const pos = getCaretPosition();\n    if (!pos) return 0;\n    return flatOffsetFromCaret(pos);\n  };\n\n  /**\n   * Applies a text mutation: computes new lines, sets pending caret, updates state.\n   */\n  const applyTextChange = (newText: string, caretOffset: number) => {\n    const newLines = splitLines(newText);\n    pendingCaretRef.current = caretFromFlatOffset(caretOffset, newLines);\n    setLines(newLines);\n    onChange?.(newText);\n  };\n\n  const handleInput = () => {\n    if (pendingCaretRef.current !== null) return;\n    if (disabled || !containerRef.current) return;\n\n    const caretPos = getCaretPosition();\n    const newText = getTextFromContainer(containerRef.current);\n    const newLines = splitLines(newText);\n\n    pendingCaretRef.current = caretPos;\n    setLines(newLines);\n    onChange?.(newText);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    // Don't intercept during IME composition (CJK input)\n    if (e.nativeEvent.isComposing) return;\n\n    // Block undo/redo - browser would mutate DOM out of sync with React\n    if ((e.metaKey || e.ctrlKey) && e.key === 'z') {\n      e.preventDefault();\n      return;\n    }\n\n    const selInfo = getSelectionOffsets();\n    if (!selInfo) return;\n\n    const currentText = linesRef.current.join('\\n');\n\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      const newText =\n        currentText.slice(0, selInfo.start) +\n        '\\n' +\n        currentText.slice(selInfo.end);\n      applyTextChange(newText, selInfo.start + 1);\n      return;\n    }\n\n    if (e.key === 'Backspace') {\n      e.preventDefault();\n\n      if (selInfo.hasSelection) {\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n        applyTextChange(newText, selInfo.start);\n      } else {\n        if (selInfo.start === 0) return;\n\n        let deleteFrom: number;\n        if (e.metaKey) {\n          // Cmd+Backspace: delete to start of line\n          deleteFrom = lineStart(currentText, selInfo.start);\n        } else if (e.altKey) {\n          // Option+Backspace: delete previous word\n          deleteFrom = prevWordBoundary(currentText, selInfo.start);\n        } else {\n          // Regular backspace: delete one grapheme\n          deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);\n        }\n\n        const newText =\n          currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);\n        applyTextChange(newText, deleteFrom);\n      }\n      return;\n    }\n\n    if (e.key === 'Delete') {\n      e.preventDefault();\n\n      if (selInfo.hasSelection) {\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n        applyTextChange(newText, selInfo.start);\n      } else {\n        if (selInfo.start >= currentText.length) return;\n\n        let deleteTo: number;\n        if (e.metaKey) {\n          // Cmd+Delete: delete to end of line\n          deleteTo = lineEnd(currentText, selInfo.start);\n        } else if (e.altKey) {\n          // Option+Delete: delete next word\n          deleteTo = nextWordBoundary(currentText, selInfo.start);\n        } else {\n          // Regular delete: delete one grapheme\n          deleteTo = nextGraphemeBoundary(currentText, selInfo.start);\n        }\n\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);\n        applyTextChange(newText, selInfo.start);\n      }\n      return;\n    }\n  };\n\n  const handleCut = (e: ClipboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    e.preventDefault();\n    const selInfo = getSelectionOffsets();\n    if (!selInfo?.hasSelection) return;\n\n    const currentText = linesRef.current.join('\\n');\n    const selectedText = currentText.slice(selInfo.start, selInfo.end);\n\n    // Write selected text to clipboard\n    e.clipboardData.setData('text/plain', selectedText);\n\n    // Delete the selected text\n    const newText =\n      currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n    applyTextChange(newText, selInfo.start);\n  };\n\n  const handlePaste = (e: ClipboardEvent<HTMLDivElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    e.preventDefault();\n    const pastedText = e.clipboardData.getData('text/plain');\n    if (!pastedText) return;\n\n    const selInfo = getSelectionOffsets();\n    if (!selInfo) return;\n\n    const currentText = linesRef.current.join('\\n');\n    const newText =\n      currentText.slice(0, selInfo.start) +\n      pastedText +\n      currentText.slice(selInfo.end);\n    applyTextChange(newText, selInfo.start + pastedText.length);\n  };\n\n  const handleBeforeInput = (e: InputEvent<HTMLDivElement>) => {\n    if (disabled) return;\n\n    const inputEvent = e.nativeEvent as InputEvent;\n\n    // Don't intercept during IME composition (CJK input)\n    if (inputEvent.isComposing) return;\n\n    const inputType = inputEvent.inputType;\n\n    // Skip types handled by handleKeyDown (when keydown fires)\n    if (inputType === 'insertParagraph' || inputType === 'insertLineBreak') {\n      return;\n    }\n\n    // Handle deletions as fallback for mobile keyboards that don't fire keydown\n    if (\n      inputType === 'deleteContentBackward' ||\n      inputType === 'deleteContentForward'\n    ) {\n      e.preventDefault();\n      const selInfo = getSelectionOffsets();\n      if (!selInfo) return;\n\n      const currentText = linesRef.current.join('\\n');\n\n      if (selInfo.hasSelection) {\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(selInfo.end);\n        applyTextChange(newText, selInfo.start);\n      } else if (inputType === 'deleteContentBackward') {\n        if (selInfo.start === 0) return;\n        const deleteFrom = prevGraphemeBoundary(currentText, selInfo.start);\n        const newText =\n          currentText.slice(0, deleteFrom) + currentText.slice(selInfo.start);\n        applyTextChange(newText, deleteFrom);\n      } else {\n        if (selInfo.start >= currentText.length) return;\n        const deleteTo = nextGraphemeBoundary(currentText, selInfo.start);\n        const newText =\n          currentText.slice(0, selInfo.start) + currentText.slice(deleteTo);\n        applyTextChange(newText, selInfo.start);\n      }\n      return;\n    }\n\n    // Handle spell-check replacements\n    if (inputType === 'insertReplacementText') {\n      e.preventDefault();\n      const selInfo = getSelectionOffsets();\n      if (!selInfo) return;\n\n      const currentText = linesRef.current.join('\\n');\n      const replacement =\n        inputEvent.data ?? inputEvent.dataTransfer?.getData('text/plain') ?? '';\n      const newText =\n        currentText.slice(0, selInfo.start) +\n        replacement +\n        currentText.slice(selInfo.end);\n      applyTextChange(newText, selInfo.start + replacement.length);\n      return;\n    }\n\n    if (inputType === 'insertText' && inputEvent.data) {\n      e.preventDefault();\n\n      const selInfo = getSelectionOffsets();\n      if (!selInfo) return;\n\n      const currentText = linesRef.current.join('\\n');\n      const inserted = inputEvent.data;\n      const newText =\n        currentText.slice(0, selInfo.start) +\n        inserted +\n        currentText.slice(selInfo.end);\n      applyTextChange(newText, selInfo.start + inserted.length);\n    }\n  };\n\n  const handleDrop = (e: DragEvent<HTMLDivElement>) => {\n    // Block drag-and-drop to prevent uncontrolled DOM mutations\n    e.preventDefault();\n  };\n\n  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {\n    e.preventDefault();\n  };\n\n  return {\n    lines,\n    containerRef,\n    getText,\n    handleInput,\n    handleBeforeInput,\n    handleKeyDown,\n    handleCut,\n    handlePaste,\n    handleDrop,\n    handleDragOver,\n    getCaretPosition,\n    setCaretPosition,\n    getCursorOffset,\n    caretFromFlatOffset,\n  };\n};\n\ntype LineProps = {\n  index: number;\n  text: string;\n  isLast: boolean;\n  ghostText?: string;\n};\n\nconst Line: FC<LineProps> = ({ index, text, isLast, ghostText }) => (\n  <span data-line={index} className=\"block min-h-[1.5rem]\">\n    <span data-editable>{text || '\\u200B'}</span>\n    {ghostText && (\n      <span\n        data-ghost\n        className=\"pointer-events-none select-none text-neutral\"\n        aria-hidden=\"true\"\n      >\n        {ghostText}\n      </span>\n    )}\n    {!isLast && <br />}\n  </span>\n);\n\nexport type ContentEditableTextAreaHandle = {\n  getContainer: () => HTMLDivElement | null;\n  getText: () => string;\n  focus: () => void;\n  getCursorOffset: () => number;\n  setCursorAtOffset: (offset: number) => void;\n};\n\nexport type ContentEditableTextAreaProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue'\n> & {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  minRows?: number;\n  maxRows?: number;\n  autoSize?: boolean;\n  validationStyleEnabled?: boolean;\n  variant?: InputVariant | `${InputVariant}`;\n  ghostText?: string;\n  ghostLine?: number;\n  ghostOffset?: number;\n  ref?: Ref<ContentEditableTextAreaHandle>;\n  dir?: 'ltr' | 'rtl' | 'auto';\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant'\n  >;\n\nconst LINE_HEIGHT = 24;\nconst LINE_PADDING = 12;\n\nexport const ContentEditableTextArea: FC<ContentEditableTextAreaProps> = ({\n  value,\n  defaultValue,\n  onChange,\n  placeholder,\n  disabled = false,\n  minRows = 1,\n  maxRows = 999,\n  autoSize = true,\n  validationStyleEnabled = false,\n  variant,\n  ghostText,\n  ghostLine,\n  ghostOffset,\n  onClick,\n  className,\n  dir = 'auto',\n  ref,\n  ...rest\n}) => {\n  const {\n    lines,\n    containerRef,\n    getText,\n    handleInput,\n    handleBeforeInput,\n    handleKeyDown,\n    handleCut,\n    handlePaste,\n    handleDrop,\n    handleDragOver,\n    getCursorOffset,\n    setCaretPosition,\n    caretFromFlatOffset,\n  } = useContentEditable({ value, defaultValue, onChange, disabled });\n\n  const elRef = useRef<HTMLDivElement | null>(null);\n\n  const setRef = (el: HTMLDivElement | null) => {\n    elRef.current = el;\n    (containerRef as MutableRefObject<HTMLDivElement | null>).current = el;\n  };\n\n  useImperativeHandle(ref, () => ({\n    getContainer: () => elRef.current,\n    getText,\n    focus: () => elRef.current?.focus(),\n    getCursorOffset,\n    setCursorAtOffset: (offset: number) => {\n      setCaretPosition(caretFromFlatOffset(offset, lines));\n    },\n  }));\n\n  useEffect(() => {\n    if (!autoSize || !elRef.current) return;\n\n    const el = elRef.current;\n    const max = LINE_HEIGHT * maxRows + LINE_PADDING;\n    const min = LINE_HEIGHT * minRows + LINE_PADDING;\n\n    el.style.height = 'auto';\n    const sh = el.scrollHeight;\n    el.style.height = `${Math.max(Math.min(sh, max), min)}px`;\n    el.style.overflowY = sh > max ? 'auto' : 'hidden';\n  }, [lines, autoSize, maxRows, minRows]);\n\n  const isEmpty = lines.length === 1 && lines[0] === '';\n  const hasGhost =\n    ghostText && ghostLine !== undefined && ghostOffset !== undefined;\n\n  return (\n    <div className=\"relative w-full\">\n      {isEmpty && placeholder && (\n        <div\n          className=\"pointer-events-none absolute inset-0 select-none px-2 py-3 text-base text-neutral-400 leading-[1.5rem] md:py-2 md:text-sm\"\n          aria-hidden=\"true\"\n        >\n          {placeholder}\n        </div>\n      )}\n\n      <div\n        {...rest}\n        ref={setRef}\n        role=\"textbox\"\n        aria-multiline=\"true\"\n        aria-placeholder={placeholder}\n        aria-disabled={disabled}\n        aria-autocomplete={hasGhost ? 'inline' : undefined}\n        tabIndex={disabled ? -1 : 0}\n        contentEditable={!disabled}\n        suppressContentEditableWarning\n        dir={dir}\n        onInput={handleInput}\n        onBeforeInput={handleBeforeInput}\n        onKeyDown={handleKeyDown}\n        onCut={handleCut}\n        onPaste={handlePaste}\n        onDrop={handleDrop}\n        onDragOver={handleDragOver}\n        onClick={onClick}\n        className={cn(\n          'resize-none whitespace-pre-wrap break-words outline-none',\n          inputVariants({\n            variant,\n            validationStyleEnabled: validationStyleEnabled\n              ? 'enabled'\n              : 'disabled',\n          }),\n          autoSize && 'overflow-y-auto',\n          className\n        )}\n      >\n        {lines.map((text, i) => (\n          <Line\n            key={i}\n            index={i}\n            text={text}\n            isLast={i === lines.length - 1}\n            ghostText={hasGhost && ghostLine === i ? ghostText : undefined}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Button, type ButtonProps, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n  <div className=\"relative w-full p-0.5\">\n    <Button\n      className=\"w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25\"\n      Icon={Icon}\n      data-mode=\"system\"\n      role=\"option\"\n      variant={ButtonVariant.NONE}\n      {...props}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n  theme: Modes;\n  setTheme: (theme: Modes) => void;\n  systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n  theme,\n  setTheme,\n  systemTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const switchMode = (mode: Modes) => {\n    if (mode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(mode);\n    }\n    setMode(mode);\n  };\n\n  const panelIdentifier = 'theme-switcher';\n\n  return (\n    <DropDown identifier={panelIdentifier}>\n      <DropDown.Trigger\n        className=\"p-2\"\n        identifier={panelIdentifier}\n        aria-label=\"Theme selector\"\n      >\n        {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n        {mode === Modes.light && <Sun data-mode=\"light\" />}\n        {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n      </DropDown.Trigger>\n\n      <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n        <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n          <ButtonItem\n            Icon={CircleDashed}\n            onClick={() => switchMode(Modes.system)}\n            isActive={mode === Modes.system}\n            label=\"Restore to system mode\"\n          >\n            System\n          </ButtonItem>\n          <ButtonItem\n            Icon={Sun}\n            onClick={() => switchMode(Modes.light)}\n            isActive={mode === Modes.light}\n            label=\"Switch to light mode\"\n          >\n            Light\n          </ButtonItem>\n          <ButtonItem\n            Icon={Moon}\n            onClick={() => switchMode(Modes.dark)}\n            isActive={mode === Modes.dark}\n            label=\"Switch to dark mode\"\n          >\n            Dark\n          </ButtonItem>\n        </Container>\n      </DropDown.Panel>\n    </DropDown>\n  );\n};\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAA+B,EAAE,MAAM,UAAU,GAAG,YACxD,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,QAAD;EACE,WAAU;EACJ;EACN,aAAU;EACV,MAAK;EACL;EACA,GAAI;EAEH;EACM;CACL;AASR,MAAa,wBAAuD,EAClE,OACA,UACA,kBACI;CAIJ,MAAM,CAAC,MAAM,WAAW,SAHG,gBAAgB,mBACa,MAEJ;CAEpD,MAAM,cAAc,SAAgB;AAClC,MAAI,kBACF,UAAS,uBAA2B;MAEpC,UAAS,KAAK;AAEhB,UAAQ,KAAK;;CAGf,MAAM,kBAAkB;AAExB,QACE,qBAAC,UAAD;EAAU,YAAY;YAAtB,CACE,qBAAC,SAAS,SAAV;GACE,WAAU;GACV,YAAY;GACZ,cAAW;aAHb;IAKG,qBAAyB,oBAAC,cAAD,EAAc,aAAU,UAAW;IAC5D,oBAAwB,oBAAC,KAAD,EAAK,aAAU,SAAU;IACjD,mBAAuB,oBAAC,MAAD,EAAM,aAAU,QAAS;IAChC;MAEnB,oBAAC,SAAS,OAAV;GAAgB,YAAY;GAAiB;GAAY;aACvD,qBAAC,WAAD;IAAW,WAAU;IAAgC,WAAU;cAA/D;KACE,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,oBAAwB;MACvC,UAAU;MACV,OAAM;gBACP;MAEY;KACb,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,mBAAuB;MACtC,UAAU;MACV,OAAM;gBACP;MAEY;KACb,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,kBAAsB;MACrC,UAAU;MACV,OAAM;gBACP;MAEY;KACH;;GACG,EACR"}
+{"version":3,"file":"DesktopThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Button, type ButtonProps, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\nimport { Modes } from './types';\n\nconst ButtonItem: FC<ButtonProps> = ({ Icon, children, ...props }) => (\n  <div className=\"relative w-full p-0.5\">\n    <Button\n      className=\"w-full cursor-pointer rounded-lg p-1 text-left hover:bg-text/10 focus:bg-text-opposite/20 focus:outline-hidden disabled:text-white/25\"\n      Icon={Icon}\n      data-mode=\"system\"\n      role=\"option\"\n      variant={ButtonVariant.NONE}\n      {...props}\n    >\n      {children}\n    </Button>\n  </div>\n);\n\ntype DesktopThemeSwitcherProps = {\n  theme: Modes;\n  setTheme: (theme: Modes) => void;\n  systemTheme: Modes;\n};\n\nexport const DesktopThemeSwitcher: FC<DesktopThemeSwitcherProps> = ({\n  theme,\n  setTheme,\n  systemTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const switchMode = (mode: Modes) => {\n    if (mode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(mode);\n    }\n    setMode(mode);\n  };\n\n  const panelIdentifier = 'theme-switcher';\n\n  return (\n    <DropDown identifier={panelIdentifier}>\n      <DropDown.Trigger\n        className=\"p-2\"\n        identifier={panelIdentifier}\n        aria-label=\"Theme selector\"\n      >\n        {mode === Modes.system && <CircleDashed data-mode=\"system\" />}\n        {mode === Modes.light && <Sun data-mode=\"light\" />}\n        {mode === Modes.dark && <Moon data-mode=\"dark\" />}\n      </DropDown.Trigger>\n\n      <DropDown.Panel identifier={panelIdentifier} isFocusable isOverable>\n        <Container className=\"min-w-[100px] items-start p-1\" separator=\"y\">\n          <ButtonItem\n            Icon={CircleDashed}\n            onClick={() => switchMode(Modes.system)}\n            isActive={mode === Modes.system}\n            label=\"Restore to system mode\"\n          >\n            System\n          </ButtonItem>\n          <ButtonItem\n            Icon={Sun}\n            onClick={() => switchMode(Modes.light)}\n            isActive={mode === Modes.light}\n            label=\"Switch to light mode\"\n          >\n            Light\n          </ButtonItem>\n          <ButtonItem\n            Icon={Moon}\n            onClick={() => switchMode(Modes.dark)}\n            isActive={mode === Modes.dark}\n            label=\"Switch to dark mode\"\n          >\n            Dark\n          </ButtonItem>\n        </Container>\n      </DropDown.Panel>\n    </DropDown>\n  );\n};\n"],"mappings":";;;;;;;;;;;AASA,MAAM,cAA+B,EAAE,MAAM,UAAU,GAAG,YACxD,oBAAC,OAAD;CAAK,WAAU;WACb,oBAAC,QAAD;EACE,WAAU;EACJ;EACN,aAAU;EACV,MAAK;EACL;EACA,GAAI;EAEH;EACM;CACL;AASR,MAAa,wBAAuD,EAClE,OACA,UACA,kBACI;CAIJ,MAAM,CAAC,MAAM,WAAW,SAHG,gBAAgB,mBACa,MAEJ;CAEpD,MAAM,cAAc,SAAgB;EAClC,IAAI,mBACF,SAAS,uBAA2B;OAEpC,SAAS,KAAK;EAEhB,QAAQ,KAAK;;CAGf,MAAM,kBAAkB;CAExB,OACE,qBAAC,UAAD;EAAU,YAAY;YAAtB,CACE,qBAAC,SAAS,SAAV;GACE,WAAU;GACV,YAAY;GACZ,cAAW;aAHb;IAKG,qBAAyB,oBAAC,cAAD,EAAc,aAAU,UAAW;IAC5D,oBAAwB,oBAAC,KAAD,EAAK,aAAU,SAAU;IACjD,mBAAuB,oBAAC,MAAD,EAAM,aAAU,QAAS;IAChC;MAEnB,oBAAC,SAAS,OAAV;GAAgB,YAAY;GAAiB;GAAY;aACvD,qBAAC,WAAD;IAAW,WAAU;IAAgC,WAAU;cAA/D;KACE,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,oBAAwB;MACvC,UAAU;MACV,OAAM;gBACP;MAEY;KACb,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,mBAAuB;MACtC,UAAU;MACV,OAAM;gBACP;MAEY;KACb,oBAAC,YAAD;MACE,MAAM;MACN,eAAe,kBAAsB;MACrC,UAAU;MACV,OAAM;gBACP;MAEY;KACH;;GACG,EACR"}

package/dist/esm/components/ThemeSwitcherDropDown/MobileThemeSwitcher.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n  theme: Modes;\n  systemTheme: Modes;\n  setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n  isCurrentMode,\n  isNextMode,\n}: {\n  isCurrentMode: boolean;\n  isNextMode: boolean;\n}) =>\n  cn(\n    `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n    `opacity-0 transition-opacity duration-300 ease-in-out`,\n    isCurrentMode && `opacity-100 group-hover:opacity-0`,\n    isNextMode && `group-hover:opacity-100`\n  );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n  theme,\n  systemTheme,\n  setTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const nextMode =\n    // Start loop\n    // If mode is system, toggle the theme inverse of the system theme\n    mode === Modes.system\n      ? theme === Modes.dark\n        ? Modes.light\n        : Modes.dark\n      : // Close loop\n        // If current theme same as system theme, reset by toggle the system theme\n        isThemeSystemTheme\n        ? Modes.system\n        : // Go to next step\n          // Otherwise, toggle the remaining theme\n          mode === Modes.light\n          ? Modes.dark\n          : Modes.light;\n\n  const toggleMode = () => {\n    if (nextMode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(nextMode);\n    }\n    setMode(nextMode);\n  };\n\n  return (\n    <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n      <CircleDashed\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.system,\n          isNextMode: nextMode === Modes.system,\n        })}\n        onClick={toggleMode}\n        data-mode=\"system\"\n      />\n\n      <Moon\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.light,\n          isNextMode: nextMode === Modes.light,\n        })}\n        onClick={toggleMode}\n        data-mode=\"light\"\n      />\n\n      <Sun\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.dark,\n          isNextMode: nextMode === Modes.dark,\n        })}\n        onClick={toggleMode}\n        data-mode=\"dark\"\n      />\n    </button>\n  );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,eACA,iBAKA,GACE,+DACA,yDACA,iBAAiB,qCACjB,cAAc,0BACf;AAEH,MAAa,uBAAqD,EAChE,OACA,aACA,eACI;CACJ,MAAM,qBAAqB,gBAAgB;CAG3C,MAAM,CAAC,MAAM,WAAW,SAFJ,gCAAoC,MAEJ;CAEpD,MAAM,WAGJ,oBACI,sCAKA,gCAIE;CAIR,MAAM,mBAAmB;AACvB,MAAI,sBACF,UAAS,uBAA2B;MAEpC,UAAS,SAAS;AAEpB,UAAQ,SAAS;;AAGnB,QACE,qBAAC,UAAD;EAAQ,WAAU;EAAyB,cAAW;YAAtD;GACE,oBAAC,cAAD;IACE,WAAW,aAAa;KACtB,eAAe;KACf,YAAY;KACb,CAAC;IACF,SAAS;IACT,aAAU;IACV;GAEF,oBAAC,MAAD;IACE,WAAW,aAAa;KACtB,eAAe;KACf,YAAY;KACb,CAAC;IACF,SAAS;IACT,aAAU;IACV;GAEF,oBAAC,KAAD;IACE,WAAW,aAAa;KACtB,eAAe;KACf,YAAY;KACb,CAAC;IACF,SAAS;IACT,aAAU;IACV;GACK"}
+{"version":3,"file":"MobileThemeSwitcher.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/MobileThemeSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { CircleDashed, Moon, Sun } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { Modes } from './types';\n\ntype MobileThemeSwitcherProps = {\n  theme: Modes;\n  systemTheme: Modes;\n  setTheme: (theme: Modes) => void;\n};\n\nconst getIconStyle = ({\n  isCurrentMode,\n  isNextMode,\n}: {\n  isCurrentMode: boolean;\n  isNextMode: boolean;\n}) =>\n  cn(\n    `absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2`,\n    `opacity-0 transition-opacity duration-300 ease-in-out`,\n    isCurrentMode && `opacity-100 group-hover:opacity-0`,\n    isNextMode && `group-hover:opacity-100`\n  );\n\nexport const MobileThemeSwitcher: FC<MobileThemeSwitcherProps> = ({\n  theme,\n  systemTheme,\n  setTheme,\n}) => {\n  const isThemeSystemTheme = systemTheme === theme;\n  const defaultMode = isThemeSystemTheme ? Modes.system : theme;\n\n  const [mode, setMode] = useState<Modes>(defaultMode);\n\n  const nextMode =\n    // Start loop\n    // If mode is system, toggle the theme inverse of the system theme\n    mode === Modes.system\n      ? theme === Modes.dark\n        ? Modes.light\n        : Modes.dark\n      : // Close loop\n        // If current theme same as system theme, reset by toggle the system theme\n        isThemeSystemTheme\n        ? Modes.system\n        : // Go to next step\n          // Otherwise, toggle the remaining theme\n          mode === Modes.light\n          ? Modes.dark\n          : Modes.light;\n\n  const toggleMode = () => {\n    if (nextMode === Modes.system) {\n      setTheme(systemTheme ?? Modes.light);\n    } else {\n      setTheme(nextMode);\n    }\n    setMode(nextMode);\n  };\n\n  return (\n    <button className=\"group relative size-10\" aria-label=\"Theme selector\">\n      <CircleDashed\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.system,\n          isNextMode: nextMode === Modes.system,\n        })}\n        onClick={toggleMode}\n        data-mode=\"system\"\n      />\n\n      <Moon\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.light,\n          isNextMode: nextMode === Modes.light,\n        })}\n        onClick={toggleMode}\n        data-mode=\"light\"\n      />\n\n      <Sun\n        className={getIconStyle({\n          isCurrentMode: mode === Modes.dark,\n          isNextMode: nextMode === Modes.dark,\n        })}\n        onClick={toggleMode}\n        data-mode=\"dark\"\n      />\n    </button>\n  );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,EACpB,eACA,iBAKA,GACE,+DACA,yDACA,iBAAiB,qCACjB,cAAc,0BACf;AAEH,MAAa,uBAAqD,EAChE,OACA,aACA,eACI;CACJ,MAAM,qBAAqB,gBAAgB;CAG3C,MAAM,CAAC,MAAM,WAAW,SAFJ,gCAAoC,MAEJ;CAEpD,MAAM,WAGJ,oBACI,sCAKA,gCAIE;CAIR,MAAM,mBAAmB;EACvB,IAAI,uBACF,SAAS,uBAA2B;OAEpC,SAAS,SAAS;EAEpB,QAAQ,SAAS;;CAGnB,OACE,qBAAC,UAAD;EAAQ,WAAU;EAAyB,cAAW;YAAtD;GACE,oBAAC,cAAD;IACE,WAAW,aAAa;KACtB,eAAe;KACf,YAAY;KACb,CAAC;IACF,SAAS;IACT,aAAU;IACV;GAEF,oBAAC,MAAD;IACE,WAAW,aAAa;KACtB,eAAe;KACf,YAAY;KACb,CAAC;IACF,SAAS;IACT,aAAU;IACV;GAEF,oBAAC,KAAD;IACE,WAAW,aAAa;KACtB,eAAe;KACf,YAAY;KACb,CAAC;IACF,SAAS;IACT,aAAU;IACV;GACK"}

package/dist/esm/components/ThemeSwitcherDropDown/types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/types.ts"],"sourcesContent":["export enum Modes {\n  dark = 'dark',\n  light = 'light',\n  system = 'system',\n}\n"],"mappings":";AAAA,IAAY,QAAL;AACL;AACA;AACA;;KACD"}
+{"version":3,"file":"types.mjs","names":[],"sources":["../../../../src/components/ThemeSwitcherDropDown/types.ts"],"sourcesContent":["export enum Modes {\n  dark = 'dark',\n  light = 'light',\n  system = 'system',\n}\n"],"mappings":";AAAA,IAAY,QAAL;CACL;CACA;CACA;;KACD"}