@newtonedev/components 0.1.18 → 0.1.20

package/dist/primitives/Frame/Frame.styles.d.ts

@@ -30,16 +30,11 @@ export interface FrameStyleInput {
     readonly left?: OffsetValue;
     readonly zIndex?: number;
     readonly overflow?: OverflowMode;
-    readonly opacity?: number;
     readonly radius?: RadiusProp;
-    readonly bordered?: boolean;
-    readonly disabled?: boolean;
 }
 export interface FrameStyles {
     /** Main container style (ViewStyle) */
     readonly container: ViewStyle;
-    /** Style applied when pressed (background shift) */
-    readonly pressed: ViewStyle;
     /** Web-only CSS Grid properties (cast to ViewStyle at render) */
     readonly gridWebStyle: React.CSSProperties | null;
     /** Web-only inset box-shadow string for elevation -2 */
@@ -50,7 +45,6 @@ export interface FrameStyles {
  *
  * Takes the Frame's props + design tokens and produces:
  * - container: the main style (background, layout, spacing, border, shadow, etc.)
- * - pressed: style override applied when the user is pressing/clicking
  * - gridWebStyle: CSS Grid properties (only works on web, null otherwise)
  * - insetBoxShadow: inner shadow CSS string for sunken frames (web-only)
  */

package/dist/primitives/Frame/Frame.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Frame.styles.d.ts","sourceRoot":"","sources":["../../../src/primitives/Frame/Frame.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,cAAc,EAAoB,MAAM,aAAa,CAAC;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,KAAK,EACV,WAAW,EACX,OAAO,EACP,UAAU,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACb,MAAM,eAAe,CAAC;AAcvB,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,cAAc,EAAE,cAAc,CAAC;IAGxC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC;IAGrC,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAGvB,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IAGjC,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC;IAGvB,QAAQ,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAG5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACjC,QAAQ,CAAC,GAAG,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACjC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAG1B,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAID,MAAM,WAAW,WAAW;IAC1B,uCAAuC;IACvC,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,oDAAoD;IACpD,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,iEAAiE;IACjE,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;IAClD,wDAAwD;IACxD,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CACxC;AAID;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,GAAG,WAAW,CA+LlE"}
+{"version":3,"file":"Frame.styles.d.ts","sourceRoot":"","sources":["../../../src/primitives/Frame/Frame.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAE,cAAc,EAAoB,MAAM,aAAa,CAAC;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7E,OAAO,KAAK,EACV,WAAW,EACX,OAAO,EACP,UAAU,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,YAAY,EACZ,WAAW,EACX,YAAY,EACb,MAAM,eAAe,CAAC;AAcvB,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,cAAc,EAAE,cAAc,CAAC;IAGxC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC;IAGrC,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAGvB,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IAGjC,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC;IAGvB,QAAQ,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAG5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACjC,QAAQ,CAAC,GAAG,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;IAC9B,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC;IAGjC,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;CAC9B;AAID,MAAM,WAAW,WAAW;IAC1B,uCAAuC;IACvC,QAAQ,CAAC,SAAS,EAAE,SAAS,CAAC;IAC9B,iEAAiE;IACjE,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;IAClD,wDAAwD;IACxD,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CACxC;AAID;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,GAAG,WAAW,CAqKlE"}

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

@@ -1,4 +1,4 @@
-import type { View, ViewStyle, GestureResponderEvent } from 'react-native';
+import type { View, ViewStyle } from 'react-native';
 import type { FrameElevation, ThemeName, AppearanceName } from 'newtone-api';
 /** Design system spacing tokens (represent px values at Medium preset) */
 export type SpacingToken = '00' | '02' | '04' | '06' | '08' | '10' | '12' | '16' | '20' | '24' | '32' | '40' | '48';
@@ -250,12 +250,6 @@ export interface FrameProps {
      * - `'box-only'` — element receives events but children cannot
      */
     readonly pointerEvents?: PointerEventsMode;
-    /**
-     * Opacity of the element (0 = fully transparent, 1 = fully opaque).
-     *
-     * When set explicitly, overrides the automatic `0.5` opacity applied by `disabled`.
-     */
-    readonly opacity?: number;
     /**
      * Color theme for this Frame's visual rendering (background, border, text).
      *
@@ -303,14 +297,6 @@ export interface FrameProps {
      * ```
      */
     readonly radius?: RadiusProp;
-    /** Show 1px border using theme border color. @default false */
-    readonly bordered?: boolean;
-    /** Press handler — switches rendering from View to Pressable. */
-    readonly onPress?: (event: GestureResponderEvent) => void;
-    /** Navigation URL — switches rendering to Pressable with link role. */
-    readonly href?: string;
-    /** Disable interaction. @default false */
-    readonly disabled?: boolean;
     /** Accessible label read by screen readers. Use for icon-only or non-textual frames. */
     readonly accessibilityLabel?: string;
     /** Additional hint read after the label (e.g. "Opens settings page"). */

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

@@ -1 +1 @@
-{"version":3,"file":"Frame.types.d.ts","sourceRoot":"","sources":["../../../src/primitives/Frame/Frame.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAI7E,0EAA0E;AAC1E,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpH,oEAAoE;AACpE,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG,MAAM,CAAC;AAEjD,uBAAuB;AACvB,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,GAAG,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC;IAC9B,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC;IAC/B,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC;CAC9B;AAED,mCAAmC;AACnC,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC;IAC1B,QAAQ,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,CAAC;AAEpE,yBAAyB;AACzB,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,GAAG,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC;CAChC;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,OAAO,GAAG,YAAY,GAAG,OAAO,CAAC;AAI7C,kCAAkC;AAClC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEtE,mEAAmE;AACnE,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC;AAE/C,wBAAwB;AACxB,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,WAAW,CAAC;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,WAAW,CAAC;IAClC,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,aAAa,CAAC;AAIrD,uFAAuF;AACvF,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExE,kFAAkF;AAClF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC;AAE1C,8BAA8B;AAC9B,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3D,oDAAoD;AACpD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAI1E;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAIjD,kBAAkB;AAClB,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzC,yCAAyC;AACzC,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,UAAU,CAAC;AAElD,2BAA2B;AAC3B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AAE5E,8BAA8B;AAC9B,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAIzF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAInC;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,cAAc,CAAC;IAEpC;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAIzB,mCAAmC;IACnC,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAE7B,0CAA0C;IAC1C,QAAQ,CAAC,SAAS,CAAC,EAAE,SAAS,CAAC;IAE/B,uCAAuC;IACvC,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IAExB,6CAA6C;IAC7C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAE3B,gEAAgE;IAChE,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAE1B,6DAA6D;IAC7D,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAIvB,wCAAwC;IACxC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAE3B,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IAIjC;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC;IAE/B;;;;;;;;;OASG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC;IAIvB;;;;;;;OAOG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAE5B;;;;;;;OAOG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAE7B,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,gCAAgC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAE5B,gCAAgC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAI5B;;;;;OAKG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC;IAEjC,8EAA8E;IAC9E,QAAQ,CAAC,GAAG,CAAC,EAAE,WAAW,CAAC;IAE3B,gFAAgF;IAChF,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC;IAE7B,iFAAiF;IACjF,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;IAE9B,+EAA+E;IAC/E,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;IAE5B,+DAA+D;IAC/D,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB;;;;;OAKG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC;IAEjC;;;;;;;OAOG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAE3C;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAI1B;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAE3B;;;;;;;;;;;;;;;;;OAiBG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC;IAErC;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IAE7B,+DAA+D;IAC/D,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAI5B,iEAAiE;IACjE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAE1D,uEAAuE;IACvE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEvB,0CAA0C;IAC1C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAI5B,wFAAwF;IACxF,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAErC,yEAAyE;IACzE,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAIpC,iFAAiF;IACjF,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,uDAAuD;IACvD,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAI/B,6CAA6C;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAC1C"}
+{"version":3,"file":"Frame.types.d.ts","sourceRoot":"","sources":["../../../src/primitives/Frame/Frame.types.ts"],"names":[],"mappings":"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"}

package/dist/primitives/index.d.ts

@@ -5,8 +5,8 @@ export type { FrameProps, SpacingToken, SpacingValue, SpacingSides, SpacingAxes,
 export type { ResolvedCorners } from './Frame/Frame.utils';
 export { Icon } from './Icon';
 export type { IconProps } from './Icon';
-export { Wrapper } from './Wrapper';
-export type { WrapperProps } from './Wrapper';
+export { Card } from './Card';
+export type { CardProps } from './Card';
 export { Text } from './Text';
 export type { TextProps, TextSize, TextWeight, TextColor, TextScope, TextRole, TextSpanProps, TextAlign, } from './Text';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/primitives/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,aAAa,EACb,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EACV,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,GACV,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/primitives/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,EACX,OAAO,EACP,OAAO,EACP,WAAW,EACX,WAAW,EACX,aAAa,EACb,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,aAAa,GACd,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EACV,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,GACV,MAAM,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonedev/components",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "React + React Native Web component library for Newtone",
   "license": "MIT",
   "repository": {
@@ -37,7 +37,7 @@
     "react-native": ">=0.70.0"
   },
   "dependencies": {
-    "newtone-api": "^0.0.3",
+    "newtone-api": "^0.0.5",
     "newtone": "^0.1.0",
     "@newtonedev/fonts": "^0.1.0",
     "react-native-web": "^0.19.10"

package/src/composites/actions/Button/Button.styles.ts

@@ -25,6 +25,7 @@ export interface ButtonConfig {
     iconColor: string;
     borderWidth: number;
     borderColor?: string;
+    textDecoration?: 'underline' | 'none';
   };
   sizeTokens: {
     height: number;
@@ -178,20 +179,8 @@ function getVariantColors(
   tokens: UseTokensResult,
   theme: ThemeName,
 ) {
-  const t = tokens.colors[theme];
-
   if (disabled) {
-    const baseColors = getVariantColorsForState(variant, tokens, theme);
-    return {
-      ...baseColors,
-      bg: 'transparent',
-      hoveredBg: 'transparent',
-      pressedBg: 'transparent',
-      textColor: t.main.fontDisabled,
-      iconColor: t.main.fontDisabled,
-      borderWidth: 1,
-      borderColor: t.main.divider,
-    };
+    return getDisabledVariantColors(variant, tokens, theme);
   }
 
   return getVariantColorsForState(variant, tokens, theme);
@@ -224,17 +213,17 @@ function getVariantColorsForState(
   // SECONDARY: Outlined with subtle hover
   if (variant === 'secondary') {
     return {
-      bg: t.main.actionEnabled,
-      hoveredBg: t.main.actionHovered,
-      pressedBg: t.main.actionPressed,
-      textColor: t.main.fontPrimary,
-      iconColor: t.main.fontPrimary,
+      bg: t.tinted.actionEnabled,
+      hoveredBg: t.tinted.actionHovered,
+      pressedBg: t.tinted.actionPressed,
+      textColor: t.tinted.fontPrimary,
+      iconColor: t.tinted.fontPrimary,
       borderWidth: 0,
       borderColor: 'transparent',
     };
   }
 
-  // GHOST: No border, transparent background, subtle hover
+  // GHOST: No border, transparent background, subtle hover, underlined text
   return {
     bg: 'transparent',
     hoveredBg: t.main.actionEnabled,
@@ -243,5 +232,55 @@ function getVariantColorsForState(
     iconColor: t.main.fontSecondary,
     borderWidth: 0,
     borderColor: 'transparent',
+    textDecoration: 'underline' as const,
+  };
+}
+
+/**
+ * Get variant-specific disabled colors.
+ * Each variant has its own disabled treatment using mapped disabled tokens.
+ */
+function getDisabledVariantColors(
+  variant: ButtonVariant,
+  tokens: UseTokensResult,
+  theme: ThemeName,
+) {
+  const t = tokens.colors[theme];
+
+  // PRIMARY DISABLED: keeps emphasis appearance, muted text
+  if (variant === 'primary') {
+    return {
+      bg: t.main.actionEnabled,
+      hoveredBg: t.main.actionEnabled,
+      pressedBg: t.main.actionEnabled,
+      textColor: t.main.fontDisabled,
+      iconColor: t.main.fontDisabled,
+      borderWidth: 0,
+      borderColor: 'transparent',
+    };
+  }
+
+  // SECONDARY DISABLED: keeps main appearance bg, muted text
+  if (variant === 'secondary') {
+    return {
+      bg: 'transparent',
+      hoveredBg: 'transparent',
+      pressedBg: 'transparent',
+      textColor: t.main.fontDisabled,
+      iconColor: t.main.fontDisabled,
+      borderWidth: 1,
+      borderColor: t.main.divider,
+    };
+  }
+
+  // GHOST DISABLED: transparent, muted text only, underlined
+  return {
+    bg: 'transparent',
+    hoveredBg: 'transparent',
+    pressedBg: 'transparent',
+    textColor: t.main.fontDisabled,
+    iconColor: t.main.fontDisabled,
+    borderWidth: 0,
+    borderColor: 'transparent'
   };
 }

package/src/composites/actions/Button/Button.tsx

@@ -6,7 +6,7 @@ import { useTokens } from 'newtone-api';
 import { useFrameContext } from 'newtone-api';
 import { Icon } from '../../../primitives/Icon/Icon';
 import { Text } from '../../../primitives/Text';
-import { Wrapper } from '../../../primitives/Wrapper/Wrapper';
+import { Wrapper } from '../../../layout/Wrapper/Wrapper';
 
 /**
  * Button — A composite component that inherits its color theme from the
@@ -57,6 +57,21 @@ export function Button({
   // Inherit theme from nearest Frame, default to 'primary'
   const theme = frameCtx?.theme ?? 'primary';
 
+  // DEBUG: trace Button token resolution
+  if (typeof window !== 'undefined') {
+    console.log('[Button]', { theme, variant, frameCtxTheme: frameCtx?.theme, hasFrameCtx: !!frameCtx });
+    if (tokens.colors[theme]) {
+      const t = tokens.colors[theme];
+      console.log('[Button tokens]', {
+        'emphasis.actionEnabled': t.emphasis.actionEnabled,
+        'main.actionEnabled': t.main.actionEnabled,
+        'main.background': t.main.background,
+      });
+    } else {
+      console.log('[Button] NO tokens for theme:', theme, 'available themes:', Object.keys(tokens.colors));
+    }
+  }
+
   const isDisabled = disabled || loading;
 
   const { variantColors, sizeTokens } = React.useMemo(
@@ -92,7 +107,7 @@ export function Button({
               borderRadius: sizeTokens.borderRadius,
               borderWidth: variantColors.borderWidth,
               borderColor: variantColors.borderColor || 'transparent',
-              opacity: isDisabled ? (loading ? 0.6 : 0.4) : 1,
+              opacity: loading ? 0.6 : 1,
               ...(fullWidth && { width: '100%' as any, alignSelf: 'stretch' as any }),
             },
             ...(Array.isArray(style) ? style : style ? [style] : []),
@@ -107,7 +122,7 @@ export function Button({
               size={sizeTokens.textSize}
               centerVertically
               style={[
-                { color: variantColors.textColor },
+                { color: variantColors.textColor, textDecorationLine: variantColors.textDecoration },
                 ...(Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []),
               ]}
             >

package/src/composites/display/Chip/Chip.tsx

@@ -5,7 +5,7 @@ import { getChipConfig } from './Chip.styles';
 import { useTokens } from 'newtone-api';
 import { Icon } from '../../../primitives/Icon/Icon';
 import { Text } from '../../../primitives/Text';
-import { Wrapper } from '../../../primitives/Wrapper/Wrapper';
+import { Wrapper } from '../../../layout/Wrapper/Wrapper';
 
 /**
  * Chip — A pill-shaped label for tags, filters, badges, and status indicators.

package/src/composites/form-controls/TextInput/TextInput.styles.ts

@@ -16,18 +16,18 @@ export function getTextInputStyles(
       fontFamily: tokens.typography.fonts.main.family,
       fontSize: tokens.typography.fontSizes['04'],
       fontWeight: tokens.typography.fonts.main.weights.medium as any,
-      color: at.fontTertiary,
+      color: at.fontSecondary,
     },
     input: {
       fontFamily: tokens.typography.fonts.main.family,
-      backgroundColor: at.fontSecondary,
+      backgroundColor: at.background,
       borderWidth: 1,
-      borderColor: at.fontSecondary,
+      borderColor: at.divider,
       borderRadius: tokens.radius.md,
       paddingVertical: tokens.spacing['08'],
       paddingHorizontal: tokens.spacing['12'],
       fontSize: tokens.typography.fontSizes['05'],
-      color: disabled ? at.fontTertiary : at.divider,
+      color: disabled ? at.fontDisabled : at.fontPrimary,
       opacity: disabled ? 0.5 : 1,
     },
   });

package/src/index.ts

@@ -29,6 +29,9 @@ export {
   useTypographyCalibrations,
   enqueueObservation,
 } from 'newtone-api';
+export type {
+  NewtoneProviderProps,
+} from 'newtone-api';
 export type {
   ColorMode,
   ColorGamut,
@@ -115,9 +118,6 @@ export type { ResolvedCorners } from './primitives/Frame/Frame.utils';
 export { Icon } from './primitives/Icon/Icon';
 export type { IconProps } from './primitives/Icon/Icon.types';
 
-export { Wrapper } from './primitives/Wrapper/Wrapper';
-export type { WrapperProps } from './primitives/Wrapper/Wrapper.types';
-
 export { Text } from './primitives/Text';
 export type {
   TextProps,
@@ -130,12 +130,25 @@ export type {
   TextSpanProps,
 } from './primitives/Text';
 
+// Layout Components
+export { Page } from './layout/Page/Page';
+export type { PageProps } from './layout/Page/Page.types';
+
+export { Viewport } from './layout/Viewport/Viewport';
+export type { ViewportProps } from './layout/Viewport/Viewport.types';
+
+export { Wrapper } from './layout/Wrapper/Wrapper';
+export type { WrapperProps } from './layout/Wrapper/Wrapper.types';
+
+export { Section } from './layout/Section/Section';
+export type { SectionProps, SectionSize } from './layout/Section/Section.types';
+
 // Composite Components
 export { Button } from './composites/actions/Button/Button';
 export type { ButtonProps, ButtonVariant, ButtonSize, ButtonIconPosition } from './composites/actions/Button/Button.types';
 
-export { Card } from './composites/layout/Card/Card';
-export type { CardProps } from './composites/layout/Card/Card.types';
+export { Card } from './primitives/Card/Card';
+export type { CardProps } from './primitives/Card/Card.types';
 
 export { Chip } from './composites/display/Chip/Chip';
 export type { ChipProps, ChipVariant, ChipSemantic, ChipSize } from './composites/display/Chip/Chip.types';

package/src/layout/Page/Page.tsx

@@ -0,0 +1,103 @@
+import React, { useMemo } from 'react';
+import { Platform, View, StyleSheet } from 'react-native';
+import type { PageProps } from './Page.types';
+import { useNewtoneTheme, _ThemeContext } from 'newtone-api';
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'column',
+    ...(Platform.OS === 'web' ? { minHeight: '100vh' as unknown as number } : {}),
+  },
+  body: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  content: {
+    flex: 1,
+  },
+});
+
+/**
+ * Page — Full-viewport layout root with optional navbar and sidebar slots.
+ *
+ * Page fills the full screen height and arranges layout regions:
+ * - Navbar at the top (outside scroll)
+ * - Sidebar to the left of the main content
+ * - Children fill the remaining space (typically a Viewport)
+ *
+ * When a `scheme` prop is provided, Page activates that scheme from the
+ * parent NewtoneProvider so all descendants receive the scheme's config.
+ *
+ * Page is invisible — no background, border, or shadow.
+ *
+ * @example
+ * ```tsx
+ * <Page navbar={<Nav />}>
+ *   <Viewport>
+ *     <Section size="sm" fill>
+ *       <Frame elevation={1} padding={32}>
+ *         <Text>Centered content</Text>
+ *       </Frame>
+ *     </Section>
+ *   </Viewport>
+ * </Page>
+ * ```
+ */
+export function Page({
+  children,
+  scheme,
+  navbar,
+  sidebar,
+  testID,
+  nativeID,
+  ref,
+  style,
+}: PageProps) {
+  const themeCtx = useNewtoneTheme();
+
+  // Resolve scheme override: if scheme is specified and exists in the
+  // provider's schemes map, override the theme context for descendants.
+  const schemeThemeCtx = useMemo(() => {
+    if (!scheme || !themeCtx.schemes) return null;
+    const schemeConfig = themeCtx.schemes[scheme];
+    if (!schemeConfig || schemeConfig === themeCtx.config) return null;
+    return {
+      ...themeCtx,
+      config: schemeConfig,
+      activeScheme: scheme,
+    };
+  }, [scheme, themeCtx]);
+
+  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
+
+  const content = (
+    <View
+      ref={ref}
+      testID={testID}
+      nativeID={nativeID}
+      accessibilityRole="none"
+      style={[styles.root, ...userStyles]}
+    >
+      {navbar}
+      {sidebar ? (
+        <View style={styles.body}>
+          {sidebar}
+          <View style={styles.content}>{children}</View>
+        </View>
+      ) : (
+        children
+      )}
+    </View>
+  );
+
+  if (schemeThemeCtx) {
+    return (
+      <_ThemeContext.Provider value={schemeThemeCtx}>
+        {content}
+      </_ThemeContext.Provider>
+    );
+  }
+
+  return content;
+}

package/src/layout/Page/Page.types.ts

@@ -0,0 +1,69 @@
+import type { View, ViewStyle } from 'react-native';
+
+/**
+ * Props for Page — the outermost layout container for a screen.
+ *
+ * Page fills the full viewport height and arranges optional layout slots:
+ * navbar (top), sidebar (left), and children (main content area).
+ * It can also activate a scheme from the parent NewtoneProvider.
+ *
+ * Page is invisible — no background, border, or shadow.
+ *
+ * @example
+ * ```tsx
+ * <Page navbar={<Nav />}>
+ *   <Viewport>
+ *     <Section size="md">
+ *       <Text>Page content</Text>
+ *     </Section>
+ *   </Viewport>
+ * </Page>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Page scheme="vibrant" sidebar={<Sidebar />}>
+ *   <Viewport>
+ *     <Section size="lg">
+ *       <Text>Dashboard content</Text>
+ *     </Section>
+ *   </Viewport>
+ * </Page>
+ * ```
+ */
+export interface PageProps {
+  /** Main content area (typically a Viewport). */
+  readonly children?: React.ReactNode;
+
+  /**
+   * Scheme to activate from the parent NewtoneProvider's `schemes` map.
+   * When set, descendants receive the scheme's config via theme context.
+   */
+  readonly scheme?: string;
+
+  /**
+   * Navbar element rendered at the top, outside the scrollable area.
+   * The navbar's height is determined by its own content.
+   */
+  readonly navbar?: React.ReactNode;
+
+  /**
+   * Sidebar element rendered to the left of the main content area.
+   * The sidebar manages its own width and scroll behavior.
+   */
+  readonly sidebar?: React.ReactNode;
+
+  // ── Testing & Platform ──
+
+  /** Test identifier — maps to `data-testid` on web. */
+  readonly testID?: string;
+
+  /** DOM id — maps to `id` attribute on web. */
+  readonly nativeID?: string;
+
+  /** Ref to the underlying View element. */
+  readonly ref?: React.Ref<View>;
+
+  /** Custom style overrides (applied to the root container). */
+  readonly style?: ViewStyle | ViewStyle[];
+}

package/src/layout/Page/index.ts

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

package/src/layout/Section/Section.styles.ts

@@ -0,0 +1,90 @@
+import type { ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
+import type { ResolvedTokens } from 'newtone-api';
+import type { GapProp, PaddingProp } from '../../primitives/Frame/Frame.types';
+import type { SectionSize } from './Section.types';
+import { resolveGap, resolvePadding } from '../../primitives/Frame/Frame.utils';
+
+// ── Size Presets ─────────────────────────────────────────────────
+
+interface SizePreset {
+  readonly maxWidth: number | undefined;
+  readonly paddingHorizontal: number;
+}
+
+const SIZE_PRESETS: Record<SectionSize, SizePreset> = {
+  xs:   { maxWidth: 480,  paddingHorizontal: 24 },
+  sm:   { maxWidth: 640,  paddingHorizontal: 24 },
+  md:   { maxWidth: 768,  paddingHorizontal: 24 },
+  lg:   { maxWidth: 1024, paddingHorizontal: 32 },
+  xl:   { maxWidth: 1280, paddingHorizontal: 40 },
+  full: { maxWidth: undefined, paddingHorizontal: 0 },
+};
+
+// ── Input ────────────────────────────────────────────────────────
+
+export interface SectionStyleInput {
+  readonly tokens: ResolvedTokens;
+  readonly size?: SectionSize;
+  readonly fill?: boolean;
+  readonly gap?: GapProp;
+  readonly padding?: PaddingProp;
+}
+
+// ── Builder ──────────────────────────────────────────────────────
+
+/**
+ * Build layout styles for a Section.
+ *
+ * Section fills all horizontal space, centers content within a max width,
+ * and applies horizontal padding from the size preset. Vertical padding
+ * can be specified via the padding prop.
+ */
+export function getSectionStyles(input: SectionStyleInput): ViewStyle {
+  const {
+    tokens,
+    size = 'lg',
+    fill,
+    gap,
+    padding,
+  } = input;
+
+  const preset = SIZE_PRESETS[size];
+  const container: Record<string, unknown> = {};
+
+  // Section always fills horizontal space and stacks children vertically.
+  container.width = '100%';
+  container.flexDirection = 'column';
+
+  // Fill available vertical space when requested.
+  if (fill) {
+    container.flex = 1;
+  }
+
+  // Center the content area by capping its width and using auto margins.
+  if (preset.maxWidth !== undefined) {
+    container.maxWidth = preset.maxWidth;
+    container.marginLeft = 'auto';
+    container.marginRight = 'auto';
+  }
+
+  // Horizontal padding from the size preset (so content doesn't touch edges).
+  container.paddingLeft = preset.paddingHorizontal;
+  container.paddingRight = preset.paddingHorizontal;
+
+  // Vertical padding from the user's padding prop.
+  if (padding !== undefined) {
+    const p = resolvePadding(padding, tokens);
+    container.paddingTop = p.top;
+    container.paddingBottom = p.bottom;
+  }
+
+  // Gap between children.
+  if (gap !== undefined) {
+    const g = resolveGap(gap, tokens);
+    container.rowGap = g.rowGap;
+    container.columnGap = g.columnGap;
+  }
+
+  return StyleSheet.create({ c: container as ViewStyle }).c;
+}