@revikornmann/muka-ui 0.2.1

package/dist/esm/components/Combobox/Combobox.css

@@ -0,0 +1,128 @@
+/* Combobox Component Styles */
+
+/* ─── Trigger (looks like an Input field, behaves like a button) ── */
+
+.muka-combobox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  width: 100%;
+  padding: 0 var(--input-field-padding-x);
+  background-color: var(--input-field-color-default-background);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  color: var(--color-text-default-default);
+  text-align: left;
+  cursor: pointer;
+  font-family: var(--text-body-md-regular-fontFamily);
+  font-weight: var(--text-body-md-regular-fontWeight);
+  font-size: var(--text-body-md-regular-fontSize);
+  line-height: var(--text-body-md-regular-lineHeight);
+  -webkit-tap-highlight-color: transparent;
+  transition: border-color 0.12s ease;
+}
+
+.muka-combobox--sm {
+  min-height: var(--input-field-height-sm);
+  border-radius: var(--input-field-radius-sm);
+}
+
+.muka-combobox--md {
+  min-height: var(--input-field-height-default);
+  border-radius: var(--input-field-radius-md);
+}
+
+.muka-combobox--lg {
+  min-height: var(--input-field-height-lg);
+  border-radius: var(--input-field-radius-lg);
+}
+
+.muka-combobox:hover:not(:disabled) {
+  border-color: var(--input-field-color-hover-border, var(--input-field-color-default-border));
+}
+
+.muka-combobox:focus-visible {
+  outline: none;
+  border-color: var(--input-field-color-focus-border, var(--color-action-default));
+}
+
+.muka-combobox--disabled,
+.muka-combobox:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.muka-combobox--placeholder .muka-combobox__label {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-combobox__leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-combobox__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.muka-combobox__clear,
+.muka-combobox__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-combobox__clear {
+  cursor: pointer;
+  padding: var(--spacing-1);
+  border-radius: var(--radius-sm);
+}
+
+.muka-combobox__clear:hover {
+  color: var(--color-text-default-default);
+  background-color: var(--color-surface-level1);
+}
+
+/* ─── Picker sheet body ───────────────────────────────── */
+
+.muka-combobox__picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  padding: 0 var(--spacing-4) var(--spacing-4);
+  min-height: 0;
+  max-height: 80vh;
+}
+
+.muka-combobox__title {
+  margin: 0;
+  padding: var(--spacing-2) 0;
+  color: var(--color-text-default-default);
+  font-family: var(--text-heading-sm-fontFamily);
+  font-weight: var(--text-heading-sm-fontWeight);
+  font-size: var(--text-heading-sm-fontSize);
+  line-height: var(--text-heading-sm-lineHeight);
+}
+
+.muka-combobox__search {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding-bottom: var(--spacing-2);
+  background-color: var(--color-surface-level3);
+}
+
+.muka-combobox__list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}

