@vygruppen/spor-react 12.24.7 → 12.24.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.24.7",
+  "version": "12.24.8",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -68,8 +68,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/tsconfig": "0.1.1",
-    "@vygruppen/eslint-config": "2.1.0"
+    "@vygruppen/eslint-config": "2.1.0",
+    "@vygruppen/tsconfig": "0.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/input/NumericStepper.tsx

@@ -132,6 +132,7 @@ export const NumericStepper = React.forwardRef<
           }
         }}
         disabled={disabled || value <= minValue}
+        withStepLabel={stepSize != 1}
       />
       {withInput ? (
         <Input
@@ -187,6 +188,7 @@ export const NumericStepper = React.forwardRef<
         )}
         onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
         disabled={disabled || value >= maxValue}
+        withStepLabel={stepSize != 1}
       />
     </Field>
   );
@@ -206,6 +208,8 @@ type VerySmallButtonProps = {
   disabled?: boolean;
   /** The ID of the button */
   id?: string;
+  /** Whether or not the stepsize is visible in the button */
+  withStepLabel?: boolean;
 };
 
 /** Internal override for extra small icon buttons */
@@ -213,15 +217,16 @@ const VerySmallButton = React.forwardRef<
   HTMLButtonElement,
   VerySmallButtonProps
 >((props, ref) => {
+  const { withStepLabel = false, ...rest } = props;
   const recipe = useSlotRecipe({ key: "numericStepper" });
-  const styles = recipe({ colorPalette: "default" });
+  const styles = recipe({ withStepLabel });
   return (
     <IconButton
       variant="primary"
       size="xs"
       css={styles.button}
       ref={ref}
-      {...props}
+      {...rest}
     />
   );
 });

package/src/layout/RadioCard.tsx

@@ -36,17 +36,24 @@ type RadioCardItemProps = Exclude<
   RadioCardVariantProps & {
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
     ariaLabel?: string;
+    value?: string;
   };
 
 export const RadioCard = forwardRef<HTMLInputElement, RadioCardItemProps>(
   (props, ref) => {
-    const { inputProps, children } = props;
+    const { inputProps, children, value } = props;
 
     return (
       <ChakraRadioCard.Item {...props}>
-        <ChakraRadioCard.ItemHiddenInput ref={ref} {...inputProps} />
+        <ChakraRadioCard.ItemHiddenInput
+          ref={ref}
+          {...inputProps}
+          aria-label={value}
+        />
 
-        <ChakraRadioCard.ItemControl>{children}</ChakraRadioCard.ItemControl>
+        <ChakraRadioCard.ItemControl aria-hidden={value ? true : false}>
+          {children}
+        </ChakraRadioCard.ItemControl>
       </ChakraRadioCard.Item>
     );
   },

package/src/theme/slot-recipes/numeric-stepper.ts

@@ -66,4 +66,15 @@ export const numericStepperRecipe = defineSlotRecipe({
       },
     },
   },
+
+  variants: {
+    withStepLabel: {
+      true: {
+        button: {
+          paddingInline: "1 !important",
+        },
+      },
+      false: {},
+    },
+  },
 });