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

package/public/css/tailwind-crazyDomains.css

@@ -1896,6 +1896,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(140 18 59 / var(--tw-text-opacity));
 }
+.theme-crazyDomains .tw-text-grayscale-400 {
+  --tw-text-opacity: 1;
+  color: rgb(235 238 243 / var(--tw-text-opacity));
+}
 .theme-crazyDomains .tw-text-grayscale-500 {
   --tw-text-opacity: 1;
   color: rgb(199 204 207 / var(--tw-text-opacity));
@@ -2049,6 +2053,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-crazyDomains .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-crazyDomains .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2076,6 +2085,10 @@ video {
 .theme-crazyDomains .tw-ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.theme-crazyDomains .hover\:tw-border-grayscale-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(240 240 245 / var(--tw-border-opacity));
+}
 .theme-crazyDomains .hover\:tw-border-grayscale-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(235 238 243 / var(--tw-border-opacity));
@@ -2240,6 +2253,18 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-crazyDomains .focus\:tw-ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.theme-crazyDomains .focus\:tw-ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(111 172 47 / var(--tw-ring-opacity));
+}
+.theme-crazyDomains .focus\:tw-ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
 .theme-crazyDomains .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(0 161 239 / var(--tw-text-opacity));

package/public/css/tailwind-designCom.css

@@ -1896,6 +1896,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(136 44 32 / var(--tw-text-opacity));
 }
+.theme-designCom .tw-text-grayscale-400 {
+  --tw-text-opacity: 1;
+  color: rgb(227 227 227 / var(--tw-text-opacity));
+}
 .theme-designCom .tw-text-grayscale-500 {
   --tw-text-opacity: 1;
   color: rgb(209 209 209 / var(--tw-text-opacity));
@@ -2049,6 +2053,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-designCom .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-designCom .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2076,6 +2085,10 @@ video {
 .theme-designCom .tw-ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.theme-designCom .hover\:tw-border-grayscale-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(237 237 237 / var(--tw-border-opacity));
+}
 .theme-designCom .hover\:tw-border-grayscale-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(227 227 227 / var(--tw-border-opacity));
@@ -2240,6 +2253,18 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-designCom .focus\:tw-ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.theme-designCom .focus\:tw-ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(63 89 246 / var(--tw-ring-opacity));
+}
+.theme-designCom .focus\:tw-ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
 .theme-designCom .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(63 89 246 / var(--tw-text-opacity));

package/public/css/tailwind-designCrowd.css

@@ -1896,6 +1896,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(146 38 36 / var(--tw-text-opacity));
 }
+.theme-designCrowd .tw-text-grayscale-400 {
+  --tw-text-opacity: 1;
+  color: rgb(230 230 230 / var(--tw-text-opacity));
+}
 .theme-designCrowd .tw-text-grayscale-500 {
   --tw-text-opacity: 1;
   color: rgb(204 204 204 / var(--tw-text-opacity));
@@ -2049,6 +2053,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-designCrowd .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-designCrowd .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2076,6 +2085,10 @@ video {
 .theme-designCrowd .tw-ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.theme-designCrowd .hover\:tw-border-grayscale-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 239 239 / var(--tw-border-opacity));
+}
 .theme-designCrowd .hover\:tw-border-grayscale-400:hover {
   --tw-border-opacity: 1;
   border-color: rgb(230 230 230 / var(--tw-border-opacity));
@@ -2240,6 +2253,18 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-designCrowd .focus\:tw-ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.theme-designCrowd .focus\:tw-ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(17 151 235 / var(--tw-ring-opacity));
+}
+.theme-designCrowd .focus\:tw-ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
 .theme-designCrowd .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(17 151 235 / var(--tw-text-opacity));

package/src/atoms/components/Modal/Modal.vue

@@ -1,7 +1,10 @@
 <template>
   <div
     v-show="visible"
+    role="dialog"
+    aria-modal="true"
     :aria-hidden="visible ? 'false' : 'true'"
