@vygruppen/spor-react 9.1.0 → 9.2.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 +20 -0
- package/dist/{CountryCodeSelect-N6JNGXLL.mjs → CountryCodeSelect-FR7IFLQR.mjs} +1 -1
- package/dist/{chunk-AS7NY5TY.mjs → chunk-EVOFJL5T.mjs} +23 -16
- package/dist/index.d.mts +15 -8
- package/dist/index.d.ts +15 -8
- package/dist/index.js +22 -16
- package/dist/index.mjs +1 -1
- package/package.json +1 -1
- package/src/input/CardSelect.tsx +6 -5
- package/src/theme/components/card-select.ts +7 -1
- package/src/theme/components/card.ts +3 -3
- package/src/theme/components/link.ts +1 -2
- package/src/theme/index.ts +8 -5
package/.turbo/turbo-build.log
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
|
2
|
-
> @vygruppen/spor-react@9.1
|
2
|
+
> @vygruppen/spor-react@9.2.1 build
|
3
3
|
> tsup src/index.tsx --dts --treeshake --format cjs,esm
|
4
4
|
|
5
5
|
[34mCLI[39m Building entry: src/index.tsx
|
@@ -9,12 +9,12 @@
|
|
9
9
|
[34mCJS[39m Build start
|
10
10
|
[34mESM[39m Build start
|
11
11
|
[34mDTS[39m Build start
|
12
|
-
[32mCJS[39m [1mdist/index.js [22m[
|
13
|
-
[32mCJS[39m ⚡️ Build success in
|
12
|
+
[32mCJS[39m [1mdist/index.js [22m[32m488.25 KB[39m
|
13
|
+
[32mCJS[39m ⚡️ Build success in 2045ms
|
14
14
|
[32mESM[39m [1mdist/index.mjs [22m[32m2.02 KB[39m
|
15
|
-
[32mESM[39m [1mdist/CountryCodeSelect-
|
16
|
-
[32mESM[39m [1mdist/chunk-
|
17
|
-
[32mESM[39m ⚡️ Build success in
|
18
|
-
[32mDTS[39m ⚡️ Build success in
|
19
|
-
[32mDTS[39m [1mdist/index.d.ts [22m[32m318.
|
20
|
-
[32mDTS[39m [1mdist/index.d.mts [22m[32m318.
|
15
|
+
[32mESM[39m [1mdist/CountryCodeSelect-FR7IFLQR.mjs [22m[32m1.19 KB[39m
|
16
|
+
[32mESM[39m [1mdist/chunk-EVOFJL5T.mjs [22m[32m382.27 KB[39m
|
17
|
+
[32mESM[39m ⚡️ Build success in 2046ms
|
18
|
+
[32mDTS[39m ⚡️ Build success in 12277ms
|
19
|
+
[32mDTS[39m [1mdist/index.d.ts [22m[32m318.44 KB[39m
|
20
|
+
[32mDTS[39m [1mdist/index.d.mts [22m[32m318.44 KB[39m
|
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,25 @@
|
|
1
1
|
# @vygruppen/spor-react
|
2
2
|
|
3
|
+
## 9.2.1
|
4
|
+
|
5
|
+
### Patch Changes
|
6
|
+
|
7
|
+
- c82f7eb: Set the text color of card selects"
|
8
|
+
- Updated dependencies [c82f7eb]
|
9
|
+
- @vygruppen/spor-design-tokens@3.5.2
|
10
|
+
|
11
|
+
## 9.2.0
|
12
|
+
|
13
|
+
### Minor Changes
|
14
|
+
|
15
|
+
- 8568d79: CardSelect: Add support for not having a visual label, by passing in aria-label instead of label prop
|
16
|
+
|
17
|
+
### Patch Changes
|
18
|
+
|
19
|
+
- 84b4bbf: Change the way cards and card selects are rendered
|
20
|
+
- Updated dependencies [84b4bbf]
|
21
|
+
- @vygruppen/spor-design-tokens@3.5.1
|
22
|
+
|
3
23
|
## 9.1.0
|
4
24
|
|
5
25
|
### Minor Changes
|
@@ -2501,7 +2501,6 @@ var CardSelect = forwardRef(
|
|
2501
2501
|
isOpen: externalIsOpen,
|
2502
2502
|
defaultOpen = false,
|
2503
2503
|
onToggle,
|
2504
|
-
label,
|
2505
2504
|
icon,
|
2506
2505
|
children,
|
2507
2506
|
width = "fit-content",
|
@@ -2510,6 +2509,7 @@ var CardSelect = forwardRef(
|
|
2510
2509
|
withChevron = true,
|
2511
2510
|
...props
|
2512
2511
|
}, externalRef) => {
|
2512
|
+
const label = "label" in props ? props.label : props["aria-label"];
|
2513
2513
|
const internalRef = useRef(null);
|
2514
2514
|
const triggerRef = externalRef ?? internalRef;
|
2515
2515
|
const state2 = useOverlayTriggerState({
|
@@ -2535,11 +2535,12 @@ var CardSelect = forwardRef(
|
|
2535
2535
|
type: "button",
|
2536
2536
|
ref: triggerRef,
|
2537
2537
|
sx: styles3.trigger,
|
2538
|
+
"aria-label": label,
|
2538
2539
|
...buttonProps,
|
2539
2540
|
width,
|
2540
2541
|
"data-attachable": true
|
2541
2542
|
},
|
2542
|
-
/* @__PURE__ */ React69__default.createElement(Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React69__default.createElement(Box, { as: "span" }, label), withChevron ? /* @__PURE__ */ React69__default.createElement(
|
2543
|
+
/* @__PURE__ */ React69__default.createElement(Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React69__default.createElement(Box, { as: "span", display: props["aria-label"] ? "none" : "inline" }, label), withChevron ? /* @__PURE__ */ React69__default.createElement(
|
2543
2544
|
ChevronIcon,
|
2544
2545
|
{
|
2545
2546
|
transform: state2.isOpen ? "rotate(180deg)" : "none"
|
@@ -3340,7 +3341,7 @@ var texts14 = createTexts({
|
|
3340
3341
|
sv: "Telefonnummer"
|
3341
3342
|
}
|
3342
3343
|
});
|
3343
|
-
var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-
|
3344
|
+
var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-FR7IFLQR.mjs'));
|
3344
3345
|
var Radio = forwardRef((props, ref) => {
|
3345
3346
|
return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
|
3346
3347
|
});
|
@@ -10584,7 +10585,7 @@ var getColorSchemeBaseProps = (props) => {
|
|
10584
10585
|
...baseBorder("default", props),
|
10585
10586
|
backgroundColor: mode(
|
10586
10587
|
"white",
|
10587
|
-
`color-mix(in srgb, white 10%, var(--spor-colors-
|
10588
|
+
`color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
|
10588
10589
|
)(props),
|
10589
10590
|
color: "inherit"
|
10590
10591
|
};
|
@@ -10633,7 +10634,7 @@ var getColorSchemeHoverProps = (props) => {
|
|
10633
10634
|
return {
|
10634
10635
|
backgroundColor: mode(
|
10635
10636
|
"white",
|
10636
|
-
`color-mix(in srgb, white 20%, var(--spor-colors-
|
10637
|
+
`color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`
|
10637
10638
|
)(props),
|
10638
10639
|
...floatingBorder("hover", props)
|
10639
10640
|
};
|
@@ -10654,7 +10655,7 @@ var getColorSchemeActiveProps = (props) => {
|
|
10654
10655
|
switch (colorScheme) {
|
10655
10656
|
case "white":
|
10656
10657
|
return {
|
10657
|
-
backgroundColor: mode("
|
10658
|
+
backgroundColor: mode("bg.tertiary.light", `bg.default.dark`)(props),
|
10658
10659
|
...floatingBorder("active", props)
|
10659
10660
|
};
|
10660
10661
|
case "grey":
|
@@ -10669,8 +10670,6 @@ var getColorSchemeActiveProps = (props) => {
|
|
10669
10670
|
};
|
10670
10671
|
}
|
10671
10672
|
};
|
10672
|
-
|
10673
|
-
// src/theme/components/card-select.ts
|
10674
10673
|
var parts3 = anatomy("card-select").parts("trigger", "card");
|
10675
10674
|
var helpers4 = createMultiStyleConfigHelpers(parts3.keys);
|
10676
10675
|
var config9 = helpers4.defineMultiStyleConfig({
|
@@ -10681,6 +10680,7 @@ var config9 = helpers4.defineMultiStyleConfig({
|
|
10681
10680
|
alignItems: "center",
|
10682
10681
|
transitionProperty: "outline",
|
10683
10682
|
transitionDuration: "fast",
|
10683
|
+
...baseText("default", props),
|
10684
10684
|
...focusVisibleStyles(props)
|
10685
10685
|
},
|
10686
10686
|
card: {
|
@@ -10688,7 +10688,10 @@ var config9 = helpers4.defineMultiStyleConfig({
|
|
10688
10688
|
boxShadow: "md",
|
10689
10689
|
padding: 3,
|
10690
10690
|
...baseText("default", props),
|
10691
|
-
|
10691
|
+
backgroundColor: mode(
|
10692
|
+
"white",
|
10693
|
+
`color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
|
10694
|
+
)(props)
|
10692
10695
|
}
|
10693
10696
|
}),
|
10694
10697
|
variants: {
|
@@ -10737,7 +10740,8 @@ var config9 = helpers4.defineMultiStyleConfig({
|
|
10737
10740
|
_expanded: {
|
10738
10741
|
...floatingBackground("active", props)
|
10739
10742
|
}
|
10740
|
-
}
|
10743
|
+
},
|
10744
|
+
card: {}
|
10741
10745
|
})
|
10742
10746
|
},
|
10743
10747
|
sizes: {
|
@@ -12097,7 +12101,7 @@ var config24 = defineStyleConfig$1({
|
|
12097
12101
|
}),
|
12098
12102
|
variants: {
|
12099
12103
|
primary: (props) => ({
|
12100
|
-
...
|
12104
|
+
...baseText("default", props),
|
12101
12105
|
_hover: {
|
12102
12106
|
...brandText("hover", props),
|
12103
12107
|
...brandBackground("hover", props)
|
@@ -13269,11 +13273,14 @@ var brandTheme = {
|
|
13269
13273
|
["VyDigital" /* VyDigital */]: {},
|
13270
13274
|
["VyUtvikling" /* VyUtvikling */]: {
|
13271
13275
|
colors: {
|
13272
|
-
|
13273
|
-
|
13274
|
-
|
13275
|
-
|
13276
|
-
|
13276
|
+
bg: {
|
13277
|
+
default: {
|
13278
|
+
dark: colors2.darkGrey
|
13279
|
+
}
|
13280
|
+
},
|
13281
|
+
surface: {
|
13282
|
+
default: {
|
13283
|
+
dark: colors2.darkGrey
|
13277
13284
|
}
|
13278
13285
|
}
|
13279
13286
|
}
|
package/dist/index.d.mts
CHANGED
@@ -657,8 +657,6 @@ type CardSelectProps = BoxProps & {
|
|
657
657
|
defaultOpen?: boolean;
|
658
658
|
/** Callback for when the card select opens or closes. */
|
659
659
|
onToggle?: (isOpen: boolean) => void;
|
660
|
-
/** The text of the trigger button */
|
661
|
-
label: string;
|
662
660
|
/** An optional trigger button icon, rendered to the left of the label */
|
663
661
|
icon?: React.ReactNode;
|
664
662
|
/** The content of the card select */
|
@@ -669,7 +667,11 @@ type CardSelectProps = BoxProps & {
|
|
669
667
|
placement?: AriaPositionProps["placement"];
|
670
668
|
/** Whether or not to show the chevron. Defaults to true */
|
671
669
|
withChevron?: boolean;
|
672
|
-
}
|
670
|
+
} & ({
|
671
|
+
label: string;
|
672
|
+
} | {
|
673
|
+
"aria-label": string;
|
674
|
+
});
|
673
675
|
/**
|
674
676
|
* A card select component.
|
675
677
|
*
|
@@ -3172,6 +3174,7 @@ declare const theme: {
|
|
3172
3174
|
outlineStyle: string;
|
3173
3175
|
outlineOffset: string;
|
3174
3176
|
};
|
3177
|
+
color: string;
|
3175
3178
|
appearance: string;
|
3176
3179
|
display: string;
|
3177
3180
|
alignItems: string;
|
@@ -3307,6 +3310,7 @@ declare const theme: {
|
|
3307
3310
|
backgroundColor: string;
|
3308
3311
|
boxShadow: string;
|
3309
3312
|
};
|
3313
|
+
card: {};
|
3310
3314
|
};
|
3311
3315
|
} | undefined;
|
3312
3316
|
defaultProps?: {
|
@@ -8686,11 +8690,14 @@ declare const brandTheme: {
|
|
8686
8690
|
VyDigital: {};
|
8687
8691
|
VyUtvikling: {
|
8688
8692
|
colors: {
|
8689
|
-
|
8690
|
-
|
8691
|
-
|
8692
|
-
|
8693
|
-
|
8693
|
+
bg: {
|
8694
|
+
default: {
|
8695
|
+
dark: string;
|
8696
|
+
};
|
8697
|
+
};
|
8698
|
+
surface: {
|
8699
|
+
default: {
|
8700
|
+
dark: string;
|
8694
8701
|
};
|
8695
8702
|
};
|
8696
8703
|
};
|
package/dist/index.d.ts
CHANGED
@@ -657,8 +657,6 @@ type CardSelectProps = BoxProps & {
|
|
657
657
|
defaultOpen?: boolean;
|
658
658
|
/** Callback for when the card select opens or closes. */
|
659
659
|
onToggle?: (isOpen: boolean) => void;
|
660
|
-
/** The text of the trigger button */
|
661
|
-
label: string;
|
662
660
|
/** An optional trigger button icon, rendered to the left of the label */
|
663
661
|
icon?: React.ReactNode;
|
664
662
|
/** The content of the card select */
|
@@ -669,7 +667,11 @@ type CardSelectProps = BoxProps & {
|
|
669
667
|
placement?: AriaPositionProps["placement"];
|
670
668
|
/** Whether or not to show the chevron. Defaults to true */
|
671
669
|
withChevron?: boolean;
|
672
|
-
}
|
670
|
+
} & ({
|
671
|
+
label: string;
|
672
|
+
} | {
|
673
|
+
"aria-label": string;
|
674
|
+
});
|
673
675
|
/**
|
674
676
|
* A card select component.
|
675
677
|
*
|
@@ -3172,6 +3174,7 @@ declare const theme: {
|
|
3172
3174
|
outlineStyle: string;
|
3173
3175
|
outlineOffset: string;
|
3174
3176
|
};
|
3177
|
+
color: string;
|
3175
3178
|
appearance: string;
|
3176
3179
|
display: string;
|
3177
3180
|
alignItems: string;
|
@@ -3307,6 +3310,7 @@ declare const theme: {
|
|
3307
3310
|
backgroundColor: string;
|
3308
3311
|
boxShadow: string;
|
3309
3312
|
};
|
3313
|
+
card: {};
|
3310
3314
|
};
|
3311
3315
|
} | undefined;
|
3312
3316
|
defaultProps?: {
|
@@ -8686,11 +8690,14 @@ declare const brandTheme: {
|
|
8686
8690
|
VyDigital: {};
|
8687
8691
|
VyUtvikling: {
|
8688
8692
|
colors: {
|
8689
|
-
|
8690
|
-
|
8691
|
-
|
8692
|
-
|
8693
|
-
|
8693
|
+
bg: {
|
8694
|
+
default: {
|
8695
|
+
dark: string;
|
8696
|
+
};
|
8697
|
+
};
|
8698
|
+
surface: {
|
8699
|
+
default: {
|
8700
|
+
dark: string;
|
8694
8701
|
};
|
8695
8702
|
};
|
8696
8703
|
};
|
package/dist/index.js
CHANGED
@@ -2247,7 +2247,6 @@ var init_CardSelect = __esm({
|
|
2247
2247
|
isOpen: externalIsOpen,
|
2248
2248
|
defaultOpen = false,
|
2249
2249
|
onToggle,
|
2250
|
-
label,
|
2251
2250
|
icon,
|
2252
2251
|
children,
|
2253
2252
|
width = "fit-content",
|
@@ -2256,6 +2255,7 @@ var init_CardSelect = __esm({
|
|
2256
2255
|
withChevron = true,
|
2257
2256
|
...props
|
2258
2257
|
}, externalRef) => {
|
2258
|
+
const label = "label" in props ? props.label : props["aria-label"];
|
2259
2259
|
const internalRef = React69.useRef(null);
|
2260
2260
|
const triggerRef = externalRef ?? internalRef;
|
2261
2261
|
const state2 = reactStately.useOverlayTriggerState({
|
@@ -2281,11 +2281,12 @@ var init_CardSelect = __esm({
|
|
2281
2281
|
type: "button",
|
2282
2282
|
ref: triggerRef,
|
2283
2283
|
sx: styles3.trigger,
|
2284
|
+
"aria-label": label,
|
2284
2285
|
...buttonProps,
|
2285
2286
|
width,
|
2286
2287
|
"data-attachable": true
|
2287
2288
|
},
|
2288
|
-
/* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span" }, label), withChevron ? /* @__PURE__ */ React69__namespace.default.createElement(
|
2289
|
+
/* @__PURE__ */ React69__namespace.default.createElement(react.Flex, { gap: 1.5, alignItems: "center" }, icon, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { as: "span", display: props["aria-label"] ? "none" : "inline" }, label), withChevron ? /* @__PURE__ */ React69__namespace.default.createElement(
|
2289
2290
|
ChevronIcon,
|
2290
2291
|
{
|
2291
2292
|
transform: state2.isOpen ? "rotate(180deg)" : "none"
|
@@ -12078,7 +12079,7 @@ var init_card2 = __esm({
|
|
12078
12079
|
...baseBorder("default", props),
|
12079
12080
|
backgroundColor: themeTools.mode(
|
12080
12081
|
"white",
|
12081
|
-
`color-mix(in srgb, white 10%, var(--spor-colors-
|
12082
|
+
`color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
|
12082
12083
|
)(props),
|
12083
12084
|
color: "inherit"
|
12084
12085
|
};
|
@@ -12109,7 +12110,7 @@ var init_card2 = __esm({
|
|
12109
12110
|
return {
|
12110
12111
|
backgroundColor: themeTools.mode(
|
12111
12112
|
"white",
|
12112
|
-
`color-mix(in srgb, white 20%, var(--spor-colors-
|
12113
|
+
`color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`
|
12113
12114
|
)(props),
|
12114
12115
|
...floatingBorder("hover", props)
|
12115
12116
|
};
|
@@ -12130,7 +12131,7 @@ var init_card2 = __esm({
|
|
12130
12131
|
switch (colorScheme) {
|
12131
12132
|
case "white":
|
12132
12133
|
return {
|
12133
|
-
backgroundColor: themeTools.mode("
|
12134
|
+
backgroundColor: themeTools.mode("bg.tertiary.light", `bg.default.dark`)(props),
|
12134
12135
|
...floatingBorder("active", props)
|
12135
12136
|
};
|
12136
12137
|
case "grey":
|
@@ -12147,8 +12148,6 @@ var init_card2 = __esm({
|
|
12147
12148
|
};
|
12148
12149
|
}
|
12149
12150
|
});
|
12150
|
-
|
12151
|
-
// src/theme/components/card-select.ts
|
12152
12151
|
var parts3, helpers4, config9, card_select_default;
|
12153
12152
|
var init_card_select = __esm({
|
12154
12153
|
"src/theme/components/card-select.ts"() {
|
@@ -12168,6 +12167,7 @@ var init_card_select = __esm({
|
|
12168
12167
|
alignItems: "center",
|
12169
12168
|
transitionProperty: "outline",
|
12170
12169
|
transitionDuration: "fast",
|
12170
|
+
...baseText("default", props),
|
12171
12171
|
...focusVisibleStyles(props)
|
12172
12172
|
},
|
12173
12173
|
card: {
|
@@ -12175,7 +12175,10 @@ var init_card_select = __esm({
|
|
12175
12175
|
boxShadow: "md",
|
12176
12176
|
padding: 3,
|
12177
12177
|
...baseText("default", props),
|
12178
|
-
|
12178
|
+
backgroundColor: themeTools.mode(
|
12179
|
+
"white",
|
12180
|
+
`color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
|
12181
|
+
)(props)
|
12179
12182
|
}
|
12180
12183
|
}),
|
12181
12184
|
variants: {
|
@@ -12224,7 +12227,8 @@ var init_card_select = __esm({
|
|
12224
12227
|
_expanded: {
|
12225
12228
|
...floatingBackground("active", props)
|
12226
12229
|
}
|
12227
|
-
}
|
12230
|
+
},
|
12231
|
+
card: {}
|
12228
12232
|
})
|
12229
12233
|
},
|
12230
12234
|
sizes: {
|
@@ -13675,7 +13679,6 @@ var init_line_icon = __esm({
|
|
13675
13679
|
var config24, link_default;
|
13676
13680
|
var init_link2 = __esm({
|
13677
13681
|
"src/theme/components/link.ts"() {
|
13678
|
-
init_accent_utils();
|
13679
13682
|
init_base_utils();
|
13680
13683
|
init_brand_utils();
|
13681
13684
|
init_focus_utils();
|
@@ -13712,7 +13715,7 @@ var init_link2 = __esm({
|
|
13712
13715
|
}),
|
13713
13716
|
variants: {
|
13714
13717
|
primary: (props) => ({
|
13715
|
-
...
|
13718
|
+
...baseText("default", props),
|
13716
13719
|
_hover: {
|
13717
13720
|
...brandText("hover", props),
|
13718
13721
|
...brandBackground("hover", props)
|
@@ -15129,11 +15132,14 @@ var init_theme = __esm({
|
|
15129
15132
|
["VyDigital" /* VyDigital */]: {},
|
15130
15133
|
["VyUtvikling" /* VyUtvikling */]: {
|
15131
15134
|
colors: {
|
15132
|
-
|
15133
|
-
|
15134
|
-
|
15135
|
-
|
15136
|
-
|
15135
|
+
bg: {
|
15136
|
+
default: {
|
15137
|
+
dark: colors2.darkGrey
|
15138
|
+
}
|
15139
|
+
},
|
15140
|
+
surface: {
|
15141
|
+
default: {
|
15142
|
+
dark: colors2.darkGrey
|
15137
15143
|
}
|
15138
15144
|
}
|
15139
15145
|
}
|
package/dist/index.mjs
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-
|
1
|
+
export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-EVOFJL5T.mjs';
|
package/package.json
CHANGED
package/src/input/CardSelect.tsx
CHANGED
@@ -33,8 +33,6 @@ type CardSelectProps = BoxProps & {
|
|
33
33
|
defaultOpen?: boolean;
|
34
34
|
/** Callback for when the card select opens or closes. */
|
35
35
|
onToggle?: (isOpen: boolean) => void;
|
36
|
-
/** The text of the trigger button */
|
37
|
-
label: string;
|
38
36
|
/** An optional trigger button icon, rendered to the left of the label */
|
39
37
|
icon?: React.ReactNode;
|
40
38
|
/** The content of the card select */
|
@@ -45,7 +43,7 @@ type CardSelectProps = BoxProps & {
|
|
45
43
|
placement?: AriaPositionProps["placement"];
|
46
44
|
/** Whether or not to show the chevron. Defaults to true */
|
47
45
|
withChevron?: boolean;
|
48
|
-
};
|
46
|
+
} & ({ label: string } | { "aria-label": string });
|
49
47
|
|
50
48
|
/**
|
51
49
|
* A card select component.
|
@@ -69,7 +67,6 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
|
|
69
67
|
isOpen: externalIsOpen,
|
70
68
|
defaultOpen = false,
|
71
69
|
onToggle,
|
72
|
-
label,
|
73
70
|
icon,
|
74
71
|
children,
|
75
72
|
width = "fit-content",
|
@@ -80,6 +77,7 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
|
|
80
77
|
},
|
81
78
|
externalRef,
|
82
79
|
) => {
|
80
|
+
const label = "label" in props ? props.label : props["aria-label"];
|
83
81
|
const internalRef = useRef<HTMLButtonElement>(null);
|
84
82
|
const triggerRef = (externalRef ??
|
85
83
|
internalRef) as React.RefObject<HTMLButtonElement>;
|
@@ -112,13 +110,16 @@ export const CardSelect = forwardRef<CardSelectProps, "button">(
|
|
112
110
|
type="button"
|
113
111
|
ref={triggerRef}
|
114
112
|
sx={styles.trigger}
|
113
|
+
aria-label={label}
|
115
114
|
{...buttonProps}
|
116
115
|
width={width}
|
117
116
|
data-attachable
|
118
117
|
>
|
119
118
|
<Flex gap={1.5} alignItems="center">
|
120
119
|
{icon}
|
121
|
-
<Box as="span"
|
120
|
+
<Box as="span" display={props["aria-label"] ? "none" : "inline"}>
|
121
|
+
{label}
|
122
|
+
</Box>
|
122
123
|
{withChevron ? (
|
123
124
|
<ChevronIcon
|
124
125
|
transform={state.isOpen ? "rotate(180deg)" : "none"}
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { anatomy } from "@chakra-ui/anatomy";
|
2
2
|
import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
|
3
|
+
import { mode } from "@chakra-ui/theme-tools";
|
3
4
|
import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
|
4
5
|
import { floatingBackground, floatingBorder } from "../utils/floating-utils";
|
5
6
|
import { focusVisibleStyles } from "../utils/focus-utils";
|
@@ -16,6 +17,7 @@ const config = helpers.defineMultiStyleConfig({
|
|
16
17
|
alignItems: "center",
|
17
18
|
transitionProperty: "outline",
|
18
19
|
transitionDuration: "fast",
|
20
|
+
...baseText("default", props),
|
19
21
|
...focusVisibleStyles(props),
|
20
22
|
},
|
21
23
|
card: {
|
@@ -23,7 +25,10 @@ const config = helpers.defineMultiStyleConfig({
|
|
23
25
|
boxShadow: "md",
|
24
26
|
padding: 3,
|
25
27
|
...baseText("default", props),
|
26
|
-
|
28
|
+
backgroundColor: mode(
|
29
|
+
"white",
|
30
|
+
`color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
|
31
|
+
)(props),
|
27
32
|
},
|
28
33
|
}),
|
29
34
|
variants: {
|
@@ -73,6 +78,7 @@ const config = helpers.defineMultiStyleConfig({
|
|
73
78
|
...floatingBackground("active", props),
|
74
79
|
},
|
75
80
|
},
|
81
|
+
card: {},
|
76
82
|
}),
|
77
83
|
},
|
78
84
|
sizes: {
|
@@ -85,7 +85,7 @@ const getColorSchemeBaseProps = (props: CardThemeProps) => {
|
|
85
85
|
...baseBorder("default", props),
|
86
86
|
backgroundColor: mode(
|
87
87
|
"white",
|
88
|
-
`color-mix(in srgb, white 10%, var(--spor-colors-
|
88
|
+
`color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`,
|
89
89
|
)(props),
|
90
90
|
color: "inherit",
|
91
91
|
};
|
@@ -134,7 +134,7 @@ const getColorSchemeHoverProps = (props: CardThemeProps) => {
|
|
134
134
|
return {
|
135
135
|
backgroundColor: mode(
|
136
136
|
"white",
|
137
|
-
`color-mix(in srgb, white 20%, var(--spor-colors-
|
137
|
+
`color-mix(in srgb, white 20%, var(--spor-colors-bg-default-dark))`,
|
138
138
|
)(props),
|
139
139
|
...floatingBorder("hover", props),
|
140
140
|
};
|
@@ -154,7 +154,7 @@ const getColorSchemeActiveProps = (props: CardThemeProps) => {
|
|
154
154
|
switch (colorScheme) {
|
155
155
|
case "white":
|
156
156
|
return {
|
157
|
-
backgroundColor: mode("
|
157
|
+
backgroundColor: mode("bg.tertiary.light", `bg.default.dark`)(props),
|
158
158
|
...floatingBorder("active", props),
|
159
159
|
};
|
160
160
|
case "grey":
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import { defineStyleConfig } from "@chakra-ui/react";
|
2
2
|
import { mode } from "@chakra-ui/theme-tools";
|
3
|
-
import { accentText } from "../utils/accent-utils";
|
4
3
|
import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
|
5
4
|
import { brandBackground, brandText } from "../utils/brand-utils";
|
6
5
|
import { focusVisibleStyles } from "../utils/focus-utils";
|
@@ -41,7 +40,7 @@ const config = defineStyleConfig({
|
|
41
40
|
}),
|
42
41
|
variants: {
|
43
42
|
primary: (props) => ({
|
44
|
-
...
|
43
|
+
...baseText("default", props),
|
45
44
|
_hover: {
|
46
45
|
...brandText("hover", props),
|
47
46
|
...brandBackground("hover", props),
|
package/src/theme/index.ts
CHANGED
@@ -22,11 +22,14 @@ export const brandTheme = {
|
|
22
22
|
[Brand.VyDigital]: {},
|
23
23
|
[Brand.VyUtvikling]: {
|
24
24
|
colors: {
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
25
|
+
bg: {
|
26
|
+
default: {
|
27
|
+
dark: foundations.colors.darkGrey,
|
28
|
+
},
|
29
|
+
},
|
30
|
+
surface: {
|
31
|
+
default: {
|
32
|
+
dark: foundations.colors.darkGrey,
|
30
33
|
},
|
31
34
|
},
|
32
35
|
},
|