@yahoo/uds 0.1.6 → 0.1.9

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,44 +0,0 @@
1
- import { C as ColorMode, S as ScaleMode, H as Hue, a as HueStep, b as SpectrumColor, c as CorePaletteAlias, B as BackgroundPaletteAlias, d as BackgroundWashPaletteAlias, F as ForegroundPaletteAlias, L as LinePaletteAlias, A as AlwaysPaletteAlias, e as CorePalette, f as BackgroundPalette, g as BackgroundWashPalette, h as ForegroundPalette, i as LinePalette, j as FontFamilyAlias, k as FontWeightAlias, T as TextVariant, l as TextTransformAlias, m as BorderWidthAlias, E as ElevationAlias, n as SpacingAlias, o as ShapeAlias, p as AvatarSizeAlias, q as ButtonVariant, r as ButtonSize } from './types-7giMTpNx.cjs';
2
- import 'react';
3
-
4
- /**
5
- * TODO: This file is generated with a bun macro in config prototype repo.
6
- * Alternative to bun macro would be something like babel-preval https://github.com/kentcdodds/babel-plugin-preval
7
- * See https://github.com/yahoo-design/universal-system-poc/blob/main/packages/components/src/internal/fixtures.ts
8
- */
9
- declare const colorModes: ColorMode[];
10
- declare const scaleModes: ScaleMode[];
11
- declare const DEFAULT_COLOR_MODE: ColorMode;
12
- declare const DEFAULT_SCALE_MODE: ScaleMode;
13
- declare const hues: Hue[];
14
- declare const hueSteps: HueStep[];
15
- declare const spectrumColors: SpectrumColor[];
16
- declare const corePaletteColors: CorePaletteAlias[];
17
- declare const backgroundPaletteColors: BackgroundPaletteAlias[];
18
- declare const backgroundWashPaletteColors: BackgroundWashPaletteAlias[];
19
- declare const foregroundPaletteColors: ForegroundPaletteAlias[];
20
- declare const linePaletteColors: LinePaletteAlias[];
21
- declare const alwaysPaletteAliases: AlwaysPaletteAlias[];
22
- declare const backgroundColors: ("transparent" | keyof CorePalette | "white" | "black" | keyof BackgroundPalette | keyof BackgroundWashPalette)[];
23
- declare const foregroundColors: ("transparent" | keyof CorePalette | keyof ForegroundPalette | "white" | "black")[];
24
- declare const lineColors: ("transparent" | keyof CorePalette | "white" | "black" | keyof LinePalette)[];
25
- declare const palette: {
26
- core: (keyof CorePalette)[];
27
- background: (keyof BackgroundPalette)[];
28
- backgroundWash: (keyof BackgroundWashPalette)[];
29
- foreground: (keyof ForegroundPalette)[];
30
- line: (keyof LinePalette)[];
31
- };
32
- declare const fontFamilyAliases: FontFamilyAlias[];
33
- declare const fontWeightAliases: FontWeightAlias[];
34
- declare const textVariants: TextVariant[];
35
- declare const textTransformAliases: TextTransformAlias[];
36
- declare const borderWidthAliases: BorderWidthAlias[];
37
- declare const elevations: ElevationAlias[];
38
- declare const spacingAliases: SpacingAlias[];
39
- declare const shapes: ShapeAlias[];
40
- declare const avatarSizes: AvatarSizeAlias[];
41
- declare const buttonVariants: ButtonVariant[];
42
- declare const buttonSizes: ButtonSize[];
43
-
44
- export { DEFAULT_COLOR_MODE, DEFAULT_SCALE_MODE, alwaysPaletteAliases, avatarSizes, backgroundColors, backgroundPaletteColors, backgroundWashPaletteColors, borderWidthAliases, buttonSizes, buttonVariants, colorModes, corePaletteColors, elevations, fontFamilyAliases, fontWeightAliases, foregroundColors, foregroundPaletteColors, hueSteps, hues, lineColors, linePaletteColors, palette, scaleModes, shapes, spacingAliases, spectrumColors, textTransformAliases, textVariants };
@@ -1,44 +0,0 @@
1
- import { C as ColorMode, S as ScaleMode, H as Hue, a as HueStep, b as SpectrumColor, c as CorePaletteAlias, B as BackgroundPaletteAlias, d as BackgroundWashPaletteAlias, F as ForegroundPaletteAlias, L as LinePaletteAlias, A as AlwaysPaletteAlias, e as CorePalette, f as BackgroundPalette, g as BackgroundWashPalette, h as ForegroundPalette, i as LinePalette, j as FontFamilyAlias, k as FontWeightAlias, T as TextVariant, l as TextTransformAlias, m as BorderWidthAlias, E as ElevationAlias, n as SpacingAlias, o as ShapeAlias, p as AvatarSizeAlias, q as ButtonVariant, r as ButtonSize } from './types-7giMTpNx.js';
2
- import 'react';
3
-
4
- /**
5
- * TODO: This file is generated with a bun macro in config prototype repo.
6
- * Alternative to bun macro would be something like babel-preval https://github.com/kentcdodds/babel-plugin-preval
7
- * See https://github.com/yahoo-design/universal-system-poc/blob/main/packages/components/src/internal/fixtures.ts
8
- */
9
- declare const colorModes: ColorMode[];
10
- declare const scaleModes: ScaleMode[];
11
- declare const DEFAULT_COLOR_MODE: ColorMode;
12
- declare const DEFAULT_SCALE_MODE: ScaleMode;
13
- declare const hues: Hue[];
14
- declare const hueSteps: HueStep[];
15
- declare const spectrumColors: SpectrumColor[];
16
- declare const corePaletteColors: CorePaletteAlias[];
17
- declare const backgroundPaletteColors: BackgroundPaletteAlias[];
18
- declare const backgroundWashPaletteColors: BackgroundWashPaletteAlias[];
19
- declare const foregroundPaletteColors: ForegroundPaletteAlias[];
20
- declare const linePaletteColors: LinePaletteAlias[];
21
- declare const alwaysPaletteAliases: AlwaysPaletteAlias[];
22
- declare const backgroundColors: ("transparent" | keyof CorePalette | "white" | "black" | keyof BackgroundPalette | keyof BackgroundWashPalette)[];
23
- declare const foregroundColors: ("transparent" | keyof CorePalette | keyof ForegroundPalette | "white" | "black")[];
24
- declare const lineColors: ("transparent" | keyof CorePalette | "white" | "black" | keyof LinePalette)[];
25
- declare const palette: {
26
- core: (keyof CorePalette)[];
27
- background: (keyof BackgroundPalette)[];
28
- backgroundWash: (keyof BackgroundWashPalette)[];
29
- foreground: (keyof ForegroundPalette)[];
30
- line: (keyof LinePalette)[];
31
- };
32
- declare const fontFamilyAliases: FontFamilyAlias[];
33
- declare const fontWeightAliases: FontWeightAlias[];
34
- declare const textVariants: TextVariant[];
35
- declare const textTransformAliases: TextTransformAlias[];
36
- declare const borderWidthAliases: BorderWidthAlias[];
37
- declare const elevations: ElevationAlias[];
38
- declare const spacingAliases: SpacingAlias[];
39
- declare const shapes: ShapeAlias[];
40
- declare const avatarSizes: AvatarSizeAlias[];
41
- declare const buttonVariants: ButtonVariant[];
42
- declare const buttonSizes: ButtonSize[];
43
-
44
- export { DEFAULT_COLOR_MODE, DEFAULT_SCALE_MODE, alwaysPaletteAliases, avatarSizes, backgroundColors, backgroundPaletteColors, backgroundWashPaletteColors, borderWidthAliases, buttonSizes, buttonVariants, colorModes, corePaletteColors, elevations, fontFamilyAliases, fontWeightAliases, foregroundColors, foregroundPaletteColors, hueSteps, hues, lineColors, linePaletteColors, palette, scaleModes, shapes, spacingAliases, spectrumColors, textTransformAliases, textVariants };
package/dist/fixtures.js DELETED
@@ -1 +0,0 @@
1
- import{A,B,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z}from"./chunk-RK4NHJLQ.js";export{c as DEFAULT_COLOR_MODE,d as DEFAULT_SCALE_MODE,m as alwaysPaletteAliases,z as avatarSizes,n as backgroundColors,i as backgroundPaletteColors,j as backgroundWashPaletteColors,v as borderWidthAliases,B as buttonSizes,A as buttonVariants,a as colorModes,h as corePaletteColors,w as elevations,r as fontFamilyAliases,s as fontWeightAliases,o as foregroundColors,k as foregroundPaletteColors,f as hueSteps,e as hues,p as lineColors,l as linePaletteColors,q as palette,b as scaleModes,y as shapes,x as spacingAliases,g as spectrumColors,u as textTransformAliases,t as textVariants};
@@ -1,542 +0,0 @@
1
- import { Dispatch, SetStateAction } from 'react';
2
-
3
- declare const alwaysPalette: {
4
- white: string;
5
- black: string;
6
- transparent: string;
7
- };
8
-
9
- type PaletteType = keyof PaletteConfig;
10
- type PaletteValue = {
11
- hue: Hue;
12
- step: HueStep;
13
- opacity?: string;
14
- };
15
- type Palette = {
16
- [key in PaletteType]: keyof PaletteConfig[key];
17
- };
18
- type Hue = keyof SpectrumConfig;
19
- type HueStep = keyof HueStepSchema;
20
- type SpectrumColor = `${Hue}-${HueStep}`;
21
- type CorePalette = {
22
- accent: PaletteValue;
23
- alert: PaletteValue;
24
- brand: PaletteValue;
25
- positive: PaletteValue;
26
- warning: PaletteValue;
27
- };
28
- type CorePaletteAlias = keyof CorePalette;
29
- type BackgroundPalette = {
30
- primary: PaletteValue;
31
- secondary: PaletteValue;
32
- 'elevation-1': PaletteValue;
33
- 'elevation-2': PaletteValue;
34
- 'elevation-3': PaletteValue;
35
- 'elevation-3-inverse': PaletteValue;
36
- overlay: PaletteValue;
37
- };
38
- type BackgroundPaletteAlias = keyof BackgroundPalette;
39
- type BackgroundWashPalette = {
40
- 'accent-wash': PaletteValue;
41
- 'alert-wash': PaletteValue;
42
- 'brand-wash': PaletteValue;
43
- 'positive-wash': PaletteValue;
44
- 'warning-wash': PaletteValue;
45
- };
46
- type BackgroundWashPaletteAlias = keyof BackgroundWashPalette;
47
- type ForegroundPalette = {
48
- primary: PaletteValue;
49
- secondary: PaletteValue;
50
- tertiary: PaletteValue;
51
- muted: PaletteValue;
52
- 'on-color': PaletteValue;
53
- };
54
- type ForegroundPaletteAlias = keyof ForegroundPalette;
55
- type LinePalette = {
56
- primary: PaletteValue;
57
- secondary: PaletteValue;
58
- tertiary: PaletteValue;
59
- muted: PaletteValue;
60
- };
61
- type LinePaletteAlias = keyof LinePalette;
62
- type AlwaysPalette = typeof alwaysPalette;
63
- type AlwaysPaletteAlias = keyof AlwaysPalette;
64
- type ForegroundColor = CorePaletteAlias | ForegroundPaletteAlias | AlwaysPaletteAlias;
65
- type LineColor = CorePaletteAlias | LinePaletteAlias | AlwaysPaletteAlias;
66
- type BackgroundColor = CorePaletteAlias | BackgroundPaletteAlias | BackgroundWashPaletteAlias | AlwaysPaletteAlias;
67
- type FontFamily = 'icons' | 'sans' | 'sans-condensed' | 'serif-text' | 'serif-display';
68
- type FontWeight = 'thin' | 'extralight' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
69
- type FontWeightNumeric = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
70
- type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize';
71
- type LetterSpacing = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
72
- type TextVariant = 'display1' | 'title1' | 'title2' | 'title3' | 'title4' | 'headline1' | 'body1' | 'label1' | 'label2' | 'caption1' | 'caption2' | 'legal1';
73
- type ZIndex = 'auto' | '0' | '10' | '20' | '30' | '40' | '50';
74
- type TextConfig = {
75
- fontFamily: FontFamily;
76
- fontSize: FontSizeConfig;
77
- fontWeight: FontWeight;
78
- lineHeight: LineHeightConfig;
79
- textTransform?: TextTransform;
80
- letterSpacing?: LetterSpacing;
81
- };
82
- type TypographyConfig = {
83
- display1: TextConfig;
84
- title1: TextConfig;
85
- title2: TextConfig;
86
- title3: TextConfig;
87
- title4: TextConfig;
88
- headline1: TextConfig;
89
- body1: TextConfig;
90
- label1: TextConfig;
91
- label2: TextConfig;
92
- caption1: TextConfig;
93
- caption2: TextConfig;
94
- legal1: TextConfig;
95
- };
96
- type TextTransformConfig = {
97
- [k in TextVariant]: TextTransform;
98
- };
99
- type TextTransformAlias = keyof TextTransformConfig;
100
- type FontSizeConfig = {
101
- [k in TextVariant]: number;
102
- };
103
- type FontSizeAlias = keyof FontSizeConfig;
104
- type FontFamilyOptions = {
105
- fallbacks: Array<string>;
106
- };
107
- type FontFamilyConfig = {
108
- [k in FontFamily]?: FontFamilyOptions;
109
- };
110
- type FontFamilyAlias = keyof FontFamilyConfig;
111
- type FontWeightConfig = {
112
- display1: FontWeight;
113
- title1: FontWeight;
114
- title2: FontWeight;
115
- title3: FontWeight;
116
- title4: FontWeight;
117
- headline1: FontWeight;
118
- body1: FontWeight;
119
- label1: FontWeight;
120
- label2: FontWeight;
121
- caption1: FontWeight;
122
- caption2: FontWeight;
123
- legal1: FontWeight;
124
- };
125
- type FontWeightAlias = keyof FontWeightConfig;
126
- type FontWeightDescriptiveAlias = FontWeight;
127
- type FontWeightNumericAlias = FontWeightNumeric;
128
- type LineHeightConfig = {
129
- display1: number;
130
- title1: number;
131
- title2: number;
132
- title3: number;
133
- title4: number;
134
- headline1: number;
135
- body1: number;
136
- label1: number;
137
- label2: number;
138
- caption1: number;
139
- caption2: number;
140
- legal1: number;
141
- };
142
- type LineHeightAlias = keyof LineHeightConfig;
143
- type LetterSpacingAlias = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
144
- type LineClamp = '1' | '2' | '3' | '4' | '5' | '6';
145
- type AvatarSizeConfig = {
146
- s: number;
147
- m: number;
148
- l: number;
149
- };
150
- type AvatarSizeAlias = keyof AvatarSizeConfig;
151
- type IconSizeConfig = {
152
- s: number;
153
- m: number;
154
- l: number;
155
- };
156
- type IconSizeAlias = keyof IconSizeConfig;
157
- type AspectRatioConfig = {
158
- [k: string]: string;
159
- };
160
- type AspectRatioAlias = keyof AspectRatioConfig;
161
- type SpacingConfig = {
162
- '0': number;
163
- '1': number;
164
- '2': number;
165
- '3': number;
166
- '4': number;
167
- '5': number;
168
- '6': number;
169
- '7': number;
170
- '8': number;
171
- '9': number;
172
- '10': number;
173
- '11': number;
174
- '12': number;
175
- '13': number;
176
- '14': number;
177
- };
178
- type SpacingAlias = keyof SpacingConfig;
179
- type ZIndexConfig = {
180
- [k in ZIndex]?: string;
181
- };
182
- type ZIndexAlias = keyof ZIndexConfig;
183
- type ShapeConfig = {
184
- square: number;
185
- xs: number;
186
- s: number;
187
- m: number;
188
- l: number;
189
- xl: number;
190
- xxl: number;
191
- circle: number;
192
- };
193
- type ShapeAlias = keyof ShapeConfig;
194
- type Elevation = {
195
- color: string;
196
- offsetX: number;
197
- offsetY: number;
198
- blurRadius: number;
199
- spreadRadius: number;
200
- };
201
- type ElevationConfig = {
202
- '1': Array<Elevation>;
203
- '2': Array<Elevation>;
204
- '3': Array<Elevation>;
205
- };
206
- type ElevationAlias = keyof ElevationConfig;
207
- type BorderWidthConfig = {
208
- '1': number;
209
- '2': number;
210
- '4': number;
211
- '0': number;
212
- '8': number;
213
- };
214
- type BorderWidthAlias = keyof BorderWidthConfig;
215
- type BoxShadowConfig = {
216
- color: string;
217
- offsetX: number;
218
- offsetY: number;
219
- blurRadius: number;
220
- spreadRadius: number;
221
- };
222
- type OpacityAlias = '0' | '5' | '10' | '20' | '25' | '30' | '40' | '50' | '60' | '70' | '75' | '80' | '90' | '95' | '100';
223
- type RawColor = string;
224
- type HueStepSchema = {
225
- '1': RawColor;
226
- '2': RawColor;
227
- '3': RawColor;
228
- '4': RawColor;
229
- '5': RawColor;
230
- '6': RawColor;
231
- '7': RawColor;
232
- '8': RawColor;
233
- '9': RawColor;
234
- '10': RawColor;
235
- '11': RawColor;
236
- '12': RawColor;
237
- '13': RawColor;
238
- '14': RawColor;
239
- '15': RawColor;
240
- '16': RawColor;
241
- };
242
- type SpectrumConfig = {
243
- gray: HueStepSchema;
244
- purple: HueStepSchema;
245
- indigo: HueStepSchema;
246
- blue: HueStepSchema;
247
- cyan: HueStepSchema;
248
- teal: HueStepSchema;
249
- mint: HueStepSchema;
250
- green: HueStepSchema;
251
- lime: HueStepSchema;
252
- citron: HueStepSchema;
253
- yellow: HueStepSchema;
254
- brown: HueStepSchema;
255
- nude: HueStepSchema;
256
- orange: HueStepSchema;
257
- sunset: HueStepSchema;
258
- red: HueStepSchema;
259
- rose: HueStepSchema;
260
- pink: HueStepSchema;
261
- magenta: HueStepSchema;
262
- };
263
- type PaletteConfig = {
264
- core: CorePalette;
265
- background: BackgroundPalette;
266
- backgroundWash: BackgroundWashPalette;
267
- foreground: ForegroundPalette;
268
- line: LinePalette;
269
- };
270
- type ColorsConfig = {
271
- palette: PaletteConfig;
272
- spectrum: SpectrumConfig;
273
- };
274
- type ScaleConfig = {
275
- avatarSizes: AvatarSizeConfig;
276
- iconSizes: IconSizeConfig;
277
- spacing: SpacingConfig;
278
- shapes: ShapeConfig;
279
- fontSize: FontSizeConfig;
280
- fontWeight: FontWeightConfig;
281
- lineHeight: LineHeightConfig;
282
- textTransform: TextTransformConfig;
283
- };
284
- type ScaleModeConfig = {
285
- xSmall: ScaleConfig;
286
- small: ScaleConfig;
287
- medium: ScaleConfig;
288
- large: ScaleConfig;
289
- xLarge: ScaleConfig;
290
- xxLarge: ScaleConfig;
291
- xxxLarge: ScaleConfig;
292
- };
293
- type UniversalTokensConfig = {
294
- colorMode: ColorModeConfig;
295
- scaleMode: ScaleModeConfig;
296
- aspectRatio: AspectRatioConfig;
297
- fontFamily: FontFamilyConfig;
298
- elevation: ElevationConfig;
299
- borderWidth: BorderWidthConfig;
300
- zIndex: ZIndexConfig;
301
- };
302
- type PlatformMode = 'web' | 'ios' | 'android';
303
- type ColorModeConfig = {
304
- light: ColorsConfig;
305
- dark: ColorsConfig;
306
- };
307
- type ColorMode = keyof ColorModeConfig;
308
- type ScaleMode = keyof ScaleModeConfig;
309
- type Modes = {
310
- colorMode: ColorMode;
311
- scaleMode: ScaleMode;
312
- };
313
- type Animation = 'none' | 'spin' | 'ping' | 'pulse' | 'bounce' | 'accordion-down' | 'accordion-up';
314
- type TransitionDelay = '0' | '75' | '100' | '150' | '200' | '300' | '500' | '700' | '1000';
315
- type TransitionDuration = '0' | '75' | '100' | '150' | '200' | '300' | '500' | '700' | '1000';
316
- type TransitionTiming = 'linear' | 'in' | 'out' | 'in-out';
317
- type AriaAttribute = 'busy' | 'checked' | 'disabled' | 'expanded' | 'hidden' | 'pressed' | 'readonly' | 'required' | 'selected' | 'invalid';
318
- type DataAttribute = 'active' | 'active-item' | 'autofill' | 'backdrop' | 'enter' | 'leave' | 'focus-visible';
319
- type Flex = '1' | 'auto' | 'initial' | 'none';
320
- type FlexGrow = '0' | '1';
321
- type FlexShrink = '0' | '1';
322
- type FlexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around';
323
- type FlexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
324
- type FlexAlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
325
- type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
326
- type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
327
- type FlexJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
328
- type FlexBasis = 'min-content';
329
- type Height = 'auto' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | 'full' | 'screen' | 'min' | 'max' | 'fit';
330
- type MaxHeight = 'none' | 'full' | 'screen' | 'min' | 'max' | 'fit';
331
- type MaxWidth = 'none' | 'full' | 'min' | 'max' | 'fit';
332
- type MinHeight = 'full' | 'min' | 'max' | 'fit' | 'screen';
333
- type MinWidth = 'full' | 'min' | 'max' | 'fit';
334
- type Width = 'auto' | 'full' | 'screen' | 'min' | 'max' | 'fit' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12';
335
- type Display = 'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex' | 'table' | 'inline-table' | 'table-caption' | 'table-cell' | 'table-column' | 'table-column-group' | 'table-footer-group' | 'table-header-group' | 'table-row-group' | 'table-row' | 'flow-root' | 'grid';
336
- type Overflow = 'auto' | 'hidden' | 'clip' | 'visible' | 'scroll';
337
- type Position = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
338
- type AnyObject = Record<string, unknown>;
339
- type SetState<T> = Dispatch<SetStateAction<T>>;
340
- type ImageStyleProps = {
341
- /**
342
- * Determines how the image should be resized to fit its container.
343
- */
344
- objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
345
- };
346
- interface BorderStyleProps {
347
- /** Add a border around all sides of the box. */
348
- bordered?: boolean;
349
- /** Add a border to the top side of the box. */
350
- borderedTop?: boolean;
351
- /** Add a border to the bottom side of the box. */
352
- borderedBottom?: boolean;
353
- /** Add a border to the leading side of the box. */
354
- borderedStart?: boolean;
355
- /** Add a border to the trailing side of the box. */
356
- borderedEnd?: boolean;
357
- /** Add a border to the leading and trailing sides of the box. */
358
- borderedHorizontal?: boolean;
359
- /** Add a border to the top and bottom sides of the box. */
360
- borderedVertical?: boolean;
361
- /** Add a border radius to all corners of the box. */
362
- borderRadius?: ShapeAlias;
363
- /** Add a border radius to top left corner of the box. */
364
- borderTopStartRadius?: ShapeAlias;
365
- /** Add a border radius to top right corner of the box. */
366
- borderTopEndRadius?: ShapeAlias;
367
- /** Add a border radius to bottom left corner of the box. */
368
- borderBottomStartRadius?: ShapeAlias;
369
- /** Add a border radius to bottom right corner of the box. */
370
- borderBottomEndRadius?: ShapeAlias;
371
- /** Adds a custom border color from the palette */
372
- borderColor?: LineColor;
373
- /** Utility for controlling an element's background color on active. */
374
- borderColorOnActive?: LineColor;
375
- /** Utility for controlling an element's border color on focus. */
376
- borderColorOnFocus?: LineColor;
377
- /** Utility for controlling an element's border color on checked. */
378
- borderColorOnChecked?: LineColor;
379
- /** Utility for controlling an element's border color on hover. */
380
- borderColorOnHover?: LineColor;
381
- /** Adds a custom border color from the palette */
382
- borderStartColor?: LineColor;
383
- /** Adds a custom border color from the palette */
384
- borderEndColor?: LineColor;
385
- /** Adds a custom border color from the palette */
386
- borderTopColor?: LineColor;
387
- /** Adds a custom border color from the palette */
388
- borderBottomColor?: LineColor;
389
- borderWidth?: BorderWidthAlias;
390
- borderVerticalWidth?: BorderWidthAlias;
391
- borderHorizontalWidth?: BorderWidthAlias;
392
- borderStartWidth?: BorderWidthAlias;
393
- borderEndWidth?: BorderWidthAlias;
394
- borderTopWidth?: BorderWidthAlias;
395
- borderBottomWidth?: BorderWidthAlias;
396
- }
397
- interface LayoutStyleProps {
398
- display?: Display;
399
- zIndex?: ZIndexAlias;
400
- overflow?: Overflow;
401
- overflowX?: Overflow;
402
- overflowY?: Overflow;
403
- position?: Position;
404
- }
405
- interface SpacingStyleProps {
406
- /** Apply inner spacing on all sides. */
407
- spacing?: SpacingAlias;
408
- /** Apply inner spacing on the leading and trailing sides. */
409
- spacingHorizontal?: SpacingAlias;
410
- /** Apply inner spacing on the top and bottom sides. */
411
- spacingVertical?: SpacingAlias;
412
- /** Apply inner spacing on the bottom side. */
413
- spacingBottom?: SpacingAlias;
414
- /** Apply inner spacing on the trailing side. */
415
- spacingEnd?: SpacingAlias;
416
- /** Apply inner spacing on the leading side. */
417
- spacingStart?: SpacingAlias;
418
- /** Apply inner spacing on the top side. */
419
- spacingTop?: SpacingAlias;
420
- /** Apply negative outer spacing on all sides. */
421
- offset?: SpacingAlias;
422
- /** Apply negative outer spacing on the top and bottom sides. */
423
- offsetVertical?: SpacingAlias;
424
- /** Apply negative outer spacing on the leading and trailing sides. */
425
- offsetHorizontal?: SpacingAlias;
426
- /** Apply negative outer spacing on the bottom side. */
427
- offsetBottom?: SpacingAlias;
428
- /** Apply negative outer spacing on the trailing side. */
429
- offsetEnd?: SpacingAlias;
430
- /** Apply negative outer spacing on the leading side. */
431
- offsetStart?: SpacingAlias;
432
- /** Apply negative outer spacing on the top side. */
433
- offsetTop?: SpacingAlias;
434
- /** Control the horizontal gutters between grid and flexbox items. */
435
- columnGap?: SpacingAlias;
436
- /** Control the vertical gutters between grid and flexbox items. */
437
- rowGap?: SpacingAlias;
438
- }
439
- interface FlexStyleProps {
440
- alignContent?: FlexAlignContent;
441
- alignItems?: FlexAlignItems;
442
- alignSelf?: FlexAlignSelf;
443
- flex?: Flex;
444
- flexDirection?: FlexDirection;
445
- flexGrow?: FlexGrow;
446
- flexShrink?: FlexShrink;
447
- flexWrap?: FlexWrap;
448
- justifyContent?: FlexJustifyContent;
449
- /**
450
- * @web Sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
451
- * @web-link https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
452
- * @native An axis-independent way of providing the default size of an item along the main axis. Setting the flex basis of a child is similar to setting the width of that child if its parent is a container with flex direction: row or setting the height of a child if its parent is a container with flex direction: column. The flex basis of an item is the default size of that item, the size of the item before any flex grow and flex shrink calculations are performed.
453
- * @native-link https://yogalayout.com/docs/flex/
454
- */
455
- flexBasis?: FlexBasis;
456
- }
457
- interface OpacityStyleProps {
458
- opacity?: OpacityAlias;
459
- }
460
- interface SizingStyleProps {
461
- height?: Height;
462
- minHeight?: MinHeight;
463
- maxHeight?: MaxHeight;
464
- width?: Width;
465
- minWidth?: MinWidth;
466
- maxWidth?: MaxWidth;
467
- }
468
- interface StateStyleProps {
469
- interactable?: boolean;
470
- focusable?: boolean;
471
- }
472
- interface TextStyleProps {
473
- color?: ForegroundColor;
474
- colorChecked?: ForegroundColor;
475
- fontFamily?: FontFamilyAlias;
476
- fontSize?: FontSizeAlias;
477
- fontWeight?: FontWeightAlias;
478
- lineHeight?: LineHeightAlias;
479
- textAlign?: 'center' | 'justify' | 'start' | 'end';
480
- textTransform?: TextTransformAlias;
481
- }
482
- interface BackgroundStyleProps {
483
- /** Utility for controlling the opacity of an element's background color. */
484
- backgroundColorOpacity?: OpacityAlias;
485
- /** Utility for controlling an element's background color. */
486
- backgroundColor?: BackgroundColor;
487
- /** Utility for controlling an element's background color on active. */
488
- backgroundColorOnActive?: BackgroundColor;
489
- /** Utility for controlling an element's background color on focus. */
490
- backgroundColorOnFocus?: BackgroundColor;
491
- /** Utility for controlling an element's background color on checked. */
492
- backgroundColorOnChecked?: BackgroundColor;
493
- /** Utility for controlling an element's background color on hover. */
494
- backgroundColorOnHover?: BackgroundColor;
495
- /** Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. */
496
- elevation?: ElevationAlias;
497
- }
498
- type CustomSizingStyleProps = {
499
- iconSize?: IconSizeAlias;
500
- avatarSize?: AvatarSizeAlias;
501
- };
502
- type StyleProps = BackgroundStyleProps & BorderStyleProps & LayoutStyleProps & FlexStyleProps & SpacingStyleProps & TextStyleProps & OpacityStyleProps & SizingStyleProps & ImageStyleProps & CustomSizingStyleProps;
503
- interface UniversalBoxProps extends React.PropsWithChildren, BackgroundStyleProps, BorderStyleProps, FlexStyleProps, LayoutStyleProps, OpacityStyleProps, SizingStyleProps, SpacingStyleProps {
504
- /**
505
- * When asChild is set to true, the component's child will be cloned and passed
506
- * the props and behavior required to make it functional.
507
- */
508
- asChild?: boolean;
509
- }
510
- interface UniversalStackProps extends Omit<UniversalBoxProps, 'flexDirection'> {
511
- gap?: SpacingAlias;
512
- }
513
- interface UniversalTextProps extends React.PropsWithChildren, TextStyleProps, OpacityStyleProps, SpacingStyleProps, SizingStyleProps, FlexStyleProps, BorderStyleProps {
514
- /**
515
- * When asChild is set to true, Text will not render the default p tag, instead cloning the Text's
516
- * child and passing it the props and behavior required to make it functional.
517
- */
518
- asChild?: boolean;
519
- }
520
- interface UniversalPressableProps extends UniversalBoxProps {
521
- }
522
- type ButtonVariant = CorePaletteAlias | `${CorePaletteAlias}-outline` | `${CorePaletteAlias}-ghost` | `${CorePaletteAlias}-wash`;
523
- type ButtonSize = 's' | 'm' | 'l';
524
- interface UniversalButtonProps extends UniversalPressableProps {
525
- /** Styling variant for the button. */
526
- variant: ButtonVariant;
527
- /** Size for the button. */
528
- size: ButtonSize;
529
- }
530
- interface UniversalImageProps extends UniversalBoxProps, ImageStyleProps {
531
- /** Source for the image. */
532
- src: string;
533
- /** Alt text for the image. */
534
- alt: string;
535
- }
536
- interface UniversalAvatarProps extends UniversalImageProps {
537
- /** Size for the avatar. */
538
- size?: AvatarSizeAlias;
539
- shape?: ShapeAlias;
540
- }
541
-
542
- export type { FontWeightConfig as $, AlwaysPaletteAlias as A, BackgroundPaletteAlias as B, ColorMode as C, AnyObject as D, ElevationAlias as E, ForegroundPaletteAlias as F, AriaAttribute as G, Hue as H, AspectRatioAlias as I, AspectRatioConfig as J, AvatarSizeConfig as K, LinePaletteAlias as L, BackgroundColor as M, BackgroundStyleProps as N, BorderStyleProps as O, BorderWidthConfig as P, BoxShadowConfig as Q, ColorsConfig as R, ScaleMode as S, TextVariant as T, UniversalAvatarProps as U, DataAttribute as V, ElevationConfig as W, FlexStyleProps as X, FontFamilyConfig as Y, FontSizeAlias as Z, FontSizeConfig as _, HueStep as a, FontWeightDescriptiveAlias as a0, FontWeightNumericAlias as a1, ForegroundColor as a2, IconSizeAlias as a3, IconSizeConfig as a4, LayoutStyleProps as a5, LetterSpacingAlias as a6, LineClamp as a7, LineColor as a8, LineHeightAlias as a9, UniversalImageProps as aA, ZIndexAlias as aB, ZIndexConfig as aC, LineHeightConfig as aa, Modes as ab, OpacityAlias as ac, OpacityStyleProps as ad, Palette as ae, PaletteConfig as af, PaletteType as ag, PaletteValue as ah, PlatformMode as ai, ScaleConfig as aj, ScaleModeConfig as ak, SetState as al, ShapeConfig as am, SizingStyleProps as an, SpacingConfig as ao, SpacingStyleProps as ap, SpectrumConfig as aq, StateStyleProps as ar, StyleProps as as, TextConfig as at, TextStyleProps as au, TextTransformConfig as av, TransitionDelay as aw, TransitionDuration as ax, TransitionTiming as ay, TypographyConfig as az, SpectrumColor as b, CorePaletteAlias as c, BackgroundWashPaletteAlias as d, CorePalette as e, BackgroundPalette as f, BackgroundWashPalette as g, ForegroundPalette as h, LinePalette as i, FontFamilyAlias as j, FontWeightAlias as k, TextTransformAlias as l, BorderWidthAlias as m, SpacingAlias as n, ShapeAlias as o, AvatarSizeAlias as p, ButtonVariant as q, ButtonSize as r, UniversalBoxProps as s, UniversalPressableProps as t, UniversalButtonProps as u, UniversalStackProps as v, UniversalTextProps as w, UniversalTokensConfig as x, AlwaysPalette as y, Animation as z };