@platform-blocks/ui 0.1.1

package/lib/core/theme/breakpoints.d.ts

@@ -0,0 +1,34 @@
+export interface Breakpoints {
+    /** Base breakpoint (0px) */
+    base: number;
+    /** Small phones / narrow screens */
+    sm: number;
+    /** Tablets / small desktop */
+    md: number;
+    /** Large desktop */
+    lg: number;
+    /** Wide screens */
+    xl: number;
+}
+export declare const DEFAULT_BREAKPOINTS: Breakpoints;
+export type ResponsiveProp<T> = T | {
+    base?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+};
+/**
+ * Resolves a responsive prop value based on the current width and breakpoints
+ * @param value - The responsive prop value to resolve
+ * @param width - The current width to check against breakpoints
+ * @param breakpoints - The breakpoints configuration to use
+ * @returns The resolved value for the current width
+ */
+export declare function resolveResponsiveProp<T>(value: ResponsiveProp<T> | undefined, width: number, breakpoints?: Breakpoints): T | undefined;
+/**
+ * Returns the first defined value from the provided arguments
+ * @param vals - Values to check for defined state
+ * @returns The first defined value or undefined if none are defined
+ */
+export declare function pickFirstDefined<T>(...vals: (T | undefined)[]): T | undefined;

package/lib/core/theme/darkTheme.d.ts

@@ -0,0 +1,2 @@
+import { PlatformBlocksTheme } from './types';
+export declare const DARK_THEME: PlatformBlocksTheme;

package/lib/core/theme/defaultTheme.d.ts

@@ -0,0 +1,2 @@
+import { PlatformBlocksTheme } from './types';
+export declare const DEFAULT_THEME: PlatformBlocksTheme;

package/lib/core/theme/index.d.ts

@@ -0,0 +1,12 @@
+export type { PlatformBlocksTheme, PlatformBlocksThemeOverride } from './types';
+export { DEFAULT_THEME } from './defaultTheme';
+export { DARK_THEME } from './darkTheme';
+export { mergeTheme, createTheme } from './utils';
+export { PlatformBlocksThemeProvider, useTheme, useSafePlatformBlocksTheme } from './ThemeProvider';
+export { CSSVariables } from './CSSVariables';
+export { useColorScheme } from './useColorScheme';
+export type { ColorScheme } from './useColorScheme';
+export type { PlatformBlocksThemeProviderProps } from './ThemeProvider';
+export * from './sizes';
+export * from './radius';
+export * from './shadow';

package/lib/core/theme/radius.d.ts

