@newtonedev/components 0.1.6 → 0.1.7

package/dist/primitives/Icon/Icon.d.ts

@@ -13,5 +13,5 @@ import type { IconProps } from './Icon.types';
  * <Icon name="check" color="#00ff00" />
  * ```
  */
-export declare function Icon({ name, size, opticalSize, fill, color, elevation, style, onPress, accessibilityLabel, testID, nativeID, ref, }: IconProps): React.JSX.Element;
+export declare function Icon({ name, size, opticalSize, fill, color, style, accessibilityLabel, testID, nativeID, ref, }: IconProps): React.JSX.Element;
 //# sourceMappingURL=Icon.d.ts.map

package/dist/primitives/Icon/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,IAAQ,EACR,KAAK,EACL,SAAa,EACb,KAAK,EACL,OAAO,EAEP,kBAAkB,EAElB,MAAM,EACN,QAAQ,EACR,GAAG,GACJ,EAAE,SAAS,qBAqEX"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,IAAQ,EACR,KAAK,EACL,KAAK,EAEL,kBAAkB,EAElB,MAAM,EACN,QAAQ,EACR,GAAG,GACJ,EAAE,SAAS,qBAqEX"}

package/dist/primitives/Icon/Icon.types.d.ts

@@ -1,17 +1,16 @@
 import type { Text as RNText, TextStyle } from 'react-native';
-import type { ElevationLevel } from '../../theme/types';
 /**
  * Props for Icon — Material Symbols icon with variable font support.
  *
- * Uses the icon variant, weight, and grade from the theme config.
- * Per-instance control over size, fill, and color.
+ * Icon is a pure presentation primitive. It inherits elevation from the
+ * nearest parent Frame via FrameContext. For interactive icons, wrap in
+ * `<Button icon="..." />` instead.
  *
  * @example
  * ```tsx
  * <Icon name="home" />
  * <Icon name="settings" size={24} fill={1} />
  * <Icon name="check" color="#00ff00" />
