npm - @ryanhe919/lumen-ui - Versions diffs - 0.2.1 → 0.3.0 - Mend

@ryanhe919/lumen-ui 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (503) hide show

package/dist/LMTable-j1ZzAzXB.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LMTable-j1ZzAzXB.cjs","sources":["../src/components/DataDisplay/LMTable/LMTable.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback, memo } from 'react'\nimport { SIZE_TABLE_CONFIG, SIZE_TEXT_CLASSES } from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMTableColumn<T = Record<string, unknown>> {\n /** Column title */\n title: string\n /** Data field name */\n dataIndex: string\n /** Column width */\n width?: string | number\n /** Custom render function */\n render?: (value: unknown, record: T, index: number) => React.ReactNode\n /** Sortable */\n sorter?: boolean\n /** Column alignment */\n align?: 'left' | 'center' | 'right'\n /** Fixed column */\n fixed?: 'left' | 'right'\n}\n\nexport interface LMPaginationConfig {\n /** Current page */\n current: number\n /** Page size */\n pageSize: number\n /** Total count */\n total: number\n /** Show pagination */\n showPagination?: boolean\n /** Page size options */\n pageSizeOptions?: number[]\n /** Show total */\n showTotal?: boolean\n /** Show quick jumper */\n showQuickJumper?: boolean\n /** Show size changer */\n showSizeChanger?: boolean\n /** Change callback */\n onChange?: (page: number, pageSize: number) => void\n}\n\nexport interface LMLoadMoreConfig {\n /** Enable load more */\n enabled: boolean\n /** Threshold */\n threshold?: number\n /** Has more data */\n hasMore: boolean\n /** Loading state */\n loading: boolean\n /** Load more callback */\n onLoadMore: () => void\n}\n\nexport interface LMTableProps<T = Record<string, unknown>> {\n /** Data source */\n dataSource: T[]\n /** Columns */\n columns: LMTableColumn<T>[]\n /** Row key */\n rowKey?: string | ((record: T, index: number) => string)\n /** Pagination config */\n pagination?: LMPaginationConfig\n /** Load more config */\n loadMore?: LMLoadMoreConfig\n /** Loading state */\n loading?: boolean\n /** Empty text */\n emptyText?: string\n /** Size */\n size?: ComponentSize\n /** Bordered */\n bordered?: boolean\n /** Striped */\n striped?: boolean\n /** Selectable */\n selectable?: boolean\n /** Selected row keys */\n selectedRowKeys?: string[]\n /** Selection change callback */\n onSelectionChange?: (selectedRowKeys: string[], selectedRows: T[]) => void\n /** Row click callback */\n onRowClick?: (record: T, index: number) => void\n /** Sort change callback */\n onSortChange?: (field: string, order: 'ascend' | 'descend') => void\n /** Class name */\n className?: string\n /** Full height */\n fullHeight?: boolean\n /** Variant */\n variant?: 'default' | 'elevated' | 'outline' | 'minimal' | 'soft' | 'zebra'\n}\n\nconst CaretUpIcon: React.FC<{ active?: boolean }> = ({ active }) => (\n <svg\n className=\"w-2.5 h-2.5\"\n viewBox=\"0 0 10 6\"\n fill=\"none\"\n style={{ color: active ? 'var(--lm-primary-500)' : 'var(--lm-gray-400)' }}\n >\n <path d=\"M5 0L10 6H0L5 0Z\" fill=\"currentColor\" />\n </svg>\n)\n\nconst CaretDownIcon: React.FC<{ active?: boolean }> = ({ active }) => (\n <svg\n className=\"w-2.5 h-2.5\"\n viewBox=\"0 0 10 6\"\n fill=\"none\"\n style={{ color: active ? 'var(--lm-primary-500)' : 'var(--lm-gray-400)' }}\n >\n <path d=\"M5 6L0 0H10L5 6Z\" fill=\"currentColor\" />\n </svg>\n)\n\nconst ChevronLeftIcon: React.FC = () => (\n <svg className=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n </svg>\n)\n\nconst ChevronRightIcon: React.FC = () => (\n <svg className=\"w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2}>\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n)\n\nconst SpinnerIcon: React.FC = () => (\n <svg className=\"w-4 h-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n />\n </svg>\n)\n\nconst LMTable = <T = unknown,>({\n dataSource,\n columns,\n rowKey = 'id',\n pagination,\n loadMore,\n loading = false,\n emptyText = 'No data',\n size = 'md',\n bordered = false,\n striped = false,\n selectable = false,\n selectedRowKeys = [],\n onSelectionChange,\n onRowClick,\n onSortChange,\n className = '',\n fullHeight = false,\n variant = 'default',\n}: LMTableProps<T>) => {\n const [currentPage, setCurrentPage] = useState(1)\n const [pageSize, setPageSize] = useState(10)\n const [sortField, setSortField] = useState<string>('')\n const [sortOrder, setSortOrder] = useState<'ascend' | 'descend'>('ascend')\n const containerRef = useRef<HTMLDivElement>(null)\n\n const getRowKey = useCallback(\n (record: T, index: number): string => {\n if (typeof rowKey === 'function') {\n return rowKey(record, index)\n }\n const key = (record as unknown as Record<string, unknown>)[rowKey as string]\n return (typeof key === 'string' ? key : String(key)) || index.toString()\n },\n [rowKey]\n )\n\n const getValueByDataIndex = useCallback((record: T, dataIndex: string) => {\n const parts = String(dataIndex).split('.')\n let current: unknown = record as unknown as Record<string, unknown>\n for (const p of parts) {\n if (\n current == null ||\n typeof current !== 'object' ||\n !(p in (current as Record<string, unknown>))\n ) {\n return ''\n }\n current = (current as Record<string, unknown>)[p]\n }\n return current as unknown\n }, [])\n\n const handleSort = useCallback(\n (column: LMTableColumn<T>) => {\n if (!column.sorter) return\n\n let newSortOrder: 'ascend' | 'descend' = 'ascend'\n if (sortField === column.dataIndex) {\n newSortOrder = sortOrder === 'ascend' ? 'descend' : 'ascend'\n }\n\n setSortField(column.dataIndex)\n setSortOrder(newSortOrder)\n onSortChange?.(column.dataIndex, newSortOrder)\n },\n [sortField, sortOrder, onSortChange]\n )\n\n const handlePageChange = useCallback(\n (page: number) => {\n setCurrentPage(page)\n pagination?.onChange?.(page, pageSize)\n },\n [pagination, pageSize]\n )\n\n const handlePageSizeChange = useCallback(\n (newPageSize: number) => {\n setPageSize(newPageSize)\n setCurrentPage(1)\n pagination?.onChange?.(1, newPageSize)\n },\n [pagination]\n )\n\n const handleRowSelect = useCallback(\n (record: T, checked: boolean) => {\n const key = getRowKey(record, dataSource.indexOf(record))\n let newSelectedRowKeys: string[]\n\n if (checked) {\n newSelectedRowKeys = [...selectedRowKeys, key]\n } else {\n newSelectedRowKeys = selectedRowKeys.filter((k) => k !== key)\n }\n\n const newSelectedRows = dataSource.filter((item) =>\n newSelectedRowKeys.includes(getRowKey(item, dataSource.indexOf(item)))\n )\n\n onSelectionChange?.(newSelectedRowKeys, newSelectedRows)\n },\n [selectedRowKeys, dataSource, getRowKey, onSelectionChange]\n )\n\n const handleSelectAll = useCallback(\n (checked: boolean) => {\n if (checked) {\n const allKeys = dataSource.map((record, index) => getRowKey(record, index))\n onSelectionChange?.(allKeys, dataSource)\n } else {\n onSelectionChange?.([], [])\n }\n },\n [dataSource, getRowKey, onSelectionChange]\n )\n\n const handleScroll = useCallback(() => {\n if (!loadMore?.enabled || loadMore.loading || !loadMore.hasMore) return\n\n const container = containerRef.current\n if (!container) return\n\n const { scrollTop, scrollHeight, clientHeight } = container\n const threshold = loadMore.threshold || 100\n\n if (scrollTop + clientHeight >= scrollHeight - threshold) {\n loadMore.onLoadMore()\n }\n }, [loadMore])\n\n useEffect(() => {\n const container = containerRef.current\n if (!container || !loadMore?.enabled) return\n\n container.addEventListener('scroll', handleScroll)\n return () => container.removeEventListener('scroll', handleScroll)\n }, [handleScroll, loadMore?.enabled, loadMore?.loading, loadMore?.hasMore])\n\n useEffect(() => {\n if (pagination?.current !== undefined) {\n setCurrentPage(pagination.current)\n }\n if (pagination?.pageSize !== undefined) {\n setPageSize(pagination.pageSize)\n }\n }, [pagination])\n\n const paginationUiClasses = {\n xs: {\n container: 'px-3 py-2',\n text: 'text-xs',\n control: 'px-2 py-1 text-xs',\n gap: 'gap-1',\n select: 'px-2 py-1 text-xs',\n input: 'px-2 py-1 text-xs w-14',\n },\n sm: {\n container: 'px-3 py-2',\n text: 'text-sm',\n control: 'px-2 py-1 text-sm',\n gap: 'gap-2',\n select: 'px-2 py-1 text-sm',\n input: 'px-2 py-1 text-sm w-16',\n },\n md: {\n container: 'px-4 py-3',\n text: 'text-sm',\n control: 'px-3 py-1 text-sm',\n gap: 'gap-2',\n select: 'px-2 py-1 text-sm',\n input: 'px-2 py-1 text-sm w-16',\n },\n lg: {\n container: 'px-5 py-3.5',\n text: 'text-base',\n control: 'px-3.5 py-1.5 text-base',\n gap: 'gap-3',\n select: 'px-3 py-1.5 text-base',\n input: 'px-3 py-1.5 text-base w-20',\n },\n xl: {\n container: 'px-6 py-4',\n text: 'text-lg',\n control: 'px-4 py-2 text-lg',\n gap: 'gap-3',\n select: 'px-4 py-2 text-lg',\n input: 'px-4 py-2 text-lg w-24',\n },\n '2xl': {\n container: 'px-8 py-5',\n text: 'text-xl',\n control: 'px-5 py-2.5 text-xl',\n gap: 'gap-4',\n select: 'px-5 py-2.5 text-xl',\n input: 'px-5 py-2.5 text-xl w-28',\n },\n } as const\n\n const totalPages =\n pagination && pagination.total && pageSize\n ? Math.max(1, Math.ceil(pagination.total / pageSize))\n : 1\n\n const getTableStyles = () => ({\n backgroundColor:\n variant === 'minimal'\n ? 'transparent'\n : variant === 'soft'\n ? 'var(--lm-bg-paper)'\n : 'var(--lm-bg-elevated)',\n borderColor:\n variant === 'outline'\n ? 'var(--lm-border-strong)'\n : bordered\n ? 'var(--lm-border-default)'\n : 'transparent',\n })\n\n const getHeaderStyles = () => ({\n backgroundColor: variant === 'minimal' ? 'transparent' : 'var(--lm-bg-elevated)',\n color: 'var(--lm-text-primary)',\n borderColor: variant === 'outline' ? 'var(--lm-border-strong)' : 'var(--lm-border-light)',\n })\n\n const getCellStyles = (isHeader = false) => ({\n backgroundColor: isHeader\n ? variant === 'minimal'\n ? 'transparent'\n : 'var(--lm-bg-paper)'\n : variant === 'minimal'\n ? 'transparent'\n : variant === 'soft'\n ? 'var(--lm-bg-paper)'\n : 'var(--lm-bg-elevated)',\n color: 'var(--lm-text-primary)',\n borderColor:\n variant === 'outline'\n ? 'var(--lm-border-strong)'\n : variant === 'minimal'\n ? 'transparent'\n : 'var(--lm-border-light)',\n })\n\n const getRowStyles = (index: number, isSelected = false) => {\n const baseStyles = {\n backgroundColor: isSelected\n ? 'var(--lm-primary-50)'\n : (striped || variant === 'zebra') && index % 2 === 1\n ? 'var(--lm-bg-paper)'\n : variant === 'minimal'\n ? 'transparent'\n : variant === 'soft'\n ? 'var(--lm-bg-paper)'\n : 'var(--lm-bg-elevated)',\n color: 'var(--lm-text-primary)',\n }\n\n if (isSelected) {\n return {\n ...baseStyles,\n borderColor: 'var(--lm-primary-200)',\n }\n }\n\n return baseStyles\n }\n\n const getPaginationStyles = () => ({\n backgroundColor:\n variant === 'minimal'\n ? 'transparent'\n : variant === 'soft'\n ? 'var(--lm-bg-paper)'\n : 'var(--lm-bg-elevated)',\n color: 'var(--lm-text-primary)',\n borderColor: variant === 'outline' ? 'var(--lm-border-strong)' : 'var(--lm-border-default)',\n boxShadow: variant === 'elevated' ? 'var(--lm-shadow-md)' : undefined,\n })\n\n const getButtonStyles = (disabled = false, active = false) => {\n if (disabled) {\n return {\n backgroundColor: 'var(--lm-bg-paper)',\n color: 'var(--lm-text-disabled)',\n borderColor: 'var(--lm-border-light)',\n cursor: 'not-allowed',\n opacity: 0.6,\n }\n }\n\n if (active) {\n return {\n backgroundColor: 'var(--lm-primary-500)',\n color: 'white',\n borderColor: 'var(--lm-primary-500)',\n }\n }\n\n return {\n backgroundColor: 'var(--lm-bg-paper)',\n color: 'var(--lm-text-primary)',\n borderColor: 'var(--lm-border-default)',\n }\n }\n\n const getLoadingStyles = () => ({\n color: 'var(--lm-text-secondary)',\n })\n\n const getEmptyStyles = () => ({\n color: 'var(--lm-text-secondary)',\n })\n\n const tableClassName = `w-full ${SIZE_TEXT_CLASSES[size]} border-collapse ${className}`\n .trim()\n .replace(/\\s+/g, ' ')\n\n const isAllSelected = dataSource.length > 0 && selectedRowKeys.length === dataSource.length\n\n const isIndeterminate =\n selectedRowKeys.length > 0 && selectedRowKeys.length < dataSource.length\n\n const rootClassName = `space-y-4 ${fullHeight ? 'h-full flex flex-col min-h-0' : ''}`\n .trim()\n .replace(/\\s+/g, ' ')\n\n const tableContainerClassName = `${\n fullHeight\n ? 'flex-1 min-h-0 overflow-auto'\n : `overflow-auto ${loadMore?.enabled ? 'max-h-96' : ''}`\n }`\n .trim()\n .replace(/\\s+/g, ' ')\n\n const wrapperVariantClasses = (() => {\n switch (variant) {\n case 'elevated':\n return 'rounded-2xl border shadow-lg'\n case 'outline':\n return 'rounded-xl border'\n case 'soft':\n return 'rounded-xl border'\n case 'minimal':\n return 'rounded-xl'\n case 'zebra':\n return 'rounded-xl border'\n default:\n return ''\n }\n })()\n\n return (\n <div className={rootClassName}>\n <div\n ref={containerRef}\n className={`${tableContainerClassName} ${wrapperVariantClasses}`}\n style={{ borderColor: 'var(--lm-border-default)' }}\n >\n <table className={tableClassName} style={getTableStyles()}>\n <thead className=\"sticky top-0 z-20\" style={getHeaderStyles()}>\n <tr>\n {selectable && (\n <th\n className={`${SIZE_TABLE_CONFIG[size].cellPadding} py-3 ${SIZE_TEXT_CLASSES[size]} text-left ${bordered ? 'border-r' : ''} font-semibold`}\n style={getCellStyles(true)}\n >\n <input\n type=\"checkbox\"\n checked={isAllSelected}\n ref={(input) => {\n if (input) input.indeterminate = isIndeterminate\n }}\n onChange={(e) => handleSelectAll(e.target.checked)}\n className=\"w-4 h-4\"\n style={{ accentColor: 'var(--lm-primary-500)' }}\n />\n </th>\n )}\n {columns.map((column) => (\n <th\n key={column.dataIndex}\n className={`${SIZE_TABLE_CONFIG[size].cellPadding} py-3 text-left ${bordered ? 'border-r' : ''} ${\n column.sorter ? 'cursor-pointer hover:bg-opacity-60' : ''\n } font-semibold`}\n style={{\n ...getCellStyles(true),\n width: column.width,\n textAlign: column.align || 'left',\n fontSize:\n size === 'xs'\n ? '0.8125rem'\n : size === 'sm'\n ? '0.875rem'\n : '0.9375rem',\n }}\n onClick={() => handleSort(column)}\n >\n <div className=\"flex items-center gap-2\">\n <span>{column.title}</span>\n {column.sorter && (\n <div className=\"flex flex-col -space-y-1\">\n <CaretUpIcon\n active={sortField === column.dataIndex && sortOrder === 'ascend'}\n />\n <CaretDownIcon\n active={sortField === column.dataIndex && sortOrder === 'descend'}\n />\n </div>\n )}\n </div>\n </th>\n ))}\n </tr>\n </thead>\n\n <tbody>\n {loading ? (\n <tr>\n <td\n colSpan={columns.length + (selectable ? 1 : 0)}\n className={`px-4 py-8 text-center ${SIZE_TEXT_CLASSES[size]}`}\n style={getLoadingStyles()}\n >\n <div className=\"flex items-center justify-center gap-2\">\n <SpinnerIcon />\n Loading...\n </div>\n </td>\n </tr>\n ) : dataSource.length === 0 ? (\n <tr>\n <td\n colSpan={columns.length + (selectable ? 1 : 0)}\n className={`px-4 py-8 text-center ${SIZE_TEXT_CLASSES[size]}`}\n style={getEmptyStyles()}\n >\n {emptyText}\n </td>\n </tr>\n ) : (\n dataSource.map((record, index) => {\n const key = getRowKey(record, index)\n const isSelected = selectedRowKeys.includes(key)\n const isLastRow = index === dataSource.length - 1\n\n return (\n <tr\n key={key}\n className={`${onRowClick ? 'cursor-pointer hover:bg-opacity-60' : ''} transition-colors border-t ${isLastRow ? 'border-b' : ''}`}\n style={{\n ...getRowStyles(index, isSelected),\n borderColor: 'var(--lm-border-light)',\n }}\n onClick={() => onRowClick?.(record, index)}\n >\n {selectable && (\n <td\n className={`${SIZE_TABLE_CONFIG[size].cellPadding} ${SIZE_TEXT_CLASSES[size]} ${bordered ? 'border-r' : ''}`}\n style={getCellStyles()}\n onClick={(e) => e.stopPropagation()}\n >\n <input\n type=\"checkbox\"\n checked={isSelected}\n onChange={(e) => handleRowSelect(record, e.target.checked)}\n className=\"w-4 h-4\"\n style={{ accentColor: 'var(--lm-primary-500)' }}\n />\n </td>\n )}\n {columns.map((column) => (\n <td\n key={column.dataIndex}\n className={`${SIZE_TABLE_CONFIG[size].cellPadding} ${SIZE_TEXT_CLASSES[size]} ${bordered ? 'border-r' : ''}`}\n style={{\n ...getCellStyles(),\n textAlign: column.align || 'left',\n }}\n >\n {column.render\n ? column.render(\n getValueByDataIndex(record, column.dataIndex),\n record,\n index\n )\n : String(getValueByDataIndex(record, column.dataIndex) ?? '')}\n </td>\n ))}\n </tr>\n )\n })\n )}\n </tbody>\n </table>\n </div>\n\n {pagination?.showPagination && (\n <div\n className={`flex items-center justify-between ${paginationUiClasses[size].container} rounded-2xl border`}\n style={getPaginationStyles()}\n >\n {(() => {\n const maxButtons = 5\n const half = Math.floor(maxButtons / 2)\n let start = Math.max(1, currentPage - half)\n const end = Math.min(totalPages, start + maxButtons - 1)\n if (end - start + 1 < maxButtons) {\n start = Math.max(1, end - maxButtons + 1)\n }\n const pageNumbers = Array.from({ length: end - start + 1 }, (_, i) => start + i)\n\n return (\n <>\n <div className=\"flex items-center gap-4\">\n {pagination.showTotal && (\n <span\n className={paginationUiClasses[size].text}\n style={{ color: 'var(--lm-text-secondary)' }}\n >\n Total {pagination.total} items / {totalPages} pages\n </span>\n )}\n {pagination.showSizeChanger && (\n <div className=\"flex items-center gap-2\">\n <span\n className={paginationUiClasses[size].text}\n style={{ color: 'var(--lm-text-secondary)' }}\n >\n Show:\n </span>\n <select\n value={pageSize}\n onChange={(e) => handlePageSizeChange(Number(e.target.value))}\n className={`${paginationUiClasses[size].select} border rounded-lg focus:ring-2 focus:ring-primary-400 focus:outline-none`}\n style={{\n backgroundColor: 'var(--lm-bg-paper)',\n color: 'var(--lm-text-primary)',\n borderColor: 'var(--lm-border-default)',\n }}\n >\n {pagination.pageSizeOptions?.map((s) => (\n <option key={s} value={s}>\n {s} / page\n </option>\n ))}\n </select>\n </div>\n )}\n </div>\n\n <div className={`flex items-center ${paginationUiClasses[size].gap}`}>\n <button\n onClick={() => handlePageChange(currentPage - 1)}\n disabled={currentPage <= 1}\n className={`${paginationUiClasses[size].control} border rounded-lg transition-colors`}\n style={getButtonStyles(currentPage <= 1)}\n aria-label=\"Previous page\"\n title=\"Previous page\"\n >\n <ChevronLeftIcon />\n </button>\n\n {pageNumbers.map((page) => (\n <button\n key={page}\n onClick={() => handlePageChange(page)}\n className={`${paginationUiClasses[size].control} border rounded-lg transition-colors ${currentPage === page ? 'font-medium' : ''}`}\n style={getButtonStyles(false, currentPage === page)}\n >\n {page}\n </button>\n ))}\n\n <button\n onClick={() => handlePageChange(currentPage + 1)}\n disabled={currentPage >= totalPages}\n className={`${paginationUiClasses[size].control} border rounded-lg transition-colors`}\n style={getButtonStyles(currentPage >= totalPages)}\n aria-label=\"Next page\"\n title=\"Next page\"\n >\n <ChevronRightIcon />\n </button>\n\n {pagination.showQuickJumper && (\n <div className={`flex items-center ${paginationUiClasses[size].gap} ml-4`}>\n <span\n className={paginationUiClasses[size].text}\n style={{ color: 'var(--lm-text-secondary)' }}\n >\n Go to:\n </span>\n <input\n type=\"number\"\n min={1}\n max={totalPages}\n className={`${paginationUiClasses[size].input} border rounded-lg focus:ring-2 focus:ring-primary-400 focus:outline-none`}\n style={{\n backgroundColor: 'var(--lm-bg-paper)',\n color: 'var(--lm-text-primary)',\n borderColor: 'var(--lm-border-default)',\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n const page = Number(e.currentTarget.value)\n if (page >= 1 && page <= totalPages) {\n handlePageChange(page)\n }\n }\n }}\n />\n </div>\n )}\n </div>\n </>\n )\n })()}\n </div>\n )}\n\n {loadMore?.enabled && loadMore.hasMore && (\n <div className=\"text-center py-4\">\n <button\n onClick={loadMore.onLoadMore}\n disabled={loadMore.loading}\n className=\"px-6 py-2 text-sm border rounded-2xl transition-colors\"\n style={getButtonStyles(loadMore.loading)}\n >\n {loadMore.loading ? (\n <div className=\"flex items-center gap-2\">\n <SpinnerIcon />\n Loading...\n </div>\n ) : (\n 'Load more'\n )}\n </button>\n </div>\n )}\n </div>\n )\n}\n\nexport default memo(LMTable) as typeof LMTable\n"],"names":["jsx","jsxs","useState","useRef","useCallback","useEffect","SIZE_TEXT_CLASSES","SIZE_TABLE_CONFIG","Fragment","memo"],"mappings":"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"}

