@vygruppen/spor-react 9.7.0 → 9.8.1
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/.turbo/turbo-build.log +9 -9
- package/CHANGELOG.md +16 -0
- package/dist/{CountryCodeSelect-FPOWUHQG.mjs → CountryCodeSelect-FODJ4ZSF.mjs} +1 -1
- package/dist/{chunk-QGMF2EAE.mjs → chunk-S335RZ6M.mjs} +47 -145
- package/dist/index.d.mts +144 -686
- package/dist/index.d.ts +144 -686
- package/dist/index.js +55 -154
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/card/Card.tsx +7 -0
- package/src/card/index.tsx +0 -2
- package/src/layout/PressableCard.tsx +54 -0
- package/src/layout/RadioCard.tsx +1 -0
- package/src/layout/RadioCardGroup.tsx +9 -0
- package/src/layout/StaticCard.tsx +77 -0
- package/src/layout/index.tsx +2 -0
- package/src/theme/components/pressable-card.ts +13 -131
- package/src/theme/components/static-card.ts +2 -12
- package/src/theme/utils/base-utils.ts +8 -1
- package/src/card/PressableCard.tsx +0 -52
- package/src/card/StaticCard.tsx +0 -25
package/dist/index.d.ts
CHANGED
@@ -67,6 +67,7 @@ declare const Stack: _chakra_ui_system_dist_system_types.ComponentWithAs<"div",
|
|
67
67
|
|
68
68
|
type RadioCardProps = UseRadioProps & BoxProps & {
|
69
69
|
children: React.ReactNode;
|
70
|
+
/** Defaults to "base" */
|
70
71
|
variant: "floating" | "base";
|
71
72
|
};
|
72
73
|
/**
|
@@ -116,7 +117,16 @@ declare const RadioCard: _chakra_ui_system_dist_system_types.ComponentWithAs<"di
|
|
116
117
|
type RadioCardGroupProps = RadioGroupProps$1 & {
|
117
118
|
children: React.ReactNode;
|
118
119
|
props?: RadioGroupProps$1;
|
120
|
+
/** Defaults to "row" */
|
119
121
|
direction?: StackDirection;
|
122
|
+
/** Defaults to "base" */
|
123
|
+
variant?: string;
|
124
|
+
/** The name of the radio group */
|
125
|
+
name?: string;
|
126
|
+
/** The default value of the radio group */
|
127
|
+
defaultValue?: string;
|
128
|
+
/** The callback function to be called when the radio group value changes */
|
129
|
+
onChange?: (value: string) => void;
|
120
130
|
};
|
121
131
|
/**
|
122
132
|
* Radio card groups are used to group several radio cards together.
|
@@ -156,6 +166,87 @@ type RadioCardGroupProps = RadioGroupProps$1 & {
|
|
156
166
|
*/
|
157
167
|
declare const RadioCardGroup: ({ children, name, direction, onChange, defaultValue, variant, ...props }: RadioCardGroupProps) => React.JSX.Element;
|
158
168
|
|
169
|
+
type StaticCardProps = BoxProps & {
|
170
|
+
children: React.ReactNode;
|
171
|
+
/** Defaults to "white" */
|
172
|
+
colorScheme: "white" | "grey" | "green" | "orange" | "red" | "yellow" | "blue" | "darkBlue" | "darkGreen" | "darkYellow";
|
173
|
+
};
|
174
|
+
/**
|
175
|
+
* `StaticCard` is a component that renders a static card.
|
176
|
+
*
|
177
|
+
* The `StaticCard` component can be used to create a card that does not respond to user interactions.
|
178
|
+
* It can be rendered as any HTML element by specifying the `as` prop.
|
179
|
+
*
|
180
|
+
* The `colorScheme` prop can be used to control the color scheme of the card. It defaults to "white".
|
181
|
+
*
|
182
|
+
* Example usage:
|
183
|
+
*
|
184
|
+
* ```tsx
|
185
|
+
* <StaticCard>
|
186
|
+
* Content
|
187
|
+
* </StaticCard>
|
188
|
+
* ```
|
189
|
+
*
|
190
|
+
* To render the card as a different HTML element, specify the `as` prop:
|
191
|
+
*
|
192
|
+
* ```tsx
|
193
|
+
* <StaticCard as="section">
|
194
|
+
* This is now a <section /> element
|
195
|
+
* </StaticCard>
|
196
|
+
* ```
|
197
|
+
*
|
198
|
+
* To change the color scheme of the card, specify the `colorScheme` prop:
|
199
|
+
*
|
200
|
+
* ```tsx
|
201
|
+
* <StaticCard colorScheme="orange">
|
202
|
+
* An orange card
|
203
|
+
* </StaticCard>
|
204
|
+
* ```
|
205
|
+
*
|
206
|
+
* For a card with click functionality, use the `PressableCard` component.
|
207
|
+
*
|
208
|
+
* @see PressableCard
|
209
|
+
*/
|
210
|
+
declare const StaticCard: _chakra_ui_system_dist_system_types.ComponentWithAs<As, StaticCardProps>;
|
211
|
+
|
212
|
+
type PressableCardProps = Omit<BoxProps, "as"> & {
|
213
|
+
/** Defaults to "base" */
|
214
|
+
variant: "floating" | "accent" | "base";
|
215
|
+
/** Defaults to "button" */
|
216
|
+
as: "button" | "a" | "label";
|
217
|
+
};
|
218
|
+
/**
|
219
|
+
* `PressableCard` is a component that renders a pressable card.
|
220
|
+
*
|
221
|
+
* The `PressableCard` component can be used to create a card that responds to user interactions.
|
222
|
+
* It can be rendered as a button, link, label, or any other HTML element by specifying the `as` prop.
|
223
|
+
* If no `as` prop is provided, it defaults to a button.
|
224
|
+
*
|
225
|
+
* The `size` prop can be used to control the size of the card. It defaults to "sm".
|
226
|
+
* The `variant` prop can be used to control the style variant of the card. It defaults to "base".
|
227
|
+
*
|
228
|
+
* Example usage:
|
229
|
+
*
|
230
|
+
* ```tsx
|
231
|
+
* <PressableCard>
|
232
|
+
* Content
|
233
|
+
* </PressableCard>
|
234
|
+
* ```
|
235
|
+
*
|
236
|
+
* To render the card as a different HTML element, specify the `as` prop:
|
237
|
+
*
|
238
|
+
* ```tsx
|
239
|
+
* <PressableCard as="a">
|
240
|
+
* This is now a <a /> element
|
241
|
+
* </PressableCard>
|
242
|
+
* ```
|
243
|
+
*
|
244
|
+
* For a static card with other color schemes, use the `StaticCard` component.
|
245
|
+
*
|
246
|
+
* @see StaticCard
|
247
|
+
*/
|
248
|
+
declare const PressableCard: ({ children, as, variant, ...props }: PressableCardProps) => React.JSX.Element;
|
249
|
+
|
159
250
|
type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
|
160
251
|
/**
|
161
252
|
* The display variant of the accordion items.
|
@@ -532,64 +623,10 @@ type CardProps = Exclude<BoxProps, "size"> & {
|
|
532
623
|
* </Card>
|
533
624
|
* ```
|
534
625
|
*/
|
535
|
-
declare const Card: _chakra_ui_system_dist_system_types.ComponentWithAs<As, CardProps>;
|
536
|
-
|
537
|
-
/**
|
538
|
-
* Renders a static card.
|
539
|
-
*
|
540
|
-
* The most basic version looks like this:
|
541
|
-
*
|
542
|
-
* ```tsx
|
543
|
-
* <StaticCard colorScheme="white">
|
544
|
-
* Content
|
545
|
-
* </StaticCard>
|
546
|
-
* ```
|
547
|
-
*
|
548
|
-
* Static cards can also be rendered as whatever DOM element you want – like a li (list item) or an article. You do this by specifying the `as` prop:
|
549
|
-
*
|
550
|
-
* ```tsx
|
551
|
-
* <StaticCard colorScheme="green" as="section">
|
552
|
-
* This is now a <section /> element
|
553
|
-
* </StaticCard>
|
554
|
-
* ```
|
555
|
-
*/
|
556
|
-
declare const StaticCard: ({ colorScheme, ...props }: any) => React.JSX.Element;
|
557
|
-
|
558
|
-
type PressableCardProps = Omit<BoxProps, "as"> & {
|
559
|
-
variant: "floating" | "accent" | "base";
|
560
|
-
size?: "sm" | "lg";
|
561
|
-
as: "button" | "a" | "label";
|
562
|
-
};
|
563
626
|
/**
|
564
|
-
*
|
565
|
-
*
|
566
|
-
* The most basic version looks like this:
|
567
|
-
*
|
568
|
-
* ```tsx
|
569
|
-
* <PressableCard>
|
570
|
-
* Content
|
571
|
-
* </PressableCard>
|
572
|
-
* ```
|
573
|
-
*
|
574
|
-
* There are lots of color schemes available. You can also set the size as either `sm` or `lg`. The default is `sm`.
|
575
|
-
*
|
576
|
-
* ```tsx
|
577
|
-
* <PressableCard colorScheme="orange" size="lg">
|
578
|
-
* A smaller card
|
579
|
-
* </PressableCard>
|
580
|
-
* ```
|
581
|
-
*
|
582
|
-
* Pressable cards can also be rendered as button, link or label – like a li (list item) or an article.
|
583
|
-
* You do this by specifying the `as` prop. If no `as` is specified, button is chosen as default:
|
584
|
-
*
|
585
|
-
*
|
586
|
-
* ```tsx
|
587
|
-
* <PressableCard colorScheme="green" as="section">
|
588
|
-
* This is now a <section /> element
|
589
|
-
* </PressableCard>
|
590
|
-
* ```
|
627
|
+
* @deprecated Card is deprecated. Use `StaticCard` or `PressableCard` instead.
|
591
628
|
*/
|
592
|
-
declare const
|
629
|
+
declare const Card: _chakra_ui_system_dist_system_types.ComponentWithAs<As, CardProps>;
|
593
630
|
|
594
631
|
/**
|
595
632
|
* A date picker component.
|
@@ -7148,42 +7185,6 @@ declare const theme: {
|
|
7148
7185
|
};
|
7149
7186
|
StaticCard: {
|
7150
7187
|
baseStyle?: ((props: any) => {
|
7151
|
-
backgroundColor: string;
|
7152
|
-
color: string;
|
7153
|
-
outlineWidth: string;
|
7154
|
-
outlineColor: string;
|
7155
|
-
outlineStyle: string;
|
7156
|
-
outlineOffset: string;
|
7157
|
-
_focusVisible: {
|
7158
|
-
outlineWidth: string;
|
7159
|
-
outlineColor: string;
|
7160
|
-
outlineStyle: string;
|
7161
|
-
outlineOffset: string;
|
7162
|
-
};
|
7163
|
-
appearance: string;
|
7164
|
-
border: string;
|
7165
|
-
overflow: string;
|
7166
|
-
fontSize: string;
|
7167
|
-
display: string;
|
7168
|
-
borderRadius: string;
|
7169
|
-
} | {
|
7170
|
-
backgroundColor: string;
|
7171
|
-
color: string;
|
7172
|
-
outline: string;
|
7173
|
-
outlineColor: string;
|
7174
|
-
_focusVisible: {
|
7175
|
-
outlineWidth: string;
|
7176
|
-
outlineColor: string;
|
7177
|
-
outlineStyle: string;
|
7178
|
-
outlineOffset: string;
|
7179
|
-
};
|
7180
|
-
appearance: string;
|
7181
|
-
border: string;
|
7182
|
-
overflow: string;
|
7183
|
-
fontSize: string;
|
7184
|
-
display: string;
|
7185
|
-
borderRadius: string;
|
7186
|
-
} | {
|
7187
7188
|
backgroundColor: string;
|
7188
7189
|
color: string;
|
7189
7190
|
_focusVisible: {
|
@@ -7227,649 +7228,106 @@ declare const theme: {
|
|
7227
7228
|
} | undefined;
|
7228
7229
|
};
|
7229
7230
|
PressableCard: {
|
7230
|
-
baseStyle?: ((props:
|
7231
|
-
_hover: {
|
7232
|
-
outline: string;
|
7233
|
-
outlineColor: string;
|
7234
|
-
backgroundColor: string;
|
7235
|
-
} | {
|
7236
|
-
_hover: {
|
7237
|
-
backgroundColor: string;
|
7238
|
-
};
|
7239
|
-
_active: {
|
7240
|
-
backgroundColor: string;
|
7241
|
-
};
|
7242
|
-
color: string;
|
7243
|
-
backgroundColor: string;
|
7244
|
-
};
|
7231
|
+
baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
7245
7232
|
_disabled: {
|
7233
|
+
outline: string;
|
7246
7234
|
pointerEvents: string;
|
7247
7235
|
color: string;
|
7248
|
-
outlineWidth: string;
|
7249
|
-
outlineColor: string;
|
7250
|
-
outlineStyle: string;
|
7251
|
-
outlineOffset: string;
|
7252
|
-
backgroundColor: string;
|
7253
|
-
} | {
|
7254
|
-
pointerEvents: string;
|
7255
|
-
color: string;
|
7256
|
-
outline: string;
|
7257
|
-
outlineColor: string;
|
7258
7236
|
backgroundColor: string;
|
7259
7237
|
};
|
7260
|
-
outline: string;
|
7261
|
-
outlineColor: string;
|
7262
|
-
backgroundColor: string;
|
7263
7238
|
_focusVisible: {
|
7264
7239
|
outlineWidth: string;
|
7265
7240
|
outlineColor: string;
|
7266
7241
|
outlineStyle: string;
|
7267
7242
|
outlineOffset: string;
|
7268
7243
|
};
|
7269
|
-
color: string;
|
7270
|
-
outlineWidth: string;
|
7271
|
-
outlineStyle: string;
|
7272
|
-
outlineOffset: string;
|
7273
7244
|
appearance: string;
|
7274
7245
|
border: string;
|
7275
7246
|
overflow: string;
|
7276
7247
|
fontSize: string;
|
7277
7248
|
display: string;
|
7278
7249
|
borderRadius: string;
|
7279
|
-
} |
|
7280
|
-
|
7281
|
-
|
7282
|
-
|
7283
|
-
|
7284
|
-
|
7250
|
+
}) | undefined;
|
7251
|
+
sizes?: {
|
7252
|
+
[key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;
|
7253
|
+
} | undefined;
|
7254
|
+
variants?: {
|
7255
|
+
base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
7285
7256
|
_hover: {
|
7286
|
-
|
7257
|
+
outlineWidth: string;
|
7258
|
+
outlineColor: string;
|
7259
|
+
outlineStyle: string;
|
7260
|
+
outlineOffset: string;
|
7261
|
+
} | {
|
7262
|
+
outline: string;
|
7263
|
+
outlineColor: string;
|
7287
7264
|
};
|
7288
7265
|
_active: {
|
7266
|
+
outlineWidth: string;
|
7267
|
+
outlineColor: string;
|
7268
|
+
outlineStyle: string;
|
7269
|
+
outlineOffset: string;
|
7270
|
+
backgroundColor: string;
|
7271
|
+
} | {
|
7272
|
+
outline: string;
|
7273
|
+
outlineColor: string;
|
7289
7274
|
backgroundColor: string;
|
7290
7275
|
};
|
7291
|
-
color: string;
|
7292
|
-
backgroundColor: string;
|
7293
|
-
};
|
7294
|
-
_disabled: {
|
7295
|
-
pointerEvents: string;
|
7296
|
-
color: string;
|
7297
7276
|
outlineWidth: string;
|
7298
7277
|
outlineColor: string;
|
7299
7278
|
outlineStyle: string;
|
7300
7279
|
outlineOffset: string;
|
7301
|
-
backgroundColor: string;
|
7302
7280
|
} | {
|
7303
|
-
|
7304
|
-
|
7281
|
+
_hover: {
|
7282
|
+
outlineWidth: string;
|
7283
|
+
outlineColor: string;
|
7284
|
+
outlineStyle: string;
|
7285
|
+
outlineOffset: string;
|
7286
|
+
} | {
|
7287
|
+
outline: string;
|
7288
|
+
outlineColor: string;
|
7289
|
+
};
|
7290
|
+
_active: {
|
7291
|
+
outlineWidth: string;
|
7292
|
+
outlineColor: string;
|
7293
|
+
outlineStyle: string;
|
7294
|
+
outlineOffset: string;
|
7295
|
+
backgroundColor: string;
|
7296
|
+
} | {
|
7297
|
+
outline: string;
|
7298
|
+
outlineColor: string;
|
7299
|
+
backgroundColor: string;
|
7300
|
+
};
|
7305
7301
|
outline: string;
|
7306
7302
|
outlineColor: string;
|
7307
|
-
backgroundColor: string;
|
7308
|
-
};
|
7309
|
-
_active: {
|
7310
|
-
backgroundColor: string;
|
7311
|
-
};
|
7312
|
-
color: string;
|
7313
|
-
backgroundColor: string;
|
7314
|
-
_focusVisible: {
|
7315
|
-
outlineWidth: string;
|
7316
|
-
outlineColor: string;
|
7317
|
-
outlineStyle: string;
|
7318
|
-
outlineOffset: string;
|
7319
7303
|
};
|
7320
|
-
|
7321
|
-
|
7322
|
-
outlineWidth: string;
|
7323
|
-
outlineStyle: string;
|
7324
|
-
outlineOffset: string;
|
7325
|
-
appearance: string;
|
7326
|
-
border: string;
|
7327
|
-
overflow: string;
|
7328
|
-
fontSize: string;
|
7329
|
-
display: string;
|
7330
|
-
borderRadius: string;
|
7331
|
-
} | {
|
7332
|
-
_hover: {
|
7333
|
-
outline: string;
|
7334
|
-
outlineColor: string;
|
7335
|
-
backgroundColor: string;
|
7336
|
-
} | {
|
7304
|
+
accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
7305
|
+
boxShadow: string;
|
7337
7306
|
_hover: {
|
7307
|
+
boxShadow: string;
|
7338
7308
|
backgroundColor: string;
|
7339
7309
|
};
|
7340
7310
|
_active: {
|
7311
|
+
boxShadow: string;
|
7341
7312
|
backgroundColor: string;
|
7342
7313
|
};
|
7343
|
-
color: string;
|
7344
|
-
backgroundColor: string;
|
7345
|
-
};
|
7346
|
-
_disabled: {
|
7347
|
-
pointerEvents: string;
|
7348
|
-
color: string;
|
7349
|
-
outlineWidth: string;
|
7350
|
-
outlineColor: string;
|
7351
|
-
outlineStyle: string;
|
7352
|
-
outlineOffset: string;
|
7353
|
-
backgroundColor: string;
|
7354
|
-
} | {
|
7355
|
-
pointerEvents: string;
|
7356
|
-
color: string;
|
7357
|
-
outline: string;
|
7358
|
-
outlineColor: string;
|
7359
|
-
backgroundColor: string;
|
7360
|
-
};
|
7361
|
-
outline: string;
|
7362
|
-
outlineColor: string;
|
7363
|
-
backgroundColor: string;
|
7364
|
-
_focusVisible: {
|
7365
|
-
outlineWidth: string;
|
7366
|
-
outlineColor: string;
|
7367
|
-
outlineStyle: string;
|
7368
|
-
outlineOffset: string;
|
7369
|
-
};
|
7370
|
-
_active: {
|
7371
|
-
backgroundColor: string;
|
7372
|
-
};
|
7373
|
-
color: string;
|
7374
|
-
outlineWidth: string;
|
7375
|
-
outlineStyle: string;
|
7376
|
-
outlineOffset: string;
|
7377
|
-
appearance: string;
|
7378
|
-
border: string;
|
7379
|
-
overflow: string;
|
7380
|
-
fontSize: string;
|
7381
|
-
display: string;
|
7382
|
-
borderRadius: string;
|
7383
|
-
} | {
|
7384
|
-
_hover: {
|
7385
|
-
outline: string;
|
7386
|
-
outlineColor: string;
|
7387
|
-
backgroundColor: string;
|
7388
|
-
} | {
|
7389
|
-
_hover: {
|
7390
|
-
backgroundColor: string;
|
7391
|
-
};
|
7392
|
-
_active: {
|
7393
|
-
backgroundColor: string;
|
7394
|
-
};
|
7395
|
-
color: string;
|
7396
|
-
backgroundColor: string;
|
7397
|
-
};
|
7398
|
-
_disabled: {
|
7399
|
-
pointerEvents: string;
|
7400
|
-
color: string;
|
7401
|
-
outlineWidth: string;
|
7402
|
-
outlineColor: string;
|
7403
|
-
outlineStyle: string;
|
7404
|
-
outlineOffset: string;
|
7405
|
-
backgroundColor: string;
|
7406
|
-
} | {
|
7407
|
-
pointerEvents: string;
|
7408
|
-
color: string;
|
7409
|
-
outline: string;
|
7410
|
-
outlineColor: string;
|
7411
|
-
backgroundColor: string;
|
7412
|
-
};
|
7413
|
-
_active: {
|
7414
|
-
backgroundColor: string;
|
7415
|
-
};
|
7416
|
-
color: string;
|
7417
|
-
backgroundColor: string;
|
7418
|
-
_focusVisible: {
|
7419
|
-
outlineWidth: string;
|
7420
|
-
outlineColor: string;
|
7421
|
-
outlineStyle: string;
|
7422
|
-
outlineOffset: string;
|
7423
|
-
};
|
7424
|
-
outlineWidth: string;
|
7425
|
-
outlineColor: string;
|
7426
|
-
outlineStyle: string;
|
7427
|
-
outlineOffset: string;
|
7428
|
-
appearance: string;
|
7429
|
-
border: string;
|
7430
|
-
overflow: string;
|
7431
|
-
fontSize: string;
|
7432
|
-
display: string;
|
7433
|
-
borderRadius: string;
|
7434
|
-
} | {
|
7435
|
-
_hover: {
|
7436
|
-
outline: string;
|
7437
|
-
outlineColor: string;
|
7438
|
-
backgroundColor: string;
|
7439
|
-
} | {
|
7440
|
-
_hover: {
|
7441
|
-
backgroundColor: string;
|
7442
|
-
};
|
7443
|
-
_active: {
|
7444
|
-
backgroundColor: string;
|
7445
|
-
};
|
7446
|
-
color: string;
|
7447
|
-
backgroundColor: string;
|
7448
|
-
};
|
7449
|
-
_disabled: {
|
7450
|
-
pointerEvents: string;
|
7451
|
-
color: string;
|
7452
|
-
outlineWidth: string;
|
7453
|
-
outlineColor: string;
|
7454
|
-
outlineStyle: string;
|
7455
|
-
outlineOffset: string;
|
7456
|
-
backgroundColor: string;
|
7457
|
-
} | {
|
7458
|
-
pointerEvents: string;
|
7459
|
-
color: string;
|
7460
|
-
outline: string;
|
7461
|
-
outlineColor: string;
|
7462
|
-
backgroundColor: string;
|
7463
|
-
};
|
7464
|
-
outline: string;
|
7465
|
-
outlineColor: string;
|
7466
|
-
backgroundColor: string;
|
7467
|
-
_focusVisible: {
|
7468
|
-
outlineWidth: string;
|
7469
|
-
outlineColor: string;
|
7470
|
-
outlineStyle: string;
|
7471
|
-
outlineOffset: string;
|
7472
|
-
};
|
7473
|
-
color: string;
|
7474
|
-
appearance: string;
|
7475
|
-
border: string;
|
7476
|
-
overflow: string;
|
7477
|
-
fontSize: string;
|
7478
|
-
display: string;
|
7479
|
-
borderRadius: string;
|
7480
|
-
} | {
|
7481
|
-
_hover: {
|
7482
|
-
outline: string;
|
7483
|
-
outlineColor: string;
|
7484
|
-
backgroundColor: string;
|
7485
|
-
} | {
|
7486
|
-
_hover: {
|
7487
|
-
backgroundColor: string;
|
7488
|
-
};
|
7489
|
-
_active: {
|
7490
|
-
backgroundColor: string;
|
7491
|
-
};
|
7492
|
-
color: string;
|
7493
|
-
backgroundColor: string;
|
7494
|
-
};
|
7495
|
-
_disabled: {
|
7496
|
-
pointerEvents: string;
|
7497
|
-
color: string;
|
7498
|
-
outlineWidth: string;
|
7499
|
-
outlineColor: string;
|
7500
|
-
outlineStyle: string;
|
7501
|
-
outlineOffset: string;
|
7502
|
-
backgroundColor: string;
|
7503
|
-
} | {
|
7504
|
-
pointerEvents: string;
|
7505
|
-
color: string;
|
7506
|
-
outline: string;
|
7507
|
-
outlineColor: string;
|
7508
|
-
backgroundColor: string;
|
7509
|
-
};
|
7510
|
-
_active: {
|
7511
|
-
backgroundColor: string;
|
7512
|
-
};
|
7513
|
-
color: string;
|
7514
|
-
backgroundColor: string;
|
7515
|
-
_focusVisible: {
|
7516
|
-
outlineWidth: string;
|
7517
|
-
outlineColor: string;
|
7518
|
-
outlineStyle: string;
|
7519
|
-
outlineOffset: string;
|
7520
|
-
};
|
7521
|
-
outline: string;
|
7522
|
-
outlineColor: string;
|
7523
|
-
appearance: string;
|
7524
|
-
border: string;
|
7525
|
-
overflow: string;
|
7526
|
-
fontSize: string;
|
7527
|
-
display: string;
|
7528
|
-
borderRadius: string;
|
7529
|
-
} | {
|
7530
|
-
_hover: {
|
7531
|
-
outline: string;
|
7532
|
-
outlineColor: string;
|
7533
|
-
backgroundColor: string;
|
7534
|
-
} | {
|
7535
|
-
_hover: {
|
7536
|
-
backgroundColor: string;
|
7537
|
-
};
|
7538
|
-
_active: {
|
7539
|
-
backgroundColor: string;
|
7540
|
-
};
|
7541
|
-
color: string;
|
7542
|
-
backgroundColor: string;
|
7543
|
-
};
|
7544
|
-
_disabled: {
|
7545
|
-
pointerEvents: string;
|
7546
|
-
color: string;
|
7547
|
-
outlineWidth: string;
|
7548
|
-
outlineColor: string;
|
7549
|
-
outlineStyle: string;
|
7550
|
-
outlineOffset: string;
|
7551
|
-
backgroundColor: string;
|
7552
|
-
} | {
|
7553
|
-
pointerEvents: string;
|
7554
|
-
color: string;
|
7555
|
-
outline: string;
|
7556
|
-
outlineColor: string;
|
7557
|
-
backgroundColor: string;
|
7558
|
-
};
|
7559
|
-
outline: string;
|
7560
|
-
outlineColor: string;
|
7561
|
-
backgroundColor: string;
|
7562
|
-
_focusVisible: {
|
7563
|
-
outlineWidth: string;
|
7564
|
-
outlineColor: string;
|
7565
|
-
outlineStyle: string;
|
7566
|
-
outlineOffset: string;
|
7567
|
-
};
|
7568
|
-
_active: {
|
7569
|
-
backgroundColor: string;
|
7570
|
-
};
|
7571
|
-
color: string;
|
7572
|
-
appearance: string;
|
7573
|
-
border: string;
|
7574
|
-
overflow: string;
|
7575
|
-
fontSize: string;
|
7576
|
-
display: string;
|
7577
|
-
borderRadius: string;
|
7578
|
-
} | {
|
7579
|
-
_hover: {
|
7580
|
-
outline: string;
|
7581
|
-
outlineColor: string;
|
7582
|
-
backgroundColor: string;
|
7583
|
-
} | {
|
7584
|
-
_hover: {
|
7585
|
-
backgroundColor: string;
|
7586
|
-
};
|
7587
|
-
_active: {
|
7588
|
-
backgroundColor: string;
|
7589
|
-
};
|
7590
|
-
color: string;
|
7591
|
-
backgroundColor: string;
|
7592
|
-
};
|
7593
|
-
_disabled: {
|
7594
|
-
pointerEvents: string;
|
7595
|
-
color: string;
|
7596
|
-
outlineWidth: string;
|
7597
|
-
outlineColor: string;
|
7598
|
-
outlineStyle: string;
|
7599
|
-
outlineOffset: string;
|
7600
|
-
backgroundColor: string;
|
7601
|
-
} | {
|
7602
|
-
pointerEvents: string;
|
7603
|
-
color: string;
|
7604
|
-
outline: string;
|
7605
|
-
outlineColor: string;
|
7606
7314
|
backgroundColor: string;
|
7607
7315
|
};
|
7608
|
-
|
7609
|
-
backgroundColor: string;
|
7610
|
-
};
|
7611
|
-
color: string;
|
7612
|
-
backgroundColor: string;
|
7613
|
-
_focusVisible: {
|
7614
|
-
outlineWidth: string;
|
7615
|
-
outlineColor: string;
|
7616
|
-
outlineStyle: string;
|
7617
|
-
outlineOffset: string;
|
7618
|
-
};
|
7619
|
-
outline: string;
|
7620
|
-
outlineColor: string;
|
7621
|
-
appearance: string;
|
7622
|
-
border: string;
|
7623
|
-
overflow: string;
|
7624
|
-
fontSize: string;
|
7625
|
-
display: string;
|
7626
|
-
borderRadius: string;
|
7627
|
-
} | {
|
7628
|
-
_hover: {
|
7629
|
-
outline: string;
|
7630
|
-
outlineColor: string;
|
7631
|
-
backgroundColor: string;
|
7632
|
-
} | {
|
7633
|
-
_hover: {
|
7634
|
-
backgroundColor: string;
|
7635
|
-
};
|
7636
|
-
_active: {
|
7637
|
-
backgroundColor: string;
|
7638
|
-
};
|
7639
|
-
color: string;
|
7640
|
-
backgroundColor: string;
|
7641
|
-
};
|
7642
|
-
_disabled: {
|
7643
|
-
pointerEvents: string;
|
7644
|
-
color: string;
|
7645
|
-
outlineWidth: string;
|
7646
|
-
outlineColor: string;
|
7647
|
-
outlineStyle: string;
|
7648
|
-
outlineOffset: string;
|
7649
|
-
backgroundColor: string;
|
7650
|
-
} | {
|
7651
|
-
pointerEvents: string;
|
7652
|
-
color: string;
|
7653
|
-
outline: string;
|
7654
|
-
outlineColor: string;
|
7655
|
-
backgroundColor: string;
|
7656
|
-
};
|
7657
|
-
outline: string;
|
7658
|
-
outlineColor: string;
|
7659
|
-
backgroundColor: string;
|
7660
|
-
_focusVisible: {
|
7661
|
-
outlineWidth: string;
|
7662
|
-
outlineColor: string;
|
7663
|
-
outlineStyle: string;
|
7664
|
-
outlineOffset: string;
|
7665
|
-
};
|
7666
|
-
_active: {
|
7667
|
-
backgroundColor: string;
|
7668
|
-
};
|
7669
|
-
color: string;
|
7670
|
-
appearance: string;
|
7671
|
-
border: string;
|
7672
|
-
overflow: string;
|
7673
|
-
fontSize: string;
|
7674
|
-
display: string;
|
7675
|
-
borderRadius: string;
|
7676
|
-
} | {
|
7677
|
-
_hover: {
|
7678
|
-
outline: string;
|
7679
|
-
outlineColor: string;
|
7680
|
-
backgroundColor: string;
|
7681
|
-
} | {
|
7682
|
-
_hover: {
|
7683
|
-
backgroundColor: string;
|
7684
|
-
};
|
7685
|
-
_active: {
|
7686
|
-
backgroundColor: string;
|
7687
|
-
};
|
7688
|
-
color: string;
|
7689
|
-
backgroundColor: string;
|
7690
|
-
};
|
7691
|
-
_disabled: {
|
7692
|
-
pointerEvents: string;
|
7693
|
-
color: string;
|
7694
|
-
outlineWidth: string;
|
7695
|
-
outlineColor: string;
|
7696
|
-
outlineStyle: string;
|
7697
|
-
outlineOffset: string;
|
7698
|
-
backgroundColor: string;
|
7699
|
-
} | {
|
7700
|
-
pointerEvents: string;
|
7701
|
-
color: string;
|
7702
|
-
outline: string;
|
7703
|
-
outlineColor: string;
|
7704
|
-
backgroundColor: string;
|
7705
|
-
};
|
7706
|
-
_active: {
|
7707
|
-
backgroundColor: string;
|
7708
|
-
};
|
7709
|
-
color: string;
|
7710
|
-
backgroundColor: string;
|
7711
|
-
_focusVisible: {
|
7712
|
-
outlineWidth: string;
|
7713
|
-
outlineColor: string;
|
7714
|
-
outlineStyle: string;
|
7715
|
-
outlineOffset: string;
|
7716
|
-
};
|
7717
|
-
outline: string;
|
7718
|
-
outlineColor: string;
|
7719
|
-
appearance: string;
|
7720
|
-
border: string;
|
7721
|
-
overflow: string;
|
7722
|
-
fontSize: string;
|
7723
|
-
display: string;
|
7724
|
-
borderRadius: string;
|
7725
|
-
} | {
|
7726
|
-
_hover: {
|
7727
|
-
outline: string;
|
7728
|
-
outlineColor: string;
|
7729
|
-
backgroundColor: string;
|
7730
|
-
} | {
|
7731
|
-
_hover: {
|
7732
|
-
backgroundColor: string;
|
7733
|
-
};
|
7734
|
-
_active: {
|
7735
|
-
backgroundColor: string;
|
7736
|
-
};
|
7737
|
-
color: string;
|
7738
|
-
backgroundColor: string;
|
7739
|
-
};
|
7740
|
-
_disabled: {
|
7741
|
-
pointerEvents: string;
|
7742
|
-
color: string;
|
7743
|
-
outlineWidth: string;
|
7744
|
-
outlineColor: string;
|
7745
|
-
outlineStyle: string;
|
7746
|
-
outlineOffset: string;
|
7747
|
-
backgroundColor: string;
|
7748
|
-
} | {
|
7749
|
-
pointerEvents: string;
|
7750
|
-
color: string;
|
7751
|
-
outline: string;
|
7752
|
-
outlineColor: string;
|
7753
|
-
backgroundColor: string;
|
7754
|
-
};
|
7755
|
-
outline: string;
|
7756
|
-
outlineColor: string;
|
7757
|
-
backgroundColor: string;
|
7758
|
-
_focusVisible: {
|
7759
|
-
outlineWidth: string;
|
7760
|
-
outlineColor: string;
|
7761
|
-
outlineStyle: string;
|
7762
|
-
outlineOffset: string;
|
7763
|
-
};
|
7764
|
-
_active: {
|
7765
|
-
backgroundColor: string;
|
7766
|
-
};
|
7767
|
-
color: string;
|
7768
|
-
appearance: string;
|
7769
|
-
border: string;
|
7770
|
-
overflow: string;
|
7771
|
-
fontSize: string;
|
7772
|
-
display: string;
|
7773
|
-
borderRadius: string;
|
7774
|
-
} | {
|
7775
|
-
_hover: {
|
7776
|
-
outline: string;
|
7777
|
-
outlineColor: string;
|
7778
|
-
backgroundColor: string;
|
7779
|
-
} | {
|
7780
|
-
_hover: {
|
7781
|
-
backgroundColor: string;
|
7782
|
-
};
|
7783
|
-
_active: {
|
7784
|
-
backgroundColor: string;
|
7785
|
-
};
|
7786
|
-
color: string;
|
7787
|
-
backgroundColor: string;
|
7788
|
-
};
|
7789
|
-
_disabled: {
|
7790
|
-
pointerEvents: string;
|
7791
|
-
color: string;
|
7792
|
-
outlineWidth: string;
|
7793
|
-
outlineColor: string;
|
7794
|
-
outlineStyle: string;
|
7795
|
-
outlineOffset: string;
|
7796
|
-
backgroundColor: string;
|
7797
|
-
} | {
|
7798
|
-
pointerEvents: string;
|
7799
|
-
color: string;
|
7800
|
-
outline: string;
|
7801
|
-
outlineColor: string;
|
7802
|
-
backgroundColor: string;
|
7803
|
-
};
|
7804
|
-
_active: {
|
7805
|
-
backgroundColor: string;
|
7806
|
-
};
|
7807
|
-
color: string;
|
7808
|
-
backgroundColor: string;
|
7809
|
-
_focusVisible: {
|
7810
|
-
outlineWidth: string;
|
7811
|
-
outlineColor: string;
|
7812
|
-
outlineStyle: string;
|
7813
|
-
outlineOffset: string;
|
7814
|
-
};
|
7815
|
-
appearance: string;
|
7816
|
-
border: string;
|
7817
|
-
overflow: string;
|
7818
|
-
fontSize: string;
|
7819
|
-
display: string;
|
7820
|
-
borderRadius: string;
|
7821
|
-
}) | undefined;
|
7822
|
-
sizes?: {
|
7823
|
-
sm: {
|
7824
|
-
boxShadow: string;
|
7825
|
-
_hover: {
|
7826
|
-
boxShadow: string;
|
7827
|
-
};
|
7828
|
-
_active: {
|
7829
|
-
boxShadow: string;
|
7830
|
-
};
|
7831
|
-
};
|
7832
|
-
lg: {
|
7316
|
+
floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
7833
7317
|
boxShadow: string;
|
7834
7318
|
_hover: {
|
7835
7319
|
boxShadow: string;
|
7836
|
-
};
|
7837
|
-
_active: {
|
7838
|
-
boxShadow: string;
|
7839
|
-
};
|
7840
|
-
};
|
7841
|
-
} | undefined;
|
7842
|
-
variants?: {
|
7843
|
-
base: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
7844
|
-
_hover: {
|
7845
|
-
backgroundColor: string;
|
7846
|
-
};
|
7847
|
-
_active: {
|
7848
|
-
backgroundColor: string;
|
7849
|
-
};
|
7850
|
-
backgroundColor: string;
|
7851
|
-
};
|
7852
|
-
accent: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
7853
|
-
_hover: {
|
7854
|
-
backgroundColor: string;
|
7855
|
-
};
|
7856
|
-
_active: {
|
7857
|
-
backgroundColor: string;
|
7858
|
-
};
|
7859
|
-
backgroundColor: string;
|
7860
|
-
};
|
7861
|
-
floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
|
7862
|
-
_hover: {
|
7863
7320
|
backgroundColor: string;
|
7864
7321
|
};
|
7865
7322
|
_active: {
|
7323
|
+
boxShadow: string;
|
7866
7324
|
backgroundColor: string;
|
7867
7325
|
};
|
7868
7326
|
backgroundColor: string;
|
7869
7327
|
};
|
7870
7328
|
} | undefined;
|
7871
7329
|
defaultProps?: {
|
7872
|
-
size?:
|
7330
|
+
size?: string | number | undefined;
|
7873
7331
|
variant?: "base" | "floating" | "accent" | undefined;
|
7874
7332
|
colorScheme?: string | undefined;
|
7875
7333
|
} | undefined;
|
@@ -9959,4 +9417,4 @@ declare const Text: _chakra_ui_system_dist_system_types.ComponentWithAs<"p", Tex
|
|
9959
9417
|
**/
|
9960
9418
|
declare function slugify(text: string | string[], maxLength?: number): string;
|
9961
9419
|
|
9962
|
-
export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
|
9420
|
+
export { Accordion, AccordionProps, AttachedInputs, Badge, BadgeProps, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, ButtonGroupProps, ButtonProps, Card, CardProps, CardSelect, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChoiceChip, ChoiceChipProps, ClosableAlert, CloseButton, CloseButtonProps, Code, CodeProps, ColorInlineLoader, ColorInlineLoaderProps, ColorSpinner, ColorSpinnerProps, Combobox, ComboboxProps, ContentLoader, ContentLoaderProps, DarkFullScreenLoader, DarkInlineLoader, DarkInlineLoaderProps, DarkSpinner, DarkSpinnerProps, DatePicker, DateRangePicker, Divider, DividerProps, Drawer, DrawerContent, ModalHeader as DrawerHeader, Expandable, ExpandableAlert, ExpandableItem, ExpandableItemProps, FloatingActionButton, FormControl, FormControlProps, FormErrorMessage, FormErrorMessageProps, FormLabel, FormLabelProps, FullScreenDrawer, Heading, HeadingProps, IconButton, IconButtonProps, InfoSelect, InfoTag, InfoTagProps, Input, InputElementProps, InputLeftElement, InputProps, InputRightElement, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightInlineLoaderProps, LightSpinner, LightSpinnerProps, LineIcon, LineIconProps, ListBox, ModalHeader, ModalHeaderProps, NativeSelect, NativeSelectProps, Nudge, NudgeProps, NumericStepper, Pagination, PasswordInput, PasswordInputProps, PhoneNumberInput, PlayPauseButton, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioGroup, RadioGroupProps, RadioProps, SearchInput, SearchInputProps, SimpleDrawer, SimpleDrawerProps, Skeleton, SkeletonCircle, SkeletonCircleProps, SkeletonProps, SkeletonText, SkeletonTextProps, SkipButton, SpinnerProps, SporProvider, Stack, StackProps, StaticAlert, StaticCard, StaticCardProps, Stepper, StepperStep, Switch, SwitchProps, Table, TableProps, Tabs, TabsProps, Text, TextLink, TextProps, Textarea, TextareaProps, TimePicker, ToastOptions, Tooltip, TooltipProps, Translations, TravelTag, TravelTagProps, VyLogo, VyLogoProps, WizardNudge, WizardNudgeProps, brandTheme, createTexts, fontFaces, slugify, theme, useToast, useTranslation };
|