@vygruppen/spor-react 13.3.2 → 13.4.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/.turbo/turbo-build.log +12 -12
- package/.turbo/turbo-postinstall.log +2 -2
- package/CHANGELOG.md +12 -0
- package/__tests__/radio.test.tsx +69 -0
- package/dist/index.cjs +233 -115
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +56 -4
- package/dist/index.d.ts +56 -4
- package/dist/index.mjs +234 -116
- package/dist/index.mjs.map +1 -1
- package/package.json +9 -2
- package/setupTests.ts +84 -0
- package/src/input/Combobox.tsx +1 -0
- package/src/input/CountryCodeSelect.tsx +1 -0
- package/src/input/Field.tsx +8 -6
- package/src/input/FloatingLabel.tsx +2 -13
- package/src/input/Input.tsx +32 -15
- package/src/input/Label.tsx +2 -3
- package/src/input/PasswordInput.tsx +3 -1
- package/src/input/PhoneNumberInput.tsx +3 -1
- package/src/input/SearchInput.tsx +14 -3
- package/src/input/Select.tsx +23 -33
- package/src/theme/recipes/input.ts +15 -4
- package/src/theme/slot-recipes/anatomy.ts +1 -3
- package/src/theme/slot-recipes/breadcrumb.ts +0 -1
- package/src/theme/slot-recipes/field.ts +38 -4
- package/src/theme/slot-recipes/native-select.ts +15 -0
- package/src/theme/slot-recipes/select.ts +88 -35
- package/vitest.config.ts +12 -0
package/dist/index.d.cts
CHANGED
|
@@ -1117,7 +1117,38 @@ declare const ColorModeButton: ({ ref, ...props }: ColorModeButtonProps & {
|
|
|
1117
1117
|
ref?: React$1.Ref<HTMLButtonElement>;
|
|
1118
1118
|
}) => react_jsx_runtime.JSX.Element;
|
|
1119
1119
|
|
|
1120
|
-
declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText",
|
|
1120
|
+
declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText", {
|
|
1121
|
+
size: {
|
|
1122
|
+
sm: {
|
|
1123
|
+
label: {
|
|
1124
|
+
fontSize: ("mobile.xs" | "desktop.xs")[];
|
|
1125
|
+
paddingX: number;
|
|
1126
|
+
"&[data-float]": {
|
|
1127
|
+
fontSize: ("mobile.2xs" | "desktop.2xs")[];
|
|
1128
|
+
top: number;
|
|
1129
|
+
};
|
|
1130
|
+
top: "0.5rem";
|
|
1131
|
+
};
|
|
1132
|
+
helperText: {
|
|
1133
|
+
color: "text.subtle";
|
|
1134
|
+
lineHeight: "normal";
|
|
1135
|
+
fontSize: ("mobile.xs" | "desktop.xs")[];
|
|
1136
|
+
};
|
|
1137
|
+
};
|
|
1138
|
+
md: {
|
|
1139
|
+
label: {
|
|
1140
|
+
paddingX: number;
|
|
1141
|
+
fontSize: ("mobile.sm" | "desktop.sm")[];
|
|
1142
|
+
"&[data-float]": {
|
|
1143
|
+
fontSize: ("mobile.2xs" | "desktop.2xs")[];
|
|
1144
|
+
color: "text.subtle";
|
|
1145
|
+
top: "0.3rem";
|
|
1146
|
+
};
|
|
1147
|
+
top: "0.9rem";
|
|
1148
|
+
};
|
|
1149
|
+
};
|
|
1150
|
+
};
|
|
1151
|
+
}>;
|
|
1121
1152
|
|
|
1122
1153
|
type FieldVariantProps = RecipeVariantProps<typeof fieldSlotRecipe>;
|
|
1123
1154
|
type FieldBaseProps = {
|
|
@@ -1133,6 +1164,7 @@ type FieldBaseProps = {
|
|
|
1133
1164
|
shouldFloat?: boolean;
|
|
1134
1165
|
labelAsChild?: boolean;
|
|
1135
1166
|
gap?: string | number;
|
|
1167
|
+
size?: "sm" | "md";
|
|
1136
1168
|
};
|
|
1137
1169
|
type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
|
|
1138
1170
|
/**
|
|
@@ -2089,13 +2121,14 @@ declare const FilterChip: ({ ref, children, icon, onCheckedChange, ...rootProps
|
|
|
2089
2121
|
|
|
2090
2122
|
type ChakraInputProps = ComponentProps<typeof Input$1>;
|
|
2091
2123
|
|
|
2092
|
-
type InputProps = FieldProps & Exclude<ChakraInputProps, "
|
|
2124
|
+
type InputProps = FieldProps & Exclude<ChakraInputProps, "label" | "colorPalette" | "placeholder"> & {
|
|
2093
2125
|
/** The input's label */
|
|
2094
2126
|
label?: ReactNode;
|
|
2095
2127
|
/** Element that shows up to the left */
|
|
2096
2128
|
startElement?: React__default.ReactNode;
|
|
2097
2129
|
/** Element that shows up to the right */
|
|
2098
2130
|
endElement?: React__default.ReactNode;
|
|
2131
|
+
/** Override the font size of the start and end elements */
|
|
2099
2132
|
fontSize?: string;
|
|
2100
2133
|
};
|
|
2101
2134
|
/**
|
|
@@ -2127,7 +2160,7 @@ type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "col
|
|
|
2127
2160
|
*
|
|
2128
2161
|
* @see https://spor.vy.no/components/input
|
|
2129
2162
|
*/
|
|
2130
|
-
declare const Input: ({ ref, startElement, endElement, label, invalid, helperText, errorText, required, hidden, fontSize, labelAsChild, ...props }: InputProps & {
|
|
2163
|
+
declare const Input: ({ ref, startElement, endElement, label, invalid, helperText, errorText, required, hidden, fontSize, labelAsChild, size, ...props }: InputProps & {
|
|
2131
2164
|
ref?: React__default.Ref<HTMLInputElement | null>;
|
|
2132
2165
|
}) => react_jsx_runtime.JSX.Element;
|
|
2133
2166
|
|
|
@@ -2333,6 +2366,24 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
|
|
|
2333
2366
|
};
|
|
2334
2367
|
};
|
|
2335
2368
|
};
|
|
2369
|
+
size: {
|
|
2370
|
+
sm: {
|
|
2371
|
+
field: {
|
|
2372
|
+
paddingTop?: number | undefined;
|
|
2373
|
+
height?: number | undefined;
|
|
2374
|
+
fontSize?: "xs" | undefined;
|
|
2375
|
+
paddingX?: number | undefined;
|
|
2376
|
+
};
|
|
2377
|
+
};
|
|
2378
|
+
md: {
|
|
2379
|
+
field: {
|
|
2380
|
+
paddingX?: number | undefined;
|
|
2381
|
+
paddingTop?: number | undefined;
|
|
2382
|
+
height?: number | undefined;
|
|
2383
|
+
fontSize?: "mobile.md" | undefined;
|
|
2384
|
+
};
|
|
2385
|
+
};
|
|
2386
|
+
};
|
|
2336
2387
|
}>;
|
|
2337
2388
|
|
|
2338
2389
|
type NativeSelectVariantProps = RecipeVariantProps<typeof nativeSelectSlotRecipe>;
|
|
@@ -2602,8 +2653,9 @@ declare const SelectItemGroup: ({ ref, ...props }: SelectItemGroupProps & {
|
|
|
2602
2653
|
type SelectTriggerProps = Select$1.ControlProps & {
|
|
2603
2654
|
clearable?: boolean;
|
|
2604
2655
|
children?: React$1.ReactNode;
|
|
2656
|
+
size: "sm" | "md";
|
|
2605
2657
|
};
|
|
2606
|
-
declare const SelectTrigger: ({ ref, ...props }: SelectTriggerProps & {
|
|
2658
|
+
declare const SelectTrigger: ({ ref, size, ...props }: SelectTriggerProps & {
|
|
2607
2659
|
ref?: React$1.Ref<HTMLButtonElement>;
|
|
2608
2660
|
}) => react_jsx_runtime.JSX.Element;
|
|
2609
2661
|
type SelectContentProps = Select$1.ContentProps & {
|
package/dist/index.d.ts
CHANGED
|
@@ -1117,7 +1117,38 @@ declare const ColorModeButton: ({ ref, ...props }: ColorModeButtonProps & {
|
|
|
1117
1117
|
ref?: React$1.Ref<HTMLButtonElement>;
|
|
1118
1118
|
}) => react_jsx_runtime.JSX.Element;
|
|
1119
1119
|
|
|
1120
|
-
declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText",
|
|
1120
|
+
declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText", {
|
|
1121
|
+
size: {
|
|
1122
|
+
sm: {
|
|
1123
|
+
label: {
|
|
1124
|
+
fontSize: ("mobile.xs" | "desktop.xs")[];
|
|
1125
|
+
paddingX: number;
|
|
1126
|
+
"&[data-float]": {
|
|
1127
|
+
fontSize: ("mobile.2xs" | "desktop.2xs")[];
|
|
1128
|
+
top: number;
|
|
1129
|
+
};
|
|
1130
|
+
top: "0.5rem";
|
|
1131
|
+
};
|
|
1132
|
+
helperText: {
|
|
1133
|
+
color: "text.subtle";
|
|
1134
|
+
lineHeight: "normal";
|
|
1135
|
+
fontSize: ("mobile.xs" | "desktop.xs")[];
|
|
1136
|
+
};
|
|
1137
|
+
};
|
|
1138
|
+
md: {
|
|
1139
|
+
label: {
|
|
1140
|
+
paddingX: number;
|
|
1141
|
+
fontSize: ("mobile.sm" | "desktop.sm")[];
|
|
1142
|
+
"&[data-float]": {
|
|
1143
|
+
fontSize: ("mobile.2xs" | "desktop.2xs")[];
|
|
1144
|
+
color: "text.subtle";
|
|
1145
|
+
top: "0.3rem";
|
|
1146
|
+
};
|
|
1147
|
+
top: "0.9rem";
|
|
1148
|
+
};
|
|
1149
|
+
};
|
|
1150
|
+
};
|
|
1151
|
+
}>;
|
|
1121
1152
|
|
|
1122
1153
|
type FieldVariantProps = RecipeVariantProps<typeof fieldSlotRecipe>;
|
|
1123
1154
|
type FieldBaseProps = {
|
|
@@ -1133,6 +1164,7 @@ type FieldBaseProps = {
|
|
|
1133
1164
|
shouldFloat?: boolean;
|
|
1134
1165
|
labelAsChild?: boolean;
|
|
1135
1166
|
gap?: string | number;
|
|
1167
|
+
size?: "sm" | "md";
|
|
1136
1168
|
};
|
|
1137
1169
|
type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
|
|
1138
1170
|
/**
|
|
@@ -2089,13 +2121,14 @@ declare const FilterChip: ({ ref, children, icon, onCheckedChange, ...rootProps
|
|
|
2089
2121
|
|
|
2090
2122
|
type ChakraInputProps = ComponentProps<typeof Input$1>;
|
|
2091
2123
|
|
|
2092
|
-
type InputProps = FieldProps & Exclude<ChakraInputProps, "
|
|
2124
|
+
type InputProps = FieldProps & Exclude<ChakraInputProps, "label" | "colorPalette" | "placeholder"> & {
|
|
2093
2125
|
/** The input's label */
|
|
2094
2126
|
label?: ReactNode;
|
|
2095
2127
|
/** Element that shows up to the left */
|
|
2096
2128
|
startElement?: React__default.ReactNode;
|
|
2097
2129
|
/** Element that shows up to the right */
|
|
2098
2130
|
endElement?: React__default.ReactNode;
|
|
2131
|
+
/** Override the font size of the start and end elements */
|
|
2099
2132
|
fontSize?: string;
|
|
2100
2133
|
};
|
|
2101
2134
|
/**
|
|
@@ -2127,7 +2160,7 @@ type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "col
|
|
|
2127
2160
|
*
|
|
2128
2161
|
* @see https://spor.vy.no/components/input
|
|
2129
2162
|
*/
|
|
2130
|
-
declare const Input: ({ ref, startElement, endElement, label, invalid, helperText, errorText, required, hidden, fontSize, labelAsChild, ...props }: InputProps & {
|
|
2163
|
+
declare const Input: ({ ref, startElement, endElement, label, invalid, helperText, errorText, required, hidden, fontSize, labelAsChild, size, ...props }: InputProps & {
|
|
2131
2164
|
ref?: React__default.Ref<HTMLInputElement | null>;
|
|
2132
2165
|
}) => react_jsx_runtime.JSX.Element;
|
|
2133
2166
|
|
|
@@ -2333,6 +2366,24 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
|
|
|
2333
2366
|
};
|
|
2334
2367
|
};
|
|
2335
2368
|
};
|
|
2369
|
+
size: {
|
|
2370
|
+
sm: {
|
|
2371
|
+
field: {
|
|
2372
|
+
paddingTop?: number | undefined;
|
|
2373
|
+
height?: number | undefined;
|
|
2374
|
+
fontSize?: "xs" | undefined;
|
|
2375
|
+
paddingX?: number | undefined;
|
|
2376
|
+
};
|
|
2377
|
+
};
|
|
2378
|
+
md: {
|
|
2379
|
+
field: {
|
|
2380
|
+
paddingX?: number | undefined;
|
|
2381
|
+
paddingTop?: number | undefined;
|
|
2382
|
+
height?: number | undefined;
|
|
2383
|
+
fontSize?: "mobile.md" | undefined;
|
|
2384
|
+
};
|
|
2385
|
+
};
|
|
2386
|
+
};
|
|
2336
2387
|
}>;
|
|
2337
2388
|
|
|
2338
2389
|
type NativeSelectVariantProps = RecipeVariantProps<typeof nativeSelectSlotRecipe>;
|
|
@@ -2602,8 +2653,9 @@ declare const SelectItemGroup: ({ ref, ...props }: SelectItemGroupProps & {
|
|
|
2602
2653
|
type SelectTriggerProps = Select$1.ControlProps & {
|
|
2603
2654
|
clearable?: boolean;
|
|
2604
2655
|
children?: React$1.ReactNode;
|
|
2656
|
+
size: "sm" | "md";
|
|
2605
2657
|
};
|
|
2606
|
-
declare const SelectTrigger: ({ ref, ...props }: SelectTriggerProps & {
|
|
2658
|
+
declare const SelectTrigger: ({ ref, size, ...props }: SelectTriggerProps & {
|
|
2607
2659
|
ref?: React$1.Ref<HTMLButtonElement>;
|
|
2608
2660
|
}) => react_jsx_runtime.JSX.Element;
|
|
2609
2661
|
type SelectContentProps = Select$1.ContentProps & {
|