@revikornmann/muka-ui 0.2.1

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

package/dist/cjs/components/PieChart/PieChart.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PieChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./PieChart.css");
+/** Number of categorical palette colors defined in tokens (piechart.color.categorical.1–8) */
+const PALETTE_SIZE = 8;
+/** SVG geometry per variant. cx = cy = 50 within a 0 0 100 100 viewBox. */
+const GEOMETRY = {
+    donut: { radius: 40, strokeWidth: 16 },
+    pie: { radius: 25, strokeWidth: 50 },
+};
+/** Resolve a slice color: explicit prop wins, else cycle the categorical palette. */
+const resolveColor = (segment, index) => segment.color ?? `var(--piechart-color-categorical-${(index % PALETTE_SIZE) + 1})`;
+/**
+ * PieChart Component
+ *
+ * Multi-segment pie or donut chart. Pass a `data` array of `{ label, value }`;
+ * slices are sized proportionally and colored from a categorical token palette
+ * (override per segment with `color`). An optional legend can be shown to the
+ * right of or below the chart.
+ *
+ * Variants: pie, donut
+ * Sizes: sm (32px), md (64px), lg (128px)
+ */
+const PieChart = ({ data, variant = 'donut', size = 'md', showLegend = false, legendPosition = 'right', className = '', 'aria-label': ariaLabel, ...props }) => {
+    const { radius, strokeWidth } = GEOMETRY[variant];
+    const circumference = 2 * Math.PI * radius;
+    const total = data.reduce((sum, segment) => sum + Math.max(0, segment.value), 0);
+    // Pre-compute each slice: resolved color, percentage, and dash geometry.
+    let cumulative = 0;
+    const slices = data.map((segment, index) => {
+        const value = Math.max(0, segment.value);
+        const fraction = total > 0 ? value / total : 0;
+        const arcLength = fraction * circumference;
+        const slice = {
+            segment,
+            color: resolveColor(segment, index),
+            percent: Math.round(fraction * 100),
+            arcLength,
+            offset: -cumulative,
+        };
+        cumulative += arcLength;
+        return slice;
+    });
+    const wrapperClasses = [
+        'muka-piechart',
+        showLegend && `muka-piechart--legend-${legendPosition}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const chartClasses = [
+        'muka-piechart__chart',
+        `muka-piechart__chart--${variant}`,
+        `muka-piechart__chart--${size}`,
+    ].join(' ');
+    const summary = total > 0
+        ? slices.map((slice) => `${slice.segment.label} ${slice.percent}%`).join(', ')
+        : 'No data';
+    const label = ariaLabel ?? `${variant === 'donut' ? 'Donut' : 'Pie'} chart: ${summary}`;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, role: "img", "aria-label": label, ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: chartClasses, children: (0, jsx_runtime_1.jsxs)("svg", { className: "muka-piechart__svg", viewBox: "0 0 100 100", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("circle", { className: "muka-piechart__track", cx: 50, cy: 50, r: radius, strokeWidth: strokeWidth }), slices.map((slice, index) => ((0, jsx_runtime_1.jsx)("circle", { className: "muka-piechart__segment", cx: 50, cy: 50, r: radius, strokeWidth: strokeWidth, stroke: slice.color, strokeDasharray: `${slice.arcLength} ${circumference - slice.arcLength}`, strokeDashoffset: slice.offset }, index)))] }) }), showLegend && ((0, jsx_runtime_1.jsx)("ul", { className: "muka-piechart__legend", children: slices.map((slice, index) => ((0, jsx_runtime_1.jsxs)("li", { className: "muka-piechart__legend-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-piechart__swatch", style: { backgroundColor: slice.color }, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { className: "muka-piechart__legend-label", children: slice.segment.label }), (0, jsx_runtime_1.jsxs)("span", { className: "muka-piechart__legend-value", children: [slice.percent, "%"] })] }, index))) }))] }));
+};
+exports.PieChart = PieChart;
+exports.default = exports.PieChart;
+//# sourceMappingURL=PieChart.js.map

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

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

package/dist/cjs/components/PieChart/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.PieChart = void 0;
+var PieChart_1 = require("./PieChart");
+Object.defineProperty(exports, "PieChart", { enumerable: true, get: function () { return PieChart_1.PieChart; } });
+var PieChart_2 = require("./PieChart");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(PieChart_2).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/PieChart/index.ts"],"names":[],"mappings":";;;;;;AAAA,uCAAgF;AAAvE,oGAAA,QAAQ,OAAA;AACjB,uCAAqC;AAA5B,oHAAA,OAAO,OAAA"}

package/dist/cjs/components/Popover/Popover.css

@@ -0,0 +1,28 @@
+/* Popover Component Styles */
+
+.muka-popover__content {
+  background-color: var(--color-surface-level3);
+  border: var(--border-width-regular) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-4);
+  box-shadow: var(--shadow-level3);
+  max-width: 20rem;
+  z-index: 50;
+  animation: muka-popover-fade-in 150ms ease;
+}
+
+@keyframes muka-popover-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Arrow */
+.muka-popover__arrow {
+  fill: var(--color-surface-level3);
+}

package/dist/cjs/components/Popover/Popover.js

@@ -0,0 +1,65 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoverClose = exports.PopoverTrigger = exports.PopoverRoot = exports.PopoverContent = exports.Popover = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const PopoverPrimitive = __importStar(require("@radix-ui/react-popover"));
+require("./Popover.css");
+const Popover = ({ children, content, side = 'bottom', align = 'center', sideOffset = 8, open, defaultOpen, onOpenChange, modal = false, showArrow = true, maxWidth, className = '', }) => {
+    const contentClasses = ['muka-popover__content', className].filter(Boolean).join(' ');
+    const contentStyle = maxWidth
+        ? { maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth }
+        : undefined;
+    return ((0, jsx_runtime_1.jsxs)(PopoverPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, modal: modal, children: [(0, jsx_runtime_1.jsx)(PopoverPrimitive.Trigger, { asChild: true, children: children }), (0, jsx_runtime_1.jsx)(PopoverPrimitive.Portal, { children: (0, jsx_runtime_1.jsxs)(PopoverPrimitive.Content, { className: contentClasses, side: side, align: align, sideOffset: sideOffset, style: contentStyle, children: [content, showArrow && ((0, jsx_runtime_1.jsx)(PopoverPrimitive.Arrow, { className: "muka-popover__arrow", width: 12, height: 6 }))] }) })] }));
+};
+exports.Popover = Popover;
+exports.PopoverContent = react_1.default.forwardRef(({ children, side = 'bottom', align = 'center', sideOffset = 8, showArrow = true, maxWidth, className = '' }, ref) => {
+    const contentClasses = ['muka-popover__content', className].filter(Boolean).join(' ');
+    const contentStyle = maxWidth
+        ? { maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth }
+        : undefined;
+    return ((0, jsx_runtime_1.jsx)(PopoverPrimitive.Portal, { children: (0, jsx_runtime_1.jsxs)(PopoverPrimitive.Content, { ref: ref, className: contentClasses, side: side, align: align, sideOffset: sideOffset, style: contentStyle, children: [children, showArrow && ((0, jsx_runtime_1.jsx)(PopoverPrimitive.Arrow, { className: "muka-popover__arrow", width: 12, height: 6 }))] }) }));
+});
+exports.PopoverContent.displayName = 'PopoverContent';
+// Re-export primitives for compositional use
+exports.PopoverRoot = PopoverPrimitive.Root;
+exports.PopoverTrigger = PopoverPrimitive.Trigger;
+exports.PopoverClose = PopoverPrimitive.Close;
+exports.default = exports.Popover;
+//# sourceMappingURL=Popover.js.map

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

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

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

@@ -0,0 +1,15 @@
+"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.PopoverClose = exports.PopoverTrigger = exports.PopoverRoot = exports.PopoverContent = exports.Popover = void 0;
+var Popover_1 = require("./Popover");
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return Popover_1.Popover; } });
+Object.defineProperty(exports, "PopoverContent", { enumerable: true, get: function () { return Popover_1.PopoverContent; } });
+Object.defineProperty(exports, "PopoverRoot", { enumerable: true, get: function () { return Popover_1.PopoverRoot; } });
+Object.defineProperty(exports, "PopoverTrigger", { enumerable: true, get: function () { return Popover_1.PopoverTrigger; } });
+Object.defineProperty(exports, "PopoverClose", { enumerable: true, get: function () { return Popover_1.PopoverClose; } });
+var Popover_2 = require("./Popover");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Popover_2).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Popover/index.ts"],"names":[],"mappings":";;;;;;AAAA,qCAQmB;AAPjB,kGAAA,OAAO,OAAA;AACP,yGAAA,cAAc,OAAA;AACd,sGAAA,WAAW,OAAA;AACX,yGAAA,cAAc,OAAA;AACd,uGAAA,YAAY,OAAA;AAId,qCAAoC;AAA3B,mHAAA,OAAO,OAAA"}

package/dist/cjs/components/PriceTag/PriceTag.css

@@ -0,0 +1,94 @@
+/* PriceTag Component Styles - Using Muka Design Tokens */
+
+.muka-price-tag {
+  display: flex;
+  flex-shrink: 0;
+}
+
+/* Medium: stacked layout (price on top, unit below) */
+.muka-price-tag--md {
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+/* Small: inline layout */
+.muka-price-tag--sm {
+  flex-direction: row;
+  align-items: center;
+  gap: 3px;
+}
+
+/* Amount row: currency + numbers */
+.muka-price-tag__amount {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+}
+
+.muka-price-tag--sm .muka-price-tag__amount {
+  align-items: center;
+}
+
+/* Numbers group: whole + decimal + cents */
+.muka-price-tag__numbers {
+  display: flex;
+  align-items: baseline;
+}
+
+/* ─── Medium size typography ──────────────────────────── */
+
+.muka-price-tag--md .muka-price-tag__currency {
+  font-family: var(--text-subheading-md-fontFamily);
+  font-weight: var(--text-subheading-md-fontWeight);
+  font-size: var(--text-subheading-md-fontSize);
+  line-height: var(--text-label-2xl-bold-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+.muka-price-tag--md .muka-price-tag__whole {
+  font-family: var(--text-label-2xl-bold-fontFamily);
+  font-weight: var(--text-label-2xl-bold-fontWeight);
+  font-size: var(--text-label-2xl-bold-fontSize);
+  line-height: var(--text-label-2xl-bold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-price-tag--md .muka-price-tag__decimal,
+.muka-price-tag--md .muka-price-tag__cents {
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+  font-size: var(--text-label-md-bold-fontSize);
+  line-height: var(--text-label-md-bold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+/* ─── Small size typography ───────────────────────────── */
+
+.muka-price-tag--sm .muka-price-tag__currency {
+  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-label-md-bold-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+.muka-price-tag--sm .muka-price-tag__whole,
+.muka-price-tag--sm .muka-price-tag__decimal,
+.muka-price-tag--sm .muka-price-tag__cents {
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+  font-size: var(--text-label-md-bold-fontSize);
+  line-height: var(--text-label-md-bold-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+/* ─── Unit label (same for both sizes) ────────────────── */
+
+.muka-price-tag__unit {
+  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-subtle-default);
+}

package/dist/cjs/components/PriceTag/PriceTag.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PriceTag = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./PriceTag.css");
+const CURRENCY_SYMBOLS = {
+    EUR: '€',
+    USD: '$',
+    GBP: '£',
+    JPY: '¥',
+};
+const PriceTag = ({ currency = 'EUR', wholeUnits = '0', amount = '00', showCents = true, decimal = 'comma', unit = 'unit', showUnit = true, size = 'md', className = '', }) => {
+    const symbol = CURRENCY_SYMBOLS[currency] || currency;
+    const separator = decimal === 'comma' ? ',' : '.';
+    const priceTagClasses = [
+        'muka-price-tag',
+        `muka-price-tag--${size}`,
+        className,
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsxs)("div", { className: priceTagClasses, children: [(0, jsx_runtime_1.jsxs)("div", { className: "muka-price-tag__amount", children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-price-tag__currency", children: symbol }), (0, jsx_runtime_1.jsxs)("span", { className: "muka-price-tag__numbers", children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-price-tag__whole", children: wholeUnits }), showCents && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-price-tag__decimal", children: separator }), (0, jsx_runtime_1.jsx)("span", { className: "muka-price-tag__cents", children: amount })] }))] })] }), showUnit && ((0, jsx_runtime_1.jsxs)("span", { className: "muka-price-tag__unit", children: ["/", unit] }))] }));
+};
+exports.PriceTag = PriceTag;
+exports.default = exports.PriceTag;
+//# sourceMappingURL=PriceTag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PriceTag.js","sourceRoot":"","sources":["../../../../components/PriceTag/PriceTag.tsx"],"names":[],"mappings":";;;;AACA,0BAAwB;AAExB,MAAM,gBAAgB,GAA2B;IAC/C,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;IACR,GAAG,EAAE,GAAG;CACT,CAAC;AA+BK,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,GAAG,EAChB,MAAM,GAAG,IAAI,EACb,SAAS,GAAG,IAAI,EAChB,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,gBAAgB,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC;IACtD,MAAM,SAAS,GAAG,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;IAElD,MAAM,eAAe,GAAG;QACtB,gBAAgB;QAChB,mBAAmB,IAAI,EAAE;QACzB,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,iCAAK,SAAS,EAAE,eAAe,aAC7B,iCAAK,SAAS,EAAC,wBAAwB,aACrC,iCAAM,SAAS,EAAC,0BAA0B,YAAE,MAAM,GAAQ,EAC1D,kCAAM,SAAS,EAAC,yBAAyB,aACvC,iCAAM,SAAS,EAAC,uBAAuB,YAAE,UAAU,GAAQ,EAC1D,SAAS,IAAI,CACZ,6DACE,iCAAM,SAAS,EAAC,yBAAyB,YAAE,SAAS,GAAQ,EAC5D,iCAAM,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAQ,IACtD,CACJ,IACI,IACH,EACL,QAAQ,IAAI,CACX,kCAAM,SAAS,EAAC,sBAAsB,kBAAG,IAAI,IAAQ,CACtD,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,QAAQ,YAuCnB;AAEF,kBAAe,gBAAQ,CAAC"}

package/dist/cjs/components/PriceTag/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.PriceTag = void 0;
+var PriceTag_1 = require("./PriceTag");
+Object.defineProperty(exports, "PriceTag", { enumerable: true, get: function () { return PriceTag_1.PriceTag; } });
+var PriceTag_2 = require("./PriceTag");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(PriceTag_2).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/PriceTag/index.ts"],"names":[],"mappings":";;;;;;AAAA,uCAA0D;AAAjD,oGAAA,QAAQ,OAAA;AACjB,uCAAqC;AAA5B,oHAAA,OAAO,OAAA"}

package/dist/cjs/components/ProfileBadge/ProfileBadge.css

@@ -0,0 +1,68 @@
+/* ProfileBadge Component Styles - Using Muka Design Tokens */
+
+.muka-profile-badge {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--text-body-base-regular-fontFamily);
+}
+
+/* Size variants */
+.muka-profile-badge--lg {
+  gap: var(--spacing-4); /* 16px */
+}
+
+.muka-profile-badge--md {
+  gap: var(--spacing-3); /* 12px */
+}
+
+.muka-profile-badge__avatar {
+  flex-shrink: 0;
+}
+
+/* Text stack */
+.muka-profile-badge__text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+}
+
+.muka-profile-badge__name {
+  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);
+}
+
+.muka-profile-badge__email {
+  font-family: var(--text-body-xs-regular-fontFamily);
+  font-size: var(--text-body-xs-regular-fontSize);
+  font-weight: var(--text-body-xs-regular-fontWeight);
+  line-height: var(--text-body-xs-regular-lineHeight);
+  color: var(--color-text-subtle-default);
+}
+
+/* Clickable state */
+.muka-profile-badge--clickable {
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  text-align: left;
+  border-radius: var(--radius-md);
+  transition: opacity 0.2s ease;
+}
+
+.muka-profile-badge--clickable:hover {
+  opacity: 0.9;
+}
+
+.muka-profile-badge--clickable:active {
+  opacity: 0.8;
+}
+
+.muka-profile-badge--clickable:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}

package/dist/cjs/components/ProfileBadge/ProfileBadge.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProfileBadge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Avatar_1 = require("../Avatar/Avatar");
+require("./ProfileBadge.css");
+/**
+ * Maps a ProfileBadge size to the nearest Avatar size.
+ *
+ * Figma specs the avatar at 48px (lg) and 32px (md). The design system's
+ * avatar scale offers 40px (`xs`) and 48px (`sm`); `sm` matches `lg` exactly
+ * and `xs` is the closest on-scale size for `md`.
+ */
+const AVATAR_SIZE_MAP = {
+    lg: 'sm',
+    md: 'xs',
+};
+/**
+ * ProfileBadge Component
+ *
+ * Displays a user identity as an avatar paired with their name (and, in the
+ * large size, their email). Composes the {@link Avatar} component for the
+ * picture/initials/fallback behaviour.
+ *
+ * Sizes (per Figma):
+ * - `lg`: avatar + name + email, 16px gap
+ * - `md`: avatar + name only, 12px gap
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - The name is rendered as visible text; the avatar carries an accessible label
+ * - When `onClick` is provided the badge becomes a keyboard-focusable button
+ */
+const ProfileBadge = ({ name, email, src, alt, size = 'lg', onClick, className = '', 'aria-label': ariaLabel, }) => {
+    const showEmail = size === 'lg' && !!email;
+    const classes = [
+        'muka-profile-badge',
+        `muka-profile-badge--${size}`,
+        onClick && 'muka-profile-badge--clickable',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Avatar_1.Avatar, { className: "muka-profile-badge__avatar", name: name, src: src, alt: alt ?? name, size: AVATAR_SIZE_MAP[size] }), (0, jsx_runtime_1.jsxs)("span", { className: "muka-profile-badge__text", children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-profile-badge__name", children: name }), showEmail && (0, jsx_runtime_1.jsx)("span", { className: "muka-profile-badge__email", children: email })] })] }));
+    if (onClick) {
+        return ((0, jsx_runtime_1.jsx)("button", { type: "button", className: classes, onClick: onClick, "aria-label": ariaLabel, children: content }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes, "aria-label": ariaLabel, children: content }));
+};
+exports.ProfileBadge = ProfileBadge;
+exports.default = exports.ProfileBadge;
+//# sourceMappingURL=ProfileBadge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileBadge.js","sourceRoot":"","sources":["../../../../components/ProfileBadge/ProfileBadge.tsx"],"names":[],"mappings":";;;;AACA,6CAA0C;AAC1C,8BAA4B;AAgC5B;;;;;;GAMG;AACH,MAAM,eAAe,GAAG;IACtB,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CACA,CAAC;AAEX;;;;;;;;;;;;;;GAcG;AACI,MAAM,YAAY,GAAgC,CAAC,EACxD,IAAI,EACJ,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,GAAG,IAAI,EACX,OAAO,EACP,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,GACxB,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,IAAI,KAAK,IAAI,IAAI,CAAC,CAAC,KAAK,CAAC;IAE3C,MAAM,OAAO,GAAG;QACd,oBAAoB;QACpB,uBAAuB,IAAI,EAAE;QAC7B,OAAO,IAAI,+BAA+B;QAC1C,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,MAAM,OAAO,GAAG,CACd,6DACE,uBAAC,eAAM,IACL,SAAS,EAAC,4BAA4B,EACtC,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,IAAI,IAAI,EAChB,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC,GAC3B,EACF,kCAAM,SAAS,EAAC,0BAA0B,aACxC,iCAAM,SAAS,EAAC,0BAA0B,YAAE,IAAI,GAAQ,EACvD,SAAS,IAAI,iCAAM,SAAS,EAAC,2BAA2B,YAAE,KAAK,GAAQ,IACnE,IACN,CACJ,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,mCAAQ,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,gBAAc,SAAS,YAC9E,OAAO,GACD,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,gCAAK,SAAS,EAAE,OAAO,gBAAc,SAAS,YAC3C,OAAO,GACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAlDW,QAAA,YAAY,gBAkDvB;AAEF,kBAAe,oBAAY,CAAC"}

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

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

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

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