@revikornmann/muka-ui 0.2.1

package/dist/cjs/components/Checkbox/Checkbox.css

@@ -0,0 +1,164 @@
+/* Checkbox Component Styles - Using Muka Design Tokens */
+
+/* Wrapper - clickable label container */
+.muka-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  cursor: pointer;
+  user-select: none;
+}
+
+.muka-checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Control container */
+.muka-checkbox__control {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+/* Hidden native input */
+.muka-checkbox__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Visual indicator (square) */
+.muka-checkbox__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--checkbox-size-default);
+  height: var(--checkbox-size-default);
+  border-radius: var(--checkbox-radius);
+  background-color: var(--checkbox-color-default-background);
+  border: var(--border-width-regular) solid var(--checkbox-color-default-border);
+  transition: all 0.15s ease;
+  box-shadow: inset 0 1px 2px 0 rgba(26, 26, 26, 0.15);
+}
+
+/* Size variants */
+.muka-checkbox--sm .muka-checkbox__indicator {
+  width: var(--checkbox-size-sm);
+  height: var(--checkbox-size-sm);
+}
+
+.muka-checkbox--lg .muka-checkbox__indicator {
+  width: var(--checkbox-size-lg);
+  height: var(--checkbox-size-lg);
+}
+
+/* Icon inside checkbox */
+.muka-checkbox__icon {
+  width: var(--checkbox-icon-size-default);
+  height: var(--checkbox-icon-size-default);
+  color: var(--checkbox-color-default-icon);
+  opacity: 0;
+  transform: scale(0.8);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.muka-checkbox--sm .muka-checkbox__icon {
+  width: var(--checkbox-icon-size-sm);
+  height: var(--checkbox-icon-size-sm);
+}
+
+.muka-checkbox--lg .muka-checkbox__icon {
+  width: var(--checkbox-icon-size-lg);
+  height: var(--checkbox-icon-size-lg);
+}
+
+/* Hide indeterminate icon by default */
+.muka-checkbox__icon--indeterminate {
+  position: absolute;
+}
+
+/* Hover state - removed per design */
+
+/* Focus state */
+.muka-checkbox__input:focus-visible + .muka-checkbox__indicator {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* Checked state */
+.muka-checkbox__input:checked + .muka-checkbox__indicator {
+  background-color: var(--checkbox-color-checked-background);
+  border-color: var(--checkbox-color-checked-border);
+  box-shadow: none;
+}
+
+.muka-checkbox__input:checked + .muka-checkbox__indicator .muka-checkbox__icon--check {
+  color: var(--checkbox-color-checked-icon);
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Indeterminate state */
+.muka-checkbox__input:indeterminate + .muka-checkbox__indicator {
+  background-color: var(--checkbox-color-checked-background);
+  border-color: var(--checkbox-color-checked-border);
+  box-shadow: none;
+}
+
+.muka-checkbox__input:indeterminate + .muka-checkbox__indicator .muka-checkbox__icon--check {
+  opacity: 0;
+}
+
+.muka-checkbox__input:indeterminate + .muka-checkbox__indicator .muka-checkbox__icon--indeterminate {
+  color: var(--checkbox-color-checked-icon);
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Disabled state */
+.muka-checkbox--disabled .muka-checkbox__indicator {
+  background-color: var(--checkbox-color-disabled-background);
+  border-color: var(--checkbox-color-disabled-border);
+  box-shadow: none;
+}
+
+.muka-checkbox__input:disabled:checked + .muka-checkbox__indicator .muka-checkbox__icon--check,
+.muka-checkbox__input:disabled:indeterminate + .muka-checkbox__indicator .muka-checkbox__icon--indeterminate {
+  color: var(--checkbox-color-disabled-icon);
+}
+
+/* Label text */
+.muka-checkbox__label {
+  font-family: var(--text-label-lg-regular-fontFamily);
+  font-weight: var(--text-label-lg-regular-fontWeight);
+  font-size: var(--text-label-lg-regular-fontSize);
+  line-height: var(--text-label-lg-regular-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-checkbox--sm .muka-checkbox__label {
+  font-family: var(--text-label-md-regular-fontFamily);
+  font-weight: var(--text-label-md-regular-fontWeight);
+  font-size: var(--text-label-md-regular-fontSize);
+  line-height: var(--text-label-md-regular-lineHeight);
+}
+
+.muka-checkbox--lg .muka-checkbox__label {
+  font-family: var(--text-label-xl-regular-fontFamily);
+  font-weight: var(--text-label-xl-regular-fontWeight);
+  font-size: var(--text-label-xl-regular-fontSize);
+  line-height: var(--text-label-xl-regular-lineHeight);
+}
+
+.muka-checkbox--disabled .muka-checkbox__label {
+  color: var(--color-text-subtle-default);
+}

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("./Checkbox.css");
+/**
+ * Checkbox Component
+ *
+ * A square selection control for multi-choice options.
+ * Built using the Muka design token system with support for:
+ * - 3 sizes: sm, md, lg
+ * - Interactive states: default, hover, checked, indeterminate, disabled
+ * - Label text with proper accessibility
+ * - Multi-brand theming through design tokens
+ *
+ * Tokens used:
+ * - checkbox.size.{size}
+ * - checkbox.radius
+ * - checkbox.icon.size.{size}
+ * - checkbox.color.{state}.{background|border|icon}
+ */
+const Checkbox = ({ checked, defaultChecked, indeterminate = false, onChange, label, disabled = false, name, value, size = 'md', className = '', id, ...props }) => {
+    const generatedId = (0, react_1.useId)();
+    const inputId = id || generatedId;
+    const inputRef = (0, react_1.useRef)(null);
+    // Handle indeterminate state (can only be set via JavaScript)
+    (0, react_1.useEffect)(() => {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    const wrapperClasses = [
+        'muka-checkbox',
+        `muka-checkbox--${size}`,
+        disabled && 'muka-checkbox--disabled',
+        className
+    ].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsxs)("label", { className: wrapperClasses, htmlFor: inputId, children: [(0, jsx_runtime_1.jsxs)("span", { className: "muka-checkbox__control", children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "checkbox", id: inputId, className: "muka-checkbox__input", checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled, name: name, value: value, ...props }), (0, jsx_runtime_1.jsxs)("span", { className: "muka-checkbox__indicator", children: [(0, jsx_runtime_1.jsx)("svg", { className: "muka-checkbox__icon muka-checkbox__icon--check", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M11.6666 3.5L5.24992 9.91667L2.33325 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), (0, jsx_runtime_1.jsx)("svg", { className: "muka-checkbox__icon muka-checkbox__icon--indeterminate", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M2.91675 7H11.0834", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })] })] }), label && (0, jsx_runtime_1.jsx)("span", { className: "muka-checkbox__label", children: label })] }));
+};
+exports.Checkbox = Checkbox;
+exports.default = exports.Checkbox;
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;AAAA,iCAAwD;AACxD,0BAAwB;AAqCxB;;;;;;;;;;;;;;;GAeG;AACI,MAAM,QAAQ,GAA4B,CAAC,EAChD,OAAO,EACP,cAAc,EACd,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,KAAK,EACL,IAAI,GAAG,IAAI,EACX,SAAS,GAAG,EAAE,EACd,EAAE,EACF,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,IAAA,aAAK,GAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,EAAE,IAAI,WAAW,CAAC;IAClC,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAEhD,8DAA8D;IAC9D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;QACjD,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,cAAc,GAAG;QACrB,eAAe;QACf,kBAAkB,IAAI,EAAE;QACxB,QAAQ,IAAI,yBAAyB;QACrC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,mCAAO,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,aAChD,kCAAM,SAAS,EAAC,wBAAwB,aACtC,kCACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,OAAO,EACX,SAAS,EAAC,sBAAsB,EAChC,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,KACR,KAAK,GACT,EACF,kCAAM,SAAS,EAAC,0BAA0B,aAExC,gCACE,SAAS,EAAC,gDAAgD,EAC1D,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,YAElC,iCACE,CAAC,EAAC,wCAAwC,EAC1C,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,EAEN,gCACE,SAAS,EAAC,wDAAwD,EAClE,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,YAElC,iCACE,CAAC,EAAC,oBAAoB,EACtB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,IACD,IACF,EACN,KAAK,IAAI,iCAAM,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAQ,IACzD,CACT,CAAC;AACJ,CAAC,CAAC;AApFW,QAAA,QAAQ,YAoFnB;AAEF,kBAAe,gBAAQ,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Checkbox/index.ts"],"names":[],"mappings":";;;AAAA,uCAA0D;AAAjD,oGAAA,QAAQ,OAAA;AACjB,uCAAiD;AAAxC,mGAAA,QAAQ,OAAW"}

package/dist/cjs/components/CheckboxTile/CheckboxTile.css

@@ -0,0 +1,155 @@
+/* CheckboxTile Component Styles - Using Muka Design Tokens */
+
+/* Base tile styles - horizontal */
+.muka-checkbox-tile {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4);
+  border: var(--border-width-regular) solid var(--input-field-color-default-border);
+  border-radius: var(--input-field-radius-lg);
+  background-color: var(--color-surface-level3);
+  cursor: pointer;
+  transition: border-color 0.15s ease, border-width 0.15s ease;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.muka-checkbox-tile--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Selected state */
+.muka-checkbox-tile[data-checked] {
+  border-width: var(--border-width-bold);
+  border-color: var(--color-action-default);
+}
+
+/* Vertical layout */
+.muka-checkbox-tile--vertical {
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2);
+  position: relative;
+  width: 160px;
+}
+
+/* Checkbox container */
+.muka-checkbox-tile__checkbox {
+  flex-shrink: 0;
+}
+
+/* Corner-positioned checkbox for vertical */
+.muka-checkbox-tile__checkbox--corner {
+  position: absolute;
+  top: var(--spacing-4);
+  left: var(--spacing-4);
+}
+
+/* Adjust corner position when selected (border is thicker) */
+.muka-checkbox-tile[data-checked] .muka-checkbox-tile__checkbox--corner {
+  top: calc(var(--spacing-4) - 1px);
+  left: calc(var(--spacing-4) - 1px);
+}
+
+/* Icon */
+.muka-checkbox-tile__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--icon-size-default);
+  height: var(--icon-size-default);
+  color: var(--color-text-default-default);
+}
+
+.muka-checkbox-tile__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Image */
+.muka-checkbox-tile__image {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: var(--border-radius-sm);
+}
+
+.muka-checkbox-tile__image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Horizontal image sizing */
+.muka-checkbox-tile__image--horizontal {
+  width: 40px;
+  height: 40px;
+}
+
+/* Vertical image sizing */
+.muka-checkbox-tile--vertical .muka-checkbox-tile__image {
+  width: 100%;
+  aspect-ratio: 4/3;
+}
+
+/* Content container */
+.muka-checkbox-tile__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: var(--spacing-2);
+}
+
+.muka-checkbox-tile__content-inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+/* Chip slot (replaces badge; use Chip component) */
+.muka-checkbox-tile__chip {
+  flex-shrink: 0;
+}
+
+.muka-checkbox-tile__chip--vertical {
+  margin-top: var(--spacing-1);
+}
+
+/* Label */
+.muka-checkbox-tile__label {
+  font-family: var(--text-body-lg-regular-fontFamily);
+  font-weight: var(--text-body-lg-regular-fontWeight);
+  font-size: var(--text-body-lg-regular-fontSize);
+  line-height: var(--text-body-lg-regular-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+.muka-checkbox-tile__label--bold {
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+.muka-checkbox-tile__label--center {
+  text-align: center;
+}
+
+/* Caption */
+.muka-checkbox-tile__caption {
+  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-subtle-default);
+}
+
+/* Disabled states */
+.muka-checkbox-tile--disabled .muka-checkbox-tile__label,
+.muka-checkbox-tile--disabled .muka-checkbox-tile__icon {
+  color: var(--color-text-subtle-default);
+}

package/dist/cjs/components/CheckboxTile/CheckboxTile.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxTile = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Checkbox_1 = require("../Checkbox/Checkbox");
+require("./CheckboxTile.css");
+/**
+ * CheckboxTile Component
+ *
+ * A tile-style checkbox with support for icons, images, and vertical layouts.
+ * Built using the Muka design token system.
+ *
+ * Variants:
+ * - Default: Checkbox with label
+ * - With icon: Checkbox with icon and label/caption
+ * - With image: Checkbox with image and label/caption
+ * - Vertical: Icon or image at top, label below, checkbox in corner
+ */
+const CheckboxTile = ({ checked, defaultChecked, onChange, label, caption, icon, image, imageAlt = '', orientation = 'horizontal', disabled = false, name, value, chip, className = '', id, ...props }) => {
+    const generatedId = (0, react_1.useId)();
+    const inputId = id || generatedId;
+    const isVertical = orientation === 'vertical';
+    const wrapperClasses = [
+        'muka-checkbox-tile',
+        isVertical && 'muka-checkbox-tile--vertical',
+        disabled && 'muka-checkbox-tile--disabled',
+        className
+    ].filter(Boolean).join(' ');
+    // For vertical layout, we use data attribute to control checked styling via CSS
+    const tileProps = {
+        className: wrapperClasses,
+        'data-checked': checked || undefined,
+    };
+    if (isVertical) {
+        return ((0, jsx_runtime_1.jsxs)("label", { ...tileProps, htmlFor: inputId, children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-checkbox-tile__checkbox muka-checkbox-tile__checkbox--corner", children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { id: inputId, checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled, name: name, value: value, ...props }) }), icon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-checkbox-tile__icon", "aria-hidden": "true", children: icon })), image && ((0, jsx_runtime_1.jsx)("div", { className: "muka-checkbox-tile__image", children: (0, jsx_runtime_1.jsx)("img", { src: image, alt: imageAlt }) })), label && ((0, jsx_runtime_1.jsx)("span", { className: "muka-checkbox-tile__label muka-checkbox-tile__label--center", children: label })), chip && (0, jsx_runtime_1.jsx)("div", { className: "muka-checkbox-tile__chip muka-checkbox-tile__chip--vertical", children: chip })] }));
+    }
+    // Horizontal layout
+    return ((0, jsx_runtime_1.jsxs)("label", { ...tileProps, htmlFor: inputId, children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-checkbox-tile__checkbox", children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { id: inputId, checked: checked, defaultChecked: defaultChecked, onChange: onChange, disabled: disabled, name: name, value: value, ...props }) }), icon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-checkbox-tile__icon", "aria-hidden": "true", children: icon })), image && ((0, jsx_runtime_1.jsx)("div", { className: "muka-checkbox-tile__image muka-checkbox-tile__image--horizontal", children: (0, jsx_runtime_1.jsx)("img", { src: image, alt: imageAlt }) })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-checkbox-tile__content", children: [(0, jsx_runtime_1.jsxs)("div", { className: "muka-checkbox-tile__content-inner", children: [label && ((0, jsx_runtime_1.jsx)("span", { className: `muka-checkbox-tile__label ${caption ? 'muka-checkbox-tile__label--bold' : ''}`, children: label })), caption && ((0, jsx_runtime_1.jsx)("span", { className: "muka-checkbox-tile__caption", children: caption }))] }), chip && (0, jsx_runtime_1.jsx)("div", { className: "muka-checkbox-tile__chip", children: chip })] })] }));
+};
+exports.CheckboxTile = CheckboxTile;
+exports.default = exports.CheckboxTile;
+//# sourceMappingURL=CheckboxTile.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/CheckboxTile/index.ts"],"names":[],"mappings":";;;AAAA,+CAAsE;AAA7D,4GAAA,YAAY,OAAA;AACrB,+CAAyD;AAAhD,uGAAA,YAAY,OAAW"}

package/dist/cjs/components/Chip/Chip.css

@@ -0,0 +1,156 @@
+/* Chip Component Styles - Using Muka Design Tokens (Figma: Chip) */
+
+.muka-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  border-radius: var(--border-radius-full);
+  white-space: nowrap;
+  user-select: none;
+  border: var(--border-width-regular) solid transparent;
+  box-sizing: border-box;
+}
+
+/* Sizes */
+.muka-chip--sm {
+  height: var(--chip-size-height-sm);
+  padding: 0 var(--spacing-2);
+  font-family: var(--text-label-sm-semibold-fontFamily);
+  font-weight: var(--text-label-sm-semibold-fontWeight);
+  font-size: var(--text-label-sm-semibold-fontSize);
+  line-height: var(--text-label-sm-semibold-lineHeight);
+}
+
+.muka-chip--md {
+  height: var(--chip-size-height-md);
+  padding: 0 var(--spacing-3);
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+  font-size: var(--text-label-md-semibold-fontSize);
+  line-height: var(--text-label-md-semibold-lineHeight);
+}
+
+.muka-chip--lg {
+  height: var(--chip-size-height-lg);
+  padding: 0 var(--spacing-4);
+  font-family: var(--text-label-lg-semibold-fontFamily);
+  font-weight: var(--text-label-lg-semibold-fontWeight);
+  font-size: var(--text-label-lg-semibold-fontSize);
+  line-height: var(--text-label-lg-semibold-lineHeight);
+}
+
+/* Icon slot */
+.muka-chip__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+}
+
+.muka-chip__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.muka-chip__label {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Remove button */
+.muka-chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.25em;
+  height: 1.25em;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: var(--border-radius-full);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.85;
+}
+
+.muka-chip__remove:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.muka-chip__remove:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.muka-chip__remove svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Solid appearance – variants */
+.muka-chip--solid.muka-chip--default {
+  background-color: var(--color-surface-level1);
+  color: var(--color-text-default-default);
+}
+
+.muka-chip--solid.muka-chip--success {
+  background-color: var(--color-state-success-background);
+  color: var(--color-state-success-contrast);
+}
+
+.muka-chip--solid.muka-chip--warning {
+  background-color: var(--color-state-warning-background);
+  color: var(--color-state-warning-contrast);
+}
+
+.muka-chip--solid.muka-chip--error {
+  background-color: var(--color-state-error-background);
+  color: var(--color-state-error-contrast);
+}
+
+.muka-chip--solid.muka-chip--info {
+  background-color: var(--color-state-info-background);
+  color: var(--color-state-info-contrast);
+}
+
+/* Outline appearance – light background, bordered */
+.muka-chip--outline.muka-chip--default {
+  background-color: var(--color-surface-level0);
+  color: var(--color-text-default-default);
+  border-color: var(--color-surface-level1);
+}
+
+.muka-chip--outline.muka-chip--success {
+  background-color: var(--color-state-success-background);
+  color: var(--color-state-success-contrast);
+  border-color: var(--color-state-success-contrast);
+  opacity: 0.95;
+}
+
+.muka-chip--outline.muka-chip--warning {
+  background-color: var(--color-state-warning-background);
+  color: var(--color-state-warning-contrast);
+  border-color: var(--color-state-warning-contrast);
+  opacity: 0.95;
+}
+
+.muka-chip--outline.muka-chip--error {
+  background-color: var(--color-state-error-background);
+  color: var(--color-state-error-contrast);
+  border-color: var(--color-state-error-contrast);
+  opacity: 0.95;
+}
+
+.muka-chip--outline.muka-chip--info {
+  background-color: var(--color-state-info-background);
+  color: var(--color-state-info-contrast);
+  border-color: var(--color-state-info-contrast);
+  opacity: 0.95;
+}

package/dist/cjs/components/Chip/Chip.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./Chip.css");
+const Icon_1 = require("../Icon");
+/**
+ * Chip Component
+ *
+ * Compact pill-shaped control for labels, tags, and removable selections.
+ * Matches Muka Figma Chip: optional icon, label, optional dismiss.
+ *
+ * Variants: default (gray), success, error, info, warning
+ * Appearance: solid (filled) or outline (light background)
+ */
+const Chip = ({ children, variant = 'default', appearance = 'solid', size = 'sm', icon, onRemove, className = '', 'aria-label': ariaLabel, removeButtonLabel = 'Remove', ...props }) => {
+    const chipClasses = [
+        'muka-chip',
+        `muka-chip--${variant}`,
+        `muka-chip--${appearance}`,
+        `muka-chip--${size}`,
+        onRemove && 'muka-chip--dismissible',
+        className,
+    ].filter(Boolean).join(' ');
+    const handleRemoveClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onRemove?.(e);
+    };
+    return ((0, jsx_runtime_1.jsxs)("span", { className: chipClasses, role: onRemove ? undefined : 'status', "aria-label": ariaLabel, ...props, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "muka-chip__icon", "aria-hidden": "true", children: icon }), (0, jsx_runtime_1.jsx)("span", { className: "muka-chip__label", children: children }), onRemove && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-chip__remove", onClick: handleRemoveClick, "aria-label": removeButtonLabel, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", variant: "line", size: "sm" }) }))] }));
+};
+exports.Chip = Chip;
+exports.default = exports.Chip;
+//# sourceMappingURL=Chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../../components/Chip/Chip.tsx"],"names":[],"mappings":";;;;AACA,sBAAoB;AACpB,kCAA+B;AA+B/B;;;;;;;;GAQG;AACI,MAAM,IAAI,GAAwB,CAAC,EACxC,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,UAAU,GAAG,OAAO,EACpB,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,YAAY,EAAE,SAAS,EACvB,iBAAiB,GAAG,QAAQ,EAC5B,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,WAAW,GAAG;QAClB,WAAW;QACX,cAAc,OAAO,EAAE;QACvB,cAAc,UAAU,EAAE;QAC1B,cAAc,IAAI,EAAE;QACpB,QAAQ,IAAI,wBAAwB;QACpC,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,iBAAiB,GAAG,CAAC,CAAmB,EAAE,EAAE;QAChD,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACL,kCACE,SAAS,EAAE,WAAW,EACtB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,gBACzB,SAAS,KACjB,KAAK,aAER,IAAI,IAAI,iCAAM,SAAS,EAAC,iBAAiB,iBAAa,MAAM,YAAE,IAAI,GAAQ,EAC3E,iCAAM,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAQ,EACnD,QAAQ,IAAI,CACX,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mBAAmB,EAC7B,OAAO,EAAE,iBAAiB,gBACd,iBAAiB,YAE7B,uBAAC,WAAI,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,GACvC,CACV,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AAhDW,QAAA,IAAI,QAgDf;AAEF,kBAAe,YAAI,CAAC"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Chip/index.ts"],"names":[],"mappings":";;;;;;AAAA,+BAA8C;AAArC,4FAAA,IAAI,OAAA;AACb,+BAAiC;AAAxB,gHAAA,OAAO,OAAA"}