@vygruppen/spor-react 12.2.0 → 12.3.0

package/src/input/Label.tsx

@@ -0,0 +1,18 @@
+import { defineStyle, Field, FieldLabelProps } from "@chakra-ui/react";
+
+export const Label = (props: FieldLabelProps) => (
+  <Field.Label {...props} css={labelStyles} />
+);
+
+const labelStyles = defineStyle({
+  fontWeight: "normal",
+  paddingBottom: 1,
+  paddingX: 1,
+  fontSize: ["mobile.xs", "desktop.xs"],
+  color: "text",
+  pointerEvents: "none",
+  zIndex: "docked",
+  _disabled: {
+    opacity: 0.4,
+  },
+});

package/src/input/NativeSelect.tsx

@@ -9,7 +9,7 @@ import { DropdownDownFill18Icon } from "@vygruppen/spor-icon-react";
 import * as React from "react";
 
 import { nativeSelectSlotRecipe } from "../theme/slot-recipes/native-select";
-import { Field } from "./Field";
+import { Field, FieldBaseProps } from "./Field";
 
 type NativeSelectVariantProps = RecipeVariantProps<
   typeof nativeSelectSlotRecipe
@@ -17,11 +17,9 @@ type NativeSelectVariantProps = RecipeVariantProps<
 
 export type NativeSelectdProps =
   React.PropsWithChildren<NativeSelectVariantProps> &
+    FieldBaseProps &
     ChakraNativeSelectFieldProps & {
       icon?: React.ReactNode;
-      label: string;
-      invalid?: boolean;
-      disabled?: boolean;
     };
 
 /**
@@ -51,6 +49,9 @@ export const NativeSelect = React.forwardRef<
     label,
     invalid,
     disabled,
+    required,
+    helperText,
+    errorText,
     ...rest
   } = props;
 
@@ -58,7 +59,15 @@ export const NativeSelect = React.forwardRef<
   const styles = recipe({ variant });
 
   return (
-    <Field label={label} invalid={invalid} disabled={disabled}>
+    <Field
+      label={label}
+      invalid={invalid}
+      disabled={disabled}
+      required={required}
+      helperText={helperText}
+      errorText={errorText}
+      floatingLabel={true}
+    >
       <ChakraNativeSelect.Root
         ref={ref}
         css={styles.root}

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/anatomy.ts

@@ -267,3 +267,13 @@ export const datepickerAnatomy = createAnatomy("datepicker").parts(
   "box",
   "rangeCalendarPopover",
 );
+
+export const checkboxCardAnatomy = createAnatomy("checkbox-card", [
+  "root",
+  "control",
+  "label",
+  "description",
+  "addon",
+  "indicator",
+  "content",
+]);

package/src/theme/slot-recipes/choice-chip.ts

@@ -0,0 +1,183 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+
+import { checkboxCardAnatomy } from "./anatomy";
+
+export const choiceChipSlotRecipe = defineSlotRecipe({
+  slots: checkboxCardAnatomy.keys(),
+  className: "chakra-checkbox-card",
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      boxAlign: "center",
+      fontSize: "xs",
+      cursor: "pointer",
+      transitionProperty: "all",
+      borderRadius: "xl",
+      transitionDuration: "fast",
+      paddingInlineStart: "2",
+      paddingInlineEnd: "2",
+
+      outline: "1px solid",
+      outlineColor: "base.outline",
+      _checked: {
+        backgroundColor: "brand.surface",
+        borderRadius: "sm",
+        outline: "none",
+        color: "brand.text",
+        _hover: {
+          backgroundColor: "brand.surface.hover",
+          _active: {
+            backgroundColor: "brand.surface.active",
+          },
+        },
+      },
+
+      _focusVisible: {
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+        outlineOffset: "1px",
+      },
+
+      _disabled: {
+        pointerEvents: "none",
+        boxShadow: "none",
+        backgroundColor: "surface.disabled",
+        color: "text.disabled",
+        outline: "none",
+
+        _hover: {
+          backgroundColor: "core.surface.disabled",
+          boxShadow: "none",
+          color: "core.text.disabled",
+        },
+        _checked: {
+          cursor: "not-allowed",
+          boxShadow: "none",
+          color: "core.text.disabled",
+          backgroundColor: "core.surface.disabled",
+          _hover: {
+            backgroundColor: "core.surface.disabled",
+            boxShadow: "none",
+            color: "core.text.disabled",
+          },
+        },
+      },
+    },
+
+    label: {
+      display: "flex",
+      alignItems: "center",
+
+      fontSize: "xs",
+    },
+  },
+
+  variants: {
+    size: {
+      xs: {
+        root: {
+          _checked: {
+            borderRadius: "0.563rem",
+          },
+          height: 5,
+          paddingX: 1.5,
+        },
+      },
+      sm: {
+        root: {
+          _checked: {
+            borderRadius: "sm",
+          },
+          height: 6,
+          paddingX: 2,
+        },
+      },
+      md: {
+        root: {
+          _checked: {
+            borderRadius: "sm",
+          },
+          height: 7,
+          paddingX: 2,
+        },
+      },
+      lg: {
+        root: {
+          _checked: {
+            borderRadius: "md",
+          },
+          height: 8,
+          paddingX: 3,
+        },
+      },
+    },
+
+    variant: {
+      core: {
+        root: {
+          color: "core.text",
+          outlineColor: "core.outline",
+
+          _hover: {
+            outline: "2px solid",
+            outlineColor: "core.outline.hover",
+
+            _active: {
+              outline: "1px solid",
+              outlineColor: "core.outline",
+              backgroundColor: "core.surface.active",
+            },
+          },
+        },
+      },
+      accent: {
+        root: {
+          backgroundColor: "accent.surface",
+          color: "accent.text",
+          outline: "none",
+
+          _hover: {
+            backgroundColor: "accent.surface.hover",
+
+            _active: {
+              backgroundColor: "accent.surface.active",
+            },
+          },
+        },
+      },
+      floating: {
+        root: {
+          backgroundColor: "floating.surface",
+          outline: "1px solid",
+          outlineColor: "floating.outline",
+          color: "floating.text",
+
+          boxShadow: "sm",
+          _hover: {
+            backgroundColor: "floating.surface.hover",
+            outline: "1px solid",
+            outlineColor: "floating.outline.hover",
+
+            _active: {
+              backgroundColor: "floating.surface.active",
+              outline: "1px solid",
+              outlineColor: "floating.outline",
+            },
+          },
+        },
+      },
+    },
+    chipType: {
+      icon: {},
+      choice: {},
+      filter: {},
+    },
+  },
+
+  defaultVariants: {
+    size: "md",
+    variant: "core",
+    chipType: "choice",
+  },
+});