@metacells/mcellui-core 0.1.0

package/src/constants.ts

@@ -0,0 +1,203 @@
+/**
+ * NativeUI Constants
+ *
+ * Zentralisierte Magic Numbers und Konfigurationswerte.
+ * Diese Werte werden von Components verwendet und können
+ * über Props überschrieben werden.
+ *
+ * @example
+ * ```tsx
+ * import { SHEET_CONSTANTS } from '@nativeui/core';
+ *
+ * // In SheetContent:
+ * if (translationY > height * SHEET_CONSTANTS.closeThreshold) {
+ *   close();
+ * }
+ * ```
+ */
+
+// ============================================
+// Sheet Constants
+// ============================================
+
+export const SHEET_CONSTANTS = {
+  /** Threshold (0-1) für automatisches Schließen beim Ziehen */
+  closeThreshold: 0.3,
+  /** Geschwindigkeit (px/s) für Swipe-to-Close */
+  velocityThreshold: 500,
+  /** Backdrop Fade-In Dauer (ms) */
+  backdropFadeInDuration: 200,
+  /** Backdrop Fade-Out Dauer (ms) */
+  backdropFadeOutDuration: 150,
+  /** Maximale Backdrop Opacity */
+  backdropMaxOpacity: 0.5,
+  /** Handle Breite (px) */
+  handleWidth: 36,
+  /** Handle Höhe (px) */
+  handleHeight: 4,
+  /** Handle Container Padding Top (px) */
+  handlePaddingTop: 12,
+  /** Handle Container Padding Bottom (px) */
+  handlePaddingBottom: 8,
+  /** Content Horizontal Padding (px) */
+  contentPaddingHorizontal: 16,
+} as const;
+
+// ============================================
+// Dialog Constants
+// ============================================
+
+export const DIALOG_CONSTANTS = {
+  /** Screen Margin für Dialog Breite (px) */
+  screenMargin: 48,
+  /** Close Animation Dauer (ms) */
+  closeAnimationDuration: 150,
+  /** Start Scale für Enter Animation */
+  enterStartScale: 0.95,
+  /** Dialog Content Padding (px) */
+  contentPadding: 24,
+  /** Backdrop Max Opacity */
+  backdropMaxOpacity: 0.5,
+} as const;
+
+// ============================================
+// Toast Constants
+// ============================================
+
+export const TOAST_CONSTANTS = {
+  /** Standard Anzeigedauer (ms) */
+  defaultDuration: 4000,
+  /** Maximale gleichzeitig sichtbare Toasts */
+  maxToasts: 3,
+  /** Fade-Out Dauer (ms) */
+  fadeOutDuration: 150,
+  /** Container Top Offset vom SafeArea (px) */
+  containerTopOffset: 8,
+  /** Toast Width Margin (px) - wird von Screen Width abgezogen */
+  widthMargin: 32,
+  /** Fallback Farben wenn Theme sie nicht hat */
+  fallbackColors: {
+    success: '#22c55e',
+    successForeground: '#ffffff',
+    warning: '#f59e0b',
+    warningForeground: '#000000',
+  },
+} as const;
+
+// ============================================
+// Button Constants
+// ============================================
+
+export const BUTTON_CONSTANTS = {
+  /** Scale beim Drücken (0-1) */
+  pressScale: 0.97,
+  /** Opacity bei disabled */
+  disabledOpacity: 0.5,
+} as const;
+
+// ============================================
+// Accordion Constants
+// ============================================
+
+export const ACCORDION_CONSTANTS = {
+  /** Animation Dauer (ms) */
+  animationDuration: 250,
+  /** Trigger Text Font Size */
+  triggerFontSize: 15,
+  /** Chevron Font Size */
+  chevronFontSize: 10,
+  /** Chevron Margin Left */
+  chevronMarginLeft: 8,
+} as const;
+
+// ============================================
+// Swipeable Row Constants
+// ============================================
+
+export const SWIPEABLE_CONSTANTS = {
+  /** Standard Action Button Breite (px) */
+  actionWidth: 80,
+  /** Geschwindigkeit für Snap (px/s) */
+  velocityThreshold: 500,
+  /** Full Swipe Threshold (0-1 von Screen Width) */
+  fullSwipeThreshold: 0.5,
+  /** Full Swipe Animation Dauer (ms) */
+  fullSwipeAnimationDuration: 200,
+  /** Resistance Factor am Edge (0-1) */
+  resistanceFactor: 0.2,
+  /** Active Offset für Gesture Start (px) */
+  activeOffset: 10,
+  /** Action Icon Margin Bottom (px) */
+  actionIconMarginBottom: 4,
+  /** Action Button Horizontal Padding (px) */
+  actionButtonPaddingHorizontal: 8,
+  /** Action Label Font Size */
+  actionLabelFontSize: 12,
+} as const;
+
+// ============================================
+// Animation Constants (ergänzend zu theme/animations)
+// ============================================
+
+export const ANIMATION_CONSTANTS = {
+  /** Standard Spring Damping */
+  springDamping: 20,
+  /** Standard Spring Stiffness */
+  springStiffness: 200,
+} as const;
+
+// ============================================
+// Slider Constants
+// ============================================
+
+export const SLIDER_CONSTANTS = {
+  /** Track Höhe (px) */
+  trackHeight: 6,
+  /** Thumb Größe (px) */
+  thumbSize: 24,
+  /** Hit Slop für Touch (px) */
+  hitSlop: 10,
+} as const;
+
+// ============================================
+// Stepper Constants
+// ============================================
+
+export const STEPPER_CONSTANTS = {
+  /** Button Größe (px) */
+  buttonSize: 36,
+  /** Long Press Delay (ms) */
+  longPressDelay: 500,
+  /** Repeat Interval (ms) */
+  repeatInterval: 100,
+  /** Min Input Width (px) */
+  minInputWidth: 48,
+} as const;
+
+// ============================================
+// Typography Constants (für Component Styles)
+// ============================================
+
+export const TYPOGRAPHY_CONSTANTS = {
+  /** Title Font Size für Overlays (Sheet, Dialog) */
+  overlayTitleSize: 18,
+  /** Description Font Size für Overlays */
+  overlayDescriptionSize: 14,
+  /** Description Line Height für Dialogs */
+  overlayDescriptionLineHeight: 20,
+} as const;
+
+// ============================================
+// Export Types
+// ============================================
+
+export type SheetConstants = typeof SHEET_CONSTANTS;
+export type DialogConstants = typeof DIALOG_CONSTANTS;
+export type ToastConstants = typeof TOAST_CONSTANTS;
+export type ButtonConstants = typeof BUTTON_CONSTANTS;
+export type AccordionConstants = typeof ACCORDION_CONSTANTS;
+export type SwipeableConstants = typeof SWIPEABLE_CONSTANTS;
+export type AnimationConstants = typeof ANIMATION_CONSTANTS;
+export type SliderConstants = typeof SLIDER_CONSTANTS;
+export type StepperConstants = typeof STEPPER_CONSTANTS;
+export type TypographyConstants = typeof TYPOGRAPHY_CONSTANTS;

