@revikornmann/muka-ui 0.2.1

package/dist/esm/components/Menu/Menu.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { createContext } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Icon } from '../Icon';
+import './Menu.css';
+const MenuContext = createContext({});
+/**
+ * Menu Component
+ *
+ * A dropdown menu for displaying actions and options.
+ * Built on Radix UI DropdownMenu for accessibility and keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * <Menu>
+ *   <MenuTrigger asChild>
+ *     <Button>Open Menu</Button>
+ *   </MenuTrigger>
+ *   <MenuContent>
+ *     <MenuItem onSelect={() => console.log('Edit')}>Edit</MenuItem>
+ *     <MenuItem onSelect={() => console.log('Delete')} destructive>Delete</MenuItem>
+ *   </MenuContent>
+ * </Menu>
+ * ```
+ */
+export const Menu = ({ children, open, onOpenChange, defaultOpen, modal = true, }) => {
+    return (_jsx(MenuContext.Provider, { value: { onOpenChange }, children: _jsx(DropdownMenuPrimitive.Root, { open: open, onOpenChange: onOpenChange, defaultOpen: defaultOpen, modal: modal, children: children }) }));
+};
+/**
+ * MenuTrigger - Button that opens the menu
+ */
+export const MenuTrigger = React.forwardRef(({ children, asChild = false, className = '' }, ref) => {
+    return (_jsx(DropdownMenuPrimitive.Trigger, { ref: ref, asChild: asChild, className: className || undefined, children: children }));
+});
+MenuTrigger.displayName = 'MenuTrigger';
+/**
+ * MenuContent - The dropdown container for menu items
+ */
+export const MenuContent = React.forwardRef(({ children, align = 'start', side = 'bottom', sideOffset = 4, alignOffset = 0, className = '', loop = true, }, ref) => {
+    const contentClasses = ['muka-menu__content', className].filter(Boolean).join(' ');
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, align: align, side: side, sideOffset: sideOffset, alignOffset: alignOffset, className: contentClasses, loop: loop, children: children }) }));
+});
+MenuContent.displayName = 'MenuContent';
+/**
+ * MenuItem - An action item within the menu
+ */
+export const MenuItem = React.forwardRef(({ children, onSelect, disabled = false, destructive = false, icon, shortcut, className = '', }, ref) => {
+    const itemClasses = [
+        'muka-menu__item',
+        destructive && 'muka-menu__item--destructive',
+        disabled && 'muka-menu__item--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs(DropdownMenuPrimitive.Item, { ref: ref, className: itemClasses, onSelect: onSelect, disabled: disabled, children: [icon && _jsx("span", { className: "muka-menu__item-icon", children: icon }), _jsx("span", { className: "muka-menu__item-label", children: children }), shortcut && _jsx("span", { className: "muka-menu__item-shortcut", children: shortcut })] }));
+});
+MenuItem.displayName = 'MenuItem';
+/**
+ * MenuSeparator - A visual divider between menu items
+ */
+export const MenuSeparator = React.forwardRef(({ className = '' }, ref) => {
+    const separatorClasses = ['muka-menu__separator', className].filter(Boolean).join(' ');
+    return _jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: separatorClasses });
+});
+MenuSeparator.displayName = 'MenuSeparator';
+/**
+ * MenuGroup - A labeled group of menu items
+ */
+export const MenuGroup = React.forwardRef(({ children, label, className = '' }, ref) => {
+    const groupClasses = ['muka-menu__group', className].filter(Boolean).join(' ');
+    return (_jsxs(DropdownMenuPrimitive.Group, { ref: ref, className: groupClasses, children: [label && (_jsx(DropdownMenuPrimitive.Label, { className: "muka-menu__group-label", children: label })), children] }));
+});
+MenuGroup.displayName = 'MenuGroup';
+/**
+ * MenuCheckboxItem - A checkable menu item
+ */
+export const MenuCheckboxItem = React.forwardRef(({ children, checked, onCheckedChange, disabled = false, className = '' }, ref) => {
+    const itemClasses = [
+        'muka-menu__item',
+        'muka-menu__item--checkbox',
+        disabled && 'muka-menu__item--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: itemClasses, checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, children: [_jsx("span", { className: "muka-menu__item-indicator", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: "sm" }) }) }), _jsx("span", { className: "muka-menu__item-label", children: children })] }));
+});
+MenuCheckboxItem.displayName = 'MenuCheckboxItem';
+/**
+ * MenuRadioGroup - A group of radio menu items
+ */
+export const MenuRadioGroup = React.forwardRef(({ children, value, onValueChange, className = '' }, ref) => {
+    const groupClasses = ['muka-menu__radio-group', className].filter(Boolean).join(' ');
+    return (_jsx(DropdownMenuPrimitive.RadioGroup, { ref: ref, className: groupClasses, value: value, onValueChange: onValueChange, children: children }));
+});
+MenuRadioGroup.displayName = 'MenuRadioGroup';
+/**
+ * MenuRadioItem - A radio option within a MenuRadioGroup
+ */
+export const MenuRadioItem = React.forwardRef(({ children, value, disabled = false, className = '' }, ref) => {
+    const itemClasses = [
+        'muka-menu__item',
+        'muka-menu__item--radio',
+        disabled && 'muka-menu__item--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { ref: ref, className: itemClasses, value: value, disabled: disabled, children: [_jsx("span", { className: "muka-menu__item-indicator", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx("span", { className: "muka-menu__radio-dot" }) }) }), _jsx("span", { className: "muka-menu__item-label", children: children })] }));
+});
+MenuRadioItem.displayName = 'MenuRadioItem';
+/**
+ * MenuSub - A submenu container
+ */
+export const MenuSub = ({ children, open, onOpenChange, defaultOpen, }) => {
+    return (_jsx(DropdownMenuPrimitive.Sub, { open: open, onOpenChange: onOpenChange, defaultOpen: defaultOpen, children: children }));
+};
+/**
+ * MenuSubTrigger - Trigger that opens a submenu
+ */
+export const MenuSubTrigger = React.forwardRef(({ children, icon, disabled = false, className = '' }, ref) => {
+    const itemClasses = [
+        'muka-menu__item',
+        'muka-menu__item--sub-trigger',
+        disabled && 'muka-menu__item--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { ref: ref, className: itemClasses, disabled: disabled, children: [icon && _jsx("span", { className: "muka-menu__item-icon", children: icon }), _jsx("span", { className: "muka-menu__item-label", children: children }), _jsx("span", { className: "muka-menu__item-chevron", children: _jsx(Icon, { name: "arrow-right", variant: "line", size: "sm" }) })] }));
+});
+MenuSubTrigger.displayName = 'MenuSubTrigger';
+/**
+ * MenuSubContent - The dropdown container for submenu items
+ */
+export const MenuSubContent = React.forwardRef(({ children, sideOffset = 2, alignOffset = -4, className = '', loop = true }, ref) => {
+    const contentClasses = ['muka-menu__content', 'muka-menu__content--sub', className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.SubContent, { ref: ref, sideOffset: sideOffset, alignOffset: alignOffset, className: contentClasses, loop: loop, children: children }) }));
+});
+MenuSubContent.displayName = 'MenuSubContent';
+export default Menu;
+//# sourceMappingURL=Menu.js.map

