@revikornmann/muka-ui 0.2.1

package/cli/templates/muka-ui-guidelines.md

@@ -0,0 +1,154 @@
+# Muka UI Guidelines
+
+> Generated by `muka-ui init` on {{DATE}}
+
+This document describes how to use Muka UI components in this project.
+
+---
+
+## Installation
+
+Muka UI should already be installed. If not:
+
+```bash
+npm install {{PACKAGE_NAME}}
+```
+
+For local development with the muka-ui source:
+
+```bash
+npx muka-ui link /path/to/muka
+```
+
+---
+
+## Importing Components
+
+```tsx
+// Import individual components
+import { Button, Card, Input, Chip, Select } from '{{PACKAGE_NAME}}';
+
+// Import types for TypeScript
+import type { ButtonProps, InputProps } from '{{PACKAGE_NAME}}';
+```
+
+---
+
+## Importing Styles
+
+Import styles once in your app's root layout or entry point:
+
+```tsx
+// Default theme (muka-light)
+import '{{PACKAGE_NAME}}/styles';
+
+// Or choose a specific theme:
+import '{{PACKAGE_NAME}}/styles/muka-light.css';
+import '{{PACKAGE_NAME}}/styles/muka-dark.css';
+import '{{PACKAGE_NAME}}/styles/wireframe-light.css';
+import '{{PACKAGE_NAME}}/styles/wireframe-dark.css';
+```
+
+### Theme Switching
+
+To support dynamic theme switching, import all themes and toggle via a CSS class or attribute:
+
+```tsx
+// In your root layout
+import '{{PACKAGE_NAME}}/styles/muka-light.css';
+import '{{PACKAGE_NAME}}/styles/muka-dark.css';
+
+// Apply theme via data attribute or class
+<html data-theme="muka-dark">
+```
+
+---
+
+## Available Components
+
+{{COMPONENT_TABLE}}
+
+### Planned Components
+
+{{PLANNED_COMPONENT_TABLE}}
+
+For full documentation and interactive examples, visit: {{STORYBOOK_URL}}
+
+---
+
+## Using Design Tokens
+
+Muka UI provides CSS custom properties (tokens) for consistent styling:
+
+### Spacing
+
+```css
+var(--spacing-1)   /* 0.25rem */
+var(--spacing-2)   /* 0.5rem */
+var(--spacing-3)   /* 0.75rem */
+var(--spacing-4)   /* 1rem */
+var(--spacing-5)   /* 1.25rem */
+var(--spacing-6)   /* 1.5rem */
+var(--spacing-8)   /* 2rem */
+var(--spacing-10)  /* 2.5rem */
+var(--spacing-12)  /* 3rem */
+```
+
+### Colors (Semantic)
+
+```css
+/* Text */
+var(--color-text-default-default)
+var(--color-text-subtle-default)
+var(--color-text-inverse-default)
+
+/* Backgrounds */
+var(--color-surface-level1)
+var(--color-surface-level2)
+var(--color-surface-level3)
+
+/* Borders */
+var(--color-border-default)
+var(--color-border-contrast)
+var(--color-border-focus)
+
+/* Actions */
+var(--color-action-default)
+var(--color-action-hover)
+var(--color-action-pressed)
+```
+
+### Typography
+
+```css
+var(--alias-font-brand-family)
+var(--alias-font-brand-weight-semibold)
+var(--text-label-sm-fontSize)
+var(--text-label-md-fontSize)
+var(--text-label-lg-fontSize)
+```
+
+---
+
+## Requesting New Components
+
+If you need a component that doesn't exist in Muka UI:
+
+1. **Check Storybook** to confirm it's not available: {{STORYBOOK_URL}}
+
+2. **Don't create a local workaround** — this defeats the purpose of using a design system
+
+3. **Request the component** by:
+   - Opening an issue in the muka-ui repository
+   - Or building it yourself in muka-ui and submitting a PR
+
+4. **Wait for availability** — once the component is in Storybook, you can use it
+
+---
+
+## Human Docs
+<!-- SYNC: Update paths when Storybook docs change -->
+
+- **Storybook:** {{STORYBOOK_URL}}
+- **GitHub:** https://github.com/uxdelta/muka
+- **Package:** {{PACKAGE_NAME}} v{{VERSION}}

package/dist/cjs/components/Accordion/Accordion.css

