@tekton-ui/core 0.2.0

package/dist/layout-tokens/mobile-shells.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @tekton-ui/core - Mobile Shell Token Definitions
+ * Concrete Mobile Shell Token implementations for mobile applications
+ * [SPEC-LAYOUT-004] [MILESTONE-2]
+ */
+import type { MobileShellToken } from './types.js';
+/**
+ * Standard mobile app layout with header, main content, and bottom tab
+ * Suitable for most mobile applications with tab-based navigation
+ */
+export declare const SHELL_MOBILE_APP: MobileShellToken;
+/**
+ * Fullscreen content layout with safe area applied
+ * Perfect for media viewing, immersive experiences, and splash screens
+ */
+export declare const SHELL_MOBILE_FULLSCREEN: MobileShellToken;
+/**
+ * Modal or bottom sheet layout with handle and content
+ * Designed for dialogs, bottom sheets, and overlay content
+ */
+export declare const SHELL_MOBILE_MODAL: MobileShellToken;
+/**
+ * Tab-based navigation with bottom tab bar
+ * Optimized for tab-based navigation patterns with persistent tab bar
+ */
+export declare const SHELL_MOBILE_TAB: MobileShellToken;
+/**
+ * Drawer navigation with slide-out menu
+ * Suitable for applications with hierarchical navigation and menu
+ */
+export declare const SHELL_MOBILE_DRAWER: MobileShellToken;
+/**
+ * Detail view layout with header and action bar
+ * Designed for content detail pages with actions
+ */
+export declare const SHELL_MOBILE_DETAIL: MobileShellToken;
+/**
+ * Get a mobile shell token by its ID
+ *
+ * @param shellId - Mobile shell token ID (e.g., "shell.mobile.app")
+ * @returns MobileShellToken if found, undefined otherwise
+ *
+ * @example
+ * ```typescript
+ * const appShell = getMobileShellToken('shell.mobile.app');
+ * if (appShell) {
+ *   console.log(appShell.description);
+ * }
+ * ```
+ */
+export declare function getMobileShellToken(shellId: string): MobileShellToken | undefined;
+/**
+ * Get all available mobile shell tokens
+ *
+ * @returns Array of all MobileShellTokens
+ *
+ * @example
+ * ```typescript
+ * const allMobileShells = getAllMobileShellTokens();
+ * console.log(`Available mobile shells: ${allMobileShells.length}`);
+ * ```
+ */
+export declare function getAllMobileShellTokens(): MobileShellToken[];
+/**
+ * Get mobile shell tokens filtered by target OS
+ *
+ * @param os - Target operating system ('ios', 'android', or 'cross-platform')
+ * @returns Array of MobileShellTokens for the specified OS
+ *
+ * @example
+ * ```typescript
+ * const iosShells = getMobileShellsByOS('ios');
+ * const crossPlatformShells = getMobileShellsByOS('cross-platform');
+ * console.log(`iOS shells: ${iosShells.length}`);
+ * ```
+ */
+export declare function getMobileShellsByOS(os: 'ios' | 'android' | 'cross-platform'): MobileShellToken[];
+//# sourceMappingURL=mobile-shells.d.ts.map

package/dist/layout-tokens/mobile-shells.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mobile-shells.d.ts","sourceRoot":"","sources":["../../src/layout-tokens/mobile-shells.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAOnD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,gBAwG9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,gBAyErC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,gBAmFhC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,gBA+F9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,gBAqFjC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,gBA2FjC,CAAC;AAuBF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,gBAAgB,GAAG,SAAS,CAEjF;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,IAAI,gBAAgB,EAAE,CAE5D;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,KAAK,GAAG,SAAS,GAAG,gBAAgB,GAAG,gBAAgB,EAAE,CAIhG"}

package/dist/layout-tokens/mobile-shells.js

