@molecule/app-audio-recorder-react 1.0.2 → 1.0.3

package/dist/AudioRecorder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AudioRecorder.d.ts","sourceRoot":"","sources":["../src/AudioRecorder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAA;AAMxD,OAAO,KAAK,EAAE,kBAAkB,EAAsB,MAAM,YAAY,CAAA;AA0BxE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,OAAO,EACP,QAAQ,EACR,kBAAsB,EACtB,SAAS,EACT,SAAS,GACV,EAAE,kBAAkB,GAAG,YAAY,CA4TnC"}
+{"version":3,"file":"AudioRecorder.d.ts","sourceRoot":"","sources":["../src/AudioRecorder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAA;AAMxD,OAAO,KAAK,EAAE,kBAAkB,EAAsB,MAAM,YAAY,CAAA;AA0BxE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,OAAO,EACP,QAAQ,EACR,kBAAsB,EACtB,SAAS,EACT,SAAS,GACV,EAAE,kBAAkB,GAAG,YAAY,CA8TnC"}

package/dist/AudioRecorder.js

@@ -230,22 +230,17 @@ export function AudioRecorder({ onRecorded, onError, mimeType, maxDurationSecond
         verticalAlign: 'middle',
         animation: state === 'recording' ? 'mol-pulse 1.2s ease-in-out infinite' : undefined,
     };
-    const buttonBase = {
-        background: 'none',
-        border: '1px solid currentColor',
-        padding: '0.4rem 0.9rem',
-        borderRadius: 6,
-        cursor: 'pointer',
-        color: 'inherit',
-        fontSize: 'inherit',
-        lineHeight: 1.2,
-    };
+    // Transport actions go through the design system so they match every other
+    // labelled action in the app: Record is the one coloured call to action
+    // (record-red), the rest are equal-weight outline controls.
+    const recordClass = cm.cn(cm.button({ variant: 'solid', color: 'error', size: 'sm' }), cm.touchTargetCompact);
+    const transportClass = cm.cn(cm.button({ variant: 'outline', size: 'sm' }), cm.touchTargetCompact);
     const showRecord = state === 'idle' || state === 'processed' || state === 'error';
     const showPause = state === 'recording';
     const showResume = state === 'paused';
     const showStop = state === 'recording' || state === 'paused';
     const wrapperClass = cm.cn(cm.flex({ direction: 'col', gap: 'xs' }), className);
-    return (_jsxs("div", { className: wrapperClass, "data-mol-id": dataMolId ?? 'audio-recorder', "data-state": state, role: "group", "aria-label": t('audioRecorder.group', {}, { defaultValue: 'Audio recorder' }), children: [_jsxs("div", { className: cm.flex({ align: 'center', gap: 'sm' }), children: [_jsx("span", { "aria-hidden": true, style: dotStyle }), _jsx("span", { className: cm.cn(cm.textSize('sm'), cm.fontWeight('semibold')), "data-mol-id": "audio-recorder-status", "aria-live": "polite", children: stateLabel }), _jsx("span", { className: cm.textSize('sm'), "data-mol-id": "audio-recorder-elapsed", "aria-label": elapsedLabel, children: formatDuration(elapsed) })] }), _jsxs("div", { className: cm.flex({ align: 'center', gap: 'sm' }), children: [showRecord && (_jsx("button", { type: "button", onClick: handleStart, "aria-label": recordLabel, "data-action": "record", style: buttonBase, children: recordLabel })), showPause && (_jsx("button", { type: "button", onClick: handlePause, "aria-label": pauseLabel, "data-action": "pause", style: buttonBase, children: pauseLabel })), showResume && (_jsx("button", { type: "button", onClick: handleResume, "aria-label": resumeLabel, "data-action": "resume", style: buttonBase, children: resumeLabel })), showStop && (_jsx("button", { type: "button", onClick: handleStop, "aria-label": stopLabel, "data-action": "stop", style: buttonBase, children: stopLabel }))] }), errorMessage && (_jsx("div", { className: cm.textSize('sm'), role: "alert", "data-mol-id": "audio-recorder-error", style: { color: 'var(--mol-color-error, #e11)' }, children: errorMessage }))] }));
+    return (_jsxs("div", { className: wrapperClass, "data-mol-id": dataMolId ?? 'audio-recorder', "data-state": state, role: "group", "aria-label": t('audioRecorder.group', {}, { defaultValue: 'Audio recorder' }), children: [_jsxs("div", { className: cm.flex({ align: 'center', gap: 'sm' }), children: [_jsx("span", { "aria-hidden": true, style: dotStyle }), _jsx("span", { className: cm.cn(cm.textSize('sm'), cm.fontWeight('semibold')), "data-mol-id": "audio-recorder-status", "aria-live": "polite", children: stateLabel }), _jsx("span", { className: cm.textSize('sm'), "data-mol-id": "audio-recorder-elapsed", "aria-label": elapsedLabel, children: formatDuration(elapsed) })] }), _jsxs("div", { className: cm.flex({ align: 'center', gap: 'sm' }), children: [showRecord && (_jsx("button", { type: "button", onClick: handleStart, "aria-label": recordLabel, "data-action": "record", "data-mol-id": "audio-recorder-record", className: recordClass, children: recordLabel })), showPause && (_jsx("button", { type: "button", onClick: handlePause, "aria-label": pauseLabel, "data-action": "pause", "data-mol-id": "audio-recorder-pause", className: transportClass, children: pauseLabel })), showResume && (_jsx("button", { type: "button", onClick: handleResume, "aria-label": resumeLabel, "data-action": "resume", "data-mol-id": "audio-recorder-resume", className: transportClass, children: resumeLabel })), showStop && (_jsx("button", { type: "button", onClick: handleStop, "aria-label": stopLabel, "data-action": "stop", "data-mol-id": "audio-recorder-stop", className: transportClass, children: stopLabel }))] }), errorMessage && (_jsx("div", { className: cm.textSize('sm'), role: "alert", "data-mol-id": "audio-recorder-error", style: { color: 'var(--mol-color-error, #e11)' }, children: errorMessage }))] }));
 }
 /**
  * Compute final recording duration from refs at stop time.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@molecule/app-audio-recorder-react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Mic permission + MediaRecorder wrapper that emits a Blob — voice notes, meeting capture, AI voice agents",
   "homepage": "https://www.molecule.dev/packages/app-audio-recorder-react",
   "type": "module",
@@ -42,7 +42,7 @@
   },
   "devDependencies": {
     "@molecule/app-i18n": "1.0.2",
-    "@molecule/app-react": "1.5.1",
+    "@molecule/app-react": "1.6.0",
     "@molecule/app-ui": "1.1.1",
     "@molecule/app-ui-tailwind": "1.1.3",
     "@testing-library/dom": "10.4.1",