@newtonedev/components 0.1.12 → 0.1.14

package/src/composites/range-inputs/Slider/Slider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, TextInput, PanResponder } from 'react-native';
 import type { SliderProps } from './Slider.types';
-import { useTokens } from '../../../tokens/useTokens';
+import { useTokens } from 'newtone-api';
 import { getSliderStyles, THUMB_SIZE } from './Slider.styles';
 
 export function Slider({

package/src/index.ts

@@ -1,46 +1,86 @@
-// Theme system
-export { NewtoneProvider, useNewtoneTheme } from './theme/NewtoneProvider';
+// Re-export theme engine (backward compatibility — consumers keep importing from @newtonedev/components)
+export {
+  NewtoneProvider,
+  useNewtoneTheme,
+  useScheme,
+  FrameContext,
+  useFrameContext,
+  useBreakpoint,
+  DEFAULT_THEME_CONFIG,
+  DEFAULT_FONT_SIZES,
+  DEFAULT_LINE_HEIGHTS,
+  DEFAULT_ROLE_SCALES,
+  useTokens,
+  computeTokens,
+  computeSwatches,
+  computeColors,
+  resolveTheme,
+  PRIMARY_DEFAULTS,
+  SECONDARY_DEFAULTS,
+  TERTIARY_DEFAULTS,
+  SUCCESS_DEFAULTS,
+  WARNING_DEFAULTS,
+  ERROR_DEFAULTS,
+  DEFAULT_THEME_MAPPINGS,
+  buildGoogleFontsUrl,
+  measureAvgCharWidth,
+  useLocalCalibration,
+  useTypographyCalibrations,
+  enqueueObservation,
+} from 'newtone-api';
 export type {
   ColorMode,
+  ColorGamut,
   ElevationLevel,
   FrameElevation,
   ColorSystemConfig,
+  ColorSystemPaletteConfig,
   NewtoneThemeConfig,
   NewtoneThemeContext,
   FontConfig,
   FontWeights,
   FontSlot,
-  TokenOverrides,
+  TokenColor,
+  TokenName,
+  ContrastLevel,
+  PaletteId,
+  ThemeName,
+  AppearanceName,
+  ColorRef,
+  AppearanceMapping,
+  ThemeMapping,
+  ThemeMappings,
   FontSizeScale,
   LineHeightScale,
   RoleSizeStep,
   RoleScale,
   RoleScales,
-} from './theme/types';
-export { useFrameContext } from './theme/FrameContext';
-export type { FrameContextValue } from './theme/FrameContext';
-export { DEFAULT_THEME_CONFIG, DEFAULT_FONT_SIZES, DEFAULT_LINE_HEIGHTS, DEFAULT_ROLE_SCALES } from './theme/defaults';
-
-// Tokens
-export { useTokens } from './tokens/useTokens';
-export {
-  computeTokens,
-  NEUTRAL_DEFAULTS,
-  ACCENT_DEFAULTS,
-  SUCCESS_DEFAULTS,
-  WARNING_DEFAULTS,
-  ERROR_DEFAULTS,
-} from './tokens/computeTokens';
-export type { PaletteDefaults } from './tokens/computeTokens';
-export type { ResolvedTokens, PaletteTokens } from './tokens/types';
-
-// Composite Components
-export { Button } from './composites/actions/Button/Button';
-export type { ButtonProps, ButtonVariant, ButtonSemantic, ButtonSize, ButtonIconPosition } from './composites/actions/Button/Button.types';
-
-export { Card } from './composites/layout/Card/Card';
-export type { CardProps } from './composites/layout/Card/Card.types';
+  BreakpointKey,
+  Breakpoints,
+  BreakpointRoleScales,
+  FontRuntimeMetrics,
+  FrameContextValue,
+  UseTokensResult,
+  PaletteDefaults,
+  ContrastLevelDefaults,
+  SwatchDefaults,
+  ResolvedTokens,
+  ResolvedSwatches,
+  PaletteColors,
+  ContrastLevelColors,
+  ElevationColors,
+  ElevationName,
+  AppearanceTokens,
+  ThemeTokens,
+  ResolvedColor,
+  DynamicRange,
+  ColorResult,
+  Srgb,
+  Oklch,
+  HexColor,
+} from 'newtone-api';
 
+// Primitive Components
 export { useFocusVisible } from './primitives/useFocusVisible';
 export type { FocusVisibleResult } from './primitives/useFocusVisible';
 
@@ -66,6 +106,40 @@ export type {
 } from './primitives/Frame/Frame.types';
 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,
+  TextSize,
+  TextWeight,
+  TextColor,
+  TextScope,
+  TextRole,
+  TextAlign,
+  TextSpanProps,
+} from './primitives/Text';
+
+// Composite Components
+export { Button } from './composites/actions/Button/Button';
+export type { ButtonProps, ButtonVariant, ButtonSemantic, 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 { Chip } from './composites/display/Chip/Chip';
+export type { ChipProps, ChipVariant, ChipSemantic, ChipSize } from './composites/display/Chip/Chip.types';
+
+export { Divider } from './composites/layout/Divider/Divider';
+export type { DividerProps, DividerOrientation } from './composites/layout/Divider/Divider.types';
+
+export { ContentCard } from './composites/layout/ContentCard/ContentCard';
+export type { ContentCardProps, ContentCardVariant } from './composites/layout/ContentCard/ContentCard.types';
+
 export { TextInput } from './composites/form-controls/TextInput/TextInput';
 export type { TextInputProps } from './composites/form-controls/TextInput/TextInput.types';
 
@@ -89,24 +163,6 @@ export type { HueSliderProps } from './composites/range-inputs/HueSlider/HueSlid
 export { ColorScaleSlider } from './composites/range-inputs/ColorScaleSlider/ColorScaleSlider';
 export type { ColorScaleSliderProps } from './composites/range-inputs/ColorScaleSlider/ColorScaleSlider.types';
 
-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,
-  TextSize,
-  TextWeight,
-  TextColor,
-  TextScope,
-  TextRole,
-  TextAlign,
-  TextSpanProps,
-} from './primitives/Text';
-
 export { AppShell } from './composites/layout/AppShell/AppShell';
 export type { AppShellProps } from './composites/layout/AppShell/AppShell.types';
 
