@revikornmann/muka-ui 0.2.1

package/dist/cjs/components/SwipeActions/SwipeActions.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwipeActions = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("./SwipeActions.css");
+/**
+ * SwipeActions — adds iOS-style swipe-to-reveal action buttons around a row.
+ *
+ * Wrap a `ListItem` (or any row) to expose secondary actions like archive,
+ * delete, edit. Swipe left to reveal `rightActions`; swipe right for `leftActions`.
+ *
+ * @accessibility
+ * - All actions remain reachable via keyboard / screen reader when the row is
+ *   focused (rendered alongside the row, not hidden until swiped). The swipe
+ *   gesture is a progressive enhancement; the buttons are always in the DOM
+ *   and focusable.
+ */
+const SwipeActions = ({ children, rightActions = [], leftActions = [], disabled = false, actionWidth = 80, fullSwipeThreshold = 0.6, className = '', }) => {
+    const wrapperRef = (0, react_1.useRef)(null);
+    const [offset, setOffset] = (0, react_1.useState)(0);
+    const [animating, setAnimating] = (0, react_1.useState)(true);
+    const dragRef = (0, react_1.useRef)(null);
+    const rightWidth = rightActions.length * actionWidth;
+    const leftWidth = leftActions.length * actionWidth;
+    const snapTo = (0, react_1.useCallback)((next) => {
+        setAnimating(true);
+        setOffset(next);
+    }, []);
+    const handlePointerDown = (e) => {
+        if (disabled)
+            return;
+        if (e.pointerType === 'mouse' && e.button !== 0)
+            return;
+        dragRef.current = {
+            startX: e.clientX,
+            startY: e.clientY,
+            startOffset: offset,
+            locked: null,
+            pointerId: e.pointerId,
+            rowWidth: wrapperRef.current?.offsetWidth ?? 0,
+        };
+    };
+    const handlePointerMove = (e) => {
+        const drag = dragRef.current;
+        if (!drag || drag.pointerId !== e.pointerId)
+            return;
+        const dx = e.clientX - drag.startX;
+        const dy = e.clientY - drag.startY;
+        if (drag.locked === null) {
+            if (Math.abs(dx) < 8 && Math.abs(dy) < 8)
+                return;
+            if (Math.abs(dx) > Math.abs(dy)) {
+                drag.locked = true;
+                wrapperRef.current?.setPointerCapture(e.pointerId);
+                setAnimating(false);
+            }
+            else {
+                drag.locked = false;
+                return;
+            }
+        }
+        if (!drag.locked)
+            return;
+        e.preventDefault();
+        let next = drag.startOffset + dx;
+        if (next > 0) {
+            next = leftActions.length > 0 ? Math.min(next, drag.rowWidth) : 0;
+        }
+        else {
+            next = rightActions.length > 0 ? Math.max(next, -drag.rowWidth) : 0;
+        }
+        setOffset(next);
+    };
+    const finishDrag = (commit) => {
+        const drag = dragRef.current;
+        dragRef.current = null;
+        if (!drag || !drag.locked)
+            return;
+        if (!commit) {
+            snapTo(0);
+            return;
+        }
+        const rowWidth = drag.rowWidth;
+        const fullSwipePx = rowWidth * fullSwipeThreshold;
+        if (offset <= -fullSwipePx && rightActions.length > 0) {
+            const action = rightActions[rightActions.length - 1];
+            if (action.fullSwipe) {
+                snapTo(0);
+                action.onClick();
+                return;
+            }
+        }
+        if (offset >= fullSwipePx && leftActions.length > 0) {
+            const action = leftActions[0];
+            if (action.fullSwipe) {
+                snapTo(0);
+                action.onClick();
+                return;
+            }
+        }
+        if (offset <= -rightWidth / 2 && rightActions.length > 0) {
+            snapTo(-rightWidth);
+        }
+        else if (offset >= leftWidth / 2 && leftActions.length > 0) {
+            snapTo(leftWidth);
+        }
+        else {
+            snapTo(0);
+        }
+    };
+    const handlePointerUp = () => finishDrag(true);
+    const handlePointerCancel = () => finishDrag(false);
+    (0, react_1.useEffect)(() => {
+        if (disabled)
+            snapTo(0);
+    }, [disabled, snapTo]);
+    const close = () => snapTo(0);
+    const renderActions = (actions, side) => {
+        if (actions.length === 0)
+            return null;
+        const totalWidth = actions.length * actionWidth;
+        return ((0, jsx_runtime_1.jsx)("div", { className: `muka-swipe-actions__panel muka-swipe-actions__panel--${side}`, style: { width: totalWidth }, "aria-hidden": offset === 0, children: actions.map((action, i) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: `muka-swipe-actions__button muka-swipe-actions__button--${action.color ?? 'neutral'}`, style: { width: actionWidth }, onClick: () => {
+                    close();
+                    action.onClick();
+                }, "aria-label": action.ariaLabel ?? action.label, children: [action.icon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-swipe-actions__button-icon", "aria-hidden": "true", children: action.icon })), (0, jsx_runtime_1.jsx)("span", { className: "muka-swipe-actions__button-label", children: action.label })] }, i))) }));
+    };
+    const classes = [
+        'muka-swipe-actions',
+        offset !== 0 && 'muka-swipe-actions--open',
+        disabled && 'muka-swipe-actions--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, className: classes, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, children: [renderActions(leftActions, 'left'), renderActions(rightActions, 'right'), (0, jsx_runtime_1.jsx)("div", { className: "muka-swipe-actions__row", style: {
+                    transform: `translateX(${offset}px)`,
+                    transition: animating ? 'transform 0.22s cubic-bezier(0.22, 1, 0.36, 1)' : 'none',
+                }, children: children })] }));
+};
+exports.SwipeActions = SwipeActions;
+exports.default = exports.SwipeActions;
+//# sourceMappingURL=SwipeActions.js.map

