aural-ui 2.0.0 → 2.0.2

package/dist/icons/ai-avatar-icon/index.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { AccessibleIcon } from "@radix-ui/react-accessible-icon"
+
+type AiAvatarIconProps = React.JSX.IntrinsicAttributes &
+  React.SVGProps<SVGSVGElement> & {
+    classes?: {
+      circle?: string
+      path?: string
+    }
+  }
+
+export const AiAvatarIcon = ({ classes = {}, ...props }: AiAvatarIconProps) => (
+  <AccessibleIcon label="Ai Avatar icon">
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <circle
+        cx="20"
+        cy="20"
+        r="20"
+        fill="#37052D"
+        className={classes?.circle}
+      />
+      <path
+        d="M25.5401 16.8526C25.4745 16.8526 25.4187 16.8395 25.3728 16.8133C25.3269 16.787 25.2908 16.7412 25.2645 16.6756L24.6938 15.3388L23.2572 14.7097C23.1916 14.6835 23.1457 14.6474 23.1194 14.6016C23.0932 14.5557 23.0801 14.5 23.0801 14.4345C23.0801 14.3689 23.0932 14.3132 23.1194 14.2673C23.1457 14.2215 23.1916 14.1854 23.2572 14.1592L24.6938 13.5498L25.2645 12.2719C25.2908 12.2064 25.3269 12.1605 25.3728 12.1343C25.4187 12.1081 25.4745 12.095 25.5401 12.095C25.6057 12.095 25.6614 12.1081 25.7073 12.1343C25.7533 12.1605 25.7893 12.2064 25.8156 12.2719L26.3863 13.5498L27.8229 14.1592C27.8885 14.1854 27.9345 14.2215 27.9607 14.2673C27.9869 14.3132 28 14.3689 28 14.4345C28 14.5 27.9869 14.5557 27.9607 14.6016C27.9345 14.6474 27.8885 14.6835 27.8229 14.7097L26.3863 15.3388L25.8156 16.6756C25.7893 16.7412 25.7533 16.787 25.7073 16.8133C25.6614 16.8395 25.6057 16.8526 25.5401 16.8526ZM25.5401 28.5697C25.4876 28.5697 25.4351 28.5565 25.3826 28.5303C25.3301 28.5041 25.2908 28.4583 25.2645 28.3927L24.6938 27.1149L23.2769 26.5054C23.2113 26.4792 23.1653 26.4432 23.1391 26.3973C23.1129 26.3514 23.0997 26.2957 23.0997 26.2302C23.0997 26.1646 23.1129 26.1089 23.1391 26.0631C23.1653 26.0172 23.2113 25.9812 23.2769 25.9549L24.6938 25.3455L25.2645 23.989C25.2908 23.9235 25.3269 23.8776 25.3728 23.8514C25.4187 23.8252 25.4745 23.812 25.5401 23.812C25.6057 23.812 25.6614 23.8252 25.7073 23.8514C25.7533 23.8776 25.7893 23.9235 25.8156 23.989L26.3863 25.3455L27.8033 25.9549C27.8688 25.9812 27.9148 26.0172 27.941 26.0631C27.9673 26.1089 27.9804 26.1646 27.9804 26.2302C27.9804 26.2957 27.9673 26.3514 27.941 26.3973C27.9148 26.4432 27.8688 26.4792 27.8033 26.5054L26.3863 27.1149L25.8156 28.3927C25.7893 28.4583 25.75 28.5041 25.6975 28.5303C25.645 28.5565 25.5925 28.5697 25.5401 28.5697ZM16.9006 25.1686C16.7956 25.1686 16.6939 25.1391 16.5955 25.0801C16.4971 25.0211 16.4217 24.9392 16.3692 24.8343L15.09 22.1017L12.3348 20.8631C12.2298 20.8107 12.1478 20.7353 12.0888 20.637C12.0298 20.5387 12.0002 20.4372 12.0002 20.3323C12.0002 20.2275 12.0298 20.1259 12.0888 20.0276C12.1478 19.9293 12.2298 19.8539 12.3348 19.8015L15.09 18.563L16.3692 15.8499C16.4217 15.732 16.4971 15.6435 16.5955 15.5845C16.6939 15.5256 16.7956 15.4961 16.9006 15.4961C17.0055 15.4961 17.1072 15.5256 17.2056 15.5845C17.304 15.6435 17.3794 15.7254 17.4319 15.8303L18.7308 18.563L21.4663 19.8015C21.5844 19.8539 21.6729 19.9293 21.732 20.0276C21.791 20.1259 21.8205 20.2275 21.8205 20.3323C21.8205 20.4372 21.791 20.5387 21.732 20.637C21.6729 20.7353 21.5844 20.8107 21.4663 20.8631L18.7308 22.1017L17.4319 24.8343C17.3794 24.9523 17.304 25.0375 17.2056 25.0899C17.1072 25.1423 17.0055 25.1686 16.9006 25.1686Z"
+        fill="#C58AFF"
+        className={classes?.path}
+      />
+    </svg>
+  </AccessibleIcon>
+)

package/dist/icons/ai-avatar-icon/meta.ts

@@ -0,0 +1,8 @@
+export const meta = {
+  dependencies: {
+    "@radix-ui/react-accessible-icon": "^1.1.7",
+  },
+  devDependencies: {},
+  internalDependencies: [],
+  tokens: [],
+}

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 */}