@revikornmann/muka-ui 0.2.1

package/dist/esm/components/AgentTaskList/AgentTaskList.css

@@ -0,0 +1,147 @@
+/* AgentTaskList Component Styles */
+
+.muka-agent-task-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  width: 100%;
+  padding: 0 var(--spacing-2);
+}
+
+/* ─── Header ───────────────────────────────────────────── */
+
+.muka-agent-task-list__header {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  color: var(--color-text-subtle-default);
+  font-family: var(--text-body-sm-bold-fontFamily);
+  font-weight: var(--text-body-sm-bold-fontWeight);
+  font-size: var(--text-body-sm-bold-fontSize);
+  line-height: var(--text-body-sm-bold-lineHeight);
+  text-align: left;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.muka-agent-task-list__header:focus-visible {
+  outline: 2px solid var(--color-action-default);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+
+.muka-agent-task-list__title {
+  text-align: left;
+}
+
+.muka-agent-task-list__chevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.16s ease;
+  color: var(--color-text-subtle-default);
+}
+
+.muka-agent-task-list__chevron[data-open='false'] {
+  transform: rotate(-90deg);
+}
+
+/* ─── Task list ────────────────────────────────────────── */
+
+.muka-agent-task-list__tasks {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ─── Single task row ──────────────────────────────────── */
+
+.muka-agent-task-list__task {
+  display: flex;
+  align-items: stretch;
+  gap: var(--spacing-4);
+  min-height: 32px;
+  padding: 0;
+}
+
+/* ─── Bullet column (icon + timeline connector) ────────── */
+
+.muka-agent-task-list__bullet {
+  position: relative;
+  flex-shrink: 0;
+  width: 16px;
+  align-self: stretch;
+}
+
+.muka-agent-task-list__line {
+  position: absolute;
+  left: 7px;
+  width: 1px;
+  background-color: var(--color-border-default, #d9d9d9);
+}
+
+.muka-agent-task-list__line--top {
+  top: 0;
+  height: 6px;
+}
+
+.muka-agent-task-list__line--bottom {
+  top: 32px;
+  bottom: 0;
+}
+
+.muka-agent-task-list__task:first-child .muka-agent-task-list__line--top {
+  display: none;
+}
+
+.muka-agent-task-list__task:last-child .muka-agent-task-list__line--bottom {
+  display: none;
+}
+
+.muka-agent-task-list__icon {
+  position: absolute;
+  top: 8px;
+  left: 0;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-subtle-default);
+  z-index: 1;
+}
+
+/* ─── State color treatments ───────────────────────────── */
+
+.muka-agent-task-list__task[data-state='active'] .muka-agent-task-list__icon {
+  color: var(--color-action-default);
+}
+
+.muka-agent-task-list__task[data-state='done'] .muka-agent-task-list__icon {
+  color: var(--color-text-subtle-default);
+}
+
+.muka-agent-task-list__task[data-state='pending'] .muka-agent-task-list__icon {
+  color: var(--color-text-muted-default, var(--color-text-subtle-default));
+  opacity: 0.6;
+}
+
+/* ─── Label ────────────────────────────────────────────── */
+
+.muka-agent-task-list__label {
+  flex: 1 1 0;
+  min-width: 0;
+  padding: var(--spacing-2) 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);
+  word-break: break-word;
+}

package/dist/esm/components/AgentTaskList/AgentTaskList.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Icon } from '../Icon';
+import './AgentTaskList.css';
+/**
+ * AgentTaskList — collapsible task timeline for an AI agent message.
+ *
+ * Renders a header + a vertical timeline of tasks the agent is performing
+ * (e.g. searching the web, querying a database, drafting an answer).
+ *
+ * Typically rendered above the agent's final reply inside a `ChatBubble`
+ * with `variant="agent"`.
+ */
+export const AgentTaskList = ({ title, tasks, defaultOpen = true, open: controlledOpen, onOpenChange, className = '', }) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+    const toggle = () => {
+        const next = !isOpen;
+        if (!isControlled)
+            setUncontrolledOpen(next);
+        onOpenChange?.(next);
+    };
+    const classes = [
+        'muka-agent-task-list',
+        isOpen && 'muka-agent-task-list--open',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: classes, children: [_jsxs("button", { type: "button", className: "muka-agent-task-list__header", "aria-expanded": isOpen, onClick: toggle, children: [_jsx("span", { className: "muka-agent-task-list__title", children: title }), _jsx("span", { className: "muka-agent-task-list__chevron", "data-open": isOpen, "aria-hidden": "true", children: _jsx(Icon, { name: "arrow-down-s", size: "xs" }) })] }), isOpen && (_jsx("ol", { className: "muka-agent-task-list__tasks", children: tasks.map((task, i) => {
+                    const state = task.state ?? 'done';
+                    return (_jsxs("li", { className: "muka-agent-task-list__task", "data-state": state, children: [_jsxs("span", { className: "muka-agent-task-list__bullet", "aria-hidden": "true", children: [_jsx("span", { className: "muka-agent-task-list__line muka-agent-task-list__line--top" }), _jsx("span", { className: "muka-agent-task-list__line muka-agent-task-list__line--bottom" }), _jsx("span", { className: "muka-agent-task-list__icon", children: task.icon ?? _jsx(Icon, { name: "checkbox-circle", size: "xs" }) })] }), _jsx("span", { className: "muka-agent-task-list__label", children: task.label })] }, i));
+                }) }))] }));
+};
+export default AgentTaskList;
+//# sourceMappingURL=AgentTaskList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTaskList.js","sourceRoot":"","sources":["../../../../components/AgentTaskList/AgentTaskList.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AA0C7B;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,KAAK,EACL,KAAK,EACL,WAAW,GAAG,IAAI,EAClB,IAAI,EAAE,cAAc,EACpB,YAAY,EACZ,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IACtE,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS,CAAC;IAClD,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAEhE,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,MAAM,IAAI,GAAG,CAAC,MAAM,CAAC;QACrB,IAAI,CAAC,YAAY;YAAE,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC7C,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG;QACd,sBAAsB;QACtB,MAAM,IAAI,4BAA4B;QACtC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACrB,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,8BAA8B,mBACzB,MAAM,EACrB,OAAO,EAAE,MAAM,aAEf,eAAM,SAAS,EAAC,6BAA6B,YAAE,KAAK,GAAQ,EAC5D,eACE,SAAS,EAAC,+BAA+B,eAC9B,MAAM,iBACL,MAAM,YAElB,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,IAAI,GAAG,GACjC,IACA,EAER,MAAM,IAAI,CACT,aAAI,SAAS,EAAC,6BAA6B,YACxC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;oBACrB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,MAAM,CAAC;oBACnC,OAAO,CACL,cAEE,SAAS,EAAC,4BAA4B,gBAC1B,KAAK,aAEjB,gBAAM,SAAS,EAAC,8BAA8B,iBAAa,MAAM,aAC/D,eAAM,SAAS,EAAC,4DAA4D,GAAG,EAC/E,eAAM,SAAS,EAAC,+DAA+D,GAAG,EAClF,eAAM,SAAS,EAAC,4BAA4B,YACzC,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,iBAAiB,EAAC,IAAI,EAAC,IAAI,GAAG,GAClD,IACF,EACP,eAAM,SAAS,EAAC,6BAA6B,YAAE,IAAI,CAAC,KAAK,GAAQ,KAX5D,CAAC,CAYH,CACN,CAAC;gBACJ,CAAC,CAAC,GACC,CACN,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/AgentTaskList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,GAGd,MAAM,iBAAiB,CAAC"}

