@revikornmann/muka-ui 0.2.1

package/dist/cjs/components/DataTable/DataTable.css

@@ -0,0 +1,165 @@
+/* DataTable Component Styles - Using Muka Design Tokens */
+
+.muka-data-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.muka-data-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: fixed;
+  background-color: var(--color-surface-level3);
+  color: var(--color-text-default-default);
+}
+
+.muka-data-table__caption {
+  padding: var(--spacing-3) var(--spacing-6);
+  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);
+  text-align: left;
+  caption-side: top;
+}
+
+/* ========================================
+   HEADER
+   ======================================== */
+
+.muka-data-table__head {
+  border-bottom: var(--border-width-regular, 1px) solid var(--color-border-default);
+}
+
+.muka-data-table__th {
+  background-color: var(--color-surface-level1);
+  padding: var(--spacing-2) var(--spacing-6);
+  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);
+  vertical-align: middle;
+  text-align: left;
+}
+
+.muka-data-table__th-label {
+  display: flex;
+  align-items: center;
+  min-height: 2rem; /* 32px slot — matches Figma header cell height */
+}
+
+/* ========================================
+   BODY
+   ======================================== */
+
+.muka-data-table__row {
+  border-bottom: var(--border-width-regular, 1px) solid var(--color-border-default);
+  transition: background-color 0.15s ease;
+}
+
+.muka-data-table__row:not(.muka-data-table__row--empty):hover {
+  background-color: var(--color-surface-hover);
+}
+
+.muka-data-table__td {
+  padding: var(--spacing-3) var(--spacing-6);
+  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);
+  color: var(--color-text-default-default);
+  vertical-align: middle;
+}
+
+.muka-data-table__cell-content {
+  display: flex;
+  align-items: center;
+  min-height: 2rem; /* 32px slot — matches Figma body cell height */
+  word-break: break-word;
+}
+
+.muka-data-table__row--empty .muka-data-table__cell-content {
+  justify-content: center;
+  color: var(--color-text-subtle-default);
+}
+
+/* ========================================
+   ALIGNMENT
+   ======================================== */
+
+.muka-data-table__th--center,
+.muka-data-table__td--center {
+  text-align: center;
+}
+
+.muka-data-table__th--center .muka-data-table__th-label,
+.muka-data-table__th--center .muka-data-table__sort-button,
+.muka-data-table__td--center .muka-data-table__cell-content {
+  justify-content: center;
+}
+
+.muka-data-table__th--right,
+.muka-data-table__td--right {
+  text-align: right;
+}
+
+.muka-data-table__th--right .muka-data-table__th-label,
+.muka-data-table__th--right .muka-data-table__sort-button,
+.muka-data-table__td--right .muka-data-table__cell-content {
+  justify-content: flex-end;
+}
+
+/* ========================================
+   COLUMN DIVIDERS (vertical)
+   ======================================== */
+
+.muka-data-table--column-dividers .muka-data-table__th:not(:last-child),
+.muka-data-table--column-dividers .muka-data-table__td:not(:last-child) {
+  border-right: var(--border-width-regular, 1px) solid var(--color-border-default);
+}
+
+/* ========================================
+   SORTING
+   ======================================== */
+
+.muka-data-table__sort-button {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  min-height: 2rem;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  cursor: pointer;
+  user-select: none;
+  border-radius: var(--border-radius-md, 8px);
+}
+
+.muka-data-table__sort-button:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
+}
+
+.muka-data-table__sort-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  opacity: 0.4;
+  transition: opacity 0.15s ease;
+}
+
+.muka-data-table__sort-button:hover .muka-data-table__sort-icon {
+  opacity: 0.7;
+}
+
+.muka-data-table__sort-icon--asc,
+.muka-data-table__sort-icon--desc {
+  opacity: 1;
+}

package/dist/cjs/components/DataTable/DataTable.js