package/dist/esm/components/Menu/Menu.js.map

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

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

@@ -0,0 +1,2 @@
+export { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator, MenuGroup, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, } from './Menu';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,WAAW,EACX,WAAW,EACX,QAAQ,EACR,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,OAAO,EACP,cAAc,EACd,cAAc,GACf,MAAM,QAAQ,CAAC"}

package/dist/esm/components/NavigationTransition/NavigationTransition.css

@@ -0,0 +1,25 @@
+/* NavigationTransition Component Styles */
+
+/* ─── Wrapper ────────────────────────────────────────── */
+
+.muka-nav-transition {
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Disable interaction during animation */
+.muka-nav-transition--active {
+  pointer-events: none;
+}
+
+/* ─── View slots ─────────────────────────────────────── */
+
+.muka-nav-transition--active .muka-nav-transition__view {
+  position: absolute;
+  inset: 0;
+}
+
+/* Z-index layering */
+.muka-nav-transition__view--bottom { z-index: 1; }
+.muka-nav-transition__view--top { z-index: 2; }

package/dist/esm/components/NavigationTransition/NavigationTransition.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useLayoutEffect, useRef } from 'react';
+import './NavigationTransition.css';
+const TRANSITION_DURATION = 300;
+export const NavigationTransition = ({ activeView, activeKey, direction, duration = TRANSITION_DURATION, className = '', }) => {
+    const [transition, setTransition] = useState(null);
+    const prevViewRef = useRef(activeView);
+    const prevKeyRef = useRef(activeKey);
+    const timerRef = useRef();
+    const topRef = useRef(null);
+    const bottomRef = useRef(null);
+    // Detect key change synchronously during render (React's "store previous value" pattern)
+    if (activeKey !== prevKeyRef.current && !transition) {
+        setTransition({
+            exitingView: prevViewRef.current,
+            direction,
+        });
+        prevKeyRef.current = activeKey;
+    }
+    // Run Web Animations API when transition starts
+    useLayoutEffect(() => {
+        if (!transition || !topRef.current || !bottomRef.current)
+            return;
+        const options = {
+            duration,
+            easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+            fill: 'forwards',
+        };
+        if (transition.direction === 'forward') {
+            topRef.current.animate([{ transform: 'translateX(100%)' }, { transform: 'translateX(0)' }], options);
+            bottomRef.current.animate([{ transform: 'translateX(0)' }, { transform: 'translateX(-30%)' }], options);
+        }
+        else {
+            topRef.current.animate([{ transform: 'translateX(0)' }, { transform: 'translateX(100%)' }], options);
+            bottomRef.current.animate([{ transform: 'translateX(-30%)' }, { transform: 'translateX(0)' }], options);
+        }
+    }, [transition, duration]);
+    // Keep the previous view ref up-to-date when not transitioning
+    useEffect(() => {
+        if (!transition) {
+            prevViewRef.current = activeView;
+            prevKeyRef.current = activeKey;
+        }
+    });
+    // End the transition after the animation duration
+    useEffect(() => {
+        if (transition) {
+            timerRef.current = window.setTimeout(() => {
+                setTransition(null);
+            }, duration);
+            return () => clearTimeout(timerRef.current);
+        }
+    }, [transition, duration]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => clearTimeout(timerRef.current);
+    }, []);
+    if (!transition) {
+        return (_jsx("div", { className: `muka-nav-transition ${className}`.trim(), children: activeView }));
+    }
+    const isForward = transition.direction === 'forward';
+    const enteringView = activeView;
+    const exitingView = transition.exitingView;
+    // Forward: entering view on top (slides over), exiting below
+    // Back: exiting view on top (slides away), entering below
+    const topView = isForward ? enteringView : exitingView;
+    const bottomView = isForward ? exitingView : enteringView;
+    return (_jsxs("div", { className: `muka-nav-transition muka-nav-transition--active ${className}`.trim(), children: [_jsx("div", { ref: bottomRef, className: "muka-nav-transition__view muka-nav-transition__view--bottom", children: bottomView }), _jsx("div", { ref: topRef, className: "muka-nav-transition__view muka-nav-transition__view--top", children: topView })] }));
+};
+export default NavigationTransition;
+//# sourceMappingURL=NavigationTransition.js.map