package/dist/LMTabs-D5n9lB8X.js ADDED Viewed

@@ -0,0 +1,210 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { c as clampComponentSize, f as SIZE_GAP_CLASSES, b as SIZE_TEXT_CLASSES, C as COMPONENT_SIZE_ORDER } from "./componentSizes-CdWNL526.js";
+const LMTabs = ({
+  activeKey: controlledActiveKey,
+  defaultActiveKey,
+  items,
+  type = "line",
+  size = "md",
+  centered = false,
+  tabBarExtraContent,
+  onChange,
+  onTabClick,
+  className = ""
+}) => {
+  var _a;
+  const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER);
+  const [internalActiveKey, setInternalActiveKey] = useState(
+    defaultActiveKey || ((_a = items[0]) == null ? void 0 : _a.key) || ""
+  );
+  const [inkStyle, setInkStyle] = useState({});
+  const tabsRef = useRef(null);
+  const tabRefs = useRef(/* @__PURE__ */ new Map());
+  const activeKey = controlledActiveKey ?? internalActiveKey;
+  const tabPaddingClasses = {
+    xs: "px-2 py-1",
+    sm: "px-3 py-1.5",
+    md: "px-4 py-2",
+    lg: "px-5 py-2.5",
+    xl: "px-6 py-3",
+    "2xl": "px-8 py-4"
+  };
+  const cardPaddingClasses = {
+    xs: "px-2 py-1",
+    sm: "px-3 py-1.5",
+    md: "px-4 py-2",
+    lg: "px-5 py-2.5",
+    xl: "px-6 py-3",
+    "2xl": "px-8 py-4"
+  };
+  const updateInkBar = useCallback(() => {
+    if (type !== "line") return;
+    const activeTab = tabRefs.current.get(activeKey);
+    const container = tabsRef.current;
+    if (activeTab && container) {
+      const containerRect = container.getBoundingClientRect();
+      const tabRect = activeTab.getBoundingClientRect();
+      setInkStyle({
+        left: tabRect.left - containerRect.left,
+        width: tabRect.width
+      });
+    }
+  }, [activeKey, type]);
+  useEffect(() => {
+    updateInkBar();
+  }, [updateInkBar]);
+  useEffect(() => {
+    const handleResize = () => updateInkBar();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [updateInkBar]);
+  const handleTabClick = (item) => {
+    if (item.disabled) return;
+    onTabClick == null ? void 0 : onTabClick(item.key);
+    if (controlledActiveKey === void 0) {
+      setInternalActiveKey(item.key);
+    }
+    onChange == null ? void 0 : onChange(item.key);
+  };
+  const getTabStyles = (item, isActive) => {
+    if (item.disabled) {
+      return {
+        color: "var(--lm-text-disabled)",
+        cursor: "not-allowed"
+      };
+    }
+    if (type === "line") {
+      return {
+        color: isActive ? "var(--lm-primary-600)" : "var(--lm-text-secondary)",
+        backgroundColor: "transparent"
+      };
+    }
+    if (type === "card") {
+      return {
+        color: isActive ? "var(--lm-primary-600)" : "var(--lm-text-secondary)",
+        backgroundColor: isActive ? "var(--lm-bg-elevated)" : "transparent",
+        borderColor: isActive ? "var(--lm-border-default)" : "transparent",
+        borderBottomColor: isActive ? "var(--lm-bg-elevated)" : "transparent"
+      };
+    }
+    return {
+      color: isActive ? "white" : "var(--lm-text-secondary)",
+      backgroundColor: isActive ? "var(--lm-primary-500)" : "transparent"
+    };
+  };
+  const getTabHoverStyles = (item, isActive) => {
+    if (item.disabled || isActive) return {};
+    if (type === "line") {
+      return {
+        color: "var(--lm-text-primary)"
+      };
+    }
+    if (type === "card") {
+      return {
+        color: "var(--lm-text-primary)",
+        backgroundColor: "var(--lm-bg-hover)"
+      };
+    }
+    return {
+      color: "var(--lm-text-primary)",
+      backgroundColor: "var(--lm-bg-hover)"
+    };
+  };
+  const renderTab = (item) => {
+    const isActive = item.key === activeKey;
+    const baseClasses = `
+      ${type === "line" ? tabPaddingClasses[resolvedSize] : cardPaddingClasses[resolvedSize]}
+      ${SIZE_TEXT_CLASSES[resolvedSize]}
+      flex items-center ${SIZE_GAP_CLASSES[resolvedSize]}
+      font-medium transition-all duration-200
+      outline-none focus:ring-2 focus:ring-offset-1 focus:ring-[var(--lm-primary-400)]
+    `;
+    const typeClasses = {
+      line: "",
+      card: `border border-b-0 rounded-t-lg ${isActive ? "-mb-px" : ""}`,
+      rounded: "rounded-full"
+    };
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: (el) => {
+          if (el) tabRefs.current.set(item.key, el);
+        },
+        className: `${baseClasses} ${typeClasses[type]}`,
+        style: getTabStyles(item, isActive),
+        onClick: () => handleTabClick(item),
+        disabled: item.disabled,
+        role: "tab",
+        "aria-selected": isActive,
+        "aria-disabled": item.disabled,
+        tabIndex: isActive ? 0 : -1,
+        onMouseEnter: (e) => {
+          if (!item.disabled && !isActive) {
+            Object.assign(e.currentTarget.style, getTabHoverStyles(item, isActive));
+          }
+        },
+        onMouseLeave: (e) => {
+          Object.assign(e.currentTarget.style, getTabStyles(item, isActive));
+        },
+        children: [
+          item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: item.icon }),
+          /* @__PURE__ */ jsx("span", { children: item.label })
+        ]
+      },
+      item.key
+    );
+  };
+  const activeItem = items.find((item) => item.key === activeKey);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `
+          flex items-center
+          ${centered ? "justify-center" : "justify-between"}
+          ${type === "line" ? "border-b" : ""}
+          ${type === "card" ? "border-b" : ""}
+        `,
+        style: {
+          borderColor: type === "line" || type === "card" ? "var(--lm-border-default)" : void 0
+        },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: tabsRef,
+              className: `
+            flex items-center relative
+            ${type === "rounded" ? `${SIZE_GAP_CLASSES[resolvedSize]} p-1 rounded-full` : ""}
+          `,
+              style: {
+                backgroundColor: type === "rounded" ? "var(--lm-bg-paper)" : void 0
+              },
+              role: "tablist",
+              children: [
+                items.map(renderTab),
+                type === "line" && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute bottom-0 h-0.5 transition-all duration-300",
+                    style: {
+                      ...inkStyle,
+                      backgroundColor: "var(--lm-primary-500)"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          tabBarExtraContent && !centered && /* @__PURE__ */ jsx("div", { className: "shrink-0 ml-4", children: tabBarExtraContent })
+        ]
+      }
+    ),
+    (activeItem == null ? void 0 : activeItem.children) && /* @__PURE__ */ jsx("div", { className: "pt-4", role: "tabpanel", children: activeItem.children })
+  ] });
+};
+export {
+  LMTabs as L
+};
+//# sourceMappingURL=LMTabs-D5n9lB8X.js.map

