@newtonedev/components 0.1.2 → 0.1.4

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

@@ -0,0 +1,113 @@
+import type { View, ViewStyle } from 'react-native';
+import type { Direction, Alignment, Justification, PaddingProp, GapProp, SizingMode } from '../Frame/Frame.types';
+/**
+ * Props for Wrapper — a lightweight, invisible layout container.
+ *
+ * Same layout API as Frame (direction, spacing, alignment, sizing) but
+ * with zero appearance: no background, border, shadow, radius, theme
+ * context, or interactivity. Always renders a plain `<View>`.
+ *
+ * Use Wrapper for structural layout. Use Frame when you need visual
+ * appearance or theme/elevation context.
+ *
+ * @example
+ * ```tsx
+ * // Horizontal row with spacing
+ * <Wrapper direction="horizontal" gap="md" align="center">
+ *   <Button onPress={() => {}}>Save</Button>
+ *   <Button variant="ghost" onPress={() => {}}>Cancel</Button>
+ * </Wrapper>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Padded vertical stack
+ * <Wrapper padding={{ x: 'lg', y: 'md' }} gap="sm">
+ *   <Text>First item</Text>
+ *   <Text>Second item</Text>
+ * </Wrapper>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Full-width centered container
+ * <Wrapper width="fill" align="center" justify="center">
+ *   <Text>Centered content</Text>
+ * </Wrapper>
+ * ```
+ */
+export interface WrapperProps {
+    /**
+     * Child elements. Must be React Native elements (View, Text, etc.).
+     * Unlike Frame, raw strings are NOT auto-wrapped in `<Text>`.
+     */
+    readonly children?: React.ReactNode;
+    /** Flex direction. @default 'vertical' */
+    readonly direction?: Direction;
+    /** Enable flex wrap. @default false */
+    readonly wrap?: boolean;
+    /** Reverse flex direction. @default false */
+    readonly reverse?: boolean;
+    /** Cross-axis alignment of children. */
+    readonly align?: Alignment;
+    /** Main-axis justification of children. */
+    readonly justify?: Justification;
+    /**
+     * Padding inside the wrapper.
+     *
+     * @example
+     * ```tsx
+     * <Wrapper padding="md" />                        // uniform token
+     * <Wrapper padding={16} />                         // uniform px
+     * <Wrapper padding={{ x: 'lg', y: 'sm' }} />      // axis shorthand
+     * <Wrapper padding={{ top: 8, bottom: 16 }} />     // per-side
+     * ```
+     */
+    readonly padding?: PaddingProp;
+    /**
+     * Gap between children.
+     *
+     * @example
+     * ```tsx
+     * <Wrapper gap="md" />                             // uniform token
+     * <Wrapper gap={12} />                             // uniform px
+     * <Wrapper gap={{ row: 'sm', column: 'lg' }} />    // per-axis
+     * ```
+     */
+    readonly gap?: GapProp;
+    /**
+     * Width sizing: `'hug'` (shrink to content), `'fill'` (expand), or fixed px.
+     * @example
+     * ```tsx
+     * <Wrapper width="fill" />   // expand to fill parent
+     * <Wrapper width={300} />    // fixed 300px
+     * ```
+     */
+    readonly width?: SizingMode;
+    /**
+     * Height sizing: `'hug'` (shrink to content), `'fill'` (expand), or fixed px.
+     * @example
+     * ```tsx
+     * <Wrapper height="fill" />  // expand to fill parent
+     * <Wrapper height={200} />   // fixed 200px
+     * ```
+     */
+    readonly height?: SizingMode;
+    /** Minimum width in pixels. */
+    readonly minWidth?: number;
+    /** Maximum width in pixels. */
+    readonly maxWidth?: number;
+    /** Minimum height in pixels. */
+    readonly minHeight?: number;
+    /** Maximum height in pixels. */
+    readonly maxHeight?: number;
+    /** Test identifier — maps to `data-testid` on web. Used by testing libraries. */
+    readonly testID?: string;
+    /** DOM id — maps to `id` attribute on web. Used for anchors and scroll targets. */
+    readonly nativeID?: string;
+    /** Ref to the underlying View element. */
+    readonly ref?: React.Ref<View>;
+    /** Custom style overrides (applied last). */
+    readonly style?: ViewStyle | ViewStyle[];
+}
+//# sourceMappingURL=Wrapper.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Wrapper.types.d.ts","sourceRoot":"","sources":["../../../src/primitives/Wrapper/Wrapper.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,aAAa,EACb,WAAW,EACX,OAAO,EACP,UAAU,EACX,MAAM,sBAAsB,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAIpC,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;IAI3B,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,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,IAAI,CAAC,CAAC;IAI/B,6CAA6C;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;CAC1C"}

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