@@ -116,6 +172,13 @@ export type { SidebarProps } from './composites/layout/Sidebar/Sidebar.types';
 export { Navbar } from './composites/layout/Navbar/Navbar';
 export type { NavbarProps } from './composites/layout/Navbar/Navbar.types';
 
+// Branding
+export { LogoMonogram } from './composites/branding/LogoMonogram/LogoMonogram';
+export type { LogoMonogramProps } from './composites/branding/LogoMonogram/LogoMonogram.types';
+
+export { LogoWordmark } from './composites/branding/LogoWordmark/LogoWordmark';
+export type { LogoWordmarkProps } from './composites/branding/LogoWordmark/LogoWordmark.types';
+
 // Component registry + code generation
 export type {
   CategoryMeta,
@@ -134,19 +197,3 @@ export {
   generateComponentCode,
   ICON_CATALOG,
 } from './registry';
-
-// Fonts
-export { buildGoogleFontsUrl } from './fonts/buildGoogleFontsUrl';
-export { measureAvgCharWidth } from './fonts/measureFont';
-export { useLocalCalibration } from './fonts/useLocalCalibration';
-export { useTypographyCalibrations } from './fonts/useTypographyCalibrations';
-
-// Re-export core engine types for convenience
-export type {
-  DynamicRange,
-  PaletteConfig,
-  ColorResult,
-  Srgb,
-  Oklch,
-  HexColor,
-} from 'newtone';

package/src/primitives/Frame/Frame.styles.ts

@@ -1,8 +1,7 @@
 import type { ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
-import { srgbToHex } from 'newtone';
-import type { ResolvedTokens } from '../../tokens/types';
-import type { FrameElevation } from '../../theme/types';
+import type { ResolvedTokens, AppearanceTokens } from 'newtone-api';
+import type { FrameElevation, ThemeName, AppearanceName } from 'newtone-api';
 import type {
   PaddingProp,
   GapProp,
@@ -12,6 +11,9 @@ import type {
   Justification,
   RadiusProp,
   LayoutMode,
+  PositionType,
+  OffsetValue,
+  OverflowMode,
 } from './Frame.types';
 import {
   resolvePadding,
@@ -30,6 +32,10 @@ export interface FrameStyleInput {
   readonly tokens: ResolvedTokens;
   readonly frameElevation: FrameElevation;
 
+  // Theme / Appearance
+  readonly theme?: ThemeName;
+  readonly appearance?: AppearanceName;
+
   // Layout
   readonly layout?: LayoutMode;
   readonly direction?: Direction;
@@ -54,6 +60,16 @@ export interface FrameStyleInput {
   readonly minHeight?: number;
   readonly maxHeight?: number;
 
+  // Positioning
+  readonly position?: PositionType;
+  readonly top?: OffsetValue;
+  readonly right?: OffsetValue;
+  readonly bottom?: OffsetValue;
+  readonly left?: OffsetValue;
+  readonly zIndex?: number;
+  readonly overflow?: OverflowMode;
+  readonly opacity?: number;
+
   // Appearance
   readonly radius?: RadiusProp;
   readonly bordered?: boolean;
@@ -88,6 +104,8 @@ export function getFrameStyles(input: FrameStyleInput): FrameStyles {
   const {
     tokens,
     frameElevation,
+    theme = 'primary',
+    appearance = 'main',
     layout = 'flex',
     direction = 'vertical',
     wrap = false,
@@ -104,6 +122,14 @@ export function getFrameStyles(input: FrameStyleInput): FrameStyles {
     maxWidth,
     minHeight,
     maxHeight,
+    position,
+    top,
+    right,
+    bottom,
+    left,
+    zIndex,
+    overflow,
+    opacity,
     radius,
     bordered = false,
     disabled = false,
@@ -115,9 +141,12 @@ export function getFrameStyles(input: FrameStyleInput): FrameStyles {
   const container: Record<string, unknown> = {};
 
   // ── Background & foreground ──
-  // Set the surface color and default text color from the current theme.
-  container.backgroundColor = srgbToHex(tokens.background.srgb);
-  container.color = srgbToHex(tokens.textPrimary.srgb);
+  // Resolve the appearance tokens for the selected theme + appearance.
+  const appearanceTokens: AppearanceTokens = tokens.colors[theme][appearance];
+
+  // Set the surface color and default text color from the resolved appearance.
+  container.backgroundColor = appearanceTokens.background;
+  container.color = appearanceTokens.fontPrimary;
 
   // ── Layout mode ──
   if (layout === 'flex') {
@@ -171,6 +200,15 @@ export function getFrameStyles(input: FrameStyleInput): FrameStyles {
   if (minHeight !== undefined) container.minHeight = minHeight;
   if (maxHeight !== undefined) container.maxHeight = maxHeight;
 
+  // ── Positioning ──
+  // Set CSS position mode and offsets for absolute/fixed/sticky positioning.
+  if (position) container.position = position;
+  if (top !== undefined) container.top = top;
+  if (right !== undefined) container.right = right;
+  if (bottom !== undefined) container.bottom = bottom;
+  if (left !== undefined) container.left = left;
+  if (zIndex !== undefined) container.zIndex = zIndex;
+
   // ── Radius ──
   // Round the corners of the Frame (e.g. for cards, buttons, pills).
   if (radius !== undefined) {
@@ -187,11 +225,15 @@ export function getFrameStyles(input: FrameStyleInput): FrameStyles {
     }
   }
 
+  // ── Overflow ──
+  // Explicit overflow prop overrides the auto-overflow from radius.
+  if (overflow) container.overflow = overflow;
+
   // ── Border ──
   // Add a thin border using the theme's border color.
   if (bordered) {
     container.borderWidth = 1;
-    container.borderColor = srgbToHex(tokens.border.srgb);
+    container.borderColor = appearanceTokens.fontTertiary;
   }
 
   // ── Outer shadow (elevation 2) ──
@@ -206,9 +248,11 @@ export function getFrameStyles(input: FrameStyleInput): FrameStyles {
     container.elevation = 4; // Android-specific shadow depth
   }
 
-  // ── Disabled ──
-  // Make the Frame look faded when disabled.
-  if (disabled) {
+  // ── Opacity ──
+  // Explicit opacity takes precedence over the disabled fade.
+  if (opacity !== undefined) {
+    container.opacity = opacity;
+  } else if (disabled) {
     container.opacity = 0.5;
   }
 
@@ -216,7 +260,7 @@ export function getFrameStyles(input: FrameStyleInput): FrameStyles {
   // When the user is pressing an interactive Frame, shift the background
   // to a darker "sunken" shade to give visual feedback.
   const pressed = StyleSheet.create({
-    s: { backgroundColor: srgbToHex(tokens.backgroundSunken.srgb) },
+    s: { backgroundColor: appearanceTokens.fontSecondary },
   }).s;
 
   // ── Grid web style (web-only) ──