@vygruppen/spor-react 13.6.0 → 13.7.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 +12 -12
- package/.turbo/turbo-postinstall.log +3 -4
- package/CHANGELOG.md +28 -0
- package/__tests__/toast.test.tsx +108 -0
- package/dist/index.cjs +126 -29
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +29 -2
- package/dist/index.d.ts +29 -2
- package/dist/index.mjs +127 -30
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/input/Autocomplete.tsx +2 -0
- package/src/input/Field.tsx +2 -4
- package/src/layout/RadioCard.tsx +2 -1
- package/src/link/TextLink.tsx +27 -11
- package/src/theme/recipes/badge.ts +20 -0
- package/src/theme/recipes/input.ts +8 -1
- package/src/theme/recipes/separator.ts +4 -3
- package/src/theme/slot-recipes/input-chip.ts +4 -5
- package/src/theme/slot-recipes/select.ts +5 -0
- package/src/theme/slot-recipes/toast.ts +38 -1
- package/src/toast/toast.tsx +10 -6
package/dist/index.d.cts
CHANGED
|
@@ -1769,7 +1769,7 @@ type Props = {
|
|
|
1769
1769
|
openOnFocus?: boolean;
|
|
1770
1770
|
ref?: React__default.Ref<HTMLInputElement | null>;
|
|
1771
1771
|
} & Omit<ComboboxRootProps, "collection"> & FieldProps;
|
|
1772
|
-
declare function Autocomplete({ variant, children, css, label, leftIcon, onInputValueChange, invalid, helperText, errorText, required, filteredExternally, loading, disabled, emptyLabel, onFocus, openOnClick, openOnFocus, ref, ...rest }: Props): react_jsx_runtime.JSX.Element;
|
|
1772
|
+
declare function Autocomplete({ variant, children, css, label, leftIcon, onInputValueChange, invalid, helperText, errorText, required, filteredExternally, loading, disabled, emptyLabel, onFocus, openOnClick, openOnFocus, ref, size, ...rest }: Props): react_jsx_runtime.JSX.Element;
|
|
1773
1773
|
declare const AutocompleteItemGroup: React__default.ForwardRefExoticComponent<Combobox$1.ItemGroupProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1774
1774
|
declare const AutocompleteItemGroupLabel: React__default.ForwardRefExoticComponent<_chakra_ui_react.ComboboxItemGroupLabelProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1775
1775
|
declare const AutocompleteItem: ({ children, ...props }: ComboboxItemProps) => react_jsx_runtime.JSX.Element;
|
|
@@ -2368,6 +2368,10 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
|
|
|
2368
2368
|
outline: "2px solid";
|
|
2369
2369
|
outlineColor: "outline.focus";
|
|
2370
2370
|
} | undefined;
|
|
2371
|
+
"&:-webkit-autofill, &:-webkit-autofill:focus"?: {
|
|
2372
|
+
boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
|
|
2373
|
+
WebkitTextFillColor: "var(--spor-colors-text)";
|
|
2374
|
+
} | undefined;
|
|
2371
2375
|
};
|
|
2372
2376
|
};
|
|
2373
2377
|
floating: {
|
|
@@ -2389,6 +2393,10 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
|
|
|
2389
2393
|
outline: string;
|
|
2390
2394
|
outlineColor: string;
|
|
2391
2395
|
} | undefined;
|
|
2396
|
+
"&:-webkit-autofill, &:-webkit-autofill:focus"?: {
|
|
2397
|
+
boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
|
|
2398
|
+
WebkitTextFillColor: "var(--spor-colors-text)";
|
|
2399
|
+
} | undefined;
|
|
2392
2400
|
};
|
|
2393
2401
|
};
|
|
2394
2402
|
};
|
|
@@ -2792,6 +2800,10 @@ declare const textareaRecipe: _chakra_ui_react.RecipeDefinition<{
|
|
|
2792
2800
|
outline: "2px solid";
|
|
2793
2801
|
outlineColor: "outline.focus";
|
|
2794
2802
|
} | undefined;
|
|
2803
|
+
"&:-webkit-autofill, &:-webkit-autofill:focus"?: {
|
|
2804
|
+
boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
|
|
2805
|
+
WebkitTextFillColor: "var(--spor-colors-text)";
|
|
2806
|
+
} | undefined;
|
|
2795
2807
|
};
|
|
2796
2808
|
floating: {
|
|
2797
2809
|
boxShadow?: "sm" | undefined;
|
|
@@ -2811,6 +2823,10 @@ declare const textareaRecipe: _chakra_ui_react.RecipeDefinition<{
|
|
|
2811
2823
|
outline: string;
|
|
2812
2824
|
outlineColor: string;
|
|
2813
2825
|
} | undefined;
|
|
2826
|
+
"&:-webkit-autofill, &:-webkit-autofill:focus"?: {
|
|
2827
|
+
boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
|
|
2828
|
+
WebkitTextFillColor: "var(--spor-colors-text)";
|
|
2829
|
+
} | undefined;
|
|
2814
2830
|
};
|
|
2815
2831
|
};
|
|
2816
2832
|
}>;
|
|
@@ -4297,8 +4313,9 @@ type ToastProps = {
|
|
|
4297
4313
|
id?: string;
|
|
4298
4314
|
action?: ToastAction;
|
|
4299
4315
|
closable?: boolean;
|
|
4316
|
+
inverted?: boolean;
|
|
4300
4317
|
} & Pick<BoxProps, "width">;
|
|
4301
|
-
declare const createToast: ({ text, variant, id, duration, width, action, closable, }: ToastProps) => string;
|
|
4318
|
+
declare const createToast: ({ text, variant, id, duration, width, action, closable, inverted, }: ToastProps) => string;
|
|
4302
4319
|
|
|
4303
4320
|
declare const Tooltip: React$1.FC<Tooltip$1.RootProps>;
|
|
4304
4321
|
declare const TooltipTrigger: ({ ref, children, ...props }: Tooltip$1.TriggerProps & {
|
|
@@ -4316,6 +4333,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4316
4333
|
neutral: {
|
|
4317
4334
|
backgroundColor: "surface";
|
|
4318
4335
|
color: "text";
|
|
4336
|
+
outlineColor: "outline";
|
|
4319
4337
|
"& svg": {
|
|
4320
4338
|
color: "icon";
|
|
4321
4339
|
};
|
|
@@ -4323,6 +4341,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4323
4341
|
grey: {
|
|
4324
4342
|
backgroundColor: "surface.neutral";
|
|
4325
4343
|
color: "text.neutral";
|
|
4344
|
+
outlineColor: "outline.neutral";
|
|
4326
4345
|
"& svg": {
|
|
4327
4346
|
color: "icon.neutral";
|
|
4328
4347
|
};
|
|
@@ -4330,6 +4349,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4330
4349
|
green: {
|
|
4331
4350
|
backgroundColor: "surface.success";
|
|
4332
4351
|
color: "text.success";
|
|
4352
|
+
outlineColor: "outline.success";
|
|
4333
4353
|
"& svg": {
|
|
4334
4354
|
color: "icon.success";
|
|
4335
4355
|
};
|
|
@@ -4337,6 +4357,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4337
4357
|
blue: {
|
|
4338
4358
|
backgroundColor: "surface.info";
|
|
4339
4359
|
color: "text.info";
|
|
4360
|
+
outlineColor: "outline.info";
|
|
4340
4361
|
"& svg": {
|
|
4341
4362
|
color: "icon.info";
|
|
4342
4363
|
};
|
|
@@ -4344,6 +4365,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4344
4365
|
cream: {
|
|
4345
4366
|
backgroundColor: "surface.warning";
|
|
4346
4367
|
color: "text.warning";
|
|
4368
|
+
outlineColor: "outline.warning";
|
|
4347
4369
|
"& svg": {
|
|
4348
4370
|
color: "icon.warning";
|
|
4349
4371
|
};
|
|
@@ -4351,6 +4373,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4351
4373
|
yellow: {
|
|
4352
4374
|
backgroundColor: "surface.notice";
|
|
4353
4375
|
color: "text.notice";
|
|
4376
|
+
outlineColor: "outline.notice";
|
|
4354
4377
|
"& svg": {
|
|
4355
4378
|
color: "icon.notice";
|
|
4356
4379
|
};
|
|
@@ -4358,6 +4381,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4358
4381
|
orange: {
|
|
4359
4382
|
backgroundColor: "surface.caution";
|
|
4360
4383
|
color: "text.caution";
|
|
4384
|
+
outlineColor: "outline.caution";
|
|
4361
4385
|
"& svg": {
|
|
4362
4386
|
color: "icon.caution";
|
|
4363
4387
|
};
|
|
@@ -4365,6 +4389,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4365
4389
|
red: {
|
|
4366
4390
|
backgroundColor: "surface.critical";
|
|
4367
4391
|
color: "text.critical";
|
|
4392
|
+
outlineColor: "outline.critical";
|
|
4368
4393
|
"& svg": {
|
|
4369
4394
|
color: "icon.critical";
|
|
4370
4395
|
};
|
|
@@ -4378,6 +4403,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4378
4403
|
_light: "pink";
|
|
4379
4404
|
_dark: "pink";
|
|
4380
4405
|
};
|
|
4406
|
+
outlineColor: "outline.error";
|
|
4381
4407
|
"& svg": {
|
|
4382
4408
|
color: {
|
|
4383
4409
|
_light: "pink";
|
|
@@ -4388,6 +4414,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4388
4414
|
disabled: {
|
|
4389
4415
|
backgroundColor: "surface.disabled";
|
|
4390
4416
|
color: "text.disabled";
|
|
4417
|
+
outlineColor: "outline.disabled";
|
|
4391
4418
|
"& svg": {
|
|
4392
4419
|
color: "icon.disabled";
|
|
4393
4420
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -1769,7 +1769,7 @@ type Props = {
|
|
|
1769
1769
|
openOnFocus?: boolean;
|
|
1770
1770
|
ref?: React__default.Ref<HTMLInputElement | null>;
|
|
1771
1771
|
} & Omit<ComboboxRootProps, "collection"> & FieldProps;
|
|
1772
|
-
declare function Autocomplete({ variant, children, css, label, leftIcon, onInputValueChange, invalid, helperText, errorText, required, filteredExternally, loading, disabled, emptyLabel, onFocus, openOnClick, openOnFocus, ref, ...rest }: Props): react_jsx_runtime.JSX.Element;
|
|
1772
|
+
declare function Autocomplete({ variant, children, css, label, leftIcon, onInputValueChange, invalid, helperText, errorText, required, filteredExternally, loading, disabled, emptyLabel, onFocus, openOnClick, openOnFocus, ref, size, ...rest }: Props): react_jsx_runtime.JSX.Element;
|
|
1773
1773
|
declare const AutocompleteItemGroup: React__default.ForwardRefExoticComponent<Combobox$1.ItemGroupProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1774
1774
|
declare const AutocompleteItemGroupLabel: React__default.ForwardRefExoticComponent<_chakra_ui_react.ComboboxItemGroupLabelProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1775
1775
|
declare const AutocompleteItem: ({ children, ...props }: ComboboxItemProps) => react_jsx_runtime.JSX.Element;
|
|
@@ -2368,6 +2368,10 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
|
|
|
2368
2368
|
outline: "2px solid";
|
|
2369
2369
|
outlineColor: "outline.focus";
|
|
2370
2370
|
} | undefined;
|
|
2371
|
+
"&:-webkit-autofill, &:-webkit-autofill:focus"?: {
|
|
2372
|
+
boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
|
|
2373
|
+
WebkitTextFillColor: "var(--spor-colors-text)";
|
|
2374
|
+
} | undefined;
|
|
2371
2375
|
};
|
|
2372
2376
|
};
|
|
2373
2377
|
floating: {
|
|
@@ -2389,6 +2393,10 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
|
|
|
2389
2393
|
outline: string;
|
|
2390
2394
|
outlineColor: string;
|
|
2391
2395
|
} | undefined;
|
|
2396
|
+
"&:-webkit-autofill, &:-webkit-autofill:focus"?: {
|
|
2397
|
+
boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
|
|
2398
|
+
WebkitTextFillColor: "var(--spor-colors-text)";
|
|
2399
|
+
} | undefined;
|
|
2392
2400
|
};
|
|
2393
2401
|
};
|
|
2394
2402
|
};
|
|
@@ -2792,6 +2800,10 @@ declare const textareaRecipe: _chakra_ui_react.RecipeDefinition<{
|
|
|
2792
2800
|
outline: "2px solid";
|
|
2793
2801
|
outlineColor: "outline.focus";
|
|
2794
2802
|
} | undefined;
|
|
2803
|
+
"&:-webkit-autofill, &:-webkit-autofill:focus"?: {
|
|
2804
|
+
boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
|
|
2805
|
+
WebkitTextFillColor: "var(--spor-colors-text)";
|
|
2806
|
+
} | undefined;
|
|
2795
2807
|
};
|
|
2796
2808
|
floating: {
|
|
2797
2809
|
boxShadow?: "sm" | undefined;
|
|
@@ -2811,6 +2823,10 @@ declare const textareaRecipe: _chakra_ui_react.RecipeDefinition<{
|
|
|
2811
2823
|
outline: string;
|
|
2812
2824
|
outlineColor: string;
|
|
2813
2825
|
} | undefined;
|
|
2826
|
+
"&:-webkit-autofill, &:-webkit-autofill:focus"?: {
|
|
2827
|
+
boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset";
|
|
2828
|
+
WebkitTextFillColor: "var(--spor-colors-text)";
|
|
2829
|
+
} | undefined;
|
|
2814
2830
|
};
|
|
2815
2831
|
};
|
|
2816
2832
|
}>;
|
|
@@ -4297,8 +4313,9 @@ type ToastProps = {
|
|
|
4297
4313
|
id?: string;
|
|
4298
4314
|
action?: ToastAction;
|
|
4299
4315
|
closable?: boolean;
|
|
4316
|
+
inverted?: boolean;
|
|
4300
4317
|
} & Pick<BoxProps, "width">;
|
|
4301
|
-
declare const createToast: ({ text, variant, id, duration, width, action, closable, }: ToastProps) => string;
|
|
4318
|
+
declare const createToast: ({ text, variant, id, duration, width, action, closable, inverted, }: ToastProps) => string;
|
|
4302
4319
|
|
|
4303
4320
|
declare const Tooltip: React$1.FC<Tooltip$1.RootProps>;
|
|
4304
4321
|
declare const TooltipTrigger: ({ ref, children, ...props }: Tooltip$1.TriggerProps & {
|
|
@@ -4316,6 +4333,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4316
4333
|
neutral: {
|
|
4317
4334
|
backgroundColor: "surface";
|
|
4318
4335
|
color: "text";
|
|
4336
|
+
outlineColor: "outline";
|
|
4319
4337
|
"& svg": {
|
|
4320
4338
|
color: "icon";
|
|
4321
4339
|
};
|
|
@@ -4323,6 +4341,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4323
4341
|
grey: {
|
|
4324
4342
|
backgroundColor: "surface.neutral";
|
|
4325
4343
|
color: "text.neutral";
|
|
4344
|
+
outlineColor: "outline.neutral";
|
|
4326
4345
|
"& svg": {
|
|
4327
4346
|
color: "icon.neutral";
|
|
4328
4347
|
};
|
|
@@ -4330,6 +4349,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4330
4349
|
green: {
|
|
4331
4350
|
backgroundColor: "surface.success";
|
|
4332
4351
|
color: "text.success";
|
|
4352
|
+
outlineColor: "outline.success";
|
|
4333
4353
|
"& svg": {
|
|
4334
4354
|
color: "icon.success";
|
|
4335
4355
|
};
|
|
@@ -4337,6 +4357,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4337
4357
|
blue: {
|
|
4338
4358
|
backgroundColor: "surface.info";
|
|
4339
4359
|
color: "text.info";
|
|
4360
|
+
outlineColor: "outline.info";
|
|
4340
4361
|
"& svg": {
|
|
4341
4362
|
color: "icon.info";
|
|
4342
4363
|
};
|
|
@@ -4344,6 +4365,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4344
4365
|
cream: {
|
|
4345
4366
|
backgroundColor: "surface.warning";
|
|
4346
4367
|
color: "text.warning";
|
|
4368
|
+
outlineColor: "outline.warning";
|
|
4347
4369
|
"& svg": {
|
|
4348
4370
|
color: "icon.warning";
|
|
4349
4371
|
};
|
|
@@ -4351,6 +4373,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4351
4373
|
yellow: {
|
|
4352
4374
|
backgroundColor: "surface.notice";
|
|
4353
4375
|
color: "text.notice";
|
|
4376
|
+
outlineColor: "outline.notice";
|
|
4354
4377
|
"& svg": {
|
|
4355
4378
|
color: "icon.notice";
|
|
4356
4379
|
};
|
|
@@ -4358,6 +4381,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4358
4381
|
orange: {
|
|
4359
4382
|
backgroundColor: "surface.caution";
|
|
4360
4383
|
color: "text.caution";
|
|
4384
|
+
outlineColor: "outline.caution";
|
|
4361
4385
|
"& svg": {
|
|
4362
4386
|
color: "icon.caution";
|
|
4363
4387
|
};
|
|
@@ -4365,6 +4389,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4365
4389
|
red: {
|
|
4366
4390
|
backgroundColor: "surface.critical";
|
|
4367
4391
|
color: "text.critical";
|
|
4392
|
+
outlineColor: "outline.critical";
|
|
4368
4393
|
"& svg": {
|
|
4369
4394
|
color: "icon.critical";
|
|
4370
4395
|
};
|
|
@@ -4378,6 +4403,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4378
4403
|
_light: "pink";
|
|
4379
4404
|
_dark: "pink";
|
|
4380
4405
|
};
|
|
4406
|
+
outlineColor: "outline.error";
|
|
4381
4407
|
"& svg": {
|
|
4382
4408
|
color: {
|
|
4383
4409
|
_light: "pink";
|
|
@@ -4388,6 +4414,7 @@ declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
|
|
|
4388
4414
|
disabled: {
|
|
4389
4415
|
backgroundColor: "surface.disabled";
|
|
4390
4416
|
color: "text.disabled";
|
|
4417
|
+
outlineColor: "outline.disabled";
|
|
4391
4418
|
"& svg": {
|
|
4392
4419
|
color: "icon.disabled";
|
|
4393
4420
|
};
|