@@ -0,0 +1,128 @@
+/* Accordion Component Styles */
+
+.muka-accordion {
+  width: 100%;
+}
+
+/* Item */
+.muka-accordion__item {
+  border-bottom: var(--border-width-regular) solid var(--color-border-default);
+}
+
+.muka-accordion__item:last-child {
+  border-bottom: none;
+}
+
+/* Header reset */
+.muka-accordion__header {
+  margin: 0;
+}
+
+/* Trigger */
+.muka-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--spacing-4);
+  background: none;
+  border: none;
+  cursor: pointer;
+  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);
+  color: var(--color-text-default-default);
+  text-align: left;
+  gap: var(--spacing-3);
+  transition: background-color 0.15s ease;
+}
+
+.muka-accordion__trigger:hover {
+  background-color: var(--color-surface-level1);
+}
+
+.muka-accordion__trigger[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.muka-accordion__trigger-text {
+  flex: 1;
+}
+
+/* Chevron rotation */
+.muka-accordion__chevron {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-subtle-default);
+  transition: transform 200ms ease;
+}
+
+.muka-accordion__trigger[data-state='open'] .muka-accordion__chevron {
+  transform: rotate(180deg);
+}
+
+/* Content */
+.muka-accordion__content {
+  overflow: hidden;
+}
+
+.muka-accordion__content[data-state='open'] {
+  animation: muka-accordion-slideDown 200ms ease;
+}
+
+.muka-accordion__content[data-state='closed'] {
+  animation: muka-accordion-slideUp 200ms ease;
+}
+
+@keyframes muka-accordion-slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes muka-accordion-slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+.muka-accordion__content-inner {
+  padding: 0 var(--spacing-4) var(--spacing-5);
+  color: var(--color-text-default-default);
+}
+
+/* ─── Variant: flush ────────────────────────────────────────────────────── */
+
+.muka-accordion--flush .muka-accordion__trigger {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.muka-accordion--flush .muka-accordion__content-inner {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* ─── Variant: contained ────────────────────────────────────────────────── */
+
+.muka-accordion--contained {
+  border: var(--border-width-regular) solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.muka-accordion--contained .muka-accordion__item {
+  background-color: var(--color-surface-level3);
+}
+
+.muka-accordion--contained .muka-accordion__item:last-child {
+  border-bottom: none;
+}

package/dist/cjs/components/Accordion/Accordion.js

@@ -0,0 +1,79 @@
+"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.AccordionContent = exports.AccordionTrigger = exports.AccordionItem = exports.Accordion = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const AccordionPrimitive = __importStar(require("@radix-ui/react-accordion"));
+const Icon_1 = require("../Icon");
+require("./Accordion.css");
+const Accordion = ({ type = 'single', defaultValue, value, onValueChange, collapsible = true, variant = 'default', children, className = '', }) => {
+    const rootClasses = [
+        'muka-accordion',
+        `muka-accordion--${variant}`,
+        className,
+    ].filter(Boolean).join(' ');
+    const commonProps = {
+        className: rootClasses,
+        defaultValue,
+        value,
+        onValueChange,
+    };
+    if (type === 'multiple') {
+        return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Root, { type: "multiple", ...commonProps, defaultValue: defaultValue, value: value, onValueChange: onValueChange, children: children }));
+    }
+    return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Root, { type: "single", collapsible: collapsible, ...commonProps, defaultValue: defaultValue, value: value, onValueChange: onValueChange, children: children }));
+};
+exports.Accordion = Accordion;
+exports.AccordionItem = react_1.default.forwardRef(({ value, disabled = false, children, className = '' }, ref) => {
+    const itemClasses = ['muka-accordion__item', className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Item, { ref: ref, value: value, disabled: disabled, className: itemClasses, children: children }));
+});
+exports.AccordionItem.displayName = 'AccordionItem';
+exports.AccordionTrigger = react_1.default.forwardRef(({ children, icon, className = '' }, ref) => {
+    const triggerClasses = ['muka-accordion__trigger', className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Header, { className: "muka-accordion__header", children: (0, jsx_runtime_1.jsxs)(AccordionPrimitive.Trigger, { ref: ref, className: triggerClasses, children: [(0, jsx_runtime_1.jsx)("span", { className: "muka-accordion__trigger-text", children: children }), (0, jsx_runtime_1.jsx)("span", { className: "muka-accordion__chevron", children: icon || (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "arrow-down-s", variant: "line", size: "md" }) })] }) }));
+});
+exports.AccordionTrigger.displayName = 'AccordionTrigger';
+exports.AccordionContent = react_1.default.forwardRef(({ children, className = '' }, ref) => {
+    const contentClasses = ['muka-accordion__content', className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)(AccordionPrimitive.Content, { ref: ref, className: contentClasses, children: (0, jsx_runtime_1.jsx)("div", { className: "muka-accordion__content-inner", children: children }) }));
+});
+exports.AccordionContent.displayName = 'AccordionContent';
+exports.default = exports.Accordion;
+//# sourceMappingURL=Accordion.js.map

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

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

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