package/src/index.ts

@@ -0,0 +1,144 @@
+// Theme System (primary API)
+export {
+  // Colors
+  palette,
+  lightColors,
+  darkColors,
+  type ThemeColors,
+  type ColorKey,
+  // Spacing
+  spacing as themeSpacing,
+  type SpacingKey as ThemeSpacingKey,
+  // Radius
+  radius as themeRadius,
+  componentRadius,
+  createRadius,
+  createComponentRadius,
+  radiusPresetBase,
+  defaultRadiusPreset,
+  type RadiusKey as ThemeRadiusKey,
+  type RadiusPreset,
+  type RadiusTokens,
+  // Fonts
+  defaultFonts,
+  systemFonts,
+  createTypography,
+  type Fonts,
+  type Typography,
+  // Typography
+  fontSize as themeFontSize,
+  fontWeight as themeFontWeight,
+  lineHeight as themeLineHeight,
+  letterSpacing as themeLetterSpacing,
+  fontFamily,
+  geistFontFamily,
+  typography,
+  type FontSizeKey,
+  type FontWeightKey,
+  type FontFamilyKey,
+  type GeistFontFamilyKey,
+  type TypographyKey,
+  // Shadows
+  getShadow,
+  getPlatformShadow,
+  shadows,
+  type ShadowStyle,
+  type ShadowSize,
+  // Animations
+  springs,
+  timing,
+  pressScale,
+  durations,
+  subtleAnimations,
+  playfulAnimations,
+  getAnimationPreset,
+  defaultAnimationPreset,
+  type SpringConfig,
+  type TimingConfig,
+  type SpringTokens,
+  type TimingTokens,
+  type PressScaleTokens,
+  type DurationTokens,
+  type AnimationTokens,
+  type SpringPreset,
+  type TimingPreset,
+  type PressScalePreset,
+  type AnimationPreset,
+  // Component Tokens
+  components,
+  componentHeight,
+  iconSize,
+  buttonTokens,
+  inputTokens,
+  checkboxTokens,
+  switchTokens,
+  badgeTokens,
+  avatarTokens,
+  cardTokens,
+  type ComponentSize,
+  // Theme Presets
+  themePresets,
+  defaultThemePreset,
+  getPresetColors,
+  getPresetColorsForMode,
+  type ThemePreset,
+  type PresetColors,
+  // Provider & Hooks
+  ThemeProvider,
+  useTheme,
+  useColorSchemeValue,
+  useIsDark,
+  type Theme,
+  type ThemeProviderProps,
+  type ColorScheme,
+  type ColorSchemePreference,
+} from './theme';
+
+// Design Tokens (legacy - prefer theme)
+// Export only non-conflicting tokens
+export {
+  colors as legacyColors,
+  type Colors as LegacyColors,
+} from './tokens/colors';
+export { spacing, type Spacing, type SpacingKey } from './tokens/spacing';
+export {
+  fontFamily as legacyFontFamily,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  letterSpacing,
+  type FontFamily,
+  type FontSize,
+  type FontWeight,
+  type LineHeight,
+  type LetterSpacing,
+} from './tokens/typography';
+export { radius, type Radius, type RadiusKey } from './tokens/radius';
+export {
+  shadows as legacyShadows,
+  type Shadows as LegacyShadows,
+  type ShadowKey,
+} from './tokens/shadows';
+
+// Configuration
+export {
+  defineConfig,
+  resolveConfig,
+  ConfigProvider,
+  useConfig,
+  defaultConfig,
+  type NativeUIConfig,
+  type ResolvedNativeUIConfig,
+} from './config';
+
+// Utilities
+export * from './utils';
+
+// Primitives
+export * from './primitives';
+
+// Components (Error Boundaries, etc.)
+export * from './components';
+
+// Constants (Magic Numbers)
+export * from './constants';

