@idealyst/theme 1.1.8 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/theme",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "description": "Theming system for Idealyst Framework",
   "readme": "README.md",
   "main": "src/index.ts",
@@ -70,6 +70,7 @@
     "@babel/types": "^7.28.5",
     "@types/babel__core": "^7.20.0",
     "@types/react": "^19.1.0",
+    "@types/react-native": "^0.73.0",
     "react-native-unistyles": ">=3.0.0",
     "typescript": "^5.0.0"
   },

package/src/babel/plugin.js

@@ -214,7 +214,19 @@ function expandIterators(t, callback, themeParam, keys, verbose, expandedVariant
         }
 
         if (t.isArrowFunctionExpression(node) || t.isFunctionExpression(node)) {
-            const processedBody = processNode(node.body, depth + 1);
+            let processedBody = processNode(node.body, depth + 1);
+
+            // Convert block body with single return to arrow notation for Unistyles compatibility
+            // This transforms: (props) => { return { ... } }
+            // Into:            (props) => ({ ... })
+            if (t.isBlockStatement(processedBody) && processedBody.body.length === 1) {
+                const singleStmt = processedBody.body[0];
+                if (t.isReturnStatement(singleStmt) && singleStmt.argument) {
+                    // Use the return argument directly as the arrow function body
+                    processedBody = singleStmt.argument;
+                }
+            }
+
             return t.arrowFunctionExpression(
                 node.params,
                 processedBody

package/src/breakpoints.ts

@@ -0,0 +1,112 @@
+import { UnistylesRuntime } from 'react-native-unistyles';
+import { Breakpoint, BreakpointsRecord } from './theme/breakpoint';
+
+/**
+ * Get the current active breakpoint name.
+ *
+ * @returns The current breakpoint name, or undefined if not available
+ *
+ * @example
+ * ```typescript
+ * const current = getCurrentBreakpoint();
+ * console.log(current); // 'md'
+ * ```
+ */
+export function getCurrentBreakpoint(): Breakpoint | undefined {
+    return UnistylesRuntime.breakpoint as Breakpoint | undefined;
+}
+
+/**
+ * Get all registered breakpoints and their values.
+ *
+ * @returns Object mapping breakpoint names to pixel values
+ *
+ * @example
+ * ```typescript
+ * const breakpoints = getBreakpoints();
+ * console.log(breakpoints); // { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200 }
+ * ```
+ */
+export function getBreakpoints(): BreakpointsRecord {
+    return UnistylesRuntime.breakpoints as BreakpointsRecord;
+}
+
+/**
+ * Check if the current viewport is at or above a specific breakpoint.
+ *
+ * @param breakpoint - The breakpoint to check against
+ * @returns True if the current viewport width is >= the breakpoint value
+ *
+ * @example
+ * ```typescript
+ * if (isBreakpointUp('md')) {
+ *   // Tablet or larger
+ * }
+ * ```
+ */
+export function isBreakpointUp(breakpoint: Breakpoint): boolean {
+    const breakpoints = getBreakpoints();
+    const screenWidth = UnistylesRuntime.screen.width;
+    return screenWidth >= breakpoints[breakpoint];
+}
+
+/**
+ * Check if the current viewport is below a specific breakpoint.
+ *
+ * @param breakpoint - The breakpoint to check against
+ * @returns True if the current viewport width is < the breakpoint value
+ *
+ * @example
+ * ```typescript
+ * if (isBreakpointDown('md')) {
+ *   // Mobile only (below tablet)
+ * }
+ * ```
+ */
+export function isBreakpointDown(breakpoint: Breakpoint): boolean {
+    return !isBreakpointUp(breakpoint);
+}
+
+/**
+ * Resolve a responsive value to its current breakpoint value.
+ * Falls back to the smallest defined breakpoint using CSS cascade behavior.
+ *
+ * @param value - Either a direct value or an object mapping breakpoints to values
+ * @returns The resolved value for the current breakpoint
+ *
+ * @example
+ * ```typescript
+ * // On a tablet (md breakpoint):
+ * const size = resolveResponsive({ xs: 'sm', md: 'lg' });
+ * console.log(size); // 'lg'
+ *
+ * // On a phone (xs breakpoint):
+ * const size = resolveResponsive({ xs: 'sm', md: 'lg' });
+ * console.log(size); // 'sm'
+ * ```
+ */
+export function resolveResponsive<T>(value: T | Partial<Record<Breakpoint, T>>): T | undefined {
+    // If not an object, return directly
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+        return value as T;
+    }
+
+    const responsiveValue = value as Partial<Record<Breakpoint, T>>;
+    const breakpoints = getBreakpoints();
+    const screenWidth = UnistylesRuntime.screen.width;
+
+    // Sort breakpoints by value descending
+    const sortedBps = Object.entries(breakpoints)
+        .sort(([, a], [, b]) => b - a)
+        .map(([name]) => name as Breakpoint);
+
+    // Find the largest breakpoint that matches current screen width
+    // and has a defined value (CSS cascade behavior)
+    for (const bp of sortedBps) {
+        if (screenWidth >= breakpoints[bp] && responsiveValue[bp] !== undefined) {
+            return responsiveValue[bp];
+        }
+    }
+
+    return undefined;
+}

package/src/builder.ts

@@ -42,6 +42,7 @@ export type BuiltTheme<
     TText extends string,
     TBorder extends string,
     TSize extends string,
+    TBreakpoints extends string = never,
 > = {
     intents: Record<TIntents, IntentValue>;
     radii: Record<TRadii, number>;
@@ -78,6 +79,7 @@ export type BuiltTheme<
         typography: Record<Typography, TypographyValue>;
     };
     interaction: InteractionConfig;
+    breakpoints: Record<TBreakpoints, number>;
 };
 
 /**
@@ -92,7 +94,8 @@ type ThemeConfig<
     TText extends string,
     TBorder extends string,
     TSize extends string,
-> = BuiltTheme<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize>;
+    TBreakpoints extends string,
+> = BuiltTheme<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>;
 
 /**
  * Fluent builder for creating themes with full TypeScript inference.
@@ -127,8 +130,9 @@ export class ThemeBuilder<
     TText extends string = never,
     TBorder extends string = never,
     TSize extends string = never,
+    TBreakpoints extends string = never,
 > {
-    private config: ThemeConfig<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize>;
+    private config: ThemeConfig<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>;
 
     constructor() {
         this.config = {
@@ -143,6 +147,7 @@ export class ThemeBuilder<
             },
             sizes: {} as any,
             interaction: {} as any,
+            breakpoints: {} as any,
         };
     }
 
@@ -152,8 +157,8 @@ export class ThemeBuilder<
     addIntent<K extends string>(
         name: K,
         value: IntentValue
-    ): ThemeBuilder<TIntents | K, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize> {
-        const newBuilder = new ThemeBuilder<TIntents | K, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize>();
+    ): ThemeBuilder<TIntents | K, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents | K, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
         newBuilder.config = {
             ...this.config,
             intents: {
@@ -170,8 +175,8 @@ export class ThemeBuilder<
     addRadius<K extends string>(
         name: K,
         value: number
-    ): ThemeBuilder<TIntents, TRadii | K, TShadows, TPallet, TSurface, TText, TBorder, TSize> {
-        const newBuilder = new ThemeBuilder<TIntents, TRadii | K, TShadows, TPallet, TSurface, TText, TBorder, TSize>();
+    ): ThemeBuilder<TIntents, TRadii | K, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii | K, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
         newBuilder.config = {
             ...this.config,
             radii: {
@@ -188,8 +193,8 @@ export class ThemeBuilder<
     addShadow<K extends string>(
         name: K,
         value: ShadowValue
-    ): ThemeBuilder<TIntents, TRadii, TShadows | K, TPallet, TSurface, TText, TBorder, TSize> {
-        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows | K, TPallet, TSurface, TText, TBorder, TSize>();
+    ): ThemeBuilder<TIntents, TRadii, TShadows | K, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows | K, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
         newBuilder.config = {
             ...this.config,
             shadows: {
@@ -205,8 +210,8 @@ export class ThemeBuilder<
      */
     setInteraction(
         interaction: InteractionConfig
-    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize> {
-        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize>();
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints>();
         newBuilder.config = {
             ...this.config,
             interaction,
@@ -227,8 +232,8 @@ export class ThemeBuilder<
         surface: Record<S, ColorValue>;
         text: Record<T, ColorValue>;
         border: Record<B, ColorValue>;
-    }): ThemeBuilder<TIntents, TRadii, TShadows, P, S, T, B, TSize> {
-        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, P, S, T, B, TSize>();
+    }): ThemeBuilder<TIntents, TRadii, TShadows, P, S, T, B, TSize, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, P, S, T, B, TSize, TBreakpoints>();
         newBuilder.config = {
             ...this.config,
             colors,
@@ -263,8 +268,8 @@ export class ThemeBuilder<
         tooltip: Record<S, TooltipSizeValue>;
         view: Record<S, ViewSizeValue>;
         typography: Record<Typography, TypographyValue>;
-    }): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, S> {
-        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, S>();
+    }): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, S, TBreakpoints> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, S, TBreakpoints>();
         newBuilder.config = {
             ...this.config,
             sizes,
@@ -272,10 +277,75 @@ export class ThemeBuilder<
         return newBuilder;
     }
 
+    /**
+     * Add a single breakpoint to the theme.
+     *
+     * IMPORTANT: At least one breakpoint must have value 0 (typically 'xs').
+     * This simulates CSS cascading behavior in Unistyles.
+     *
+     * @param name - The breakpoint name (e.g., 'xs', 'sm', 'md')
+     * @param value - The minimum width in pixels for this breakpoint
+     *
+     * @example
+     * ```typescript
+     * createTheme()
+     *   .addBreakpoint('xs', 0)
+     *   .addBreakpoint('sm', 576)
+     *   .addBreakpoint('md', 768)
+     *   .build();
+     * ```
+     */
+    addBreakpoint<K extends string>(
+        name: K,
+        value: number
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints | K> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints | K>();
+        newBuilder.config = {
+            ...this.config,
+            breakpoints: {
+                ...this.config.breakpoints,
+                [name]: value,
+            } as any,
+        };
+        return newBuilder;
+    }
+
+    /**
+     * Set all breakpoints at once.
+     *
+     * IMPORTANT: At least one breakpoint must have value 0.
+     * Breakpoints define responsive behavior based on viewport width.
+     *
+     * @param breakpoints - Object mapping breakpoint names to pixel values
+     *
+     * @example
+     * ```typescript
+     * createTheme()
+     *   .setBreakpoints({
+     *     xs: 0,    // Required: starts at 0
+     *     sm: 576,
+     *     md: 768,
+     *     lg: 992,
+     *     xl: 1200,
+     *   })
+     *   .build();
+     * ```
+     */
+    setBreakpoints<B extends Record<string, number>>(
+        breakpoints: B
+    ): ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, keyof B & string> {
+        const newBuilder = new ThemeBuilder<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, keyof B & string>();
+        newBuilder.config = {
+            ...this.config,
+            breakpoints,
+        } as any;
+        return newBuilder;
+    }
+
     /**
      * Build the final theme object.
      */
-    build(): BuiltTheme<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize> {
+    build(): BuiltTheme<TIntents, TRadii, TShadows, TPallet, TSurface, TText, TBorder, TSize, TBreakpoints> {
         return this.config;
     }
 }
@@ -290,7 +360,7 @@ export function createTheme(): ThemeBuilder {
 /**
  * Create a builder from an existing theme to add more values.
  */
-export function fromTheme<T extends BuiltTheme<any, any, any, any, any, any, any, any>>(
+export function fromTheme<T extends BuiltTheme<any, any, any, any, any, any, any, any, any>>(
     base: T
 ): ThemeBuilder<
     keyof T['intents'] & string,
@@ -300,7 +370,8 @@ export function fromTheme<T extends BuiltTheme<any, any, any, any, any, any, any
     keyof T['colors']['surface'] & string,
     keyof T['colors']['text'] & string,
     keyof T['colors']['border'] & string,
-    keyof T['sizes']['button'] & string
+    keyof T['sizes']['button'] & string,
+    keyof T['breakpoints'] & string
 > {
     const builder = new ThemeBuilder<
         keyof T['intents'] & string,
@@ -310,7 +381,8 @@ export function fromTheme<T extends BuiltTheme<any, any, any, any, any, any, any
         keyof T['colors']['surface'] & string,
         keyof T['colors']['text'] & string,
         keyof T['colors']['border'] & string,
-        keyof T['sizes']['button'] & string
+        keyof T['sizes']['button'] & string,
+        keyof T['breakpoints'] & string
     >();
     (builder as any).config = { ...base };
     return builder;

package/src/darkTheme.ts

@@ -54,15 +54,15 @@ export const darkTheme = createTheme()
     // Shadows (higher opacity for dark backgrounds)
     .addShadow('none', {})
     .addShadow('sm', {
-        elevation: 1,
+        elevation: 2,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.18,
-        shadowRadius: 1,
+        shadowRadius: 2,
         boxShadow: '0px 1px 2px rgba(0, 0, 0, 0.18)',
     })
     .addShadow('md', {
-        elevation: 3,
+        elevation: 4,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 3 },
         shadowOpacity: 0.2,
@@ -70,7 +70,7 @@ export const darkTheme = createTheme()
         boxShadow: '0px 3px 9.3px rgba(0, 0, 0, 0.2)',
     })
     .addShadow('lg', {
-        elevation: 6,
+        elevation: 8,
         shadowColor: '#000000',
         shadowOffset: { width: 0, height: 6 },
         shadowOpacity: 0.23,
@@ -89,7 +89,8 @@ export const darkTheme = createTheme()
     .setColors({
         pallet: generateDarkColorPallette(),
         surface: {
-            primary: '#121212',
+            screen: '#121212',
+            primary: '#1e1e1e',
             secondary: '#1e1e1e',
             tertiary: '#2a2a2a',
             inverse: '#ffffff',
@@ -123,6 +124,14 @@ export const darkTheme = createTheme()
             disabled: 0.4,
         },
     })
+    // Breakpoints (same as light theme)
+    .setBreakpoints({
+        xs: 0,      // Extra small devices (portrait phones)
+        sm: 576,    // Small devices (landscape phones)
+        md: 768,    // Medium devices (tablets)
+        lg: 992,    // Large devices (desktops)
+        xl: 1200,   // Extra large devices (large desktops)
+    })
     .build();
 
 // =============================================================================

package/src/index.ts

@@ -18,4 +18,9 @@ export * from './styles';
 export * from './helpers';
 export * from './styleBuilder';
 export * from './extensions';
-export * from './componentStyles';
+export * from './componentStyles';
+
+// Responsive utilities
+export * from './responsive';
+export * from './breakpoints';
+export * from './useResponsiveStyle';

package/src/lightTheme.ts

@@ -88,6 +88,7 @@ export const lightTheme = createTheme()
     .setColors({
         pallet: generateColorPallette(),
         surface: {
+            screen: '#ffffff',
             primary: '#ffffff',
             secondary: '#f5f5f5',
             tertiary: '#e0e0e0',
@@ -155,11 +156,11 @@ export const lightTheme = createTheme()
             xl: { radioSize: 26, radioDotSize: 20, fontSize: 20, gap: 12 },
         },
         select: {
-            xs: { paddingHorizontal: 8, minHeight: 28, fontSize: 12, iconSize: 16 },
-            sm: { paddingHorizontal: 10, minHeight: 36, fontSize: 14, iconSize: 18 },
-            md: { paddingHorizontal: 12, minHeight: 44, fontSize: 16, iconSize: 20 },
-            lg: { paddingHorizontal: 16, minHeight: 52, fontSize: 18, iconSize: 24 },
-            xl: { paddingHorizontal: 20, minHeight: 60, fontSize: 20, iconSize: 28 },
+            xs: { paddingHorizontal: 8, minHeight: 28, fontSize: 12, iconSize: 16, borderRadius: 4 },
+            sm: { paddingHorizontal: 10, minHeight: 36, fontSize: 14, iconSize: 18, borderRadius: 4 },
+            md: { paddingHorizontal: 12, minHeight: 44, fontSize: 16, iconSize: 20, borderRadius: 4 },
+            lg: { paddingHorizontal: 16, minHeight: 52, fontSize: 18, iconSize: 24, borderRadius: 4 },
+            xl: { paddingHorizontal: 20, minHeight: 60, fontSize: 20, iconSize: 28, borderRadius: 4 },
         },
         slider: {
             xs: { trackHeight: 2, thumbSize: 12, thumbIconSize: 8, markHeight: 6, labelFontSize: 10 },
@@ -290,6 +291,14 @@ export const lightTheme = createTheme()
             disabled: 0.5,
         },
     })
+    // Breakpoints
+    .setBreakpoints({
+        xs: 0,      // Extra small devices (portrait phones)
+        sm: 576,    // Small devices (landscape phones)
+        md: 768,    // Medium devices (tablets)
+        lg: 992,    // Large devices (desktops)
+        xl: 1200,   // Extra large devices (large desktops)
+    })
     .build();
 
 // =============================================================================

package/src/responsive.ts

@@ -0,0 +1,123 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import { UnistylesRuntime } from 'react-native-unistyles';
+import { Breakpoint, BreakpointsRecord } from './theme/breakpoint';
+
+/**
+ * Makes a value responsive - can be either a direct value or
+ * an object mapping breakpoint names to values.
+ *
+ * @example
+ * ```typescript
+ * // Direct value
+ * const size: Responsive<Size> = 'md';
+ *
+ * // Responsive value
+ * const size: Responsive<Size> = { xs: 'sm', md: 'lg' };
+ * ```
+ */
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+
+/**
+ * Type guard to check if a value is a responsive object (breakpoint map).
+ *
+ * @param value - The value to check
+ * @returns True if the value is an object with breakpoint keys
+ *
+ * @example
+ * ```typescript
+ * const size: Responsive<Size> = { xs: 'sm', md: 'lg' };
+ *
+ * if (isResponsiveValue(size)) {
+ *   // size is Partial<Record<Breakpoint, Size>>
+ *   console.log(size.xs); // 'sm'
+ * } else {
+ *   // size is Size
+ *   console.log(size); // 'md'
+ * }
+ * ```
+ */
+export function isResponsiveValue<T>(value: Responsive<T>): value is Partial<Record<Breakpoint, T>> {
+    return (
+        typeof value === 'object' &&
+        value !== null &&
+        !Array.isArray(value) &&
+        !('$$typeof' in value) // Not a React element
+    );
+}
+
+/**
+ * Style object where each property can be a responsive value.
+ */
+export type ResponsiveStyle = {
+    [K in keyof ViewStyle]?: Responsive<ViewStyle[K]>;
+} & {
+    [K in keyof TextStyle]?: Responsive<TextStyle[K]>;
+} & {
+    [K in keyof ImageStyle]?: Responsive<ImageStyle[K]>;
+};
+
+/**
+ * Resolve a single responsive value to its current breakpoint value.
+ * Uses CSS cascade behavior - falls back to the nearest smaller breakpoint.
+ */
+function resolveValue<T>(
+    value: Responsive<T>,
+    screenWidth: number,
+    breakpoints: BreakpointsRecord,
+    sortedBps: Breakpoint[]
+): T | undefined {
+    if (!isResponsiveValue(value)) {
+        return value;
+    }
+
+    // Find the largest breakpoint that matches current screen width
+    // and has a defined value (CSS cascade behavior)
+    for (const bp of sortedBps) {
+        if (screenWidth >= breakpoints[bp] && value[bp] !== undefined) {
+            return value[bp];
+        }
+    }
+
+    return undefined;
+}
+
+/**
+ * Resolve a responsive style object to concrete style values based on current breakpoint.
+ *
+ * This is a non-hook version for use outside of React components.
+ *
+ * @param style - Style object with responsive values
+ * @returns Resolved style object for the current breakpoint
+ *
+ * @example
+ * ```typescript
+ * const style = resolveResponsiveStyle({
+ *   flexDirection: { xs: 'column', md: 'row' },
+ *   padding: { xs: 8, lg: 16 },
+ *   backgroundColor: '#fff', // Non-responsive values pass through
+ * });
+ * // On tablet: { flexDirection: 'row', padding: 8, backgroundColor: '#fff' }
+ * ```
+ */
+export function resolveResponsiveStyle(style: ResponsiveStyle): ViewStyle & TextStyle & ImageStyle {
+    const breakpoints = UnistylesRuntime.breakpoints as BreakpointsRecord;
+    const screenWidth = UnistylesRuntime.screen.width;
+
+    // Sort breakpoints by value descending for cascade lookup
+    const sortedBps = Object.entries(breakpoints)
+        .sort(([, a], [, b]) => b - a)
+        .map(([name]) => name as Breakpoint);
+
+    const resolved: Record<string, unknown> = {};
+
+    for (const [key, value] of Object.entries(style)) {
+        if (value === undefined) continue;
+
+        const resolvedValue = resolveValue(value, screenWidth, breakpoints, sortedBps);
+        if (resolvedValue !== undefined) {
+            resolved[key] = resolvedValue;
+        }
+    }
+
+    return resolved as ViewStyle & TextStyle & ImageStyle;
+}

package/src/styleBuilder.ts

@@ -27,6 +27,9 @@ export type ComponentName =
   | 'Card'
   | 'Checkbox'
   | 'Chip'
+  | 'DatePickerCalendar'
+  | 'DateTimeInput'
+  | 'DateTimePicker'
   | 'Dialog'
   | 'Divider'
   | 'Icon'
@@ -49,6 +52,7 @@ export type ComponentName =
   | 'Table'
   | 'Text'
   | 'TextArea'
+  | 'TimePicker'
   | 'Tooltip'
   | 'Video'
   | 'View';

package/src/theme/breakpoint.ts

@@ -0,0 +1,30 @@
+import { RegisteredTheme } from './extensions';
+
+/**
+ * All available breakpoint names.
+ * Derived from your registered theme's breakpoints.
+ *
+ * @example
+ * ```typescript
+ * // With default theme: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ * const bp: Breakpoint = 'md';
+ * ```
+ */
+export type Breakpoint = RegisteredTheme['theme'] extends { breakpoints: infer B }
+    ? B extends Record<string, number>
+        ? keyof B & string
+        : never
+    : never;
+
+/**
+ * Get the breakpoints record type from the theme.
+ *
+ * @example
+ * ```typescript
+ * // { xs: number; sm: number; md: number; lg: number; xl: number; }
+ * const bps: BreakpointsRecord = theme.breakpoints;
+ * ```
+ */
+export type BreakpointsRecord = RegisteredTheme['theme'] extends { breakpoints: infer B }
+    ? B
+    : Record<string, number>;

package/src/theme/extensions.ts

@@ -15,6 +15,7 @@ export interface DefaultTheme {
         surface: Record<string, ColorValue>;
         text: Record<string, ColorValue>;
         border: Record<string, ColorValue>;
+        card: Record<string, ColorValue>;
     };
     sizes: {
         button: Record<string, ButtonSizeValue>;
@@ -42,6 +43,11 @@ export interface DefaultTheme {
         typography: Record<Typography, TypographyValue>;
     };
     interaction: InteractionConfig;
+    /**
+     * Responsive breakpoints for width-based styling.
+     * First breakpoint MUST have value 0.
+     */
+    breakpoints: Record<string, number>;
     /**
      * Component style extensions.
      * Populated by the extension system when extendComponent is called.

package/src/theme/index.ts

@@ -16,6 +16,7 @@ export * from "./intent";
 export * from "./size";
 export * from "./color";
 export * from "./shadow";
+export * from "./breakpoint";
 
 // Re-export structures except IntentValue and ShadowValue (those are re-exported with extensions from intent.ts and shadow.ts)
 export type {
@@ -23,6 +24,7 @@ export type {
     ColorValue,
     Shade,
     SizeValue,
+    BreakpointValue,
     Typography,
     TypographyValue,
     ButtonSizeValue,

package/src/theme/structures.ts

@@ -44,6 +44,12 @@ export type Shade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
  */
 export type SizeValue = number | string;
 
+/**
+ * Breakpoint value - must be a non-negative number representing pixels.
+ * The first breakpoint in a set MUST be 0 (simulates CSS cascading behavior).
+ */
+export type BreakpointValue = number;
+
 /**
  * Interaction state configuration for hover, focus, active states
  */
@@ -137,6 +143,7 @@ export type SelectSizeValue = {
     minHeight: SizeValue;
     fontSize: SizeValue;
     iconSize: SizeValue;
+    borderRadius: SizeValue;
 };
 
 export type SliderSizeValue = {

package/src/theme/surface.ts

@@ -1,3 +1,3 @@
-export type Surface = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'inverse-secondary' | 'inverse-tertiary';
+export type Surface = 'screen' | 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'inverse-secondary' | 'inverse-tertiary';
 
 export type SurfaceValue = string;

package/src/unistyles.ts

@@ -1,5 +1,8 @@
 import { Theme } from './theme';
 
+// Extract breakpoints type from theme
+type ThemeBreakpoints = Theme extends { breakpoints: infer B } ? B : Record<string, number>;
+
 // Unistyles v3 themes declaration
 // Apps should configure their own themes via StyleSheet.configure()
 declare module 'react-native-unistyles' {
@@ -9,6 +12,9 @@ declare module 'react-native-unistyles' {
     // Apps can add more themes via module augmentation
     [key: string]: Theme;
   }
+
+  // Breakpoints declaration - derives from theme breakpoints
+  export interface UnistylesBreakpoints extends ThemeBreakpoints {}
 }
 
 // Export for type checking

package/src/useResponsiveStyle.ts

@@ -0,0 +1,282 @@
+import { useState, useEffect, useMemo } from 'react';
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import { Dimensions, Platform } from 'react-native';
+import { UnistylesRuntime } from 'react-native-unistyles';
+import { Breakpoint, BreakpointsRecord } from './theme/breakpoint';
+import { isResponsiveValue, Responsive } from './responsive';
+
+/**
+ * Style object where each property can be a responsive value.
+ */
+export type ResponsiveStyleInput = {
+    [K in keyof ViewStyle]?: Responsive<ViewStyle[K]>;
+} & {
+    [K in keyof TextStyle]?: Responsive<TextStyle[K]>;
+} & {
+    [K in keyof ImageStyle]?: Responsive<ImageStyle[K]>;
+};
+
+/**
+ * Get current screen width (non-reactive, for internal use)
+ */
+function getScreenWidth(): number {
+    if (Platform.OS === 'web' && typeof window !== 'undefined') {
+        return window.innerWidth;
+    }
+    return Dimensions.get('window').width;
+}
+
+/**
+ * Calculate the current breakpoint from screen width.
+ */
+function calculateBreakpoint(
+    screenWidth: number,
+    breakpoints: BreakpointsRecord
+): Breakpoint | undefined {
+    const sortedBps = Object.entries(breakpoints)
+        .sort(([, a], [, b]) => b - a) as [Breakpoint, number][];
+
+    for (const [name, value] of sortedBps) {
+        if (screenWidth >= value) {
+            return name;
+        }
+    }
+    return undefined;
+}
+
+/**
+ * Hook that only re-renders when the breakpoint changes, not on every pixel.
+ * Returns both the current breakpoint and the screen width.
+ */
+function useBreakpointChange(): { breakpoint: Breakpoint | undefined; screenWidth: number } {
+    const breakpoints = UnistylesRuntime.breakpoints as BreakpointsRecord;
+
+    const [state, setState] = useState(() => {
+        const width = getScreenWidth();
+        return {
+            breakpoint: calculateBreakpoint(width, breakpoints),
+            screenWidth: width,
+        };
+    });
+
+    useEffect(() => {
+        const handleResize = () => {
+            const newWidth = getScreenWidth();
+            const newBreakpoint = calculateBreakpoint(newWidth, breakpoints);
+
+            // Only update state if breakpoint changed
+            setState(prev => {
+                if (prev.breakpoint !== newBreakpoint) {
+                    return { breakpoint: newBreakpoint, screenWidth: newWidth };
+                }
+                return prev;
+            });
+        };
+
+        if (Platform.OS === 'web' && typeof window !== 'undefined') {
+            window.addEventListener('resize', handleResize);
+            return () => window.removeEventListener('resize', handleResize);
+        } else {
+            const subscription = Dimensions.addEventListener('change', () => {
+                handleResize();
+            });
+            return () => subscription?.remove();
+        }
+    }, [breakpoints]);
+
+    return state;
+}
+
+/**
+ * Hook to get the current screen width with proper reactivity.
+ * WARNING: This re-renders on every resize. Use useBreakpoint() if you only
+ * need to react to breakpoint changes.
+ */
+export function useScreenWidth(): number {
+    const [width, setWidth] = useState(getScreenWidth);
+
+    useEffect(() => {
+        if (Platform.OS === 'web' && typeof window !== 'undefined') {
+            const handleResize = () => setWidth(window.innerWidth);
+            window.addEventListener('resize', handleResize);
+            return () => window.removeEventListener('resize', handleResize);
+        } else {
+            const subscription = Dimensions.addEventListener('change', ({ window }) => {
+                setWidth(window.width);
+            });
+            return () => subscription?.remove();
+        }
+    }, []);
+
+    return width;
+}
+
+/**
+ * Resolve a single responsive value to its current breakpoint value.
+ */
+function resolveValue<T>(
+    value: Responsive<T>,
+    screenWidth: number,
+    breakpoints: BreakpointsRecord,
+    sortedBps: Breakpoint[]
+): T | undefined {
+    if (!isResponsiveValue(value)) {
+        return value;
+    }
+
+    for (const bp of sortedBps) {
+        if (screenWidth >= breakpoints[bp] && value[bp] !== undefined) {
+            return value[bp];
+        }
+    }
+
+    return undefined;
+}
+
+/**
+ * Hook to resolve responsive style values based on the current breakpoint.
+ *
+ * Allows you to pass style objects with responsive values that automatically
+ * resolve to the appropriate value for the current screen width.
+ *
+ * @param style - Style object with responsive values (or factory function)
+ * @param deps - Optional dependency array. If not provided, style is only recalculated on breakpoint change.
+ *               Pass dependencies if your style object depends on props or state.
+ * @returns Resolved style object for the current breakpoint
+ *
+ * @example
+ * ```tsx
+ * // Static styles - only updates on breakpoint change
+ * function MyComponent() {
+ *   const containerStyle = useResponsiveStyle({
+ *     flexDirection: { xs: 'column', md: 'row' },
+ *     padding: { xs: 8, lg: 16 },
+ *     backgroundColor: '#fff',
+ *   });
+ *
+ *   return <View style={containerStyle}>...</View>;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Dynamic styles - updates when dependencies change
+ * function Card({ color, size }) {
+ *   const cardStyle = useResponsiveStyle({
+ *     padding: { xs: 12, md: 24 },
+ *     backgroundColor: color,
+ *     width: size,
+ *   }, [color, size]);
+ *
+ *   return <View style={cardStyle}>...</View>;
+ * }
+ * ```
+ */
+export function useResponsiveStyle(
+    style: ResponsiveStyleInput | (() => ResponsiveStyleInput),
+    deps?: React.DependencyList
+): ViewStyle & TextStyle & ImageStyle {
+    // Only re-render when breakpoint changes, not on every pixel
+    const { breakpoint, screenWidth } = useBreakpointChange();
+    const breakpoints = UnistylesRuntime.breakpoints as BreakpointsRecord;
+
+    // Sort breakpoints by value descending for cascade lookup
+    const sortedBps = useMemo(() =>
+        Object.entries(breakpoints)
+            .sort(([, a], [, b]) => b - a)
+            .map(([name]) => name as Breakpoint),
+        [breakpoints]
+    );
+
+    // Build the dependency array: breakpoint + user-provided deps (or empty)
+    const effectiveDeps = deps
+        ? [breakpoint, sortedBps, ...deps]
+        : [breakpoint, sortedBps];
+
+    const resolved = useMemo(() => {
+        const styleObj = typeof style === 'function' ? style() : style;
+        const result: Record<string, unknown> = {};
+
+        for (const [key, value] of Object.entries(styleObj)) {
+            if (value === undefined) continue;
+
+            const resolvedValue = resolveValue(value, screenWidth, breakpoints, sortedBps);
+            if (resolvedValue !== undefined) {
+                result[key] = resolvedValue;
+            }
+        }
+
+        return result as ViewStyle & TextStyle & ImageStyle;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, effectiveDeps);
+
+    return resolved;
+}
+
+/**
+ * Hook to get the current breakpoint name.
+ * Only re-renders when the breakpoint changes, not on every pixel.
+ *
+ * @returns The current breakpoint name
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const breakpoint = useBreakpoint();
+ *
+ *   return (
+ *     <Text>Current breakpoint: {breakpoint}</Text>
+ *   );
+ * }
+ * ```
+ */
+export function useBreakpoint(): Breakpoint | undefined {
+    const { breakpoint } = useBreakpointChange();
+    return breakpoint;
+}
+
+/**
+ * Hook to check if current viewport is at or above a breakpoint.
+ * Only re-renders when the breakpoint changes.
+ *
+ * @param breakpoint - The breakpoint to check against
+ * @returns True if viewport width >= breakpoint value
+ *
+ * @example
+ * ```tsx
+ * function Sidebar() {
+ *   const isDesktop = useBreakpointUp('lg');
+ *
+ *   if (!isDesktop) return null;
+ *
+ *   return <View>Desktop sidebar</View>;
+ * }
+ * ```
+ */
+export function useBreakpointUp(targetBreakpoint: Breakpoint): boolean {
+    const { screenWidth } = useBreakpointChange();
+    const breakpoints = UnistylesRuntime.breakpoints as BreakpointsRecord;
+    return screenWidth >= breakpoints[targetBreakpoint];
+}
+
+/**
+ * Hook to check if current viewport is below a breakpoint.
+ * Only re-renders when the breakpoint changes.
+ *
+ * @param breakpoint - The breakpoint to check against
+ * @returns True if viewport width < breakpoint value
+ *
+ * @example
+ * ```tsx
+ * function MobileNav() {
+ *   const isMobile = useBreakpointDown('md');
+ *
+ *   if (!isMobile) return null;
+ *
+ *   return <View>Mobile navigation</View>;
+ * }
+ * ```
+ */
+export function useBreakpointDown(targetBreakpoint: Breakpoint): boolean {
+    return !useBreakpointUp(targetBreakpoint);
+}