@revikornmann/muka-ui 0.2.1

package/dist/esm/components/Table/TablePagination.css

@@ -0,0 +1,199 @@
+/* TablePagination Component Styles - Using Muka Design Tokens */
+
+/* ========================================
+   PAGINATION CONTAINER
+   ======================================== */
+
+.muka-table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--table-pagination-gap, var(--spacing-4));
+  padding: var(--table-pagination-padding, var(--spacing-3));
+  background-color: var(--table-pagination-background, var(--color-surface-level1));
+  border-top: var(--border-width-regular) solid var(--table-pagination-border, var(--color-border-default));
+  font-family: var(--text-body-md-regular-fontFamily);
+  font-size: var(--text-body-sm-regular-fontSize);
+  line-height: var(--text-body-sm-regular-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+/* ========================================
+   LEFT SECTION (Page Size & Range)
+   ======================================== */
+
+.muka-table-pagination__left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+.muka-table-pagination__page-size {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.muka-table-pagination__label {
+  color: var(--color-text-subtle-default);
+  white-space: nowrap;
+}
+
+.muka-table-pagination__select {
+  appearance: none;
+  padding: var(--spacing-1) var(--spacing-3) var(--spacing-1) var(--spacing-2);
+  background-color: var(--color-surface-level0);
+  border: var(--border-width-regular) solid var(--color-border-default);
+  border-radius: var(--border-radius-sm);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: var(--color-text-default-default);
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--spacing-1) center;
+  background-size: 12px;
+  padding-right: var(--spacing-5);
+}
+
+.muka-table-pagination__select:hover {
+  border-color: var(--color-border-contrast);
+}
+
+.muka-table-pagination__select:focus {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: -2px;
+}
+
+.muka-table-pagination__range {
+  color: var(--color-text-subtle-default);
+  white-space: nowrap;
+}
+
+/* ========================================
+   RIGHT SECTION (Page Numbers & Navigation)
+   ======================================== */
+
+.muka-table-pagination__right {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.muka-table-pagination__pages {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.muka-table-pagination__nav-only {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.muka-table-pagination__page-indicator {
+  color: var(--color-text-subtle-default);
+  white-space: nowrap;
+  min-width: 80px;
+  text-align: center;
+}
+
+/* ========================================
+   BUTTONS
+   ======================================== */
+
+.muka-table-pagination__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size-2xl);
+  height: var(--size-2xl);
+  padding: var(--spacing-1);
+  border: var(--border-width-regular) solid transparent;
+  border-radius: var(--border-radius-sm);
+  background-color: transparent;
+  color: var(--color-text-default-default);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.muka-table-pagination__button:hover:not(:disabled) {
+  background-color: var(--color-surface-level2);
+}
+
+.muka-table-pagination__button:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: -2px;
+}
+
+.muka-table-pagination__button:disabled {
+  color: var(--color-text-muted-default);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Navigation buttons (arrows) */
+.muka-table-pagination__button--nav {
+  gap: -4px;
+}
+
+.muka-table-pagination__button--nav svg {
+  margin: -2px;
+}
+
+/* Page number buttons */
+.muka-table-pagination__button--page {
+  font-weight: var(--text-label-md-regular-fontWeight);
+}
+
+.muka-table-pagination__button--active {
+  background-color: var(--color-action-default);
+  color: var(--color-text-default-inverse);
+  border-color: var(--color-action-default);
+}
+
+.muka-table-pagination__button--active:hover:not(:disabled) {
+  background-color: var(--color-action-hover);
+  border-color: var(--color-action-hover);
+}
+
+/* ========================================
+   ELLIPSIS
+   ======================================== */
+
+.muka-table-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--size-2xl);
+  height: var(--size-2xl);
+  color: var(--color-text-muted-default);
+  user-select: none;
+}
+
+/* ========================================
+   RESPONSIVE
+   ======================================== */
+
+@media (max-width: 640px) {
+  .muka-table-pagination {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .muka-table-pagination__left,
+  .muka-table-pagination__right {
+    justify-content: center;
+  }
+
+  .muka-table-pagination__pages {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+}

package/dist/esm/components/Table/TablePagination.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './TablePagination.css';
+import { Icon } from '../Icon';
+const defaultLabels = {
+    itemsPerPage: 'Items per page:',
+    of: 'of',
+    page: 'Page',
+    nextPage: 'Next page',
+    previousPage: 'Previous page',
+    firstPage: 'First page',
+    lastPage: 'Last page',
+};
+/**
+ * TablePagination Component
+ *
+ * Pagination controls for table data display.
+ * Can be used standalone or alongside the Table component.
+ *
+ * Features:
+ * - Page size selector
+ * - Item range display ("1-10 of 100")
+ * - Page number buttons
+ * - Previous/Next navigation
+ * - First/Last page navigation
+ * - Full keyboard accessibility
+ * - i18n support through labels prop
+ */
+export const TablePagination = ({ page, pageSize, totalItems, onPageChange, onPageSizeChange, pageSizeOptions = [10, 25, 50, 100], showPageSizeSelector = true, showItemRange = true, showPageNumbers = true, maxPageButtons = 5, labels: customLabels, className = '', }) => {
+    const labels = { ...defaultLabels, ...customLabels };
+    const totalPages = Math.ceil(totalItems / pageSize);
+    const startItem = totalItems === 0 ? 0 : (page - 1) * pageSize + 1;
+    const endItem = Math.min(page * pageSize, totalItems);
+    const canGoPrevious = page > 1;
+    const canGoNext = page < totalPages;
+    const handlePageSizeChange = (e) => {
+        const newPageSize = parseInt(e.target.value, 10);
+        onPageSizeChange?.(newPageSize);
+        // Reset to page 1 when page size changes
+        onPageChange(1);
+    };
+    const handlePreviousPage = () => {
+        if (canGoPrevious) {
+            onPageChange(page - 1);
+        }
+    };
+    const handleNextPage = () => {
+        if (canGoNext) {
+            onPageChange(page + 1);
+        }
+    };
+    const handleFirstPage = () => {
+        if (canGoPrevious) {
+            onPageChange(1);
+        }
+    };
+    const handleLastPage = () => {
+        if (canGoNext) {
+            onPageChange(totalPages);
+        }
+    };
+    // Calculate which page numbers to show
+    const getPageNumbers = () => {
+        if (totalPages <= maxPageButtons) {
+            return Array.from({ length: totalPages }, (_, i) => i + 1);
+        }
+        const pages = [];
+        const halfButtons = Math.floor((maxPageButtons - 2) / 2);
+        // Always show first page
+        pages.push(1);
+        if (page > halfButtons + 2) {
+            pages.push('ellipsis');
+        }
+        // Calculate range around current page
+        const start = Math.max(2, page - halfButtons);
+        const end = Math.min(totalPages - 1, page + halfButtons);
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        if (page < totalPages - halfButtons - 1) {
+            pages.push('ellipsis');
+        }
+        // Always show last page
+        if (totalPages > 1) {
+            pages.push(totalPages);
+        }
+        return pages;
+    };
+    const paginationClasses = [
+        'muka-table-pagination',
+        className,
+    ].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: paginationClasses, role: "navigation", "aria-label": "Pagination", children: [_jsxs("div", { className: "muka-table-pagination__left", children: [showPageSizeSelector && onPageSizeChange && (_jsxs("div", { className: "muka-table-pagination__page-size", children: [_jsx("label", { className: "muka-table-pagination__label", children: labels.itemsPerPage }), _jsx("select", { className: "muka-table-pagination__select", value: pageSize, onChange: handlePageSizeChange, "aria-label": labels.itemsPerPage, children: pageSizeOptions.map((option) => (_jsx("option", { value: option, children: option }, option))) })] })), showItemRange && (_jsxs("span", { className: "muka-table-pagination__range", children: [startItem, "-", endItem, " ", labels.of, " ", totalItems] }))] }), _jsxs("div", { className: "muka-table-pagination__right", children: [showPageNumbers && totalPages > 1 && (_jsxs("div", { className: "muka-table-pagination__pages", children: [_jsxs("button", { type: "button", className: "muka-table-pagination__button muka-table-pagination__button--nav", onClick: handleFirstPage, disabled: !canGoPrevious, "aria-label": labels.firstPage, children: [_jsx(Icon, { name: "arrow-left", variant: "line", size: "sm" }), _jsx(Icon, { name: "arrow-left", variant: "line", size: "sm" })] }), _jsx("button", { type: "button", className: "muka-table-pagination__button muka-table-pagination__button--nav", onClick: handlePreviousPage, disabled: !canGoPrevious, "aria-label": labels.previousPage, children: _jsx(Icon, { name: "arrow-left", variant: "line", size: "sm" }) }), getPageNumbers().map((pageNum, index) => {
+                                if (pageNum === 'ellipsis') {
+                                    return (_jsx("span", { className: "muka-table-pagination__ellipsis", "aria-hidden": "true", children: "..." }, `ellipsis-${index}`));
+                                }
+                                return (_jsx("button", { type: "button", className: [
+                                        'muka-table-pagination__button',
+                                        'muka-table-pagination__button--page',
+                                        pageNum === page && 'muka-table-pagination__button--active',
+                                    ].filter(Boolean).join(' '), onClick: () => onPageChange(pageNum), "aria-label": `${labels.page} ${pageNum}`, "aria-current": pageNum === page ? 'page' : undefined, children: pageNum }, pageNum));
+                            }), _jsx("button", { type: "button", className: "muka-table-pagination__button muka-table-pagination__button--nav", onClick: handleNextPage, disabled: !canGoNext, "aria-label": labels.nextPage, children: _jsx(Icon, { name: "arrow-right", variant: "line", size: "sm" }) }), _jsxs("button", { type: "button", className: "muka-table-pagination__button muka-table-pagination__button--nav", onClick: handleLastPage, disabled: !canGoNext, "aria-label": labels.lastPage, children: [_jsx(Icon, { name: "arrow-right", variant: "line", size: "sm" }), _jsx(Icon, { name: "arrow-right", variant: "line", size: "sm" })] })] })), !showPageNumbers && totalPages > 1 && (_jsxs("div", { className: "muka-table-pagination__nav-only", children: [_jsx("button", { type: "button", className: "muka-table-pagination__button muka-table-pagination__button--nav", onClick: handlePreviousPage, disabled: !canGoPrevious, "aria-label": labels.previousPage, children: _jsx(Icon, { name: "arrow-left", variant: "line", size: "sm" }) }), _jsxs("span", { className: "muka-table-pagination__page-indicator", children: [labels.page, " ", page, " ", labels.of, " ", totalPages] }), _jsx("button", { type: "button", className: "muka-table-pagination__button muka-table-pagination__button--nav", onClick: handleNextPage, disabled: !canGoNext, "aria-label": labels.nextPage, children: _jsx(Icon, { name: "arrow-right", variant: "line", size: "sm" }) })] }))] })] }));
+};
+export default TablePagination;
+//# sourceMappingURL=TablePagination.js.map

