@newtonedev/components 0.1.6 → 0.1.7

package/dist/index.cjs

@@ -780,9 +780,7 @@ function Icon({
   opticalSize,
   fill = 0,
   color,
-  elevation = 1,
   style,
-  onPress,
   // Accessibility
   accessibilityLabel,
   // Testing & platform
@@ -790,7 +788,7 @@ function Icon({
   nativeID,
   ref
 }) {
-  const tokens = useTokens(elevation);
+  const tokens = useTokens();
   const iconStyle = React13.useMemo(() => {
     const fontSize = size ?? tokens.typography.size.base;
     const getOpticalSize = (size2) => {
@@ -802,7 +800,8 @@ function Icon({
     const opsz = opticalSize ?? getOpticalSize(fontSize);
     const iconColor = color ?? newtone.srgbToHex(tokens.textPrimary.srgb);
     const fontFamily = `Material Symbols ${tokens.icons.variant.charAt(0).toUpperCase() + tokens.icons.variant.slice(1)}`;
-    const fontVariationSettings = `'FILL' ${fill}, 'wght' ${tokens.icons.weight}, 'GRAD' ${tokens.icons.grade}, 'opsz' ${opsz}`;
+    const fillValue = typeof fill === "boolean" ? fill ? 1 : 0 : fill;
+    const fontVariationSettings = `'FILL' ${fillValue}, 'wght' ${tokens.icons.weight}, 'GRAD' ${tokens.icons.grade}, 'opsz' ${opsz}`;
     return {
       fontFamily,
       fontSize,
@@ -828,8 +827,7 @@ function Icon({
       nativeID,
       accessibilityLabel,
       importantForAccessibility: accessibilityLabel ? "yes" : "no-hide-descendants",
-      style: iconStyle,
-      onPress
+      style: iconStyle
     },
     name
   );
@@ -3298,40 +3296,35 @@ var COMPONENTS = [
     name: "Icon",
     importName: "Icon",
     categoryId: "primitives",
-    description: "Material Symbols icon with size, fill, and color",
+    description: "Material Symbols icon with size and fill",
     hasChildren: false,
     variants: [
-      { id: "home", label: "Home", props: { name: "home" } },
-      { id: "settings", label: "Settings", props: { name: "settings" } },
-      { id: "check", label: "Check", props: { name: "check" } },
-      { id: "add", label: "Add", props: { name: "add" } },
-      { id: "delete", label: "Delete", props: { name: "delete" } },
-      { id: "search", label: "Search", props: { name: "search" } },
-      { id: "filled", label: "Filled Icon", props: { name: "favorite", fill: 1 } },
-      { id: "large", label: "Large Icon", props: { name: "star", size: 32 } }
+      { id: "default", label: "Default", props: { name: "add" } }
     ],
     editableProps: [
       {
         name: "name",
         label: "Icon Name",
         control: "text",
-        defaultValue: "home"
+        defaultValue: "add"
       },
       {
         name: "size",
         label: "Size",
-        control: "number",
+        control: "discrete-slider",
+        options: [
+          { label: "20", value: 20 },
+          { label: "24", value: 24 },
+          { label: "40", value: 40 },
+          { label: "48", value: 48 }
+        ],
         defaultValue: 24
       },
       {
         name: "fill",
         label: "Fill",
-        control: "select",
-        options: [
-          { label: "Outlined", value: 0 },
-          { label: "Filled", value: 1 }
-        ],
-        defaultValue: 0
+        control: "toggle",
+        defaultValue: false
       }
     ]
   },
@@ -3535,6 +3528,232 @@ function formatProp(name, value) {
   return `${name}={${JSON.stringify(value)}}`;
 }
 
+// src/registry/icons.ts
+var ICON_CATALOG = [
+  {
+    id: "navigation",
+    label: "Navigation",
+    icons: [
+      "home",
+      "menu",
+      "close",
+      "arrow_back",
+      "arrow_forward",
+      "arrow_upward",
+      "arrow_downward",
+      "chevron_left",
+      "chevron_right",
+      "expand_more",
+      "expand_less",
+      "first_page",
+      "last_page",
+      "more_vert",
+      "more_horiz",
+      "unfold_more",
+      "unfold_less",
+      "subdirectory_arrow_right"
+    ]
+  },
+  {
+    id: "actions",
+    label: "Actions",
+    icons: [
+      "search",
+      "settings",
+      "done",
+      "add",
+      "remove",
+      "delete",
+      "edit",
+      "save",
+      "refresh",
+      "undo",
+      "redo",
+      "download",
+      "upload",
+      "share",
+      "print",
+      "content_copy",
+      "content_paste",
+      "open_in_new",
+      "launch",
+      "drag_indicator",
+      "tune",
+      "sort",
+      "filter_list"
+    ]
+  },
+  {
+    id: "communication",
+    label: "Communication",
+    icons: [
+      "mail",
+      "chat",
+      "call",
+      "notifications",
+      "forum",
+      "send",
+      "inbox",
+      "drafts",
+      "mark_email_read",
+      "contact_mail",
+      "alternate_email",
+      "comment",
+      "chat_bubble",
+      "sms",
+      "voicemail"
+    ]
+  },
+  {
+    id: "content",
+    label: "Content",
+    icons: [
+      "add_circle",
+      "remove_circle",
+      "check_circle",
+      "cancel",
+      "flag",
+      "bookmark",
+      "star",
+      "favorite",
+      "thumb_up",
+      "thumb_down",
+      "push_pin",
+      "link",
+      "link_off",
+      "bolt",
+      "label",
+      "inventory_2",
+      "visibility",
+      "visibility_off"
+    ]
+  },
+  {
+    id: "media",
+    label: "Media",
+    icons: [
+      "play_arrow",
+      "pause",
+      "stop",
+      "skip_next",
+      "skip_previous",
+      "fast_forward",
+      "fast_rewind",
+      "replay",
+      "shuffle",
+      "repeat",
+      "volume_up",
+      "volume_off",
+      "music_note",
+      "image",
+      "photo_camera",
+      "videocam",
+      "mic"
+    ]
+  },
+  {
+    id: "file",
+    label: "File & Folder",
+    icons: [
+      "folder",
+      "folder_open",
+      "create_new_folder",
+      "description",
+      "file_copy",
+      "attach_file",
+      "cloud",
+      "cloud_upload",
+      "cloud_download",
+      "cloud_off",
+      "storage",
+      "snippet_folder"
+    ]
+  },
+  {
+    id: "social",
+    label: "Social & People",
+    icons: [
+      "person",
+      "group",
+      "person_add",
+      "person_remove",
+      "people",
+      "face",
+      "sentiment_satisfied",
+      "sentiment_dissatisfied",
+      "public",
+      "workspace_premium",
+      "emoji_events",
+      "military_tech"
+    ]
+  },
+  {
+    id: "alerts",
+    label: "Alerts & Status",
+    icons: [
+      "error",
+      "warning",
+      "info",
+      "help",
+      "check_circle",
+      "report",
+      "new_releases",
+      "notification_important",
+      "priority_high",
+      "verified",
+      "shield",
+      "security",
+      "lock",
+      "lock_open"
+    ]
+  },
+  {
+    id: "device",
+    label: "Device & Hardware",
+    icons: [
+      "phone_android",
+      "computer",
+      "tablet_mac",
+      "watch",
+      "keyboard",
+      "mouse",
+      "headphones",
+      "speaker",
+      "monitor",
+      "devices",
+      "memory",
+      "battery_full",
+      "wifi",
+      "bluetooth",
+      "usb",
+      "dark_mode",
+      "light_mode"
+    ]
+  },
+  {
+    id: "editor",
+    label: "Editor & Formatting",
+    icons: [
+      "format_bold",
+      "format_italic",
+      "format_underlined",
+      "format_list_bulleted",
+      "format_list_numbered",
+      "format_quote",
+      "format_align_left",
+      "format_align_center",
+      "format_align_right",
+      "title",
+      "text_fields",
+      "code",
+      "palette",
+      "color_lens",
+      "brush",
+      "auto_fix_high"
+    ]
+  }
+];
+
 // src/fonts/googleFonts.ts
 var GOOGLE_FONTS = [
   // Sans-serif
@@ -3613,6 +3832,7 @@ exports.ERROR_DEFAULTS = ERROR_DEFAULTS;
 exports.Frame = Frame;
 exports.GOOGLE_FONTS = GOOGLE_FONTS;
 exports.HueSlider = HueSlider;
+exports.ICON_CATALOG = ICON_CATALOG;
 exports.Icon = Icon;
 exports.NEUTRAL_DEFAULTS = NEUTRAL_DEFAULTS;
 exports.Navbar = Navbar;