@@ -0,0 +1,14 @@
+"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.AccordionContent = exports.AccordionTrigger = exports.AccordionItem = exports.Accordion = void 0;
+var Accordion_1 = require("./Accordion");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.Accordion; } });
+Object.defineProperty(exports, "AccordionItem", { enumerable: true, get: function () { return Accordion_1.AccordionItem; } });
+Object.defineProperty(exports, "AccordionTrigger", { enumerable: true, get: function () { return Accordion_1.AccordionTrigger; } });
+Object.defineProperty(exports, "AccordionContent", { enumerable: true, get: function () { return Accordion_1.AccordionContent; } });
+var Accordion_2 = require("./Accordion");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Accordion_2).default; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Accordion/index.ts"],"names":[],"mappings":";;;;;;AAAA,yCASqB;AARnB,sGAAA,SAAS,OAAA;AACT,0GAAA,aAAa,OAAA;AACb,6GAAA,gBAAgB,OAAA;AAChB,6GAAA,gBAAgB,OAAA;AAMlB,yCAAsC;AAA7B,qHAAA,OAAO,OAAA"}

package/dist/cjs/components/ActionSheet/ActionSheet.css

@@ -0,0 +1,139 @@
+/* ActionSheet Component Styles */
+
+.muka-action-sheet__inner {
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--spacing-4) var(--spacing-3) var(--spacing-4);
+  gap: var(--spacing-3);
+}
+
+/* ─── Header ──────────────────────────────────────────── */
+
+.muka-action-sheet__header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-2) 0 var(--spacing-3);
+  text-align: center;
+}
+
+.muka-action-sheet__title {
+  margin: 0;
+  color: var(--color-text-default-default);
+  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-action-sheet__description {
+  margin: 0;
+  color: var(--color-text-subtle-default);
+  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);
+}
+
+/* ─── Actions group ───────────────────────────────────── */
+
+.muka-action-sheet__actions {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-surface-level1);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.muka-action-sheet__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3) var(--spacing-4);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  color: var(--color-text-default-default);
+  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: background-color 0.12s ease;
+}
+
+.muka-action-sheet__item + .muka-action-sheet__item {
+  border-top: var(--border-width-regular) solid var(--color-border-default);
+}
+
+.muka-action-sheet__item:hover:not(:disabled) {
+  background-color: var(--color-surface-level2);
+}
+
+.muka-action-sheet__item:active:not(:disabled) {
+  background-color: var(--color-surface-level3);
+}
+
+.muka-action-sheet__item:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: -2px;
+}
+
+.muka-action-sheet__item--destructive {
+  color: var(--color-state-error-default);
+}
+
+.muka-action-sheet__item--disabled,
+.muka-action-sheet__item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.muka-action-sheet__item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.muka-action-sheet__item-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.muka-action-sheet__item-label {
+  flex: 1;
+}
+
+/* ─── Cancel button (separate at bottom) ──────────────── */
+
+.muka-action-sheet__cancel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-3) var(--spacing-4);
+  background-color: var(--color-surface-level1);
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  color: var(--color-text-default-default);
+  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);
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color 0.12s ease;
+}
+
+.muka-action-sheet__cancel:hover {
+  background-color: var(--color-surface-level2);
+}
+
+.muka-action-sheet__cancel:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
+}