@@ -0,0 +1,121 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTable = DataTable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+require("./DataTable.css");
+const Icon_1 = require("../Icon");
+/** Default comparator: numbers compare numerically, everything else as strings. */
+function compareValues(a, b) {
+    if (a == null && b == null)
+        return 0;
+    if (a == null)
+        return -1;
+    if (b == null)
+        return 1;
+    if (typeof a === 'number' && typeof b === 'number')
+        return a - b;
+    return String(a).localeCompare(String(b), undefined, { numeric: true });
+}
+const SortIcon = ({ direction }) => ((0, jsx_runtime_1.jsx)("span", { className: `muka-data-table__sort-icon${direction ? ` muka-data-table__sort-icon--${direction}` : ''}`, "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: direction === 'asc' ? 'arrow-up-s' : 'arrow-down-s', variant: "line", size: "sm" }) }));
+/**
+ * DataTable Component
+ *
+ * Declarative, data-driven table. Pass `columns` and `data` and it renders the
+ * full header/body — including sortable headers and dividers. For a low-level
+ * compositional table (write your own rows/cells), use `Table` instead.
+ *
+ * Sorting is uncontrolled by default (click a sortable header to sort). Provide
+ * `sortKey` + `sortDirection` + `onSortChange` to control it externally.
+ */
+function DataTable({ columns, data, sortKey, sortDirection = 'asc', onSortChange, columnDividers = false, getRowKey, caption, emptyMessage = 'No data', className = '', }) {
+    const isControlled = sortKey !== undefined;
+    const [internalSort, setInternalSort] = (0, react_1.useState)(null);
+    const activeKey = isControlled ? sortKey : internalSort?.key ?? null;
+    const activeDirection = isControlled ? sortDirection : internalSort?.direction ?? 'asc';
+    const handleSort = (column) => {
+        if (!column.sortable)
+            return;
+        const nextDirection = activeKey === column.key && activeDirection === 'asc' ? 'desc' : 'asc';
+        onSortChange?.(column.key, nextDirection);
+        if (!isControlled) {
+            setInternalSort({ key: column.key, direction: nextDirection });
+        }
+    };
+    // Only sort internally when uncontrolled — controlled consumers sort their own data.
+    const rows = react_1.default.useMemo(() => {
+        if (isControlled || !internalSort)
+            return data;
+        const { key, direction } = internalSort;
+        const sorted = [...data].sort((a, b) => compareValues(a[key], b[key]));
+        return direction === 'desc' ? sorted.reverse() : sorted;
+    }, [data, isControlled, internalSort]);
+    const tableClasses = [
+        'muka-data-table',
+        columnDividers && 'muka-data-table--column-dividers',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const resolveWidth = (width) => typeof width === 'number' ? `${width}px` : width;
+    return ((0, jsx_runtime_1.jsx)("div", { className: "muka-data-table-wrapper", children: (0, jsx_runtime_1.jsxs)("table", { className: tableClasses, children: [caption && (0, jsx_runtime_1.jsx)("caption", { className: "muka-data-table__caption", children: caption }), (0, jsx_runtime_1.jsx)("colgroup", { children: columns.map((column) => ((0, jsx_runtime_1.jsx)("col", { style: column.width ? { width: resolveWidth(column.width) } : undefined }, column.key))) }), (0, jsx_runtime_1.jsx)("thead", { className: "muka-data-table__head", children: (0, jsx_runtime_1.jsx)("tr", { className: "muka-data-table__head-row", children: columns.map((column) => {
+                            const isActive = activeKey === column.key;
+                            const align = column.align ?? 'left';
+                            return ((0, jsx_runtime_1.jsx)("th", { scope: "col", className: [
+                                    'muka-data-table__th',
+                                    `muka-data-table__th--${align}`,
+                                    column.sortable && 'muka-data-table__th--sortable',
+                                ]
+                                    .filter(Boolean)
+                                    .join(' '), "aria-sort": column.sortable
+                                    ? isActive
+                                        ? activeDirection === 'asc'
+                                            ? 'ascending'
+                                            : 'descending'
+                                        : 'none'
+                                    : undefined, children: column.sortable ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "muka-data-table__sort-button", onClick: () => handleSort(column), children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-data-table__th-label", children: column.header }), (0, jsx_runtime_1.jsx)(SortIcon, { direction: isActive ? activeDirection : null })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "muka-data-table__th-label", children: column.header })) }, column.key));
+                        }) }) }), (0, jsx_runtime_1.jsx)("tbody", { className: "muka-data-table__body", children: rows.length === 0 ? ((0, jsx_runtime_1.jsx)("tr", { className: "muka-data-table__row muka-data-table__row--empty", children: (0, jsx_runtime_1.jsx)("td", { className: "muka-data-table__td", colSpan: columns.length, children: (0, jsx_runtime_1.jsx)("span", { className: "muka-data-table__cell-content", children: emptyMessage }) }) })) : (rows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: "muka-data-table__row", children: columns.map((column) => {
+                            const align = column.align ?? 'left';
+                            const content = column.render
+                                ? column.render(row, rowIndex)
+                                : (row[column.key] ?? null);
+                            return ((0, jsx_runtime_1.jsx)("td", { className: ['muka-data-table__td', `muka-data-table__td--${align}`]
+                                    .filter(Boolean)
+                                    .join(' '), children: (0, jsx_runtime_1.jsx)("span", { className: "muka-data-table__cell-content", children: content }) }, column.key));
+                        }) }, getRowKey ? getRowKey(row, rowIndex) : rowIndex)))) })] }) }));
+}
+exports.default = DataTable;
+//# sourceMappingURL=DataTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../components/DataTable/DataTable.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA,8BAyIC;;AArOD,+CAAwC;AACxC,2BAAyB;AACzB,kCAA+B;AA4D/B,mFAAmF;AACnF,SAAS,aAAa,CAAC,CAAU,EAAE,CAAU;IAC3C,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI;QAAE,OAAO,CAAC,CAAC;IACrC,IAAI,CAAC,IAAI,IAAI;QAAE,OAAO,CAAC,CAAC,CAAC;IACzB,IAAI,CAAC,IAAI,IAAI;QAAE,OAAO,CAAC,CAAC;IACxB,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,OAAO,CAAC,KAAK,QAAQ;QAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IACjE,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAC1E,CAAC;AAED,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAgD,EAAE,EAAE,CAAC,CAChF,iCACE,SAAS,EAAE,6BACT,SAAS,CAAC,CAAC,CAAC,gCAAgC,SAAS,EAAE,CAAC,CAAC,CAAC,EAC5D,EAAE,iBACU,MAAM,YAElB,uBAAC,WAAI,IAAC,IAAI,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,GACvF,CACR,CAAC;AAEF;;;;;;;;;GASG;AACH,SAAgB,SAAS,CAAI,EAC3B,OAAO,EACP,IAAI,EACJ,OAAO,EACP,aAAa,GAAG,KAAK,EACrB,YAAY,EACZ,cAAc,GAAG,KAAK,EACtB,SAAS,EACT,OAAO,EACP,YAAY,GAAG,SAAS,EACxB,SAAS,GAAG,EAAE,GACI;IAClB,MAAM,YAAY,GAAG,OAAO,KAAK,SAAS,CAAC;IAC3C,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAGtC,IAAI,CAAC,CAAC;IAEhB,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAAE,GAAG,IAAI,IAAI,CAAC;IACrE,MAAM,eAAe,GAAG,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,EAAE,SAAS,IAAI,KAAK,CAAC;IAExF,MAAM,UAAU,GAAG,CAAC,MAA0B,EAAE,EAAE;QAChD,IAAI,CAAC,MAAM,CAAC,QAAQ;YAAE,OAAO;QAC7B,MAAM,aAAa,GACjB,SAAS,KAAK,MAAM,CAAC,GAAG,IAAI,eAAe,KAAK,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;QACzE,YAAY,EAAE,CAAC,MAAM,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC;QAC1C,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,eAAe,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,CAAC;QACjE,CAAC;IACH,CAAC,CAAC;IAEF,qFAAqF;IACrF,MAAM,IAAI,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,YAAY,IAAI,CAAC,YAAY;YAAE,OAAO,IAAI,CAAC;QAC/C,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,YAAY,CAAC;QACxC,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CACrC,aAAa,CAAE,CAA6B,CAAC,GAAG,CAAC,EAAG,CAA6B,CAAC,GAAG,CAAC,CAAC,CACxF,CAAC;QACF,OAAO,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;IAC1D,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;IAEvC,MAAM,YAAY,GAAG;QACnB,iBAAiB;QACjB,cAAc,IAAI,kCAAkC;QACpD,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,YAAY,GAAG,CAAC,KAAuB,EAAE,EAAE,CAC/C,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;IAEnD,OAAO,CACL,gCAAK,SAAS,EAAC,yBAAyB,YACtC,mCAAO,SAAS,EAAE,YAAY,aAC3B,OAAO,IAAI,oCAAS,SAAS,EAAC,0BAA0B,YAAE,OAAO,GAAW,EAC7E,+CACG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,gCAAsB,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,IAAnF,MAAM,CAAC,GAAG,CAA6E,CAClG,CAAC,GACO,EACX,kCAAO,SAAS,EAAC,uBAAuB,YACtC,+BAAI,SAAS,EAAC,2BAA2B,YACtC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;4BACtB,MAAM,QAAQ,GAAG,SAAS,KAAK,MAAM,CAAC,GAAG,CAAC;4BAC1C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC;4BACrC,OAAO,CACL,+BAEE,KAAK,EAAC,KAAK,EACX,SAAS,EAAE;oCACT,qBAAqB;oCACrB,wBAAwB,KAAK,EAAE;oCAC/B,MAAM,CAAC,QAAQ,IAAI,+BAA+B;iCACnD;qCACE,MAAM,CAAC,OAAO,CAAC;qCACf,IAAI,CAAC,GAAG,CAAC,eAEV,MAAM,CAAC,QAAQ;oCACb,CAAC,CAAC,QAAQ;wCACR,CAAC,CAAC,eAAe,KAAK,KAAK;4CACzB,CAAC,CAAC,WAAW;4CACb,CAAC,CAAC,YAAY;wCAChB,CAAC,CAAC,MAAM;oCACV,CAAC,CAAC,SAAS,YAGd,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CACjB,oCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,8BAA8B,EACxC,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,aAEjC,iCAAM,SAAS,EAAC,2BAA2B,YAAE,MAAM,CAAC,MAAM,GAAQ,EAClE,uBAAC,QAAQ,IAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,GAAI,IACnD,CACV,CAAC,CAAC,CAAC,CACF,iCAAM,SAAS,EAAC,2BAA2B,YAAE,MAAM,CAAC,MAAM,GAAQ,CACnE,IA9BI,MAAM,CAAC,GAAG,CA+BZ,CACN,CAAC;wBACJ,CAAC,CAAC,GACC,GACC,EACR,kCAAO,SAAS,EAAC,uBAAuB,YACrC,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,+BAAI,SAAS,EAAC,kDAAkD,YAC9D,+BAAI,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,OAAO,CAAC,MAAM,YACzD,iCAAM,SAAS,EAAC,+BAA+B,YAAE,YAAY,GAAQ,GAClE,GACF,CACN,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAC1B,+BAAI,SAAS,EAAC,sBAAsB,YACjC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;4BACtB,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC;4BACrC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM;gCAC3B,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAC;gCAC9B,CAAC,CAAC,CAAE,GAAuC,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC;4BACnE,OAAO,CACL,+BAEE,SAAS,EAAE,CAAC,qBAAqB,EAAE,wBAAwB,KAAK,EAAE,CAAC;qCAChE,MAAM,CAAC,OAAO,CAAC;qCACf,IAAI,CAAC,GAAG,CAAC,YAEZ,iCAAM,SAAS,EAAC,+BAA+B,YAAE,OAAO,GAAQ,IAL3D,MAAM,CAAC,GAAG,CAMZ,CACN,CAAC;wBACJ,CAAC,CAAC,IAhBsC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAiBpF,CACN,CAAC,CACH,GACK,IACF,GACJ,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,SAAS,CAAC"}

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.DataTable = void 0;
+var DataTable_1 = require("./DataTable");
+Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return DataTable_1.DataTable; } });
+var DataTable_2 = require("./DataTable");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DataTable_2).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/DataTable/index.ts"],"names":[],"mappings":";;;;;;AAAA,yCAKqB;AAJnB,sGAAA,SAAS,OAAA;AAKX,yCAAsC;AAA7B,qHAAA,OAAO,OAAA"}

