@designcrowd/fe-shared-lib 1.6.10-voiceText-1 → 1.6.10-voiceText-3

package/src/atoms/components/VoiceToTextButton/VoiceToTextButton.stories.js

@@ -27,6 +27,7 @@ export const PromptInputDemo = () => ({
           class="tw-flex-1 tw-bg-transparent tw-border-none tw-text-white tw-placeholder-grayscale-500 focus:tw-outline-none tw-text-base"
         />
         <VoiceToTextButton
+          variant="dark"
           size="md"
           @on-transcript="transcript = $event"
           @on-interim-transcript="transcript = $event"
@@ -54,52 +55,188 @@ export const PromptInputDemo = () => ({
 });
 
 PromptInputDemo.story = {
-  name: 'Prompt Input (Dark Theme)',
+  name: 'Dark - Prompt Input',
 };
 
-export const PromptVariantStates = () => ({
+export const DarkVariantStates = () => ({
   components: { VoiceToTextButton },
   template: `
     <div class="tw-p-8" style="background: #1a1a2e;">
-      <h3 class="tw-text-white tw-text-lg tw-font-semibold tw-mb-6">Prompt Variant - All States</h3>
+      <h3 class="tw-text-white tw-text-lg tw-font-semibold tw-mb-6">Dark Variant - All States</h3>
 
       <div class="tw-flex tw-gap-8 tw-items-start">
         <div class="tw-text-center">
           <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-800 tw-rounded-lg tw-inline-block">
-            <VoiceToTextButton size="sm" />
+            <VoiceToTextButton variant="dark" size="sm" />
           </div>
           <p class="tw-text-grayscale-400 tw-text-xs">Small</p>
         </div>
 
         <div class="tw-text-center">
           <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-800 tw-rounded-lg tw-inline-block">
-            <VoiceToTextButton size="md" />
+            <VoiceToTextButton variant="dark" size="md" />
           </div>
           <p class="tw-text-grayscale-400 tw-text-xs">Medium (default)</p>
         </div>
 
         <div class="tw-text-center">
           <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-800 tw-rounded-lg tw-inline-block">
-            <VoiceToTextButton size="lg" />
+            <VoiceToTextButton variant="dark" size="lg" />
           </div>
           <p class="tw-text-grayscale-400 tw-text-xs">Large</p>
         </div>
 
         <div class="tw-text-center">
           <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-800 tw-rounded-lg tw-inline-block">
-            <VoiceToTextButton :disabled="true" />
+            <VoiceToTextButton variant="dark" :disabled="true" />
           </div>
           <p class="tw-text-grayscale-400 tw-text-xs">Disabled</p>
         </div>
       </div>
 
       <p class="tw-text-grayscale-500 tw-text-sm tw-mt-6">
-        Click any button to see the recording state with red ring animation
+        Click any button to see the recording state with grey circle indicator
       </p>
     </div>
   `,
 });
 
-PromptVariantStates.story = {
-  name: 'Prompt Variant States',
+DarkVariantStates.story = {
+  name: 'Dark - Variant States',
+};
+
+export const LightInputDemo = () => ({
+  components: { VoiceToTextButton },
+  data() {
+    return {
+      transcript: '',
+      isListening: false,
+      error: null,
+    };
+  },
+  template: `
+    <div class="tw-min-h-[400px] tw-p-8 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-white">
+      <h1 class="tw-text-grayscale-800 tw-text-3xl tw-font-bold tw-mb-2 tw-text-center">Search</h1>
+      <p class="tw-text-grayscale-600 tw-mb-8 tw-text-center">Find what you're looking for</p>
+
+      <div class="tw-w-full tw-max-w-xl tw-bg-grayscale-100 tw-rounded-full tw-px-6 tw-py-3 tw-flex tw-items-center tw-gap-3 tw-border tw-border-grayscale-300">
+        <input
+          v-model="transcript"
+          type="text"
+          placeholder="Type to search..."
+          class="tw-flex-1 tw-bg-transparent tw-border-none tw-text-grayscale-800 tw-placeholder-grayscale-500 focus:tw-outline-none tw-text-base"
+        />
+        <VoiceToTextButton
+          variant="light"
+          size="md"
+          @on-transcript="transcript = $event"
+          @on-interim-transcript="transcript = $event"
+          @on-start="isListening = true; error = null"
+          @on-stop="isListening = false"
+          @on-error="error = $event"
+        />
+      </div>
+
+      <div class="tw-mt-4 tw-text-sm tw-h-6">
+        <p v-if="isListening" class="tw-text-error-500 tw-font-medium">
+          Recording... speak now
+        </p>
+        <p v-else-if="error" class="tw-text-error-400">
+          {{ error }}
+        </p>
+      </div>
+    </div>
+  `,
+});
+
+LightInputDemo.story = {
+  name: 'Light - Search Input',
+};
+
+export const LightVariantStates = () => ({
+  components: { VoiceToTextButton },
+  template: `
+    <div class="tw-p-8 tw-bg-white">
+      <h3 class="tw-text-grayscale-800 tw-text-lg tw-font-semibold tw-mb-6">Light Variant - All States</h3>
+
+      <div class="tw-flex tw-gap-8 tw-items-start">
+        <div class="tw-text-center">
+          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-100 tw-rounded-lg tw-inline-block">
+            <VoiceToTextButton variant="light" size="sm" />
+          </div>
+          <p class="tw-text-grayscale-600 tw-text-xs">Small</p>
+        </div>
+
+        <div class="tw-text-center">
+          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-100 tw-rounded-lg tw-inline-block">
+            <VoiceToTextButton variant="light" size="md" />
+          </div>
+          <p class="tw-text-grayscale-600 tw-text-xs">Medium (default)</p>
+        </div>
+
+        <div class="tw-text-center">
+          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-100 tw-rounded-lg tw-inline-block">
+            <VoiceToTextButton variant="light" size="lg" />
+          </div>
+          <p class="tw-text-grayscale-600 tw-text-xs">Large</p>
+        </div>
+
+        <div class="tw-text-center">
+          <div class="tw-mb-2 tw-p-4 tw-bg-grayscale-100 tw-rounded-lg tw-inline-block">
+            <VoiceToTextButton variant="light" :disabled="true" />
+          </div>
+          <p class="tw-text-grayscale-600 tw-text-xs">Disabled</p>
+        </div>
+      </div>
+
+      <p class="tw-text-grayscale-500 tw-text-sm tw-mt-6">
+        Click any button to see the recording state with grey circle indicator
+      </p>
+    </div>
+  `,
+});
+
+LightVariantStates.story = {
+  name: 'Light - Variant States',
+};
+
+export const SideBySide = () => ({
+  components: { VoiceToTextButton },
+  template: `
+    <div class="tw-flex tw-min-h-[300px]">
+      <div class="tw-flex-1 tw-p-8 tw-flex tw-flex-col tw-items-center tw-justify-center" style="background: #1a1a2e;">
+        <h3 class="tw-text-white tw-text-lg tw-font-semibold tw-mb-6">Dark Variant</h3>
+        <div class="tw-flex tw-gap-4 tw-items-center">
+          <div class="tw-p-3 tw-bg-grayscale-800 tw-rounded-lg">
+            <VoiceToTextButton variant="dark" size="sm" />
+          </div>
+          <div class="tw-p-3 tw-bg-grayscale-800 tw-rounded-lg">
+            <VoiceToTextButton variant="dark" size="md" />
+          </div>
+          <div class="tw-p-3 tw-bg-grayscale-800 tw-rounded-lg">
+            <VoiceToTextButton variant="dark" size="lg" />
+          </div>
+        </div>
+      </div>
+
+      <div class="tw-flex-1 tw-p-8 tw-flex tw-flex-col tw-items-center tw-justify-center tw-bg-white">
+        <h3 class="tw-text-grayscale-800 tw-text-lg tw-font-semibold tw-mb-6">Light Variant</h3>
+        <div class="tw-flex tw-gap-4 tw-items-center">
+          <div class="tw-p-3 tw-bg-grayscale-100 tw-rounded-lg">
+            <VoiceToTextButton variant="light" size="sm" />
+          </div>
+          <div class="tw-p-3 tw-bg-grayscale-100 tw-rounded-lg">
+            <VoiceToTextButton variant="light" size="md" />
+          </div>
+          <div class="tw-p-3 tw-bg-grayscale-100 tw-rounded-lg">
+            <VoiceToTextButton variant="light" size="lg" />
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+SideBySide.story = {
+  name: 'Side by Side Comparison',
 };

package/src/atoms/components/VoiceToTextButton/VoiceToTextButton.vue

@@ -5,18 +5,21 @@
     :disabled="disabled"
     :aria-label="isListening ? 'Stop voice input' : 'Start voice input'"
     data-test="voice-to-text-button"
-    class="voice-prompt-button tw-rounded-full tw-border-2 tw-bg-transparent tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-200 tw-cursor-pointer focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-offset-2 focus:tw-ring-primary-500"
+    class="voice-prompt-button tw-rounded-full tw-border-0 tw-flex tw-items-center tw-justify-center tw-transition-all tw-duration-200 tw-cursor-pointer focus:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-offset-2 focus-visible:tw-ring-primary-500"
     :class="[
       sizeClasses,
-      isListening ? 'voice-prompt-listening tw-border-error-500' : 'tw-border-grayscale-400 hover:tw-border-grayscale-300',
+      variantClasses.button,
+      isListening ? 'voice-prompt-listening' : '',
       disabled ? 'tw-opacity-50 tw-cursor-not-allowed' : '',
     ]"
+    :style="isListening ? { '--voice-bg': variantClasses.recordingBg } : {}"
     @click="toggle"
   >
     <Icon
       name="microphone"
       :size="iconSize"
-      :class="isListening ? 'tw-text-error-500' : 'tw-text-grayscale-400'"
+      :class="variantClasses.icon"
+      aria-hidden="true"
     />
   </button>
 </template>
@@ -40,6 +43,11 @@ const props = defineProps({
     default: 'md',
     validator: (value) => ['sm', 'md', 'lg'].includes(value),
   },
+  variant: {
+    type: String,
+    default: 'dark',
+    validator: (value) => ['light', 'dark'].includes(value),
+  },
 });
 
 const sizeClasses = computed(() => {
@@ -66,6 +74,21 @@ const { isSupported, isListening, transcript, isFinal, error, toggle, setLang }
   lang: props.lang,
 });
 
+const variantClasses = computed(() => {
+  if (props.variant === 'light') {
+    return {
+      button: isListening.value ? '' : 'tw-bg-transparent hover:tw-bg-grayscale-200',
+      icon: isListening.value ? 'tw-text-grayscale-700' : 'tw-text-grayscale-600',
+      recordingBg: '#EDEDED',
+    };
+  }
+  return {
+    button: isListening.value ? '' : 'tw-bg-transparent hover:tw-bg-grayscale-700',
+    icon: isListening.value ? 'tw-text-white' : 'tw-text-grayscale-400',
+    recordingBg: '#606060',
+  };
+});
+
 // Keep recognition language in sync with prop
 watch(toRef(props, 'lang'), setLang);
 
@@ -106,16 +129,17 @@ watch(error, (newError) => {
 }
 
 .voice-prompt-listening {
-  animation: voice-ring-pulse 1.5s ease-in-out infinite;
+  background-color: var(--voice-bg);
+  animation: voice-bg-pulse 2s ease-in-out infinite;
 }
 
-@keyframes voice-ring-pulse {
+@keyframes voice-bg-pulse {
   0%,
   100% {
-    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+    opacity: 1;
   }
   50% {
-    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
+    opacity: 0.5;
   }
 }
 </style>

package/src/useVoiceToText.js

@@ -134,6 +134,7 @@ export function useVoiceToText(options = {}) {
   const stop = () => {
     if (!recognition || !isListening.value) return;
 
+    isListening.value = false;
     try {
       recognition.stop();
     } catch (e) {