@revikornmann/muka-ui 0.2.1

package/dist/cjs/components/Drawer/Drawer.css

@@ -0,0 +1,153 @@
+/* Drawer Component Styles */
+
+/* Size tokens (local to Drawer) */
+.muka-drawer {
+  --drawer-width-sm: 18rem;
+  --drawer-width-md: 26rem;
+  --drawer-width-lg: 36rem;
+}
+
+/* Reset native dialog */
+.muka-drawer {
+  border: none;
+  padding: 0;
+  max-width: none;
+  max-height: none;
+  background: transparent;
+  overflow: visible;
+}
+
+/* Backdrop */
+.muka-drawer::backdrop {
+  background-color: var(--color-surface-backdrop);
+  opacity: 0;
+  transition: opacity 200ms ease;
+}
+
+.muka-drawer--slide-in::backdrop {
+  opacity: 1;
+}
+
+/* Surface */
+.muka-drawer__surface {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-surface-level3);
+  box-shadow: var(--shadow-level5);
+  height: 100%;
+  overflow: hidden;
+  position: fixed;
+  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Side positioning + initial transforms */
+.muka-drawer--right .muka-drawer__surface {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
+  transform: translateX(100%);
+}
+
+.muka-drawer--left .muka-drawer__surface {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+  transform: translateX(-100%);
+}
+
+.muka-drawer--bottom .muka-drawer__surface {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  transform: translateY(100%);
+}
+
+.muka-drawer--top .muka-drawer__surface {
+  left: 0;
+  right: 0;
+  top: 0;
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  transform: translateY(-100%);
+}
+
+/* Slide-in state */
+.muka-drawer--slide-in .muka-drawer__surface {
+  transform: translate(0, 0);
+}
+
+/* Width sizes (left/right) */
+.muka-drawer--right .muka-drawer__surface,
+.muka-drawer--left .muka-drawer__surface {
+  width: var(--drawer-width-md);
+}
+
+.muka-drawer--sm.muka-drawer--right .muka-drawer__surface,
+.muka-drawer--sm.muka-drawer--left .muka-drawer__surface {
+  width: var(--drawer-width-sm);
+}
+
+.muka-drawer--lg.muka-drawer--right .muka-drawer__surface,
+.muka-drawer--lg.muka-drawer--left .muka-drawer__surface {
+  width: var(--drawer-width-lg);
+}
+
+.muka-drawer--full.muka-drawer--right .muka-drawer__surface,
+.muka-drawer--full.muka-drawer--left .muka-drawer__surface {
+  width: 100%;
+}
+
+/* Height sizes (top/bottom) */
+.muka-drawer--top .muka-drawer__surface,
+.muka-drawer--bottom .muka-drawer__surface {
+  height: auto;
+  max-height: 80vh;
+}
+
+.muka-drawer--full.muka-drawer--top .muka-drawer__surface,
+.muka-drawer--full.muka-drawer--bottom .muka-drawer__surface {
+  max-height: 100vh;
+}
+
+/* Header */
+.muka-drawer__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4);
+  border-bottom: var(--border-width-regular) solid var(--color-border-default);
+  flex-shrink: 0;
+}
+
+.muka-drawer__title {
+  flex: 1;
+  margin: 0;
+  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);
+  color: var(--color-text-default-default);
+}
+
+.muka-drawer__leading,
+.muka-drawer__trailing {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Body */
+.muka-drawer__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-4);
+}
+
+/* Footer */
+.muka-drawer__footer {
+  padding: var(--spacing-4);
+  border-top: var(--border-width-regular) solid var(--color-border-default);
+  flex-shrink: 0;
+}

