@vygruppen/spor-react 12.2.1 → 12.3.0

package/src/input/NumericStepper.tsx

@@ -1,6 +1,7 @@
 "use client";
 import {
   chakra,
+  Input,
   RecipeVariantProps,
   useControllableState,
   useSlotRecipe,
@@ -9,11 +10,12 @@ import React, { PropsWithChildren, useRef } from "react";
 
 import { BoxProps, createTexts, IconButton, useTranslation } from "..";
 import { numericStepperRecipe } from "../theme/slot-recipes/numeric-stepper";
-import { Field } from "./Field";
+import { Field, FieldBaseProps } from "./Field";
 
 type NumericStepperVariants = RecipeVariantProps<typeof numericStepperRecipe>;
 
 export type NumericStepperProps = BoxProps &
+  FieldBaseProps &
   PropsWithChildren<NumericStepperVariants> & {
     children: React.ReactNode;
     /** The name of the input field */
@@ -67,8 +69,8 @@ export type NumericStepperProps = BoxProps &
 export const NumericStepper = React.forwardRef<
   HTMLDivElement,
   NumericStepperProps
->(
-  ({
+>((props: NumericStepperProps) => {
+  const {
     name: nameProp,
     id: idProp,
     value: valueProp,
@@ -81,109 +83,110 @@ export const NumericStepper = React.forwardRef<
     stepSize = 1,
     showZero = false,
     ariaLabelContext = { singular: "", plural: "" },
-  }: NumericStepperProps) => {
-    const addButtonRef = useRef<HTMLButtonElement>(null);
-    const { t } = useTranslation();
-    const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
-    const styles = recipe();
-    const [value, onChange] = useControllableState<number>({
-      value: valueProp,
-      onChange: onChangeProp,
-      defaultValue,
-    });
-    const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
+    ...rest
+  } = props;
 
-    const focusOnAddButton = () => {
-      addButtonRef.current?.focus();
-    };
+  const addButtonRef = useRef<HTMLButtonElement>(null);
+  const { t } = useTranslation();
+  const recipe = useSlotRecipe({ recipe: numericStepperRecipe });
+  const styles = recipe();
+  const [value, onChange] = useControllableState<number>({
+    value: valueProp,
+    onChange: onChangeProp,
+    defaultValue,
+  });
+  const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
+
+  const focusOnAddButton = () => {
+    addButtonRef.current?.focus();
+  };
 
-    return (
-      <Field css={styles.root} flexDirection="row" width="auto">
-        <VerySmallButton
-          icon={<SubtractIcon stepLabel={clampedStepSize} />}
-          aria-label={t(
-            texts.decrementButtonAriaLabel(
-              clampedStepSize,
-              stepSize === 1
-                ? ariaLabelContext.singular
-                : ariaLabelContext.plural,
-            ),
-          )}
-          onClick={() => {
-            onChange(Math.max(value - clampedStepSize, minValue));
-            if (Math.max(value - clampedStepSize, minValue) <= minValue) {
+  return (
+    <Field css={styles.root} width="auto" {...rest}>
+      <VerySmallButton
+        icon={<SubtractIcon stepLabel={clampedStepSize} />}
+        aria-label={t(
+          texts.decrementButtonAriaLabel(
+            clampedStepSize,
+            stepSize === 1
+              ? ariaLabelContext.singular
+              : ariaLabelContext.plural,
+          ),
+        )}
+        onClick={() => {
+          onChange(Math.max(value - clampedStepSize, minValue));
+          if (Math.max(value - clampedStepSize, minValue) <= minValue) {
+            focusOnAddButton();
+          }
+        }}
+        visibility={value <= minValue ? "hidden" : "visible"}
+        disabled={disabled}
+        id={value <= minValue ? undefined : idProp}
+      />
+      {withInput ? (
+        <Input
+          min={minValue}
+          max={maxValue}
+          name={nameProp}
+          value={value}
+          disabled={disabled}
+          id={!showZero && 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 === ""
+              ? ""
+              : t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
+          }
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            const numericInput = Number(e.target.value);
+            if (Number.isNaN(numericInput)) {
+              return;
+            }
+            onChange(Math.max(Math.min(numericInput, maxValue), minValue));
+            if (
+              !showZero &&
+              Math.max(Math.min(numericInput, maxValue), minValue) === 0
+            ) {
               focusOnAddButton();
             }
           }}
-          visibility={value <= minValue ? "hidden" : "visible"}
-          disabled={disabled}
-          id={value <= minValue ? undefined : idProp}
         />
-        {withInput ? (
-          <chakra.input
-            min={minValue}
-            max={maxValue}
-            name={nameProp}
-            value={value}
-            disabled={disabled}
-            id={!showZero && 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 === ""
-                ? ""
-                : t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
-            }
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              const numericInput = Number(e.target.value);
-              if (Number.isNaN(numericInput)) {
-                return;
-              }
-              onChange(Math.max(Math.min(numericInput, maxValue), minValue));
-              if (
-                !showZero &&
-                Math.max(Math.min(numericInput, maxValue), minValue) === 0
-              ) {
-                focusOnAddButton();
-              }
-            }}
-          />
-        ) : (
-          <chakra.text
-            css={styles}
-            visibility={!showZero && value === 0 ? "hidden" : "visible"}
-            aria-live="assertive"
-            aria-label={
-              ariaLabelContext.plural === ""
-                ? ""
-                : t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
-            }
-          >
-            {value}
-          </chakra.text>
+      ) : (
+        <chakra.text
+          css={styles}
+          visibility={!showZero && value === 0 ? "hidden" : "visible"}
+          aria-live="assertive"
+          aria-label={
+            ariaLabelContext.plural === ""
+              ? ""
+              : t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
+          }
+        >
+          {value}
+        </chakra.text>
+      )}
+      <VerySmallButton
+        ref={addButtonRef}
+        icon={<AddIcon stepLabel={clampedStepSize} />}
+        aria-label={t(
+          texts.incrementButtonAriaLabel(
+            clampedStepSize,
+            stepSize === 1
+              ? ariaLabelContext.singular
+              : ariaLabelContext.plural,
+          ),
         )}
-        <VerySmallButton
-          ref={addButtonRef}
-          icon={<AddIcon stepLabel={clampedStepSize} />}
-          aria-label={t(
-            texts.incrementButtonAriaLabel(
-              clampedStepSize,
-              stepSize === 1
-                ? ariaLabelContext.singular
-                : ariaLabelContext.plural,
-            ),
-          )}
-          onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
-          visibility={value >= maxValue ? "hidden" : "visible"}
-          disabled={disabled}
-          id={value >= maxValue ? undefined : idProp}
-        />
-      </Field>
-    );
-  },
-);
+        onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
+        visibility={value >= maxValue ? "hidden" : "visible"}
+        disabled={disabled}
+        id={value >= maxValue ? undefined : idProp}
+      />
+    </Field>
+  );
+});
 NumericStepper.displayName = "NumericStepper";
 
 type VerySmallButtonProps = {

package/src/input/PasswordInput.tsx

@@ -5,7 +5,6 @@ import React, { forwardRef } from "react";
 
 import { ButtonProps, Input, InputProps } from "..";
 import { createTexts, useTranslation } from "..";
-import { InputGroupProps } from "./InputGroup";
 
 export interface PasswordVisibilityProps {
   /** Default visibility state */
@@ -19,7 +18,7 @@ export interface PasswordVisibilityProps {
 export interface PasswordInputProps
   extends InputProps,
     PasswordVisibilityProps {
-  rootProps?: InputGroupProps;
+  rootProps?: InputProps;
 }
 
 /**

package/src/input/Select.tsx

@@ -21,9 +21,12 @@ import { PropsWithChildren } from "react";
 import { CloseButton } from "@/button";
 import { selectSlotRecipe } from "@/theme/slot-recipes/select";
 
+import { Field, FieldProps } from "./Field";
+
 type SelectVariantProps = RecipeVariantProps<typeof selectSlotRecipe>;
 
 export type SelectProps = ChakraSelectRootProps &
+  FieldProps &
   PropsWithChildren<SelectVariantProps> & {
     label?: string;
   };
@@ -58,25 +61,36 @@ export type SelectProps = ChakraSelectRootProps &
 
 export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
   (props, ref) => {
-    const { variant = "core", children, positioning, label, ...rest } = props;
+    const {
+      variant = "core",
+      children,
+      positioning,
+      label,
+      errorText,
+      invalid,
+      helperText,
+      ...rest
+    } = props;
     const recipe = useSlotRecipe({ key: "select" });
     const styles = recipe({ variant });
 
     return (
-      <ChakraSelect.Root
-        {...rest}
-        ref={ref}
-        positioning={{ sameWidth: true, ...positioning }}
-        variant={variant}
-        css={styles.root}
-        position={"relative"}
-      >
-        <SelectTrigger data-attachable>
-          <SelectValueText withPlaceholder={label ? true : false} />
-        </SelectTrigger>
-        {label && <SelectLabel css={styles.label}>{label}</SelectLabel>}
-        <SelectContent css={styles.selectContent}>{children}</SelectContent>
-      </ChakraSelect.Root>
+      <Field errorText={errorText} invalid={invalid} helperText={helperText}>
+        <ChakraSelect.Root
+          {...rest}
+          ref={ref}
+          positioning={{ sameWidth: true, ...positioning }}
+          variant={variant}
+          css={styles.root}
+          position={"relative"}
+        >
+          <SelectTrigger data-attachable>
+            <SelectValueText withPlaceholder={label ? true : false} />
+          </SelectTrigger>
+          {label && <SelectLabel css={styles.label}>{label}</SelectLabel>}
+          <SelectContent css={styles.selectContent}>{children}</SelectContent>
+        </ChakraSelect.Root>
+      </Field>
     );
   },
 );

package/src/input/Switch.tsx

@@ -8,7 +8,7 @@ import {
 import React, { forwardRef, PropsWithChildren } from "react";
 
 import { switchSlotRecipe } from "../theme/slot-recipes/switch";
-import { Field } from "./Field";
+import { Field, FieldBaseProps } from "./Field";
 
 type SwitchVariants = RecipeVariantProps<typeof switchSlotRecipe>;
 
@@ -16,6 +16,7 @@ export type SwitchProps = Exclude<
   ChakraSwitch.RootProps,
   "size" | "colorPalette"
 > &
+  FieldBaseProps &
   PropsWithChildren<SwitchVariants> & {
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
     rootRef?: React.Ref<HTMLLabelElement>;
@@ -45,12 +46,25 @@ export type SwitchProps = Exclude<
  */
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>((props) => {
-  const { rootRef, size = "md", label, ...rest } = props;
+  const {
+    rootRef,
+    size = "md",
+    label,
+    invalid,
+    errorText,
+    helperText,
+    ...rest
+  } = props;
   const recipe = useSlotRecipe({ key: "switch" });
   const styles = recipe({ size });
 
   return (
-    <Field style={{ width: "auto" }}>
+    <Field
+      style={{ width: "auto" }}
+      invalid={invalid}
+      errorText={errorText}
+      helperText={helperText}
+    >
       <ChakraSwitch.Root
         ref={rootRef}
         {...rest}

package/src/input/Textarea.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import {
-  FieldLabel,
   RecipeVariantProps,
   Textarea as ChakraTextarea,
   TextareaProps as ChakraTextareaProps,
@@ -18,6 +17,7 @@ import React, {
 
 import { textareaRecipe } from "../theme/recipes/textarea";
 import { Field, FieldProps } from "./Field";
+import { FloatingLabel } from "./FloatingLabel";
 
 type TextareaVariants = RecipeVariantProps<typeof textareaRecipe>;
 export type TextareaProps = Exclude<
@@ -94,7 +94,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           }
           placeholder=" "
         />
-        <FieldLabel ref={labelRef}>{label}</FieldLabel>
+        <FloatingLabel ref={labelRef}>{label}</FloatingLabel>
       </Field>
     );
   },

package/src/theme/slot-recipes/field.ts

@@ -12,33 +12,6 @@ export const fieldSlotRecipe = defineSlotRecipe({
       position: "relative",
       flexDirection: "column",
     },
-    label: {
-      /* For when input is filled */
-      pos: "absolute",
-      paddingX: 3,
-      top: "0.3rem",
-      fontWeight: "normal",
-      fontSize: ["mobile.xs", "desktop.xs"],
-      color: "text",
-      pointerEvents: "none",
-      transition: "position",
-      zIndex: "docked",
-      _peerPlaceholderShown: {
-        /* For when input is not in focus */
-        top: "0.9rem",
-        color: "text",
-        fontSize: ["mobile.sm", "desktop.sm"],
-      },
-      _peerFocusVisible: {
-        /* For when input is in focus */
-        fontSize: ["mobile.xs", "desktop.xs"],
-        color: "text",
-        top: "0.3rem",
-      },
-      _disabled: {
-        opacity: 0.4,
-      },
-    },
     requiredIndicator: {
       marginStart: 1,
       color: "brightRed",
@@ -58,7 +31,7 @@ export const fieldSlotRecipe = defineSlotRecipe({
       textStyle: "xs",
       width: "fit-content",
       position: "absolute",
-      bottom: -4,
+      bottom: -5,
       left: 3,
       zIndex: "dropdown",
       maxWidth: "50ch",

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

@@ -7,16 +7,21 @@ export const numericStepperRecipe = defineSlotRecipe({
   className: "spor-numeric-stepper",
   base: {
     root: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
+      "& > div": {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+      },
     },
     input: {
       fontSize: "sm",
       fontWeight: "bold",
       marginX: 0.5,
+      padding: 0,
       paddingX: 0.5,
       borderRadius: "xs",
+      outline: "none",
+      height: "auto",
       textAlign: "center",
       transitionProperty: "common",
       transitionDuration: "fast",

package/src/theme/slot-recipes/select.ts

@@ -146,6 +146,10 @@ export const selectSlotRecipe = defineSlotRecipe({
       _open: {
         borderBottomRadius: 0,
       },
+      _invalid: {
+        outline: "2px solid",
+        outlineColor: "outline.error",
+      },
     },
     itemText: {
       flex: "1",
@@ -179,10 +183,6 @@ export const selectSlotRecipe = defineSlotRecipe({
           _active: {
             backgroundColor: "brand.surface.active",
           },
-          _invalid: {
-            outline: "2px solid",
-            outlineColor: "outline.error",
-          },
           _disabled: {
             pointerEvents: "none",
             color: "text.disabled",

package/src/input/InputGroup.tsx

@@ -1,67 +0,0 @@
-"use client";
-
-import type { GroupProps, InputElementProps } from "@chakra-ui/react";
-import { Group, InputElement } from "@chakra-ui/react";
-import * as React from "react";
-
-import { FieldLabel } from "./Field";
-
-export type InputGroupProps = GroupProps & {
-  startElementProps?: InputElementProps;
-  endElementProps?: InputElementProps;
-  startElement?: React.ReactNode;
-  endElement?: React.ReactNode;
-  children: React.ReactElement;
-  label?: string;
-};
-
-/**
- *
- * InputGroup is a wrapper for inputs that have a startElement and/or endElement.
- *
- * It is not exported to users, but used internally in the Input component.
- *
- */
-
-export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
-  (props, ref) => {
-    const {
-      startElement,
-      startElementProps,
-      endElement,
-      endElementProps,
-      label,
-      children,
-      ...rest
-    } = props;
-
-    return (
-      <Group ref={ref} {...rest}>
-        {startElement && (
-          <InputElement
-            pointerEvents="none"
-            paddingX={2}
-            {...startElementProps}
-          >
-            {startElement}
-          </InputElement>
-        )}
-        {React.cloneElement(children, {
-          ...children.props,
-        })}
-        {label && (
-          <FieldLabel left={startElement ? 4 : "0"} right={endElement ? 4 : 0}>
-            {label}
-          </FieldLabel>
-        )}
-
-        {endElement && (
-          <InputElement placement="end" paddingX={2} {...endElementProps}>
-            {endElement}
-          </InputElement>
-        )}
-      </Group>
-    );
-  },
-);
-InputGroup.displayName = "InputGroup";