aural-ui 3.0.6 → 4.0.1

package/dist/components/otp-inputs/OtpInputs.stories.tsx

@@ -136,7 +136,7 @@ export const Interactive: Story = {
     return (
       <div className="space-y-4">
         <OtpInputs length={6} onChangeOTP={setOtpValue} />
-        <p className="text-sm text-gray-600">
+        <p className="text-fm-secondary text-sm">
           Current OTP: {otpValue || "Empty"}
         </p>
       </div>
@@ -190,10 +190,10 @@ export const AllVariants: Story = {
     return (
       <div className="max-w-4xl space-y-8 p-6">
         <div className="space-y-2">
-          <h2 className="text-2xl font-bold text-white">
+          <h2 className="text-fm-primary text-2xl font-bold">
             OTP Input - All Variants
           </h2>
-          <p className="text-gray-400">
+          <p className="text-fm-secondary">
             Comprehensive showcase of all OTP input configurations, states, and
             use cases.
           </p>
@@ -201,11 +201,13 @@ export const AllVariants: Story = {
 
         {/* Basic Length Variants */}
         <div className="space-y-4">
-          <h3 className="text-xl font-semibold text-white">Length Variants</h3>
+          <h3 className="text-fm-primary text-xl font-semibold">
+            Length Variants
+          </h3>
 
           <div className="space-y-3">
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-300">
+              <label className="text-fm-secondary mb-2 block text-sm font-medium">
                 4-Digit OTP (Common for SMS)
               </label>
               <OtpInputs
@@ -213,13 +215,13 @@ export const AllVariants: Story = {
                 isNumberInput={true}
                 onChangeOTP={setOtp4}
               />
-              <p className="mt-1 text-xs text-gray-500">
+              <p className="text-fm-tertiary mt-1 text-xs">
                 Current: {otp4 || "Empty"}
               </p>
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-300">
+              <label className="text-fm-secondary mb-2 block text-sm font-medium">
                 6-Digit OTP (Standard)
               </label>
               <OtpInputs
@@ -227,13 +229,13 @@ export const AllVariants: Story = {
                 isNumberInput={true}
                 onChangeOTP={setOtp6}
               />
-              <p className="mt-1 text-xs text-gray-500">
+              <p className="text-fm-tertiary mt-1 text-xs">
                 Current: {otp6 || "Empty"}
               </p>
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-300">
+              <label className="text-fm-secondary mb-2 block text-sm font-medium">
                 8-Digit OTP (Extended Security)
               </label>
               <OtpInputs
@@ -241,7 +243,7 @@ export const AllVariants: Story = {
                 isNumberInput={true}
                 onChangeOTP={setOtp8}
               />
-              <p className="mt-1 text-xs text-gray-500">
+              <p className="text-fm-tertiary mt-1 text-xs">
                 Current: {otp8 || "Empty"}
               </p>
             </div>
@@ -250,13 +252,13 @@ export const AllVariants: Story = {
 
         {/* Input Type Variants */}
         <div className="space-y-4">
-          <h3 className="text-xl font-semibold text-white">
+          <h3 className="text-fm-primary text-xl font-semibold">
             Input Type Variants
           </h3>
 
           <div className="space-y-3">
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-300">
+              <label className="text-fm-secondary mb-2 block text-sm font-medium">
                 Numeric Only (Default)
               </label>
               <OtpInputs
@@ -264,13 +266,13 @@ export const AllVariants: Story = {
                 isNumberInput={true}
                 onChangeOTP={(otp) => console.log("Numeric OTP:", otp)}
               />
-              <p className="mt-1 text-xs text-gray-500">
+              <p className="text-fm-tertiary mt-1 text-xs">
                 Accepts only numbers (0-9)
               </p>
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-300">
+              <label className="text-fm-secondary mb-2 block text-sm font-medium">
                 Alphanumeric (Letters + Numbers)
               </label>
               <OtpInputs
@@ -278,7 +280,7 @@ export const AllVariants: Story = {
                 isNumberInput={false}
                 onChangeOTP={setAlphanumericOtp}
               />
-              <p className="mt-1 text-xs text-gray-500">
+              <p className="text-fm-tertiary mt-1 text-xs">
                 Current: {alphanumericOtp || "Empty"} | Accepts letters and
                 numbers
               </p>
@@ -288,11 +290,13 @@ export const AllVariants: Story = {
 
         {/* State Variants */}
         <div className="space-y-4">
-          <h3 className="text-xl font-semibold text-white">State Variants</h3>
+          <h3 className="text-fm-primary text-xl font-semibold">
+            State Variants
+          </h3>
 
           <div className="space-y-3">
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-300">
+              <label className="text-fm-secondary mb-2 block text-sm font-medium">
                 Enabled State (Default)
               </label>
               <OtpInputs
@@ -303,7 +307,7 @@ export const AllVariants: Story = {
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-300">
+              <label className="text-fm-secondary mb-2 block text-sm font-medium">
                 Disabled State
               </label>
               <OtpInputs
@@ -318,13 +322,13 @@ export const AllVariants: Story = {
 
         {/* Validation States */}
         <div className="space-y-4">
-          <h3 className="text-xl font-semibold text-white">
+          <h3 className="text-fm-primary text-xl font-semibold">
             Validation States
           </h3>
 
           <div className="space-y-3">
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-300">
+              <label className="text-fm-secondary mb-2 block text-sm font-medium">
                 Neutral State (No validation)
               </label>
               <OtpInputs
@@ -339,7 +343,7 @@ export const AllVariants: Story = {
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-300">
+              <label className="text-fm-secondary mb-2 block text-sm font-medium">
                 Success State (Valid OTP)
               </label>
               <OtpInputs
@@ -354,7 +358,7 @@ export const AllVariants: Story = {
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-300">
+              <label className="text-fm-secondary mb-2 block text-sm font-medium">
                 Error State (Invalid OTP)
               </label>
               <OtpInputs
@@ -369,7 +373,7 @@ export const AllVariants: Story = {
             </div>
 
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-300">
+              <label className="text-fm-secondary mb-2 block text-sm font-medium">
                 Interactive Validation (Try: 123456)
               </label>
               <OtpInputs
@@ -383,7 +387,7 @@ export const AllVariants: Story = {
                   error: "✗ Invalid code. Try: 123456",
                 }}
               />
-              <p className="mt-1 text-xs text-gray-500">
+              <p className="text-fm-tertiary mt-1 text-xs">
                 Current: {validatedOtp || "Empty"} | Status:{" "}
                 {isValid === null
                   ? "Neutral"
@@ -397,11 +401,13 @@ export const AllVariants: Story = {
 
         {/* Custom Styling Examples */}
         <div className="space-y-4">
-          <h3 className="text-xl font-semibold text-white">Custom Styling</h3>
+          <h3 className="text-fm-primary text-xl font-semibold">
+            Custom Styling
+          </h3>
 
           <div className="space-y-3">
             <div>
-              <label className="mb-2 block text-sm font-medium text-gray-300">
+              <label className="text-fm-secondary mb-2 block text-sm font-medium">
                 Custom Input Styling
               </label>
               <OtpInputs
@@ -421,11 +427,15 @@ export const AllVariants: Story = {
 
         {/* Usage Examples */}
         <div className="space-y-4">
-          <h3 className="text-xl font-semibold text-white">Common Use Cases</h3>
+          <h3 className="text-fm-primary text-xl font-semibold">
+            Common Use Cases
+          </h3>
 
           <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-            <div className="rounded-lg bg-gray-800 p-4">
-              <h4 className="mb-2 font-medium text-white">SMS Verification</h4>
+            <div className="bg-fm-surface-secondary rounded-lg p-4">
+              <h4 className="text-fm-primary mb-2 font-medium">
+                SMS Verification
+              </h4>
               <OtpInputs
                 length={4}
                 isNumberInput={true}
@@ -436,8 +446,8 @@ export const AllVariants: Story = {
               />
             </div>
 
-            <div className="rounded-lg bg-gray-800 p-4">
-              <h4 className="mb-2 font-medium text-white">
+            <div className="bg-fm-surface-secondary rounded-lg p-4">
+              <h4 className="text-fm-primary mb-2 font-medium">
                 Email Verification
               </h4>
               <OtpInputs
@@ -450,8 +460,8 @@ export const AllVariants: Story = {
               />
             </div>
 
-            <div className="rounded-lg bg-gray-800 p-4">
-              <h4 className="mb-2 font-medium text-white">
+            <div className="bg-fm-surface-secondary rounded-lg p-4">
+              <h4 className="text-fm-primary mb-2 font-medium">
                 2FA Authentication
               </h4>
               <OtpInputs
@@ -464,8 +474,10 @@ export const AllVariants: Story = {
               />
             </div>
 
-            <div className="rounded-lg bg-gray-800 p-4">
-              <h4 className="mb-2 font-medium text-white">Alphanumeric Code</h4>
+            <div className="bg-fm-surface-secondary rounded-lg p-4">
+              <h4 className="text-fm-primary mb-2 font-medium">
+                Alphanumeric Code
+              </h4>
               <OtpInputs
                 length={6}
                 isNumberInput={false}