aural-ui 3.0.6 → 4.0.1

package/dist/icons/all-icons.tsx

@@ -37,9 +37,9 @@ function MyComponent() {
 
 function CustomIcon() {
   return (
-    <${iconName} 
-      width={32} 
-      height={32} 
+    <${iconName}
+      width={32}
+      height={32}
       className="text-blue-500"
     />
   )
@@ -86,19 +86,19 @@ function InteractiveIcon() {
       <DialogContent
         classes={{
           content: "max-w-4xl",
-          root: "bg-gray-900 text-white",
+          root: "bg-fm-surface-secondary text-fm-primary",
         }}
       >
-        <DialogHeader className="border-b border-white/10 pb-4">
+        <DialogHeader className="border-fm-divider-secondary border-b pb-4">
           <div className="flex items-center gap-4">
-            <div className="rounded-lg bg-white/5 p-3">
-              <IconComponent className="h-8 w-8 text-white" />
+            <div className="bg-fm-surface-tertiary/20 rounded-lg p-3">
+              <IconComponent className="text-fm-primary h-8 w-8" />
             </div>
             <div>
-              <DialogTitle className="text-xl font-semibold text-white">
+              <DialogTitle className="text-fm-primary text-xl font-semibold">
                 {iconName}
               </DialogTitle>
-              <p className="text-sm text-white/60">
+              <p className="text-fm-tertiary text-sm">
                 Usage examples and implementation
               </p>
             </div>
@@ -109,11 +109,11 @@ function InteractiveIcon() {
           {/* Usage Examples */}
           {usageExamples.map((example, index) => (
             <div key={index} className="space-y-3">
-              <h3 className="text-lg font-medium text-white">
+              <h3 className="text-fm-primary text-lg font-medium">
                 {example.title}
               </h3>
               <div className="relative">
-                <pre className="overflow-x-auto rounded-lg border border-white/10 bg-black/40 p-4 text-sm text-gray-300">
+                <pre className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-secondary overflow-x-auto rounded-lg border p-4 text-sm">
                   <code>{example.code}</code>
                 </pre>
                 <Button
@@ -129,75 +129,87 @@ function InteractiveIcon() {
           ))}
 
           {/* Live Preview */}
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h3 className="mb-4 text-lg font-medium text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h3 className="text-fm-primary mb-4 text-lg font-medium">
               Live Preview
             </h3>
             <div className="flex flex-wrap items-center gap-6">
               <div className="text-center">
-                <IconComponent className="mb-2 h-6 w-6 text-white" />
-                <span className="text-xs text-white/60">Default</span>
+                <IconComponent className="text-fm-primary mb-2 h-6 w-6" />
+                <span className="text-fm-tertiary text-xs">Default</span>
               </div>
               <div className="text-center">
-                <IconComponent className="mb-2 h-8 w-8 text-blue-400" />
-                <span className="text-xs text-white/60">Large Blue</span>
+                <IconComponent className="text-fm-info mb-2 h-8 w-8" />
+                <span className="text-fm-tertiary text-xs">Large Blue</span>
               </div>
               <div className="text-center">
-                <IconComponent className="mb-2 h-4 w-4 text-green-400" />
-                <span className="text-xs text-white/60">Small Green</span>
+                <IconComponent className="text-fm-positive mb-2 h-4 w-4" />
+                <span className="text-fm-tertiary text-xs">Small Green</span>
               </div>
               <div className="text-center">
-                <IconComponent className="mb-2 h-6 w-6 text-red-400" />
-                <span className="text-xs text-white/60">Red</span>
+                <IconComponent className="text-fm-negative mb-2 h-6 w-6" />
+                <span className="text-fm-tertiary text-xs">Red</span>
               </div>
               <div className="text-center">
-                <IconComponent className="mb-2 h-6 w-6 text-yellow-400" />
-                <span className="text-xs text-white/60">Yellow</span>
+                <IconComponent className="text-fm-warning mb-2 h-6 w-6" />
+                <span className="text-fm-tertiary text-xs">Yellow</span>
               </div>
             </div>
           </div>
 
           {/* Icon Properties */}
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h3 className="mb-4 text-lg font-medium text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h3 className="text-fm-primary mb-4 text-lg font-medium">
               Icon Properties
             </h3>
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
               <div className="space-y-2">
-                <h4 className="text-sm font-medium text-white/80">
+                <h4 className="text-fm-secondary text-sm font-medium">
                   Common Props
                 </h4>
-                <ul className="space-y-1 text-sm text-white/60">
+                <ul className="text-fm-tertiary space-y-1 text-sm">
                   <li>
-                    <code className="rounded bg-black/20 px-1">className</code>{" "}
+                    <code className="bg-fm-surface-tertiary/40 rounded px-1">
+                      className
+                    </code>{" "}
                     - CSS classes
                   </li>
                   <li>
-                    <code className="rounded bg-black/20 px-1">width</code> -
-                    Icon width
+                    <code className="bg-fm-surface-tertiary/40 rounded px-1">
+                      width
+                    </code>{" "}
+                    - Icon width
                   </li>
                   <li>
-                    <code className="rounded bg-black/20 px-1">height</code> -
-                    Icon height
+                    <code className="bg-fm-surface-tertiary/40 rounded px-1">
+                      height
+                    </code>{" "}
+                    - Icon height
                   </li>
                 </ul>
               </div>
               <div className="space-y-2">
-                <h4 className="text-sm font-medium text-white/80">SVG Props</h4>
-                <ul className="space-y-1 text-sm text-white/60">
+                <h4 className="text-fm-secondary text-sm font-medium">
+                  SVG Props
+                </h4>
+                <ul className="text-fm-tertiary space-y-1 text-sm">
                   <li>
-                    <code className="rounded bg-black/20 px-1">stroke</code> -
-                    Stroke color
+                    <code className="bg-fm-surface-tertiary/40 rounded px-1">
+                      stroke
+                    </code>{" "}
+                    - Stroke color
                   </li>
                   <li>
-                    <code className="rounded bg-black/20 px-1">
+                    <code className="bg-fm-surface-tertiary/40 rounded px-1">
                       strokeWidth
                     </code>{" "}
                     - Stroke width
                   </li>
                   <li>
-                    <code className="rounded bg-black/20 px-1">fill</code> -
-                    Fill color
+                    <code className="bg-fm-surface-tertiary/40 rounded px-1">
+                      fill
+                    </code>{" "}
+                    - Fill color
                   </li>
                 </ul>
               </div>
@@ -218,11 +230,11 @@ const IconCategory: React.FC<IconCategoryProps> = ({ category, children }) => {
   return (
     <div className="space-y-8">
       <div className="flex items-center gap-4">
-        <div className="h-px flex-1 bg-gradient-to-r from-purple-500/50 to-transparent" />
-        <h2 className="rounded-full border border-purple-500/20 bg-purple-500/10 px-4 py-2 text-lg font-semibold text-purple-300">
+        <div className="from-fm-secondary-500/50 h-px flex-1 bg-linear-to-r to-transparent" />
+        <h2 className="border-fm-secondary-500/20 bg-fm-secondary-500/10 text-fm-icon-brand-secondary rounded-full border px-4 py-2 text-lg font-semibold">
           {category}
         </h2>
-        <div className="h-px flex-1 bg-gradient-to-l from-purple-500/50 to-transparent" />
+        <div className="to-fm-secondary-500/50 h-px flex-1 bg-linear-to-l from-transparent" />
       </div>
       <div className="space-y-12">{children}</div>
     </div>
@@ -253,9 +265,11 @@ const IconGrid: React.FC<IconGridProps> = ({
   return (
     <div className="space-y-6">
       <div className="space-y-2">
-        <h3 className="text-2xl font-bold text-white">{title}</h3>
+        <h3 className="text-fm-primary text-2xl font-bold">{title}</h3>
         {description && (
-          <p className="text-sm leading-relaxed text-white/70">{description}</p>
+          <p className="text-fm-secondary text-sm leading-relaxed">
+            {description}
+          </p>
         )}
       </div>
       <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
@@ -263,32 +277,32 @@ const IconGrid: React.FC<IconGridProps> = ({
           <div
             key={name}
             onClick={() => onIconClick?.(name, IconComponent)}
-            className="group relative cursor-pointer overflow-hidden rounded-lg border border-white/10 bg-white/5 transition-all duration-200 hover:scale-105 hover:border-white/20 hover:bg-white/10"
+            className="border-fm-divider-secondary bg-fm-surface-secondary hover:border-fm-divider-primary group hover:bg-fm-surface-tertiary/20 relative cursor-pointer overflow-hidden rounded-lg border transition-all duration-200 hover:scale-105"
           >
             {/* Icon Display */}
-            <div className="flex h-24 items-center justify-center bg-gradient-to-br from-white/5 to-white/10 transition-all duration-200 group-hover:from-white/10 group-hover:to-white/15">
-              <IconComponent className="h-8 w-8 text-white transition-all duration-200 group-hover:scale-110 group-hover:text-blue-400" />
+            <div className="from-fm-surface-secondary/50 to-fm-surface-tertiary/20 group-hover:from-fm-surface-secondary group-hover:to-fm-surface-tertiary/40 flex h-24 items-center justify-center bg-linear-to-br transition-all duration-200">
+              <IconComponent className="text-fm-primary group-hover:text-fm-info h-8 w-8 transition-all duration-200 group-hover:scale-110" />
             </div>
 
             {/* Icon Info */}
             <div className="space-y-2 p-3">
-              <h4 className="truncate text-xs font-medium text-white">
+              <h4 className="text-fm-primary truncate text-xs font-medium">
                 {name}
               </h4>
               {category && (
-                <span className="inline-block rounded-full bg-purple-500/20 px-2 py-1 text-xs text-purple-300">
+                <span className="bg-fm-secondary-500/20 text-fm-icon-brand-secondary inline-block rounded-full px-2 py-1 text-xs">
                   {category}
                 </span>
               )}
             </div>
 
             {/* Hover overlay */}
-            <div className="absolute inset-0 flex flex-col items-center justify-center bg-black/80 opacity-0 backdrop-blur-sm transition-opacity duration-200 group-hover:opacity-100">
-              <IconComponent className="mb-2 h-8 w-8 text-white" />
-              <p className="px-2 text-center text-xs font-medium text-white">
+            <div className="bg-fm-surface-secondary/80 absolute inset-0 flex flex-col items-center justify-center opacity-0 backdrop-blur-sm transition-opacity duration-200 group-hover:opacity-100">
+              <IconComponent className="text-fm-primary mb-2 h-8 w-8" />
+              <p className="text-fm-primary px-2 text-center text-xs font-medium">
                 {name}
               </p>
-              <p className="mt-1 text-xs text-blue-300">Click for usage</p>
+              <p className="text-fm-info mt-1 text-xs">Click for usage</p>
             </div>
           </div>
         ))}
@@ -574,16 +588,16 @@ export const Icons: React.FC = () => {
   const categoryCount = Object.keys(iconsByCategory).length
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/20 to-gray-900">
+    <div className="bg-fm-surface-primary min-h-screen">
       {/* Header */}
-      <div className="relative overflow-hidden border-b border-white/10 bg-black/20 backdrop-blur-xl">
-        <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-transparent to-blue-500/10" />
+      <div className="border-fm-divider-secondary bg-fm-surface-secondary/50 relative overflow-hidden border-b backdrop-blur-xl">
+        <div className="from-fm-secondary-500/10 to-fm-info/10 absolute inset-0 bg-linear-to-r via-transparent" />
         <div className="relative mx-auto max-w-7xl px-6 py-16">
           <div className="space-y-6 text-center">
-            <h1 className="bg-gradient-to-r from-white via-purple-200 to-white bg-clip-text text-5xl font-bold text-transparent">
+            <h1 className="from-fm-primary via-fm-icon-brand-secondary to-fm-primary bg-linear-to-r bg-clip-text text-5xl font-bold text-transparent">
               Icon Library
             </h1>
-            <p className="mx-auto max-w-3xl text-xl leading-relaxed text-white/70">
+            <p className="text-fm-secondary mx-auto max-w-3xl text-xl leading-relaxed">
               A comprehensive collection of carefully crafted icons built with
               accessibility in mind. Each icon is optimized for clarity and
               consistency across your interface.
@@ -592,24 +606,24 @@ export const Icons: React.FC = () => {
             {/* Stats */}
             <div className="flex items-center justify-center gap-8 pt-8">
               <div className="text-center">
-                <div className="text-3xl font-bold text-purple-300">
+                <div className="text-fm-icon-brand-secondary text-3xl font-bold">
                   {totalIcons}
                 </div>
-                <div className="text-sm text-white/60">Total icons</div>
+                <div className="text-fm-tertiary text-sm">Total icons</div>
               </div>
-              <div className="h-8 w-px bg-white/20" />
+              <div className="bg-fm-divider-secondary h-8 w-px" />
               <div className="text-center">
-                <div className="text-3xl font-bold text-blue-300">
+                <div className="text-fm-info text-3xl font-bold">
                   {categoryCount}
                 </div>
-                <div className="text-sm text-white/60">Categories</div>
+                <div className="text-fm-tertiary text-sm">Categories</div>
               </div>
-              <div className="h-8 w-px bg-white/20" />
+              <div className="bg-fm-divider-secondary h-8 w-px" />
               <div className="text-center">
-                <div className="text-3xl font-bold text-green-300">
+                <div className="text-fm-positive text-3xl font-bold">
                   Accessible
                 </div>
-                <div className="text-sm text-white/60">Radix UI</div>
+                <div className="text-fm-tertiary text-sm">Radix UI</div>
               </div>
             </div>
           </div>
@@ -617,7 +631,7 @@ export const Icons: React.FC = () => {
       </div>
 
       {/* Controls */}
-      <div className="sticky top-0 z-40 border-b border-white/10 bg-black/80 backdrop-blur-xl">
+      <div className="border-fm-divider-secondary bg-fm-surface-primary/80 sticky top-0 z-40 border-b backdrop-blur-xl">
         <div className="mx-auto max-w-7xl px-6 py-4">
           <div className="flex flex-col items-center justify-between gap-4 sm:flex-row">
             <div className="flex flex-wrap gap-2">
@@ -627,8 +641,8 @@ export const Icons: React.FC = () => {
                   onClick={() => setSelectedCategory(category)}
                   className={`rounded-full px-4 py-2 text-sm font-medium transition-all duration-200 ${
                     selectedCategory === category
-                      ? "bg-purple-500 text-white shadow-lg shadow-purple-500/25"
-                      : "bg-white/5 text-white/70 hover:bg-white/10 hover:text-white"
+                      ? "bg-fm-secondary-500 text-fm-primary shadow-fm-secondary-500/25 shadow-lg"
+                      : "bg-fm-surface-secondary text-fm-secondary hover:bg-fm-surface-tertiary/30 hover:text-fm-primary"
                   }`}
                 >
                   {category.charAt(0).toUpperCase() + category.slice(1)}
@@ -642,13 +656,13 @@ export const Icons: React.FC = () => {
                 placeholder="Search icons..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-64 rounded-lg border border-white/10 bg-white/5 py-2 pr-10 pl-4 text-white placeholder-white/50 focus:border-purple-500/50 focus:ring-2 focus:ring-purple-500/50 focus:outline-none"
+                className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-primary focus:border-fm-secondary-500/50 focus:ring-fm-secondary-500/50 placeholder:text-fm-placeholder w-64 rounded-lg border py-2 pr-10 pl-4 focus:ring-2 focus:outline-none"
               />
-              <div className="absolute top-1/2 right-3 -translate-y-1/2 text-white/50">
+              <div className="text-fm-tertiary absolute top-1/2 right-3 -translate-y-1/2">
                 {searchTerm ? (
                   <button
                     onClick={() => setSearchTerm("")}
-                    className="hover:text-white"
+                    className="hover:text-fm-primary"
                   >
                     <svg
                       className="h-4 w-4"
@@ -686,11 +700,11 @@ export const Icons: React.FC = () => {
           {/* Search Results Indicator */}
           {searchTerm && (
             <div className="mt-4 text-center">
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 {filteredIcons.length > 0 ? (
                   <>
                     Found{" "}
-                    <span className="font-medium text-purple-300">
+                    <span className="text-fm-icon-brand-secondary font-medium">
                       {filteredIcons.length}
                     </span>{" "}
                     icons matching "{searchTerm}"
@@ -698,7 +712,7 @@ export const Icons: React.FC = () => {
                 ) : (
                   <>
                     No icons found matching "
-                    <span className="font-medium text-red-300">
+                    <span className="text-fm-negative font-medium">
                       {searchTerm}
                     </span>
                     "
@@ -717,14 +731,16 @@ export const Icons: React.FC = () => {
           <div className="py-16 text-center">
             <div className="mx-auto max-w-md space-y-4">
               <div className="text-6xl">🔍</div>
-              <h3 className="text-xl font-medium text-white">No icons found</h3>
-              <p className="text-white/60">
+              <h3 className="text-fm-primary text-xl font-medium">
+                No icons found
+              </h3>
+              <p className="text-fm-secondary">
                 Try searching for a different term or clear your search to see
                 all icons.
               </p>
               <button
                 onClick={() => setSearchTerm("")}
-                className="mt-4 rounded-full bg-purple-500 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-purple-600"
+                className="bg-fm-secondary-500 text-fm-primary hover:bg-fm-secondary-600 mt-4 rounded-full px-6 py-2 text-sm font-medium transition-colors"
               >
                 Clear Search
               </button>
@@ -784,14 +800,14 @@ export const Icons: React.FC = () => {
       </div>
 
       {/* Footer */}
-      <div className="border-t border-white/10 bg-black/20 backdrop-blur-xl">
+      <div className="border-fm-divider-secondary bg-fm-surface-secondary/50 border-t backdrop-blur-xl">
         <div className="mx-auto max-w-7xl px-6 py-8">
           <div className="space-y-4 text-center">
-            <p className="text-white/60">
+            <p className="text-fm-tertiary">
               All icons are built with Radix UI's AccessibleIcon for screen
               reader compatibility.
             </p>
-            <p className="text-sm text-white/40">
+            <p className="text-fm-placeholder text-sm">
               Click any icon to see usage examples and copy implementation code.
             </p>
           </div>