@@ -0,0 +1,132 @@
+import { SizeValue } from './sizes';
+export type RadiusValue = SizeValue | 'none' | 'full' | 'chip';
+/**
+ * Enhanced radius scale with special values
+ */
+export declare const RADIUS_SCALE: {
+    readonly none: 0;
+    readonly xs: 2;
+    readonly sm: 4;
+    readonly md: 6;
+    readonly lg: 8;
+    readonly xl: 30;
+    readonly '2xl': 16;
+    readonly '3xl': 20;
+    readonly full: 9999;
+    readonly chip: 9999;
+};
+/**
+ * Get border radius value from radius token or number
+ * @param value - Radius value (string token, number, or special value)
+ * @param componentHeight - Height of component for chip/full calculation
+ * @returns Resolved border radius as number
+ */
+export declare function getBorderRadius(value: RadiusValue | undefined, componentHeight?: number): number;
+/**
+ * Get component-specific default radius
+ */
+export declare const COMPONENT_RADIUS_DEFAULTS: {
+    readonly button: RadiusValue;
+    readonly card: RadiusValue;
+    readonly chip: RadiusValue;
+    readonly input: RadiusValue;
+    readonly modal: RadiusValue;
+    readonly tooltip: RadiusValue;
+    readonly alert: RadiusValue;
+    readonly badge: RadiusValue;
+    readonly indicator: RadiusValue;
+    readonly codeBlock: RadiusValue;
+    readonly progress: RadiusValue;
+    readonly switch: RadiusValue;
+    readonly checkbox: RadiusValue;
+    readonly radio: RadiusValue;
+    readonly slider: RadiusValue;
+};
+/**
+ * Border radius props interface for components
+ */
+export interface BorderRadiusProps {
+    /** Border radius value - supports size tokens, numbers, and special values */
+    radius?: RadiusValue;
+}
+/**
+ * Get the default radius for a specific component type
+ */
+export declare function getComponentDefaultRadius(componentType: keyof typeof COMPONENT_RADIUS_DEFAULTS): RadiusValue;
+/**
+ * Create border radius styles object for React Native
+ */
+export declare function createRadiusStyles(radius: RadiusValue | undefined, componentHeight?: number, componentType?: keyof typeof COMPONENT_RADIUS_DEFAULTS): {
+    borderRadius: number;
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+    borderBottomLeftRadius: number;
+    borderBottomRightRadius: number;
+};
+/**
+ * Border radius utilities for specific corners
+ */
+export interface CornerRadiusProps extends BorderRadiusProps {
+    /** Top-left corner radius */
+    radiusTopLeft?: RadiusValue;
+    /** Top-right corner radius */
+    radiusTopRight?: RadiusValue;
+    /** Bottom-left corner radius */
+    radiusBottomLeft?: RadiusValue;
+    /** Bottom-right corner radius */
+    radiusBottomRight?: RadiusValue;
+    /** Top corners radius (overrides individual top corners) */
+    radiusTop?: RadiusValue;
+    /** Bottom corners radius (overrides individual bottom corners) */
+    radiusBottom?: RadiusValue;
+    /** Left corners radius (overrides individual left corners) */
+    radiusLeft?: RadiusValue;
+    /** Right corners radius (overrides individual right corners) */
+    radiusRight?: RadiusValue;
+}
+/**
+ * Create advanced border radius styles with individual corner control
+ */
+export declare function createAdvancedRadiusStyles(props: CornerRadiusProps, componentHeight?: number, componentType?: keyof typeof COMPONENT_RADIUS_DEFAULTS): {
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+    borderBottomLeftRadius: number;
+    borderBottomRightRadius: number;
+    borderRadius: number;
+};
+declare const _default: {
+    getBorderRadius: typeof getBorderRadius;
+    createRadiusStyles: typeof createRadiusStyles;
+    createAdvancedRadiusStyles: typeof createAdvancedRadiusStyles;
+    RADIUS_SCALE: {
+        readonly none: 0;
+        readonly xs: 2;
+        readonly sm: 4;
+        readonly md: 6;
+        readonly lg: 8;
+        readonly xl: 30;
+        readonly '2xl': 16;
+        readonly '3xl': 20;
+        readonly full: 9999;
+        readonly chip: 9999;
+    };
+    COMPONENT_RADIUS_DEFAULTS: {
+        readonly button: RadiusValue;
+        readonly card: RadiusValue;
+        readonly chip: RadiusValue;
+        readonly input: RadiusValue;
+        readonly modal: RadiusValue;
+        readonly tooltip: RadiusValue;
+        readonly alert: RadiusValue;
+        readonly badge: RadiusValue;
+        readonly indicator: RadiusValue;
+        readonly codeBlock: RadiusValue;
+        readonly progress: RadiusValue;
+        readonly switch: RadiusValue;
+        readonly checkbox: RadiusValue;
+        readonly radio: RadiusValue;
+        readonly slider: RadiusValue;
+    };
+    getComponentDefaultRadius: typeof getComponentDefaultRadius;
+};
+export default _default;

package/lib/core/theme/shadow.d.ts

