@revikornmann/muka-ui 0.9.2 → 0.11.0

package/dist/types/components/BottomBar/BottomBar.d.ts

@@ -17,8 +17,8 @@ export interface BottomBarTabProps {
  */
 export declare const BottomBarTab: React.FC<BottomBarTabProps>;
 export interface BottomBarProps {
-    /** Bar variant — "actions" for horizontal buttons, "actions-vertical" for stacked buttons, "navigation" for tab items */
-    variant: 'actions' | 'actions-vertical' | 'navigation';
+    /** Bar variant — "actions" for horizontal buttons, "actions-vertical" for stacked buttons, "navigation" for tab items, "chat" to house a ChatComposer */
+    variant: 'actions' | 'actions-vertical' | 'navigation' | 'chat';
     /** Button size — only applies to "actions" and "actions-vertical" variants */
     size?: 'sm' | 'lg';
     /** Floating style — elevated card with rounded corners */
@@ -51,6 +51,7 @@ export interface BottomBarProps {
  * **Variants:**
  * - `actions`: Renders children as a row of action buttons.
  * - `navigation`: Renders BottomBarTab children as a tab bar.
+ * - `chat`: Houses a ChatComposer, capped at `container.max-width.lg` and centered.
  *
  * **Floating:** When `floating={true}`, the bar becomes a floating card
  * with rounded corners, padding, and shadow — used in "top level" views.

package/dist/types/components/BottomBar/BottomBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomBar.d.ts","sourceRoot":"","sources":["../../../../components/BottomBar/BottomBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AAIzB,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IAEtB,gFAAgF;IAChF,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IAEd,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2BpD,CAAC;AAIF,MAAM,WAAW,cAAc;IAC7B,yHAAyH;IACzH,OAAO,EAAE,SAAS,GAAG,kBAAkB,GAAG,YAAY,CAAC;IAEvD,8EAA8E;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAEjC,wFAAwF;IACxF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgC9C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"BottomBar.d.ts","sourceRoot":"","sources":["../../../../components/BottomBar/BottomBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AAIzB,MAAM,WAAW,iBAAiB;IAChC,2CAA2C;IAC3C,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IAEtB,gFAAgF;IAChF,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IAEd,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2BpD,CAAC;AAIF,MAAM,WAAW,cAAc;IAC7B,yJAAyJ;IACzJ,OAAO,EAAE,SAAS,GAAG,kBAAkB,GAAG,YAAY,GAAG,MAAM,CAAC;IAEhE,8EAA8E;IAC9E,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEnB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAEjC,wFAAwF;IACxF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgC9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/types/components/ChatComposer/ChatComposer.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type IconName } from '../Icon';
 import './ChatComposer.css';
 export interface ChatComposerProps {
     /** Current text value (controlled) */
@@ -10,30 +11,58 @@ export interface ChatComposerProps {
     /** Placeholder. Default: 'Reply...' */
     placeholder?: string;
     /**
-     * Slot above the input, e.g. for `ChatAttachmentChip`s the user has staged.
+     * Called when the leading button is pressed (attach / add). While `recording`
+     * the leading button becomes a discard control and calls `onRecordDiscard`
+     * instead.
      */
-    attachments?: React.ReactNode;
+    onLeadingClick?: () => void;
+    /** Leading button icon (RemixIcon base name). Default: 'add' */
+    leadingIcon?: IconName;
+    /** Leading button aria-label. Default: 'Add attachment' */
+    leadingLabel?: string;
+    /** Called when the in-field emoji button is pressed */
+    onEmoji?: () => void;
+    /** Show the in-field emoji button. Default: true */
+    showEmoji?: boolean;
+    /** Emoji button aria-label. Default: 'Add emoji' */
+    emojiLabel?: string;
+    /**
+     * Called when the mic button is pressed. The mic button only appears when the
+     * field is empty and this handler is provided; otherwise a send button shows.
+     */
+    onRecordStart?: () => void;
+    /** Mic button aria-label. Default: 'Record voice message' */
+    micLabel?: string;
+    /** Send button aria-label. Default: 'Send message' */
+    sendLabel?: string;
+    /** When true, the composer switches to the voice-recording layout */
+    recording?: boolean;
     /**
-     * Slot below the input on the leading side, e.g. attach / camera buttons.
+     * Content of the recording bar (e.g. a timer + waveform). Rendered inside the
+     * bordered card. The app owns recording state and this visualization.
      */
-    leading?: React.ReactNode;
+    recordingSlot?: React.ReactNode;
+    /** Called when the pause button is pressed (recording only) */
+    onRecordPause?: () => void;
+    /** Called when the discard (leading) button is pressed while recording */
+    onRecordDiscard?: () => void;
+    /** Pause button aria-label. Default: 'Pause recording' */
+    pauseLabel?: string;
+    /** Discard button aria-label. Default: 'Discard recording' */
+    discardLabel?: string;
     /**
-     * Override the default send button. If provided, replaces the send button entirely.
+     * Staged attachments, typically `Thumbnail` tiles. Rendered in a horizontal
+     * scroll strip above the input row.
      */
-    trailing?: React.ReactNode;
-    /** When true, shows a Spinner in place of the send button */
+    attachments?: React.ReactNode;
+    /** Overflow (scroll) button aria-label. Default: 'Show more attachments' */
+    attachmentsOverflowLabel?: string;
+    /** When true, shows a Spinner in place of the send button icon */
     loading?: boolean;
     /** Disabled state */
     disabled?: boolean;
-    /**
-     * Hide the built-in send button (useful when you want a custom submit affordance
-     * via `trailing`, or want submit-on-enter only).
-     */
-    hideSendButton?: boolean;
-    /** Send button aria-label. Default: 'Send message' */
-    sendLabel?: string;
-    /** Maximum height (px) before the textarea scrolls. Default: 160 */
-    maxHeight?: number;
+    /** Maximum number of text lines before the textarea scrolls. Default: 10 */
+    maxLines?: number;
     /** Auto-focus on mount */
     autoFocus?: boolean;
     /** Additional CSS classes */
@@ -42,8 +71,11 @@ export interface ChatComposerProps {
 /**
  * ChatComposer — input affordance for chat conversations.
  *
- * Auto-growing textarea with a send button. Submits on Enter (Shift+Enter for
- * newline). Designed to live in a `BottomBar`.
+ * A horizontal row of `[leading button] · [input field] · [trailing button]`.
+ * The trailing button toggles between a mic (empty field) and a send button
+ * (text entered). Supports a voice-recording layout and a staged-attachments
+ * strip. Submits on Enter (Shift+Enter for a newline). Designed to live in a
+ * `BottomBar`.
  */
 export declare const ChatComposer: React.ForwardRefExoticComponent<ChatComposerProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default ChatComposer;

package/dist/types/components/ChatComposer/ChatComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../../components/ChatComposer/ChatComposer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAKN,MAAM,OAAO,CAAC;AAGf,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,iBAAiB;IAChC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,+FAwGxB,CAAC;AAIF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ChatComposer.d.ts","sourceRoot":"","sources":["../../../../components/ChatComposer/ChatComposer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAKN,MAAM,OAAO,CAAC;AAEf,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAE9C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,iBAAiB;IAChC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IAEd,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,gEAAgE;IAChE,WAAW,CAAC,EAAE,QAAQ,CAAC;IAEvB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B,0EAA0E;IAC1E,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAE7B,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,4EAA4E;IAC5E,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAElC,kEAAkE;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,+FA2MxB,CAAC;AAIF,eAAe,YAAY,CAAC"}

package/dist/types/components/ChatComposer/index.d.ts

@@ -1,2 +1,3 @@
 export { ChatComposer, type ChatComposerProps } from './ChatComposer';
+export { default } from './ChatComposer';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/ChatComposer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/ChatComposer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/ChatComposer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revikornmann/muka-ui",
-  "version": "0.9.2",
+  "version": "0.11.0",
   "description": "Muka Design System - Multi-brand design tokens and React components",
   "main": "dist/cjs/components/index.js",
   "module": "dist/esm/components/index.js",

package/tokens/t4-components/bottombar.json

@@ -55,17 +55,23 @@
       },
       "backdrop-end": {
         "$type": "color",
-        "$value": "{color.black-alpha.5}"
-      },
-      "backdrop-blur": {
-        "$type": "dimension",
-        "$value": "2px"
+        "$value": "{color.black-alpha.2}"
       },
       "padding-top": {
         "$type": "dimension",
         "$value": "{spacing.8}"
       }
     },
+    "chat": {
+      "max-width": {
+        "$type": "sizing",
+        "$value": "{container.max-width.lg}"
+      },
+      "padding": {
+        "$type": "dimension",
+        "$value": "{spacing.3}"
+      }
+    },
     "tab": {
       "icon-size": {
         "$type": "dimension",