package/dist/cjs/components/SwipeActions/SwipeActions.js.map

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

package/dist/cjs/components/SwipeActions/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwipeActions = void 0;
+var SwipeActions_1 = require("./SwipeActions");
+Object.defineProperty(exports, "SwipeActions", { enumerable: true, get: function () { return SwipeActions_1.SwipeActions; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/SwipeActions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/SwipeActions/index.ts"],"names":[],"mappings":";;;AAAA,+CAIwB;AAHtB,4GAAA,YAAY,OAAA"}

package/dist/cjs/components/Table/Table.css

@@ -0,0 +1,173 @@
+/* Table Component Styles - Using Muka Design Tokens */
+
+/* ========================================
+   TABLE WRAPPER (Responsive)
+   ======================================== */
+
+.muka-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ========================================
+   TABLE BASE
+   ======================================== */
+
+.muka-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-size: var(--text-body-base-regular-fontSize);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-default-default);
+  background-color: var(--color-surface-level3);
+}
+
+.muka-table--fixed {
+  table-layout: fixed;
+}
+
+.muka-table__caption {
+  padding: var(--spacing-3);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  text-align: left;
+  color: var(--color-text-default-default);
+  caption-side: top;
+}
+
+/* ========================================
+   TABLE HEAD
+   ======================================== */
+
+.muka-table__head {
+  border-bottom: var(--border-width-regular) solid var(--color-border-default);
+}
+
+.muka-table__head .muka-table__row {
+  background-color: var(--color-surface-level0);
+}
+
+/* ========================================
+   TABLE BODY
+   ======================================== */
+
+.muka-table__body .muka-table__row {
+  border-bottom: var(--border-width-regular) solid var(--color-border-subtle);
+}
+
+.muka-table__body .muka-table__row:last-child {
+  border-bottom: none;
+}
+
+.muka-table__body .muka-table__row:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.muka-table__body .muka-table__row--selected {
+  background-color: var(--table-row-selected-background, var(--color-action-background));
+}
+
+.muka-table__body .muka-table__row--selected:hover {
+  background-color: var(--table-row-selected-background, var(--color-action-background));
+}
+
+.muka-table__row--clickable {
+  cursor: pointer;
+}
+
+/* ========================================
+   TABLE CELLS
+   ======================================== */
+
+.muka-table__cell,
+.muka-table__header-cell {
+  vertical-align: middle;
+}
+
+/* Size: Small */
+.muka-table--sm .muka-table__cell,
+.muka-table--sm .muka-table__header-cell {
+  padding: var(--table-cell-padding-y-sm) var(--table-cell-padding-x-sm);
+}
+
+/* Size: Medium */
+.muka-table--md .muka-table__cell,
+.muka-table--md .muka-table__header-cell {
+  padding: var(--table-cell-padding-y-md) var(--table-cell-padding-x-md);
+}
+
+/* Size: Large */
+.muka-table--lg .muka-table__cell,
+.muka-table--lg .muka-table__header-cell {
+  padding: var(--table-cell-padding-y-lg) var(--table-cell-padding-x-lg);
+}
+
+/* Alignment */
+.muka-table__cell--left,
+.muka-table__header-cell--left {
+  text-align: left;
+}
+
+.muka-table__cell--center,
+.muka-table__header-cell--center {
+  text-align: center;
+}
+
+.muka-table__cell--right,
+.muka-table__header-cell--right {
+  text-align: right;
+}
+
+/* ========================================
+   HEADER CELLS
+   ======================================== */
+
+.muka-table__header-cell {
+  font-family: var(--text-body-base-bold-fontFamily);
+  font-weight: var(--text-body-base-bold-fontWeight);
+  font-size: var(--text-body-base-bold-fontSize);
+  line-height: var(--text-body-base-bold-lineHeight);
+  color: var(--color-text-default-default);
+  white-space: nowrap;
+}
+
+.muka-table__header-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+/* Sortable */
+.muka-table__header-cell--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+
+.muka-table__header-cell--sortable:hover {
+  color: var(--color-text-default-default);
+}
+
+.muka-table__header-cell--sortable:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: -2px;
+}
+
+/* Sort icon */
+.muka-table__sort-icon {
+  width: 1em;
+  height: 1em;
+  opacity: 0.4;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.muka-table__header-cell--sortable:hover .muka-table__sort-icon {
+  opacity: 0.7;
+}
+
+.muka-table__sort-icon--asc,
+.muka-table__sort-icon--desc {
+  opacity: 1;
+}

package/dist/cjs/components/Table/Table.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableHeaderCell = exports.TableCell = exports.TableRow = exports.TableBody = exports.TableHead = exports.Table = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./Table.css");
+const Icon_1 = require("../Icon");
+const SortIcon = ({ direction }) => ((0, jsx_runtime_1.jsx)("span", { className: `muka-table__sort-icon ${direction ? `muka-table__sort-icon--${direction}` : ''}`, "aria-hidden": "true", children: direction === 'desc' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "sort-desc", variant: "line", size: "sm" })) : ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "sort-asc", variant: "line", size: "sm" })) }));
+/**
+ * Table Component
+ *
+ * Data table with support for sorting, selection, and responsive layouts.
+ *
+ * Sizes: sm, md, lg (affects cell padding)
+ * Features: sortable columns, row selection, fixed layout, responsive scroll
+ */
+const Table = ({ children, size = 'md', fixedLayout = false, responsive = true, className = '', caption, ...props }) => {
+    const tableClasses = [
+        'muka-table',
+        `muka-table--${size}`,
+        fixedLayout && 'muka-table--fixed',
+        className,
+    ].filter(Boolean).join(' ');
+    const table = ((0, jsx_runtime_1.jsxs)("table", { className: tableClasses, ...props, children: [caption && (0, jsx_runtime_1.jsx)("caption", { className: "muka-table__caption", children: caption }), children] }));
+    if (responsive) {
+        return (0, jsx_runtime_1.jsx)("div", { className: "muka-table-wrapper", children: table });
+    }
+    return table;
+};
+exports.Table = Table;
+/**
+ * TableHead - Table header section
+ */
+const TableHead = ({ children, className = '', ...props }) => {
+    const headClasses = ['muka-table__head', className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)("thead", { className: headClasses, ...props, children: children }));
+};
+exports.TableHead = TableHead;
+/**
+ * TableBody - Table body section
+ */
+const TableBody = ({ children, className = '', ...props }) => {
+    const bodyClasses = ['muka-table__body', className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)("tbody", { className: bodyClasses, ...props, children: children }));
+};
+exports.TableBody = TableBody;
+/**
+ * TableRow - Table row
+ */
+const TableRow = ({ children, selected = false, onClick, className = '', ...props }) => {
+    const rowClasses = [
+        'muka-table__row',
+        selected && 'muka-table__row--selected',
+        onClick && 'muka-table__row--clickable',
+        className,
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)("tr", { className: rowClasses, onClick: onClick, "aria-selected": selected || undefined, ...props, children: children }));
+};
+exports.TableRow = TableRow;
+/**
+ * TableCell - Standard table cell
+ */
+const TableCell = ({ children, align = 'left', className = '', colSpan, rowSpan, ...props }) => {
+    const cellClasses = [
+        'muka-table__cell',
+        `muka-table__cell--${align}`,
+        className,
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)("td", { className: cellClasses, colSpan: colSpan, rowSpan: rowSpan, ...props, children: children }));
+};
+exports.TableCell = TableCell;
+/**
+ * TableHeaderCell - Header cell with optional sorting
+ */
+const TableHeaderCell = ({ children, align = 'left', sortable = false, sortDirection = null, onSort, scope = 'col', className = '', colSpan, rowSpan, ...props }) => {
+    const cellClasses = [
+        'muka-table__header-cell',
+        `muka-table__header-cell--${align}`,
+        sortable && 'muka-table__header-cell--sortable',
+        sortDirection && `muka-table__header-cell--sorted-${sortDirection}`,
+        className,
+    ].filter(Boolean).join(' ');
+    const handleClick = () => {
+        if (sortable && onSort) {
+            onSort();
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (sortable && onSort && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            onSort();
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("th", { className: cellClasses, scope: scope, colSpan: colSpan, rowSpan: rowSpan, onClick: sortable ? handleClick : undefined, onKeyDown: sortable ? handleKeyDown : undefined, tabIndex: sortable ? 0 : undefined, "aria-sort": sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : undefined, ...props, children: (0, jsx_runtime_1.jsxs)("span", { className: "muka-table__header-content", children: [children, sortable && (0, jsx_runtime_1.jsx)(SortIcon, { direction: sortDirection })] }) }));
+};
+exports.TableHeaderCell = TableHeaderCell;
+exports.default = exports.Table;
+//# sourceMappingURL=Table.js.map

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

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

package/dist/cjs/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;
+  }
+}