package/dist/esm/components/Table/TablePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.js","sourceRoot":"","sources":["../../../../components/Table/TablePagination.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+export { Table, TableHead, TableBody, TableRow, TableCell, TableHeaderCell, } from './Table';
+export { default } from './Table';
+export { TablePagination, } from './TablePagination';
+export { useTableSelection, } from './useTableSelection';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,GAOhB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,OAAO,EACL,eAAe,GAGhB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EACL,iBAAiB,GAGlB,MAAM,qBAAqB,CAAC"}

package/dist/esm/components/Table/useTableSelection.js

@@ -0,0 +1,91 @@
+import { useState, useCallback, useMemo } from 'react';
+/**
+ * useTableSelection Hook
+ *
+ * A headless hook for managing table row selection state.
+ * Provides select all, toggle, and indeterminate state support.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   selectedIds,
+ *   isSelected,
+ *   isAllSelected,
+ *   isIndeterminate,
+ *   toggleItem,
+ *   toggleAll,
+ * } = useTableSelection({
+ *   items: data,
+ *   getItemId: (item) => item.id,
+ * });
+ * ```
+ */
+export function useTableSelection({ items, getItemId, initialSelected = [], }) {
+    const [selectedIds, setSelectedIds] = useState(() => new Set(initialSelected));
+    const isSelected = useCallback((id) => selectedIds.has(id), [selectedIds]);
+    const isAllSelected = useMemo(() => {
+        if (items.length === 0)
+            return false;
+        return items.every((item) => selectedIds.has(getItemId(item)));
+    }, [items, selectedIds, getItemId]);
+    const isIndeterminate = useMemo(() => {
+        if (items.length === 0)
+            return false;
+        const selectedCount = items.filter((item) => selectedIds.has(getItemId(item))).length;
+        return selectedCount > 0 && selectedCount < items.length;
+    }, [items, selectedIds, getItemId]);
+    const toggleItem = useCallback((id) => {
+        setSelectedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
+    const toggleAll = useCallback(() => {
+        if (isAllSelected) {
+            // Deselect all current items
+            setSelectedIds((prev) => {
+                const next = new Set(prev);
+                items.forEach((item) => next.delete(getItemId(item)));
+                return next;
+            });
+        }
+        else {
+            // Select all current items
+            setSelectedIds((prev) => {
+                const next = new Set(prev);
+                items.forEach((item) => next.add(getItemId(item)));
+                return next;
+            });
+        }
+    }, [items, getItemId, isAllSelected]);
+    const selectAll = useCallback(() => {
+        setSelectedIds((prev) => {
+            const next = new Set(prev);
+            items.forEach((item) => next.add(getItemId(item)));
+            return next;
+        });
+    }, [items, getItemId]);
+    const clearSelection = useCallback(() => {
+        setSelectedIds(new Set());
+    }, []);
+    const selectedItems = useMemo(() => items.filter((item) => selectedIds.has(getItemId(item))), [items, selectedIds, getItemId]);
+    return {
+        selectedIds,
+        isSelected,
+        isAllSelected,
+        isIndeterminate,
+        toggleItem,
+        toggleAll,
+        selectAll,
+        clearSelection,
+        selectedItems,
+    };
+}
+export default useTableSelection;
+//# sourceMappingURL=useTableSelection.js.map

package/dist/esm/components/Table/useTableSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableSelection.js","sourceRoot":"","sources":["../../../../components/Table/useTableSelection.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/Tabs/Tabs.css

@@ -0,0 +1,164 @@
+/* Tabs Component Styles - Clean underline style tabs matching Figma */
+
+.muka-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Alignment Variants */
+.muka-tabs--align-left .muka-tabs__list {
+  justify-content: flex-start;
+}
+.muka-tabs--align-center .muka-tabs__list {
+  justify-content: center;
+}
+.muka-tabs--align-fill .muka-tabs__list {
+  justify-content: space-between;
+}
+.muka-tabs--align-fill .muka-tabs__trigger {
+  flex: 1;
+}
+
+/* Tab List — strip container */
+.muka-tabs__list {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+  border-bottom: 1px solid var(--color-border-default, #e0e0e0);
+}
+
+/* Tab Trigger — clean underline style */
+.muka-tabs__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2, 8px);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  outline: none;
+  white-space: nowrap;
+  position: relative;
+  z-index: 2;
+  color: var(--color-text-subtle-default, #838383);
+
+  /* Default MD size values */
+  height: 48px;
+  padding: 0 var(--spacing-3, 12px);
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  font-size: var(--text-label-md-regular-fontSize);
+  line-height: var(--text-label-md-regular-lineHeight);
+}
+
+/* Size Variants */
+.muka-tabs--size-sm .muka-tabs__trigger {
+  height: 36px;
+  padding: 0 var(--spacing-2, 8px);
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  font-size: var(--text-label-sm-regular-fontSize);
+  line-height: var(--text-label-sm-regular-lineHeight);
+}
+
+.muka-tabs--size-lg .muka-tabs__trigger {
+  height: 56px;
+  padding: 0 var(--spacing-4, 16px);
+  font-family: var(--text-label-lg-regular-fontFamily);
+  font-weight: var(--text-label-lg-regular-fontWeight);
+  font-size: var(--text-label-lg-regular-fontSize);
+  line-height: var(--text-label-lg-regular-lineHeight);
+}
+
+/* Hover state */
+.muka-tabs__trigger:hover:not(:disabled):not(.muka-tabs__trigger--current) {
+  color: var(--color-text-neutral-default, #202020);
+}
+
+/* Current tab */
+.muka-tabs__trigger--current {
+  color: var(--color-text-action-default, #202020);
+}
+
+/* Active bottom border (underline) */
+.muka-tabs__trigger--current::after {
+  content: '';
+  position: absolute;
+  bottom: -1px; /* Overlap the 1px border */
+  left: 0;
+  right: 0;
+  height: 3px;
+  background-color: var(--color-text-action-default, #202020);
+  border-bottom-left-radius: 1px;
+  border-bottom-right-radius: 1px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  z-index: 3;
+}
+
+.muka-tabs__trigger--disabled {
+  color: var(--color-text-disabled-foreground, #a0a0a0);
+  cursor: not-allowed;
+}
+
+.muka-tabs__trigger:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+/* Icons */
+.muka-tabs__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.muka-tabs__trigger .muka-icon {
+  color: inherit;
+}
+.muka-tabs--size-sm .muka-tabs__icon svg { width: 16px; height: 16px; }
+.muka-tabs--size-md .muka-tabs__icon svg { width: 20px; height: 20px; }
+.muka-tabs--size-lg .muka-tabs__icon svg { width: 24px; height: 24px; }
+
+/* Responsive Scroll behavior on small screens */
+@media (max-width: 768px) {
+  .muka-tabs__list {
+    /* Make scrollable */
+    overflow-x: auto;
+    overflow-y: hidden;
+    /* Force left alignment on mobile to prevent clipping when scrolling */
+    justify-content: flex-start !important;
+    max-width: 100vw;
+    -webkit-overflow-scrolling: touch;
+    /* Hide scrollbar for cleaner look */
+    scrollbar-width: none;
+  }
+  .muka-tabs__list::-webkit-scrollbar {
+    display: none;
+  }
+  /* Remove flex: 1 behavior for Fill tabs on mobile so they map correctly */
+  .muka-tabs--align-fill .muka-tabs__trigger {
+    flex: 0 0 auto;
+  }
+}
+
+/* Tab Panel — content area */
+.muka-tabs__panel {
+  background-color: var(--tabs-panel-background);
+  /* border-top: var(--border-width-regular) solid var(--tabs-panel-border); removed in favor of the new tablist border */
+  border-bottom: var(--border-width-regular) solid var(--tabs-panel-border);
+  padding: var(--spacing-4);
+  position: relative;
+  z-index: 1;
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+}
+
+.muka-tabs__panel:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}