package/dist/esm/components/NavigationTransition/NavigationTransition.js.map

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

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

@@ -0,0 +1,2 @@
+export { NavigationTransition } from './NavigationTransition';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/NavigationTransition/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAkC,MAAM,wBAAwB,CAAC"}

package/dist/esm/components/NumberInput/NumberInput.css

@@ -0,0 +1,27 @@
+/* NumberInput — reuses Input field styles (../Input/Input.css). */
+/* Only the prefix/suffix affixes are NumberInput-specific. */
+
+.muka-numberinput__addon {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-input-md-fontFamily);
+  font-size: var(--text-input-md-fontSize);
+  line-height: var(--text-input-md-lineHeight);
+  user-select: none;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+/* Hide the native number spinners — affixes/step API replace them. */
+.muka-numberinput__field .muka-input__native::-webkit-outer-spin-button,
+.muka-numberinput__field .muka-input__native::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.muka-numberinput__field .muka-input__native {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}

package/dist/esm/components/NumberInput/NumberInput.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useId, useRef } from 'react';
+import '../Input/Input.css';
+import './NumberInput.css';
+/**
+ * NumberInput Component
+ *
+ * Numeric variant of Input. Emits parsed `number` values (not strings) and
+ * supports fixed prefix/suffix affixes (currency symbols, units).
+ *
+ * Reuses the Input field tokens/styles for visual parity:
+ * - input.field.color.{state}.{background|foreground|border}
+ * - input.field.radius / padding / height
+ * - text.input.{size} / text.label.{size}.semibold
+ */
+export const NumberInput = ({ value, onChange, label, helperText, error = false, errorMessage, disabled = false, size = 'md', prefix, suffix, step, min, max, placeholder, fullWidth = false, className = '', id, name, required = false, readOnly = false, }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef(null);
+    const generatedId = useId();
+    const inputId = id || name || generatedId;
+    const helperTextId = `${inputId}-helper`;
+    const errorMessageId = `${inputId}-error`;
+    const hasPrefix = Boolean(prefix);
+    const hasSuffix = Boolean(suffix);
+    const showError = error && errorMessage;
+    const describedBy = showError ? errorMessageId : helperText ? helperTextId : undefined;
+    const wrapperClasses = [
+        'muka-input',
+        'muka-numberinput',
+        fullWidth && 'muka-input--full-width',
+        className,
+    ].filter(Boolean).join(' ');
+    const fieldClasses = [
+        'muka-input__field',
+        'muka-numberinput__field',
+        `muka-input__field--${size}`,
+        isFocused && 'muka-input__field--focused',
+        error && 'muka-input__field--error',
+        disabled && 'muka-input__field--disabled',
+    ].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: wrapperClasses, children: [label && (_jsxs("label", { className: `muka-input__label muka-input__label--${size}`, htmlFor: inputId, children: [label, required && _jsx("span", { className: "muka-input__required", "aria-hidden": "true", children: " *" })] })), _jsxs("div", { className: fieldClasses, onMouseDown: (e) => {
+                    if (disabled)
+                        return;
+                    if (e.target !== inputRef.current) {
+                        e.preventDefault();
+                        inputRef.current?.focus();
+                    }
+                }, children: [hasPrefix && (_jsx("span", { className: "muka-numberinput__addon muka-numberinput__addon--prefix", children: prefix })), _jsx("input", { ref: inputRef, id: inputId, className: "muka-input__native", type: "number", inputMode: "decimal", value: Number.isFinite(value) ? value : 0, step: step, min: min, max: max, placeholder: placeholder, disabled: disabled, readOnly: readOnly, name: name, required: required, "aria-invalid": error || undefined, "aria-describedby": describedBy, onChange: (e) => {
+                            const parsed = e.target.valueAsNumber;
+                            onChange?.(Number.isFinite(parsed) ? parsed : 0);
+                        }, onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), onKeyDownCapture: (e) => {
+                            if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
+                                e.stopPropagation();
+                            }
+                        } }), hasSuffix && (_jsx("span", { className: "muka-numberinput__addon muka-numberinput__addon--suffix", children: suffix }))] }), showError && (_jsx("p", { className: "muka-input__error", id: errorMessageId, role: "alert", children: errorMessage })), !showError && helperText && (_jsx("p", { className: "muka-input__helper", id: helperTextId, children: helperText }))] }));
+};
+export default NumberInput;
+//# sourceMappingURL=NumberInput.js.map