@@ -0,0 +1,119 @@
+import { SizeValue } from './sizes';
+import { PlatformBlocksTheme } from './types';
+export type ShadowValue = SizeValue | 'none';
+/**
+ * Shadow props interface for components
+ */
+export interface ShadowProps {
+    /** Shadow value - supports size tokens and 'none' */
+    shadow?: ShadowValue;
+}
+/**
+ * Get shadow value from shadow token
+ * @param value - Shadow value (string token or 'none')
+ * @param theme - PlatformBlocks theme object
+ * @returns Resolved shadow string or undefined for none
+ */
+export declare function getShadowValue(value: ShadowValue | undefined, theme: PlatformBlocksTheme): string | undefined;
+/**
+ * Component-specific default shadows
+ */
+export declare const COMPONENT_SHADOW_DEFAULTS: {
+    readonly button: ShadowValue;
+    readonly badge: ShadowValue;
+    readonly card: ShadowValue;
+    readonly chip: ShadowValue;
+    readonly modal: ShadowValue;
+    readonly tooltip: ShadowValue;
+    readonly alert: ShadowValue;
+    readonly dialog: ShadowValue;
+    readonly dropdown: ShadowValue;
+    readonly popover: ShadowValue;
+    readonly toast: ShadowValue;
+    readonly fab: ShadowValue;
+    readonly appBar: ShadowValue;
+    readonly drawer: ShadowValue;
+};
+/**
+ * Get the default shadow for a specific component type
+ */
+export declare function getComponentDefaultShadow(componentType: keyof typeof COMPONENT_SHADOW_DEFAULTS): ShadowValue;
+/**
+ * Create shadow styles object for React Native
+ */
+export declare function createShadowStyles(shadow: ShadowValue | undefined, theme: PlatformBlocksTheme, componentType?: keyof typeof COMPONENT_SHADOW_DEFAULTS): {
+    boxShadow?: undefined;
+    shadowOffset?: undefined;
+    shadowRadius?: undefined;
+    shadowColor?: undefined;
+    shadowOpacity?: undefined;
+    elevation?: undefined;
+} | {
+    boxShadow: string;
+    shadowOffset?: undefined;
+    shadowRadius?: undefined;
+    shadowColor?: undefined;
+    shadowOpacity?: undefined;
+    elevation?: undefined;
+} | {
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowRadius: number;
+    shadowColor: string;
+    shadowOpacity: number;
+    elevation: number;
+    boxShadow?: undefined;
+};
+/**
+ * Utility to get shadow styles with theme context
+ */
+export declare function useShadowStyles(shadow: ShadowValue | undefined, theme: PlatformBlocksTheme, componentType?: keyof typeof COMPONENT_SHADOW_DEFAULTS): {
+    boxShadow?: undefined;
+    shadowOffset?: undefined;
+    shadowRadius?: undefined;
+    shadowColor?: undefined;
+    shadowOpacity?: undefined;
+    elevation?: undefined;
+} | {
+    boxShadow: string;
+    shadowOffset?: undefined;
+    shadowRadius?: undefined;
+    shadowColor?: undefined;
+    shadowOpacity?: undefined;
+    elevation?: undefined;
+} | {
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowRadius: number;
+    shadowColor: string;
+    shadowOpacity: number;
+    elevation: number;
+    boxShadow?: undefined;
+};
+declare const _default: {
+    getShadowValue: typeof getShadowValue;
+    createShadowStyles: typeof createShadowStyles;
+    useShadowStyles: typeof useShadowStyles;
+    COMPONENT_SHADOW_DEFAULTS: {
+        readonly button: ShadowValue;
+        readonly badge: ShadowValue;
+        readonly card: ShadowValue;
+        readonly chip: ShadowValue;
+        readonly modal: ShadowValue;
+        readonly tooltip: ShadowValue;
+        readonly alert: ShadowValue;
+        readonly dialog: ShadowValue;
+        readonly dropdown: ShadowValue;
+        readonly popover: ShadowValue;
+        readonly toast: ShadowValue;
+        readonly fab: ShadowValue;
+        readonly appBar: ShadowValue;
+        readonly drawer: ShadowValue;
+    };
+    getComponentDefaultShadow: typeof getComponentDefaultShadow;
+};
+export default _default;

package/lib/core/theme/sizes.d.ts

