aural-ui 3.0.6 → 4.0.1

package/dist/components/search/Search.stories.tsx

@@ -90,8 +90,10 @@ export const BasicSearch: Story = {
   render: () => (
     <div className="space-y-6">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Basic Search Component</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">
+          Basic Search Component
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Simple search input with different placeholder examples
         </p>
       </div>
@@ -99,13 +101,15 @@ export const BasicSearch: Story = {
       <div className="space-y-4">
         {/* Default Placeholder */}
         <div className="space-y-2">
-          <label className="text-sm font-medium text-white/80">Default</label>
+          <label className="text-fm-tertiary text-sm font-medium">
+            Default
+          </label>
           <Search placeholder="Search episodes" />
         </div>
 
         {/* Custom Placeholders */}
         <div className="space-y-2">
-          <label className="text-sm font-medium text-white/80">
+          <label className="text-fm-tertiary text-sm font-medium">
             Custom Placeholders
           </label>
           <div className="space-y-3">
@@ -117,7 +121,7 @@ export const BasicSearch: Story = {
 
         {/* With Initial Value */}
         <div className="space-y-2">
-          <label className="text-sm font-medium text-white/80">
+          <label className="text-fm-tertiary text-sm font-medium">
             With Initial Value
           </label>
           <Search placeholder="Search episodes" initialValue="The Daily" />
@@ -145,8 +149,10 @@ export const ControlledSearch: Story = {
     return (
       <div className="space-y-6">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Controlled Search</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary mb-2 font-medium">
+            Controlled Search
+          </h3>
+          <p className="text-fm-secondary text-sm">
             Search components with external state control
           </p>
         </div>
@@ -155,10 +161,10 @@ export const ControlledSearch: Story = {
           {/* Basic Controlled */}
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <label className="text-sm font-medium text-white/80">
+              <label className="text-fm-tertiary text-sm font-medium">
                 Basic Controlled
               </label>
-              <div className="text-xs text-white/60">
+              <div className="text-fm-secondary text-xs">
                 Value: "{searchValue1}"
               </div>
             </div>
@@ -188,10 +194,10 @@ export const ControlledSearch: Story = {
           {/* Pre-filled Controlled */}
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <label className="text-sm font-medium text-white/80">
+              <label className="text-fm-tertiary text-sm font-medium">
                 Pre-filled Controlled
               </label>
-              <div className="text-xs text-white/60">
+              <div className="text-fm-secondary text-xs">
                 Value: "{searchValue2}"
               </div>
             </div>
@@ -205,10 +211,10 @@ export const ControlledSearch: Story = {
           {/* Controlled with Validation */}
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <label className="text-sm font-medium text-white/80">
+              <label className="text-fm-tertiary text-sm font-medium">
                 With Validation
               </label>
-              <div className="text-xs text-white/60">
+              <div className="text-fm-secondary text-xs">
                 Length: {searchValue3.length}/20
               </div>
             </div>
@@ -222,7 +228,7 @@ export const ControlledSearch: Story = {
               }}
             />
             {searchValue3.length >= 20 && (
-              <p className="text-xs text-red-400">Maximum length reached</p>
+              <p className="text-fm-negative text-xs">Maximum length reached</p>
             )}
           </div>
         </div>
@@ -248,8 +254,10 @@ export const UncontrolledSearch: Story = {
     return (
       <div className="space-y-6">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Uncontrolled Search</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary mb-2 font-medium">
+            Uncontrolled Search
+          </h3>
+          <p className="text-fm-secondary text-sm">
             Search components with internal state management
           </p>
         </div>
@@ -258,10 +266,10 @@ export const UncontrolledSearch: Story = {
           {/* Basic Uncontrolled */}
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <label className="text-sm font-medium text-white/80">
+              <label className="text-fm-tertiary text-sm font-medium">
                 Basic Uncontrolled
               </label>
-              <div className="text-xs text-white/60">
+              <div className="text-fm-secondary text-xs">
                 Last search: "{lastSearch1}"
               </div>
             </div>
@@ -274,10 +282,10 @@ export const UncontrolledSearch: Story = {
           {/* With Initial Value */}
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <label className="text-sm font-medium text-white/80">
+              <label className="text-fm-tertiary text-sm font-medium">
                 With Initial Value
               </label>
-              <div className="text-xs text-white/60">
+              <div className="text-fm-secondary text-xs">
                 Last search: "{lastSearch2}"
               </div>
             </div>
@@ -290,14 +298,14 @@ export const UncontrolledSearch: Story = {
 
           {/* Multiple Independent */}
           <div className="space-y-3">
-            <label className="text-sm font-medium text-white/80">
+            <label className="text-fm-tertiary text-sm font-medium">
               Multiple Independent
             </label>
             <div className="grid grid-cols-2 gap-3">
               <Search placeholder="Search A" />
               <Search placeholder="Search B" />
             </div>
-            <p className="text-xs text-white/60">
+            <p className="text-fm-secondary text-xs">
               Each search maintains its own independent state
             </p>
           </div>
@@ -357,8 +365,10 @@ export const InteractiveSearch: Story = {
     return (
       <div className="w-96 space-y-4">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Interactive Search</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary mb-2 font-medium">
+            Interactive Search
+          </h3>
+          <p className="text-fm-secondary text-sm">
             Real-time search with custom results rendering
           </p>
         </div>
@@ -372,13 +382,13 @@ export const InteractiveSearch: Story = {
         >
           {/* Custom Results Rendering */}
           {results.length > 0 && (
-            <div className="mt-2 rounded-lg border border-white/10 bg-gray-800/90 shadow-xl">
+            <div className="border-fm-divider-secondary bg-fm-surface-primary mt-2 rounded-lg border shadow-xl">
               <div className="p-3">
                 <div className="mb-2 flex items-center justify-between">
-                  <span className="text-xs font-medium text-white/80">
+                  <span className="text-fm-tertiary text-xs font-medium">
                     Search Results
                   </span>
-                  <span className="text-xs text-white/60">
+                  <span className="text-fm-secondary text-xs">
                     {results.length} found
                   </span>
                 </div>
@@ -391,7 +401,7 @@ export const InteractiveSearch: Story = {
                         setQuery(result.text)
                         setResults([])
                       }}
-                      className="w-full rounded px-3 py-2 text-left text-sm text-white hover:bg-white/10"
+                      className="text-fm-primary hover:bg-fm-surface-secondary w-full rounded px-3 py-2 text-left text-sm"
                     >
                       {result.text}
                     </button>
@@ -403,9 +413,11 @@ export const InteractiveSearch: Story = {
         </Search>
 
         {/* Search Info */}
-        <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-          <h4 className="mb-2 text-sm font-medium text-white">Search Info</h4>
-          <div className="space-y-1 text-xs text-white/60">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+          <h4 className="text-fm-primary mb-2 text-sm font-medium">
+            Search Info
+          </h4>
+          <div className="text-fm-secondary space-y-1 text-xs">
             <div>Query: "{query || "(empty)"}"</div>
             <div>Results: {results.length}</div>
             <div>Selected: {selectedResult || "(none)"}</div>
@@ -434,8 +446,8 @@ export const SearchStates: Story = {
     return (
       <div className="space-y-6">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Search States</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary mb-2 font-medium">Search States</h3>
+          <p className="text-fm-secondary text-sm">
             Different search states and feedback
           </p>
         </div>
@@ -443,7 +455,7 @@ export const SearchStates: Story = {
         <div className="grid gap-6">
           {/* Loading State */}
           <div className="space-y-3">
-            <label className="text-sm font-medium text-white/80">
+            <label className="text-fm-tertiary text-sm font-medium">
               Loading State
             </label>
             <Search
@@ -453,10 +465,12 @@ export const SearchStates: Story = {
               onSearch={setLoadingQuery}
             >
               {loadingQuery && (
-                <div className="mt-2 rounded-lg border border-white/10 bg-gray-800/90 p-4 text-center">
+                <div className="border-fm-divider-secondary bg-fm-surface-primary mt-2 rounded-lg border p-4 text-center">
                   <div className="flex items-center justify-center gap-2">
-                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/20 border-t-white"></div>
-                    <span className="text-sm text-white/80">Searching...</span>
+                    <div className="border-fm-divider-secondary h-4 w-4 animate-spin rounded-full border-2 border-t-white"></div>
+                    <span className="text-fm-tertiary text-sm">
+                      Searching...
+                    </span>
                   </div>
                 </div>
               )}
@@ -465,7 +479,7 @@ export const SearchStates: Story = {
 
           {/* Error State */}
           <div className="space-y-3">
-            <label className="text-sm font-medium text-white/80">
+            <label className="text-fm-tertiary text-sm font-medium">
               Error State
             </label>
             <Search
@@ -475,10 +489,10 @@ export const SearchStates: Story = {
               onSearch={setErrorQuery}
             >
               {errorQuery && (
-                <div className="mt-2 rounded-lg border border-red-500/30 bg-red-900/30 p-4">
+                <div className="border-fm-divider-secondary bg-fm-surface-negative-sec mt-2 rounded-lg border p-4">
                   <div className="flex items-center gap-2">
                     <svg
-                      className="h-4 w-4 text-red-400"
+                      className="text-fm-icon-negative h-4 w-4"
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"
@@ -490,7 +504,7 @@ export const SearchStates: Story = {
                         d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                       />
                     </svg>
-                    <span className="text-sm text-red-400">
+                    <span className="text-fm-negative text-sm">
                       Search failed. Please try again.
                     </span>
                   </div>
@@ -501,7 +515,7 @@ export const SearchStates: Story = {
 
           {/* Empty State */}
           <div className="space-y-3">
-            <label className="text-sm font-medium text-white/80">
+            <label className="text-fm-tertiary text-sm font-medium">
               Empty Results
             </label>
             <Search
@@ -511,10 +525,10 @@ export const SearchStates: Story = {
               onSearch={setEmptyQuery}
             >
               {emptyQuery && (
-                <div className="mt-2 rounded-lg border border-white/10 bg-gray-800/90 p-4 text-center">
+                <div className="border-fm-divider-secondary bg-fm-surface-primary mt-2 rounded-lg border p-4 text-center">
                   <div className="space-y-2">
                     <svg
-                      className="mx-auto h-8 w-8 text-white/40"
+                      className="text-fm-secondary mx-auto h-8 w-8"
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"
@@ -527,10 +541,10 @@ export const SearchStates: Story = {
                       />
                     </svg>
                     <div>
-                      <p className="text-sm font-medium text-white">
+                      <p className="text-fm-primary text-sm font-medium">
                         No results found
                       </p>
-                      <p className="text-xs text-white/60">
+                      <p className="text-fm-secondary text-xs">
                         Try different keywords or check your spelling
                       </p>
                     </div>
@@ -573,8 +587,10 @@ export const AdvancedFeatures: Story = {
     return (
       <div className="w-96 space-y-6">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Advanced Features</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary mb-2 font-medium">
+            Advanced Features
+          </h3>
+          <p className="text-fm-secondary text-sm">
             Search with history, suggestions, and shortcuts
           </p>
         </div>
@@ -582,7 +598,7 @@ export const AdvancedFeatures: Story = {
         <div className="space-y-6">
           {/* Search with History */}
           <div className="space-y-3">
-            <label className="text-sm font-medium text-white/80">
+            <label className="text-fm-tertiary text-sm font-medium">
               Search with History
             </label>
             <Search
@@ -596,9 +612,9 @@ export const AdvancedFeatures: Story = {
             >
               {(showHistory ||
                 (!currentSearch && searchHistory.length > 0)) && (
-                <div className="mt-2 rounded-lg border border-white/10 bg-gray-800/90 shadow-xl">
+                <div className="border-fm-divider-secondary bg-fm-surface-primary mt-2 rounded-lg border shadow-xl">
                   <div className="p-3">
-                    <div className="mb-2 text-xs font-medium text-white/80">
+                    <div className="text-fm-tertiary mb-2 text-xs font-medium">
                       Recent Searches
                     </div>
                     <div className="space-y-1">
@@ -609,10 +625,10 @@ export const AdvancedFeatures: Story = {
                             setCurrentSearch(item)
                             setShowHistory(false)
                           }}
-                          className="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm text-white hover:bg-white/10"
+                          className="text-fm-primary hover:bg-fm-surface-secondary flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm"
                         >
                           <svg
-                            className="h-3 w-3 text-white/40"
+                            className="text-fm-secondary h-3 w-3"
                             fill="none"
                             stroke="currentColor"
                             viewBox="0 0 24 24"
@@ -651,22 +667,28 @@ export const AdvancedFeatures: Story = {
           </div>
 
           {/* Keyboard Shortcuts Info */}
-          <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-            <h4 className="mb-2 text-sm font-medium text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+            <h4 className="text-fm-primary mb-2 text-sm font-medium">
               Keyboard Shortcuts
             </h4>
-            <div className="space-y-1 text-xs text-white/60">
+            <div className="text-fm-secondary space-y-1 text-xs">
               <div className="flex justify-between">
                 <span>Focus search:</span>
-                <kbd className="rounded bg-white/10 px-1 font-mono">Cmd+K</kbd>
+                <kbd className="bg-fm-surface-secondary rounded px-1 font-mono">
+                  Cmd+K
+                </kbd>
               </div>
               <div className="flex justify-between">
                 <span>Clear search:</span>
-                <kbd className="rounded bg-white/10 px-1 font-mono">Esc</kbd>
+                <kbd className="bg-fm-surface-secondary rounded px-1 font-mono">
+                  Esc
+                </kbd>
               </div>
               <div className="flex justify-between">
                 <span>Navigate results:</span>
-                <kbd className="rounded bg-white/10 px-1 font-mono">↑↓</kbd>
+                <kbd className="bg-fm-surface-secondary rounded px-1 font-mono">
+                  ↑↓
+                </kbd>
               </div>
             </div>
           </div>

package/dist/components/select/Select.stories.tsx

@@ -430,7 +430,9 @@ Use this pattern when you need to control the select value programmatically.
         <div>
           <p className="text-fm-primary mb-2 text-sm">
             Selected value:{" "}
-            <code className="rounded bg-gray-100 px-1">{value || "none"}</code>
+            <code className="bg-fm-surface-secondary rounded px-1">
+              {value || "none"}
+            </code>
           </p>
           <SelectField
             label="Controlled Select"