package/dist/esm/components/NumberInput/NumberInput.js.map

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

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

@@ -0,0 +1,3 @@
+export { NumberInput } from './NumberInput';
+export { default } from './NumberInput';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/NumberInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}

package/dist/esm/components/Pagination/Pagination.css

@@ -0,0 +1,99 @@
+/* Pagination Component Styles */
+
+.muka-pagination__list {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Base button */
+.muka-pagination__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--border-width-regular) solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--color-text-default-default);
+  cursor: pointer;
+  font: inherit;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+  padding: 0;
+}
+
+.muka-pagination__button:hover:not(:disabled):not(.muka-pagination__button--active) {
+  background-color: var(--color-surface-level1);
+}
+
+/* Active page */
+.muka-pagination__button--active {
+  background-color: var(--button-color-primary-default-background);
+  color: var(--button-color-primary-default-foreground);
+  border-color: var(--button-color-primary-default-background);
+  font-weight: 600;
+}
+
+/* Nav buttons (prev/next/first/last) */
+.muka-pagination__button--nav {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-pagination__button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Ellipsis */
+.muka-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-subtle-default);
+  user-select: none;
+}
+
+/* Disabled root */
+.muka-pagination--disabled {
+  pointer-events: none;
+  opacity: 0.4;
+}
+
+/* Size variants */
+.muka-pagination--sm .muka-pagination__button {
+  min-width: var(--button-height-sm);
+  height: var(--button-height-sm);
+  font-size: var(--text-label-sm-regular-fontSize);
+}
+
+.muka-pagination--sm .muka-pagination__ellipsis {
+  min-width: var(--button-height-sm);
+  height: var(--button-height-sm);
+  font-size: var(--text-label-sm-regular-fontSize);
+}
+
+.muka-pagination--md .muka-pagination__button {
+  min-width: var(--button-height-default);
+  height: var(--button-height-default);
+  font-size: var(--text-label-md-regular-fontSize);
+}
+
+.muka-pagination--md .muka-pagination__ellipsis {
+  min-width: var(--button-height-default);
+  height: var(--button-height-default);
+  font-size: var(--text-label-md-regular-fontSize);
+}
+
+.muka-pagination--lg .muka-pagination__button {
+  min-width: var(--button-height-lg);
+  height: var(--button-height-lg);
+  font-size: var(--text-label-lg-regular-fontSize);
+}
+
+.muka-pagination--lg .muka-pagination__ellipsis {
+  min-width: var(--button-height-lg);
+  height: var(--button-height-lg);
+  font-size: var(--text-label-lg-regular-fontSize);
+}