package/dist/esm/components/Combobox/Combobox.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useId, useMemo, useState } from 'react';
+import { Sheet } from '../Sheet';
+import { SearchInput } from '../SearchInput';
+import { ListItem } from '../ListItem';
+import { Icon } from '../Icon';
+import { EmptyState } from '../EmptyState';
+import './Combobox.css';
+const defaultFilter = (option, query) => {
+    if (!query)
+        return true;
+    const hay = `${option.label} ${option.caption ?? ''}`.toLowerCase();
+    return hay.includes(query);
+};
+/**
+ * Combobox — searchable select that opens as a bottom Sheet picker.
+ *
+ * Mobile-first: tap the trigger to open a full sheet with a search input and a
+ * scrollable list of options. Works on desktop too — the sheet renders centered
+ * by the underlying Vaul drawer's responsive behavior.
+ *
+ * For long lists, pass a custom `filter` to do fuzzy or async matching.
+ */
+export const Combobox = ({ value, onChange, options, placeholder = 'Select…', title, searchable = true, searchPlaceholder = 'Search', emptyText = 'No results', clearable = false, disabled = false, size = 'md', filter = defaultFilter, 'aria-label': ariaLabel, name, id, className = '', }) => {
+    const generatedId = useId();
+    const triggerId = id || name || generatedId;
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const selected = useMemo(() => options.find((o) => o.value === value) ?? null, [options, value]);
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return options;
+        return options.filter((o) => filter(o, q));
+    }, [options, query, filter]);
+    const handleOpenChange = (next) => {
+        setOpen(next);
+        if (!next)
+            setQuery('');
+    };
+    const handleSelect = (option) => {
+        if (option.disabled)
+            return;
+        onChange(option.value);
+        handleOpenChange(false);
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        onChange(null);
+    };
+    const triggerClasses = [
+        'muka-combobox',
+        `muka-combobox--${size}`,
+        !selected && 'muka-combobox--placeholder',
+        disabled && 'muka-combobox--disabled',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", id: triggerId, name: name, className: triggerClasses, onClick: () => !disabled && setOpen(true), disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, children: [selected?.icon && (_jsx("span", { className: "muka-combobox__leading", "aria-hidden": "true", children: selected.icon })), _jsx("span", { className: "muka-combobox__label", children: selected ? selected.label : placeholder }), clearable && selected && !disabled && (_jsx("span", { className: "muka-combobox__clear", onClick: handleClear, role: "button", tabIndex: -1, "aria-label": "Clear selection", children: _jsx(Icon, { name: "close", size: "xs" }) })), _jsx("span", { className: "muka-combobox__chevron", "aria-hidden": "true", children: _jsx(Icon, { name: "arrow-down-s", size: "sm" }) })] }), _jsx(Sheet, { open: open, onOpenChange: handleOpenChange, title: title || ariaLabel || placeholder, children: _jsxs("div", { className: "muka-combobox__picker", children: [title && _jsx("h2", { className: "muka-combobox__title", children: title }), searchable && (_jsx("div", { className: "muka-combobox__search", children: _jsx(SearchInput, { value: query, onChange: setQuery, placeholder: searchPlaceholder, autoFocus: true }) })), _jsx("div", { className: "muka-combobox__list", role: "listbox", "aria-label": title || placeholder, children: filtered.length === 0 ? (_jsx(EmptyState, { title: emptyText })) : (filtered.map((option) => (_jsx(ListItem, { label: option.label, caption: option.caption, leadingIcon: option.icon, selected: option.value === value, "aria-selected": option.value === value, disabled: option.disabled, onClick: () => handleSelect(option) }, option.value)))) })] }) })] }));
+};
+export default Combobox;
+//# sourceMappingURL=Combobox.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,GAGT,MAAM,YAAY,CAAC"}

package/dist/esm/components/Container/Container.css

@@ -0,0 +1,48 @@
+/* Container Component - Layout tokens (container.max-width, container.gap) */
+
+.muka-container {
+  box-sizing: border-box;
+  width: 100%;
+  margin-inline: auto;
+}
+
+/* Max-width variants */
+.muka-container--max-width-small {
+  max-width: var(--container-max-width-small);
+}
+
+.muka-container--max-width-medium {
+  max-width: var(--container-max-width-medium);
+}
+
+.muka-container--max-width-large {
+  max-width: var(--container-max-width-large);
+}
+
+.muka-container--max-width-xlarge {
+  max-width: var(--container-max-width-xlarge);
+}
+
+/* No gap — max-width only, no flex */
+.muka-container--gap-none {
+  /* block layout by default */
+}
+
+/* Gap variants — flex column with token gap */
+.muka-container--gap-compact {
+  display: flex;
+  flex-direction: column;
+  gap: var(--container-gap-compact);
+}
+
+.muka-container--gap-default {
+  display: flex;
+  flex-direction: column;
+  gap: var(--container-gap-default);
+}
+
+.muka-container--gap-spacious {
+  display: flex;
+  flex-direction: column;
+  gap: var(--container-gap-spacious);
+}