+    :aria-label="ariaLabel"
     class="tw-bg-black tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50"
     :class="{
       'tw-px-4': fullScreenBreakpoint === undefined && !isImageMode,
@@ -47,6 +50,7 @@
           v-if="!mandatory"
           class="tw-absolute tw-right-0 tw-top-0 tw-border-none tw-text-secondary-500 tw-appearance-none tw-bg-transparent tw-p-0 tw-w-8 tw-h-8 tw-ml-auto tw-cursor-pointer"
           data-test-modal-close-btn
+          aria-label="Close"
           @click="close($event)"
         >
           <span class="tw-sr-only">Close modal</span>
@@ -161,6 +165,11 @@ export default {
       required: false,
       default: false,
     },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   computed: {
     isImageMode() {

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

@@ -1,18 +1,12 @@
 import VoiceToTextButton from './VoiceToTextButton.vue';
-import TextInput from '../TextInput/TextInput.vue';
 
 export default {
   title: 'Components/VoiceToTextButton',
   component: VoiceToTextButton,
 };
 
-export const Default = () => ({
+export const PromptInputDemo = () => ({
   components: { VoiceToTextButton },
-  template: '<VoiceToTextButton />',
-});
-
-export const WithTranscriptDisplay = () => ({
-  components: { VoiceToTextButton, TextInput },
   data() {
     return {
       transcript: '',
@@ -21,87 +15,91 @@ export const WithTranscriptDisplay = () => ({
     };
   },
   template: `
-    <div class="tw-flex tw-flex-col tw-gap-4 tw-max-w-md">
-      <div class="tw-flex tw-gap-2 tw-items-end">
-        <TextInput
+    <div class="tw-min-h-[400px] tw-p-8 tw-flex tw-flex-col tw-items-center tw-justify-center" style="background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);">
+      <h1 class="tw-text-white tw-text-3xl tw-font-bold tw-mb-2 tw-text-center">Design anything with AI</h1>
+      <p class="tw-text-grayscale-400 tw-mb-8 tw-text-center">Design a logo, a website, or anything else in seconds with the power of AI</p>
+
+      <div class="tw-w-full tw-max-w-xl tw-bg-grayscale-800 tw-rounded-full tw-px-6 tw-py-3 tw-flex tw-items-center tw-gap-3">
+        <input
           v-model="transcript"
-          label="Search"
-          placeholder="Click the mic and speak..."
-          class="tw-flex-1"
+          type="text"
+          placeholder="What would you like to design?"
+          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
+          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"
         />
+        <button class="tw-w-10 tw-h-10 tw-rounded-full tw-bg-secondary-500 tw-flex tw-items-center tw-justify-center tw-text-white hover:tw-bg-secondary-600 tw-transition-colors">
+          <svg xmlns="http://www.w3.org/2000/svg" class="tw-w-5 tw-h-5" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>
+        </button>
       </div>
-      <div class="tw-text-sm tw-text-grayscale-600">
-        <p v-if="isListening" class="tw-text-primary-500 tw-font-medium">
-          Listening... speak now
+
+      <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-500">
+        <p v-else-if="error" class="tw-text-error-400">
           {{ error }}
         </p>
-        <p v-else>
-          Click the microphone button to start voice input
-        </p>
       </div>
     </div>
   `,
 });
 
-WithTranscriptDisplay.story = {
-  name: 'Interactive Demo',
+PromptInputDemo.story = {
+  name: 'Prompt Input (Dark Theme)',
 };
 
-export const Disabled = () => ({
+export const PromptVariantStates = () => ({
   components: { VoiceToTextButton },
   template: `
-    <div class="tw-flex tw-gap-4 tw-items-center">
-      <div class="tw-text-center">
-        <VoiceToTextButton />
-        <p class="tw-text-xs tw-mt-2 tw-text-grayscale-600">Enabled</p>
-      </div>
-      <div class="tw-text-center">
-        <VoiceToTextButton :disabled="true" />
-        <p class="tw-text-xs tw-mt-2 tw-text-grayscale-600">Disabled</p>
-      </div>
-    </div>
-  `,
-});
+    <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>
 
-Disabled.story = {
-  name: 'Disabled State',
-};
+      <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" />
+          </div>
+          <p class="tw-text-grayscale-400 tw-text-xs">Small</p>
+        </div>
 
-export const LanguageVariants = () => ({
-  components: { VoiceToTextButton },
-  data() {
-    return {
-      languages: [
-        { code: 'en-US', name: 'English (US)' },
-        { code: 'de-DE', name: 'German' },
-        { code: 'fr-FR', name: 'French' },
-        { code: 'es-ES', name: 'Spanish' },
-      ],
-    };
-  },
-  template: `
-    <div class="tw-flex tw-flex-wrap tw-gap-4">
-      <div
-        v-for="lang in languages"
-        :key="lang.code"
-        class="tw-text-center tw-p-2 tw-border tw-border-grayscale-300 tw-rounded"
-      >
-        <VoiceToTextButton :lang="lang.code" />
-        <p class="tw-text-xs tw-mt-2">{{ lang.name }}</p>
+        <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" />
+          </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" />
+          </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" />
+          </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
+      </p>
     </div>
   `,
 });
 
-LanguageVariants.story = {
-  name: 'Language Variants',
+PromptVariantStates.story = {
+  name: 'Prompt Variant States',
 };

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

@@ -1,19 +1,29 @@
 <template>
-  <Button
+  <button
     v-if="isSupported"
-    icon="microphone"
+    type="button"
     :disabled="disabled"
-    variant="outline"
-    :class="{ 'voice-listening': isListening }"
     :aria-label="isListening ? 'Stop voice input' : 'Start voice input'"
     data-test="voice-to-text-button"
-    @on-click="toggle"
-  />
+    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="[
+      sizeClasses,
+      isListening ? 'voice-prompt-listening tw-border-error-500' : 'tw-border-grayscale-400 hover:tw-border-grayscale-300',
+      disabled ? 'tw-opacity-50 tw-cursor-not-allowed' : '',
+    ]"
+    @click="toggle"
+  >
+    <Icon
+      name="microphone"
+      :size="iconSize"
+      :class="isListening ? 'tw-text-error-500' : 'tw-text-grayscale-400'"
+    />
+  </button>
 </template>
 
 <script setup>
-import { watch, toRef } from 'vue';
-import Button from '../Button/Button.vue';
+import { watch, toRef, computed } from 'vue';
+import Icon from '../Icon/Icon.vue';
 import { useVoiceToText } from '../../../useVoiceToText';
 
 const props = defineProps({
@@ -25,6 +35,29 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (value) => ['sm', 'md', 'lg'].includes(value),
+  },
+});
+
+const sizeClasses = computed(() => {
+  const sizes = {
+    sm: 'tw-w-8 tw-h-8',
+    md: 'tw-w-10 tw-h-10',
+    lg: 'tw-w-12 tw-h-12',
+  };
+  return sizes[props.size];
+});
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'md',
+  };
+  return sizes[props.size];
 });
 
 const emit = defineEmits(['on-transcript', 'on-interim-transcript', 'on-start', 'on-stop', 'on-error']);
@@ -68,17 +101,21 @@ watch(error, (newError) => {
 </script>
 
 <style scoped>
-.voice-listening {
-  animation: voice-pulse 1.5s ease-in-out infinite;
+.voice-prompt-button {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.voice-prompt-listening {
+  animation: voice-ring-pulse 1.5s ease-in-out infinite;
 }
 
-@keyframes voice-pulse {
+@keyframes voice-ring-pulse {
   0%,
   100% {
-    box-shadow: 0 0 0 0 var(--color-primary, rgba(242, 27, 63, 0.4));
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
   }
   50% {
-    box-shadow: 0 0 0 8px transparent;
+    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
   }
 }
 </style>