package/dist/cjs/components/ActionSheet/ActionSheet.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionSheet = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Sheet_1 = require("../Sheet");
+require("./ActionSheet.css");
+/**
+ * ActionSheet — iOS-style action menu sliding up from the bottom.
+ *
+ * Built on `Sheet`. Use as the touch replacement for `ContextMenu` and as the
+ * primary pattern for "options" menus on motorcycles, service records, etc.
+ *
+ * Each action's `onClick` runs, then the sheet auto-closes.
+ */
+const ActionSheet = ({ open, onOpenChange, title, description, actions, cancel, ariaLabel = 'Actions', className = '', }) => {
+    const handleActionClick = (action) => {
+        if (action.disabled)
+            return;
+        action.onClick?.();
+        onOpenChange(false);
+    };
+    const handleCancelClick = () => {
+        cancel?.onClick?.();
+        onOpenChange(false);
+    };
+    const classes = ['muka-action-sheet', className].filter(Boolean).join(' ');
+    return ((0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { open: open, onOpenChange: onOpenChange, title: title || ariaLabel, className: classes, children: (0, jsx_runtime_1.jsxs)("div", { className: "muka-action-sheet__inner", children: [(title || description) && ((0, jsx_runtime_1.jsxs)("header", { className: "muka-action-sheet__header", children: [title && (0, jsx_runtime_1.jsx)("h2", { className: "muka-action-sheet__title", children: title }), description && (0, jsx_runtime_1.jsx)("p", { className: "muka-action-sheet__description", children: description })] })), (0, jsx_runtime_1.jsx)("div", { className: "muka-action-sheet__actions", role: "group", children: actions.map((action, idx) => {
+                        const itemClasses = [
+                            'muka-action-sheet__item',
+                            action.destructive && 'muka-action-sheet__item--destructive',
+                            action.disabled && 'muka-action-sheet__item--disabled',
+                        ]
+                            .filter(Boolean)
+                            .join(' ');
+                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: itemClasses, onClick: () => handleActionClick(action), disabled: action.disabled, children: [action.icon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-action-sheet__item-icon", "aria-hidden": "true", children: action.icon })), (0, jsx_runtime_1.jsx)("span", { className: "muka-action-sheet__item-label", children: action.label })] }, idx));
+                    }) }), cancel && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "muka-action-sheet__cancel", onClick: handleCancelClick, children: cancel.label }))] }) }));
+};
+exports.ActionSheet = ActionSheet;
+exports.default = exports.ActionSheet;
+//# sourceMappingURL=ActionSheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionSheet.js","sourceRoot":"","sources":["../../../../components/ActionSheet/ActionSheet.tsx"],"names":[],"mappings":";;;;AACA,oCAAiC;AACjC,6BAA2B;AAsD3B;;;;;;;GAOG;AACI,MAAM,WAAW,GAA+B,CAAC,EACtD,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,OAAO,EACP,MAAM,EACN,SAAS,GAAG,SAAS,EACrB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,iBAAiB,GAAG,CAAC,MAAuB,EAAE,EAAE;QACpD,IAAI,MAAM,CAAC,QAAQ;YAAE,OAAO;QAC5B,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC;QACnB,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,MAAM,EAAE,OAAO,EAAE,EAAE,CAAC;QACpB,YAAY,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE3E,OAAO,CACL,uBAAC,aAAK,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,IAAI,SAAS,EAAE,SAAS,EAAE,OAAO,YAC1F,iCAAK,SAAS,EAAC,0BAA0B,aACtC,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACzB,oCAAQ,SAAS,EAAC,2BAA2B,aAC1C,KAAK,IAAI,+BAAI,SAAS,EAAC,0BAA0B,YAAE,KAAK,GAAM,EAC9D,WAAW,IAAI,8BAAG,SAAS,EAAC,gCAAgC,YAAE,WAAW,GAAK,IACxE,CACV,EAED,gCAAK,SAAS,EAAC,4BAA4B,EAAC,IAAI,EAAC,OAAO,YACrD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE;wBAC3B,MAAM,WAAW,GAAG;4BAClB,yBAAyB;4BACzB,MAAM,CAAC,WAAW,IAAI,sCAAsC;4BAC5D,MAAM,CAAC,QAAQ,IAAI,mCAAmC;yBACvD;6BACE,MAAM,CAAC,OAAO,CAAC;6BACf,IAAI,CAAC,GAAG,CAAC,CAAC;wBACb,OAAO,CACL,oCAEE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,EACxC,QAAQ,EAAE,MAAM,CAAC,QAAQ,aAExB,MAAM,CAAC,IAAI,IAAI,CACd,iCAAM,SAAS,EAAC,8BAA8B,iBAAa,MAAM,YAC9D,MAAM,CAAC,IAAI,GACP,CACR,EACD,iCAAM,SAAS,EAAC,+BAA+B,YAAE,MAAM,CAAC,KAAK,GAAQ,KAXhE,GAAG,CAYD,CACV,CAAC;oBACJ,CAAC,CAAC,GACE,EAEL,MAAM,IAAI,CACT,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,2BAA2B,EACrC,OAAO,EAAE,iBAAiB,YAEzB,MAAM,CAAC,KAAK,GACN,CACV,IACG,GACA,CACT,CAAC;AACJ,CAAC,CAAC;AAzEW,QAAA,WAAW,eAyEtB;AAEF,kBAAe,mBAAW,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ActionSheet/index.ts"],"names":[],"mappings":";;;AAAA,6CAAyF;AAAhF,0GAAA,WAAW,OAAA"}