@oaknational/oak-components 2.30.0 → 2.31.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/dist/cjs/index.js +3 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +3 -3
- package/dist/esm/index.js.map +1 -1
- package/dist/types.d.ts +112 -94
- package/package.json +1 -1
package/dist/types.d.ts
CHANGED
|
@@ -127,6 +127,107 @@ type Generic = string | number | undefined | null;
|
|
|
127
127
|
*/
|
|
128
128
|
declare const responsiveStyle: <Props, T extends Generic>(attr: string, getValues: (props: Props) => ResponsiveValues<T | undefined | null>, parse?: ((unparsed: T | undefined | null) => Generic) | ((unparsed: T | undefined | null) => (props: PropsWithTheme) => Generic)) => (props: Props) => Interpolation<ThemedStyledProps<Props, DefaultTheme>>;
|
|
129
129
|
|
|
130
|
+
declare const oakAllSpacingTokens: {
|
|
131
|
+
"spacing-0": number;
|
|
132
|
+
"spacing-2": number;
|
|
133
|
+
"spacing-4": number;
|
|
134
|
+
"spacing-8": number;
|
|
135
|
+
"spacing-12": number;
|
|
136
|
+
"spacing-16": number;
|
|
137
|
+
"spacing-20": number;
|
|
138
|
+
"spacing-24": number;
|
|
139
|
+
"spacing-32": number;
|
|
140
|
+
"spacing-40": number;
|
|
141
|
+
"spacing-48": number;
|
|
142
|
+
"spacing-56": number;
|
|
143
|
+
"spacing-64": number;
|
|
144
|
+
"spacing-72": number;
|
|
145
|
+
"spacing-80": number;
|
|
146
|
+
"spacing-92": number;
|
|
147
|
+
"spacing-100": number;
|
|
148
|
+
"spacing-120": number;
|
|
149
|
+
"spacing-160": number;
|
|
150
|
+
"spacing-180": number;
|
|
151
|
+
"spacing-240": number;
|
|
152
|
+
"spacing-360": number;
|
|
153
|
+
"spacing-480": number;
|
|
154
|
+
"spacing-640": number;
|
|
155
|
+
"spacing-960": number;
|
|
156
|
+
"spacing-1280": number;
|
|
157
|
+
"spacing-1360": number;
|
|
158
|
+
};
|
|
159
|
+
type OakAllSpacingToken = keyof typeof oakAllSpacingTokens;
|
|
160
|
+
declare const oakInnerPaddingTokens: {
|
|
161
|
+
"spacing-0": string;
|
|
162
|
+
"spacing-2": string;
|
|
163
|
+
"spacing-4": string;
|
|
164
|
+
"spacing-8": string;
|
|
165
|
+
"spacing-12": string;
|
|
166
|
+
"spacing-16": string;
|
|
167
|
+
"spacing-20": string;
|
|
168
|
+
"spacing-24": string;
|
|
169
|
+
"spacing-32": string;
|
|
170
|
+
"spacing-40": string;
|
|
171
|
+
"spacing-48": string;
|
|
172
|
+
"spacing-56": string;
|
|
173
|
+
"spacing-64": string;
|
|
174
|
+
"spacing-72": string;
|
|
175
|
+
"spacing-80": string;
|
|
176
|
+
};
|
|
177
|
+
type OakInnerPaddingToken = keyof typeof oakInnerPaddingTokens;
|
|
178
|
+
declare const oakSpaceBetweenTokens: {
|
|
179
|
+
"spacing-0": string;
|
|
180
|
+
"spacing-2": string;
|
|
181
|
+
"spacing-4": string;
|
|
182
|
+
"spacing-8": string;
|
|
183
|
+
"spacing-12": string;
|
|
184
|
+
"spacing-16": string;
|
|
185
|
+
"spacing-20": string;
|
|
186
|
+
"spacing-24": string;
|
|
187
|
+
"spacing-32": string;
|
|
188
|
+
"spacing-40": string;
|
|
189
|
+
"spacing-48": string;
|
|
190
|
+
"spacing-56": string;
|
|
191
|
+
"spacing-64": string;
|
|
192
|
+
"spacing-72": string;
|
|
193
|
+
"spacing-80": string;
|
|
194
|
+
};
|
|
195
|
+
type OakSpaceBetweenToken = keyof typeof oakSpaceBetweenTokens;
|
|
196
|
+
declare const additionalSpacingTokens: {
|
|
197
|
+
"100%": string;
|
|
198
|
+
"-50%": string;
|
|
199
|
+
"50%": string;
|
|
200
|
+
0: string;
|
|
201
|
+
"100vh": string;
|
|
202
|
+
"100vw": string;
|
|
203
|
+
auto: string;
|
|
204
|
+
"fit-content": string;
|
|
205
|
+
"max-content": string;
|
|
206
|
+
"min-content": string;
|
|
207
|
+
inherit: string;
|
|
208
|
+
initial: string;
|
|
209
|
+
unset: string;
|
|
210
|
+
};
|
|
211
|
+
type AdditionalSpacingTypes = keyof typeof additionalSpacingTokens;
|
|
212
|
+
type OakCombinedSpacingToken = OakAllSpacingToken | OakInnerPaddingToken | OakSpaceBetweenToken | AdditionalSpacingTypes;
|
|
213
|
+
|
|
214
|
+
type ScrollMarginValue = OakAllSpacingToken | null | undefined;
|
|
215
|
+
type ScrollMarginValues = ResponsiveValues<ScrollMarginValue>;
|
|
216
|
+
type ScrollSnapStyleProps = {
|
|
217
|
+
/**
|
|
218
|
+
* Applies `scroll-margin-top` to the element
|
|
219
|
+
*
|
|
220
|
+
* Accepts any Oak spacing token or a responsive array of spacing tokens. Can be nulled.
|
|
221
|
+
*/
|
|
222
|
+
$scrollMarginTop?: ScrollMarginValues;
|
|
223
|
+
/**
|
|
224
|
+
* Applies `scroll-margin-left` to the element
|
|
225
|
+
*
|
|
226
|
+
* Accepts any Oak spacing token or a responsive array of spacing tokens. Can be nulled.
|
|
227
|
+
*/
|
|
228
|
+
$scrollMarginLeft?: ScrollMarginValues;
|
|
229
|
+
};
|
|
230
|
+
|
|
130
231
|
declare const oakZIndexTokens: {
|
|
131
232
|
readonly behind: -1;
|
|
132
233
|
readonly neutral: 0;
|
|
@@ -358,90 +459,6 @@ type ColorStyleProps = {
|
|
|
358
459
|
$background?: ColorToken;
|
|
359
460
|
};
|
|
360
461
|
|
|
361
|
-
declare const oakAllSpacingTokens: {
|
|
362
|
-
"spacing-0": number;
|
|
363
|
-
"spacing-2": number;
|
|
364
|
-
"spacing-4": number;
|
|
365
|
-
"spacing-8": number;
|
|
366
|
-
"spacing-12": number;
|
|
367
|
-
"spacing-16": number;
|
|
368
|
-
"spacing-20": number;
|
|
369
|
-
"spacing-24": number;
|
|
370
|
-
"spacing-32": number;
|
|
371
|
-
"spacing-40": number;
|
|
372
|
-
"spacing-48": number;
|
|
373
|
-
"spacing-56": number;
|
|
374
|
-
"spacing-64": number;
|
|
375
|
-
"spacing-72": number;
|
|
376
|
-
"spacing-80": number;
|
|
377
|
-
"spacing-92": number;
|
|
378
|
-
"spacing-100": number;
|
|
379
|
-
"spacing-120": number;
|
|
380
|
-
"spacing-160": number;
|
|
381
|
-
"spacing-180": number;
|
|
382
|
-
"spacing-240": number;
|
|
383
|
-
"spacing-360": number;
|
|
384
|
-
"spacing-480": number;
|
|
385
|
-
"spacing-640": number;
|
|
386
|
-
"spacing-960": number;
|
|
387
|
-
"spacing-1280": number;
|
|
388
|
-
"spacing-1360": number;
|
|
389
|
-
};
|
|
390
|
-
type OakAllSpacingToken = keyof typeof oakAllSpacingTokens;
|
|
391
|
-
declare const oakInnerPaddingTokens: {
|
|
392
|
-
"spacing-0": string;
|
|
393
|
-
"spacing-2": string;
|
|
394
|
-
"spacing-4": string;
|
|
395
|
-
"spacing-8": string;
|
|
396
|
-
"spacing-12": string;
|
|
397
|
-
"spacing-16": string;
|
|
398
|
-
"spacing-20": string;
|
|
399
|
-
"spacing-24": string;
|
|
400
|
-
"spacing-32": string;
|
|
401
|
-
"spacing-40": string;
|
|
402
|
-
"spacing-48": string;
|
|
403
|
-
"spacing-56": string;
|
|
404
|
-
"spacing-64": string;
|
|
405
|
-
"spacing-72": string;
|
|
406
|
-
"spacing-80": string;
|
|
407
|
-
};
|
|
408
|
-
type OakInnerPaddingToken = keyof typeof oakInnerPaddingTokens;
|
|
409
|
-
declare const oakSpaceBetweenTokens: {
|
|
410
|
-
"spacing-0": string;
|
|
411
|
-
"spacing-2": string;
|
|
412
|
-
"spacing-4": string;
|
|
413
|
-
"spacing-8": string;
|
|
414
|
-
"spacing-12": string;
|
|
415
|
-
"spacing-16": string;
|
|
416
|
-
"spacing-20": string;
|
|
417
|
-
"spacing-24": string;
|
|
418
|
-
"spacing-32": string;
|
|
419
|
-
"spacing-40": string;
|
|
420
|
-
"spacing-48": string;
|
|
421
|
-
"spacing-56": string;
|
|
422
|
-
"spacing-64": string;
|
|
423
|
-
"spacing-72": string;
|
|
424
|
-
"spacing-80": string;
|
|
425
|
-
};
|
|
426
|
-
type OakSpaceBetweenToken = keyof typeof oakSpaceBetweenTokens;
|
|
427
|
-
declare const additionalSpacingTokens: {
|
|
428
|
-
"100%": string;
|
|
429
|
-
"-50%": string;
|
|
430
|
-
"50%": string;
|
|
431
|
-
0: string;
|
|
432
|
-
"100vh": string;
|
|
433
|
-
"100vw": string;
|
|
434
|
-
auto: string;
|
|
435
|
-
"fit-content": string;
|
|
436
|
-
"max-content": string;
|
|
437
|
-
"min-content": string;
|
|
438
|
-
inherit: string;
|
|
439
|
-
initial: string;
|
|
440
|
-
unset: string;
|
|
441
|
-
};
|
|
442
|
-
type AdditionalSpacingTypes = keyof typeof additionalSpacingTokens;
|
|
443
|
-
type OakCombinedSpacingToken = OakAllSpacingToken | OakInnerPaddingToken | OakSpaceBetweenToken | AdditionalSpacingTypes;
|
|
444
|
-
|
|
445
462
|
type PaddingValues = ResponsiveValues<OakInnerPaddingToken | null | undefined>;
|
|
446
463
|
type PaddingStyleProps = {
|
|
447
464
|
/**
|
|
@@ -1063,7 +1080,7 @@ type HTMLProps$1 = {
|
|
|
1063
1080
|
};
|
|
1064
1081
|
type OakBoxProps = {
|
|
1065
1082
|
children?: React.ReactNode;
|
|
1066
|
-
} & PositionStyleProps & SizeStyleProps & SpacingStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & HTMLProps$1;
|
|
1083
|
+
} & PositionStyleProps & SizeStyleProps & SpacingStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & HTMLProps$1 & ScrollSnapStyleProps;
|
|
1067
1084
|
declare const oakBoxCss: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<OakBoxProps, styled_components.DefaultTheme>>;
|
|
1068
1085
|
/**
|
|
1069
1086
|
* OakBox exposes all the styles that are available styles on a div tag. These include:
|
|
@@ -1079,6 +1096,7 @@ declare const oakBoxCss: styled_components.FlattenInterpolation<styled_component
|
|
|
1079
1096
|
* - transition
|
|
1080
1097
|
* - transform
|
|
1081
1098
|
* - drop-shadow
|
|
1099
|
+
* - scroll-margin-top/left
|
|
1082
1100
|
*
|
|
1083
1101
|
*/
|
|
1084
1102
|
declare const OakBox: styled_components.StyledComponent<"div", styled_components.DefaultTheme, OakBoxProps, never>;
|
|
@@ -2309,7 +2327,7 @@ declare const OakRadioButton: React__default.ForwardRefExoticComponent<{
|
|
|
2309
2327
|
children?: React__default.ReactNode;
|
|
2310
2328
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2311
2329
|
onClick?: React__default.MouseEventHandler;
|
|
2312
|
-
} & {
|
|
2330
|
+
} & ScrollSnapStyleProps & {
|
|
2313
2331
|
$labelAlignItems?: FlexStyleProps["$alignItems"];
|
|
2314
2332
|
$labelGap?: FlexStyleProps["$gap"];
|
|
2315
2333
|
disabled?: boolean;
|
|
@@ -2371,7 +2389,7 @@ declare const IconUp: styled_components.StyledComponent<"div", styled_components
|
|
|
2371
2389
|
children?: React__default.ReactNode;
|
|
2372
2390
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2373
2391
|
onClick?: React__default.MouseEventHandler;
|
|
2374
|
-
} & {
|
|
2392
|
+
} & ScrollSnapStyleProps & {
|
|
2375
2393
|
$flexDirection?: ResponsiveValues<React__default.CSSProperties["flexDirection"]>;
|
|
2376
2394
|
$flexWrap?: ResponsiveValues<React__default.CSSProperties["flexWrap"]>;
|
|
2377
2395
|
$alignItems?: ResponsiveValues<React__default.CSSProperties["alignItems"]>;
|
|
@@ -2391,7 +2409,7 @@ declare const IconDown: styled_components.StyledComponent<"div", styled_componen
|
|
|
2391
2409
|
children?: React__default.ReactNode;
|
|
2392
2410
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2393
2411
|
onClick?: React__default.MouseEventHandler;
|
|
2394
|
-
} & {
|
|
2412
|
+
} & ScrollSnapStyleProps & {
|
|
2395
2413
|
$flexDirection?: ResponsiveValues<React__default.CSSProperties["flexDirection"]>;
|
|
2396
2414
|
$flexWrap?: ResponsiveValues<React__default.CSSProperties["flexWrap"]>;
|
|
2397
2415
|
$alignItems?: ResponsiveValues<React__default.CSSProperties["alignItems"]>;
|
|
@@ -2727,7 +2745,7 @@ declare const OakFlex: styled_components.StyledComponent<"div", styled_component
|
|
|
2727
2745
|
children?: React.ReactNode;
|
|
2728
2746
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2729
2747
|
onClick?: React$1.MouseEventHandler;
|
|
2730
|
-
} & {
|
|
2748
|
+
} & ScrollSnapStyleProps & {
|
|
2731
2749
|
$flexDirection?: ResponsiveValues<React$1.CSSProperties["flexDirection"]>;
|
|
2732
2750
|
$flexWrap?: ResponsiveValues<React$1.CSSProperties["flexWrap"]>;
|
|
2733
2751
|
$alignItems?: ResponsiveValues<React$1.CSSProperties["alignItems"]>;
|
|
@@ -2791,7 +2809,7 @@ declare const OakGrid: styled_components.StyledComponent<"div", styled_component
|
|
|
2791
2809
|
children?: React.ReactNode;
|
|
2792
2810
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2793
2811
|
onClick?: React$1.MouseEventHandler;
|
|
2794
|
-
} & {
|
|
2812
|
+
} & ScrollSnapStyleProps & {
|
|
2795
2813
|
/**
|
|
2796
2814
|
* Applies `row-gap` to the grid
|
|
2797
2815
|
*
|
|
@@ -2881,7 +2899,7 @@ declare const OakGridArea: styled_components.StyledComponent<"div", styled_compo
|
|
|
2881
2899
|
children?: React.ReactNode;
|
|
2882
2900
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2883
2901
|
onClick?: React$1.MouseEventHandler;
|
|
2884
|
-
} & {
|
|
2902
|
+
} & ScrollSnapStyleProps & {
|
|
2885
2903
|
$flexDirection?: ResponsiveValues<React$1.CSSProperties["flexDirection"]>;
|
|
2886
2904
|
$flexWrap?: ResponsiveValues<React$1.CSSProperties["flexWrap"]>;
|
|
2887
2905
|
$alignItems?: ResponsiveValues<React$1.CSSProperties["alignItems"]>;
|
|
@@ -2946,7 +2964,7 @@ declare const OakMaxWidth: styled_components.StyledComponent<"div", styled_compo
|
|
|
2946
2964
|
children?: React.ReactNode;
|
|
2947
2965
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
2948
2966
|
onClick?: React$1.MouseEventHandler;
|
|
2949
|
-
} & {
|
|
2967
|
+
} & ScrollSnapStyleProps & {
|
|
2950
2968
|
$flexDirection?: ResponsiveValues<React$1.CSSProperties["flexDirection"]>;
|
|
2951
2969
|
$flexWrap?: ResponsiveValues<React$1.CSSProperties["flexWrap"]>;
|
|
2952
2970
|
$alignItems?: ResponsiveValues<React$1.CSSProperties["alignItems"]>;
|
|
@@ -3358,7 +3376,7 @@ declare const OakFocusIndicator: styled_components.StyledComponent<"div", styled
|
|
|
3358
3376
|
children?: React.ReactNode;
|
|
3359
3377
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
3360
3378
|
onClick?: React$1.MouseEventHandler;
|
|
3361
|
-
} & OakFocusIndicatorProps, never>;
|
|
3379
|
+
} & ScrollSnapStyleProps & OakFocusIndicatorProps, never>;
|
|
3362
3380
|
|
|
3363
3381
|
type InternalStyledSvgProps = {
|
|
3364
3382
|
$fill?: ResponsiveValues<OakUiRoleToken>;
|
|
@@ -5335,7 +5353,7 @@ declare const OakTypography: styled_components.StyledComponent<"div", styled_com
|
|
|
5335
5353
|
children?: React.ReactNode;
|
|
5336
5354
|
} & PositionStyleProps & SizeStyleProps & PaddingStyleProps & MarginStyleProps & ColorStyleProps & BorderStyleProps & DisplayStyleProps & DropShadowStyleProps & OpacityStyleProps & TransformStyleProps & TransitionStyleProps & TypographyStyleProps & ZIndexStyleProps & {
|
|
5337
5355
|
onClick?: React$1.MouseEventHandler;
|
|
5338
|
-
}, never>;
|
|
5356
|
+
} & ScrollSnapStyleProps, never>;
|
|
5339
5357
|
|
|
5340
5358
|
type OakULProps = OakBoxProps & OakFlexProps & {
|
|
5341
5359
|
$reset?: boolean;
|