aural-ui 2.0.1 → 2.0.2

package/dist/components/dropdown/index.tsx

@@ -227,7 +227,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       className={cn(
         // Base styles
-        "rounded-fm-s relative flex cursor-default items-center gap-2 px-4 py-3 pl-8",
+        "rounded-fm-s relative flex cursor-default items-center gap-2 px-4 py-3",
         "text-fm-primary font-fm-text leading-fm-lg [font-size:var(--text-fm-lg)] tracking-wide",
         "transition-colors duration-200 outline-none select-none",
         // Hover and focus states
@@ -245,12 +245,7 @@ function DropdownMenuRadioItem({
     >
       <span className="pointer-events-none absolute left-4 flex size-3.5 items-center justify-center">
         <DropdownMenuPrimitive.ItemIndicator>
-          <TickIcon
-            className={cn(
-              "text-fm-icon-active size-2 fill-current",
-              classes?.indicator
-            )}
-          />
+          <TickIcon className={cn("text-fm-icon-active", classes?.indicator)} />
         </DropdownMenuPrimitive.ItemIndicator>
       </span>
       {children}

package/dist/components/sheet/index.tsx

@@ -301,7 +301,9 @@ const closeIconVariants = cva(
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants>,
-    ISheetOverlay {}
+    ISheetOverlay {
+  container: HTMLElement | null
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
@@ -317,11 +319,12 @@ const SheetContent = React.forwardRef<
       noise,
       children,
       classes,
+      container,
       ...props
     },
     ref
   ) => (
-    <SheetPortal>
+    <SheetPortal container={container}>
       <SheetOverlay
         opacity={opacity}
         glass={glass}

package/dist/icons/all-icons.tsx

@@ -313,12 +313,23 @@ export const Icons: React.FC = () => {
     "content",
     "status",
     "social",
+    "ai",
+    "audio",
+    "design",
+    "text",
+    "system",
   ]
 
-  // Get all icon components and categorize them
+  // Get all icon components from index and categorize them
   const allIcons = useMemo(() => {
     return Object.entries(IconSet)
-      .filter(([name]) => name.endsWith("Icon"))
+      .filter(([, component]) => {
+        // Only include components that are likely to be React icon components
+        return (
+          typeof component === "function" ||
+          (typeof component === "object" && component !== null)
+        )
+      })
       .map(([name, component]) => ({
         name,
         component: component as React.ComponentType<
@@ -330,66 +341,186 @@ export const Icons: React.FC = () => {
       .sort((a, b) => a.name.localeCompare(b.name))
   }, [])
 
-  // Categorize icons based on their names
+  // Enhanced categorize function based on icon names from index
   function categorizeIcon(iconName: string): string {
     const name = iconName.toLowerCase()
 
-    if (name.includes("chevron") || name.includes("arrow")) {
+    // AI related icons
+    if (
+      name.includes("ai") ||
+      name.includes("sparkle") ||
+      name.includes("magic")
+    ) {
+      return "ai"
+    }
+
+    // Navigation icons
+    if (
+      name.includes("chevron") ||
+      name.includes("arrow") ||
+      name.includes("angle") ||
+      name.includes("corner")
+    ) {
       return "navigation"
     }
+
+    // Action icons
     if (
       name.includes("cross") ||
       name.includes("tick") ||
       name.includes("plus") ||
       name.includes("edit") ||
-      name.includes("trash")
+      name.includes("trash") ||
+      name.includes("upload") ||
+      name.includes("import") ||
+      name.includes("pencil")
     ) {
       return "actions"
     }
+
+    // Interface icons
     if (
       name.includes("eye") ||
       name.includes("search") ||
       name.includes("command") ||
-      name.includes("menu")
+      name.includes("menu") ||
+      name.includes("setting") ||
+      name.includes("grip") ||
+      name.includes("move") ||
+      name.includes("layout")
     ) {
       return "interface"
     }
+
+    // Content icons
     if (
       name.includes("file") ||
       name.includes("image") ||
       name.includes("bubble") ||
-      name.includes("import")
+      name.includes("message") ||
+      name.includes("book") ||
+      name.includes("page")
     ) {
       return "content"
     }
+
+    // Status icons
     if (
       name.includes("alert") ||
       name.includes("maintenance") ||
-      name.includes("bulb")
+      name.includes("bulb") ||
+      name.includes("spinner") ||
+      name.includes("check") ||
+      name.includes("circle")
     ) {
       return "status"
     }
 
+    // Audio icons
+    if (
+      name.includes("audio") ||
+      name.includes("musical") ||
+      name.includes("note")
+    ) {
+      return "audio"
+    }
+
+    // Design icons
+    if (
+      name.includes("art") ||
+      name.includes("paint") ||
+      name.includes("color") ||
+      name.includes("feature") ||
+      name.includes("board")
+    ) {
+      return "design"
+    }
+
+    // Text icons
+    if (
+      name.includes("text") ||
+      name.includes("capital") ||
+      name.includes("letter") ||
+      name.includes("indicator")
+    ) {
+      return "text"
+    }
+
+    // System icons
+    if (
+      name.includes("head") ||
+      name.includes("site") ||
+      name.includes("logo")
+    ) {
+      return "system"
+    }
+
     return "interface"
   }
 
-  // Get icon description based on name
+  // Enhanced icon description function
   function getIconDescription(iconName: string): string {
     const descriptions: Record<string, string> = {
-      ChevronRightIcon: "Navigate forward or expand",
-      ChevronLeftIcon: "Navigate back or collapse",
+      AiAvatarIcon: "AI avatar representation",
+      AlertIcon: "Warning or attention indicator",
+      AngleDownIcon: "Dropdown or expand indicator",
+      ArrowBoxLeftIcon: "Navigate or move left",
+      ArrowCornerUpLeftIcon: "Corner navigation up-left",
+      ArrowCornerUpRightIcon: "Corner navigation up-right",
+      ArrowRightIcon: "Navigate or move right",
+      ArrowRightUpIcon: "Navigate up-right",
+      ArtBoardIcon: "Design canvas or artboard",
+      AudioBarIcon: "Audio level indicator",
+      BubbleCheckIcon: "Message with confirmation",
+      BubbleCrossedIcon: "Message with error",
+      BubbleSparkleIcon: "Enhanced or special message",
+      CapitalALetterIcon: "Text formatting indicator",
+      ChevronDoubleLeftIcon: "Fast backward navigation",
+      ChevronDoubleRightIcon: "Fast forward navigation",
+      ChevronDownIcon: "Expand or dropdown",
+      ChevronLeftIcon: "Navigate back",
+      ChevronRightIcon: "Navigate forward",
+      ChevronUpIcon: "Collapse or up",
+      CommandIcon: "Keyboard shortcut indicator",
+      CrossCircleIcon: "Error or cancel in circle",
       CrossIcon: "Close or cancel action",
-      TickIcon: "Confirm or success state",
-      SearchIcon: "Search functionality",
+      EditBigIcon: "Edit or modify (large)",
       EyeOpenIcon: "Show or visible state",
       EyeCloseIcon: "Hide or invisible state",
-      AlertIcon: "Warning or attention",
+      FeatureShineIcon: "Highlight or featured item",
+      FileChartIcon: "Chart or analytics file",
+      FileTextIcon: "Text document",
+      GripVerticalIcon: "Drag handle vertical",
+      HeadIcon: "User profile or person",
+      ImageIcon: "Image or media content",
+      ImportFolderIcon: "Import files or folder",
+      LayoutColumnIcon: "Column layout",
+      LayoutLeftIcon: "Left sidebar layout",
+      LayoutRightIcon: "Right sidebar layout",
+      LightBulbSimpleIcon: "Idea or suggestion",
+      MagicBookIcon: "Documentation or guide",
+      MaintenanceIcon: "System maintenance",
+      MessageIcon: "Communication or chat",
+      MoveHorizontalIcon: "Resize horizontally",
+      MoveVerticalIcon: "Resize vertically",
+      MusicalNoteIcon: "Audio or music",
+      PageSearchIcon: "Search within page",
+      PaintRollIcon: "Theming or styling",
+      PencilIcon: "Edit or write",
       PlusIcon: "Add or create new",
-      EditIcon: "Edit or modify",
+      SearchIcon: "Search functionality",
+      SettingIcon: "Configuration or settings",
+      SiteLogoIcon: "Brand or logo",
+      SparklesSoftIcon: "Enhancement or magic",
+      SpinnerGradientIcon: "Loading (gradient)",
+      SpinnerSolidIcon: "Loading (solid)",
+      SpinnerSolidNeutralIcon: "Loading (neutral)",
+      TextColorIcon: "Text color formatting",
+      TextIndicatorIcon: "Text formatting indicator",
+      TickCircleIcon: "Success or confirmation in circle",
+      TickIcon: "Confirm or success state",
       TrashIcon: "Delete or remove",
-      ImageIcon: "Image content",
-      FileChartIcon: "Chart or analytics",
-      CommandIcon: "Keyboard shortcut",
+      UploadIcon: "Upload files",
       VerticalMenuIcon: "More options menu",
     }
 
@@ -462,7 +593,7 @@ export const Icons: React.FC = () => {
             <div className="flex items-center justify-center gap-8 pt-8">
               <div className="text-center">
                 <div className="text-3xl font-bold text-purple-300">
-                  {totalIcons}+
+                  {totalIcons}
                 </div>
                 <div className="text-sm text-white/60">Total icons</div>
               </div>
@@ -629,6 +760,11 @@ export const Icons: React.FC = () => {
             content: "Icons for content types like files, images, and media.",
             status: "Icons for states, alerts, and status indicators.",
             social: "Icons for social features and sharing functionality.",
+            ai: "Icons related to artificial intelligence and smart features.",
+            audio: "Icons for audio, music, and sound-related features.",
+            design: "Icons for design, styling, and creative tools.",
+            text: "Icons for text formatting and typography.",
+            system: "Icons for system-level features and branding.",
           }
 
           return (
@@ -645,66 +781,6 @@ export const Icons: React.FC = () => {
             </IconCategory>
           )
         })}
-
-        {/* Featured Icons Section - only show when no filters applied */}
-        {selectedCategory === "all" && !searchTerm && (
-          <IconCategory category="Featured Icons">
-            <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-              {/* Most Used Icons */}
-              <div className="space-y-6">
-                <h3 className="text-xl font-bold text-white">Most Used</h3>
-                <div className="grid grid-cols-4 gap-4">
-                  {allIcons
-                    .filter((icon) =>
-                      [
-                        "ChevronRightIcon",
-                        "ChevronLeftIcon",
-                        "CrossIcon",
-                        "TickIcon",
-                        "SearchIcon",
-                        "PlusIcon",
-                        "EditIcon",
-                        "TrashIcon",
-                      ].includes(icon.name)
-                    )
-                    .map(({ name, component: IconComponent }) => (
-                      <div
-                        key={name}
-                        onClick={() => handleIconClick(name, IconComponent)}
-                        className="group cursor-pointer rounded-lg border border-white/10 bg-white/5 p-4 text-center transition-all hover:scale-105 hover:bg-white/10"
-                      >
-                        <IconComponent className="mx-auto mb-2 h-8 w-8 text-white transition-colors group-hover:text-blue-400" />
-                        <p className="text-xs text-white/70">
-                          {name.replace("Icon", "")}
-                        </p>
-                      </div>
-                    ))}
-                </div>
-              </div>
-
-              {/* Recently Added */}
-              <div className="space-y-6">
-                <h3 className="text-xl font-bold text-white">Recently Added</h3>
-                <div className="grid grid-cols-4 gap-4">
-                  {allIcons
-                    .slice(-8)
-                    .map(({ name, component: IconComponent }) => (
-                      <div
-                        key={name}
-                        onClick={() => handleIconClick(name, IconComponent)}
-                        className="group cursor-pointer rounded-lg border border-white/10 bg-white/5 p-4 text-center transition-all hover:scale-105 hover:bg-white/10"
-                      >
-                        <IconComponent className="mx-auto mb-2 h-8 w-8 text-white transition-colors group-hover:text-blue-400" />
-                        <p className="text-xs text-white/70">
-                          {name.replace("Icon", "")}
-                        </p>
-                      </div>
-                    ))}
-                </div>
-              </div>
-            </div>
-          </IconCategory>
-        )}
       </div>
 
       {/* Footer */}