@@ -0,0 +1,635 @@
+/**
+ * @tekton-ui/core - Mobile Shell Token Definitions
+ * Concrete Mobile Shell Token implementations for mobile applications
+ * [SPEC-LAYOUT-004] [MILESTONE-2]
+ */
+// ============================================================================
+// Mobile Shell Token Definitions
+// ============================================================================
+/**
+ * Standard mobile app layout with header, main content, and bottom tab
+ * Suitable for most mobile applications with tab-based navigation
+ */
+export const SHELL_MOBILE_APP = {
+    id: 'shell.mobile.app',
+    description: 'Standard mobile app layout with header, main content, and bottom tab',
+    platform: 'mobile',
+    os: 'cross-platform',
+    regions: [
+        {
+            name: 'header',
+            position: 'top',
+            size: 'atomic.spacing.14',
+            collapsible: false,
+        },
+        {
+            name: 'main',
+            position: 'center',
+            size: 'atomic.spacing.full',
+            collapsible: false,
+        },
+        {
+            name: 'bottomTab',
+            position: 'bottom',
+            size: 'atomic.spacing.16',
+            collapsible: true,
+        },
+    ],
+    safeArea: {
+        top: 'atomic.spacing.0',
+        bottom: 'atomic.spacing.0',
+        left: 'atomic.spacing.0',
+        right: 'atomic.spacing.0',
+        defaults: {
+            notch: 44,
+            dynamicIsland: 59,
+            homeIndicator: 34,
+            statusBar: 20,
+        },
+        edges: {
+            top: true,
+            bottom: true,
+            horizontal: true,
+        },
+    },
+    systemUI: {
+        statusBar: {
+            height: 'atomic.spacing.5',
+            visible: true,
+            style: 'auto',
+            translucent: true,
+        },
+        navigationBar: {
+            height: 'atomic.spacing.12',
+            mode: 'overlay',
+            buttonStyle: 'auto',
+        },
+    },
+    keyboard: {
+        avoidance: 'padding',
+        behavior: 'height',
+        animation: {
+            duration: 250,
+            easing: 'keyboard',
+            enabled: true,
+        },
+        dismissMode: 'on-drag',
+    },
+    bottomTab: {
+        height: 'atomic.spacing.16',
+        safeAreaBottom: 'atomic.spacing.9',
+        totalHeight: 'atomic.spacing.25',
+        visibility: 'always',
+        maxItems: 5,
+        item: {
+            minTouchTarget: 'atomic.spacing.11',
+            iconSize: 'atomic.spacing.6',
+            labelSize: 'atomic.spacing.3',
+            spacing: 'atomic.spacing.1',
+        },
+    },
+    touchTarget: {
+        minSize: 'atomic.spacing.11',
+        hitSlop: {
+            top: 8,
+            bottom: 8,
+            left: 8,
+            right: 8,
+        },
+    },
+    responsive: {
+        default: {
+            headerVisible: true,
+            bottomTabVisible: true,
+        },
+        md: {
+            headerVisible: true,
+            bottomTabVisible: true,
+        },
+    },
+    tokenBindings: {
+        headerBackground: 'semantic.background.surface',
+        mainBackground: 'semantic.background.base',
+        bottomTabBackground: 'semantic.background.surface',
+        headerBorder: 'semantic.border.default',
+        bottomTabBorder: 'semantic.border.default',
+    },
+};
+/**
+ * Fullscreen content layout with safe area applied
+ * Perfect for media viewing, immersive experiences, and splash screens
+ */
+export const SHELL_MOBILE_FULLSCREEN = {
+    id: 'shell.mobile.fullscreen',
+    description: 'Fullscreen content layout with safe area applied',
+    platform: 'mobile',
+    os: 'cross-platform',
+    regions: [
+        {
+            name: 'main',
+            position: 'center',
+            size: 'atomic.spacing.full',
+            collapsible: false,
+        },
+    ],
+    safeArea: {
+        top: 'atomic.spacing.0',
+        bottom: 'atomic.spacing.0',
+        left: 'atomic.spacing.0',
+        right: 'atomic.spacing.0',
+        defaults: {
+            notch: 44,
+            dynamicIsland: 59,
+            homeIndicator: 34,
+            statusBar: 20,
+        },
+        edges: {
+            top: true,
+            bottom: true,
+            horizontal: true,
+        },
+    },
+    systemUI: {
+        statusBar: {
+            height: 'atomic.spacing.5',
+            visible: true,
+            style: 'auto',
+            translucent: true,
+        },
+        navigationBar: {
+            height: 'atomic.spacing.12',
+            mode: 'overlay',
+            buttonStyle: 'auto',
+        },
+    },
+    keyboard: {
+        avoidance: 'none',
+        behavior: 'height',
+        animation: {
+            duration: 250,
+            easing: 'keyboard',
+            enabled: true,
+        },
+        dismissMode: 'on-drag',
+    },
+    touchTarget: {
+        minSize: 'atomic.spacing.11',
+        hitSlop: {
+            top: 8,
+            bottom: 8,
+            left: 8,
+            right: 8,
+        },
+    },
+    responsive: {
+        default: {
+            contentFit: 'cover',
+        },
+        md: {
+            contentFit: 'contain',
+        },
+    },
+    tokenBindings: {
+        mainBackground: 'semantic.background.base',
+    },
+};
+/**
+ * Modal or bottom sheet layout with handle and content
+ * Designed for dialogs, bottom sheets, and overlay content
+ */
+export const SHELL_MOBILE_MODAL = {
+    id: 'shell.mobile.modal',
+    description: 'Modal or bottom sheet layout with handle and content',
+    platform: 'mobile',
+    os: 'cross-platform',
+    regions: [
+        {
+            name: 'handle',
+            position: 'top',
+            size: 'atomic.spacing.6',
+            collapsible: false,
+        },
+        {
+            name: 'content',
+            position: 'center',
+            size: 'atomic.spacing.full',
+            collapsible: false,
+        },
+    ],
+    safeArea: {
+        top: 'atomic.spacing.0',
+        bottom: 'atomic.spacing.0',
+        left: 'atomic.spacing.0',
+        right: 'atomic.spacing.0',
+        defaults: {
+            notch: 44,
+            dynamicIsland: 59,
+            homeIndicator: 34,
+            statusBar: 20,
+        },
+        edges: {
+            top: false,
+            bottom: true,
+            horizontal: false,
+        },
+    },
+    systemUI: {
+        statusBar: {
+            height: 'atomic.spacing.5',
+            visible: true,
+            style: 'auto',
+            translucent: true,
+        },
+        navigationBar: {
+            height: 'atomic.spacing.12',
+            mode: 'overlay',
+            buttonStyle: 'auto',
+        },
+    },
+    keyboard: {
+        avoidance: 'padding',
+        behavior: 'padding',
+        animation: {
+            duration: 250,
+            easing: 'keyboard',
+            enabled: true,
+        },
+        dismissMode: 'on-drag',
+    },
+    touchTarget: {
+        minSize: 'atomic.spacing.11',
+        hitSlop: {
+            top: 8,
+            bottom: 8,
+            left: 8,
+            right: 8,
+        },
+    },
+    responsive: {
+        default: {
+            maxHeight: '90%',
+            borderRadius: 'atomic.spacing.4',
+        },
+        md: {
+            maxHeight: '80%',
+            borderRadius: 'atomic.spacing.4',
+        },
+    },
+    tokenBindings: {
+        handleBackground: 'semantic.background.surface',
+        contentBackground: 'semantic.background.surface',
+        overlayBackground: 'semantic.background.overlay',
+    },
+};
+/**
+ * Tab-based navigation with bottom tab bar
+ * Optimized for tab-based navigation patterns with persistent tab bar
+ */
+export const SHELL_MOBILE_TAB = {
+    id: 'shell.mobile.tab',
+    description: 'Tab-based navigation with bottom tab bar',
+    platform: 'mobile',
+    os: 'cross-platform',
+    regions: [
+        {
+            name: 'main',
+            position: 'center',
+            size: 'atomic.spacing.full',
+            collapsible: false,
+        },
+        {
+            name: 'bottomTab',
+            position: 'bottom',
+            size: 'atomic.spacing.16',
+            collapsible: false,
+        },
+    ],
+    safeArea: {
+        top: 'atomic.spacing.0',
+        bottom: 'atomic.spacing.0',
+        left: 'atomic.spacing.0',
+        right: 'atomic.spacing.0',
+        defaults: {
+            notch: 44,
+            dynamicIsland: 59,
+            homeIndicator: 34,
+            statusBar: 20,
+        },
+        edges: {
+            top: true,
+            bottom: true,
+            horizontal: true,
+        },
+    },
+    systemUI: {
+        statusBar: {
+            height: 'atomic.spacing.5',
+            visible: true,
+            style: 'auto',
+            translucent: true,
+        },
+        navigationBar: {
+            height: 'atomic.spacing.12',
+            mode: 'overlay',
+            buttonStyle: 'auto',
+        },
+    },
+    keyboard: {
+        avoidance: 'resize',
+        behavior: 'height',
+        animation: {
+            duration: 250,
+            easing: 'keyboard',
+            enabled: true,
+        },
+        dismissMode: 'on-drag',
+    },
+    bottomTab: {
+        height: 'atomic.spacing.16',
+        safeAreaBottom: 'atomic.spacing.9',
+        totalHeight: 'atomic.spacing.25',
+        visibility: 'always',
+        maxItems: 5,
+        item: {
+            minTouchTarget: 'atomic.spacing.11',
+            iconSize: 'atomic.spacing.6',
+            labelSize: 'atomic.spacing.3',
+            spacing: 'atomic.spacing.1',
+        },
+    },
+    touchTarget: {
+        minSize: 'atomic.spacing.11',
+        hitSlop: {
+            top: 8,
+            bottom: 8,
+            left: 8,
+            right: 8,
+        },
+    },
+    responsive: {
+        default: {
+            bottomTabVisible: true,
+        },
+        md: {
+            bottomTabVisible: true,
+        },
+    },
+    tokenBindings: {
+        mainBackground: 'semantic.background.base',
+        bottomTabBackground: 'semantic.background.surface',
+        bottomTabBorder: 'semantic.border.default',
+        tabActiveBackground: 'semantic.background.brand',
+    },
+};
+/**
+ * Drawer navigation with slide-out menu
+ * Suitable for applications with hierarchical navigation and menu
+ */
+export const SHELL_MOBILE_DRAWER = {
+    id: 'shell.mobile.drawer',
+    description: 'Drawer navigation with slide-out menu',
+    platform: 'mobile',
+    os: 'cross-platform',
+    regions: [
+        {
+            name: 'drawer',
+            position: 'left',
+            size: 'atomic.spacing.72',
+            collapsible: true,
+            defaultCollapsed: true,
+        },
+        {
+            name: 'main',
+            position: 'center',
+            size: 'atomic.spacing.full',
+            collapsible: false,
+        },
+    ],
+    safeArea: {
+        top: 'atomic.spacing.0',
+        bottom: 'atomic.spacing.0',
+        left: 'atomic.spacing.0',
+        right: 'atomic.spacing.0',
+        defaults: {
+            notch: 44,
+            dynamicIsland: 59,
+            homeIndicator: 34,
+            statusBar: 20,
+        },
+        edges: {
+            top: true,
+            bottom: true,
+            horizontal: false,
+        },
+    },
+    systemUI: {
+        statusBar: {
+            height: 'atomic.spacing.5',
+            visible: true,
+            style: 'auto',
+            translucent: true,
+        },
+        navigationBar: {
+            height: 'atomic.spacing.12',
+            mode: 'overlay',
+            buttonStyle: 'auto',
+        },
+    },
+    keyboard: {
+        avoidance: 'none',
+        behavior: 'height',
+        animation: {
+            duration: 250,
+            easing: 'keyboard',
+            enabled: true,
+        },
+        dismissMode: 'on-drag',
+    },
+    touchTarget: {
+        minSize: 'atomic.spacing.11',
+        hitSlop: {
+            top: 8,
+            bottom: 8,
+            left: 8,
+            right: 8,
+        },
+    },
+    responsive: {
+        default: {
+            drawerWidth: 'atomic.spacing.72',
+            drawerType: 'overlay',
+        },
+        md: {
+            drawerWidth: 'atomic.spacing.80',
+            drawerType: 'overlay',
+        },
+    },
+    tokenBindings: {
+        drawerBackground: 'semantic.background.surface',
+        mainBackground: 'semantic.background.base',
+        drawerBorder: 'semantic.border.default',
+        overlayBackground: 'semantic.background.overlay',
+    },
+};
+/**
+ * Detail view layout with header and action bar
+ * Designed for content detail pages with actions
+ */
+export const SHELL_MOBILE_DETAIL = {
+    id: 'shell.mobile.detail',
+    description: 'Detail view layout with header and action bar',
+    platform: 'mobile',
+    os: 'cross-platform',
+    regions: [
+        {
+            name: 'header',
+            position: 'top',
+            size: 'atomic.spacing.14',
+            collapsible: true,
+        },
+        {
+            name: 'main',
+            position: 'center',
+            size: 'atomic.spacing.full',
+            collapsible: false,
+        },
+        {
+            name: 'actionBar',
+            position: 'bottom',
+            size: 'atomic.spacing.14',
+            collapsible: false,
+        },
+    ],
+    safeArea: {
+        top: 'atomic.spacing.0',
+        bottom: 'atomic.spacing.0',
+        left: 'atomic.spacing.0',
+        right: 'atomic.spacing.0',
+        defaults: {
+            notch: 44,
+            dynamicIsland: 59,
+            homeIndicator: 34,
+            statusBar: 20,
+        },
+        edges: {
+            top: true,
+            bottom: true,
+            horizontal: true,
+        },
+    },
+    systemUI: {
+        statusBar: {
+            height: 'atomic.spacing.5',
+            visible: true,
+            style: 'auto',
+            translucent: true,
+        },
+        navigationBar: {
+            height: 'atomic.spacing.12',
+            mode: 'overlay',
+            buttonStyle: 'auto',
+        },
+    },
+    keyboard: {
+        avoidance: 'padding',
+        behavior: 'height',
+        animation: {
+            duration: 250,
+            easing: 'keyboard',
+            enabled: true,
+        },
+        dismissMode: 'on-drag',
+    },
+    touchTarget: {
+        minSize: 'atomic.spacing.11',
+        hitSlop: {
+            top: 8,
+            bottom: 8,
+            left: 8,
+            right: 8,
+        },
+    },
+    responsive: {
+        default: {
+            headerCollapsible: true,
+            actionBarVisible: true,
+        },
+        md: {
+            headerCollapsible: true,
+            actionBarVisible: true,
+        },
+    },
+    tokenBindings: {
+        headerBackground: 'semantic.background.surface',
+        mainBackground: 'semantic.background.base',
+        actionBarBackground: 'semantic.background.surface',
+        headerBorder: 'semantic.border.default',
+        actionBarBorder: 'semantic.border.default',
+    },
+};
+// ============================================================================
+// Internal Token Map
+// ============================================================================
+/**
+ * Internal map for quick mobile shell token lookups by ID
+ * Used by getMobileShellToken() for O(1) access
+ */
+const MOBILE_SHELL_TOKENS_MAP = {
+    'shell.mobile.app': SHELL_MOBILE_APP,
+    'shell.mobile.fullscreen': SHELL_MOBILE_FULLSCREEN,
+    'shell.mobile.modal': SHELL_MOBILE_MODAL,
+    'shell.mobile.tab': SHELL_MOBILE_TAB,
+    'shell.mobile.drawer': SHELL_MOBILE_DRAWER,
+    'shell.mobile.detail': SHELL_MOBILE_DETAIL,
+};
+// ============================================================================
+// Utility Functions
+// ============================================================================
+/**
+ * Get a mobile shell token by its ID
+ *
+ * @param shellId - Mobile shell token ID (e.g., "shell.mobile.app")
+ * @returns MobileShellToken if found, undefined otherwise
+ *
+ * @example
+ * ```typescript
+ * const appShell = getMobileShellToken('shell.mobile.app');
+ * if (appShell) {
+ *   console.log(appShell.description);
+ * }
+ * ```
+ */
+export function getMobileShellToken(shellId) {
+    return MOBILE_SHELL_TOKENS_MAP[shellId];
+}
+/**
+ * Get all available mobile shell tokens
+ *
+ * @returns Array of all MobileShellTokens
+ *
+ * @example
+ * ```typescript
+ * const allMobileShells = getAllMobileShellTokens();
+ * console.log(`Available mobile shells: ${allMobileShells.length}`);
+ * ```
+ */
+export function getAllMobileShellTokens() {
+    return Object.values(MOBILE_SHELL_TOKENS_MAP);
+}
+/**
+ * Get mobile shell tokens filtered by target OS
+ *
+ * @param os - Target operating system ('ios', 'android', or 'cross-platform')
+ * @returns Array of MobileShellTokens for the specified OS
+ *
+ * @example
+ * ```typescript
+ * const iosShells = getMobileShellsByOS('ios');
+ * const crossPlatformShells = getMobileShellsByOS('cross-platform');
+ * console.log(`iOS shells: ${iosShells.length}`);
+ * ```
+ */
+export function getMobileShellsByOS(os) {
+    return getAllMobileShellTokens().filter(shell => shell.os === os || shell.os === 'cross-platform');
+}
+//# sourceMappingURL=mobile-shells.js.map