package/dist/esm/components/Container/Container.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Container.css';
+/**
+ * Container Component
+ *
+ * Layout primitive that constrains content width and optionally applies gap
+ * between children. Center-aligned by default. Use inside Section for
+ * page-level layout.
+ *
+ * Tokens: container.max-width.{small|medium|large|xlarge},
+ *        container.gap.{compact|default|spacious}
+ */
+export const Container = ({ children, maxWidth = 'large', gap = 'none', as: Element = 'div', className = '', ...props }) => {
+    const containerClasses = [
+        'muka-container',
+        `muka-container--max-width-${maxWidth}`,
+        `muka-container--gap-${gap}`,
+        className,
+    ].filter(Boolean).join(' ');
+    return (_jsx(Element, { className: containerClasses, ...props, children: children }));
+};
+export default Container;
+//# sourceMappingURL=Container.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../../../components/Container/Container.tsx"],"names":[],"mappings":";AACA,OAAO,iBAAiB,CAAC;AAmBzB;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAClD,QAAQ,EACR,QAAQ,GAAG,OAAO,EAClB,GAAG,GAAG,MAAM,EACZ,EAAE,EAAE,OAAO,GAAG,KAAK,EACnB,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,gBAAgB,GAAG;QACvB,gBAAgB;QAChB,6BAA6B,QAAQ,EAAE;QACvC,uBAAuB,GAAG,EAAE;QAC5B,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,KAAC,OAAO,IAAC,SAAS,EAAE,gBAAgB,KAAM,KAAK,YAC5C,QAAQ,GACD,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC"}

package/dist/esm/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { Icon } from '../Icon';
+import '../Menu/Menu.css';
+/**
+ * ContextMenu Component
+ *
+ * A menu that appears on right-click (context menu).
+ * Built on Radix UI ContextMenu for accessibility and keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenuTrigger>
+ *     <Card>Right-click me</Card>
+ *   </ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuItem onSelect={() => console.log('Copy')}>Copy</ContextMenuItem>
+ *     <ContextMenuItem onSelect={() => console.log('Paste')}>Paste</ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ * ```
+ */
+export const ContextMenu = ({ children, onOpenChange, modal = true, }) => {
+    return (_jsx(ContextMenuPrimitive.Root, { onOpenChange: onOpenChange, modal: modal, children: children }));
+};
+/**
+ * ContextMenuTrigger - The area that triggers the context menu on right-click
+ */
+export const ContextMenuTrigger = React.forwardRef(({ children, asChild = false, disabled = false, className = '' }, ref) => {
+    const triggerClasses = ['muka-context-menu__trigger', className].filter(Boolean).join(' ');
+    return (_jsx(ContextMenuPrimitive.Trigger, { ref: ref, asChild: asChild, disabled: disabled, className: triggerClasses || undefined, children: children }));
+});
+ContextMenuTrigger.displayName = 'ContextMenuTrigger';
+/**
+ * ContextMenuContent - The dropdown container for context menu items
+ */
+export const ContextMenuContent = React.forwardRef(({ children, alignOffset = 0, className = '', loop = true }, ref) => {
+    const contentClasses = ['muka-menu__content', className].filter(Boolean).join(' ');
+    return (_jsx(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.Content, { ref: ref, alignOffset: alignOffset, className: contentClasses, loop: loop, children: children }) }));
+});
+ContextMenuContent.displayName = 'ContextMenuContent';
+/**
+ * ContextMenuItem - An action item within the context menu
+ */
+export const ContextMenuItem = 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(ContextMenuPrimitive.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 })] }));
+});
+ContextMenuItem.displayName = 'ContextMenuItem';
+/**
+ * ContextMenuSeparator - A visual divider between menu items
+ */
+export const ContextMenuSeparator = React.forwardRef(({ className = '' }, ref) => {
+    const separatorClasses = ['muka-menu__separator', className].filter(Boolean).join(' ');
+    return _jsx(ContextMenuPrimitive.Separator, { ref: ref, className: separatorClasses });
+});
+ContextMenuSeparator.displayName = 'ContextMenuSeparator';
+/**
+ * ContextMenuGroup - A labeled group of context menu items
+ */
+export const ContextMenuGroup = React.forwardRef(({ children, label, className = '' }, ref) => {
+    const groupClasses = ['muka-menu__group', className].filter(Boolean).join(' ');
+    return (_jsxs(ContextMenuPrimitive.Group, { ref: ref, className: groupClasses, children: [label && (_jsx(ContextMenuPrimitive.Label, { className: "muka-menu__group-label", children: label })), children] }));
+});
+ContextMenuGroup.displayName = 'ContextMenuGroup';
+/**
+ * ContextMenuCheckboxItem - A checkable context menu item
+ */
+export const ContextMenuCheckboxItem = 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(ContextMenuPrimitive.CheckboxItem, { ref: ref, className: itemClasses, checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, children: [_jsx("span", { className: "muka-menu__item-indicator", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: "sm" }) }) }), _jsx("span", { className: "muka-menu__item-label", children: children })] }));
+});
+ContextMenuCheckboxItem.displayName = 'ContextMenuCheckboxItem';
+/**
+ * ContextMenuRadioGroup - A group of radio context menu items
+ */
+export const ContextMenuRadioGroup = React.forwardRef(({ children, value, onValueChange, className = '' }, ref) => {
+    const groupClasses = ['muka-menu__radio-group', className].filter(Boolean).join(' ');
+    return (_jsx(ContextMenuPrimitive.RadioGroup, { ref: ref, className: groupClasses, value: value, onValueChange: onValueChange, children: children }));
+});
+ContextMenuRadioGroup.displayName = 'ContextMenuRadioGroup';
+/**
+ * ContextMenuRadioItem - A radio option within a ContextMenuRadioGroup
+ */
+export const ContextMenuRadioItem = 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(ContextMenuPrimitive.RadioItem, { ref: ref, className: itemClasses, value: value, disabled: disabled, children: [_jsx("span", { className: "muka-menu__item-indicator", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx("span", { className: "muka-menu__radio-dot" }) }) }), _jsx("span", { className: "muka-menu__item-label", children: children })] }));
+});
+ContextMenuRadioItem.displayName = 'ContextMenuRadioItem';
+/**
+ * ContextMenuSub - A submenu container
+ */
+export const ContextMenuSub = ({ children, open, onOpenChange, defaultOpen, }) => {
+    return (_jsx(ContextMenuPrimitive.Sub, { open: open, onOpenChange: onOpenChange, defaultOpen: defaultOpen, children: children }));
+};
+/**
+ * ContextMenuSubTrigger - Trigger that opens a submenu
+ */
+export const ContextMenuSubTrigger = 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(ContextMenuPrimitive.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" }) })] }));
+});
+ContextMenuSubTrigger.displayName = 'ContextMenuSubTrigger';
+/**
+ * ContextMenuSubContent - The dropdown container for submenu items
+ */
+export const ContextMenuSubContent = 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(ContextMenuPrimitive.Portal, { children: _jsx(ContextMenuPrimitive.SubContent, { ref: ref, sideOffset: sideOffset, alignOffset: alignOffset, className: contentClasses, loop: loop, children: children }) }));
+});
+ContextMenuSubContent.displayName = 'ContextMenuSubContent';
+export default ContextMenu;
+//# sourceMappingURL=ContextMenu.js.map

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

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

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

