@newtonedev/components 0.1.0 → 0.1.2

package/dist/registry/codegen.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentMeta } from './types';
+/**
+ * Generates a ready-to-paste JSX code snippet for a component with the given prop overrides.
+ *
+ * - Includes the import statement
+ * - Omits props that match their default values
+ * - Adds placeholder handlers for interactive props
+ * - Formats Select's options as a const declaration
+ */
+export declare function generateComponentCode(component: ComponentMeta, propOverrides: Record<string, unknown>): string;
+//# sourceMappingURL=codegen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"codegen.d.ts","sourceRoot":"","sources":["../../src/registry/codegen.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAwB7C;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,aAAa,EACxB,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACrC,MAAM,CAmFR"}

package/dist/registry/index.d.ts

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

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

@@ -0,0 +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"}

package/dist/registry/registry.d.ts

@@ -0,0 +1,7 @@
+import type { CategoryMeta, ComponentMeta } from './types';
+export declare const CATEGORIES: readonly CategoryMeta[];
+export declare const COMPONENTS: readonly ComponentMeta[];
+export declare function getComponent(id: string): ComponentMeta | undefined;
+export declare function getCategory(id: string): CategoryMeta | undefined;
+export declare function getComponentsByCategory(categoryId: string): readonly ComponentMeta[];
+//# sourceMappingURL=registry.d.ts.map

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

@@ -0,0 +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,EAK7C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,SAAS,aAAa,EA4X9C,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