@@ -0,0 +1,3 @@
+export { Wrapper } from './Wrapper';
+export type { WrapperProps } from './Wrapper.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/Wrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/primitives/index.d.ts

@@ -0,0 +1,12 @@
+export { useFocusVisible } from './useFocusVisible';
+export type { FocusVisibleResult } from './useFocusVisible';
+export { Frame } from './Frame';
+export type { FrameProps, SpacingToken, SpacingValue, SpacingSides, SpacingAxes, PaddingProp, GapAxes, GapProp, RadiusToken, RadiusValue, RadiusCorners, RadiusProp, SizingMode, LayoutMode, Direction, Alignment, Justification, } from './Frame';
+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 { Text } from './Text';
+export type { TextProps, TextSize, TextWeight, TextColor, TextFont, TextLineHeight, TextAlign, } from './Text';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,QAAQ,EACR,cAAc,EACd,SAAS,GACV,MAAM,QAAQ,CAAC"}

package/dist/primitives/useFocusVisible.d.ts

@@ -0,0 +1,29 @@
+/**
+ * useFocusVisible — Keyboard-only focus detection hook.
+ *
+ * Tracks whether the user's last input was keyboard (Tab, arrows, etc.)
+ * or pointer (mouse, touch). When an element receives focus after a
+ * keyboard event, `isFocusVisible` is true — matching the browser's
+ * native `:focus-visible` pseudo-class behavior.
+ *
+ * This is the same approach used by the `:focus-visible` polyfill.
+ * On native platforms, the document listeners are skipped (guarded by
+ * `typeof document`), and the hook returns false for `isFocusVisible`.
+ *
+ * @example
+ * ```tsx
+ * const { isFocusVisible, focusProps } = useFocusVisible();
+ *
+ * <Pressable {...focusProps} style={isFocusVisible ? focusRingStyle : undefined}>
+ *   <Text>Keyboard-focusable</Text>
+ * </Pressable>
+ * ```
+ */
+export interface FocusVisibleResult {
+    /** True when the element is focused AND focus was keyboard-initiated. */
+    readonly isFocusVisible: boolean;
+    /** Spread these onto the interactive element (web-only, ignored on native). */
+    readonly focusProps: Record<string, unknown>;
+}
+export declare function useFocusVisible(): FocusVisibleResult;
+//# sourceMappingURL=useFocusVisible.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusVisible.d.ts","sourceRoot":"","sources":["../../src/primitives/useFocusVisible.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAiDH,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAC;IACjC,+EAA+E;IAC/E,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC9C;AAED,wBAAgB,eAAe,IAAI,kBAAkB,CAyBpD"}

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,kBA0ElC,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,kBAiFlC,CAAC"}

package/dist/theme/types.d.ts