package/src/primitives/Portal.tsx

@@ -0,0 +1,185 @@
+/**
+ * Portal Primitive
+ *
+ * Teleports children to a different part of the React tree.
+ * Essential for overlays like Dialogs, Toasts, Dropdowns.
+ *
+ * Usage:
+ * 1. Wrap your app with <PortalProvider>
+ * 2. Place <PortalHost /> at the root (after other content)
+ * 3. Use <Portal> anywhere to render content at the host
+ */
+
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+  useId,
+} from 'react';
+import { View, StyleSheet } from 'react-native';
+
+// --- Types ---
+
+export interface PortalContextValue {
+  /**
+   * Register a portal to be rendered at the host
+   */
+  mount: (key: string, element: React.ReactNode) => void;
+  /**
+   * Remove a portal from the host
+   */
+  unmount: (key: string) => void;
+}
+
+export interface PortalProviderProps {
+  children: React.ReactNode;
+}
+
+export interface PortalHostProps {
+  /**
+   * Name of the host (for multiple hosts)
+   * @default 'root'
+   */
+  name?: string;
+}
+
+export interface PortalProps {
+  children: React.ReactNode;
+  /**
+   * Name of the host to render into
+   * @default 'root'
+   */
+  hostName?: string;
+}
+
+// --- Context ---
+
+const PortalContext = createContext<PortalContextValue | null>(null);
+
+const usePortalContext = () => {
+  const context = useContext(PortalContext);
+  if (!context) {
+    throw new Error('Portal must be used within a PortalProvider');
+  }
+  return context;
+};
+
+// --- Components ---
+
+/**
+ * Provides the portal context to the app.
+ * Wrap your root component with this provider.
+ */
+export function PortalProvider({ children }: PortalProviderProps) {
+  const [portals, setPortals] = useState<Map<string, React.ReactNode>>(
+    new Map()
+  );
+
+  const mount = useCallback((key: string, element: React.ReactNode) => {
+    setPortals((prev) => {
+      const next = new Map(prev);
+      next.set(key, element);
+      return next;
+    });
+  }, []);
+
+  const unmount = useCallback((key: string) => {
+    setPortals((prev) => {
+      const next = new Map(prev);
+      next.delete(key);
+      return next;
+    });
+  }, []);
+
+  const contextValue = useMemo(() => ({ mount, unmount }), [mount, unmount]);
+
+  return (
+    <PortalContext.Provider value={contextValue}>
+      {children}
+      <PortalHost />
+    </PortalContext.Provider>
+  );
+}
+
+PortalProvider.displayName = 'PortalProvider';
+
+/**
+ * The target where portals render their content.
+ * Automatically included in PortalProvider, but can be placed manually
+ * for custom layouts.
+ */
+export function PortalHost({ name = 'root' }: PortalHostProps) {
+  const [portals, setPortals] = useState<Map<string, React.ReactNode>>(
+    new Map()
+  );
+
+  // Create a separate context for this specific host
+  const mount = useCallback((key: string, element: React.ReactNode) => {
+    setPortals((prev) => {
+      const next = new Map(prev);
+      next.set(key, element);
+      return next;
+    });
+  }, []);
+
+  const unmount = useCallback((key: string) => {
+    setPortals((prev) => {
+      const next = new Map(prev);
+      next.delete(key);
+      return next;
+    });
+  }, []);
+
+  return (
+    <PortalHostContext.Provider value={{ mount, unmount, name }}>
+      <View style={styles.host} pointerEvents="box-none">
+        {Array.from(portals.values())}
+      </View>
+    </PortalHostContext.Provider>
+  );
+}
+
+PortalHost.displayName = 'PortalHost';
+
+// Host-specific context for named hosts
+interface PortalHostContextValue extends PortalContextValue {
+  name: string;
+}
+
+const PortalHostContext = createContext<PortalHostContextValue | null>(null);
+
+/**
+ * Renders children into the nearest PortalHost.
+ */
+export function Portal({ children, hostName = 'root' }: PortalProps) {
+  const portalContext = useContext(PortalContext);
+  const key = useId();
+
+  React.useEffect(() => {
+    if (!portalContext) {
+      console.warn('Portal: No PortalProvider found. Content will not render.');
+      return;
+    }
+
+    portalContext.mount(key, children);
+
+    return () => {
+      portalContext.unmount(key);
+    };
+  }, [portalContext, key, children]);
+
+  return null;
+}
+
+Portal.displayName = 'Portal';
+
+// --- Styles ---
+
+const styles = StyleSheet.create({
+  host: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 9999,
+  },
+});