package/dist/LMTabs-D5n9lB8X.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LMTabs-D5n9lB8X.js","sources":["../src/components/DataDisplay/LMTabs/LMTabs.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from 'react'\nimport {\n COMPONENT_SIZE_ORDER,\n SIZE_TEXT_CLASSES,\n SIZE_GAP_CLASSES,\n clampComponentSize,\n} from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMTabItem {\n /** Unique key */\n key: string\n /** Tab label */\n label: React.ReactNode\n /** Tab content */\n children?: React.ReactNode\n /** Disabled state */\n disabled?: boolean\n /** Icon before label */\n icon?: React.ReactNode\n}\n\nexport interface LMTabsProps {\n /** Controlled active key */\n activeKey?: string\n /** Default active key */\n defaultActiveKey?: string\n /** Tab items */\n items: LMTabItem[]\n /** Tab style type */\n type?: 'line' | 'card' | 'rounded'\n /** Component size */\n size?: ComponentSize\n /** Center tabs */\n centered?: boolean\n /** Extra content on the right */\n tabBarExtraContent?: React.ReactNode\n /** Active key change handler */\n onChange?: (activeKey: string) => void\n /** Tab click handler */\n onTabClick?: (key: string) => void\n /** Custom class name */\n className?: string\n}\n\nconst LMTabs: React.FC<LMTabsProps> = ({\n activeKey: controlledActiveKey,\n defaultActiveKey,\n items,\n type = 'line',\n size = 'md',\n centered = false,\n tabBarExtraContent,\n onChange,\n onTabClick,\n className = '',\n}) => {\n const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER)\n const [internalActiveKey, setInternalActiveKey] = useState(\n defaultActiveKey || items[0]?.key || ''\n )\n const [inkStyle, setInkStyle] = useState<React.CSSProperties>({})\n const tabsRef = useRef<HTMLDivElement>(null)\n const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const activeKey = controlledActiveKey ?? internalActiveKey\n\n const tabPaddingClasses: Record<ComponentSize, string> = {\n xs: 'px-2 py-1',\n sm: 'px-3 py-1.5',\n md: 'px-4 py-2',\n lg: 'px-5 py-2.5',\n xl: 'px-6 py-3',\n '2xl': 'px-8 py-4',\n }\n\n const cardPaddingClasses: Record<ComponentSize, string> = {\n xs: 'px-2 py-1',\n sm: 'px-3 py-1.5',\n md: 'px-4 py-2',\n lg: 'px-5 py-2.5',\n xl: 'px-6 py-3',\n '2xl': 'px-8 py-4',\n }\n\n const updateInkBar = useCallback(() => {\n if (type !== 'line') return\n\n const activeTab = tabRefs.current.get(activeKey)\n const container = tabsRef.current\n\n if (activeTab && container) {\n const containerRect = container.getBoundingClientRect()\n const tabRect = activeTab.getBoundingClientRect()\n\n setInkStyle({\n left: tabRect.left - containerRect.left,\n width: tabRect.width,\n })\n }\n }, [activeKey, type])\n\n useEffect(() => {\n updateInkBar()\n }, [updateInkBar])\n\n useEffect(() => {\n const handleResize = () => updateInkBar()\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [updateInkBar])\n\n const handleTabClick = (item: LMTabItem) => {\n if (item.disabled) return\n\n onTabClick?.(item.key)\n\n if (controlledActiveKey === undefined) {\n setInternalActiveKey(item.key)\n }\n onChange?.(item.key)\n }\n\n const getTabStyles = (item: LMTabItem, isActive: boolean): React.CSSProperties => {\n if (item.disabled) {\n return {\n color: 'var(--lm-text-disabled)',\n cursor: 'not-allowed',\n }\n }\n\n if (type === 'line') {\n return {\n color: isActive ? 'var(--lm-primary-600)' : 'var(--lm-text-secondary)',\n backgroundColor: 'transparent',\n }\n }\n\n if (type === 'card') {\n return {\n color: isActive ? 'var(--lm-primary-600)' : 'var(--lm-text-secondary)',\n backgroundColor: isActive ? 'var(--lm-bg-elevated)' : 'transparent',\n borderColor: isActive ? 'var(--lm-border-default)' : 'transparent',\n borderBottomColor: isActive ? 'var(--lm-bg-elevated)' : 'transparent',\n }\n }\n\n // rounded\n return {\n color: isActive ? 'white' : 'var(--lm-text-secondary)',\n backgroundColor: isActive ? 'var(--lm-primary-500)' : 'transparent',\n }\n }\n\n const getTabHoverStyles = (item: LMTabItem, isActive: boolean): React.CSSProperties => {\n if (item.disabled || isActive) return {}\n\n if (type === 'line') {\n return {\n color: 'var(--lm-text-primary)',\n }\n }\n\n if (type === 'card') {\n return {\n color: 'var(--lm-text-primary)',\n backgroundColor: 'var(--lm-bg-hover)',\n }\n }\n\n // rounded\n return {\n color: 'var(--lm-text-primary)',\n backgroundColor: 'var(--lm-bg-hover)',\n }\n }\n\n const renderTab = (item: LMTabItem) => {\n const isActive = item.key === activeKey\n\n const baseClasses = `\n ${type === 'line' ? tabPaddingClasses[resolvedSize] : cardPaddingClasses[resolvedSize]}\n ${SIZE_TEXT_CLASSES[resolvedSize]}\n flex items-center ${SIZE_GAP_CLASSES[resolvedSize]}\n font-medium transition-all duration-200\n outline-none focus:ring-2 focus:ring-offset-1 focus:ring-[var(--lm-primary-400)]\n `\n\n const typeClasses = {\n line: '',\n card: `border border-b-0 rounded-t-lg ${isActive ? '-mb-px' : ''}`,\n rounded: 'rounded-full',\n }\n\n return (\n <button\n key={item.key}\n ref={(el) => {\n if (el) tabRefs.current.set(item.key, el)\n }}\n className={`${baseClasses} ${typeClasses[type]}`}\n style={getTabStyles(item, isActive)}\n onClick={() => handleTabClick(item)}\n disabled={item.disabled}\n role=\"tab\"\n aria-selected={isActive}\n aria-disabled={item.disabled}\n tabIndex={isActive ? 0 : -1}\n onMouseEnter={(e) => {\n if (!item.disabled && !isActive) {\n Object.assign(e.currentTarget.style, getTabHoverStyles(item, isActive))\n }\n }}\n onMouseLeave={(e) => {\n Object.assign(e.currentTarget.style, getTabStyles(item, isActive))\n }}\n >\n {item.icon && <span className=\"shrink-0\">{item.icon}</span>}\n <span>{item.label}</span>\n </button>\n )\n }\n\n const activeItem = items.find((item) => item.key === activeKey)\n\n return (\n <div className={className}>\n {/* Tab bar */}\n <div\n className={`\n flex items-center\n ${centered ? 'justify-center' : 'justify-between'}\n ${type === 'line' ? 'border-b' : ''}\n ${type === 'card' ? 'border-b' : ''}\n `}\n style={{\n borderColor: type === 'line' || type === 'card' ? 'var(--lm-border-default)' : undefined,\n }}\n >\n {/* Tabs */}\n <div\n ref={tabsRef}\n className={`\n flex items-center relative\n ${type === 'rounded' ? `${SIZE_GAP_CLASSES[resolvedSize]} p-1 rounded-full` : ''}\n `}\n style={{\n backgroundColor: type === 'rounded' ? 'var(--lm-bg-paper)' : undefined,\n }}\n role=\"tablist\"\n >\n {items.map(renderTab)}\n\n {/* Ink bar for line type */}\n {type === 'line' && (\n <div\n className=\"absolute bottom-0 h-0.5 transition-all duration-300\"\n style={{\n ...inkStyle,\n backgroundColor: 'var(--lm-primary-500)',\n }}\n />\n )}\n </div>\n\n {/* Extra content */}\n {tabBarExtraContent && !centered && (\n <div className=\"shrink-0 ml-4\">{tabBarExtraContent}</div>\n )}\n </div>\n\n {/* Tab content */}\n {activeItem?.children && (\n <div className=\"pt-4\" role=\"tabpanel\">\n {activeItem.children}\n </div>\n )}\n </div>\n )\n}\n\nexport default LMTabs\n"],"names":[],"mappings":"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"}

package/dist/LMTabs-NPmOzPat.cjs ADDED Viewed

@@ -0,0 +1,209 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const componentSizes = require("./componentSizes-DUTZ7uEM.cjs");
+const LMTabs = ({
+  activeKey: controlledActiveKey,
+  defaultActiveKey,
+  items,
+  type = "line",
+  size = "md",
+  centered = false,
+  tabBarExtraContent,
+  onChange,
+  onTabClick,
+  className = ""
+}) => {
+  var _a;
+  const resolvedSize = componentSizes.clampComponentSize(size, componentSizes.COMPONENT_SIZE_ORDER);
+  const [internalActiveKey, setInternalActiveKey] = React.useState(
+    defaultActiveKey || ((_a = items[0]) == null ? void 0 : _a.key) || ""
+  );
+  const [inkStyle, setInkStyle] = React.useState({});
+  const tabsRef = React.useRef(null);
+  const tabRefs = React.useRef(/* @__PURE__ */ new Map());
+  const activeKey = controlledActiveKey ?? internalActiveKey;
+  const tabPaddingClasses = {
+    xs: "px-2 py-1",
+    sm: "px-3 py-1.5",
+    md: "px-4 py-2",
+    lg: "px-5 py-2.5",
+    xl: "px-6 py-3",
+    "2xl": "px-8 py-4"
+  };
+  const cardPaddingClasses = {
+    xs: "px-2 py-1",
+    sm: "px-3 py-1.5",
+    md: "px-4 py-2",
+    lg: "px-5 py-2.5",
+    xl: "px-6 py-3",
+    "2xl": "px-8 py-4"
+  };
+  const updateInkBar = React.useCallback(() => {
+    if (type !== "line") return;
+    const activeTab = tabRefs.current.get(activeKey);
+    const container = tabsRef.current;
+    if (activeTab && container) {
+      const containerRect = container.getBoundingClientRect();
+      const tabRect = activeTab.getBoundingClientRect();
+      setInkStyle({
+        left: tabRect.left - containerRect.left,
+        width: tabRect.width
+      });
+    }
+  }, [activeKey, type]);
+  React.useEffect(() => {
+    updateInkBar();
+  }, [updateInkBar]);
+  React.useEffect(() => {
+    const handleResize = () => updateInkBar();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [updateInkBar]);
+  const handleTabClick = (item) => {
+    if (item.disabled) return;
+    onTabClick == null ? void 0 : onTabClick(item.key);
+    if (controlledActiveKey === void 0) {
+      setInternalActiveKey(item.key);
+    }
+    onChange == null ? void 0 : onChange(item.key);
+  };
+  const getTabStyles = (item, isActive) => {
+    if (item.disabled) {
+      return {
+        color: "var(--lm-text-disabled)",
+        cursor: "not-allowed"
+      };
+    }
+    if (type === "line") {
+      return {
+        color: isActive ? "var(--lm-primary-600)" : "var(--lm-text-secondary)",
+        backgroundColor: "transparent"
+      };
+    }
+    if (type === "card") {
+      return {
+        color: isActive ? "var(--lm-primary-600)" : "var(--lm-text-secondary)",
+        backgroundColor: isActive ? "var(--lm-bg-elevated)" : "transparent",
+        borderColor: isActive ? "var(--lm-border-default)" : "transparent",
+        borderBottomColor: isActive ? "var(--lm-bg-elevated)" : "transparent"
+      };
+    }
+    return {
+      color: isActive ? "white" : "var(--lm-text-secondary)",
+      backgroundColor: isActive ? "var(--lm-primary-500)" : "transparent"
+    };
+  };
+  const getTabHoverStyles = (item, isActive) => {
+    if (item.disabled || isActive) return {};
+    if (type === "line") {
+      return {
+        color: "var(--lm-text-primary)"
+      };
+    }
+    if (type === "card") {
+      return {
+        color: "var(--lm-text-primary)",
+        backgroundColor: "var(--lm-bg-hover)"
+      };
+    }
+    return {
+      color: "var(--lm-text-primary)",
+      backgroundColor: "var(--lm-bg-hover)"
+    };
+  };
+  const renderTab = (item) => {
+    const isActive = item.key === activeKey;
+    const baseClasses = `
+      ${type === "line" ? tabPaddingClasses[resolvedSize] : cardPaddingClasses[resolvedSize]}
+      ${componentSizes.SIZE_TEXT_CLASSES[resolvedSize]}
+      flex items-center ${componentSizes.SIZE_GAP_CLASSES[resolvedSize]}
+      font-medium transition-all duration-200
+      outline-none focus:ring-2 focus:ring-offset-1 focus:ring-[var(--lm-primary-400)]
+    `;
+    const typeClasses = {
+      line: "",
+      card: `border border-b-0 rounded-t-lg ${isActive ? "-mb-px" : ""}`,
+      rounded: "rounded-full"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref: (el) => {
+          if (el) tabRefs.current.set(item.key, el);
+        },
+        className: `${baseClasses} ${typeClasses[type]}`,
+        style: getTabStyles(item, isActive),
+        onClick: () => handleTabClick(item),
+        disabled: item.disabled,
+        role: "tab",
+        "aria-selected": isActive,
+        "aria-disabled": item.disabled,
+        tabIndex: isActive ? 0 : -1,
+        onMouseEnter: (e) => {
+          if (!item.disabled && !isActive) {
+            Object.assign(e.currentTarget.style, getTabHoverStyles(item, isActive));
+          }
+        },
+        onMouseLeave: (e) => {
+          Object.assign(e.currentTarget.style, getTabStyles(item, isActive));
+        },
+        children: [
+          item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: item.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+        ]
+      },
+      item.key
+    );
+  };
+  const activeItem = items.find((item) => item.key === activeKey);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `
+          flex items-center
+          ${centered ? "justify-center" : "justify-between"}
+          ${type === "line" ? "border-b" : ""}
+          ${type === "card" ? "border-b" : ""}
+        `,
+        style: {
+          borderColor: type === "line" || type === "card" ? "var(--lm-border-default)" : void 0
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: tabsRef,
+              className: `
+            flex items-center relative
+            ${type === "rounded" ? `${componentSizes.SIZE_GAP_CLASSES[resolvedSize]} p-1 rounded-full` : ""}
+          `,
+              style: {
+                backgroundColor: type === "rounded" ? "var(--lm-bg-paper)" : void 0
+              },
+              role: "tablist",
+              children: [
+                items.map(renderTab),
+                type === "line" && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "absolute bottom-0 h-0.5 transition-all duration-300",
+                    style: {
+                      ...inkStyle,
+                      backgroundColor: "var(--lm-primary-500)"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          tabBarExtraContent && !centered && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 ml-4", children: tabBarExtraContent })
+        ]
+      }
+    ),
+    (activeItem == null ? void 0 : activeItem.children) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-4", role: "tabpanel", children: activeItem.children })
+  ] });
+};
+exports.LMTabs = LMTabs;
+//# sourceMappingURL=LMTabs-NPmOzPat.cjs.map