package/dist/cjs/components/DatePicker/DatePicker.css

@@ -0,0 +1,29 @@
+/* DatePicker — compact native date field. */
+/* Field/label/helper styling is inherited from ../Input/Input.css. */
+
+/* Adopt the field typography on the native date input. */
+.muka-datepicker__field .muka-input__native {
+  font-family: var(--text-input-md-fontFamily);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+}
+
+.muka-datepicker__field--sm .muka-input__native {
+  font-family: var(--text-input-sm-fontFamily);
+  font-size: var(--text-input-sm-fontSize);
+  line-height: var(--text-input-sm-lineHeight);
+}
+
+/* Tint the browser calendar indicator to match the field foreground. */
+.muka-datepicker__field .muka-input__native::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.muka-datepicker__field .muka-input__native::-webkit-calendar-picker-indicator:hover {
+  opacity: 1;
+}
+
+.muka-datepicker__field .muka-input__native:disabled {
+  cursor: not-allowed;
+}

package/dist/cjs/components/DatePicker/DatePicker.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("../Input/Input.css");
+require("./DatePicker.css");
+const pad2 = (n) => (n < 10 ? `0${n}` : `${n}`);
+/** Format a Date as a local yyyy-mm-dd string (avoids TZ day-shifting). */
+function toIso(date) {
+    if (!date || Number.isNaN(date.getTime()))
+        return '';
+    return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
+}
+/**
+ * DatePicker Component
+ *
+ * Compact date field built on the native <input type="date"> for full
+ * accessibility and the OS date picker. Styled with the Input field tokens.
+ *
+ * Emits `Date | null` (null when cleared). Sizes: sm, md, lg.
+ */
+const DatePicker = ({ value, onChange, label, helperText, error = false, errorMessage, disabled = false, size = 'md', min, max, fullWidth = false, className = '', id, name, required = false, readOnly = false, 'aria-label': ariaLabel, }) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const generatedId = (0, react_1.useId)();
+    const inputId = id || name || generatedId;
+    const helperTextId = `${inputId}-helper`;
+    const errorMessageId = `${inputId}-error`;
+    const showError = error && errorMessage;
+    const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
+    const wrapperClasses = [
+        'muka-input',
+        'muka-datepicker',
+        fullWidth && 'muka-input--full-width',
+        className,
+    ].filter(Boolean).join(' ');
+    const fieldClasses = [
+        'muka-input__field',
+        'muka-datepicker__field',
+        `muka-input__field--${size}`,
+        isFocused && 'muka-input__field--focused',
+        error && 'muka-input__field--error',
+        disabled && 'muka-input__field--disabled',
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, children: [label && ((0, jsx_runtime_1.jsxs)("label", { className: `muka-input__label muka-input__label--${size}`, htmlFor: inputId, children: [label, required && (0, jsx_runtime_1.jsx)("span", { className: "muka-input__required", "aria-hidden": "true", children: " *" })] })), (0, jsx_runtime_1.jsx)("div", { className: fieldClasses, onMouseDown: (e) => {
+                    if (disabled)
+                        return;
+                    if (e.target !== inputRef.current) {
+                        e.preventDefault();
+                        inputRef.current?.focus();
+                    }
+                }, children: (0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: inputId, className: "muka-input__native", type: "date", value: toIso(value), min: min ? toIso(min) : undefined, max: max ? toIso(max) : undefined, disabled: disabled, readOnly: readOnly, name: name, required: required, "aria-label": ariaLabel, "aria-invalid": error || undefined, "aria-describedby": describedBy, onChange: (e) => {
+                        const v = e.target.value;
+                        if (!v) {
+                            onChange?.(null);
+                            return;
+                        }
+                        const [y, m, d] = v.split('-').map(Number);
+                        if (y && m && d)
+                            onChange?.(new Date(y, m - 1, d));
+                    }, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false) }) }), showError && ((0, jsx_runtime_1.jsx)("p", { className: "muka-input__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && ((0, jsx_runtime_1.jsx)("p", { className: "muka-input__helper", id: helperTextId, children: helperText }))] }));
+};
+exports.DatePicker = DatePicker;
+exports.default = exports.DatePicker;
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../components/DatePicker/DatePicker.tsx"],"names":[],"mappings":";;;;AAAA,iCAAuD;AACvD,8BAA4B;AAC5B,4BAA0B;AAuD1B,MAAM,IAAI,GAAG,CAAC,CAAS,EAAU,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AAEhE,2EAA2E;AAC3E,SAAS,KAAK,CAAC,IAAkB;IAC/B,IAAI,CAAC,IAAI,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;QAAE,OAAO,EAAE,CAAC;IACrD,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;AACtF,CAAC;AAED;;;;;;;GAOG;AACI,MAAM,UAAU,GAA8B,CAAC,EACpD,KAAK,EACL,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,GAAG,KAAK,EACb,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,IAAI,EACX,GAAG,EACH,GAAG,EACH,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,EAAE,EACd,EAAE,EACF,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,YAAY,EAAE,SAAS,GACxB,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,WAAW,GAAG,IAAA,aAAK,GAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,IAAI,IAAI,WAAW,CAAC;IAC1C,MAAM,YAAY,GAAG,GAAG,OAAO,SAAS,CAAC;IACzC,MAAM,cAAc,GAAG,GAAG,OAAO,QAAQ,CAAC;IAE1C,MAAM,SAAS,GAAG,KAAK,IAAI,YAAY,CAAC;IACxC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC;IAEvF,MAAM,cAAc,GAAG;QACrB,YAAY;QACZ,iBAAiB;QACjB,SAAS,IAAI,wBAAwB;QACrC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,YAAY,GAAG;QACnB,mBAAmB;QACnB,wBAAwB;QACxB,sBAAsB,IAAI,EAAE;QAC5B,SAAS,IAAI,4BAA4B;QACzC,KAAK,IAAI,0BAA0B;QACnC,QAAQ,IAAI,6BAA6B;KAC1C,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iCAAK,SAAS,EAAE,cAAc,aAC3B,KAAK,IAAI,CACR,mCACE,SAAS,EAAE,wCAAwC,IAAI,EAAE,EACzD,OAAO,EAAE,OAAO,aAEf,KAAK,EACL,QAAQ,IAAI,iCAAM,SAAS,EAAC,sBAAsB,iBAAa,MAAM,mBAAU,IAC1E,CACT,EAID,gCACE,SAAS,EAAE,YAAY,EACvB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;oBACjB,IAAI,QAAQ;wBAAE,OAAO;oBACrB,IAAI,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;wBAClC,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;oBAC5B,CAAC;gBACH,CAAC,YAED,kCACE,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,OAAO,EACX,SAAS,EAAC,oBAAoB,EAC9B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,EACnB,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,EACjC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,EACjC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,gBACN,SAAS,kBACP,KAAK,IAAI,SAAS,sBACd,WAAW,EAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACd,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;wBACzB,IAAI,CAAC,CAAC,EAAE,CAAC;4BACP,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;4BACjB,OAAO;wBACT,CAAC;wBACD,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;wBAC3C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;4BAAE,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;oBACrD,CAAC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACjC,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,GACjC,GACE,EAEL,SAAS,IAAI,CACZ,8BAAG,SAAS,EAAC,mBAAmB,EAAC,EAAE,EAAE,cAAc,EAAE,IAAI,EAAC,OAAO,YAC9D,YAAY,GACX,CACL,EAEA,CAAC,SAAS,IAAI,UAAU,IAAI,CAC3B,8BAAG,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAE,YAAY,YAC/C,UAAU,GACT,CACL,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AA/GW,QAAA,UAAU,cA+GrB;AAEF,kBAAe,kBAAU,CAAC"}

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

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = exports.DatePicker = void 0;
+var DatePicker_1 = require("./DatePicker");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
+var DatePicker_2 = require("./DatePicker");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DatePicker_2).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/DatePicker/index.ts"],"names":[],"mappings":";;;;;;AAAA,2CAAgE;AAAvD,wGAAA,UAAU,OAAA;AACnB,2CAAuC;AAA9B,sHAAA,OAAO,OAAA"}