@@ -0,0 +1,32 @@
+export interface CategoryMeta {
+    readonly id: string;
+    readonly name: string;
+    readonly description: string;
+}
+export interface VariantMeta {
+    readonly id: string;
+    readonly label: string;
+    readonly props: Record<string, unknown>;
+}
+export interface EditablePropOption {
+    readonly label: string;
+    readonly value: string | number | boolean;
+}
+export interface EditableProp {
+    readonly name: string;
+    readonly label: string;
+    readonly control: 'select' | 'text' | 'toggle' | 'number';
+    readonly options?: readonly EditablePropOption[];
+    readonly defaultValue: string | number | boolean;
+}
+export interface ComponentMeta {
+    readonly id: string;
+    readonly name: string;
+    readonly importName: string;
+    readonly categoryId: string;
+    readonly description: string;
+    readonly hasChildren: boolean;
+    readonly variants: readonly VariantMeta[];
+    readonly editableProps: readonly EditableProp[];
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

package/dist/theme/FrameContext.d.ts

@@ -0,0 +1,24 @@
+import type { ThemeName, ElevationLevel } from './types';
+/**
+ * Context value provided by Frame to its descendants.
+ * Contains the resolved theme and elevation that children should use.
+ */
+export interface FrameContextValue {
+    readonly theme: ThemeName;
+    readonly elevation: ElevationLevel;
+}
+/**
+ * FrameContext - Propagates theme and elevation overrides from Frame to descendants.
+ *
+ * When null, components fall back to NewtoneProvider's theme and default elevation (1).
+ * When present, useTokens() reads from this context instead.
+ */
+export declare const FrameContext: import("react").Context<FrameContextValue | null>;
+/**
+ * useFrameContext - Read the nearest Frame's context, if any.
+ *
+ * Returns null when no parent Frame exists. This is intentionally not an error —
+ * components outside a Frame simply fall back to the NewtoneProvider defaults.
+ */
+export declare function useFrameContext(): FrameContextValue | null;
+//# sourceMappingURL=FrameContext.d.ts.map

package/dist/theme/FrameContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameContext.d.ts","sourceRoot":"","sources":["../../src/theme/FrameContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzD;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC;CACpC;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,mDAAgD,CAAC;AAE1E;;;;;GAKG;AACH,wBAAgB,eAAe,IAAI,iBAAiB,GAAG,IAAI,CAE1D"}

package/dist/theme/NewtoneProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewtoneProvider.d.ts","sourceRoot":"","sources":["../../src/theme/NewtoneProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAK7F,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAClC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAA6B,EAC7B,WAAqB,EACrB,YAAwB,EACxB,QAAQ,GACT,EAAE,oBAAoB,qBAgBtB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,IAAI,mBAAmB,CAMrD"}
+{"version":3,"file":"NewtoneProvider.d.ts","sourceRoot":"","sources":["../../src/theme/NewtoneProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAO7F,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAClC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CACpC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAA6B,EAC7B,WAAqB,EACrB,YAAwB,EACxB,QAAQ,GACT,EAAE,oBAAoB,qBAsBtB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,IAAI,mBAAmB,CAMrD"}

package/dist/theme/defaults.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../src/theme/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAclD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,kBAuBlC,CAAC"}
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../src/theme/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAclD;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,kBA0ElC,CAAC"}

package/dist/theme/types.d.ts

@@ -3,15 +3,30 @@ import type { DynamicRange, PaletteConfig } from 'newtone';
  * Color mode: light or dark
  */
 export type ColorMode = 'light' | 'dark';
+/**
+ * Font configuration for a single font slot
+ */
+export interface FontConfig {
+    readonly type: 'system' | 'google' | 'custom';
+    readonly family: string;
+    readonly customUrl?: string;
+    readonly fallback: string;
+}
 /**
  * Theme names for different UI contexts
  */
 export type ThemeName = 'neutral' | 'primary' | 'secondary' | 'strong';
 /**
- * Elevation levels for surfaces
+ * Elevation levels for surfaces (internal)
  * 0 = sunken, 1 = default, 2 = elevated
  */
 export type ElevationLevel = 0 | 1 | 2;
+/**
+ * User-facing elevation for Frame component
+ * -2 = deeply sunken (inset shadow), -1 = sunken, 0 = default,
+ * 1 = elevated, 2 = prominently elevated (drop shadow)
+ */
+export type FrameElevation = -2 | -1 | 0 | 1 | 2;
 /**
  * Theme mapping: which palette and normalizedValue to use for backgrounds/text
  * Based on playground theme preview logic
@@ -42,6 +57,54 @@ export interface NewtoneThemeConfig {
     readonly elevation: {
         readonly offsets: readonly [number, number, number];
     };
+    readonly spacing: {
+        readonly xs: number;
+        readonly sm: number;
+        readonly md: number;
+        readonly lg: number;
+        readonly xl: number;
+        readonly xxl: number;
+    };
+    readonly radius: {
+        readonly none: number;
+        readonly sm: number;
+        readonly md: number;
+        readonly lg: number;
+        readonly xl: number;
+        readonly pill: 999;
+    };
+    readonly typography: {
+        readonly fonts: {
+            readonly mono: FontConfig;
+            readonly display: FontConfig;
+            readonly default: FontConfig;
+        };
+        readonly scale: {
+            readonly xs: number;
+            readonly sm: number;
+            readonly base: number;
+            readonly md: number;
+            readonly lg: number;
+            readonly xl: number;
+            readonly xxl: number;
+        };
+        readonly lineHeight: {
+            readonly tight: number;
+            readonly normal: number;
+            readonly relaxed: number;
+        };
+        readonly fontWeight: {
+            readonly regular: number;
+            readonly medium: number;
+            readonly semibold: number;
+            readonly bold: number;
+        };
+    };
+    readonly icons: {
+        readonly variant: 'outlined' | 'rounded' | 'sharp';
+        readonly weight: 100 | 200 | 300 | 400 | 500 | 600 | 700;
+        readonly autoGrade: boolean;
+    };
 }
 /**
  * Current theme context state

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;AAEvE;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEvC;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,YAAY,EAAE,YAAY,CAAC;IACpC,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;CACjD;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACxC,QAAQ,CAAC,MAAM,EAAE;QACf,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;QAC/B,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;QAC/B,QAAQ,CAAC,SAAS,EAAE,YAAY,CAAC;QACjC,QAAQ,CAAC,MAAM,EAAE,YAAY,CAAC;KAC/B,CAAC;IACF,QAAQ,CAAC,SAAS,EAAE;QAClB,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;KACrD,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,MAAM,EAAE,kBAAkB,CAAC;IACpC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAC/C"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"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"}

package/dist/tokens/computeTokens.d.ts

@@ -1,4 +1,4 @@
-import type { ColorSystemConfig, ColorMode, ThemeMapping, ElevationLevel } from '../theme/types';
+import type { ColorSystemConfig, ColorMode, ThemeMapping, ElevationLevel, FontConfig } from '../theme/types';
 import type { ResolvedTokens } from './types';
 /**
  * Compute design tokens for a specific mode/theme/elevation combination.
@@ -12,6 +12,10 @@ import type { ResolvedTokens } from './types';
  * @param themeMapping - Theme configuration (which palette and NV to use)
  * @param elevation - Elevation level (0=sunken, 1=default, 2=elevated)
  * @param elevationOffsets - NV offsets for each elevation level
+ * @param spacing - Spacing scale for paddings, gaps, and margins
+ * @param radius - Border radius scale for component roundness
+ * @param typography - Typography configuration with fonts and scales
+ * @param icons - Icon configuration with variant, weight, and auto-grade setting
  * @returns Resolved design tokens with all necessary colors
  *
  * @example
@@ -21,10 +25,58 @@ import type { ResolvedTokens } from './types';
  *   'light',
  *   config.themes.neutral,
  *   1,
- *   config.elevation.offsets
+ *   config.elevation.offsets,
+ *   config.spacing,
+ *   config.radius,
+ *   config.typography,
+ *   config.icons
  * );
  * console.log(tokens.background.srgb); // { r: 0.95, g: 0.95, b: 0.95 }
  * ```
  */
-export declare function computeTokens(config: ColorSystemConfig, mode: ColorMode, themeMapping: ThemeMapping, elevation: ElevationLevel, elevationOffsets: readonly [number, number, number]): ResolvedTokens;
+export declare function computeTokens(config: ColorSystemConfig, mode: ColorMode, themeMapping: ThemeMapping, elevation: ElevationLevel, elevationOffsets: readonly [number, number, number], spacing: {
+    readonly xs: number;
+    readonly sm: number;
+    readonly md: number;
+    readonly lg: number;
+    readonly xl: number;
+    readonly xxl: number;
+}, radius: {
+    readonly none: number;
+    readonly sm: number;
+    readonly md: number;
+    readonly lg: number;
+    readonly xl: number;
+    readonly pill: 999;
+}, typography: {
+    readonly fonts: {
+        readonly mono: FontConfig;
+        readonly display: FontConfig;
+        readonly default: FontConfig;
+    };
+    readonly scale: {
+        readonly xs: number;
+        readonly sm: number;
+        readonly base: number;
+        readonly md: number;
+        readonly lg: number;
+        readonly xl: number;
+        readonly xxl: number;
+    };
+    readonly lineHeight: {
+        readonly tight: number;
+        readonly normal: number;
+        readonly relaxed: number;
+    };
+    readonly fontWeight: {
+        readonly regular: number;
+        readonly medium: number;
+        readonly semibold: number;
+        readonly bold: number;
+    };
+}, icons: {
+    readonly variant: 'outlined' | 'rounded' | 'sharp';
+    readonly weight: 100 | 200 | 300 | 400 | 500 | 600 | 700;
+    readonly autoGrade: boolean;
+}): ResolvedTokens;
 //# sourceMappingURL=computeTokens.d.ts.map

package/dist/tokens/computeTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"computeTokens.d.ts","sourceRoot":"","sources":["../../src/tokens/computeTokens.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACjG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,iBAAiB,EACzB,IAAI,EAAE,SAAS,EACf,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,cAAc,EACzB,gBAAgB,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAClD,cAAc,CAoLhB"}
+{"version":3,"file":"computeTokens.d.ts","sourceRoot":"","sources":["../../src/tokens/computeTokens.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC7G,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAU9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,iBAAiB,EACzB,IAAI,EAAE,SAAS,EACf,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,cAAc,EACzB,gBAAgB,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EACnD,OAAO,EAAE;IAAE,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EAC1I,MAAM,EAAE;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAA;CAAE,EACzI,UAAU,EAAE;IACV,QAAQ,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;QAAC,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC;QAAC,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAA;KAAE,CAAC;IAC1G,QAAQ,CAAC,KAAK,EAAE;QAAE,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACzK,QAAQ,CAAC,UAAU,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACnG,QAAQ,CAAC,UAAU,EAAE;QAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9H,EACD,KAAK,EAAE;IACL,QAAQ,CAAC,OAAO,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;IACnD,QAAQ,CAAC,MAAM,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACzD,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;CAC7B,GACA,cAAc,CA+MhB"}

package/dist/tokens/types.d.ts

@@ -27,5 +27,57 @@ export interface ResolvedTokens {
     readonly warning: ColorResult;
     /** Error/destructive state color (from error palette, index 4) */
     readonly error: ColorResult;
+    /** Spacing tokens for paddings, gaps, and margins */
+    readonly spacing: {
+        readonly xs: number;
+        readonly sm: number;
+        readonly md: number;
+        readonly lg: number;
+        readonly xl: number;
+        readonly xxl: number;
+    };
+    /** Border radius tokens for component roundness */
+    readonly radius: {
+        readonly none: number;
+        readonly sm: number;
+        readonly md: number;
+        readonly lg: number;
+        readonly xl: number;
+        readonly pill: 999;
+    };
+    /** Typography tokens for fonts, sizes, line heights, and weights */
+    readonly typography: {
+        readonly fonts: {
+            readonly mono: string;
+            readonly display: string;
+            readonly default: string;
+        };
+        readonly size: {
+            readonly xs: number;
+            readonly sm: number;
+            readonly base: number;
+            readonly md: number;
+            readonly lg: number;
+            readonly xl: number;
+            readonly xxl: number;
+        };
+        readonly lineHeight: {
+            readonly tight: number;
+            readonly normal: number;
+            readonly relaxed: number;
+        };
+        readonly weight: {
+            readonly regular: number;
+            readonly medium: number;
+            readonly semibold: number;
+            readonly bold: number;
+        };
+    };
+    /** Icon tokens for Material Symbols configuration */
+    readonly icons: {
+        readonly variant: 'outlined' | 'rounded' | 'sharp';
+        readonly weight: 100 | 200 | 300 | 400 | 500 | 600 | 700;
+        readonly grade: -25 | 0 | 200;
+    };
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,+CAA+C;IAC/C,QAAQ,CAAC,UAAU,EAAE,WAAW,CAAC;IACjC,6DAA6D;IAC7D,QAAQ,CAAC,kBAAkB,EAAE,WAAW,CAAC;IACzC,iEAAiE;IACjE,QAAQ,CAAC,gBAAgB,EAAE,WAAW,CAAC;IACvC,uDAAuD;IACvD,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,iEAAiE;IACjE,QAAQ,CAAC,aAAa,EAAE,WAAW,CAAC;IACpC,iDAAiD;IACjD,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,sCAAsC;IACtC,QAAQ,CAAC,gBAAgB,EAAE,WAAW,CAAC;IACvC,+CAA+C;IAC/C,QAAQ,CAAC,iBAAiB,EAAE,WAAW,CAAC;IACxC,yCAAyC;IACzC,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;IAC7B,0DAA0D;IAC1D,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,0DAA0D;IAC1D,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,kEAAkE;IAClE,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC;CAC7B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}

package/dist/tokens/useTokens.d.ts

@@ -3,21 +3,24 @@ import type { ResolvedTokens } from './types';
 /**
  * Hook to compute design tokens for the current theme/mode/elevation.
  *
- * This hook automatically recomputes tokens when the theme configuration,
- * mode, theme name, or elevation changes. Results are memoized to avoid
- * unnecessary computation.
+ * Resolution order:
+ * 1. Explicit elevation parameter takes highest priority
+ * 2. FrameContext values (from nearest parent Frame) are used when elevation is omitted
+ * 3. Falls back to NewtoneProvider theme + elevation 1
  *
- * @param elevation - Elevation level (0=sunken, 1=default, 2=elevated)
+ * Theme always reads from FrameContext if present, falling back to NewtoneProvider.
+ *
+ * @param elevation - Elevation level (0=sunken, 1=default, 2=elevated).
+ *                    When omitted, reads from FrameContext or defaults to 1.
  * @returns Resolved design tokens with all necessary colors
  *
  * @example
  * ```tsx
- * function Button() {
- *   const tokens = useTokens(1); // Default elevation
+ * // Inside a <Frame theme="primary" elevation={1}>:
+ * function MyComponent() {
+ *   const tokens = useTokens(); // Gets primary theme, elevation 2 (mapped from Frame's 1)
  *   return (
- *     <button style={{ backgroundColor: srgbToHex(tokens.interactive.srgb) }}>
- *       Click me
- *     </button>
+ *     <View style={{ backgroundColor: srgbToHex(tokens.background.srgb) }} />
  *   );
  * }
  * ```

package/dist/tokens/useTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTokens.d.ts","sourceRoot":"","sources":["../../src/tokens/useTokens.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,SAAS,CAAC,SAAS,GAAE,cAAkB,GAAG,cAAc,CAavE"}
+{"version":3,"file":"useTokens.d.ts","sourceRoot":"","sources":["../../src/tokens/useTokens.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,SAAS,CAAC,SAAS,CAAC,EAAE,cAAc,GAAG,cAAc,CAwBpE"}

package/package.json

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

package/src/AppShell/AppShell.styles.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+import { srgbToHex } from 'newtone';
+import type { ResolvedTokens } from '../tokens/types';
+
+export function getAppShellStyles(tokens: ResolvedTokens) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      flexDirection: 'row',
+      overflow: 'hidden',
+      backgroundColor: srgbToHex(tokens.background.srgb),
+    },
+    main: {
+      flex: 1,
+      flexDirection: 'column',
+      minWidth: 0,
+      overflow: 'hidden',
+    },
+  });
+}

package/src/AppShell/AppShell.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { AppShellProps } from './AppShell.types';
+import { useTokens } from '../tokens/useTokens';
+import { getAppShellStyles } from './AppShell.styles';
+
+export function AppShell({ sidebar, children }: AppShellProps) {
+  const tokens = useTokens();
+  const styles = React.useMemo(() => getAppShellStyles(tokens), [tokens]);
+
+  return (
+    <View style={styles.container}>
+      {sidebar}
+      <View style={styles.main}>{children}</View>
+    </View>
+  );
+}

package/src/AppShell/AppShell.types.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+
+export interface AppShellProps {
+  /** Sidebar element rendered on the left */
+  readonly sidebar?: ReactNode;
+  /** Main content area (navbar + page content) */
+  readonly children: ReactNode;
+}

package/src/AppShell/index.ts

@@ -0,0 +1,2 @@
+export { AppShell } from './AppShell';
+export type { AppShellProps } from './AppShell.types';

package/src/Button/Button.styles.ts

@@ -4,13 +4,36 @@ import type { ResolvedTokens } from '../tokens/types';
 import type { ButtonVariant, ButtonSize } from './Button.types';
 
 /**
- * Size configuration for buttons
+ * Get size configuration for buttons using design tokens
  */
-const SIZE_CONFIG = {
-  sm: { paddingVertical: 6, paddingHorizontal: 12, fontSize: 12, borderRadius: 4 },
-  md: { paddingVertical: 10, paddingHorizontal: 20, fontSize: 14, borderRadius: 6 },
-  lg: { paddingVertical: 14, paddingHorizontal: 28, fontSize: 16, borderRadius: 8 },
-} as const;
+function getSizeConfig(tokens: ResolvedTokens) {
+  return {
+    sm: {
+      paddingVertical: tokens.spacing.xs,
+      paddingHorizontal: tokens.spacing.md,
+      fontSize: tokens.typography.size.sm,
+      borderRadius: tokens.radius.sm,
+      gap: tokens.spacing.xs,
+      iconSize: tokens.typography.size.sm,
+    },
+    md: {
+      paddingVertical: tokens.spacing.sm,
+      paddingHorizontal: tokens.spacing.lg,
+      fontSize: tokens.typography.size.base,
+      borderRadius: tokens.radius.md,
+      gap: tokens.spacing.sm,
+      iconSize: tokens.typography.size.base,
+    },
+    lg: {
+      paddingVertical: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.xl,
+      fontSize: tokens.typography.size.base,
+      borderRadius: tokens.radius.lg,
+      gap: tokens.spacing.sm,
+      iconSize: tokens.typography.size.base,
+    },
+  };
+}
 
 /**
  * Compute button styles based on tokens, variant, size, and state
@@ -19,24 +42,27 @@ const SIZE_CONFIG = {
  * @param variant - Button variant (primary, secondary, ghost, outline)
  * @param size - Button size (sm, md, lg)
  * @param disabled - Whether button is disabled
- * @returns StyleSheet with button styles
+ * @param isIconOnly - Whether the button shows only an icon (no text)
+ * @returns StyleSheet with button styles + iconColor for the Icon component
  */
 export function getButtonStyles(
   tokens: ResolvedTokens,
   variant: ButtonVariant,
   size: ButtonSize,
-  disabled: boolean
+  disabled: boolean,
+  isIconOnly: boolean
 ) {
-  const sizeConfig = SIZE_CONFIG[size];
+  const sizeConfig = getSizeConfig(tokens)[size];
 
   // Base styles
   const base = {
     paddingVertical: sizeConfig.paddingVertical,
-    paddingHorizontal: sizeConfig.paddingHorizontal,
+    paddingHorizontal: isIconOnly ? sizeConfig.paddingVertical : sizeConfig.paddingHorizontal,
     borderRadius: sizeConfig.borderRadius,
     alignItems: 'center' as const,
     justifyContent: 'center' as const,
     flexDirection: 'row' as const,
+    gap: sizeConfig.gap,
   };
 
   // Variant-specific colors
@@ -66,35 +92,42 @@ export function getButtonStyles(
       break;
   }
 
-  return StyleSheet.create({
-    base: {
-      ...base,
-      backgroundColor: disabled ? srgbToHex(tokens.backgroundSunken.srgb) : backgroundColor,
-      borderWidth,
-      ...(borderColor && { borderColor }),
-    },
-    pressed: {
-      backgroundColor:
-        variant === 'primary'
-          ? srgbToHex(tokens.interactiveActive.srgb)
-          : variant === 'secondary'
-          ? srgbToHex(tokens.backgroundSunken.srgb)
-          : 'transparent',
-      opacity: variant === 'ghost' || variant === 'outline' ? 0.7 : 1,
-    },
-    disabled: {
-      opacity: 0.4,
-    },
-    text: {
-      fontSize: sizeConfig.fontSize,
-      fontWeight: '600' as const,
-      color: disabled ? srgbToHex(tokens.textSecondary.srgb) : textColor,
-    },
-    textPressed: {
-      // Color changes handled by parent opacity
-    },
-    textDisabled: {
-      // Color already set in text style via disabled check
-    },
-  });
+  const resolvedTextColor = disabled ? srgbToHex(tokens.textSecondary.srgb) : textColor;
+
+  return {
+    iconColor: resolvedTextColor,
+    iconSize: sizeConfig.iconSize,
+    styles: StyleSheet.create({
+      base: {
+        ...base,
+        backgroundColor: disabled ? srgbToHex(tokens.backgroundSunken.srgb) : backgroundColor,
+        borderWidth,
+        ...(borderColor && { borderColor }),
+      },
+      pressed: {
+        backgroundColor:
+          variant === 'primary'
+            ? srgbToHex(tokens.interactiveActive.srgb)
+            : variant === 'secondary'
+            ? srgbToHex(tokens.backgroundSunken.srgb)
+            : 'transparent',
+        opacity: variant === 'ghost' || variant === 'outline' ? 0.7 : 1,
+      },
+      disabled: {
+        opacity: 0.4,
+      },
+      text: {
+        fontFamily: tokens.typography.fonts.default,
+        fontSize: sizeConfig.fontSize,
+        fontWeight: tokens.typography.weight.semibold as any,
+        color: resolvedTextColor,
+      },
+      textPressed: {
+        // Color changes handled by parent opacity
+      },
+      textDisabled: {
+        // Color already set in text style via disabled check
+      },
+    }),
+  };
 }