package/dist/esm/components/Pagination/Pagination.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import './Pagination.css';
+function getPageRange(currentPage, totalPages, siblingCount) {
+    const totalSlots = siblingCount * 2 + 5; // siblings + current + 2 ellipsis + first + last
+    if (totalPages <= totalSlots) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const leftSibling = Math.max(currentPage - siblingCount, 1);
+    const rightSibling = Math.min(currentPage + siblingCount, totalPages);
+    const showLeftEllipsis = leftSibling > 2;
+    const showRightEllipsis = rightSibling < totalPages - 1;
+    const pages = [];
+    if (showLeftEllipsis) {
+        pages.push(1, 'ellipsis');
+    }
+    else {
+        for (let i = 1; i < leftSibling; i++)
+            pages.push(i);
+    }
+    for (let i = leftSibling; i <= rightSibling; i++)
+        pages.push(i);
+    if (showRightEllipsis) {
+        pages.push('ellipsis', totalPages);
+    }
+    else {
+        for (let i = rightSibling + 1; i <= totalPages; i++)
+            pages.push(i);
+    }
+    return pages;
+}
+export const Pagination = ({ totalPages, currentPage, onPageChange, siblingCount = 1, showFirstLast = true, showPrevNext = true, size = 'md', disabled = false, className = '', }) => {
+    const pages = useMemo(() => getPageRange(currentPage, totalPages, siblingCount), [currentPage, totalPages, siblingCount]);
+    const rootClasses = [
+        'muka-pagination',
+        `muka-pagination--${size}`,
+        disabled && 'muka-pagination--disabled',
+        className,
+    ].filter(Boolean).join(' ');
+    const isFirst = currentPage === 1;
+    const isLast = currentPage === totalPages;
+    return (_jsx("nav", { "aria-label": "pagination", className: rootClasses, children: _jsxs("ul", { className: "muka-pagination__list", children: [showFirstLast && (_jsx("li", { children: _jsx("button", { type: "button", className: "muka-pagination__button muka-pagination__button--nav", onClick: () => onPageChange(1), disabled: disabled || isFirst, "aria-label": "First page", children: "\u00AB\u00AB" }) })), showPrevNext && (_jsx("li", { children: _jsx("button", { type: "button", className: "muka-pagination__button muka-pagination__button--nav", onClick: () => onPageChange(currentPage - 1), disabled: disabled || isFirst, "aria-label": "Previous page", children: "\u00AB" }) })), pages.map((page, index) => page === 'ellipsis' ? (_jsx("li", { children: _jsx("span", { className: "muka-pagination__ellipsis", children: "\u2026" }) }, `ellipsis-${index}`)) : (_jsx("li", { children: _jsx("button", { type: "button", className: [
+                            'muka-pagination__button',
+                            page === currentPage && 'muka-pagination__button--active',
+                        ].filter(Boolean).join(' '), onClick: () => onPageChange(page), disabled: disabled, "aria-current": page === currentPage ? 'page' : undefined, "aria-label": `Page ${page}`, children: page }) }, page))), showPrevNext && (_jsx("li", { children: _jsx("button", { type: "button", className: "muka-pagination__button muka-pagination__button--nav", onClick: () => onPageChange(currentPage + 1), disabled: disabled || isLast, "aria-label": "Next page", children: "\u00BB" }) })), showFirstLast && (_jsx("li", { children: _jsx("button", { type: "button", className: "muka-pagination__button muka-pagination__button--nav", onClick: () => onPageChange(totalPages), disabled: disabled || isLast, "aria-label": "Last page", children: "\u00BB\u00BB" }) }))] }) }));
+};
+export default Pagination;
+//# sourceMappingURL=Pagination.js.map