- * <Icon name="delete" size={20} onPress={() => handleDelete()} />
  * ```
  *
  * @see {@link https://fonts.google.com/icons Material Symbols icon reference}
@@ -31,18 +30,14 @@ export interface IconProps {
     /**
      * Fill state for the icon.
      *
-     * - `0` — Outlined (default)
-     * - `1` — Filled (solid)
+     * - `false` / `0` — Outlined (default)
+     * - `true` / `1` — Filled (solid)
      */
-    readonly fill?: 0 | 1;
+    readonly fill?: boolean | 0 | 1;
     /** Icon color as hex string. @default tokens.textPrimary */
     readonly color?: string;
-    /** Elevation level for token computation. @default 1 */
-    readonly elevation?: ElevationLevel;
-    /** Additional styles applied to the icon Text element. */
+    /** Additional styles applied to the icon Text element (positioning, transforms). */
     readonly style?: TextStyle;
-    /** Press handler — makes the icon tappable. */
-    readonly onPress?: () => void;
     /** Label read by screen readers. When omitted, the icon is treated as decorative (hidden from assistive technology). */
     readonly accessibilityLabel?: string;
     /** Test identifier — maps to `data-testid` on web. Used by testing libraries. */

package/dist/primitives/Icon/Icon.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.types.d.ts","sourceRoot":"","sources":["../../../src/primitives/Icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,MAAM,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,SAAS;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB,wEAAwE;IACxE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEvB,uHAAuH;IACvH,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAE9B;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IAEtB,4DAA4D;IAC5D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAExB,wDAAwD;IACxD,QAAQ,CAAC,SAAS,CAAC,EAAE,cAAc,CAAC;IAEpC,0DAA0D;IAC1D,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAE3B,+CAA+C;IAC/C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAI9B,wHAAwH;IACxH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAIrC,iFAAiF;IACjF,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,0CAA0C;IAC1C,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;CAClC"}
+{"version":3,"file":"Icon.types.d.ts","sourceRoot":"","sources":["../../../src/primitives/Icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,IAAI,MAAM,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,SAAS;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB,wEAAwE;IACxE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEvB,uHAAuH;IACvH,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAE9B;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC;IAEhC,4DAA4D;IAC5D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAExB,oFAAoF;IACpF,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAI3B,wHAAwH;IACxH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAIrC,iFAAiF;IACjF,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,0CAA0C;IAC1C,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;CAClC"}

package/dist/registry/icons.d.ts

@@ -0,0 +1,7 @@
+export interface IconCatalogCategory {
+    readonly id: string;
+    readonly label: string;
+    readonly icons: readonly string[];
+}
+export declare const ICON_CATALOG: readonly IconCatalogCategory[];
+//# sourceMappingURL=icons.d.ts.map

package/dist/registry/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/registry/icons.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAC;CACnC;AAED,eAAO,MAAM,YAAY,EAAE,SAAS,mBAAmB,EAwGtD,CAAC"}

package/dist/registry/index.d.ts

@@ -1,4 +1,6 @@
 export type { CategoryMeta, VariantMeta, EditableProp, EditablePropOption, ComponentMeta, } from './types';
 export { CATEGORIES, COMPONENTS, getComponent, getCategory, getComponentsByCategory, } from './registry';
 export { generateComponentCode } from './codegen';
+export type { IconCatalogCategory } from './icons';
+export { ICON_CATALOG } from './icons';
 //# sourceMappingURL=index.d.ts.map

package/dist/registry/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/registry/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,aAAa,GACd,MAAM,SAAS,CAAC;AAEjB,OAAO,EACL,UAAU,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,uBAAuB,GACxB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/registry/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,kBAAkB,EAClB,aAAa,GACd,MAAM,SAAS,CAAC;AAEjB,OAAO,EACL,UAAU,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,uBAAuB,GACxB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAElD,YAAY,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/registry/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/registry/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,UAAU,EAAE,SAAS,YAAY,EAO7C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAAS,aAAa,EAmmB9C,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAElE;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAEhE;AAED,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,aAAa,EAAE,CAEpF"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/registry/registry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,UAAU,EAAE,SAAS,YAAY,EAO7C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAAS,aAAa,EA8lB9C,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAAE,EAAE,MAAM,GAAG,aAAa,GAAG,SAAS,CAElE;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,YAAY,GAAG,SAAS,CAEhE;AAED,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,aAAa,EAAE,CAEpF"}

package/dist/registry/types.d.ts

@@ -15,7 +15,7 @@ export interface EditablePropOption {
 export interface EditableProp {
     readonly name: string;
     readonly label: string;
-    readonly control: 'select' | 'text' | 'toggle' | 'number';
+    readonly control: 'select' | 'text' | 'toggle' | 'number' | 'discrete-slider';
     readonly options?: readonly EditablePropOption[];
     readonly defaultValue: string | number | boolean;
 }

package/dist/registry/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/registry/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAC3C;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC1D,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACjD,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAClD;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,CAAC;IAC1C,QAAQ,CAAC,aAAa,EAAE,SAAS,YAAY,EAAE,CAAC;CACjD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/registry/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;CAC9B;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAC3C;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,iBAAiB,CAAC;IAC9E,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACjD,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAClD;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,WAAW,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,CAAC;IAC1C,QAAQ,CAAC,aAAa,EAAE,SAAS,YAAY,EAAE,CAAC;CACjD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonedev/components",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "React + React Native Web component library for Newtone",
   "license": "MIT",
   "repository": {

package/src/index.ts

@@ -115,6 +115,7 @@ export type {
   EditableProp,
   EditablePropOption,
   ComponentMeta,
+  IconCatalogCategory,
 } from './registry';
 export {
   CATEGORIES,
@@ -123,6 +124,7 @@ export {
   getCategory,
   getComponentsByCategory,
   generateComponentCode,
+  ICON_CATALOG,
 } from './registry';
 
 // Fonts

package/src/primitives/Icon/Icon.tsx

@@ -23,9 +23,7 @@ export function Icon({
   opticalSize,
   fill = 0,
   color,
-  elevation = 1,
   style,
-  onPress,
   // Accessibility
   accessibilityLabel,
   // Testing & platform
@@ -33,8 +31,8 @@ export function Icon({
   nativeID,
   ref,
 }: IconProps) {
-  // Get the current theme's design tokens for colors, typography, and icon settings.
-  const tokens = useTokens(elevation);
+  // Inherit tokens from nearest parent Frame via FrameContext.
+  const tokens = useTokens();
 
   // Build the icon's style from the theme tokens and props.
   // Wrapped in useMemo so it only recalculates when the inputs change,
@@ -69,7 +67,8 @@ export function Icon({
     //   wght: font weight (thinner or bolder strokes)
     //   GRAD: grade (fine-tune weight without changing overall size)
     //   opsz: optical size (adjusts detail level for the display size)
-    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,
@@ -96,7 +95,6 @@ export function Icon({
       // so assistive technology doesn't try to read the ligature text (e.g. "home").
       importantForAccessibility={accessibilityLabel ? 'yes' : 'no-hide-descendants'}
       style={iconStyle}
-      onPress={onPress} // When provided, makes the icon tappable
     >
       {name}
     </Text>

package/src/primitives/Icon/Icon.types.ts

@@ -1,18 +1,17 @@
 import type { Text as RNText, TextStyle } from 'react-native';
-import type { ElevationLevel } from '../../theme/types';
 
 /**
  * Props for Icon — Material Symbols icon with variable font support.
  *
- * Uses the icon variant, weight, and grade from the theme config.
- * Per-instance control over size, fill, and color.
+ * Icon is a pure presentation primitive. It inherits elevation from the
+ * nearest parent Frame via FrameContext. For interactive icons, wrap in
+ * `<Button icon="..." />` instead.
  *
  * @example
  * ```tsx
  * <Icon name="home" />
  * <Icon name="settings" size={24} fill={1} />
  * <Icon name="check" color="#00ff00" />