package/dist/cjs/components/Drawer/Drawer.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("./Drawer.css");
+const ANIMATION_DURATION = 200;
+const Drawer = ({ open, onClose, children, side = 'right', size = 'md', title, leading, trailing, footer, closeOnBackdropClick = true, lockScroll = true, className = '', }) => {
+    const dialogRef = (0, react_1.useRef)(null);
+    const [isSlideIn, setIsSlideIn] = (0, react_1.useState)(false);
+    // Open the native <dialog> and force reflow before slide-in
+    (0, react_1.useLayoutEffect)(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (open && !dialog.open) {
+            dialog.showModal();
+            void dialog.offsetHeight;
+        }
+    }, [open]);
+    // Trigger slide-in or slide-out + delayed close
+    (0, react_1.useEffect)(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (open) {
+            setIsSlideIn(true);
+            if (lockScroll) {
+                document.body.style.overflow = 'hidden';
+            }
+        }
+        else if (dialog.open) {
+            setIsSlideIn(false);
+            if (lockScroll) {
+                document.body.style.overflow = '';
+            }
+            const timer = setTimeout(() => {
+                dialog.close();
+            }, ANIMATION_DURATION);
+            return () => clearTimeout(timer);
+        }
+    }, [open, lockScroll]);
+    // Restore scroll on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, []);
+    // Handle escape key
+    (0, react_1.useEffect)(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        const handleCancel = (e) => {
+            e.preventDefault();
+            onClose?.();
+        };
+        dialog.addEventListener('cancel', handleCancel);
+        return () => dialog.removeEventListener('cancel', handleCancel);
+    }, [onClose]);
+    // Handle backdrop click
+    const handleBackdropClick = (0, react_1.useCallback)((e) => {
+        if (e.target !== dialogRef.current)
+            return;
+        if (closeOnBackdropClick) {
+            onClose?.();
+        }
+    }, [closeOnBackdropClick, onClose]);
+    const dialogClasses = [
+        'muka-drawer',
+        `muka-drawer--${side}`,
+        `muka-drawer--${size}`,
+        isSlideIn && 'muka-drawer--slide-in',
+        className,
+    ].filter(Boolean).join(' ');
+    const hasHeader = title || leading || trailing;
+    return (
+    // Native <dialog> is interactive and handles Escape natively; click handler closes on backdrop click.
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    (0, jsx_runtime_1.jsx)("dialog", { ref: dialogRef, className: dialogClasses, onClick: handleBackdropClick, children: (0, jsx_runtime_1.jsxs)("div", { className: "muka-drawer__surface", children: [hasHeader && ((0, jsx_runtime_1.jsxs)("header", { className: "muka-drawer__header", children: [leading && (0, jsx_runtime_1.jsx)("div", { className: "muka-drawer__leading", children: leading }), title && (0, jsx_runtime_1.jsx)("h2", { className: "muka-drawer__title", children: title }), trailing && (0, jsx_runtime_1.jsx)("div", { className: "muka-drawer__trailing", children: trailing })] })), (0, jsx_runtime_1.jsx)("div", { className: "muka-drawer__body", children: children }), footer && ((0, jsx_runtime_1.jsx)("footer", { className: "muka-drawer__footer", children: footer }))] }) }));
+};
+exports.Drawer = Drawer;
+exports.default = exports.Drawer;
+//# sourceMappingURL=Drawer.js.map

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Drawer/index.ts"],"names":[],"mappings":";;;;;;AAAA,mCAAoD;AAA3C,gGAAA,MAAM,OAAA;AACf,mCAAmC;AAA1B,kHAAA,OAAO,OAAA"}

package/dist/cjs/components/EmptyState/EmptyState.css