package/dist/esm/components/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../../../components/Pagination/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,kBAAkB,CAAC;AAuB1B,SAAS,YAAY,CACnB,WAAmB,EACnB,UAAkB,EAClB,YAAoB;IAEpB,MAAM,UAAU,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,iDAAiD;IAE1F,IAAI,UAAU,IAAI,UAAU,EAAE,CAAC;QAC7B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAC7D,CAAC;IAED,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,YAAY,EAAE,CAAC,CAAC,CAAC;IAC5D,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,YAAY,EAAE,UAAU,CAAC,CAAC;IAEtE,MAAM,gBAAgB,GAAG,WAAW,GAAG,CAAC,CAAC;IACzC,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,GAAG,CAAC,CAAC;IAExD,MAAM,KAAK,GAA4B,EAAE,CAAC;IAE1C,IAAI,gBAAgB,EAAE,CAAC;QACrB,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;IAC5B,CAAC;SAAM,CAAC;QACN,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,EAAE,CAAC,EAAE;YAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,KAAK,IAAI,CAAC,GAAG,WAAW,EAAE,CAAC,IAAI,YAAY,EAAE,CAAC,EAAE;QAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAEhE,IAAI,iBAAiB,EAAE,CAAC;QACtB,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IACrC,CAAC;SAAM,CAAC;QACN,KAAK,IAAI,CAAC,GAAG,YAAY,GAAG,CAAC,EAAE,CAAC,IAAI,UAAU,EAAE,CAAC,EAAE;YAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACrE,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EACpD,UAAU,EACV,WAAW,EACX,YAAY,EACZ,YAAY,GAAG,CAAC,EAChB,aAAa,GAAG,IAAI,EACpB,YAAY,GAAG,IAAI,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,YAAY,CAAC,WAAW,EAAE,UAAU,EAAE,YAAY,CAAC,EACzD,CAAC,WAAW,EAAE,UAAU,EAAE,YAAY,CAAC,CACxC,CAAC;IAEF,MAAM,WAAW,GAAG;QAClB,iBAAiB;QACjB,oBAAoB,IAAI,EAAE;QAC1B,QAAQ,IAAI,2BAA2B;QACvC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,OAAO,GAAG,WAAW,KAAK,CAAC,CAAC;IAClC,MAAM,MAAM,GAAG,WAAW,KAAK,UAAU,CAAC;IAE1C,OAAO,CACL,4BAAgB,YAAY,EAAC,SAAS,EAAE,WAAW,YACjD,cAAI,SAAS,EAAC,uBAAuB,aAClC,aAAa,IAAI,CAChB,uBACE,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sDAAsD,EAChE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAC9B,QAAQ,EAAE,QAAQ,IAAI,OAAO,gBAClB,YAAY,6BAGhB,GACN,CACN,EAEA,YAAY,IAAI,CACf,uBACE,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sDAAsD,EAChE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,EAC5C,QAAQ,EAAE,QAAQ,IAAI,OAAO,gBAClB,eAAe,uBAGnB,GACN,CACN,EAEA,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CACzB,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CACpB,uBACE,eAAM,SAAS,EAAC,2BAA2B,uBAAS,IAD7C,YAAY,KAAK,EAAE,CAEvB,CACN,CAAC,CAAC,CAAC,CACF,uBACE,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE;4BACT,yBAAyB;4BACzB,IAAI,KAAK,WAAW,IAAI,iCAAiC;yBAC1D,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACjC,QAAQ,EAAE,QAAQ,kBACJ,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBAC3C,QAAQ,IAAI,EAAE,YAEzB,IAAI,GACE,IAbF,IAAI,CAcR,CACN,CACF,EAEA,YAAY,IAAI,CACf,uBACE,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sDAAsD,EAChE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,WAAW,GAAG,CAAC,CAAC,EAC5C,QAAQ,EAAE,QAAQ,IAAI,MAAM,gBACjB,WAAW,uBAGf,GACN,CACN,EAEA,aAAa,IAAI,CAChB,uBACE,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sDAAsD,EAChE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EACvC,QAAQ,EAAE,QAAQ,IAAI,MAAM,gBACjB,WAAW,6BAGf,GACN,CACN,IACE,GACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Pagination } from './Pagination';
+export { default } from './Pagination';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/esm/components/PieChart/PieChart.css

