@vygruppen/spor-react 12.12.0 → 12.13.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.12.0",
+  "version": "12.13.0",
   "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/eslint-config": "1.2.3",
-    "@vygruppen/tsconfig": "0.1.1"
+    "@vygruppen/tsconfig": "0.1.1",
+    "@vygruppen/eslint-config": "1.2.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/input/Input.tsx

@@ -65,6 +65,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
       helperText,
       errorText,
       required,
+      hidden,
       ...props
     },
     ref,
@@ -78,6 +79,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         invalid={invalid}
         helperText={helperText}
         required={required}
+        hidden={hidden}
         errorText={errorText}
         id={props.id}
         label={

package/src/input/NumericStepper.tsx

@@ -35,8 +35,6 @@ export type NumericStepperProps = FieldBaseProps &
     withInput?: boolean;
     /** The amount to increase/decrease when pressing +/- */
     stepSize?: number;
-    /** Whether to show the number input when value is zero  */
-    showZero?: boolean;
     /** Name added to the aria-label of subtract and add buttons. */
     ariaLabelContext?: { singular: string; plural: string };
   } & Omit<BoxProps, "onChange">;
@@ -80,7 +78,6 @@ export const NumericStepper = React.forwardRef<
     disabled,
     withInput = true,
     stepSize = 1,
-    showZero = false,
     ariaLabelContext = { singular: "", plural: "" },
     ...rest
   } = props;
@@ -118,8 +115,7 @@ export const NumericStepper = React.forwardRef<
             focusOnAddButton();
           }
         }}
-        visibility={value <= minValue ? "hidden" : "visible"}
-        disabled={disabled}
+        disabled={disabled || value <= minValue}
         id={value <= minValue ? undefined : idProp}
       />
       {withInput ? (
@@ -129,10 +125,9 @@ export const NumericStepper = React.forwardRef<
           name={nameProp}
           value={value}
           disabled={disabled}
-          id={!showZero && value === 0 ? undefined : idProp}
+          id={value === 0 ? undefined : idProp}
           css={styles.input}
           width={`${Math.max(value.toString().length + 1, 3)}ch`}
-          visibility={!showZero && value === 0 ? "hidden" : "visible"}
           aria-live="assertive"
           aria-label={
             ariaLabelContext.plural === ""
@@ -145,17 +140,13 @@ export const NumericStepper = React.forwardRef<
               return;
             }
             onChange(Math.max(Math.min(numericInput, maxValue), minValue));
-            if (
-              !showZero &&
-              Math.max(Math.min(numericInput, maxValue), minValue) === 0
-            ) {
+            if (Math.max(Math.min(numericInput, maxValue), minValue) === 0) {
               focusOnAddButton();
             }
           }}
         />
       ) : (
         <Text
-          visibility={!showZero && value === 0 ? "hidden" : "visible"}
           aria-live="assertive"
           paddingX="0.95rem"
           aria-label={
@@ -179,8 +170,7 @@ export const NumericStepper = React.forwardRef<
           ),
         )}
         onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
-        visibility={value >= maxValue ? "hidden" : "visible"}
-        disabled={disabled}
+        disabled={disabled || value >= maxValue}
         id={value >= maxValue ? undefined : idProp}
       />
     </Field>

package/src/theme/recipes/button.ts

@@ -77,6 +77,7 @@ export const buttonRecipe = defineRecipe({
       },
       floating: {
         color: "floating.text",
+        background: "floating.surface",
         border: "sm",
         borderColor: "floating.outline",
         boxShadow: