@rajeev02/ui 0.1.0

package/lib/device/index.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @rajeev02/ui - Device Detection
+ *
+ * Detect device type, capabilities, input mode, and accessibility
+ * settings to drive adaptive UI rendering.
+ */
+export type DeviceType = 'phone' | 'tablet' | 'watch' | 'tv' | 'auto' | 'desktop' | 'iot';
+export type InputMode = 'touch' | 'keyboard' | 'voice' | 'rotary' | 'dpad' | 'controller';
+export interface DeviceCapabilities {
+    /** Device type */
+    type: DeviceType;
+    /** Screen width in dp/px */
+    screenWidth: number;
+    /** Screen height in dp/px */
+    screenHeight: number;
+    /** Primary input mode */
+    inputMode: InputMode;
+    /** Whether haptic feedback is available */
+    haptics: boolean;
+    /** Whether biometric auth is available */
+    biometrics: boolean;
+    /** Whether the device has a notch/dynamic island */
+    hasNotch: boolean;
+    /** Device pixel ratio */
+    pixelRatio: number;
+    /** Whether the device supports dark mode */
+    darkModeSupported: boolean;
+    /** Whether reduce motion is enabled */
+    reduceMotion: boolean;
+    /** Whether a screen reader is active */
+    screenReaderActive: boolean;
+    /** Font scale set by user */
+    fontScale: number;
+    /** Whether the device is low-end (for performance optimization) */
+    isLowEnd: boolean;
+}
+/**
+ * Detect device type from screen dimensions
+ */
+export declare function detectDeviceType(width: number, height: number): DeviceType;
+/**
+ * Get default capabilities for a device type
+ */
+export declare function getDefaultCapabilities(type: DeviceType): DeviceCapabilities;
+/**
+ * Determine if device is "low-end" based on characteristics
+ * Used to disable animations, reduce image quality, simplify UI
+ */
+export declare function isLowEndDevice(totalRamMB?: number, pixelRatio?: number): boolean;
+/**
+ * Get recommended touch target size for device type
+ * Follows WCAG 2.5.8 (44x44 minimum for mobile)
+ */
+export declare function getMinTouchTarget(type: DeviceType): number;
+/**
+ * Get recommended font size multiplier for device type
+ */
+export declare function getFontMultiplier(type: DeviceType, fontScale?: number): number;
+//# sourceMappingURL=index.d.ts.map

package/lib/device/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/device/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,GAAG,KAAK,CAAC;AAC1F,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,CAAC;AAE1F,MAAM,WAAW,kBAAkB;IACjC,kBAAkB;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,4BAA4B;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,SAAS,EAAE,SAAS,CAAC;IACrB,2CAA2C;IAC3C,OAAO,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,UAAU,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,QAAQ,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,iBAAiB,EAAE,OAAO,CAAC;IAC3B,uCAAuC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,6BAA6B;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,UAAU,CAS1E;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,UAAU,GAAG,kBAAkB,CA2B3E;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAIhF;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAW1D;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,GAAE,MAAY,GAAG,MAAM,CAWnF"}

package/lib/device/index.js

@@ -0,0 +1,102 @@
+"use strict";
+/**
+ * @rajeev02/ui - Device Detection
+ *
+ * Detect device type, capabilities, input mode, and accessibility
+ * settings to drive adaptive UI rendering.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.detectDeviceType = detectDeviceType;
+exports.getDefaultCapabilities = getDefaultCapabilities;
+exports.isLowEndDevice = isLowEndDevice;
+exports.getMinTouchTarget = getMinTouchTarget;
+exports.getFontMultiplier = getFontMultiplier;
+/**
+ * Detect device type from screen dimensions
+ */
+function detectDeviceType(width, height) {
+    const minDim = Math.min(width, height);
+    const maxDim = Math.max(width, height);
+    if (minDim < 200)
+        return 'watch';
+    if (minDim < 600 && maxDim < 1000)
+        return 'phone';
+    if (minDim >= 600 && maxDim < 1400)
+        return 'tablet';
+    if (minDim >= 1400)
+        return 'tv';
+    return 'phone'; // Default
+}
+/**
+ * Get default capabilities for a device type
+ */
+function getDefaultCapabilities(type) {
+    const defaults = {
+        phone: { screenWidth: 390, screenHeight: 844, inputMode: 'touch', haptics: true, pixelRatio: 3, hasNotch: true },
+        tablet: { screenWidth: 820, screenHeight: 1180, inputMode: 'touch', haptics: true, pixelRatio: 2, hasNotch: false },
+        watch: { screenWidth: 184, screenHeight: 224, inputMode: 'touch', haptics: true, pixelRatio: 2, hasNotch: false },
+        tv: { screenWidth: 1920, screenHeight: 1080, inputMode: 'dpad', haptics: false, pixelRatio: 1, hasNotch: false },
+        auto: { screenWidth: 1280, screenHeight: 720, inputMode: 'touch', haptics: true, pixelRatio: 2, hasNotch: false },
+        desktop: { screenWidth: 1440, screenHeight: 900, inputMode: 'keyboard', haptics: false, pixelRatio: 2, hasNotch: false },
+        iot: { screenWidth: 320, screenHeight: 240, inputMode: 'touch', haptics: false, pixelRatio: 1, hasNotch: false },
+    };
+    return {
+        type,
+        screenWidth: 390,
+        screenHeight: 844,
+        inputMode: 'touch',
+        haptics: false,
+        biometrics: false,
+        hasNotch: false,
+        pixelRatio: 2,
+        darkModeSupported: true,
+        reduceMotion: false,
+        screenReaderActive: false,
+        fontScale: 1.0,
+        isLowEnd: false,
+        ...defaults[type],
+    };
+}
+/**
+ * Determine if device is "low-end" based on characteristics
+ * Used to disable animations, reduce image quality, simplify UI
+ */
+function isLowEndDevice(totalRamMB, pixelRatio) {
+    if (totalRamMB && totalRamMB < 2048)
+        return true; // < 2GB RAM
+    if (pixelRatio && pixelRatio < 1.5)
+        return true;
+    return false;
+}
+/**
+ * Get recommended touch target size for device type
+ * Follows WCAG 2.5.8 (44x44 minimum for mobile)
+ */
+function getMinTouchTarget(type) {
+    switch (type) {
+        case 'watch': return 38; // Smaller screen, slightly smaller targets
+        case 'phone': return 44; // WCAG standard
+        case 'tablet': return 44;
+        case 'tv': return 56; // Larger for distance viewing with remote
+        case 'auto': return 56; // Larger for driving safety
+        case 'desktop': return 32; // Mouse is more precise
+        case 'iot': return 44;
+        default: return 44;
+    }
+}
+/**
+ * Get recommended font size multiplier for device type
+ */
+function getFontMultiplier(type, fontScale = 1.0) {
+    const baseMultiplier = {
+        watch: 0.85,
+        phone: 1.0,
+        tablet: 1.1,
+        tv: 1.8, // Much larger for 10-foot UI
+        auto: 1.4, // Larger for glance-ability
+        desktop: 1.0,
+        iot: 0.9,
+    };
+    return (baseMultiplier[type] ?? 1.0) * fontScale;
+}
+//# sourceMappingURL=index.js.map

package/lib/device/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/device/index.ts"],"names":[],"mappings":"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"}

package/lib/hooks/index.d.ts

@@ -0,0 +1,93 @@
+/**
+ * @rajeev02/ui - React Hooks
+ *
+ * Hooks for device-aware rendering, theming, and accessibility.
+ */
+import type { DeviceType, InputMode } from '../device';
+import type { ThemeMode } from '../tokens';
+/**
+ * Hook return type for useDevice
+ */
+export interface UseDeviceResult {
+    type: DeviceType;
+    isPhone: boolean;
+    isTablet: boolean;
+    isWatch: boolean;
+    isTv: boolean;
+    isAuto: boolean;
+    isDesktop: boolean;
+    inputMode: InputMode;
+    isLowEnd: boolean;
+    screenWidth: number;
+    screenHeight: number;
+    fontScale: number;
+    pixelRatio: number;
+}
+/**
+ * Hook return type for useAccessibility
+ */
+export interface UseAccessibilityResult {
+    screenReaderActive: boolean;
+    reduceMotion: boolean;
+    fontScale: number;
+    highContrast: boolean;
+    /** Minimum touch target size for current device */
+    minTouchTarget: number;
+    /** Whether to show large text */
+    largeText: boolean;
+}
+/**
+ * Hook return type for useTheme
+ */
+export interface UseThemeResult {
+    mode: ThemeMode;
+    colors: Record<string, unknown>;
+    spacing: Record<string, number>;
+    isDark: boolean;
+    isHighContrast: boolean;
+}
+/**
+ * Adaptive layout props — define different content per device type
+ *
+ * @example
+ * ```tsx
+ * <AdaptiveLayout
+ *   phone={<PhoneView />}
+ *   tablet={<TabletView />}
+ *   watch={<WatchView />}
+ *   tv={<TvView />}
+ *   auto={<AutoView />}
+ * />
+ * ```
+ */
+export interface AdaptiveLayoutProps {
+    phone?: unknown;
+    tablet?: unknown;
+    watch?: unknown;
+    tv?: unknown;
+    auto?: unknown;
+    desktop?: unknown;
+    /** Fallback if specific device view not provided */
+    fallback?: unknown;
+}
+/**
+ * Get the appropriate content for the current device type
+ */
+export declare function resolveAdaptiveContent(props: AdaptiveLayoutProps, deviceType: DeviceType): unknown;
+/**
+ * Responsive value helper — pick value based on screen width
+ *
+ * @example
+ * ```ts
+ * const padding = responsive(screenWidth, {
+ *   watch: 4,
+ *   phone: 16,
+ *   tablet: 24,
+ *   desktop: 32,
+ * });
+ * ```
+ */
+export declare function responsive<T>(screenWidth: number, values: Partial<Record<DeviceType, T>> & {
+    phone: T;
+}): T;
+//# sourceMappingURL=index.d.ts.map

package/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,KAAK,EAAE,UAAU,EAAsB,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,cAAc,EAAE,MAAM,CAAC;IACvB,iCAAiC;IACjC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,mBAAmB,EAC1B,UAAU,EAAE,UAAU,GACrB,OAAO,CAYT;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAC1B,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,GAAG;IAAE,KAAK,EAAE,CAAC,CAAA;CAAE,GACpD,CAAC,CAMH"}

package/lib/hooks/index.js

@@ -0,0 +1,49 @@
+"use strict";
+/**
+ * @rajeev02/ui - React Hooks
+ *
+ * Hooks for device-aware rendering, theming, and accessibility.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveAdaptiveContent = resolveAdaptiveContent;
+exports.responsive = responsive;
+/**
+ * Get the appropriate content for the current device type
+ */
+function resolveAdaptiveContent(props, deviceType) {
+    const map = {
+        phone: props.phone,
+        tablet: props.tablet ?? props.phone, // Tablet falls back to phone
+        watch: props.watch,
+        tv: props.tv ?? props.tablet ?? props.phone, // TV falls back to tablet then phone
+        auto: props.auto ?? props.phone,
+        desktop: props.desktop ?? props.tablet ?? props.phone,
+        iot: props.phone,
+    };
+    return map[deviceType] ?? props.fallback ?? props.phone;
+}
+/**
+ * Responsive value helper — pick value based on screen width
+ *
+ * @example
+ * ```ts
+ * const padding = responsive(screenWidth, {
+ *   watch: 4,
+ *   phone: 16,
+ *   tablet: 24,
+ *   desktop: 32,
+ * });
+ * ```
+ */
+function responsive(screenWidth, values) {
+    if (screenWidth < 200 && values.watch !== undefined)
+        return values.watch;
+    if (screenWidth < 600)
+        return values.phone;
+    if (screenWidth < 1024 && values.tablet !== undefined)
+        return values.tablet;
+    if (values.desktop !== undefined)
+        return values.desktop;
+    return values.phone;
+}
+//# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;AAiFH,wDAeC;AAeD,gCASC;AA1CD;;GAEG;AACH,SAAgB,sBAAsB,CACpC,KAA0B,EAC1B,UAAsB;IAEtB,MAAM,GAAG,GAA4B;QACnC,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,EAAO,6BAA6B;QACvE,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,EAAE,EAAE,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,EAAG,qCAAqC;QACnF,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,KAAK;QAC/B,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK;QACrD,GAAG,EAAE,KAAK,CAAC,KAAK;KACjB,CAAC;IAEF,OAAO,GAAG,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC;AAC1D,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,SAAgB,UAAU,CACxB,WAAmB,EACnB,MAAqD;IAErD,IAAI,WAAW,GAAG,GAAG,IAAI,MAAM,CAAC,KAAK,KAAK,SAAS;QAAE,OAAO,MAAM,CAAC,KAAK,CAAC;IACzE,IAAI,WAAW,GAAG,GAAG;QAAE,OAAO,MAAM,CAAC,KAAK,CAAC;IAC3C,IAAI,WAAW,GAAG,IAAI,IAAI,MAAM,CAAC,MAAM,KAAK,SAAS;QAAE,OAAO,MAAM,CAAC,MAAM,CAAC;IAC5E,IAAI,MAAM,CAAC,OAAO,KAAK,SAAS;QAAE,OAAO,MAAM,CAAC,OAAO,CAAC;IACxD,OAAO,MAAM,CAAC,KAAK,CAAC;AACtB,CAAC"}

package/lib/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @rajeev02/ui
+ *
+ * Adaptive UI Component System
+ * Device-aware rendering for phone, tablet, watch, TV, auto, IoT
+ *
+ * @author Rajeev Kumar Joshi (https://github.com/Rajeev02)
+ * @license MIT
+ */
+export { colors, spacing, typography, breakpoints, borderRadius, shadows, highContrast, getTheme, } from './tokens';
+export type { ThemeMode } from './tokens';
+export { detectDeviceType, getDefaultCapabilities, isLowEndDevice, getMinTouchTarget, getFontMultiplier, } from './device';
+export type { DeviceType, InputMode, DeviceCapabilities } from './device';
+export { resolveAdaptiveContent, responsive, } from './hooks';
+export type { UseDeviceResult, UseAccessibilityResult, UseThemeResult, AdaptiveLayoutProps, } from './hooks';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EACL,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAC/D,YAAY,EAAE,QAAQ,GACvB,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG1C,OAAO,EACL,gBAAgB,EAAE,sBAAsB,EAAE,cAAc,EACxD,iBAAiB,EAAE,iBAAiB,GACrC,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAG1E,OAAO,EACL,sBAAsB,EAAE,UAAU,GACnC,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,eAAe,EAAE,sBAAsB,EAAE,cAAc,EACvD,mBAAmB,GACpB,MAAM,SAAS,CAAC"}

package/lib/index.js

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * @rajeev02/ui
+ *
+ * Adaptive UI Component System
+ * Device-aware rendering for phone, tablet, watch, TV, auto, IoT
+ *
+ * @author Rajeev Kumar Joshi (https://github.com/Rajeev02)
+ * @license MIT
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.responsive = exports.resolveAdaptiveContent = exports.getFontMultiplier = exports.getMinTouchTarget = exports.isLowEndDevice = exports.getDefaultCapabilities = exports.detectDeviceType = exports.getTheme = exports.highContrast = exports.shadows = exports.borderRadius = exports.breakpoints = exports.typography = exports.spacing = exports.colors = void 0;
+// Design Tokens
+var tokens_1 = require("./tokens");
+Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return tokens_1.colors; } });
+Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return tokens_1.spacing; } });
+Object.defineProperty(exports, "typography", { enumerable: true, get: function () { return tokens_1.typography; } });
+Object.defineProperty(exports, "breakpoints", { enumerable: true, get: function () { return tokens_1.breakpoints; } });
+Object.defineProperty(exports, "borderRadius", { enumerable: true, get: function () { return tokens_1.borderRadius; } });
+Object.defineProperty(exports, "shadows", { enumerable: true, get: function () { return tokens_1.shadows; } });
+Object.defineProperty(exports, "highContrast", { enumerable: true, get: function () { return tokens_1.highContrast; } });
+Object.defineProperty(exports, "getTheme", { enumerable: true, get: function () { return tokens_1.getTheme; } });
+// Device Detection
+var device_1 = require("./device");
+Object.defineProperty(exports, "detectDeviceType", { enumerable: true, get: function () { return device_1.detectDeviceType; } });
+Object.defineProperty(exports, "getDefaultCapabilities", { enumerable: true, get: function () { return device_1.getDefaultCapabilities; } });
+Object.defineProperty(exports, "isLowEndDevice", { enumerable: true, get: function () { return device_1.isLowEndDevice; } });
+Object.defineProperty(exports, "getMinTouchTarget", { enumerable: true, get: function () { return device_1.getMinTouchTarget; } });
+Object.defineProperty(exports, "getFontMultiplier", { enumerable: true, get: function () { return device_1.getFontMultiplier; } });
+// Hooks & Adaptive Layout
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "resolveAdaptiveContent", { enumerable: true, get: function () { return hooks_1.resolveAdaptiveContent; } });
+Object.defineProperty(exports, "responsive", { enumerable: true, get: function () { return hooks_1.responsive; } });
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;;AAEH,gBAAgB;AAChB,mCAGkB;AAFhB,gGAAA,MAAM,OAAA;AAAE,iGAAA,OAAO,OAAA;AAAE,oGAAA,UAAU,OAAA;AAAE,qGAAA,WAAW,OAAA;AAAE,sGAAA,YAAY,OAAA;AAAE,iGAAA,OAAO,OAAA;AAC/D,sGAAA,YAAY,OAAA;AAAE,kGAAA,QAAQ,OAAA;AAIxB,mBAAmB;AACnB,mCAGkB;AAFhB,0GAAA,gBAAgB,OAAA;AAAE,gHAAA,sBAAsB,OAAA;AAAE,wGAAA,cAAc,OAAA;AACxD,2GAAA,iBAAiB,OAAA;AAAE,2GAAA,iBAAiB,OAAA;AAItC,0BAA0B;AAC1B,iCAEiB;AADf,+GAAA,sBAAsB,OAAA;AAAE,mGAAA,UAAU,OAAA"}

package/lib/tokens/index.d.ts

@@ -0,0 +1,331 @@
+/**
+ * @rajeev02/ui - Design Tokens
+ *
+ * Centralized design system tokens for consistent theming
+ * across phone, tablet, watch, TV, and auto interfaces.
+ */
+export declare const colors: {
+    readonly primary: {
+        readonly 50: "#EEF2FF";
+        readonly 100: "#E0E7FF";
+        readonly 200: "#C7D2FE";
+        readonly 300: "#A5B4FC";
+        readonly 400: "#818CF8";
+        readonly 500: "#6366F1";
+        readonly 600: "#4F46E5";
+        readonly 700: "#4338CA";
+        readonly 800: "#3730A3";
+        readonly 900: "#312E81";
+    };
+    readonly accent: {
+        readonly 50: "#FFF7ED";
+        readonly 100: "#FFEDD5";
+        readonly 200: "#FED7AA";
+        readonly 300: "#FDBA74";
+        readonly 400: "#FB923C";
+        readonly 500: "#F97316";
+        readonly 600: "#EA580C";
+        readonly 700: "#C2410C";
+        readonly 800: "#9A3412";
+        readonly 900: "#7C2D12";
+    };
+    readonly success: "#10B981";
+    readonly warning: "#F59E0B";
+    readonly error: "#EF4444";
+    readonly info: "#3B82F6";
+    readonly text: {
+        readonly primary: "#111827";
+        readonly secondary: "#6B7280";
+        readonly disabled: "#9CA3AF";
+        readonly inverse: "#FFFFFF";
+    };
+    readonly background: {
+        readonly primary: "#FFFFFF";
+        readonly secondary: "#F9FAFB";
+        readonly tertiary: "#F3F4F6";
+    };
+    readonly border: {
+        readonly light: "#E5E7EB";
+        readonly medium: "#D1D5DB";
+        readonly dark: "#9CA3AF";
+    };
+};
+export declare const spacing: {
+    readonly xxs: 2;
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 24;
+    readonly xxl: 32;
+    readonly xxxl: 48;
+};
+export declare const typography: {
+    readonly fontFamily: {
+        readonly sans: "System, -apple-system, \"Noto Sans\", \"Noto Sans Devanagari\", \"Noto Sans Bengali\", \"Noto Sans Tamil\", sans-serif";
+        readonly mono: "\"SF Mono\", \"Roboto Mono\", \"Noto Sans Mono\", monospace";
+    };
+    readonly fontSize: {
+        readonly xs: 10;
+        readonly sm: 12;
+        readonly base: 14;
+        readonly md: 16;
+        readonly lg: 18;
+        readonly xl: 20;
+        readonly '2xl': 24;
+        readonly '3xl': 30;
+        readonly '4xl': 36;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.2;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+        readonly loose: 2;
+    };
+    readonly fontWeight: {
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+};
+export declare const breakpoints: {
+    /** Watch: < 200px */
+    readonly watch: 200;
+    /** Phone: 200-599px */
+    readonly phone: 600;
+    /** Tablet: 600-1023px */
+    readonly tablet: 1024;
+    /** Desktop/TV: >= 1024px */
+    readonly desktop: 1024;
+};
+export declare const borderRadius: {
+    readonly none: 0;
+    readonly sm: 4;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 16;
+    readonly full: 9999;
+};
+export declare const shadows: {
+    readonly sm: {
+        readonly shadowColor: "#000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 1;
+        };
+        readonly shadowOpacity: 0.05;
+        readonly shadowRadius: 2;
+        readonly elevation: 1;
+    };
+    readonly md: {
+        readonly shadowColor: "#000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 2;
+        };
+        readonly shadowOpacity: 0.1;
+        readonly shadowRadius: 4;
+        readonly elevation: 3;
+    };
+    readonly lg: {
+        readonly shadowColor: "#000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 4;
+        };
+        readonly shadowOpacity: 0.15;
+        readonly shadowRadius: 8;
+        readonly elevation: 5;
+    };
+};
+/** Accessibility-focused high contrast palette */
+export declare const highContrast: {
+    readonly text: {
+        readonly primary: "#000000";
+        readonly secondary: "#333333";
+        readonly inverse: "#FFFFFF";
+    };
+    readonly background: {
+        readonly primary: "#FFFFFF";
+        readonly secondary: "#F0F0F0";
+    };
+    readonly border: {
+        readonly light: "#666666";
+        readonly medium: "#333333";
+    };
+    readonly focus: "#0055FF";
+};
+export type ThemeMode = 'light' | 'dark' | 'highContrast';
+/** Get complete theme based on mode */
+export declare function getTheme(mode: ThemeMode): {
+    colors: {
+        readonly primary: {
+            readonly 50: "#EEF2FF";
+            readonly 100: "#E0E7FF";
+            readonly 200: "#C7D2FE";
+            readonly 300: "#A5B4FC";
+            readonly 400: "#818CF8";
+            readonly 500: "#6366F1";
+            readonly 600: "#4F46E5";
+            readonly 700: "#4338CA";
+            readonly 800: "#3730A3";
+            readonly 900: "#312E81";
+        };
+        readonly accent: {
+            readonly 50: "#FFF7ED";
+            readonly 100: "#FFEDD5";
+            readonly 200: "#FED7AA";
+            readonly 300: "#FDBA74";
+            readonly 400: "#FB923C";
+            readonly 500: "#F97316";
+            readonly 600: "#EA580C";
+            readonly 700: "#C2410C";
+            readonly 800: "#9A3412";
+            readonly 900: "#7C2D12";
+        };
+        readonly success: "#10B981";
+        readonly warning: "#F59E0B";
+        readonly error: "#EF4444";
+        readonly info: "#3B82F6";
+        readonly text: {
+            readonly primary: "#111827";
+            readonly secondary: "#6B7280";
+            readonly disabled: "#9CA3AF";
+            readonly inverse: "#FFFFFF";
+        };
+        readonly background: {
+            readonly primary: "#FFFFFF";
+            readonly secondary: "#F9FAFB";
+            readonly tertiary: "#F3F4F6";
+        };
+        readonly border: {
+            readonly light: "#E5E7EB";
+            readonly medium: "#D1D5DB";
+            readonly dark: "#9CA3AF";
+        };
+    } | {
+        text: {
+            readonly primary: "#000000";
+            readonly secondary: "#333333";
+            readonly inverse: "#FFFFFF";
+        };
+        background: {
+            readonly primary: "#FFFFFF";
+            readonly secondary: "#F0F0F0";
+        };
+        border: {
+            readonly light: "#666666";
+            readonly medium: "#333333";
+        };
+        primary: {
+            readonly 50: "#EEF2FF";
+            readonly 100: "#E0E7FF";
+            readonly 200: "#C7D2FE";
+            readonly 300: "#A5B4FC";
+            readonly 400: "#818CF8";
+            readonly 500: "#6366F1";
+            readonly 600: "#4F46E5";
+            readonly 700: "#4338CA";
+            readonly 800: "#3730A3";
+            readonly 900: "#312E81";
+        };
+        accent: {
+            readonly 50: "#FFF7ED";
+            readonly 100: "#FFEDD5";
+            readonly 200: "#FED7AA";
+            readonly 300: "#FDBA74";
+            readonly 400: "#FB923C";
+            readonly 500: "#F97316";
+            readonly 600: "#EA580C";
+            readonly 700: "#C2410C";
+            readonly 800: "#9A3412";
+            readonly 900: "#7C2D12";
+        };
+        success: "#10B981";
+        warning: "#F59E0B";
+        error: "#EF4444";
+        info: "#3B82F6";
+    };
+    spacing: {
+        readonly xxs: 2;
+        readonly xs: 4;
+        readonly sm: 8;
+        readonly md: 12;
+        readonly lg: 16;
+        readonly xl: 24;
+        readonly xxl: 32;
+        readonly xxxl: 48;
+    };
+    typography: {
+        readonly fontFamily: {
+            readonly sans: "System, -apple-system, \"Noto Sans\", \"Noto Sans Devanagari\", \"Noto Sans Bengali\", \"Noto Sans Tamil\", sans-serif";
+            readonly mono: "\"SF Mono\", \"Roboto Mono\", \"Noto Sans Mono\", monospace";
+        };
+        readonly fontSize: {
+            readonly xs: 10;
+            readonly sm: 12;
+            readonly base: 14;
+            readonly md: 16;
+            readonly lg: 18;
+            readonly xl: 20;
+            readonly '2xl': 24;
+            readonly '3xl': 30;
+            readonly '4xl': 36;
+        };
+        readonly lineHeight: {
+            readonly tight: 1.2;
+            readonly normal: 1.5;
+            readonly relaxed: 1.75;
+            readonly loose: 2;
+        };
+        readonly fontWeight: {
+            readonly regular: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+    };
+    borderRadius: {
+        readonly none: 0;
+        readonly sm: 4;
+        readonly md: 8;
+        readonly lg: 12;
+        readonly xl: 16;
+        readonly full: 9999;
+    };
+    shadows: {
+        readonly sm: {
+            readonly shadowColor: "#000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 1;
+            };
+            readonly shadowOpacity: 0.05;
+            readonly shadowRadius: 2;
+            readonly elevation: 1;
+        };
+        readonly md: {
+            readonly shadowColor: "#000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 2;
+            };
+            readonly shadowOpacity: 0.1;
+            readonly shadowRadius: 4;
+            readonly elevation: 3;
+        };
+        readonly lg: {
+            readonly shadowColor: "#000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 4;
+            };
+            readonly shadowOpacity: 0.15;
+            readonly shadowRadius: 8;
+            readonly elevation: 5;
+        };
+    };
+    mode: ThemeMode;
+};
+//# sourceMappingURL=index.d.ts.map

package/lib/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcT,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;CASV,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Bb,CAAC;AAEX,eAAO,MAAM,WAAW;IACtB,qBAAqB;;IAErB,uBAAuB;;IAEvB,yBAAyB;;IAEzB,4BAA4B;;CAEpB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;;;CAOf,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIV,CAAC;AAEX,kDAAkD;AAClD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;CAKf,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,cAAc,CAAC;AAE1D,uCAAuC;AACvC,wBAAgB,QAAQ,CAAC,IAAI,EAAE,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EASvC"}

package/lib/tokens/index.js

@@ -0,0 +1,109 @@
+"use strict";
+/**
+ * @rajeev02/ui - Design Tokens
+ *
+ * Centralized design system tokens for consistent theming
+ * across phone, tablet, watch, TV, and auto interfaces.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.highContrast = exports.shadows = exports.borderRadius = exports.breakpoints = exports.typography = exports.spacing = exports.colors = void 0;
+exports.getTheme = getTheme;
+exports.colors = {
+    // Primary palette
+    primary: { 50: '#EEF2FF', 100: '#E0E7FF', 200: '#C7D2FE', 300: '#A5B4FC', 400: '#818CF8', 500: '#6366F1', 600: '#4F46E5', 700: '#4338CA', 800: '#3730A3', 900: '#312E81' },
+    // Indian-friendly accent (saffron-inspired)
+    accent: { 50: '#FFF7ED', 100: '#FFEDD5', 200: '#FED7AA', 300: '#FDBA74', 400: '#FB923C', 500: '#F97316', 600: '#EA580C', 700: '#C2410C', 800: '#9A3412', 900: '#7C2D12' },
+    // Semantic
+    success: '#10B981',
+    warning: '#F59E0B',
+    error: '#EF4444',
+    info: '#3B82F6',
+    // Neutrals
+    text: { primary: '#111827', secondary: '#6B7280', disabled: '#9CA3AF', inverse: '#FFFFFF' },
+    background: { primary: '#FFFFFF', secondary: '#F9FAFB', tertiary: '#F3F4F6' },
+    border: { light: '#E5E7EB', medium: '#D1D5DB', dark: '#9CA3AF' },
+};
+exports.spacing = {
+    xxs: 2,
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    xxl: 32,
+    xxxl: 48,
+};
+exports.typography = {
+    // Font families with Indian script fallbacks
+    fontFamily: {
+        sans: 'System, -apple-system, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Tamil", sans-serif',
+        mono: '"SF Mono", "Roboto Mono", "Noto Sans Mono", monospace',
+    },
+    // Size scale
+    fontSize: {
+        xs: 10,
+        sm: 12,
+        base: 14,
+        md: 16,
+        lg: 18,
+        xl: 20,
+        '2xl': 24,
+        '3xl': 30,
+        '4xl': 36,
+    },
+    // Line heights (slightly higher for Devanagari and other Indian scripts)
+    lineHeight: {
+        tight: 1.2,
+        normal: 1.5,
+        relaxed: 1.75, // Better for Indian scripts with diacritics
+        loose: 2.0,
+    },
+    fontWeight: {
+        regular: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+    },
+};
+exports.breakpoints = {
+    /** Watch: < 200px */
+    watch: 200,
+    /** Phone: 200-599px */
+    phone: 600,
+    /** Tablet: 600-1023px */
+    tablet: 1024,
+    /** Desktop/TV: >= 1024px */
+    desktop: 1024,
+};
+exports.borderRadius = {
+    none: 0,
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    full: 9999,
+};
+exports.shadows = {
+    sm: { shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1 },
+    md: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 3 },
+    lg: { shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.15, shadowRadius: 8, elevation: 5 },
+};
+/** Accessibility-focused high contrast palette */
+exports.highContrast = {
+    text: { primary: '#000000', secondary: '#333333', inverse: '#FFFFFF' },
+    background: { primary: '#FFFFFF', secondary: '#F0F0F0' },
+    border: { light: '#666666', medium: '#333333' },
+    focus: '#0055FF',
+};
+/** Get complete theme based on mode */
+function getTheme(mode) {
+    return {
+        colors: mode === 'highContrast' ? { ...exports.colors, text: exports.highContrast.text, background: exports.highContrast.background, border: exports.highContrast.border } : exports.colors,
+        spacing: exports.spacing,
+        typography: exports.typography,
+        borderRadius: exports.borderRadius,
+        shadows: exports.shadows,
+        mode,
+    };
+}
+//# sourceMappingURL=index.js.map

package/lib/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@rajeev02/ui",
+  "version": "0.1.0",
+  "description": "Adaptive UI component system — device-aware rendering for phone, tablet, watch, TV, auto",
+  "main": "lib/index.js",
+  "author": "Rajeev Kumar Joshi <rajeevjoshi91@gmail.com> (https://rajeev02.github.io)",
+  "license": "MIT",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "clean": "rm -rf lib",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "ui",
+    "design-tokens",
+    "adaptive",
+    "device-detection"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rajeev02/rajeev-sdk",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/Rajeev02/rajeev-sdk#readme",
+  "bugs": {
+    "url": "https://github.com/Rajeev02/rajeev-sdk/issues"
+  },
+  "files": [
+    "lib/",
+    "src/",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18.3.0",
+    "react-native": ">=0.84.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "typescript": "^5.4.0"
+  }
+}

package/src/device/index.ts

@@ -0,0 +1,127 @@
+/**
+ * @rajeev02/ui - Device Detection
+ *
+ * Detect device type, capabilities, input mode, and accessibility
+ * settings to drive adaptive UI rendering.
+ */
+
+export type DeviceType = 'phone' | 'tablet' | 'watch' | 'tv' | 'auto' | 'desktop' | 'iot';
+export type InputMode = 'touch' | 'keyboard' | 'voice' | 'rotary' | 'dpad' | 'controller';
+
+export interface DeviceCapabilities {
+  /** Device type */
+  type: DeviceType;
+  /** Screen width in dp/px */
+  screenWidth: number;
+  /** Screen height in dp/px */
+  screenHeight: number;
+  /** Primary input mode */
+  inputMode: InputMode;
+  /** Whether haptic feedback is available */
+  haptics: boolean;
+  /** Whether biometric auth is available */
+  biometrics: boolean;
+  /** Whether the device has a notch/dynamic island */
+  hasNotch: boolean;
+  /** Device pixel ratio */
+  pixelRatio: number;
+  /** Whether the device supports dark mode */
+  darkModeSupported: boolean;
+  /** Whether reduce motion is enabled */
+  reduceMotion: boolean;
+  /** Whether a screen reader is active */
+  screenReaderActive: boolean;
+  /** Font scale set by user */
+  fontScale: number;
+  /** Whether the device is low-end (for performance optimization) */
+  isLowEnd: boolean;
+}
+
+/**
+ * Detect device type from screen dimensions
+ */
+export function detectDeviceType(width: number, height: number): DeviceType {
+  const minDim = Math.min(width, height);
+  const maxDim = Math.max(width, height);
+
+  if (minDim < 200) return 'watch';
+  if (minDim < 600 && maxDim < 1000) return 'phone';
+  if (minDim >= 600 && maxDim < 1400) return 'tablet';
+  if (minDim >= 1400) return 'tv';
+  return 'phone'; // Default
+}
+
+/**
+ * Get default capabilities for a device type
+ */
+export function getDefaultCapabilities(type: DeviceType): DeviceCapabilities {
+  const defaults: Record<DeviceType, Partial<DeviceCapabilities>> = {
+    phone: { screenWidth: 390, screenHeight: 844, inputMode: 'touch', haptics: true, pixelRatio: 3, hasNotch: true },
+    tablet: { screenWidth: 820, screenHeight: 1180, inputMode: 'touch', haptics: true, pixelRatio: 2, hasNotch: false },
+    watch: { screenWidth: 184, screenHeight: 224, inputMode: 'touch', haptics: true, pixelRatio: 2, hasNotch: false },
+    tv: { screenWidth: 1920, screenHeight: 1080, inputMode: 'dpad', haptics: false, pixelRatio: 1, hasNotch: false },
+    auto: { screenWidth: 1280, screenHeight: 720, inputMode: 'touch', haptics: true, pixelRatio: 2, hasNotch: false },
+    desktop: { screenWidth: 1440, screenHeight: 900, inputMode: 'keyboard', haptics: false, pixelRatio: 2, hasNotch: false },
+    iot: { screenWidth: 320, screenHeight: 240, inputMode: 'touch', haptics: false, pixelRatio: 1, hasNotch: false },
+  };
+
+  return {
+    type,
+    screenWidth: 390,
+    screenHeight: 844,
+    inputMode: 'touch',
+    haptics: false,
+    biometrics: false,
+    hasNotch: false,
+    pixelRatio: 2,
+    darkModeSupported: true,
+    reduceMotion: false,
+    screenReaderActive: false,
+    fontScale: 1.0,
+    isLowEnd: false,
+    ...defaults[type],
+  };
+}
+
+/**
+ * Determine if device is "low-end" based on characteristics
+ * Used to disable animations, reduce image quality, simplify UI
+ */
+export function isLowEndDevice(totalRamMB?: number, pixelRatio?: number): boolean {
+  if (totalRamMB && totalRamMB < 2048) return true;  // < 2GB RAM
+  if (pixelRatio && pixelRatio < 1.5) return true;
+  return false;
+}
+
+/**
+ * Get recommended touch target size for device type
+ * Follows WCAG 2.5.8 (44x44 minimum for mobile)
+ */
+export function getMinTouchTarget(type: DeviceType): number {
+  switch (type) {
+    case 'watch': return 38;  // Smaller screen, slightly smaller targets
+    case 'phone': return 44;  // WCAG standard
+    case 'tablet': return 44;
+    case 'tv': return 56;     // Larger for distance viewing with remote
+    case 'auto': return 56;   // Larger for driving safety
+    case 'desktop': return 32; // Mouse is more precise
+    case 'iot': return 44;
+    default: return 44;
+  }
+}
+
+/**
+ * Get recommended font size multiplier for device type
+ */
+export function getFontMultiplier(type: DeviceType, fontScale: number = 1.0): number {
+  const baseMultiplier: Record<DeviceType, number> = {
+    watch: 0.85,
+    phone: 1.0,
+    tablet: 1.1,
+    tv: 1.8,      // Much larger for 10-foot UI
+    auto: 1.4,    // Larger for glance-ability
+    desktop: 1.0,
+    iot: 0.9,
+  };
+  return (baseMultiplier[type] ?? 1.0) * fontScale;
+}

package/src/hooks/index.ts

@@ -0,0 +1,125 @@
+/**
+ * @rajeev02/ui - React Hooks
+ *
+ * Hooks for device-aware rendering, theming, and accessibility.
+ */
+
+// Note: These hooks are designed for React Native but the types
+// and logic work in any React environment. Platform-specific
+// imports would be resolved at build time.
+
+import type { DeviceType, DeviceCapabilities, InputMode } from '../device';
+import type { ThemeMode } from '../tokens';
+
+/**
+ * Hook return type for useDevice
+ */
+export interface UseDeviceResult {
+  type: DeviceType;
+  isPhone: boolean;
+  isTablet: boolean;
+  isWatch: boolean;
+  isTv: boolean;
+  isAuto: boolean;
+  isDesktop: boolean;
+  inputMode: InputMode;
+  isLowEnd: boolean;
+  screenWidth: number;
+  screenHeight: number;
+  fontScale: number;
+  pixelRatio: number;
+}
+
+/**
+ * Hook return type for useAccessibility
+ */
+export interface UseAccessibilityResult {
+  screenReaderActive: boolean;
+  reduceMotion: boolean;
+  fontScale: number;
+  highContrast: boolean;
+  /** Minimum touch target size for current device */
+  minTouchTarget: number;
+  /** Whether to show large text */
+  largeText: boolean;
+}
+
+/**
+ * Hook return type for useTheme
+ */
+export interface UseThemeResult {
+  mode: ThemeMode;
+  colors: Record<string, unknown>;
+  spacing: Record<string, number>;
+  isDark: boolean;
+  isHighContrast: boolean;
+}
+
+/**
+ * Adaptive layout props — define different content per device type
+ *
+ * @example
+ * ```tsx
+ * <AdaptiveLayout
+ *   phone={<PhoneView />}
+ *   tablet={<TabletView />}
+ *   watch={<WatchView />}
+ *   tv={<TvView />}
+ *   auto={<AutoView />}
+ * />
+ * ```
+ */
+export interface AdaptiveLayoutProps {
+  phone?: unknown;
+  tablet?: unknown;
+  watch?: unknown;
+  tv?: unknown;
+  auto?: unknown;
+  desktop?: unknown;
+  /** Fallback if specific device view not provided */
+  fallback?: unknown;
+}
+
+/**
+ * Get the appropriate content for the current device type
+ */
+export function resolveAdaptiveContent(
+  props: AdaptiveLayoutProps,
+  deviceType: DeviceType,
+): unknown {
+  const map: Record<string, unknown> = {
+    phone: props.phone,
+    tablet: props.tablet ?? props.phone,      // Tablet falls back to phone
+    watch: props.watch,
+    tv: props.tv ?? props.tablet ?? props.phone,  // TV falls back to tablet then phone
+    auto: props.auto ?? props.phone,
+    desktop: props.desktop ?? props.tablet ?? props.phone,
+    iot: props.phone,
+  };
+
+  return map[deviceType] ?? props.fallback ?? props.phone;
+}
+
+/**
+ * Responsive value helper — pick value based on screen width
+ *
+ * @example
+ * ```ts
+ * const padding = responsive(screenWidth, {
+ *   watch: 4,
+ *   phone: 16,
+ *   tablet: 24,
+ *   desktop: 32,
+ * });
+ * ```
+ */
+export function responsive<T>(
+  screenWidth: number,
+  values: Partial<Record<DeviceType, T>> & { phone: T },
+): T {
+  if (screenWidth < 200 && values.watch !== undefined) return values.watch;
+  if (screenWidth < 600) return values.phone;
+  if (screenWidth < 1024 && values.tablet !== undefined) return values.tablet;
+  if (values.desktop !== undefined) return values.desktop;
+  return values.phone;
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+/**
+ * @rajeev02/ui
+ *
+ * Adaptive UI Component System
+ * Device-aware rendering for phone, tablet, watch, TV, auto, IoT
+ *
+ * @author Rajeev Kumar Joshi (https://github.com/Rajeev02)
+ * @license MIT
+ */
+
+// Design Tokens
+export {
+  colors, spacing, typography, breakpoints, borderRadius, shadows,
+  highContrast, getTheme,
+} from './tokens';
+export type { ThemeMode } from './tokens';
+
+// Device Detection
+export {
+  detectDeviceType, getDefaultCapabilities, isLowEndDevice,
+  getMinTouchTarget, getFontMultiplier,
+} from './device';
+export type { DeviceType, InputMode, DeviceCapabilities } from './device';
+
+// Hooks & Adaptive Layout
+export {
+  resolveAdaptiveContent, responsive,
+} from './hooks';
+export type {
+  UseDeviceResult, UseAccessibilityResult, UseThemeResult,
+  AdaptiveLayoutProps,
+} from './hooks';

package/src/tokens/index.ts

@@ -0,0 +1,114 @@
+/**
+ * @rajeev02/ui - Design Tokens
+ *
+ * Centralized design system tokens for consistent theming
+ * across phone, tablet, watch, TV, and auto interfaces.
+ */
+
+export const colors = {
+  // Primary palette
+  primary: { 50: '#EEF2FF', 100: '#E0E7FF', 200: '#C7D2FE', 300: '#A5B4FC', 400: '#818CF8', 500: '#6366F1', 600: '#4F46E5', 700: '#4338CA', 800: '#3730A3', 900: '#312E81' },
+  // Indian-friendly accent (saffron-inspired)
+  accent: { 50: '#FFF7ED', 100: '#FFEDD5', 200: '#FED7AA', 300: '#FDBA74', 400: '#FB923C', 500: '#F97316', 600: '#EA580C', 700: '#C2410C', 800: '#9A3412', 900: '#7C2D12' },
+  // Semantic
+  success: '#10B981',
+  warning: '#F59E0B',
+  error: '#EF4444',
+  info: '#3B82F6',
+  // Neutrals
+  text: { primary: '#111827', secondary: '#6B7280', disabled: '#9CA3AF', inverse: '#FFFFFF' },
+  background: { primary: '#FFFFFF', secondary: '#F9FAFB', tertiary: '#F3F4F6' },
+  border: { light: '#E5E7EB', medium: '#D1D5DB', dark: '#9CA3AF' },
+} as const;
+
+export const spacing = {
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32,
+  xxxl: 48,
+} as const;
+
+export const typography = {
+  // Font families with Indian script fallbacks
+  fontFamily: {
+    sans: 'System, -apple-system, "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Tamil", sans-serif',
+    mono: '"SF Mono", "Roboto Mono", "Noto Sans Mono", monospace',
+  },
+  // Size scale
+  fontSize: {
+    xs: 10,
+    sm: 12,
+    base: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 30,
+    '4xl': 36,
+  },
+  // Line heights (slightly higher for Devanagari and other Indian scripts)
+  lineHeight: {
+    tight: 1.2,
+    normal: 1.5,
+    relaxed: 1.75,   // Better for Indian scripts with diacritics
+    loose: 2.0,
+  },
+  fontWeight: {
+    regular: '400' as const,
+    medium: '500' as const,
+    semibold: '600' as const,
+    bold: '700' as const,
+  },
+} as const;
+
+export const breakpoints = {
+  /** Watch: < 200px */
+  watch: 200,
+  /** Phone: 200-599px */
+  phone: 600,
+  /** Tablet: 600-1023px */
+  tablet: 1024,
+  /** Desktop/TV: >= 1024px */
+  desktop: 1024,
+} as const;
+
+export const borderRadius = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999,
+} as const;
+
+export const shadows = {
+  sm: { shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 2, elevation: 1 },
+  md: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 3 },
+  lg: { shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.15, shadowRadius: 8, elevation: 5 },
+} as const;
+
+/** Accessibility-focused high contrast palette */
+export const highContrast = {
+  text: { primary: '#000000', secondary: '#333333', inverse: '#FFFFFF' },
+  background: { primary: '#FFFFFF', secondary: '#F0F0F0' },
+  border: { light: '#666666', medium: '#333333' },
+  focus: '#0055FF',
+} as const;
+
+export type ThemeMode = 'light' | 'dark' | 'highContrast';
+
+/** Get complete theme based on mode */
+export function getTheme(mode: ThemeMode) {
+  return {
+    colors: mode === 'highContrast' ? { ...colors, text: highContrast.text, background: highContrast.background, border: highContrast.border } : colors,
+    spacing,
+    typography,
+    borderRadius,
+    shadows,
+    mode,
+  };
+}