@@ -58,12 +58,19 @@ export interface NewtoneThemeConfig {
         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 '00': number;
+        readonly '02': number;
+        readonly '04': number;
+        readonly '06': number;
+        readonly '08': number;
+        readonly '10': number;
+        readonly '12': number;
+        readonly '16': number;
+        readonly '20': number;
+        readonly '24': number;
+        readonly '32': number;
+        readonly '40': number;
+        readonly '48': number;
     };
     readonly radius: {
         readonly none: number;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/theme/types.ts"],"names":[],"mappings":"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"}

package/dist/tokens/computeTokens.d.ts

@@ -35,12 +35,19 @@ import type { ResolvedTokens } from './types';
  * ```
  */
 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;
+    readonly '00': number;
+    readonly '02': number;
+    readonly '04': number;
+    readonly '06': number;
+    readonly '08': number;
+    readonly '10': number;
+    readonly '12': number;
+    readonly '16': number;
+    readonly '20': number;
+    readonly '24': number;
+    readonly '32': number;
+    readonly '40': number;
+    readonly '48': number;
 }, radius: {
     readonly none: number;
     readonly sm: number;

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"computeTokens.d.ts","sourceRoot":"","sources":["../../src/tokens/computeTokens.ts"],"names":[],"mappings":"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"}

package/dist/tokens/types.d.ts

@@ -27,14 +27,23 @@ 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 */
+    /** Spacing tokens for paddings, gaps, and margins.
+     * Token names represent pixel values at Medium (8px) spacing preset.
+     * Actual values scale based on the selected spacing preset. */
     readonly spacing: {
-        readonly xs: number;
-        readonly sm: number;
-        readonly md: number;
-        readonly lg: number;
-        readonly xl: number;
-        readonly xxl: number;
+        readonly '00': number;
+        readonly '02': number;
+        readonly '04': number;
+        readonly '06': number;
+        readonly '08': number;
+        readonly '10': number;
+        readonly '12': number;
+        readonly '16': number;
+        readonly '20': number;
+        readonly '24': number;
+        readonly '32': number;
+        readonly '40': number;
+        readonly '48': number;
     };
     /** Border radius tokens for component roundness */
     readonly radius: {

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tokens/types.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/Button/Button.styles.ts

@@ -9,27 +9,27 @@ import type { ButtonVariant, ButtonSize } from './Button.types';
 function getSizeConfig(tokens: ResolvedTokens) {
   return {
     sm: {
-      paddingVertical: tokens.spacing.xs,
-      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing['04'],
+      paddingHorizontal: tokens.spacing['12'],
       fontSize: tokens.typography.size.sm,
       borderRadius: tokens.radius.sm,
-      gap: tokens.spacing.xs,
+      gap: tokens.spacing['04'],
       iconSize: tokens.typography.size.sm,
     },
     md: {
-      paddingVertical: tokens.spacing.sm,
-      paddingHorizontal: tokens.spacing.lg,
+      paddingVertical: tokens.spacing['08'],
+      paddingHorizontal: tokens.spacing['16'],
       fontSize: tokens.typography.size.base,
       borderRadius: tokens.radius.md,
-      gap: tokens.spacing.sm,
+      gap: tokens.spacing['08'],
       iconSize: tokens.typography.size.base,
     },
     lg: {
-      paddingVertical: tokens.spacing.md,
-      paddingHorizontal: tokens.spacing.xl,
+      paddingVertical: tokens.spacing['12'],
+      paddingHorizontal: tokens.spacing['24'],
       fontSize: tokens.typography.size.base,
       borderRadius: tokens.radius.lg,
-      gap: tokens.spacing.sm,
+      gap: tokens.spacing['08'],
       iconSize: tokens.typography.size.base,
     },
   };

package/src/Button/Button.tsx

@@ -3,7 +3,7 @@ import { Pressable, Text } from 'react-native';
 import type { ButtonProps } from './Button.types';
 import { useTokens } from '../tokens/useTokens';
 import { getButtonStyles } from './Button.styles';
-import { Icon } from '../Icon/Icon';
+import { Icon } from '../primitives/Icon/Icon';
 
 /**
  * Button component with support for multiple variants, sizes, and optional icons.

package/src/Card/Card.styles.ts

@@ -9,7 +9,7 @@ export function getCardStyles(tokens: ResolvedTokens, disabled: boolean) {
       borderWidth: 1,
       borderColor: srgbToHex(tokens.border.srgb),
       borderRadius: tokens.radius.lg,
-      padding: tokens.spacing.lg,
+      padding: tokens.spacing['16'],
       opacity: disabled ? 0.5 : 1,
     },
   });

package/src/ColorScaleSlider/ColorScaleSlider.styles.ts

@@ -8,7 +8,7 @@ export const THUMB_SIZE = 18;
 export function getColorScaleSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({
     container: {
-      gap: tokens.spacing.xs,
+      gap: tokens.spacing['04'],
       opacity: disabled ? 0.5 : 1,
     },
     labelRow: {

package/src/HueSlider/HueSlider.styles.ts

@@ -32,7 +32,7 @@ export function buildHueSegments(min: number, max: number): string[] {
 export function getHueSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({
     container: {
-      gap: tokens.spacing.xs,
+      gap: tokens.spacing['04'],
       opacity: disabled ? 0.5 : 1,
     },
     labelRow: {

package/src/Popover/Popover.styles.ts

@@ -33,7 +33,11 @@ export function getPopoverStyles(
       maxHeight,
       zIndex: 1000,
       overflow: 'hidden',
-      ...({ boxShadow: '0 4px 12px rgba(0,0,0,0.15)' } as any),
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.15,
+      shadowRadius: 12,
+      elevation: 8,
     },
   });
 }

package/src/Popover/Popover.tsx

@@ -42,9 +42,11 @@ export function Popover({
     };
   }, [isOpen, onClose]);
 
-  // Click-outside: capture phase so RNW Pressable can't swallow the event
+  // Click-outside: capture phase so RNW Pressable can't swallow the event.
+  // Web-only: on native, document is undefined (click-outside needs a portal/Modal rearchitecture).
   useEffect(() => {
     if (!isOpen) return;
+    if (typeof document === 'undefined') return;
     const handleMouseDown = (e: MouseEvent) => {
       const node = containerRef.current as unknown as HTMLElement;
       if (node && !node.contains(e.target as Node)) {

package/src/Select/Select.styles.ts

@@ -11,13 +11,13 @@ export function getSelectStyles(
   const isSm = size === 'sm';
   const fontSize = isSm ? tokens.typography.size.sm : tokens.typography.size.base;
   const iconSize = fontSize + 2;
-  const iconSpace = iconSize + tokens.spacing.sm;
-  const paddingVertical = isSm ? tokens.spacing.xs : tokens.spacing.sm;
-  const paddingHorizontal = isSm ? tokens.spacing.sm : tokens.spacing.md;
+  const iconSpace = iconSize + tokens.spacing['08'];
+  const paddingVertical = isSm ? tokens.spacing['04'] : tokens.spacing['08'];
+  const paddingHorizontal = isSm ? tokens.spacing['08'] : tokens.spacing['12'];
 
   return StyleSheet.create({
     container: {
-      gap: tokens.spacing.xs,
+      gap: tokens.spacing['04'],
       zIndex: isOpen ? 999 : 0,
     },
     label: {
@@ -35,7 +35,7 @@ export function getSelectStyles(
       borderRadius: tokens.radius.md,
       paddingVertical,
       paddingLeft: paddingHorizontal,
-      paddingRight: iconSpace + (isSm ? tokens.spacing.xs : tokens.spacing.sm),
+      paddingRight: iconSpace + (isSm ? tokens.spacing['04'] : tokens.spacing['08']),
       opacity: disabled ? 0.5 : 1,
     },
     triggerText: {
@@ -48,7 +48,7 @@ export function getSelectStyles(
     },
     iconWrapper: {
       position: 'absolute',
-      right: isSm ? tokens.spacing.xs : tokens.spacing.sm,
+      right: isSm ? tokens.spacing['04'] : tokens.spacing['08'],
       top: 0,
       bottom: 0,
       justifyContent: 'center',
@@ -60,9 +60,9 @@ export function getSelectStyles(
       color: srgbToHex(tokens.textSecondary.srgb),
       textTransform: 'uppercase',
       letterSpacing: 0.5,
-      paddingVertical: tokens.spacing.xs,
-      paddingHorizontal: isSm ? tokens.spacing.sm : tokens.spacing.md,
-      paddingTop: tokens.spacing.sm,
+      paddingVertical: tokens.spacing['04'],
+      paddingHorizontal: isSm ? tokens.spacing['08'] : tokens.spacing['12'],
+      paddingTop: tokens.spacing['08'],
     },
   });
 }

package/src/Select/Select.tsx

@@ -4,7 +4,7 @@ import type { SelectProps, SelectOption } from './Select.types';
 import { isOptionGroup } from './Select.types';
 import { useTokens } from '../tokens/useTokens';
 import { getSelectStyles } from './Select.styles';
-import { Icon } from '../Icon/Icon';
+import { Icon } from '../primitives/Icon/Icon';
 import { Popover } from '../Popover/Popover';
 import { usePopover } from '../Popover/usePopover';
 import { useSelect } from './useSelect';
@@ -72,8 +72,7 @@ export function Select({
       onPress={disabled ? undefined : toggle}
       disabled={disabled}
       role="combobox"
-      aria-expanded={isOpen}
-      aria-haspopup={'listbox' as any}
+      accessibilityState={{ expanded: isOpen }}
       {...triggerWebProps}
       style={styles.trigger}
     >

package/src/Select/SelectOption.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Pressable, Text, View } from 'react-native';
 import type { SelectOption as SelectOptionType, SelectProps } from './Select.types';
 import { useTokens } from '../tokens/useTokens';
-import { Icon } from '../Icon/Icon';
+import { Icon } from '../primitives/Icon/Icon';
 import { srgbToHex } from 'newtone';
 
 interface SelectOptionRowProps {
@@ -24,8 +24,8 @@ export function SelectOptionRow({
 }: SelectOptionRowProps) {
   const tokens = useTokens(1);
 
-  const paddingVertical = size === 'sm' ? tokens.spacing.xs : tokens.spacing.sm;
-  const paddingHorizontal = size === 'sm' ? tokens.spacing.sm : tokens.spacing.md;
+  const paddingVertical = size === 'sm' ? tokens.spacing['04'] : tokens.spacing['08'];
+  const paddingHorizontal = size === 'sm' ? tokens.spacing['08'] : tokens.spacing['12'];
   const fontSize = size === 'sm' ? tokens.typography.size.sm : tokens.typography.size.base;
 
   if (renderOption) {
@@ -34,7 +34,7 @@ export function SelectOptionRow({
         onPress={option.disabled ? undefined : onSelect}
         disabled={option.disabled}
         role="option"
-        aria-selected={isSelected}
+        accessibilityState={{ selected: isSelected }}
       >
         {renderOption(option, { isSelected, isFocused })}
       </Pressable>
@@ -46,7 +46,7 @@ export function SelectOptionRow({
       onPress={option.disabled ? undefined : onSelect}
       disabled={option.disabled}
       role="option"
-      aria-selected={isSelected}
+      accessibilityState={{ selected: isSelected }}
       style={({ pressed }) => [
         {
           flexDirection: 'row' as const,
@@ -91,7 +91,7 @@ export function SelectOptionRow({
         {option.label}
       </Text>
       {isSelected && (
-        <View style={{ marginLeft: tokens.spacing.sm }}>
+        <View style={{ marginLeft: tokens.spacing['08'] }}>
           <Icon
             name="check"
             size={fontSize}

package/src/Slider/Slider.styles.ts

@@ -8,7 +8,7 @@ export const THUMB_SIZE = 16;
 export function getSliderStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({
     container: {
-      gap: tokens.spacing.xs,
+      gap: tokens.spacing['04'],
       opacity: disabled ? 0.5 : 1,
     },
     labelRow: {

package/src/TextInput/TextInput.styles.ts

@@ -5,7 +5,7 @@ import type { ResolvedTokens } from '../tokens/types';
 export function getTextInputStyles(tokens: ResolvedTokens, disabled: boolean) {
   return StyleSheet.create({
     container: {
-      gap: tokens.spacing.xs,
+      gap: tokens.spacing['04'],
     },
     label: {
       fontFamily: tokens.typography.fonts.default,
@@ -19,8 +19,8 @@ export function getTextInputStyles(tokens: ResolvedTokens, disabled: boolean) {
       borderWidth: 1,
       borderColor: srgbToHex(tokens.border.srgb),
       borderRadius: tokens.radius.md,
-      paddingVertical: tokens.spacing.sm,
-      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing['08'],
+      paddingHorizontal: tokens.spacing['12'],
       fontSize: tokens.typography.size.base,
       color: disabled
         ? srgbToHex(tokens.textSecondary.srgb)

package/src/Toggle/Toggle.styles.ts

@@ -16,7 +16,7 @@ export function getToggleStyles(
     container: {
       flexDirection: 'row',
       alignItems: 'center',
-      gap: tokens.spacing.sm,
+      gap: tokens.spacing['08'],
       opacity: disabled ? 0.5 : 1,
     },
     label: {

package/src/_COMPONENT_TEMPLATE/ComponentName.styles.ts

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+import { srgbToHex } from 'newtone';
+import type { ResolvedTokens } from '../tokens/types';
+
+/**
+ * Pure style computation function.
+ *
+ * Rules:
+ * - Always use StyleSheet.create() — never plain JS objects
+ * - Colors from tokens only — never hardcoded hex (except shadows: '#000')
+ * - Shadows via RN properties (shadowColor, shadowOffset, shadowOpacity, shadowRadius, elevation)
+ *   NEVER use boxShadow as a CSS string
+ * - For web-only CSS (boxShadow, gridTemplateColumns, etc.):
+ *   return as a separate property and apply via web overrides pattern (see Frame.styles.ts)
+ * - Every section must have a plain-language inline comment explaining what
+ *   the style achieves visually, not just the CSS property name
+ */
+export function getComponentNameStyles(tokens: ResolvedTokens) {
+  return StyleSheet.create({
+    container: {
+      // Surface color from the current theme.
+      backgroundColor: srgbToHex(tokens.background.srgb),
+      // Rounded corners using the theme's medium radius.
+      borderRadius: tokens.radius.md,
+      // Inner spacing using the theme's medium spacing value.
+      padding: tokens.spacing['12'],
+    },
+  });
+}