@newtonedev/components 0.1.4 → 0.1.6

package/src/registry/registry.ts

@@ -1,10 +1,12 @@
 import type { CategoryMeta, ComponentMeta } from './types';
 
 export const CATEGORIES: readonly CategoryMeta[] = [
+  { id: 'primitives', name: 'Design Primitives', description: 'Core building blocks for theme-aware layouts and typography' },
   { id: 'actions', name: 'Actions', description: 'Interactive elements that trigger actions' },
   { id: 'form-controls', name: 'Form Controls', description: 'Input elements for user data entry' },
-  { id: 'range-inputs', name: 'Range Inputs', description: 'Slider controls for numeric values' },
+  { id: 'range-inputs', name: 'Range Inputs', description: 'Slider controls for numeric and continuous values' },
   { id: 'layout', name: 'Layout', description: 'Structural and container components' },
+  { id: 'overlays', name: 'Overlays', description: 'Floating and portal-based UI elements' },
 ];
 
 export const COMPONENTS: readonly ComponentMeta[] = [
@@ -18,13 +20,17 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     variants: [
       { id: 'primary-md', label: 'Primary', props: { variant: 'primary', size: 'md' } },
       { id: 'secondary-md', label: 'Secondary', props: { variant: 'secondary', size: 'md' } },
-      { id: 'ghost-md', label: 'Ghost', props: { variant: 'ghost', size: 'md' } },
-      { id: 'outline-md', label: 'Outline', props: { variant: 'outline', size: 'md' } },
+      { id: 'tertiary-md', label: 'Tertiary', props: { variant: 'tertiary', size: 'md' } },
       { id: 'primary-sm', label: 'Primary Small', props: { variant: 'primary', size: 'sm' } },
       { id: 'primary-lg', label: 'Primary Large', props: { variant: 'primary', size: 'lg' } },
+      { id: 'accent-primary', label: 'Accent Primary', props: { variant: 'primary', size: 'md', semantic: 'accent' } },
+      { id: 'accent-secondary', label: 'Accent Secondary', props: { variant: 'secondary', size: 'md', semantic: 'accent' } },
+      { id: 'success-primary', label: 'Success Primary', props: { variant: 'primary', size: 'md', semantic: 'success' } },
+      { id: 'error-primary', label: 'Error Primary', props: { variant: 'primary', size: 'md', semantic: 'error' } },
+      { id: 'warning-primary', label: 'Warning Primary', props: { variant: 'primary', size: 'md', semantic: 'warning' } },
       { id: 'icon-left', label: 'Icon Left', props: { variant: 'primary', size: 'md', icon: 'add' } },
       { id: 'icon-right', label: 'Icon Right', props: { variant: 'primary', size: 'md', icon: 'arrow_forward', iconPosition: 'right' } },
-      { id: 'icon-only', label: 'Icon Only', props: { variant: 'ghost', size: 'md', icon: 'settings' } },
+      { id: 'icon-only', label: 'Icon Only', props: { variant: 'tertiary', size: 'md', icon: 'settings' } },
     ],
     editableProps: [
       {
@@ -34,11 +40,23 @@ export const COMPONENTS: readonly ComponentMeta[] = [
         options: [
           { label: 'Primary', value: 'primary' },
           { label: 'Secondary', value: 'secondary' },
-          { label: 'Ghost', value: 'ghost' },
-          { label: 'Outline', value: 'outline' },
+          { label: 'Tertiary', value: 'tertiary' },
         ],
         defaultValue: 'primary',
       },
+      {
+        name: 'semantic',
+        label: 'Semantic',
+        control: 'select',
+        options: [
+          { label: 'Neutral', value: 'neutral' },
+          { label: 'Accent', value: 'accent' },
+          { label: 'Success', value: 'success' },
+          { label: 'Warning', value: 'warning' },
+          { label: 'Error', value: 'error' },
+        ],
+        defaultValue: 'neutral',
+      },
       {
         name: 'size',
         label: 'Size',
@@ -387,6 +405,221 @@ export const COMPONENTS: readonly ComponentMeta[] = [
       },
     ],
   },
+  // ── Design Primitives ──
+  {
+    id: 'text',
+    name: 'Text',
+    importName: 'Text',
+    categoryId: 'primitives',
+    description: 'Typography primitive with semantic size, weight, color, font, and lineHeight',
+    hasChildren: true,
+    variants: [
+      { id: 'default', label: 'Default', props: {} },
+      { id: 'heading', label: 'Heading', props: { size: 'xl', weight: 'bold' } },
+      { id: 'subheading', label: 'Subheading', props: { size: 'lg', weight: 'semibold' } },
+      { id: 'body', label: 'Body', props: { size: 'base' } },
+      { id: 'caption', label: 'Caption', props: { size: 'sm', color: 'secondary' } },
+      { id: 'accent', label: 'Accent', props: { color: 'accent', weight: 'medium' } },
+      { id: 'mono', label: 'Monospace', props: { font: 'mono', size: 'sm' } },
+    ],
+    editableProps: [
+      {
+        name: 'size',
+        label: 'Size',
+        control: 'select',
+        options: [
+          { label: 'Extra Small', value: 'xs' },
+          { label: 'Small', value: 'sm' },
+          { label: 'Base', value: 'base' },
+          { label: 'Medium', value: 'md' },
+          { label: 'Large', value: 'lg' },
+          { label: 'Extra Large', value: 'xl' },
+          { label: 'XXL', value: 'xxl' },
+        ],
+        defaultValue: 'base',
+      },
+      {
+        name: 'weight',
+        label: 'Weight',
+        control: 'select',
+        options: [
+          { label: 'Regular', value: 'regular' },
+          { label: 'Medium', value: 'medium' },
+          { label: 'Semibold', value: 'semibold' },
+          { label: 'Bold', value: 'bold' },
+        ],
+        defaultValue: 'regular',
+      },
+      {
+        name: 'color',
+        label: 'Color',
+        control: 'select',
+        options: [
+          { label: 'Primary', value: 'primary' },
+          { label: 'Secondary', value: 'secondary' },
+          { label: 'Tertiary', value: 'tertiary' },
+          { label: 'Disabled', value: 'disabled' },
+          { label: 'Accent', value: 'accent' },
+          { label: 'Success', value: 'success' },
+          { label: 'Warning', value: 'warning' },
+          { label: 'Error', value: 'error' },
+        ],
+        defaultValue: 'primary',
+      },
+      {
+        name: 'font',
+        label: 'Font',
+        control: 'select',
+        options: [
+          { label: 'Default', value: 'default' },
+          { label: 'Display', value: 'display' },
+          { label: 'Mono', value: 'mono' },
+        ],
+        defaultValue: 'default',
+      },
+    ],
+  },
+  {
+    id: 'icon',
+    name: 'Icon',
+    importName: 'Icon',
+    categoryId: 'primitives',
+    description: 'Material Symbols icon with size, fill, and color',
+    hasChildren: false,
+    variants: [
+      { id: 'home', label: 'Home', props: { name: 'home' } },
+      { id: 'settings', label: 'Settings', props: { name: 'settings' } },
+      { id: 'check', label: 'Check', props: { name: 'check' } },
+      { id: 'add', label: 'Add', props: { name: 'add' } },
+      { id: 'delete', label: 'Delete', props: { name: 'delete' } },
+      { id: 'search', label: 'Search', props: { name: 'search' } },
+      { id: 'filled', label: 'Filled Icon', props: { name: 'favorite', fill: 1 } },
+      { id: 'large', label: 'Large Icon', props: { name: 'star', size: 32 } },
+    ],
+    editableProps: [
+      {
+        name: 'name',
+        label: 'Icon Name',
+        control: 'text',
+        defaultValue: 'home',
+      },
+      {
+        name: 'size',
+        label: 'Size',
+        control: 'number',
+        defaultValue: 24,
+      },
+      {
+        name: 'fill',
+        label: 'Fill',
+        control: 'select',
+        options: [
+          { label: 'Outlined', value: 0 },
+          { label: 'Filled', value: 1 },
+        ],
+        defaultValue: 0,
+      },
+    ],
+  },
+  {
+    id: 'wrapper',
+    name: 'Wrapper',
+    importName: 'Wrapper',
+    categoryId: 'primitives',
+    description: 'Lightweight layout container with direction, spacing, and alignment (no theming)',
+    hasChildren: true,
+    variants: [
+      { id: 'vertical', label: 'Vertical Stack', props: { direction: 'vertical', gap: 'md' } },
+      { id: 'horizontal', label: 'Horizontal Row', props: { direction: 'horizontal', gap: 'md', align: 'center' } },
+      { id: 'padded', label: 'Padded', props: { padding: 'lg', gap: 'md' } },
+      { id: 'centered', label: 'Centered', props: { align: 'center', justify: 'center', padding: 'xl' } },
+    ],
+    editableProps: [
+      {
+        name: 'direction',
+        label: 'Direction',
+        control: 'select',
+        options: [
+          { label: 'Vertical', value: 'vertical' },
+          { label: 'Horizontal', value: 'horizontal' },
+        ],
+        defaultValue: 'vertical',
+      },
+      {
+        name: 'gap',
+        label: 'Gap',
+        control: 'select',
+        options: [
+          { label: 'None', value: '' },
+          { label: 'Small', value: 'sm' },
+          { label: 'Medium', value: 'md' },
+          { label: 'Large', value: 'lg' },
+        ],
+        defaultValue: '',
+      },
+      {
+        name: 'padding',
+        label: 'Padding',
+        control: 'select',
+        options: [
+          { label: 'None', value: '' },
+          { label: 'Small', value: 'sm' },
+          { label: 'Medium', value: 'md' },
+          { label: 'Large', value: 'lg' },
+        ],
+        defaultValue: '',
+      },
+      {
+        name: 'align',
+        label: 'Align',
+        control: 'select',
+        options: [
+          { label: 'Start', value: 'start' },
+          { label: 'Center', value: 'center' },
+          { label: 'End', value: 'end' },
+        ],
+        defaultValue: 'start',
+      },
+      {
+        name: 'justify',
+        label: 'Justify',
+        control: 'select',
+        options: [
+          { label: 'Start', value: 'start' },
+          { label: 'Center', value: 'center' },
+          { label: 'End', value: 'end' },
+          { label: 'Space Between', value: 'space-between' },
+        ],
+        defaultValue: 'start',
+      },
+    ],
+  },
+  // ── Range Inputs (Addition: ColorScaleSlider) ──
+  {
+    id: 'color-scale-slider',
+    name: 'ColorScaleSlider',
+    importName: 'ColorScaleSlider',
+    categoryId: 'range-inputs',
+    description: 'Interactive palette preview slider with color segments',
+    hasChildren: false,
+    variants: [
+      { id: 'default', label: 'Default', props: { label: 'Key Color' } },
+    ],
+    editableProps: [
+      {
+        name: 'label',
+        label: 'Label',
+        control: 'text',
+        defaultValue: 'Key Color',
+      },
+      {
+        name: 'disabled',
+        label: 'Disabled',
+        control: 'toggle',
+        defaultValue: false,
+      },
+    ],
+  },
 ];
 
 export function getComponent(id: string): ComponentMeta | undefined {

package/src/theme/FrameContext.tsx

@@ -1,19 +1,21 @@
 import { createContext, useContext } from 'react';
-import type { ThemeName, ElevationLevel } from './types';
+import type { ElevationLevel } from './types';
+import type { ResolvedTokens } from '../tokens/types';
 
 /**
  * Context value provided by Frame to its descendants.
- * Contains the resolved theme and elevation that children should use.
+ * Contains the resolved elevation and pre-computed tokens.
+ * Tokens are included to avoid redundant computeTokens calls in child components.
  */
 export interface FrameContextValue {
-  readonly theme: ThemeName;
   readonly elevation: ElevationLevel;
+  readonly tokens: ResolvedTokens;
 }
 
 /**
- * FrameContext - Propagates theme and elevation overrides from Frame to descendants.
+ * FrameContext - Propagates elevation overrides from Frame to descendants.
  *
- * When null, components fall back to NewtoneProvider's theme and default elevation (1).
+ * When null, components fall back to default elevation (1).
  * When present, useTokens() reads from this context instead.
  */
 export const FrameContext = createContext<FrameContextValue | null>(null);

package/src/theme/NewtoneProvider.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useState, useMemo, useContext } from 'react';
-import type { NewtoneThemeConfig, NewtoneThemeContext, ColorMode, ThemeName } from './types';
+import type { NewtoneThemeConfig, NewtoneThemeContext, ColorMode } from './types';
 import { DEFAULT_THEME_CONFIG } from './defaults';
 import { GoogleFontLoader } from '../fonts/GoogleFontLoader';
 import { IconFontLoader } from '../fonts/IconFontLoader';
@@ -9,18 +9,17 @@ const ThemeContext = createContext<NewtoneThemeContext | null>(null);
 export interface NewtoneProviderProps {
   readonly config?: NewtoneThemeConfig;
   readonly initialMode?: ColorMode;
-  readonly initialTheme?: ThemeName;
   readonly children: React.ReactNode;
 }
 
 /**
  * NewtoneProvider - Provides theme context to all Newtone components
  *
- * Wrap your app with this provider to enable theme and mode switching.
+ * Wrap your app with this provider to enable mode switching.
  *
  * @example
  * ```tsx
- * <NewtoneProvider initialMode="light" initialTheme="neutral">
+ * <NewtoneProvider initialMode="light">
  *   <App />
  * </NewtoneProvider>
  * ```
@@ -28,21 +27,17 @@ export interface NewtoneProviderProps {
 export function NewtoneProvider({
   config = DEFAULT_THEME_CONFIG,
   initialMode = 'light',
-  initialTheme = 'neutral',
   children,
 }: NewtoneProviderProps) {
   const [mode, setMode] = useState<ColorMode>(initialMode);
-  const [theme, setTheme] = useState<ThemeName>(initialTheme);
 
   const value = useMemo(
     () => ({
       config,
       mode,
-      theme,
       setMode,
-      setTheme,
     }),
-    [config, mode, theme]
+    [config, mode]
   );
 
   return (
@@ -61,7 +56,7 @@ export function NewtoneProvider({
  *
  * @example
  * ```tsx
- * const { mode, theme, setMode, setTheme } = useNewtoneTheme();
+ * const { mode, setMode } = useNewtoneTheme();
  * ```
  */
 export function useNewtoneTheme(): NewtoneThemeContext {

package/src/theme/defaults.ts

@@ -30,15 +30,6 @@ export const DEFAULT_THEME_CONFIG: NewtoneThemeConfig = {
       { hue: DEFAULT_ERROR_HUE, saturation: DEFAULT_ERROR_SATURATION },
     ],
   },
-  themes: {
-    neutral: { paletteIndex: 0, lightModeNv: 0.95, darkModeNv: 0.1 },
-    primary: { paletteIndex: 1, lightModeNv: 0.95, darkModeNv: 0.1 },
-    secondary: { paletteIndex: 1, lightModeNv: 0.85, darkModeNv: 0.15 },
-    strong: { paletteIndex: 0, lightModeNv: 0.1, darkModeNv: 0.95 },
-  },
-  elevation: {
-    offsets: [-0.02, 0, 0.04], // [sunken, default, elevated]
-  },
   spacing: {
     '00': 0,   // base * 0
     '02': 2,   // base * 0.25

package/src/theme/types.ts

@@ -15,11 +15,6 @@ export interface FontConfig {
   readonly fallback: string;     // CSS fallback stack
 }
 
-/**
- * Theme names for different UI contexts
- */
-export type ThemeName = 'neutral' | 'primary' | 'secondary' | 'strong';
-
 /**
  * Elevation levels for surfaces (internal)
  * 0 = sunken, 1 = default, 2 = elevated
@@ -33,16 +28,6 @@ export type ElevationLevel = 0 | 1 | 2;
  */
 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
- */
-export interface ThemeMapping {
-  readonly paletteIndex: number;    // Index into ColorSystemConfig.palettes
-  readonly lightModeNv: number;     // normalizedValue for light mode background
-  readonly darkModeNv: number;      // normalizedValue for dark mode background
-}
-
 /**
  * Complete color system configuration
  */
@@ -51,20 +36,63 @@ export interface ColorSystemConfig {
   readonly palettes: ReadonlyArray<PaletteConfig>;
 }
 
+/**
+ * Overrides for hardcoded token computation constants.
+ * All values are optional — omitted fields fall back to engine defaults.
+ *
+ * All values are NV (normalized value / luminosity) offsets on a unified scale.
+ * 0.10 means the same 10% luminosity shift whether applied to borders, text,
+ * or interactive components. Direction auto-inverts per effective mode
+ * (darker in light mode, lighter in dark mode) unless noted otherwise.
+ */
+export interface TokenOverrides {
+  // --- Offset fields (all magnitudes, direction auto-inverts per effective mode) ---
+  // Light mode
+  readonly interactiveComponentOffset?: number;      // default: 0.04 (auto-inverts)
+  readonly hoverShift?: number;                      // default: 0.06 (auto-inverts)
+  readonly activeShift?: number;                     // default: 0.08 (auto-inverts)
+  readonly borderOffset?: number;                    // default: 0.08 (auto-inverts)
+  // Dark mode
+  readonly interactiveComponentOffsetDark?: number;  // default: 0.04 (auto-inverts)
+  readonly hoverShiftDark?: number;                  // default: 0.06 (auto-inverts)
+  readonly activeShiftDark?: number;                 // default: 0.08 (auto-inverts)
+  readonly borderOffsetDark?: number;                // default: 0.08 (auto-inverts)
+  readonly borderFocusedOffset?: number;             // default: 0.16 (auto-inverts)
+  readonly borderFocusedOffsetDark?: number;          // default: 0.16 (auto-inverts)
+  readonly borderFilledOffset?: number;              // default: 0.24 (auto-inverts)
+  readonly borderFilledOffsetDark?: number;           // default: 0.24 (auto-inverts)
+
+  // --- Normalized tokens (light mode: 0 = lightest, 1 = darkest) ---
+  // When present, computeTokens uses absolute positions instead of baseNv + offset.
+  // All themes share the same lightness positions; palette (hue/sat) varies per theme.
+  // Background: absolute positions — ground is Background/01 (elevated)
+  readonly backgroundElevated?: number;              // default: 0    (ground — lightest)
+  readonly backgroundDefault?: number;               // default: 0.03
+  readonly backgroundSunken?: number;                // default: 0.06
+  // Text: absolute positions at bg01 — elevation-compensated by computeTokens on deeper surfaces
+  readonly textPrimaryNormalized?: number;            // default: 0.9  (max contrast)
+  readonly textSecondaryNormalized?: number;          // default: 0.7
+  readonly textTertiaryNormalized?: number;           // default: 0.5
+  readonly textDisabledNormalized?: number;           // default: 0.3
+
+  // --- Normalized tokens (dark mode: 0 = darkest, 1 = lightest) ---
+  // Same semantics as light mode but scale direction is inverted.
+  // Background: ground is Background/01 (elevated = lightest dark surface)
+  readonly backgroundElevatedDark?: number;           // default: 0.24 (ground — lightest dark surface)
+  readonly backgroundDefaultDark?: number;            // default: 0.20
+  readonly backgroundSunkenDark?: number;             // default: 0.16
+  // Text: absolute positions at bg01 — elevation-compensated by computeTokens on deeper surfaces
+  readonly textPrimaryNormalizedDark?: number;         // default: 1.0  (max contrast — lightest)
+  readonly textSecondaryNormalizedDark?: number;       // default: 0.8
+  readonly textTertiaryNormalizedDark?: number;        // default: 0.6
+  readonly textDisabledNormalizedDark?: number;        // default: 0.4
+}
+
 /**
  * Newtone theme configuration
  */
 export interface NewtoneThemeConfig {
   readonly colorSystem: ColorSystemConfig;
-  readonly themes: {
-    readonly neutral: ThemeMapping;
-    readonly primary: ThemeMapping;
-    readonly secondary: ThemeMapping;
-    readonly strong: ThemeMapping;
-  };
-  readonly elevation: {
-    readonly offsets: readonly [number, number, number]; // NV offsets for [sunken, default, elevated]
-  };
   readonly spacing: {
     readonly '00': number;  // base * 0
     readonly '02': number;  // base * 0.25
@@ -120,6 +148,7 @@ export interface NewtoneThemeConfig {
     readonly weight: 100 | 200 | 300 | 400 | 500 | 600 | 700;
     readonly autoGrade: boolean;  // true = mode-aware grade (light=-25, dark=200)
   };
+  readonly tokenOverrides?: TokenOverrides;
 }
 
 /**
@@ -128,7 +157,5 @@ export interface NewtoneThemeConfig {
 export interface NewtoneThemeContext {
   readonly config: NewtoneThemeConfig;
   readonly mode: ColorMode;
-  readonly theme: ThemeName;
   readonly setMode: (mode: ColorMode) => void;
-  readonly setTheme: (theme: ThemeName) => void;
 }