package/src/primitives/Pressable.tsx

@@ -0,0 +1,114 @@
+/**
+ * Pressable Primitive
+ *
+ * Enhanced Pressable with:
+ * - Built-in haptic feedback
+ * - Reduce motion support
+ * - Configurable press states
+ */
+
+import React, { useCallback } from 'react';
+import {
+  Pressable as RNPressable,
+  PressableProps as RNPressableProps,
+  ViewStyle,
+  AccessibilityInfo,
+} from 'react-native';
+import { haptic } from '../utils/haptics';
+
+export interface PressableProps extends Omit<RNPressableProps, 'style'> {
+  /**
+   * Style or style function receiving pressed state
+   */
+  style?: ViewStyle | ((state: { pressed: boolean }) => ViewStyle);
+
+  /**
+   * Haptic feedback style on press
+   * @default 'light'
+   */
+  hapticStyle?: 'none' | 'light' | 'medium' | 'heavy' | 'selection';
+
+  /**
+   * Opacity when pressed
+   * @default 0.7
+   */
+  pressedOpacity?: number;
+
+  /**
+   * Scale when pressed (respects reduce motion)
+   * @default 1
+   */
+  pressedScale?: number;
+}
+
+export const Pressable = React.forwardRef<
+  React.ElementRef<typeof RNPressable>,
+  PressableProps
+>(
+  (
+    {
+      style,
+      hapticStyle = 'light',
+      pressedOpacity = 0.7,
+      pressedScale = 1,
+      onPressIn,
+      disabled,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [reduceMotion, setReduceMotion] = React.useState(false);
+
+    React.useEffect(() => {
+      AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
+      const subscription = AccessibilityInfo.addEventListener(
+        'reduceMotionChanged',
+        setReduceMotion
+      );
+      return () => subscription.remove();
+    }, []);
+
+    const handlePressIn = useCallback(
+      (event: Parameters<NonNullable<RNPressableProps['onPressIn']>>[0]) => {
+        if (hapticStyle !== 'none') {
+          haptic(hapticStyle === 'selection' ? 'selection' : hapticStyle);
+        }
+        onPressIn?.(event);
+      },
+      [hapticStyle, onPressIn]
+    );
+
+    const getStyle = useCallback(
+      ({ pressed }: { pressed: boolean }): ViewStyle => {
+        const baseStyle = typeof style === 'function' ? style({ pressed }) : style;
+        const pressedStyle: ViewStyle = pressed
+          ? {
+              opacity: pressedOpacity,
+              transform: reduceMotion ? undefined : [{ scale: pressedScale }],
+            }
+          : {};
+
+        return {
+          ...baseStyle,
+          ...pressedStyle,
+        };
+      },
+      [style, pressedOpacity, pressedScale, reduceMotion]
+    );
+
+    return (
+      <RNPressable
+        ref={ref}
+        style={getStyle}
+        onPressIn={handlePressIn}
+        disabled={disabled}
+        {...props}
+      >
+        {children}
+      </RNPressable>
+    );
+  }
+);
+
+Pressable.displayName = 'Pressable';