@@ -0,0 +1,94 @@
+/* PieChart Component Styles - Using Muka Design Tokens */
+
+.muka-piechart {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+/* Legend layout */
+.muka-piechart--legend-right {
+  flex-direction: row;
+}
+
+.muka-piechart--legend-bottom {
+  flex-direction: column;
+}
+
+/* ========================================
+   CHART
+   ======================================== */
+
+.muka-piechart__chart {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.muka-piechart__chart--sm {
+  width: var(--piechart-size-diameter-sm);
+  height: var(--piechart-size-diameter-sm);
+}
+
+.muka-piechart__chart--md {
+  width: var(--piechart-size-diameter-md);
+  height: var(--piechart-size-diameter-md);
+}
+
+.muka-piechart__chart--lg {
+  width: var(--piechart-size-diameter-lg);
+  height: var(--piechart-size-diameter-lg);
+}
+
+.muka-piechart__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  /* Start slices at 12 o'clock instead of 3 o'clock */
+  transform: rotate(-90deg);
+}
+
+.muka-piechart__track {
+  fill: none;
+  stroke: var(--piechart-color-track);
+}
+
+.muka-piechart__segment {
+  fill: none;
+}
+
+/* ========================================
+   LEGEND
+   ======================================== */
+
+.muka-piechart__legend {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.muka-piechart__legend-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  font-size: var(--text-body-sm-regular-fontSize);
+  line-height: var(--text-body-sm-regular-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-piechart__swatch {
+  flex-shrink: 0;
+  width: var(--spacing-3);
+  height: var(--spacing-3);
+  border-radius: var(--border-radius-sm);
+}
+
+.muka-piechart__legend-value {
+  margin-left: auto;
+  padding-left: var(--spacing-2);
+  color: var(--color-text-subtle-default);
+}