@@ -0,0 +1,138 @@
+/* EmptyState Component Styles - Using Muka Design Tokens */
+
+.muka-emptystate {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--emptystate-container-gap);
+  max-width: var(--emptystate-container-maxWidth);
+  margin: 0 auto;
+  text-align: center;
+}
+
+/* Alignment variants */
+.muka-emptystate--left {
+  align-items: flex-start;
+  text-align: left;
+}
+
+/* Size variants */
+.muka-emptystate--sm {
+  padding: var(--emptystate-container-padding-sm);
+}
+
+.muka-emptystate--md {
+  padding: var(--emptystate-container-padding-md);
+}
+
+.muka-emptystate--lg {
+  padding: var(--emptystate-container-padding-lg);
+}
+
+/* Visual (icon or illustration) */
+.muka-emptystate__visual {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--emptystate-icon-color);
+  flex-shrink: 0;
+}
+
+.muka-emptystate--sm .muka-emptystate__visual {
+  width: var(--emptystate-icon-size-sm);
+  height: var(--emptystate-icon-size-sm);
+}
+
+.muka-emptystate--md .muka-emptystate__visual {
+  width: var(--emptystate-icon-size-md);
+  height: var(--emptystate-icon-size-md);
+}
+
+.muka-emptystate--lg .muka-emptystate__visual {
+  width: var(--emptystate-icon-size-lg);
+  height: var(--emptystate-icon-size-lg);
+}
+
+.muka-emptystate__visual svg {
+  width: 100%;
+  height: 100%;
+}
+
+.muka-emptystate__visual img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+/* Content */
+.muka-emptystate__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.muka-emptystate--left .muka-emptystate__content {
+  align-items: flex-start;
+}
+
+/* Title */
+.muka-emptystate__title {
+  color: var(--emptystate-title-color);
+  margin: 0;
+  font-family: var(--text-heading-h4-fontFamily);
+  font-weight: var(--text-heading-h4-fontWeight);
+  font-size: var(--text-heading-h4-fontSize);
+  line-height: var(--text-heading-h4-lineHeight);
+}
+
+.muka-emptystate--sm .muka-emptystate__title {
+  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-emptystate--lg .muka-emptystate__title {
+  font-family: var(--text-heading-h3-fontFamily);
+  font-weight: var(--text-heading-h3-fontWeight);
+  font-size: var(--text-heading-h3-fontSize);
+  line-height: var(--text-heading-h3-lineHeight);
+}
+
+/* Description */
+.muka-emptystate__description {
+  color: var(--emptystate-description-color);
+  margin: 0;
+  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);
+}
+
+.muka-emptystate--md .muka-emptystate__description {
+  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);
+}
+
+.muka-emptystate--lg .muka-emptystate__description {
+  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);
+}
+
+/* Actions */
+.muka-emptystate__actions {
+  display: flex;
+  gap: var(--emptystate-actions-gap);
+  margin-top: var(--emptystate-actions-marginTop);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.muka-emptystate--left .muka-emptystate__actions {
+  justify-content: flex-start;
+}

package/dist/cjs/components/EmptyState/EmptyState.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("./EmptyState.css");
+const Button_1 = require("../Button");
+/**
+ * EmptyState Component
+ *
+ * Displays a zero-state UI when no data is available.
+ * Used for empty tables, search results, dashboards, and initial states.
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - Uses role="status" for dynamic empty states
+ * - Illustrations marked as decorative (aria-hidden)
+ * - Action buttons fully accessible
+ * - Proper heading hierarchy with title
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+ */
+const EmptyState = ({ title, description, icon, illustration, primaryAction, secondaryAction, size = 'md', align = 'center', className = '', ...props }) => {
+    const emptyStateClasses = [
+        'muka-emptystate',
+        `muka-emptystate--${size}`,
+        `muka-emptystate--${align}`,
+        className,
+    ].filter(Boolean).join(' ');
+    const hasActions = primaryAction || secondaryAction;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: emptyStateClasses, role: "status", ...props, children: [(icon || illustration) && ((0, jsx_runtime_1.jsx)("div", { className: "muka-emptystate__visual", "aria-hidden": "true", children: illustration || icon })), (0, jsx_runtime_1.jsxs)("div", { className: "muka-emptystate__content", children: [(0, jsx_runtime_1.jsx)("h3", { className: "muka-emptystate__title", children: title }), description && ((0, jsx_runtime_1.jsx)("p", { className: "muka-emptystate__description", children: description }))] }), hasActions && ((0, jsx_runtime_1.jsxs)("div", { className: "muka-emptystate__actions", children: [primaryAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: size, onClick: primaryAction.onClick, iconLeft: primaryAction.icon, children: primaryAction.label })), secondaryAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", size: size, onClick: secondaryAction.onClick, children: secondaryAction.label }))] }))] }));
+};
+exports.EmptyState = EmptyState;
+exports.default = exports.EmptyState;
+//# sourceMappingURL=EmptyState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../../components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";;;;AACA,4BAA0B;AAC1B,sCAAmC;AAqBnC;;;;;;;;;;;;;GAaG;AACI,MAAM,UAAU,GAA8B,CAAC,EACpD,KAAK,EACL,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,eAAe,EACf,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,QAAQ,EAChB,SAAS,GAAG,EAAE,EACd,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,iBAAiB,GAAG;QACxB,iBAAiB;QACjB,oBAAoB,IAAI,EAAE;QAC1B,oBAAoB,KAAK,EAAE;QAC3B,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,UAAU,GAAG,aAAa,IAAI,eAAe,CAAC;IAEpD,OAAO,CACL,iCACE,SAAS,EAAE,iBAAiB,EAC5B,IAAI,EAAC,QAAQ,KACT,KAAK,aAER,CAAC,IAAI,IAAI,YAAY,CAAC,IAAI,CACzB,gCAAK,SAAS,EAAC,yBAAyB,iBAAa,MAAM,YACxD,YAAY,IAAI,IAAI,GACjB,CACP,EAED,iCAAK,SAAS,EAAC,0BAA0B,aACvC,+BAAI,SAAS,EAAC,wBAAwB,YAAE,KAAK,GAAM,EAClD,WAAW,IAAI,CACd,8BAAG,SAAS,EAAC,8BAA8B,YAAE,WAAW,GAAK,CAC9D,IACG,EAEL,UAAU,IAAI,CACb,iCAAK,SAAS,EAAC,0BAA0B,aACtC,aAAa,IAAI,CAChB,uBAAC,eAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,aAAa,CAAC,OAAO,EAC9B,QAAQ,EAAE,aAAa,CAAC,IAAI,YAE3B,aAAa,CAAC,KAAK,GACb,CACV,EACA,eAAe,IAAI,CAClB,uBAAC,eAAM,IACL,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,eAAe,CAAC,OAAO,YAE/B,eAAe,CAAC,KAAK,GACf,CACV,IACG,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAjEW,QAAA,UAAU,cAiErB;AAEF,kBAAe,kBAAU,CAAC"}

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

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

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

package/dist/cjs/components/FAB/FAB.css

@@ -0,0 +1,138 @@
+/* FAB (Floating Action Button) Component Styles */
+
+.muka-fab {
+  position: fixed;
+  z-index: 40;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  box-shadow: var(--shadow-level4);
+
+  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-fab:active {
+  transform: scale(0.96);
+  box-shadow: var(--shadow-level3);
+}
+
+.muka-fab:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
+}
+
+.muka-fab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* ─── Variants ────────────────────────────────────────── */
+
+.muka-fab--primary {
+  background-color: var(--color-action-default);
+  color: var(--color-text-inverse-default);
+}
+
+.muka-fab--primary:hover:not(:disabled) {
+  background-color: var(--color-action-hover);
+}
+
+.muka-fab--secondary {
+  background-color: var(--color-surface-level3);
+  color: var(--color-text-default-default);
+}
+
+.muka-fab--secondary:hover:not(:disabled) {
+  background-color: var(--color-surface-level2);
+}
+
+/* ─── Sizes (circular by default) ─────────────────────── */
+
+.muka-fab--md {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+}
+
+.muka-fab--lg {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+}
+
+/* ─── Extended (pill shape with label) ────────────────── */
+
+.muka-fab--extended {
+  width: auto;
+  height: auto;
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: var(--radius-full);
+}
+
+.muka-fab--extended.muka-fab--lg {
+  padding: var(--spacing-4) var(--spacing-5);
+}
+
+.muka-fab__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.muka-fab__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.muka-fab__label {
+  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);
+}
+
+/* ─── Positioning ─────────────────────────────────────── */
+
+.muka-fab--bottom-right {
+  right: var(--spacing-4);
+  bottom: var(--spacing-4);
+}
+
+.muka-fab--bottom-left {
+  left: var(--spacing-4);
+  bottom: var(--spacing-4);
+}
+
+.muka-fab--bottom-center {
+  left: 50%;
+  bottom: var(--spacing-4);
+  transform: translateX(-50%);
+}
+
+.muka-fab--bottom-center:active {
+  transform: translateX(-50%) scale(0.96);
+}
+
+/* Add the iOS home-indicator inset to the bottom offset. */
+.muka-fab:not(.muka-fab--no-safe-area) {
+  bottom: calc(var(--spacing-4) + env(safe-area-inset-bottom));
+}
+
+/* Lateral safe-area for landscape iPhone with notch. */
+.muka-fab--bottom-right:not(.muka-fab--no-safe-area) {
+  right: max(var(--spacing-4), env(safe-area-inset-right));
+}
+
+.muka-fab--bottom-left:not(.muka-fab--no-safe-area) {
+  left: max(var(--spacing-4), env(safe-area-inset-left));
+}

package/dist/cjs/components/FAB/FAB.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FAB = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const accessibility_1 = require("../../utils/accessibility");
+require("./FAB.css");
+/**
+ * FAB — Floating Action Button.
+ *
+ * A circular (or pill-shaped when extended) button positioned over content,
+ * typically used for the primary action on a screen: "Add motorcycle",
+ * "Compose message", etc.
+ *
+ * - `position` controls which screen corner anchors the FAB.
+ * - Provide `label` to render as an **extended FAB** (pill shape with text).
+ * - Safe-area aware by default — won't sit under the iOS home indicator.
+ *
+ * @accessibility
+ * - Requires `aria-label` when used without a visible `label`
+ */
+const FAB = ({ icon, label, onClick, position = 'bottom-right', variant = 'primary', size = 'md', disableSafeArea = false, 'aria-label': ariaLabel, disabled = false, className = '', }) => {
+    const isExtended = Boolean(label);
+    (0, accessibility_1.warnMissingA11yProp)('FAB', !isExtended && !ariaLabel, 'Icon-only FAB requires an aria-label.');
+    const classes = [
+        'muka-fab',
+        `muka-fab--${variant}`,
+        `muka-fab--${size}`,
+        `muka-fab--${position}`,
+        isExtended && 'muka-fab--extended',
+        disableSafeArea && 'muka-fab--no-safe-area',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: classes, onClick: onClick, disabled: disabled, "aria-label": !isExtended ? ariaLabel : undefined, children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-fab__icon", "aria-hidden": "true", children: icon }), label && (0, jsx_runtime_1.jsx)("span", { className: "muka-fab__label", children: label })] }));
+};
+exports.FAB = FAB;
+exports.default = exports.FAB;
+//# sourceMappingURL=FAB.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FAB.js","sourceRoot":"","sources":["../../../../components/FAB/FAB.tsx"],"names":[],"mappings":";;;;AACA,6DAAgE;AAChE,qBAAmB;AAkDnB;;;;;;;;;;;;;GAaG;AACI,MAAM,GAAG,GAAuB,CAAC,EACtC,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,GAAG,cAAc,EACzB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,eAAe,GAAG,KAAK,EACvB,YAAY,EAAE,SAAS,EACvB,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAElC,IAAA,mCAAmB,EACjB,KAAK,EACL,CAAC,UAAU,IAAI,CAAC,SAAS,EACzB,uCAAuC,CACxC,CAAC;IAEF,MAAM,OAAO,GAAG;QACd,UAAU;QACV,aAAa,OAAO,EAAE;QACtB,aAAa,IAAI,EAAE;QACnB,aAAa,QAAQ,EAAE;QACvB,UAAU,IAAI,oBAAoB;QAClC,eAAe,IAAI,wBAAwB;QAC3C,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,oCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,gBACN,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,aAE/C,iCAAM,SAAS,EAAC,gBAAgB,iBAAa,MAAM,YAChD,IAAI,GACA,EACN,KAAK,IAAI,iCAAM,SAAS,EAAC,iBAAiB,YAAE,KAAK,GAAQ,IACnD,CACV,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,GAAG,OA8Cd;AAEF,kBAAe,WAAG,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/FAB/index.ts"],"names":[],"mappings":";;;AAAA,6BAA2C;AAAlC,0FAAA,GAAG,OAAA"}