@@ -0,0 +1,2 @@
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuGroup, ContextMenuCheckboxItem, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, } from './ContextMenu';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ContextMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EAChB,uBAAuB,EACvB,qBAAqB,EACrB,oBAAoB,EACpB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,eAAe,CAAC"}

package/dist/esm/components/DataPieChart/DataPieChart.css

@@ -0,0 +1,41 @@
+/* DataPieChart Component Styles - Using Muka Design Tokens */
+
+.muka-data-pie-chart {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.muka-data-pie-chart__svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  /* Start the segment at 12 o'clock instead of 3 o'clock */
+  transform: rotate(-90deg);
+}
+
+.muka-data-pie-chart__track {
+  fill: none;
+}
+
+.muka-data-pie-chart__segment {
+  fill: none;
+  /* Subtle lift on the filled segment, matching the Figma elevation */
+  filter: drop-shadow(0 2px 4px var(--color-black-alpha-5, rgba(0, 0, 0, 0.05)));
+  transition: stroke-dasharray 0.3s ease;
+}
+
+.muka-data-pie-chart__value {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  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);
+}

package/dist/esm/components/DataPieChart/DataPieChart.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './DataPieChart.css';
+/** SVG geometry per variant within a 0 0 100 100 viewBox (cx = cy = 50). */
+const GEOMETRY = {
+    donut: { radius: 40, strokeWidth: 16 },
+    pie: { radius: 25, strokeWidth: 50 },
+};
+/**
+ * DataPieChart Component
+ *
+ * A single-proportion donut or pie — one value shown as a fraction of a whole
+ * (e.g. "25% complete", "3 of 12 done"). For a multi-category breakdown across
+ * several segments, use `PieChart` instead.
+ *
+ * Variants: donut (default), pie
+ */
+export const DataPieChart = ({ value, max = 100, variant = 'donut', size = 120, color = 'var(--color-state-info-default)', trackColor = 'var(--color-surface-level0)', showValue = false, className = '', 'aria-label': ariaLabel, ...props }) => {
+    const { radius, strokeWidth } = GEOMETRY[variant];
+    const circumference = 2 * Math.PI * radius;
+    const safeMax = max > 0 ? max : 1;
+    const fraction = Math.min(1, Math.max(0, value / safeMax));
+    const percent = Math.round(fraction * 100);
+    const arcLength = fraction * circumference;
+    const chartClasses = [
+        'muka-data-pie-chart',
+        `muka-data-pie-chart--${variant}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const label = ariaLabel ?? `${variant === 'donut' ? 'Donut' : 'Pie'} chart: ${percent}%`;
+    return (_jsxs("div", { className: chartClasses, style: { width: size, height: size }, role: "img", "aria-label": label, ...props, children: [_jsxs("svg", { className: "muka-data-pie-chart__svg", viewBox: "0 0 100 100", "aria-hidden": "true", children: [_jsx("circle", { className: "muka-data-pie-chart__track", cx: 50, cy: 50, r: radius, strokeWidth: strokeWidth, stroke: trackColor }), fraction > 0 && (_jsx("circle", { className: "muka-data-pie-chart__segment", cx: 50, cy: 50, r: radius, strokeWidth: strokeWidth, stroke: color, strokeDasharray: `${arcLength} ${circumference - arcLength}`, strokeDashoffset: 0 }))] }), showValue && variant === 'donut' && (_jsxs("span", { className: "muka-data-pie-chart__value", "aria-hidden": "true", children: [percent, "%"] }))] }));
+};
+export default DataPieChart;
+//# sourceMappingURL=DataPieChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataPieChart.js","sourceRoot":"","sources":["../../../../components/DataPieChart/DataPieChart.tsx"],"names":[],"mappings":";AACA,OAAO,oBAAoB,CAAC;AA+B5B,4EAA4E;AAC5E,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;IACtC,GAAG,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAAE;CAC5B,CAAC;AAEX;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,KAAK,EACL,GAAG,GAAG,GAAG,EACT,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,GAAG,EACV,KAAK,GAAG,iCAAiC,EACzC,UAAU,GAAG,6BAA6B,EAC1C,SAAS,GAAG,KAAK,EACjB,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,MAAM,CAAC;IAE3C,MAAM,OAAO,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;IAC3C,MAAM,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;IAE3C,MAAM,YAAY,GAAG;QACnB,qBAAqB;QACrB,wBAAwB,OAAO,EAAE;QACjC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,KAAK,GAAG,SAAS,IAAI,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,WAAW,OAAO,GAAG,CAAC;IAEzF,OAAO,CACL,eACE,SAAS,EAAE,YAAY,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EACpC,IAAI,EAAC,KAAK,gBACE,KAAK,KACb,KAAK,aAET,eAAK,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAC,aAAa,iBAAa,MAAM,aAEhF,iBACE,SAAS,EAAC,4BAA4B,EACtC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,UAAU,GAClB,EACD,QAAQ,GAAG,CAAC,IAAI,CACf,iBACE,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,EAAE,EACN,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,MAAM,EACT,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,KAAK,EACb,eAAe,EAAE,GAAG,SAAS,IAAI,aAAa,GAAG,SAAS,EAAE,EAC5D,gBAAgB,EAAE,CAAC,GACnB,CACH,IACG,EACL,SAAS,IAAI,OAAO,KAAK,OAAO,IAAI,CACnC,gBAAM,SAAS,EAAC,4BAA4B,iBAAa,MAAM,aAC5D,OAAO,SACH,CACR,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/DataPieChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}