- * <Icon name="delete" size={20} onPress={() => handleDelete()} />
  * ```
  *
  * @see {@link https://fonts.google.com/icons Material Symbols icon reference}
@@ -35,23 +34,17 @@ export interface IconProps {
   /**
    * Fill state for the icon.
    *
-   * - `0` — Outlined (default)
-   * - `1` — Filled (solid)
+   * - `false` / `0` — Outlined (default)
+   * - `true` / `1` — Filled (solid)
    */
-  readonly fill?: 0 | 1;
+  readonly fill?: boolean | 0 | 1;
 
   /** Icon color as hex string. @default tokens.textPrimary */
   readonly color?: string;
 
-  /** Elevation level for token computation. @default 1 */
-  readonly elevation?: ElevationLevel;
-
-  /** Additional styles applied to the icon Text element. */
+  /** Additional styles applied to the icon Text element (positioning, transforms). */
   readonly style?: TextStyle;
 
-  /** Press handler — makes the icon tappable. */
-  readonly onPress?: () => void;
-
   // ── Accessibility ──
 
   /** Label read by screen readers. When omitted, the icon is treated as decorative (hidden from assistive technology). */

package/src/registry/icons.ts

@@ -0,0 +1,111 @@
+export interface IconCatalogCategory {
+  readonly id: string;
+  readonly label: string;
+  readonly icons: readonly string[];
+}
+
+export const ICON_CATALOG: readonly IconCatalogCategory[] = [
+  {
+    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',
+    ],
+  },
+];

package/src/registry/index.ts

@@ -15,3 +15,6 @@ export {
 } from './registry';
 
 export { generateComponentCode } from './codegen';
+
+export type { IconCatalogCategory } from './icons';
+export { ICON_CATALOG } from './icons';

package/src/registry/registry.ts

@@ -484,40 +484,35 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     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,
       },
     ],
   },

package/src/registry/types.ts

@@ -18,7 +18,7 @@ export interface EditablePropOption {
 export interface EditableProp {
   readonly name: string;
   readonly label: string;
-  readonly control: 'select' | 'text' | 'toggle' | 'number';
+  readonly control: 'select' | 'text' | 'toggle' | 'number' | 'discrete-slider';
   readonly options?: readonly EditablePropOption[];
   readonly defaultValue: string | number | boolean;
 }