package/dist/LMTabs-NPmOzPat.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"LMTabs-NPmOzPat.cjs","sources":["../src/components/DataDisplay/LMTabs/LMTabs.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from 'react'\nimport {\n COMPONENT_SIZE_ORDER,\n SIZE_TEXT_CLASSES,\n SIZE_GAP_CLASSES,\n clampComponentSize,\n} from '../../../utils/componentSizes'\nimport type { ComponentSize } from '../../../utils/componentSizes'\n\nexport interface LMTabItem {\n /** Unique key */\n key: string\n /** Tab label */\n label: React.ReactNode\n /** Tab content */\n children?: React.ReactNode\n /** Disabled state */\n disabled?: boolean\n /** Icon before label */\n icon?: React.ReactNode\n}\n\nexport interface LMTabsProps {\n /** Controlled active key */\n activeKey?: string\n /** Default active key */\n defaultActiveKey?: string\n /** Tab items */\n items: LMTabItem[]\n /** Tab style type */\n type?: 'line' | 'card' | 'rounded'\n /** Component size */\n size?: ComponentSize\n /** Center tabs */\n centered?: boolean\n /** Extra content on the right */\n tabBarExtraContent?: React.ReactNode\n /** Active key change handler */\n onChange?: (activeKey: string) => void\n /** Tab click handler */\n onTabClick?: (key: string) => void\n /** Custom class name */\n className?: string\n}\n\nconst LMTabs: React.FC<LMTabsProps> = ({\n activeKey: controlledActiveKey,\n defaultActiveKey,\n items,\n type = 'line',\n size = 'md',\n centered = false,\n tabBarExtraContent,\n onChange,\n onTabClick,\n className = '',\n}) => {\n const resolvedSize = clampComponentSize(size, COMPONENT_SIZE_ORDER)\n const [internalActiveKey, setInternalActiveKey] = useState(\n defaultActiveKey || items[0]?.key || ''\n )\n const [inkStyle, setInkStyle] = useState<React.CSSProperties>({})\n const tabsRef = useRef<HTMLDivElement>(null)\n const tabRefs = useRef<Map<string, HTMLButtonElement>>(new Map())\n\n const activeKey = controlledActiveKey ?? internalActiveKey\n\n const tabPaddingClasses: Record<ComponentSize, string> = {\n xs: 'px-2 py-1',\n sm: 'px-3 py-1.5',\n md: 'px-4 py-2',\n lg: 'px-5 py-2.5',\n xl: 'px-6 py-3',\n '2xl': 'px-8 py-4',\n }\n\n const cardPaddingClasses: Record<ComponentSize, string> = {\n xs: 'px-2 py-1',\n sm: 'px-3 py-1.5',\n md: 'px-4 py-2',\n lg: 'px-5 py-2.5',\n xl: 'px-6 py-3',\n '2xl': 'px-8 py-4',\n }\n\n const updateInkBar = useCallback(() => {\n if (type !== 'line') return\n\n const activeTab = tabRefs.current.get(activeKey)\n const container = tabsRef.current\n\n if (activeTab && container) {\n const containerRect = container.getBoundingClientRect()\n const tabRect = activeTab.getBoundingClientRect()\n\n setInkStyle({\n left: tabRect.left - containerRect.left,\n width: tabRect.width,\n })\n }\n }, [activeKey, type])\n\n useEffect(() => {\n updateInkBar()\n }, [updateInkBar])\n\n useEffect(() => {\n const handleResize = () => updateInkBar()\n window.addEventListener('resize', handleResize)\n return () => window.removeEventListener('resize', handleResize)\n }, [updateInkBar])\n\n const handleTabClick = (item: LMTabItem) => {\n if (item.disabled) return\n\n onTabClick?.(item.key)\n\n if (controlledActiveKey === undefined) {\n setInternalActiveKey(item.key)\n }\n onChange?.(item.key)\n }\n\n const getTabStyles = (item: LMTabItem, isActive: boolean): React.CSSProperties => {\n if (item.disabled) {\n return {\n color: 'var(--lm-text-disabled)',\n cursor: 'not-allowed',\n }\n }\n\n if (type === 'line') {\n return {\n color: isActive ? 'var(--lm-primary-600)' : 'var(--lm-text-secondary)',\n backgroundColor: 'transparent',\n }\n }\n\n if (type === 'card') {\n return {\n color: isActive ? 'var(--lm-primary-600)' : 'var(--lm-text-secondary)',\n backgroundColor: isActive ? 'var(--lm-bg-elevated)' : 'transparent',\n borderColor: isActive ? 'var(--lm-border-default)' : 'transparent',\n borderBottomColor: isActive ? 'var(--lm-bg-elevated)' : 'transparent',\n }\n }\n\n // rounded\n return {\n color: isActive ? 'white' : 'var(--lm-text-secondary)',\n backgroundColor: isActive ? 'var(--lm-primary-500)' : 'transparent',\n }\n }\n\n const getTabHoverStyles = (item: LMTabItem, isActive: boolean): React.CSSProperties => {\n if (item.disabled || isActive) return {}\n\n if (type === 'line') {\n return {\n color: 'var(--lm-text-primary)',\n }\n }\n\n if (type === 'card') {\n return {\n color: 'var(--lm-text-primary)',\n backgroundColor: 'var(--lm-bg-hover)',\n }\n }\n\n // rounded\n return {\n color: 'var(--lm-text-primary)',\n backgroundColor: 'var(--lm-bg-hover)',\n }\n }\n\n const renderTab = (item: LMTabItem) => {\n const isActive = item.key === activeKey\n\n const baseClasses = `\n ${type === 'line' ? tabPaddingClasses[resolvedSize] : cardPaddingClasses[resolvedSize]}\n ${SIZE_TEXT_CLASSES[resolvedSize]}\n flex items-center ${SIZE_GAP_CLASSES[resolvedSize]}\n font-medium transition-all duration-200\n outline-none focus:ring-2 focus:ring-offset-1 focus:ring-[var(--lm-primary-400)]\n `\n\n const typeClasses = {\n line: '',\n card: `border border-b-0 rounded-t-lg ${isActive ? '-mb-px' : ''}`,\n rounded: 'rounded-full',\n }\n\n return (\n <button\n key={item.key}\n ref={(el) => {\n if (el) tabRefs.current.set(item.key, el)\n }}\n className={`${baseClasses} ${typeClasses[type]}`}\n style={getTabStyles(item, isActive)}\n onClick={() => handleTabClick(item)}\n disabled={item.disabled}\n role=\"tab\"\n aria-selected={isActive}\n aria-disabled={item.disabled}\n tabIndex={isActive ? 0 : -1}\n onMouseEnter={(e) => {\n if (!item.disabled && !isActive) {\n Object.assign(e.currentTarget.style, getTabHoverStyles(item, isActive))\n }\n }}\n onMouseLeave={(e) => {\n Object.assign(e.currentTarget.style, getTabStyles(item, isActive))\n }}\n >\n {item.icon && <span className=\"shrink-0\">{item.icon}</span>}\n <span>{item.label}</span>\n </button>\n )\n }\n\n const activeItem = items.find((item) => item.key === activeKey)\n\n return (\n <div className={className}>\n {/* Tab bar */}\n <div\n className={`\n flex items-center\n ${centered ? 'justify-center' : 'justify-between'}\n ${type === 'line' ? 'border-b' : ''}\n ${type === 'card' ? 'border-b' : ''}\n `}\n style={{\n borderColor: type === 'line' || type === 'card' ? 'var(--lm-border-default)' : undefined,\n }}\n >\n {/* Tabs */}\n <div\n ref={tabsRef}\n className={`\n flex items-center relative\n ${type === 'rounded' ? `${SIZE_GAP_CLASSES[resolvedSize]} p-1 rounded-full` : ''}\n `}\n style={{\n backgroundColor: type === 'rounded' ? 'var(--lm-bg-paper)' : undefined,\n }}\n role=\"tablist\"\n >\n {items.map(renderTab)}\n\n {/* Ink bar for line type */}\n {type === 'line' && (\n <div\n className=\"absolute bottom-0 h-0.5 transition-all duration-300\"\n style={{\n ...inkStyle,\n backgroundColor: 'var(--lm-primary-500)',\n }}\n />\n )}\n </div>\n\n {/* Extra content */}\n {tabBarExtraContent && !centered && (\n <div className=\"shrink-0 ml-4\">{tabBarExtraContent}</div>\n )}\n </div>\n\n {/* Tab content */}\n {activeItem?.children && (\n <div className=\"pt-4\" role=\"tabpanel\">\n {activeItem.children}\n </div>\n )}\n </div>\n )\n}\n\nexport default LMTabs\n"],"names":["clampComponentSize","COMPONENT_SIZE_ORDER","useState","useRef","useCallback","useEffect","SIZE_TEXT_CLASSES","SIZE_GAP_CLASSES","jsxs","jsx"],"mappings":"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"}