@@ -0,0 +1,185 @@
+export type SizeValue = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | number;
+export interface SizeScale {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+}
+export declare const SIZE_SCALES: {
+    readonly fontSize: {
+        readonly xs: 10;
+        readonly sm: 12;
+        readonly md: 14;
+        readonly lg: 16;
+        readonly xl: 18;
+        readonly '2xl': 20;
+        readonly '3xl': 24;
+    };
+    readonly spacing: {
+        readonly xs: 4;
+        readonly sm: 8;
+        readonly md: 12;
+        readonly lg: 16;
+        readonly xl: 20;
+        readonly '2xl': 24;
+        readonly '3xl': 32;
+    };
+    readonly iconSize: {
+        readonly xs: 12;
+        readonly sm: 16;
+        readonly md: 20;
+        readonly lg: 24;
+        readonly xl: 28;
+        readonly '2xl': 32;
+        readonly '3xl': 40;
+    };
+    readonly height: {
+        readonly xs: 28;
+        readonly sm: 32;
+        readonly md: 36;
+        readonly lg: 44;
+        readonly xl: 52;
+        readonly '2xl': 60;
+        readonly '3xl': 68;
+    };
+    readonly radius: {
+        readonly xs: 2;
+        readonly sm: 4;
+        readonly md: 6;
+        readonly lg: 8;
+        readonly xl: 12;
+        readonly '2xl': 16;
+        readonly '3xl': 20;
+    };
+    readonly lineHeight: {
+        readonly xs: 1.2;
+        readonly sm: 1.3;
+        readonly md: 1.4;
+        readonly lg: 1.5;
+        readonly xl: 1.6;
+        readonly '2xl': 1.7;
+        readonly '3xl': 1.8;
+    };
+};
+/**
+ * Resolves a size value to a number
+ * @param value - Size value (string token or number)
+ * @param scale - Which scale to use for string tokens
+ * @param unit - Unit to append (default: no unit for React Native)
+ * @returns Resolved size as number or string with unit
+ */
+export declare function resolveSize(value: SizeValue | undefined, scale: keyof typeof SIZE_SCALES, unit?: 'px' | 'rem' | 'em' | ''): number | string;
+/**
+ * Get font size from size value
+ */
+export declare function getFontSize(size: SizeValue | undefined): number;
+/**
+ * Get spacing from size value
+ */
+export declare function getSpacing(size: SizeValue | undefined): number;
+/**
+ * Get icon size from size value
+ */
+export declare function getIconSize(size: SizeValue | undefined): number;
+/**
+ * Get height from size value
+ */
+export declare function getHeight(size: SizeValue | undefined): number;
+/**
+ * Get border radius from size value
+ */
+export declare function getRadius(size: SizeValue | undefined): number;
+/**
+ * Get line height from size value
+ * For numeric values, returns a reasonable line height multiplier
+ * For string values, uses the predefined line height scale
+ */
+export declare function getLineHeight(size: SizeValue | undefined): number;
+export declare const COMPONENT_SIZES: {
+    readonly button: {
+        readonly xs: {
+            readonly fontSize: "xs";
+            readonly spacing: "xs";
+            readonly height: "xs";
+        };
+        readonly sm: {
+            readonly fontSize: "sm";
+            readonly spacing: "sm";
+            readonly height: "sm";
+        };
+        readonly md: {
+            readonly fontSize: "md";
+            readonly spacing: "md";
+            readonly height: "md";
+        };
+        readonly lg: {
+            readonly fontSize: "lg";
+            readonly spacing: "lg";
+            readonly height: "lg";
+        };
+        readonly xl: {
+            readonly fontSize: "xl";
+            readonly spacing: "xl";
+            readonly height: "xl";
+        };
+        readonly '2xl': {
+            readonly fontSize: "2xl";
+            readonly spacing: "2xl";
+            readonly height: "2xl";
+        };
+        readonly '3xl': {
+            readonly fontSize: "3xl";
+            readonly spacing: "3xl";
+            readonly height: "3xl";
+        };
+    };
+    readonly chip: {
+        readonly xs: {
+            readonly fontSize: "xs";
+            readonly spacing: "xs";
+            readonly height: "xs";
+        };
+        readonly sm: {
+            readonly fontSize: "xs";
+            readonly spacing: "sm";
+            readonly height: "sm";
+        };
+        readonly md: {
+            readonly fontSize: "sm";
+            readonly spacing: "sm";
+            readonly height: "md";
+        };
+        readonly lg: {
+            readonly fontSize: "sm";
+            readonly spacing: "md";
+            readonly height: "lg";
+        };
+        readonly xl: {
+            readonly fontSize: "md";
+            readonly spacing: "md";
+            readonly height: "xl";
+        };
+        readonly '2xl': {
+            readonly fontSize: "lg";
+            readonly spacing: "lg";
+            readonly height: "2xl";
+        };
+        readonly '3xl': {
+            readonly fontSize: "xl";
+            readonly spacing: "xl";
+            readonly height: "3xl";
+        };
+    };
+    readonly badge: {
+        readonly xs: 8;
+        readonly sm: 10;
+        readonly md: 14;
+        readonly lg: 18;
+        readonly xl: 22;
+        readonly '2xl': 26;
+        readonly '3xl': 30;
+    };
+};

package/lib/core/theme/types.d.ts

