@tekton-ui/core 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +758 -0
- package/dist/blueprint.d.ts +44 -0
- package/dist/blueprint.d.ts.map +1 -0
- package/dist/blueprint.js +163 -0
- package/dist/blueprint.js.map +1 -0
- package/dist/component-schemas.d.ts +78 -0
- package/dist/component-schemas.d.ts.map +1 -0
- package/dist/component-schemas.js +1037 -0
- package/dist/component-schemas.js.map +1 -0
- package/dist/css-generator.d.ts +42 -0
- package/dist/css-generator.d.ts.map +1 -0
- package/dist/css-generator.js +339 -0
- package/dist/css-generator.js.map +1 -0
- package/dist/icon-library.d.ts +109 -0
- package/dist/icon-library.d.ts.map +1 -0
- package/dist/icon-library.js +204 -0
- package/dist/icon-library.js.map +1 -0
- package/dist/index.d.ts +36 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +51 -0
- package/dist/index.js.map +1 -0
- package/dist/layout-css-generator.d.ts +158 -0
- package/dist/layout-css-generator.d.ts.map +1 -0
- package/dist/layout-css-generator.js +901 -0
- package/dist/layout-css-generator.js.map +1 -0
- package/dist/layout-resolver.d.ts +92 -0
- package/dist/layout-resolver.d.ts.map +1 -0
- package/dist/layout-resolver.js +275 -0
- package/dist/layout-resolver.js.map +1 -0
- package/dist/layout-tokens/index.d.ts +16 -0
- package/dist/layout-tokens/index.d.ts.map +1 -0
- package/dist/layout-tokens/index.js +16 -0
- package/dist/layout-tokens/index.js.map +1 -0
- package/dist/layout-tokens/keyboard.d.ts +254 -0
- package/dist/layout-tokens/keyboard.d.ts.map +1 -0
- package/dist/layout-tokens/keyboard.js +407 -0
- package/dist/layout-tokens/keyboard.js.map +1 -0
- package/dist/layout-tokens/mobile-shells.d.ts +78 -0
- package/dist/layout-tokens/mobile-shells.d.ts.map +1 -0
- package/dist/layout-tokens/mobile-shells.js +635 -0
- package/dist/layout-tokens/mobile-shells.js.map +1 -0
- package/dist/layout-tokens/pages.d.ts +100 -0
- package/dist/layout-tokens/pages.d.ts.map +1 -0
- package/dist/layout-tokens/pages.js +576 -0
- package/dist/layout-tokens/pages.js.map +1 -0
- package/dist/layout-tokens/responsive.d.ts +109 -0
- package/dist/layout-tokens/responsive.d.ts.map +1 -0
- package/dist/layout-tokens/responsive.js +167 -0
- package/dist/layout-tokens/responsive.js.map +1 -0
- package/dist/layout-tokens/safe-area.d.ts +156 -0
- package/dist/layout-tokens/safe-area.d.ts.map +1 -0
- package/dist/layout-tokens/safe-area.js +316 -0
- package/dist/layout-tokens/safe-area.js.map +1 -0
- package/dist/layout-tokens/sections-advanced.d.ts +277 -0
- package/dist/layout-tokens/sections-advanced.d.ts.map +1 -0
- package/dist/layout-tokens/sections-advanced.js +593 -0
- package/dist/layout-tokens/sections-advanced.js.map +1 -0
- package/dist/layout-tokens/sections.d.ts +137 -0
- package/dist/layout-tokens/sections.d.ts.map +1 -0
- package/dist/layout-tokens/sections.js +694 -0
- package/dist/layout-tokens/sections.js.map +1 -0
- package/dist/layout-tokens/shells.d.ts +77 -0
- package/dist/layout-tokens/shells.d.ts.map +1 -0
- package/dist/layout-tokens/shells.js +408 -0
- package/dist/layout-tokens/shells.js.map +1 -0
- package/dist/layout-tokens/touch-target.d.ts +119 -0
- package/dist/layout-tokens/touch-target.d.ts.map +1 -0
- package/dist/layout-tokens/touch-target.js +156 -0
- package/dist/layout-tokens/touch-target.js.map +1 -0
- package/dist/layout-tokens/types.d.ts +632 -0
- package/dist/layout-tokens/types.d.ts.map +1 -0
- package/dist/layout-tokens/types.js +49 -0
- package/dist/layout-tokens/types.js.map +1 -0
- package/dist/layout-validation.d.ts +1547 -0
- package/dist/layout-validation.d.ts.map +1 -0
- package/dist/layout-validation.js +628 -0
- package/dist/layout-validation.js.map +1 -0
- package/dist/render.d.ts +23 -0
- package/dist/render.d.ts.map +1 -0
- package/dist/render.js +244 -0
- package/dist/render.js.map +1 -0
- package/dist/schema-validation.d.ts +208 -0
- package/dist/schema-validation.d.ts.map +1 -0
- package/dist/schema-validation.js +205 -0
- package/dist/schema-validation.js.map +1 -0
- package/dist/screen-generation/generators/css-in-js-generator.d.ts +82 -0
- package/dist/screen-generation/generators/css-in-js-generator.d.ts.map +1 -0
- package/dist/screen-generation/generators/css-in-js-generator.js +335 -0
- package/dist/screen-generation/generators/css-in-js-generator.js.map +1 -0
- package/dist/screen-generation/generators/index.d.ts +13 -0
- package/dist/screen-generation/generators/index.d.ts.map +1 -0
- package/dist/screen-generation/generators/index.js +32 -0
- package/dist/screen-generation/generators/index.js.map +1 -0
- package/dist/screen-generation/generators/react-generator.d.ts +100 -0
- package/dist/screen-generation/generators/react-generator.d.ts.map +1 -0
- package/dist/screen-generation/generators/react-generator.js +379 -0
- package/dist/screen-generation/generators/react-generator.js.map +1 -0
- package/dist/screen-generation/generators/tailwind-generator.d.ts +105 -0
- package/dist/screen-generation/generators/tailwind-generator.d.ts.map +1 -0
- package/dist/screen-generation/generators/tailwind-generator.js +355 -0
- package/dist/screen-generation/generators/tailwind-generator.js.map +1 -0
- package/dist/screen-generation/generators/types.d.ts +136 -0
- package/dist/screen-generation/generators/types.d.ts.map +1 -0
- package/dist/screen-generation/generators/types.js +18 -0
- package/dist/screen-generation/generators/types.js.map +1 -0
- package/dist/screen-generation/generators/utils.d.ts +187 -0
- package/dist/screen-generation/generators/utils.d.ts.map +1 -0
- package/dist/screen-generation/generators/utils.js +312 -0
- package/dist/screen-generation/generators/utils.js.map +1 -0
- package/dist/screen-generation/index.d.ts +14 -0
- package/dist/screen-generation/index.d.ts.map +1 -0
- package/dist/screen-generation/index.js +33 -0
- package/dist/screen-generation/index.js.map +1 -0
- package/dist/screen-generation/resolver/component-resolver.d.ts +157 -0
- package/dist/screen-generation/resolver/component-resolver.d.ts.map +1 -0
- package/dist/screen-generation/resolver/component-resolver.js +295 -0
- package/dist/screen-generation/resolver/component-resolver.js.map +1 -0
- package/dist/screen-generation/resolver/index.d.ts +10 -0
- package/dist/screen-generation/resolver/index.d.ts.map +1 -0
- package/dist/screen-generation/resolver/index.js +46 -0
- package/dist/screen-generation/resolver/index.js.map +1 -0
- package/dist/screen-generation/resolver/layout-resolver.d.ts +155 -0
- package/dist/screen-generation/resolver/layout-resolver.d.ts.map +1 -0
- package/dist/screen-generation/resolver/layout-resolver.js +193 -0
- package/dist/screen-generation/resolver/layout-resolver.js.map +1 -0
- package/dist/screen-generation/resolver/screen-resolver.d.ts +174 -0
- package/dist/screen-generation/resolver/screen-resolver.d.ts.map +1 -0
- package/dist/screen-generation/resolver/screen-resolver.js +373 -0
- package/dist/screen-generation/resolver/screen-resolver.js.map +1 -0
- package/dist/screen-generation/resolver/token-resolver.d.ts +170 -0
- package/dist/screen-generation/resolver/token-resolver.d.ts.map +1 -0
- package/dist/screen-generation/resolver/token-resolver.js +260 -0
- package/dist/screen-generation/resolver/token-resolver.js.map +1 -0
- package/dist/screen-generation/types.d.ts +116 -0
- package/dist/screen-generation/types.d.ts.map +1 -0
- package/dist/screen-generation/types.js +33 -0
- package/dist/screen-generation/types.js.map +1 -0
- package/dist/screen-generation/validators.d.ts +286 -0
- package/dist/screen-generation/validators.d.ts.map +1 -0
- package/dist/screen-generation/validators.js +323 -0
- package/dist/screen-generation/validators.js.map +1 -0
- package/dist/screen-templates/__tests__/registry.test.d.ts +6 -0
- package/dist/screen-templates/__tests__/registry.test.d.ts.map +1 -0
- package/dist/screen-templates/__tests__/registry.test.js +247 -0
- package/dist/screen-templates/__tests__/registry.test.js.map +1 -0
- package/dist/screen-templates/__tests__/templates.test.d.ts +6 -0
- package/dist/screen-templates/__tests__/templates.test.d.ts.map +1 -0
- package/dist/screen-templates/__tests__/templates.test.js +179 -0
- package/dist/screen-templates/__tests__/templates.test.js.map +1 -0
- package/dist/screen-templates/index.d.ts +39 -0
- package/dist/screen-templates/index.d.ts.map +1 -0
- package/dist/screen-templates/index.js +79 -0
- package/dist/screen-templates/index.js.map +1 -0
- package/dist/screen-templates/registry.d.ts +177 -0
- package/dist/screen-templates/registry.d.ts.map +1 -0
- package/dist/screen-templates/registry.js +274 -0
- package/dist/screen-templates/registry.js.map +1 -0
- package/dist/screen-templates/templates/account/index.d.ts +6 -0
- package/dist/screen-templates/templates/account/index.d.ts.map +1 -0
- package/dist/screen-templates/templates/account/index.js +6 -0
- package/dist/screen-templates/templates/account/index.js.map +1 -0
- package/dist/screen-templates/templates/account/profile.d.ts +23 -0
- package/dist/screen-templates/templates/account/profile.d.ts.map +1 -0
- package/dist/screen-templates/templates/account/profile.js +249 -0
- package/dist/screen-templates/templates/account/profile.js.map +1 -0
- package/dist/screen-templates/templates/auth/forgot-password.d.ts +23 -0
- package/dist/screen-templates/templates/auth/forgot-password.d.ts.map +1 -0
- package/dist/screen-templates/templates/auth/forgot-password.js +203 -0
- package/dist/screen-templates/templates/auth/forgot-password.js.map +1 -0
- package/dist/screen-templates/templates/auth/index.d.ts +9 -0
- package/dist/screen-templates/templates/auth/index.d.ts.map +1 -0
- package/dist/screen-templates/templates/auth/index.js +9 -0
- package/dist/screen-templates/templates/auth/index.js.map +1 -0
- package/dist/screen-templates/templates/auth/login.d.ts +24 -0
- package/dist/screen-templates/templates/auth/login.d.ts.map +1 -0
- package/dist/screen-templates/templates/auth/login.js +254 -0
- package/dist/screen-templates/templates/auth/login.js.map +1 -0
- package/dist/screen-templates/templates/auth/signup.d.ts +24 -0
- package/dist/screen-templates/templates/auth/signup.d.ts.map +1 -0
- package/dist/screen-templates/templates/auth/signup.js +315 -0
- package/dist/screen-templates/templates/auth/signup.js.map +1 -0
- package/dist/screen-templates/templates/auth/verification.d.ts +23 -0
- package/dist/screen-templates/templates/auth/verification.d.ts.map +1 -0
- package/dist/screen-templates/templates/auth/verification.js +239 -0
- package/dist/screen-templates/templates/auth/verification.js.map +1 -0
- package/dist/screen-templates/templates/feedback/confirmation.d.ts +9 -0
- package/dist/screen-templates/templates/feedback/confirmation.d.ts.map +1 -0
- package/dist/screen-templates/templates/feedback/confirmation.js +107 -0
- package/dist/screen-templates/templates/feedback/confirmation.js.map +1 -0
- package/dist/screen-templates/templates/feedback/empty.d.ts +9 -0
- package/dist/screen-templates/templates/feedback/empty.d.ts.map +1 -0
- package/dist/screen-templates/templates/feedback/empty.js +90 -0
- package/dist/screen-templates/templates/feedback/empty.js.map +1 -0
- package/dist/screen-templates/templates/feedback/error.d.ts +9 -0
- package/dist/screen-templates/templates/feedback/error.d.ts.map +1 -0
- package/dist/screen-templates/templates/feedback/error.js +99 -0
- package/dist/screen-templates/templates/feedback/error.js.map +1 -0
- package/dist/screen-templates/templates/feedback/index.d.ts +10 -0
- package/dist/screen-templates/templates/feedback/index.d.ts.map +1 -0
- package/dist/screen-templates/templates/feedback/index.js +10 -0
- package/dist/screen-templates/templates/feedback/index.js.map +1 -0
- package/dist/screen-templates/templates/feedback/loading.d.ts +9 -0
- package/dist/screen-templates/templates/feedback/loading.d.ts.map +1 -0
- package/dist/screen-templates/templates/feedback/loading.js +77 -0
- package/dist/screen-templates/templates/feedback/loading.js.map +1 -0
- package/dist/screen-templates/templates/feedback/success.d.ts +9 -0
- package/dist/screen-templates/templates/feedback/success.d.ts.map +1 -0
- package/dist/screen-templates/templates/feedback/success.js +99 -0
- package/dist/screen-templates/templates/feedback/success.js.map +1 -0
- package/dist/screen-templates/templates/home/index.d.ts +6 -0
- package/dist/screen-templates/templates/home/index.d.ts.map +1 -0
- package/dist/screen-templates/templates/home/index.js +6 -0
- package/dist/screen-templates/templates/home/index.js.map +1 -0
- package/dist/screen-templates/templates/home/landing.d.ts +24 -0
- package/dist/screen-templates/templates/home/landing.d.ts.map +1 -0
- package/dist/screen-templates/templates/home/landing.js +197 -0
- package/dist/screen-templates/templates/home/landing.js.map +1 -0
- package/dist/screen-templates/templates/settings/index.d.ts +6 -0
- package/dist/screen-templates/templates/settings/index.d.ts.map +1 -0
- package/dist/screen-templates/templates/settings/index.js +6 -0
- package/dist/screen-templates/templates/settings/index.js.map +1 -0
- package/dist/screen-templates/templates/settings/preferences.d.ts +24 -0
- package/dist/screen-templates/templates/settings/preferences.d.ts.map +1 -0
- package/dist/screen-templates/templates/settings/preferences.js +265 -0
- package/dist/screen-templates/templates/settings/preferences.js.map +1 -0
- package/dist/screen-templates/types.d.ts +229 -0
- package/dist/screen-templates/types.d.ts.map +1 -0
- package/dist/screen-templates/types.js +7 -0
- package/dist/screen-templates/types.js.map +1 -0
- package/dist/theme-v2.d.ts +228 -0
- package/dist/theme-v2.d.ts.map +1 -0
- package/dist/theme-v2.js +158 -0
- package/dist/theme-v2.js.map +1 -0
- package/dist/theme.d.ts +60 -0
- package/dist/theme.d.ts.map +1 -0
- package/dist/theme.js +76 -0
- package/dist/theme.js.map +1 -0
- package/dist/token-resolver.d.ts +69 -0
- package/dist/token-resolver.d.ts.map +1 -0
- package/dist/token-resolver.js +122 -0
- package/dist/token-resolver.js.map +1 -0
- package/dist/token-validation.d.ts +432 -0
- package/dist/token-validation.d.ts.map +1 -0
- package/dist/token-validation.js +140 -0
- package/dist/token-validation.js.map +1 -0
- package/dist/tokens.d.ts +158 -0
- package/dist/tokens.d.ts.map +1 -0
- package/dist/tokens.js +10 -0
- package/dist/tokens.js.map +1 -0
- package/dist/types.d.ts +77 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +7 -0
- package/dist/types.js.map +1 -0
- package/package.json +53 -0
|
@@ -0,0 +1,632 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @tekton-ui/core - Layout Token Type Definitions
|
|
3
|
+
* 4-Layer Layout Token Architecture: Shell → Page → Section → Responsive
|
|
4
|
+
* [SPEC-LAYOUT-001] [PHASE-1]
|
|
5
|
+
*/
|
|
6
|
+
import type { TokenBindings } from '../component-schemas.js';
|
|
7
|
+
import type { TokenReference } from '../token-resolver.js';
|
|
8
|
+
/**
|
|
9
|
+
* Responsive Token - Defines breakpoint dimensions
|
|
10
|
+
* Used for responsive design across different screen sizes
|
|
11
|
+
*/
|
|
12
|
+
export interface ResponsiveToken {
|
|
13
|
+
/** Unique identifier for the breakpoint (e.g., "breakpoint.md") */
|
|
14
|
+
id: string;
|
|
15
|
+
/** Minimum width in pixels for this breakpoint */
|
|
16
|
+
minWidth: number;
|
|
17
|
+
/** Maximum width in pixels (optional, for range breakpoints) */
|
|
18
|
+
maxWidth?: number;
|
|
19
|
+
/** Human-readable description of the breakpoint */
|
|
20
|
+
description: string;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Responsive Configuration for any layout structure
|
|
24
|
+
* Supports mobile-first responsive design with breakpoint overrides
|
|
25
|
+
*
|
|
26
|
+
* @template T - The configuration type being made responsive
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```typescript
|
|
30
|
+
* const config: ResponsiveConfig<ShellConfig> = {
|
|
31
|
+
* default: { /* base config *\/ },
|
|
32
|
+
* md: { /* tablet overrides *\/ },
|
|
33
|
+
* lg: { /* desktop overrides *\/ }
|
|
34
|
+
* };
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
export interface ResponsiveConfig<T> {
|
|
38
|
+
/** Default configuration (mobile-first, applies to all screen sizes) */
|
|
39
|
+
default: T;
|
|
40
|
+
/** Small devices override (640px+) */
|
|
41
|
+
sm?: Partial<T>;
|
|
42
|
+
/** Medium devices override (768px+) */
|
|
43
|
+
md?: Partial<T>;
|
|
44
|
+
/** Large devices override (1024px+) */
|
|
45
|
+
lg?: Partial<T>;
|
|
46
|
+
/** Extra large devices override (1280px+) */
|
|
47
|
+
xl?: Partial<T>;
|
|
48
|
+
/** 2X large devices override (1536px+) */
|
|
49
|
+
'2xl'?: Partial<T>;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Container Query breakpoint values (component-level)
|
|
53
|
+
* These are smaller than viewport breakpoints as they query container width
|
|
54
|
+
*/
|
|
55
|
+
export declare const CONTAINER_BREAKPOINTS: {
|
|
56
|
+
readonly sm: 320;
|
|
57
|
+
readonly md: 480;
|
|
58
|
+
readonly lg: 640;
|
|
59
|
+
readonly xl: 800;
|
|
60
|
+
};
|
|
61
|
+
export type ContainerBreakpointKey = keyof typeof CONTAINER_BREAKPOINTS;
|
|
62
|
+
/**
|
|
63
|
+
* Container Query breakpoint configuration
|
|
64
|
+
*/
|
|
65
|
+
export interface ContainerBreakpointConfig {
|
|
66
|
+
/** Minimum width in pixels */
|
|
67
|
+
minWidth: number;
|
|
68
|
+
/** CSS properties to apply at this breakpoint */
|
|
69
|
+
css: Record<string, string>;
|
|
70
|
+
}
|
|
71
|
+
/**
|
|
72
|
+
* Container Query configuration for component-level responsiveness
|
|
73
|
+
* Uses CSS @container queries for size-based styling
|
|
74
|
+
*
|
|
75
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries
|
|
76
|
+
*/
|
|
77
|
+
export interface ContainerQueryConfig {
|
|
78
|
+
/** Container name for CSS @container rule */
|
|
79
|
+
name: string;
|
|
80
|
+
/**
|
|
81
|
+
* Container type:
|
|
82
|
+
* - 'inline-size': Query width only (recommended for most cases)
|
|
83
|
+
* - 'size': Query both width and height (higher performance cost)
|
|
84
|
+
*/
|
|
85
|
+
type: 'inline-size' | 'size';
|
|
86
|
+
/** Breakpoints for container queries */
|
|
87
|
+
breakpoints: {
|
|
88
|
+
sm?: ContainerBreakpointConfig;
|
|
89
|
+
md?: ContainerBreakpointConfig;
|
|
90
|
+
lg?: ContainerBreakpointConfig;
|
|
91
|
+
xl?: ContainerBreakpointConfig;
|
|
92
|
+
};
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Orientation configuration for device rotation handling
|
|
96
|
+
* Supports portrait (height > width) and landscape (width > height) modes
|
|
97
|
+
*
|
|
98
|
+
* @template T - Configuration type being made orientation-aware
|
|
99
|
+
*/
|
|
100
|
+
export interface OrientationConfig<T> {
|
|
101
|
+
/** Portrait mode overrides (height >= width) */
|
|
102
|
+
portrait?: Partial<T>;
|
|
103
|
+
/** Landscape mode overrides (width > height) */
|
|
104
|
+
landscape?: Partial<T>;
|
|
105
|
+
}
|
|
106
|
+
/**
|
|
107
|
+
* Enhanced responsive configuration with orientation support
|
|
108
|
+
* Extends ResponsiveConfig with orientation-specific overrides
|
|
109
|
+
*
|
|
110
|
+
* @template T - Configuration type being made responsive and orientation-aware
|
|
111
|
+
*/
|
|
112
|
+
export interface FullResponsiveConfig<T> extends ResponsiveConfig<T> {
|
|
113
|
+
/** Orientation-specific overrides applied after breakpoint styles */
|
|
114
|
+
orientation?: OrientationConfig<Partial<T>>;
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* Section Type - Layout primitive classification
|
|
118
|
+
* Defines the fundamental layout pattern type
|
|
119
|
+
*
|
|
120
|
+
* Basic types: grid, flex, split, stack, container
|
|
121
|
+
* Advanced types: masonry, sticky, collapsible
|
|
122
|
+
*/
|
|
123
|
+
export type SectionType = 'grid' | 'flex' | 'split' | 'stack' | 'container' | 'masonry' | 'sticky' | 'collapsible';
|
|
124
|
+
/**
|
|
125
|
+
* Section CSS Configuration
|
|
126
|
+
* CSS properties that define the section layout behavior
|
|
127
|
+
*/
|
|
128
|
+
export interface SectionCSS {
|
|
129
|
+
/** CSS display property */
|
|
130
|
+
display: 'grid' | 'flex';
|
|
131
|
+
/** CSS grid-template-columns (for grid display) */
|
|
132
|
+
gridTemplateColumns?: string;
|
|
133
|
+
/** CSS grid-template-rows (for grid display) */
|
|
134
|
+
gridTemplateRows?: string;
|
|
135
|
+
/** Gap between grid/flex items (token reference) */
|
|
136
|
+
gap?: TokenReference;
|
|
137
|
+
/** Flex direction (for flex display) */
|
|
138
|
+
flexDirection?: 'row' | 'column';
|
|
139
|
+
/** Align items along cross axis */
|
|
140
|
+
alignItems?: string;
|
|
141
|
+
/** Justify content along main axis */
|
|
142
|
+
justifyContent?: string;
|
|
143
|
+
/** Maximum width constraint (token reference) */
|
|
144
|
+
maxWidth?: TokenReference;
|
|
145
|
+
/** Padding (token reference) */
|
|
146
|
+
padding?: TokenReference;
|
|
147
|
+
}
|
|
148
|
+
/**
|
|
149
|
+
* Masonry Section CSS Configuration
|
|
150
|
+
* CSS properties for Pinterest-style waterfall grid layouts
|
|
151
|
+
* Uses CSS columns for broad browser support
|
|
152
|
+
*
|
|
153
|
+
* @extends SectionCSS
|
|
154
|
+
*/
|
|
155
|
+
export interface MasonrySectionCSS extends SectionCSS {
|
|
156
|
+
/** Number of columns (CSS column-count value as string) */
|
|
157
|
+
columnCount?: string;
|
|
158
|
+
/** Gap between columns (token reference, e.g., "atomic.spacing.4") */
|
|
159
|
+
columnGap?: TokenReference;
|
|
160
|
+
/** Prevent item breaking inside columns */
|
|
161
|
+
breakInside?: 'avoid' | 'auto';
|
|
162
|
+
/** Column fill behavior */
|
|
163
|
+
columnFill?: 'auto' | 'balance';
|
|
164
|
+
}
|
|
165
|
+
/**
|
|
166
|
+
* Sticky Section CSS Configuration
|
|
167
|
+
* CSS properties for sticky header/footer layouts
|
|
168
|
+
*
|
|
169
|
+
* @extends SectionCSS
|
|
170
|
+
*/
|
|
171
|
+
export interface StickySectionCSS extends SectionCSS {
|
|
172
|
+
/** CSS position property for sticky behavior */
|
|
173
|
+
position?: 'sticky' | 'relative';
|
|
174
|
+
/** Distance from top of viewport (token reference) */
|
|
175
|
+
top?: TokenReference;
|
|
176
|
+
/** Distance from bottom of viewport (token reference) */
|
|
177
|
+
bottom?: TokenReference;
|
|
178
|
+
/** Z-index for stacking context */
|
|
179
|
+
zIndex?: number;
|
|
180
|
+
/** Box shadow for visual depth when stuck */
|
|
181
|
+
boxShadow?: TokenReference;
|
|
182
|
+
/** Background color for opaque sticky element */
|
|
183
|
+
backgroundColor?: TokenReference;
|
|
184
|
+
}
|
|
185
|
+
/**
|
|
186
|
+
* Collapsible Section CSS Configuration
|
|
187
|
+
* CSS properties for expandable/collapsible sidebar layouts
|
|
188
|
+
*
|
|
189
|
+
* @extends SectionCSS
|
|
190
|
+
*/
|
|
191
|
+
export interface CollapsibleSectionCSS extends SectionCSS {
|
|
192
|
+
/** Width when expanded (token reference) */
|
|
193
|
+
width?: TokenReference;
|
|
194
|
+
/** Minimum width when collapsed (token reference) */
|
|
195
|
+
minWidth?: TokenReference;
|
|
196
|
+
/** CSS transition for smooth collapse/expand animation */
|
|
197
|
+
transition?: string;
|
|
198
|
+
/** Overflow handling during collapse */
|
|
199
|
+
overflow?: 'hidden' | 'visible' | 'auto';
|
|
200
|
+
/** Whether the element will collapse (controls rendering behavior) */
|
|
201
|
+
willChange?: string;
|
|
202
|
+
}
|
|
203
|
+
/**
|
|
204
|
+
* Advanced Section Pattern Token - Extended token for advanced patterns
|
|
205
|
+
* Extends SectionPatternToken with additional advanced CSS properties
|
|
206
|
+
*
|
|
207
|
+
* @extends SectionPatternToken
|
|
208
|
+
*/
|
|
209
|
+
export interface AdvancedSectionPatternToken extends Omit<SectionPatternToken, 'css' | 'responsive'> {
|
|
210
|
+
/** CSS properties (may include advanced properties) */
|
|
211
|
+
css: SectionCSS | MasonrySectionCSS | StickySectionCSS | CollapsibleSectionCSS;
|
|
212
|
+
/** Responsive overrides with advanced CSS */
|
|
213
|
+
responsive: ResponsiveConfig<SectionCSS | MasonrySectionCSS | StickySectionCSS | CollapsibleSectionCSS>;
|
|
214
|
+
/** State configurations for interactive patterns (e.g., collapsed/expanded) */
|
|
215
|
+
states?: {
|
|
216
|
+
/** Default state configuration */
|
|
217
|
+
default?: Partial<SectionCSS | MasonrySectionCSS | StickySectionCSS | CollapsibleSectionCSS>;
|
|
218
|
+
/** Collapsed state configuration (for collapsible patterns) */
|
|
219
|
+
collapsed?: Partial<CollapsibleSectionCSS>;
|
|
220
|
+
/** Stuck state configuration (for sticky patterns) */
|
|
221
|
+
stuck?: Partial<StickySectionCSS>;
|
|
222
|
+
};
|
|
223
|
+
}
|
|
224
|
+
/**
|
|
225
|
+
* Section Pattern Token - Layout primitive definition
|
|
226
|
+
* Defines reusable layout patterns with CSS properties
|
|
227
|
+
*/
|
|
228
|
+
export interface SectionPatternToken {
|
|
229
|
+
/** Unique identifier (e.g., "section.grid-3") */
|
|
230
|
+
id: string;
|
|
231
|
+
/** Layout primitive type */
|
|
232
|
+
type: SectionType;
|
|
233
|
+
/** Human-readable description */
|
|
234
|
+
description: string;
|
|
235
|
+
/** CSS properties defining the layout */
|
|
236
|
+
css: SectionCSS;
|
|
237
|
+
/** Responsive overrides for different breakpoints */
|
|
238
|
+
responsive: ResponsiveConfig<SectionCSS>;
|
|
239
|
+
/** Token bindings for referencing design system tokens */
|
|
240
|
+
tokenBindings: TokenBindings;
|
|
241
|
+
}
|
|
242
|
+
/**
|
|
243
|
+
* Page Purpose - Semantic page classification
|
|
244
|
+
* Defines the intended use case and behavior of the page
|
|
245
|
+
*/
|
|
246
|
+
export type PagePurpose = 'job' | 'resource' | 'dashboard' | 'settings' | 'detail' | 'empty' | 'wizard' | 'onboarding';
|
|
247
|
+
/**
|
|
248
|
+
* Section Slot - Placeholder for section patterns in page layout
|
|
249
|
+
* Defines where and how section patterns can be used
|
|
250
|
+
*/
|
|
251
|
+
export interface SectionSlot {
|
|
252
|
+
/** Slot identifier (e.g., "header", "main", "sidebar") */
|
|
253
|
+
name: string;
|
|
254
|
+
/** Reference to section pattern ID */
|
|
255
|
+
pattern: string;
|
|
256
|
+
/** Whether this section is required in the layout */
|
|
257
|
+
required: boolean;
|
|
258
|
+
/** Optional whitelist of allowed component types in this slot */
|
|
259
|
+
allowedComponents?: string[];
|
|
260
|
+
}
|
|
261
|
+
/**
|
|
262
|
+
* Page Configuration - Structure for page-level settings
|
|
263
|
+
* Used as the type parameter for ResponsiveConfig<PageConfig>
|
|
264
|
+
*/
|
|
265
|
+
export interface PageConfig {
|
|
266
|
+
/** Page-specific configuration properties */
|
|
267
|
+
[key: string]: unknown;
|
|
268
|
+
}
|
|
269
|
+
/**
|
|
270
|
+
* Page Layout Token - Complete page layout definition
|
|
271
|
+
* Defines the overall structure and purpose of a page
|
|
272
|
+
*/
|
|
273
|
+
export interface PageLayoutToken {
|
|
274
|
+
/** Unique identifier (e.g., "page.dashboard") */
|
|
275
|
+
id: string;
|
|
276
|
+
/** Human-readable description */
|
|
277
|
+
description: string;
|
|
278
|
+
/** Semantic purpose of the page */
|
|
279
|
+
purpose: PagePurpose;
|
|
280
|
+
/** Section slots that make up the page structure */
|
|
281
|
+
sections: SectionSlot[];
|
|
282
|
+
/** Responsive overrides for different breakpoints */
|
|
283
|
+
responsive: ResponsiveConfig<PageConfig>;
|
|
284
|
+
/** Token bindings for referencing design system tokens */
|
|
285
|
+
tokenBindings: TokenBindings;
|
|
286
|
+
}
|
|
287
|
+
/**
|
|
288
|
+
* Shell Region Position - Location within the app shell
|
|
289
|
+
*/
|
|
290
|
+
export type ShellRegionPosition = 'top' | 'left' | 'right' | 'bottom' | 'center';
|
|
291
|
+
/**
|
|
292
|
+
* Shell Region - Structural region within the application shell
|
|
293
|
+
* Defines persistent UI regions like headers, sidebars, and footers
|
|
294
|
+
*/
|
|
295
|
+
export interface ShellRegion {
|
|
296
|
+
/** Region identifier (e.g., "header", "sidebar", "main") */
|
|
297
|
+
name: string;
|
|
298
|
+
/** Position within the shell layout */
|
|
299
|
+
position: ShellRegionPosition;
|
|
300
|
+
/** Size dimension (token reference, e.g., "atomic.spacing.16") */
|
|
301
|
+
size: TokenReference;
|
|
302
|
+
/** Whether the region can be collapsed */
|
|
303
|
+
collapsible?: boolean;
|
|
304
|
+
/** Default collapsed state (if collapsible) */
|
|
305
|
+
defaultCollapsed?: boolean;
|
|
306
|
+
}
|
|
307
|
+
/**
|
|
308
|
+
* Shell Configuration - Structure for shell-level settings
|
|
309
|
+
* Used as the type parameter for ResponsiveConfig<ShellConfig>
|
|
310
|
+
*/
|
|
311
|
+
export interface ShellConfig {
|
|
312
|
+
/** Shell-specific configuration properties */
|
|
313
|
+
[key: string]: unknown;
|
|
314
|
+
}
|
|
315
|
+
/**
|
|
316
|
+
* Shell Token - Application shell layout definition
|
|
317
|
+
* Defines the persistent frame structure of the application
|
|
318
|
+
*/
|
|
319
|
+
export interface ShellToken {
|
|
320
|
+
/** Unique identifier (e.g., "shell.web.dashboard") */
|
|
321
|
+
id: string;
|
|
322
|
+
/** Human-readable description */
|
|
323
|
+
description: string;
|
|
324
|
+
/** Target platform */
|
|
325
|
+
platform: 'web' | 'mobile' | 'desktop';
|
|
326
|
+
/** Structural regions that make up the shell */
|
|
327
|
+
regions: ShellRegion[];
|
|
328
|
+
/** Responsive overrides for different breakpoints */
|
|
329
|
+
responsive: ResponsiveConfig<ShellConfig>;
|
|
330
|
+
/** Token bindings for referencing design system tokens */
|
|
331
|
+
tokenBindings: TokenBindings;
|
|
332
|
+
}
|
|
333
|
+
/**
|
|
334
|
+
* Touch target minimum size constants
|
|
335
|
+
* Based on platform accessibility guidelines (iOS HIG, Material Design)
|
|
336
|
+
*/
|
|
337
|
+
export declare const TOUCH_TARGET: {
|
|
338
|
+
/** Minimum touch target size in points (44pt for iOS, 48dp for Android) */
|
|
339
|
+
readonly MIN_SIZE_PT: 44;
|
|
340
|
+
/** Minimum touch target size in pixels (1x density) */
|
|
341
|
+
readonly MIN_SIZE_PX: 44;
|
|
342
|
+
/** Touch target size at 2x density (88px) */
|
|
343
|
+
readonly MIN_SIZE_2X: 88;
|
|
344
|
+
/** Touch target size at 3x density (132px) */
|
|
345
|
+
readonly MIN_SIZE_3X: 132;
|
|
346
|
+
/** Touch target size at 4x density (176px) */
|
|
347
|
+
readonly MIN_SIZE_4X: 176;
|
|
348
|
+
};
|
|
349
|
+
/**
|
|
350
|
+
* Safe area inset default values
|
|
351
|
+
* Standard measurements for iOS device notches and home indicators
|
|
352
|
+
*/
|
|
353
|
+
export declare const SAFE_AREA_DEFAULTS: {
|
|
354
|
+
/** Notch height on iPhone X series (44pt) */
|
|
355
|
+
readonly NOTCH: 44;
|
|
356
|
+
/** Dynamic Island height on iPhone 14 Pro+ (59pt) */
|
|
357
|
+
readonly DYNAMIC_ISLAND: 59;
|
|
358
|
+
/** Home indicator height on devices without home button (34pt) */
|
|
359
|
+
readonly HOME_INDICATOR: 34;
|
|
360
|
+
/** Status bar height on standard devices (20pt) */
|
|
361
|
+
readonly STATUS_BAR: 20;
|
|
362
|
+
};
|
|
363
|
+
/**
|
|
364
|
+
* Safe Area Default Values
|
|
365
|
+
* Device-specific safe area measurements in points
|
|
366
|
+
*/
|
|
367
|
+
export interface SafeAreaDefaults {
|
|
368
|
+
/** Notch height for iPhone X and later (44pt) */
|
|
369
|
+
notch: number;
|
|
370
|
+
/** Dynamic Island height for iPhone 14 Pro and later (59pt) */
|
|
371
|
+
dynamicIsland: number;
|
|
372
|
+
/** Home indicator height for devices without physical home button (34pt) */
|
|
373
|
+
homeIndicator: number;
|
|
374
|
+
/** Status bar height for standard devices (20pt) */
|
|
375
|
+
statusBar: number;
|
|
376
|
+
}
|
|
377
|
+
/**
|
|
378
|
+
* Safe Area Edges Configuration
|
|
379
|
+
* Specifies which screen edges should respect safe area insets
|
|
380
|
+
*/
|
|
381
|
+
export interface SafeAreaEdges {
|
|
382
|
+
/** Apply safe area to top edge (notch, Dynamic Island, status bar) */
|
|
383
|
+
top: boolean;
|
|
384
|
+
/** Apply safe area to bottom edge (home indicator, virtual navigation) */
|
|
385
|
+
bottom: boolean;
|
|
386
|
+
/** Apply safe area to left and right edges (for landscape orientation) */
|
|
387
|
+
horizontal: boolean;
|
|
388
|
+
}
|
|
389
|
+
/**
|
|
390
|
+
* Safe Area Configuration
|
|
391
|
+
* Defines safe area insets and behavior for mobile devices
|
|
392
|
+
*
|
|
393
|
+
* @see https://developer.apple.com/design/human-interface-guidelines/layout
|
|
394
|
+
* @see https://m3.material.io/foundations/layout/applying-layout/window-size-classes
|
|
395
|
+
*/
|
|
396
|
+
export interface SafeAreaConfig {
|
|
397
|
+
/** Top inset (token reference, e.g., "atomic.spacing.44") */
|
|
398
|
+
top: TokenReference;
|
|
399
|
+
/** Bottom inset (token reference, e.g., "atomic.spacing.34") */
|
|
400
|
+
bottom: TokenReference;
|
|
401
|
+
/** Left inset (token reference) */
|
|
402
|
+
left: TokenReference;
|
|
403
|
+
/** Right inset (token reference) */
|
|
404
|
+
right: TokenReference;
|
|
405
|
+
/** Default safe area values for standard device configurations */
|
|
406
|
+
defaults: SafeAreaDefaults;
|
|
407
|
+
/** Which edges should respect safe area insets */
|
|
408
|
+
edges: SafeAreaEdges;
|
|
409
|
+
}
|
|
410
|
+
/**
|
|
411
|
+
* Status Bar Configuration
|
|
412
|
+
* Controls the appearance and behavior of the mobile status bar
|
|
413
|
+
*
|
|
414
|
+
* @see https://developer.apple.com/documentation/uikit/uistatusbar
|
|
415
|
+
* @see https://developer.android.com/reference/android/view/WindowInsetsController
|
|
416
|
+
*/
|
|
417
|
+
export interface StatusBarConfig {
|
|
418
|
+
/** Height of the status bar (token reference) */
|
|
419
|
+
height: TokenReference;
|
|
420
|
+
/** Whether the status bar is visible */
|
|
421
|
+
visible: boolean;
|
|
422
|
+
/** Content style (light icons on dark background or vice versa) */
|
|
423
|
+
style: 'light-content' | 'dark-content' | 'auto';
|
|
424
|
+
/** Background color (token reference, optional) */
|
|
425
|
+
backgroundColor?: TokenReference;
|
|
426
|
+
/** Whether content can render behind the status bar (Android) */
|
|
427
|
+
translucent: boolean;
|
|
428
|
+
}
|
|
429
|
+
/**
|
|
430
|
+
* Navigation Bar Configuration
|
|
431
|
+
* Controls the system navigation bar on Android devices
|
|
432
|
+
*
|
|
433
|
+
* @see https://developer.android.com/develop/ui/views/layout/edge-to-edge
|
|
434
|
+
*/
|
|
435
|
+
export interface NavigationBarConfig {
|
|
436
|
+
/** Height of the navigation bar (token reference) */
|
|
437
|
+
height: TokenReference;
|
|
438
|
+
/**
|
|
439
|
+
* Navigation bar display mode
|
|
440
|
+
* - 'overlay': Draws over the navigation bar (edge-to-edge)
|
|
441
|
+
* - 'inset': Content stops at navigation bar
|
|
442
|
+
* - 'hidden': Navigation bar is hidden
|
|
443
|
+
*/
|
|
444
|
+
mode: 'overlay' | 'inset' | 'hidden';
|
|
445
|
+
/** Background color (token reference, optional) */
|
|
446
|
+
backgroundColor?: TokenReference;
|
|
447
|
+
/** Navigation button style (light or dark icons) */
|
|
448
|
+
buttonStyle: 'light' | 'dark' | 'auto';
|
|
449
|
+
}
|
|
450
|
+
/**
|
|
451
|
+
* System UI Configuration
|
|
452
|
+
* Combines status bar and navigation bar settings
|
|
453
|
+
*/
|
|
454
|
+
export interface SystemUIConfig {
|
|
455
|
+
/** Status bar configuration */
|
|
456
|
+
statusBar: StatusBarConfig;
|
|
457
|
+
/** Navigation bar configuration (Android only) */
|
|
458
|
+
navigationBar: NavigationBarConfig;
|
|
459
|
+
}
|
|
460
|
+
/**
|
|
461
|
+
* Keyboard Animation Configuration
|
|
462
|
+
* Controls how the UI animates when the keyboard appears/disappears
|
|
463
|
+
*/
|
|
464
|
+
export interface KeyboardAnimationConfig {
|
|
465
|
+
/** Animation duration in milliseconds (iOS: 250ms, Android: 300ms) */
|
|
466
|
+
duration: number;
|
|
467
|
+
/**
|
|
468
|
+
* Animation easing function
|
|
469
|
+
* - 'keyboard': Platform default keyboard animation
|
|
470
|
+
* - 'easeInOut': Standard ease-in-out curve
|
|
471
|
+
*/
|
|
472
|
+
easing: string;
|
|
473
|
+
/** Whether keyboard animation is enabled */
|
|
474
|
+
enabled: boolean;
|
|
475
|
+
}
|
|
476
|
+
/**
|
|
477
|
+
* Keyboard Configuration
|
|
478
|
+
* Defines how the UI responds to keyboard visibility changes
|
|
479
|
+
*
|
|
480
|
+
* @see https://reactnative.dev/docs/keyboardavoidingview
|
|
481
|
+
* @see https://developer.apple.com/documentation/uikit/keyboards_and_input
|
|
482
|
+
*/
|
|
483
|
+
export interface KeyboardConfig {
|
|
484
|
+
/**
|
|
485
|
+
* Keyboard avoidance strategy
|
|
486
|
+
* - 'padding': Add padding to avoid keyboard
|
|
487
|
+
* - 'resize': Resize view to avoid keyboard
|
|
488
|
+
* - 'position': Adjust position to avoid keyboard
|
|
489
|
+
* - 'none': No automatic avoidance
|
|
490
|
+
*/
|
|
491
|
+
avoidance: 'padding' | 'resize' | 'position' | 'none';
|
|
492
|
+
/**
|
|
493
|
+
* Keyboard behavior type (iOS-specific)
|
|
494
|
+
* - 'height': Adjust based on keyboard height
|
|
495
|
+
* - 'position': Adjust based on position
|
|
496
|
+
* - 'padding': Add padding
|
|
497
|
+
*/
|
|
498
|
+
behavior: 'height' | 'position' | 'padding';
|
|
499
|
+
/** Animation configuration for keyboard transitions */
|
|
500
|
+
animation: KeyboardAnimationConfig;
|
|
501
|
+
/**
|
|
502
|
+
* Keyboard dismiss mode
|
|
503
|
+
* - 'on-drag': Dismiss when user drags scrollable content
|
|
504
|
+
* - 'interactive': Allow interactive dismissal
|
|
505
|
+
* - 'none': Require explicit dismiss
|
|
506
|
+
*/
|
|
507
|
+
dismissMode: 'on-drag' | 'interactive' | 'none';
|
|
508
|
+
}
|
|
509
|
+
/**
|
|
510
|
+
* Bottom Tab Item Configuration
|
|
511
|
+
* Defines the layout and sizing for individual tab bar items
|
|
512
|
+
*/
|
|
513
|
+
export interface BottomTabItemConfig {
|
|
514
|
+
/** Minimum touch target size (token reference) */
|
|
515
|
+
minTouchTarget: TokenReference;
|
|
516
|
+
/** Icon size (token reference) */
|
|
517
|
+
iconSize: TokenReference;
|
|
518
|
+
/** Label font size (token reference) */
|
|
519
|
+
labelSize: TokenReference;
|
|
520
|
+
/** Spacing between icon and label (token reference) */
|
|
521
|
+
spacing: TokenReference;
|
|
522
|
+
}
|
|
523
|
+
/**
|
|
524
|
+
* Bottom Tab Configuration
|
|
525
|
+
* Defines the layout and behavior of the bottom tab bar
|
|
526
|
+
*
|
|
527
|
+
* @see https://developer.apple.com/design/human-interface-guidelines/tab-bars
|
|
528
|
+
* @see https://m3.material.io/components/navigation-bar
|
|
529
|
+
*/
|
|
530
|
+
export interface BottomTabConfig {
|
|
531
|
+
/** Tab bar height excluding safe area (token reference) */
|
|
532
|
+
height: TokenReference;
|
|
533
|
+
/** Bottom safe area inset (token reference) */
|
|
534
|
+
safeAreaBottom: TokenReference;
|
|
535
|
+
/** Total height including safe area (token reference) */
|
|
536
|
+
totalHeight: TokenReference;
|
|
537
|
+
/**
|
|
538
|
+
* Tab bar visibility behavior
|
|
539
|
+
* - 'always': Always visible
|
|
540
|
+
* - 'scroll-hide': Hide on scroll
|
|
541
|
+
* - 'route-based': Show/hide based on route
|
|
542
|
+
*/
|
|
543
|
+
visibility: 'always' | 'scroll-hide' | 'route-based';
|
|
544
|
+
/** Maximum recommended number of tab items */
|
|
545
|
+
maxItems: number;
|
|
546
|
+
/** Individual tab item configuration */
|
|
547
|
+
item: BottomTabItemConfig;
|
|
548
|
+
}
|
|
549
|
+
/**
|
|
550
|
+
* Hit Slop Configuration
|
|
551
|
+
* Defines the expanded touch area around a component
|
|
552
|
+
* Negative values expand the touch area beyond visual bounds
|
|
553
|
+
*
|
|
554
|
+
* @see https://reactnative.dev/docs/touchablewithoutfeedback#hitslop
|
|
555
|
+
*/
|
|
556
|
+
export interface HitSlopConfig {
|
|
557
|
+
/** Additional touchable area above the component (in pixels) */
|
|
558
|
+
top: number;
|
|
559
|
+
/** Additional touchable area below the component (in pixels) */
|
|
560
|
+
bottom: number;
|
|
561
|
+
/** Additional touchable area to the left of the component (in pixels) */
|
|
562
|
+
left: number;
|
|
563
|
+
/** Additional touchable area to the right of the component (in pixels) */
|
|
564
|
+
right: number;
|
|
565
|
+
}
|
|
566
|
+
/**
|
|
567
|
+
* Touch Target Configuration
|
|
568
|
+
* Ensures minimum touch target sizes for accessibility
|
|
569
|
+
*
|
|
570
|
+
* @see https://developer.apple.com/design/human-interface-guidelines/layout
|
|
571
|
+
* @see https://m3.material.io/foundations/accessible-design/accessibility-basics
|
|
572
|
+
*/
|
|
573
|
+
export interface TouchTargetConfig {
|
|
574
|
+
/** Minimum touch target size (token reference, typically 44pt iOS / 48dp Android) */
|
|
575
|
+
minSize: TokenReference;
|
|
576
|
+
/** Hit slop for expanding touch area beyond visual bounds */
|
|
577
|
+
hitSlop: HitSlopConfig;
|
|
578
|
+
}
|
|
579
|
+
/**
|
|
580
|
+
* Mobile Shell Token - Mobile-specific shell layout definition
|
|
581
|
+
* Extends ShellToken with mobile platform configurations including
|
|
582
|
+
* safe areas, system UI, keyboard handling, and touch targets
|
|
583
|
+
*
|
|
584
|
+
* @extends ShellToken
|
|
585
|
+
*
|
|
586
|
+
* @example
|
|
587
|
+
* ```typescript
|
|
588
|
+
* const mobileShell: MobileShellToken = {
|
|
589
|
+
* id: "shell.mobile.main",
|
|
590
|
+
* description: "Main mobile app shell with bottom tabs",
|
|
591
|
+
* platform: "mobile",
|
|
592
|
+
* os: "cross-platform",
|
|
593
|
+
* regions: [...],
|
|
594
|
+
* safeArea: {
|
|
595
|
+
* top: "atomic.spacing.44",
|
|
596
|
+
* bottom: "atomic.spacing.34",
|
|
597
|
+
* left: "atomic.spacing.0",
|
|
598
|
+
* right: "atomic.spacing.0",
|
|
599
|
+
* defaults: { notch: 44, dynamicIsland: 59, homeIndicator: 34, statusBar: 20 },
|
|
600
|
+
* edges: { top: true, bottom: true, horizontal: false }
|
|
601
|
+
* },
|
|
602
|
+
* systemUI: { ... },
|
|
603
|
+
* keyboard: { ... },
|
|
604
|
+
* bottomTab: { ... },
|
|
605
|
+
* touchTarget: { ... },
|
|
606
|
+
* responsive: { ... },
|
|
607
|
+
* tokenBindings: { ... }
|
|
608
|
+
* };
|
|
609
|
+
* ```
|
|
610
|
+
*/
|
|
611
|
+
export interface MobileShellToken extends ShellToken {
|
|
612
|
+
/** Platform must be 'mobile' for mobile shell tokens */
|
|
613
|
+
platform: 'mobile';
|
|
614
|
+
/**
|
|
615
|
+
* Target mobile operating system
|
|
616
|
+
* - 'ios': iOS-specific configuration
|
|
617
|
+
* - 'android': Android-specific configuration
|
|
618
|
+
* - 'cross-platform': Shared configuration for both platforms
|
|
619
|
+
*/
|
|
620
|
+
os: 'ios' | 'android' | 'cross-platform';
|
|
621
|
+
/** Safe area configuration for device notches and system UI */
|
|
622
|
+
safeArea: SafeAreaConfig;
|
|
623
|
+
/** System UI configuration (status bar, navigation bar) */
|
|
624
|
+
systemUI: SystemUIConfig;
|
|
625
|
+
/** Keyboard behavior and animation configuration */
|
|
626
|
+
keyboard: KeyboardConfig;
|
|
627
|
+
/** Bottom tab bar configuration (optional, for tab-based navigation) */
|
|
628
|
+
bottomTab?: BottomTabConfig;
|
|
629
|
+
/** Touch target size and hit slop configuration for accessibility */
|
|
630
|
+
touchTarget: TouchTargetConfig;
|
|
631
|
+
}
|
|
632
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/layout-tokens/types.ts"],"names":[],"mappings":"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"}
|