package/dist/esm/components/Alert/Alert.css

@@ -0,0 +1,192 @@
+/* Alert Component Styles - Using Muka Design Tokens */
+
+.muka-alert {
+  display: flex;
+  align-items: flex-start;
+  border-radius: var(--alert-radius);
+  border: none;
+  gap: var(--alert-gap);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+/* Size variants */
+.muka-alert--sm {
+  padding: var(--alert-padding-sm-y) var(--alert-padding-sm-x);
+}
+
+.muka-alert--md {
+  padding: var(--alert-padding-md-y) var(--alert-padding-md-x);
+}
+
+.muka-alert--lg {
+  padding: var(--alert-padding-lg-y) var(--alert-padding-lg-x);
+}
+
+/* Variant: Info */
+.muka-alert--info {
+  background-color: var(--alert-color-info-background);
+  color: var(--alert-color-info-foreground);
+}
+
+.muka-alert--info .muka-alert__icon {
+  color: var(--alert-color-info-accent);
+}
+
+.muka-alert--info .muka-alert__title {
+  color: var(--alert-color-info-accent);
+}
+
+.muka-alert--info .muka-alert__dismiss {
+  color: var(--alert-color-info-accent);
+}
+
+/* Variant: Success */
+.muka-alert--success {
+  background-color: var(--alert-color-success-background);
+  color: var(--alert-color-success-foreground);
+}
+
+.muka-alert--success .muka-alert__icon {
+  color: var(--alert-color-success-accent);
+}
+
+.muka-alert--success .muka-alert__title {
+  color: var(--alert-color-success-accent);
+}
+
+.muka-alert--success .muka-alert__dismiss {
+  color: var(--alert-color-success-accent);
+}
+
+/* Variant: Warning */
+.muka-alert--warning {
+  background-color: var(--alert-color-warning-background);
+  color: var(--alert-color-warning-foreground);
+}
+
+.muka-alert--warning .muka-alert__icon {
+  color: var(--alert-color-warning-accent);
+}
+
+.muka-alert--warning .muka-alert__title {
+  color: var(--alert-color-warning-accent);
+}
+
+.muka-alert--warning .muka-alert__dismiss {
+  color: var(--alert-color-warning-accent);
+}
+
+/* Variant: Error */
+.muka-alert--error {
+  background-color: var(--alert-color-error-background);
+  color: var(--alert-color-error-foreground);
+}
+
+.muka-alert--error .muka-alert__icon {
+  color: var(--alert-color-error-accent);
+}
+
+.muka-alert--error .muka-alert__title {
+  color: var(--alert-color-error-accent);
+}
+
+.muka-alert--error .muka-alert__dismiss {
+  color: var(--alert-color-error-accent);
+}
+
+/* Icon */
+.muka-alert__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--alert-icon-size);
+  height: var(--alert-icon-size);
+}
+
+.muka-alert__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Content */
+.muka-alert__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.muka-alert__title {
+  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);
+  margin-bottom: var(--spacing-1);
+}
+
+.muka-alert--sm .muka-alert__title {
+  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-alert--lg .muka-alert__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-alert__message {
+  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-alert--lg .muka-alert__message {
+  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);
+}
+
+/* Action slot */
+.muka-alert__action {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Dismiss button - uses accent color per variant, aligned with icon row */
+.muka-alert__dismiss {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: flex-start;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0 0 0 auto;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--border-radius-sm);
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.muka-alert__dismiss:hover {
+  opacity: 0.85;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.muka-alert__dismiss:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+.muka-alert__dismiss svg {
+  width: 16px;
+  height: 16px;
+}

package/dist/esm/components/Alert/Alert.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Alert.css';
+import { Icon } from '../Icon';
+// Default icons per variant (Remix Icon fill style)
+const defaultIcons = {
+    info: _jsx(Icon, { name: "information", variant: "fill", size: "md" }),
+    success: _jsx(Icon, { name: "check", variant: "fill", size: "md" }),
+    warning: _jsx(Icon, { name: "error-warning", variant: "fill", size: "md" }),
+    error: _jsx(Icon, { name: "error-warning", variant: "fill", size: "md" }),
+};
+/**
+ * Alert Component (Inline)
+ *
+ * Displays an inline alert message with contextual styling.
+ * Used for form validation feedback, important notices, and status messages.
+ *
+ * @accessibility WCAG 2.1 AA compliant
+ * - Uses role="alert" for error variants (immediate announcement)
+ * - Uses role="status" for other variants (polite announcement)
+ * - Dismiss button has accessible label
+ * - Color is not the only means of conveying status (icons included)
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+ */
+export const Alert = ({ children, variant = 'info', size = 'md', title, icon, hideIcon = false, dismissible = false, onDismiss, action, className = '', role: roleProp, ...props }) => {
+    const alertClasses = [
+        'muka-alert',
+        `muka-alert--${variant}`,
+        `muka-alert--${size}`,
+        className,
+    ].filter(Boolean).join(' ');
+    // Determine role: error uses 'alert' for immediate announcement, others use 'status'
+    const role = roleProp ?? (variant === 'error' ? 'alert' : 'status');
+    const displayIcon = hideIcon ? null : (icon ?? defaultIcons[variant]);
+    const handleDismiss = () => {
+        onDismiss?.();
+    };
+    return (_jsxs("div", { className: alertClasses, role: role === 'none' ? undefined : role, "aria-live": role === 'alert' ? 'assertive' : 'polite', ...props, children: [displayIcon && (_jsx("span", { className: "muka-alert__icon", "aria-hidden": "true", children: displayIcon })), _jsxs("div", { className: "muka-alert__content", children: [title && _jsx("div", { className: "muka-alert__title", children: title }), _jsx("div", { className: "muka-alert__message", children: children })] }), action && _jsx("div", { className: "muka-alert__action", children: action }), dismissible && (_jsx("button", { type: "button", className: "muka-alert__dismiss", onClick: handleDismiss, "aria-label": "Dismiss alert", children: _jsx(Icon, { name: "close", variant: "line", size: "sm" }) }))] }));
+};
+export default Alert;
+//# sourceMappingURL=Alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../../components/Alert/Alert.tsx"],"names":[],"mappings":";AACA,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAqC/B,oDAAoD;AACpD,MAAM,YAAY,GAAoC;IACpD,IAAI,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG;IAC1D,OAAO,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG;IACvD,OAAO,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG;IAC/D,KAAK,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,eAAe,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG;CAC9D,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,KAAK,GAAyB,CAAC,EAC1C,QAAQ,EACR,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,IAAI,EACX,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,MAAM,EACN,SAAS,GAAG,EAAE,EACd,IAAI,EAAE,QAAQ,EACd,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,YAAY,GAAG;QACnB,YAAY;QACZ,eAAe,OAAO,EAAE;QACxB,eAAe,IAAI,EAAE;QACrB,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,qFAAqF;IACrF,MAAM,IAAI,GAAG,QAAQ,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IAEpE,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;IAEtE,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,SAAS,EAAE,EAAE,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACL,eACE,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,eAC7B,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,KAChD,KAAK,aAER,WAAW,IAAI,CACd,eAAM,SAAS,EAAC,kBAAkB,iBAAa,MAAM,YAClD,WAAW,GACP,CACR,EAED,eAAK,SAAS,EAAC,qBAAqB,aACjC,KAAK,IAAI,cAAK,SAAS,EAAC,mBAAmB,YAAE,KAAK,GAAO,EAC1D,cAAK,SAAS,EAAC,qBAAqB,YAAE,QAAQ,GAAO,IACjD,EAEL,MAAM,IAAI,cAAK,SAAS,EAAC,oBAAoB,YAAE,MAAM,GAAO,EAE5D,WAAW,IAAI,CACd,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,aAAa,gBACX,eAAe,YAE1B,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,GACvC,CACV,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/esm/components/AppShell/AppShell.css

@@ -0,0 +1,93 @@
+/* AppShell Component Styles */
+
+/*
+ * Layout wrapper for a persistent left navigation rail + main view area, with an
+ * optional full-width top app bar. The rail itself is styled by the BottomBar
+ * `desktopAs="sidebar"` rules (fixed 240px left rail at ≥1024px); AppShell shows/
+ * hides the sidebar + app-bar slots and offsets the main area to match. Both
+ * appear at the large tier — responsively (no `size`, scoped with
+ * `:not([data-size])`) or forced via `[data-size="lg"]`.
+ */
+.muka-app-shell {
+  position: relative;
+  /* Reserved width for the rail; matches BottomBar's desktop-sidebar width. */
+  --app-shell-sidebar-width: 240px;
+  /* Height of the optional top app bar. */
+  --app-shell-appbar-height: 64px;
+}
+
+/* Sidebar slot: hidden below the large tier (per-view nav handles small/medium). */
+.muka-app-shell__sidebar {
+  display: none;
+}
+
+.muka-app-shell__main {
+  min-height: 100dvh;
+}
+
+/*
+ * App bar: full-width top strip. Intrinsic styling lives here (harmless while
+ * hidden); it is revealed only at the large tier. Sits above the sidebar rail.
+ */
+.muka-app-shell__appbar {
+  display: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--app-shell-appbar-height);
+  padding-inline: var(--spacing-4);
+  background-color: var(--color-surface-level3);
+  border-bottom: var(--border-width-regular) solid var(--color-border-default);
+  z-index: 11; /* above the sidebar rail (z-index 10) */
+}
+
+/* ─── Large tier (responsive) ─── */
+@media (min-width: 1024px) {
+  .muka-app-shell:not([data-size]) .muka-app-shell__sidebar {
+    display: block;
+  }
+  .muka-app-shell:not([data-size]) .muka-app-shell__main {
+    padding-left: var(--app-shell-sidebar-width);
+  }
+  .muka-app-shell:not([data-size]) .muka-app-shell__appbar {
+    display: flex;
+  }
+  /* When an app bar is present, drop the rail + content below it so nothing overlaps. */
+  .muka-app-shell:not([data-size]):has(.muka-app-shell__appbar) .muka-app-shell__main {
+    padding-top: var(--app-shell-appbar-height);
+  }
+  .muka-app-shell:not([data-size]):has(.muka-app-shell__appbar) .muka-bottombar--desktop-sidebar {
+    top: var(--app-shell-appbar-height);
+    height: calc(100vh - var(--app-shell-appbar-height));
+  }
+  .muka-app-shell:not([data-size]):has(.muka-app-shell__appbar) .muka-view,
+  .muka-app-shell:not([data-size]):has(.muka-app-shell__appbar) .muka-nav-transition {
+    height: calc(100dvh - var(--app-shell-appbar-height));
+  }
+}
+
+/* ─── Large tier (forced via size="lg") ─── */
+.muka-app-shell[data-size='lg'] .muka-app-shell__sidebar {
+  display: block;
+}
+.muka-app-shell[data-size='lg'] .muka-app-shell__main {
+  padding-left: var(--app-shell-sidebar-width);
+}
+.muka-app-shell[data-size='lg'] .muka-app-shell__appbar {
+  display: flex;
+}
+.muka-app-shell[data-size='lg']:has(.muka-app-shell__appbar) .muka-app-shell__main {
+  padding-top: var(--app-shell-appbar-height);
+}
+.muka-app-shell[data-size='lg']:has(.muka-app-shell__appbar) .muka-bottombar--desktop-sidebar {
+  top: var(--app-shell-appbar-height);
+  height: calc(100vh - var(--app-shell-appbar-height));
+}
+.muka-app-shell[data-size='lg']:has(.muka-app-shell__appbar) .muka-view,
+.muka-app-shell[data-size='lg']:has(.muka-app-shell__appbar) .muka-nav-transition {
+  height: calc(100dvh - var(--app-shell-appbar-height));
+}

package/dist/esm/components/AppShell/AppShell.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './AppShell.css';
+/**
+ * AppShell Component
+ *
+ * A responsive application shell that holds a persistent left navigation rail
+ * alongside the main view area. The `sidebar` lives OUTSIDE the view area, so it
+ * stays mounted (and visually fixed) while the inner View changes — including
+ * across NavigationTransition animations.
+ *
+ * - **Large** (≥1024px): the `sidebar` renders as a fixed 240px left rail and the
+ *   main area is offset to clear it. An optional `appBar` spans the top across the
+ *   full width (brand + account).
+ * - **Below large**: the sidebar and app bar are hidden; navigation is handled by
+ *   the per-view bottom bar (top-level) or back button / action bar (sub-level).
+ *
+ * @accessibility The sidebar and main area are siblings; the sidebar content
+ * (e.g. a BottomBar with `variant="navigation"`) supplies its own `<nav>`/roles.
+ */
+export const AppShell = ({ sidebar, appBar, children, size, className = '', }) => {
+    const shellClasses = [
+        'muka-app-shell',
+        className,
+    ].filter(Boolean).join(' ');
+    return (_jsxs("div", { className: shellClasses, "data-size": size, children: [appBar && (_jsx("div", { className: "muka-app-shell__appbar", children: appBar })), _jsx("div", { className: "muka-app-shell__sidebar", children: sidebar }), _jsx("div", { className: "muka-app-shell__main", children: children })] }));
+};
+export default AppShell;
+//# sourceMappingURL=AppShell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.js","sourceRoot":"","sources":["../../../../components/AppShell/AppShell.tsx"],"names":[],"mappings":";AACA,OAAO,gBAAgB,CAAC;AAkCxB;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,YAAY,GAAG;QACnB,gBAAgB;QAChB,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,CACL,eAAK,SAAS,EAAE,YAAY,eAAa,IAAI,aAC1C,MAAM,IAAI,CACT,cAAK,SAAS,EAAC,wBAAwB,YACpC,MAAM,GACH,CACP,EACD,cAAK,SAAS,EAAC,yBAAyB,YACrC,OAAO,GACJ,EACN,cAAK,SAAS,EAAC,sBAAsB,YAClC,QAAQ,GACL,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

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

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

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