@@ -0,0 +1,190 @@
+export type SizeValue = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export type ColorValue = string;
+export type SpacingValue = SizeValue | 'auto' | '0' | number;
+import type { DESIGN_TOKENS } from '../design-tokens';
+export interface SpacingProps {
+    /** Margin on all sides */
+    m?: SpacingValue;
+    /** Margin top */
+    mt?: SpacingValue;
+    /** Margin right */
+    mr?: SpacingValue;
+    /** Margin bottom */
+    mb?: SpacingValue;
+    /** Margin left */
+    ml?: SpacingValue;
+    /** Margin horizontal (left and right) */
+    mx?: SpacingValue;
+    /** Margin vertical (top and bottom) */
+    my?: SpacingValue;
+    /** Padding on all sides */
+    p?: SpacingValue;
+    /** Padding top */
+    pt?: SpacingValue;
+    /** Padding right */
+    pr?: SpacingValue;
+    /** Padding bottom */
+    pb?: SpacingValue;
+    /** Padding left */
+    pl?: SpacingValue;
+    /** Padding horizontal (left and right) */
+    px?: SpacingValue;
+    /** Padding vertical (top and bottom) */
+    py?: SpacingValue;
+}
+export interface PlatformBlocksTheme {
+    /** Primary color used for buttons, links, etc. */
+    primaryColor: string;
+    /** Color scheme */
+    colorScheme: 'light' | 'dark';
+    /** Design tokens for consistent styling */
+    designTokens?: typeof DESIGN_TOKENS;
+    /** Colors palette */
+    colors: {
+        primary: string[];
+        secondary: string[];
+        tertiary: string[];
+        surface: string[];
+        success: string[];
+        warning: string[];
+        error: string[];
+        gray: string[];
+        highlight: string[];
+        pink?: string[];
+        purple?: string[];
+        violet?: string[];
+        cyan?: string[];
+        lime?: string[];
+        sky?: string[];
+        amber?: string[];
+        indigo?: string[];
+        teal?: string[];
+    };
+    /** Semantic text colors */
+    text: {
+        /** Primary text color (high contrast) */
+        primary: string;
+        /** Secondary text color (medium contrast) */
+        secondary: string;
+        /** Muted text color (low contrast) */
+        muted: string;
+        /** Disabled text color (very low contrast) */
+        disabled: string;
+        /** Link text color (typically primary color) */
+        link: string;
+        /** Text color intended for use on top of primary[5] backgrounds */
+        onPrimary?: string;
+    };
+    /** Semantic background & surface colors */
+    backgrounds: {
+        /** Main app/page background */
+        base: string;
+        /** Subtle background sections (stripes, alternate rows) */
+        subtle: string;
+        /** Standard surface (cards, containers) */
+        surface: string;
+        /** Elevated surface (modals, popovers) */
+        elevated: string;
+        /** Border / hairline color for separators */
+        border: string;
+    };
+    /** Semantic interactive state colors */
+    states?: {
+        focusRing?: string;
+        textSelection?: string;
+        highlightText?: string;
+        highlightBackground?: string;
+    };
+    /** Font family */
+    fontFamily: string;
+    /** Font sizes - extended with new size system */
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    /** Spacing values - extended with new size system */
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    /** Border radius values - extended with new size system */
+    radii: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    /** Shadows */
+    shadows: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    /** Breakpoints for responsive design */
+    breakpoints: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    /** Motion tokens for animations */
+    motion: {
+        /** Easing functions */
+        easing: {
+            ease: string;
+            easeIn: string;
+            easeOut: string;
+            easeInOut: string;
+            spring: string;
+        };
+        /** Duration tokens */
+        duration: {
+            instant: string;
+            fast: string;
+            normal: string;
+            slow: string;
+        };
+    };
+    /** Semantic color aliases */
+    semantic: {
+        /** Accent color (usually primary[6]) */
+        accent: string;
+        /** Default border color */
+        borderDefault: string;
+        /** Subtle border color */
+        borderSubtle: string;
+        /** Elevated surface color */
+        surfaceElevated: string;
+        /** Card surface color */
+        surfaceCard: string;
+        /** Focus outline color */
+        focusRing: string;
+    };
+    /** Component default props and styles (override point) */
+    components: Record<string, ComponentTokenOverride>;
+    /** Any additional custom theme properties */
+    other: Record<string, any>;
+}
+export type PlatformBlocksThemeOverride = Partial<PlatformBlocksTheme>;
+export interface ComponentTokenOverride {
+    defaults?: Record<string, any>;
+    variants?: Record<string, any>;
+    sizes?: Record<string, any>;
+    [key: string]: any;
+}