aural-ui 3.0.6 → 4.0.1

package/dist/components/char-count/CharCount.stories.tsx

@@ -161,7 +161,7 @@ export const WithTextarea: Story = {
           <textarea
             value={text}
             onChange={(e) => setText(e.target.value)}
-            className="w-full resize-none rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+            className="border-fm-divider-secondary w-full resize-none rounded-md border px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
             placeholder="What's happening?"
             rows={4}
             aria-describedby="tweet-count"
@@ -194,12 +194,12 @@ export const WithInput: Story = {
             type="text"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
-            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+            className="border-fm-divider-secondary w-full rounded-md border px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
             placeholder="Enter username"
             aria-describedby="username-count"
           />
           <div className="mt-2 flex items-center justify-between">
-            <span className="text-sm text-gray-500">
+            <span className="text-fm-secondary text-sm">
               Must be unique and memorable
             </span>
             <CharCount
@@ -230,7 +230,7 @@ export const MultipleInputs: Story = {
             type="text"
             value={title}
             onChange={(e) => setTitle(e.target.value)}
-            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+            className="border-fm-divider-secondary w-full rounded-md border px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
             placeholder="Enter post title"
             aria-describedby="title-count"
           />
@@ -248,7 +248,7 @@ export const MultipleInputs: Story = {
           <textarea
             value={description}
             onChange={(e) => setDescription(e.target.value)}
-            className="w-full resize-none rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+            className="border-fm-divider-secondary w-full resize-none rounded-md border px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
             placeholder="Describe your post"
             rows={3}
             aria-describedby="description-count"
@@ -270,12 +270,12 @@ export const MultipleInputs: Story = {
             type="text"
             value={tags}
             onChange={(e) => setTags(e.target.value)}
-            className="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+            className="border-fm-divider-secondary w-full rounded-md border px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
             placeholder="react, typescript, ui"
             aria-describedby="tags-count"
           />
           <div className="mt-1 flex items-center justify-between">
-            <span className="text-xs text-gray-500">
+            <span className="text-fm-secondary text-xs">
               Separate tags with commas
             </span>
             <CharCount
@@ -313,7 +313,7 @@ export const AccessibilityExample: Story = {
             className={`w-full resize-none rounded-md border px-3 py-2 focus:ring-2 focus:outline-none ${
               isOverLimit
                 ? "border-red-300 focus:ring-red-500"
-                : "border-gray-300 focus:ring-blue-500"
+                : "border-fm-divider-secondary focus:ring-blue-500"
             }`}
             placeholder="Enter your message"
             rows={4}
@@ -322,7 +322,7 @@ export const AccessibilityExample: Story = {
             required
           />
           <div className="mt-2 flex items-start justify-between">
-            <div id="message-help" className="text-sm text-gray-500">
+            <div id="message-help" className="text-fm-secondary text-sm">
               {isOverLimit
                 ? "Message is too long. Please shorten it."
                 : "Share your thoughts with the community."}

package/dist/components/circular-loader/CircularLoader.stories.tsx

@@ -174,7 +174,7 @@ export const Default: Story = {
   },
   parameters: storyParameters,
   render: (args) => (
-    <div className="flex h-32 items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 text-white">
+    <div className="bg-fm-surface-primary flex h-32 items-center justify-center rounded-lg p-8">
       <CircularLoader {...args} />
     </div>
   ),
@@ -192,46 +192,48 @@ export const Variants: Story = {
     },
   },
   render: () => (
-    <div className="space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 text-white">
+    <div className="bg-fm-surface-primary space-y-8 rounded-lg p-8">
       <div className="text-center">
-        <h3 className="mb-4 text-xl font-bold text-white">Spinner Variants</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-4 text-xl font-bold">
+          Spinner Variants
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Three distinct visual styles with full accessibility support
         </p>
       </div>
 
       <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
         <div className="text-center">
-          <div className="mb-4 flex h-32 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-32 items-center justify-center rounded-lg border">
             <CircularLoader variant="v1" text="Gradient" size="lg" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Variant V1</div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-primary font-medium">Variant V1</div>
+            <div className="text-fm-secondary text-xs">
               Gradient spinner with smooth transitions
             </div>
           </div>
         </div>
 
         <div className="text-center">
-          <div className="mb-4 flex h-32 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-32 items-center justify-center rounded-lg border">
             <CircularLoader variant="v2" text="Solid" size="lg" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Variant V2</div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-primary font-medium">Variant V2</div>
+            <div className="text-fm-secondary text-xs">
               Solid spinner with consistent theming
             </div>
           </div>
         </div>
 
         <div className="text-center">
-          <div className="mb-4 flex h-32 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-32 items-center justify-center rounded-lg border">
             <CircularLoader variant="v3" text="Neutral" size="lg" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Variant V3</div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-primary font-medium">Variant V3</div>
+            <div className="text-fm-secondary text-xs">
               Neutral spinner for any theme
             </div>
           </div>
@@ -253,56 +255,62 @@ export const Sizes: Story = {
     },
   },
   render: () => (
-    <div className="space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 text-white">
+    <div className="bg-fm-surface-primary space-y-8 rounded-lg p-8">
       <div className="text-center">
-        <h3 className="mb-4 text-xl font-bold text-white">Size Variations</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-4 text-xl font-bold">
+          Size Variations
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Four predefined sizes for different contexts and use cases
         </p>
       </div>
 
       <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
         <div className="text-center">
-          <div className="mb-4 flex h-24 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-24 items-center justify-center rounded-lg border">
             <CircularLoader size="sm" text="Small" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Small</div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-primary font-medium">Small</div>
+            <div className="text-fm-secondary text-xs">
               16×16px - Inline elements
             </div>
           </div>
         </div>
 
         <div className="text-center">
-          <div className="mb-4 flex h-24 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-24 items-center justify-center rounded-lg border">
             <CircularLoader size="md" text="Medium" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Medium</div>
-            <div className="text-xs text-white/60">24×24px - Default size</div>
+            <div className="text-fm-primary font-medium">Medium</div>
+            <div className="text-fm-secondary text-xs">
+              24×24px - Default size
+            </div>
           </div>
         </div>
 
         <div className="text-center">
-          <div className="mb-4 flex h-24 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-24 items-center justify-center rounded-lg border">
             <CircularLoader size="lg" text="Large" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Large</div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-primary font-medium">Large</div>
+            <div className="text-fm-secondary text-xs">
               32×32px - Prominent loading
             </div>
           </div>
         </div>
 
         <div className="text-center">
-          <div className="mb-4 flex h-24 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-24 items-center justify-center rounded-lg border">
             <CircularLoader size="xl" text="Extra Large" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Extra Large</div>
-            <div className="text-xs text-white/60">48×48px - Page loading</div>
+            <div className="text-fm-primary font-medium">Extra Large</div>
+            <div className="text-fm-secondary text-xs">
+              48×48px - Page loading
+            </div>
           </div>
         </div>
       </div>
@@ -322,32 +330,32 @@ export const AccessibilityFeatures: Story = {
     },
   },
   render: () => (
-    <div className="space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 text-white">
+    <div className="bg-fm-surface-primary space-y-8 rounded-lg p-8">
       <div className="text-center">
-        <h3 className="mb-4 text-xl font-bold text-white">
+        <h3 className="text-fm-primary mb-4 text-xl font-bold">
           Accessibility Features
         </h3>
-        <p className="text-sm text-white/60">
+        <p className="text-fm-secondary text-sm">
           Built with comprehensive screen reader support and ARIA attributes
         </p>
       </div>
 
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
         <div className="space-y-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h4 className="mb-4 text-lg font-semibold text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h4 className="text-fm-primary mb-4 text-lg font-semibold">
               Visual + Screen Reader
             </h4>
             <div className="mb-4 flex items-center justify-center">
               <CircularLoader text="Loading data..." size="lg" />
             </div>
-            <div className="text-sm text-white/70">
+            <div className="text-fm-secondary text-sm">
               Shows visible text and provides the same message to screen readers
             </div>
           </div>
 
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h4 className="mb-4 text-lg font-semibold text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h4 className="text-fm-primary mb-4 text-lg font-semibold">
               Screen Reader Only
             </h4>
             <div className="mb-4 flex items-center justify-center">
@@ -356,15 +364,15 @@ export const AccessibilityFeatures: Story = {
                 size="lg"
               />
             </div>
-            <div className="text-sm text-white/70">
+            <div className="text-fm-secondary text-sm">
               No visible text but provides descriptive label for screen readers
             </div>
           </div>
         </div>
 
         <div className="space-y-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h4 className="mb-4 text-lg font-semibold text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h4 className="text-fm-primary mb-4 text-lg font-semibold">
               Custom Loading Message
             </h4>
             <div className="mb-4 flex items-center justify-center">
@@ -374,13 +382,13 @@ export const AccessibilityFeatures: Story = {
                 size="lg"
               />
             </div>
-            <div className="text-sm text-white/70">
+            <div className="text-fm-secondary text-sm">
               Visual text differs from detailed screen reader message
             </div>
           </div>
 
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h4 className="mb-4 text-lg font-semibold text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h4 className="text-fm-primary mb-4 text-lg font-semibold">
               Assertive Announcements
             </h4>
             <div className="mb-4 flex items-center justify-center">
@@ -390,23 +398,21 @@ export const AccessibilityFeatures: Story = {
                 size="lg"
               />
             </div>
-            <div className="text-sm text-white/70">
+            <div className="text-fm-secondary text-sm">
               Immediately announces changes to screen readers
             </div>
           </div>
         </div>
       </div>
 
-      <div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-6">
-        <h4 className="mb-4 text-lg font-semibold text-blue-200">
+      <div className="border-fm-divider-secondary bg-fm-surface-info-sec rounded-lg border p-6">
+        <h4 className="text-fm-info mb-4 text-lg font-semibold">
           Accessibility Best Practices
         </h4>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div>
-            <h5 className="mb-2 font-medium text-blue-200">
-              Built-in Features
-            </h5>
-            <ul className="space-y-1 text-sm text-blue-200/80">
+            <h5 className="text-fm-info mb-2 font-medium">Built-in Features</h5>
+            <ul className="text-fm-info-sec space-y-1 text-sm">
               <li>• Role="status" for loading states</li>
               <li>• ARIA-live regions for dynamic updates</li>
               <li>• ARIA-hidden on decorative elements</li>
@@ -415,8 +421,8 @@ export const AccessibilityFeatures: Story = {
             </ul>
           </div>
           <div>
-            <h5 className="mb-2 font-medium text-blue-200">Usage Guidelines</h5>
-            <ul className="space-y-1 text-sm text-blue-200/80">
+            <h5 className="text-fm-info mb-2 font-medium">Usage Guidelines</h5>
+            <ul className="text-fm-info-sec space-y-1 text-sm">
               <li>• Always provide context about what's loading</li>
               <li>• Use "polite" for non-critical updates</li>
               <li>• Use "assertive" for important changes</li>
@@ -462,12 +468,12 @@ export const UsageExamples: Story = {
     }
 
     return (
-      <div className="space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 text-white">
+      <div className="bg-fm-surface-primary space-y-8 rounded-lg p-8">
         <div className="text-center">
-          <h3 className="mb-4 text-xl font-bold text-white">
+          <h3 className="text-fm-primary mb-4 text-xl font-bold">
             Real-world Usage
           </h3>
-          <p className="text-sm text-white/60">
+          <p className="text-fm-secondary text-sm">
             Common UI patterns and contexts where CircularLoader is used
           </p>
         </div>
@@ -475,7 +481,9 @@ export const UsageExamples: Story = {
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
           {/* Button Loading */}
           <div className="space-y-4">
-            <h4 className="text-lg font-semibold text-white">Button Loading</h4>
+            <h4 className="text-fm-primary text-lg font-semibold">
+              Button Loading
+            </h4>
             <div className="space-y-3">
               <Button
                 onClick={handleButtonClick}
@@ -491,7 +499,7 @@ export const UsageExamples: Story = {
                   "Save Changes"
                 )}
               </Button>
-              <div className="text-xs text-white/60">
+              <div className="text-fm-secondary text-xs">
                 Inline loader in button with accessible label
               </div>
             </div>
@@ -499,8 +507,10 @@ export const UsageExamples: Story = {
 
           {/* Card Loading */}
           <div className="space-y-4">
-            <h4 className="text-lg font-semibold text-white">Card Loading</h4>
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
+            <h4 className="text-fm-primary text-lg font-semibold">
+              Card Loading
+            </h4>
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
               {cardLoading ? (
                 <div className="flex h-32 items-center justify-center">
                   <CircularLoader
@@ -511,9 +521,9 @@ export const UsageExamples: Story = {
                 </div>
               ) : (
                 <div className="space-y-3">
-                  <div className="h-4 rounded bg-white/10"></div>
-                  <div className="h-4 rounded bg-white/10"></div>
-                  <div className="h-4 w-3/4 rounded bg-white/10"></div>
+                  <div className="bg-fm-surface-tertiary h-4 rounded"></div>
+                  <div className="bg-fm-surface-tertiary h-4 rounded"></div>
+                  <div className="bg-fm-surface-tertiary h-4 w-3/4 rounded"></div>
                   <Button
                     onClick={handleCardRefresh}
                     size="sm"
@@ -524,15 +534,17 @@ export const UsageExamples: Story = {
                 </div>
               )}
             </div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-secondary text-xs">
               Content area with detailed loading message
             </div>
           </div>
 
           {/* Page Loading */}
           <div className="space-y-4">
-            <h4 className="text-lg font-semibold text-white">Page Loading</h4>
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
+            <h4 className="text-fm-primary text-lg font-semibold">
+              Page Loading
+            </h4>
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
               {pageLoading ? (
                 <div className="flex h-32 items-center justify-center">
                   <CircularLoader
@@ -545,7 +557,7 @@ export const UsageExamples: Story = {
               ) : (
                 <div className="space-y-3">
                   <div className="text-center">
-                    <div className="mb-2 text-sm font-medium text-white">
+                    <div className="text-fm-primary mb-2 text-sm font-medium">
                       Application Ready
                     </div>
                     <Button
@@ -559,15 +571,15 @@ export const UsageExamples: Story = {
                 </div>
               )}
             </div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-secondary text-xs">
               Full page loading with assertive announcements
             </div>
           </div>
         </div>
 
         {/* Form Submission Example */}
-        <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-          <h4 className="mb-4 text-lg font-semibold text-white">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+          <h4 className="text-fm-primary mb-4 text-lg font-semibold">
             Form Submission
           </h4>
           <div className="space-y-4">
@@ -575,23 +587,23 @@ export const UsageExamples: Story = {
               <input
                 type="text"
                 placeholder="Name"
-                className="rounded-lg border border-white/20 bg-white/10 p-3 text-white placeholder-white/50"
+                className="border-fm-divider-secondary bg-fm-surface-tertiary text-fm-primary placeholder:text-fm-tertiary rounded-lg border p-3"
               />
               <input
                 type="email"
                 placeholder="Email"
-                className="rounded-lg border border-white/20 bg-white/10 p-3 text-white placeholder-white/50"
+                className="border-fm-divider-secondary bg-fm-surface-tertiary text-fm-primary placeholder:text-fm-tertiary rounded-lg border p-3"
               />
             </div>
             <textarea
               placeholder="Message"
               rows={3}
-              className="w-full rounded-lg border border-white/20 bg-white/10 p-3 text-white placeholder-white/50"
+              className="border-fm-divider-secondary bg-fm-surface-tertiary text-fm-primary placeholder:text-fm-tertiary w-full rounded-lg border p-3"
             />
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <CircularLoader size="sm" aria-label="Submitting form" />
-                <span className="text-sm text-white/70">
+                <span className="text-fm-secondary text-sm">
                   Submitting your message...
                 </span>
               </div>
@@ -664,60 +676,64 @@ export const Playground: Story = {
     },
   },
   render: (args) => (
-    <div className="space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 text-white">
+    <div className="bg-fm-surface-primary space-y-8 rounded-lg p-8">
       <div className="text-center">
-        <h3 className="mb-4 text-xl font-bold text-white">
+        <h3 className="text-fm-primary mb-4 text-xl font-bold">
           Interactive Playground
         </h3>
-        <p className="text-sm text-white/60">
+        <p className="text-fm-secondary text-sm">
           Experiment with all CircularLoader configurations and accessibility
           features
         </p>
       </div>
 
       <div className="flex items-center justify-center">
-        <div className="rounded-lg border border-white/10 bg-white/5 p-8">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-8">
           <CircularLoader {...args} />
         </div>
       </div>
 
-      <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-        <h4 className="mb-4 text-lg font-semibold text-white">
+      <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+        <h4 className="text-fm-primary mb-4 text-lg font-semibold">
           Current Configuration
         </h4>
         <div className="grid grid-cols-2 gap-4 text-sm">
           <div>
-            <div className="font-medium text-white">Variant:</div>
-            <div className="text-white/70">{args.variant}</div>
+            <div className="text-fm-primary font-medium">Variant:</div>
+            <div className="text-fm-secondary">{args.variant}</div>
           </div>
           <div>
-            <div className="font-medium text-white">Size:</div>
-            <div className="text-white/70">{args.size}</div>
+            <div className="text-fm-primary font-medium">Size:</div>
+            <div className="text-fm-secondary">{args.size}</div>
           </div>
           <div>
-            <div className="font-medium text-white">Visual Text:</div>
-            <div className="text-white/70">{args.text || "None"}</div>
+            <div className="text-fm-primary font-medium">Visual Text:</div>
+            <div className="text-fm-secondary">{args.text || "None"}</div>
           </div>
           <div>
-            <div className="font-medium text-white">ARIA Label:</div>
-            <div className="text-white/70">{args["aria-label"] || "None"}</div>
+            <div className="text-fm-primary font-medium">ARIA Label:</div>
+            <div className="text-fm-secondary">
+              {args["aria-label"] || "None"}
+            </div>
           </div>
           <div>
-            <div className="font-medium text-white">ARIA Live:</div>
-            <div className="text-white/70">{args["aria-live"]}</div>
+            <div className="text-fm-primary font-medium">ARIA Live:</div>
+            <div className="text-fm-secondary">{args["aria-live"]}</div>
           </div>
           <div>
-            <div className="font-medium text-white">Loading Message:</div>
-            <div className="text-white/70">{args.loadingMessage || "None"}</div>
+            <div className="text-fm-primary font-medium">Loading Message:</div>
+            <div className="text-fm-secondary">
+              {args.loadingMessage || "None"}
+            </div>
           </div>
         </div>
       </div>
 
-      <div className="rounded-lg border border-green-500/20 bg-green-500/10 p-6">
-        <h4 className="mb-4 text-lg font-semibold text-green-200">
+      <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border p-6">
+        <h4 className="text-fm-positive mb-4 text-lg font-semibold">
           Accessibility Info
         </h4>
-        <div className="space-y-2 text-sm text-green-200/80">
+        <div className="text-fm-positive-sec space-y-2 text-sm">
           <div>
             <strong>Screen Reader Message:</strong>{" "}
             {args.text ||

package/dist/components/clamp-lines/ClampLines.stories.tsx

@@ -1,7 +1,9 @@
 import React from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
+import { toast } from "sonner"
 
 import { ClampLines } from "."
+import { Toaster } from "../toast"
 
 const LONG_TEXT =
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
@@ -108,6 +110,29 @@ export const WithCustomButton: Story = {
   },
 }
 
+export const WithOnToggle: Story = {
+  name: "With onToggle (Toast)",
+  args: {
+    children: LONG_TEXT,
+    wordLimit: 20,
+    onToggle: (open) => {
+      toast(open ? "Expanded" : "Collapsed", {
+        description: open
+          ? "Full text is now visible."
+          : "Text has been collapsed.",
+      })
+    },
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+        <Toaster />
+      </>
+    ),
+  ],
+}
+
 export const ShortText: Story = {
   name: "Short Text (no truncation)",
   args: {

package/dist/components/clamp-lines/index.tsx

@@ -17,6 +17,7 @@ export interface IClampLinesProps {
   minWordLimit?: number
   readMoreText?: string
   readLessText?: string
+  onToggle?: (open: boolean) => void
 }
 
 export const ClampLines = ({
@@ -28,6 +29,7 @@ export const ClampLines = ({
   minWordLimit,
   readMoreText = "READ MORE",
   readLessText = "READ LESS",
+  onToggle,
 }: IClampLinesProps) => {
   const [open, setOpen] = useState(false)
   const ref = useRef<HTMLParagraphElement | null>(null)
@@ -112,11 +114,14 @@ export const ClampLines = ({
   }, [shouldTruncate, effectiveWordLimit, children, open])
 
   const handleClick = () => {
-    setOpen((prev) => !prev)
+    const next = !open
+    setOpen(next)
+    onToggle?.(next)
   }
 
   const renderButton = !button ? (
     <Button
+      data-nosnippet
       variant="text"
       noise="none"
       innerClassName={cn("px-0! h-fit inline", classes.clampLineBtnInnerClass)}

package/dist/components/collapsible/Collapsible.stories.tsx

@@ -203,7 +203,7 @@ export const RichContent: Story = {
             </div>
             <div>
               <h4 className="mb-2 font-semibold">Pricing:</h4>
-              <div className="rounded bg-gray-50 p-3">
+              <div className="bg-fm-surface-secondary rounded p-3">
                 <p className="text-sm">Starting at $29/month for basic plan</p>
               </div>
             </div>