@vygruppen/spor-react 11.3.10 → 12.0.1

package/src/input/Switch.tsx

@@ -1,38 +1,80 @@
+"use client";
 import {
+  RecipeVariantProps,
   Switch as ChakraSwitch,
-  SwitchProps as ChakraSwitchProps,
-  forwardRef,
+  ConditionalValue,
+  useSlotRecipe,
 } from "@chakra-ui/react";
-import { As } from "@chakra-ui/system";
-import React from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
+import { switchSlotRecipe } from "../theme/slot-recipes/switch";
+import { Field } from "./Field";
 
-export type SwitchProps = Omit<ChakraSwitchProps, "colorScheme" | "variant"> & {
-  size?: "sm" | "md" | "lg";
-};
+type SwitchVariants = RecipeVariantProps<typeof switchSlotRecipe>;
+
+export type SwitchProps = Exclude<
+  ChakraSwitch.RootProps,
+  "size" | "colorPalette"
+> &
+  PropsWithChildren<SwitchVariants> & {
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    rootRef?: React.Ref<HTMLLabelElement>;
+    trackLabel?: { on: React.ReactNode; off: React.ReactNode };
+    thumbLabel?: { on: React.ReactNode; off: React.ReactNode };
+    size?: ConditionalValue<"sm" | "md" | "lg">;
+    label?: React.ReactNode;
+    onCheckedChange?: (checked: boolean) => void;
+  };
 
 /**
  * A switch lets you toggle between on and off, yes and no. It's an alternative to a checkbox.
  *
- * You can use a Switch component inside of a `FormControl` with an associated `FormLabel`:
+ * You can set a label inside of the Switch component by defining the `label` prop.
  *
  * ```tsx
- * <FormControl>
- *   <FormLabel>Enable alerts?</FormLabel>
- *   <Switch />
- * </FormControl>
+ * <Switch label="This is a label"/>
  * ```
  *
  * Switches are available in three different sizes - `sm`, `md` and `lg`.
  *
  * ```tsx
- * <FormControl>
- *   <FormLabel>Enable alerts?</FormLabel>
+ *
  *   <Switch size="sm" />
- * </FormControl>
+ *
  * ```
  */
-export const Switch = forwardRef<SwitchProps, "input">(
-  ({ size = "md", as, ...props }, ref) => {
-    return <ChakraSwitch as={as} size={size} {...props} ref={ref} />;
+
+export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
+  (props, ref) => {
+    const {
+      inputProps,
+      children,
+      rootRef,
+      trackLabel,
+      thumbLabel,
+      size = "md",
+      label,
+      onCheckedChange,
+      ...rest
+    } = props;
+
+    const recipe = useSlotRecipe({ key: "switch" });
+    const styles = recipe({ size });
+
+    return (
+      <Field style={{ width: "auto" }}>
+        <ChakraSwitch.Root
+          ref={rootRef}
+          {...rest}
+          checked={props.checked}
+          css={styles.root}
+        >
+          <ChakraSwitch.Label>{label}</ChakraSwitch.Label>
+          <ChakraSwitch.HiddenInput />
+          <ChakraSwitch.Control css={styles.control}>
+            <ChakraSwitch.Thumb />
+          </ChakraSwitch.Control>
+        </ChakraSwitch.Root>
+      </Field>
+    );
   },
 );

package/src/input/Textarea.tsx

@@ -1,21 +1,37 @@
+"use client";
+
 import {
-  FormLabel,
-  forwardRef,
+  RecipeVariantProps,
+  useRecipe,
   Textarea as ChakraTextarea,
   TextareaProps as ChakraTextareaProps,
-  useFormControlContext,
-  InputGroup,
+  FieldLabel,
 } from "@chakra-ui/react";
-import React, { useId, useLayoutEffect, useRef, useState } from "react";
+import React, {
+  forwardRef,
+  PropsWithChildren,
+  ReactNode,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { textareaRecipe } from "../theme/recipes/textarea";
+import { Field, FieldProps } from "./Field";
 
-export type TextareaProps = Exclude<ChakraTextareaProps, "size"> & {
-  label?: string;
-};
+type TextareaVariants = RecipeVariantProps<typeof textareaRecipe>;
+export type TextareaProps = Exclude<
+  ChakraTextareaProps,
+  "size" | "colorPalette"
+> &
+  FieldProps &
+  PropsWithChildren<TextareaVariants> & {
+    label: ReactNode;
+  };
 
 /**
  * Hook to calculate the height of the label element to adjust spacing for the input for floating label.
  */
-const useLabelHeight = (label: string | undefined) => {
+const useLabelHeight = (label: ReactNode | undefined) => {
   const labelRef = useRef<HTMLLabelElement>(null);
   const [labelHeight, setLabelHeight] = useState(0);
 
@@ -45,103 +61,39 @@ const useLabelHeight = (label: string | undefined) => {
 };
 
 /**
- * Text area that works with the `FormControl` component.
  *
- * Providing a label is optional.
+ * A simple Textarea component:
  *
  * ```tsx
- * <FormControl>
- *   <Textarea label="E-mail" />
- * </FormControl>
+ *   <Textarea label="Description" />
  * ```
+ *
+ * Textarea has two variants core, and floating.
+ *
  */
-export const Textarea = forwardRef<TextareaProps, "textarea">((props, ref) => {
-  const {
-    spacingProps,
-    remainingProps: { label, ...rest },
-  } = getSpacingProps(props);
-  const formControlProps = useFormControlContext();
-  const fallbackId = `textarea-${useId()}`;
-  const inputId = props.id ?? formControlProps?.id ?? fallbackId;
 
-  const { labelRef, labelHeight } = useLabelHeight(label);
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (props, ref) => {
+    const { label, variant = "core", ...fieldProps } = props;
+    const recipe = useRecipe({ key: "textarea" });
+    const styles = recipe({ variant });
 
-  return (
-    <InputGroup
-      position="relative"
-      {...spacingProps}
-      style={{ "--label-height": `${labelHeight}px` } as React.CSSProperties}
-    >
-      <ChakraTextarea {...rest} id={inputId} ref={ref} placeholder=" " />
-      {label && (
-        <FormLabel
-          ref={labelRef}
-          htmlFor={inputId}
-          id={`${inputId}-label`}
-          pointerEvents="none"
-        >
-          {label}
-        </FormLabel>
-      )}
-    </InputGroup>
-  );
-});
+    const { labelRef, labelHeight } = useLabelHeight(label);
 
-function getSpacingProps<T extends TextareaProps>(props: T) {
-  const {
-    mt,
-    mr,
-    mb,
-    ml,
-    mx,
-    my,
-    marginTop,
-    marginRight,
-    marginBottom,
-    marginLeft,
-    marginX,
-    marginY,
-    pt,
-    pr,
-    pb,
-    pl,
-    px,
-    py,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    paddingX,
-    paddingY,
-    ...remainingProps
-  } = props;
-  return {
-    spacingProps: {
-      mt,
-      mr,
-      mb,
-      ml,
-      mx,
-      my,
-      marginTop,
-      marginRight,
-      marginBottom,
-      marginLeft,
-      marginX,
-      marginY,
-      pt,
-      pr,
-      pb,
-      pl,
-      px,
-      py,
-      paddingTop,
-      paddingRight,
-      paddingBottom,
-      paddingLeft,
-      paddingX,
-      paddingY,
-    },
-    remainingProps,
-  };
-}
+    return (
+      <Field {...fieldProps} position="relative">
+        <ChakraTextarea
+          {...props}
+          css={styles}
+          className="peer"
+          ref={ref}
+          style={
+            { "--label-height": `${labelHeight}px` } as React.CSSProperties
+          }
+          placeholder=" "
+        />
+        <FieldLabel ref={labelRef}>{label}</FieldLabel>
+      </Field>
+    );
+  },
+);

package/src/input/{index.tsx → index.ts}

@@ -1,24 +1,18 @@
-export { FormHelperText, InputGroup } from "@chakra-ui/react";
-export type { InputGroupProps } from "@chakra-ui/react";
 export * from "./AttachedInputs";
 export * from "./CardSelect";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./ChoiceChip";
 export * from "./Combobox";
-export * from "./FormControl";
-export * from "./FormErrorMessage";
-export * from "./FormLabel";
-export * from "./InfoSelect";
+export * from "./Fieldset";
 export * from "./Input";
-export * from "./InputElement";
 export * from "./ListBox";
 export * from "./NativeSelect";
 export * from "./NumericStepper";
 export * from "./PasswordInput";
 export * from "./PhoneNumberInput";
 export * from "./Radio";
-export * from "./RadioGroup";
 export * from "./SearchInput";
 export * from "./Switch";
 export * from "./Textarea";
+export * from "./Select";

package/src/layout/PressableCard.tsx

@@ -1,11 +1,7 @@
-import React from "react";
-import { Box, BoxProps, forwardRef, useStyleConfig } from "@chakra-ui/react";
-import { As } from "@chakra-ui/system";
-
-type PressableCardProps = BoxProps & {
-  /** Defaults to "base"  */
-  variant?: "floating" | "accent" | "base";
-};
+"use client";
+import React, { forwardRef } from "react";
+import { ButtonProps, chakra, RecipeVariantProps } from "@chakra-ui/react";
+import { pressableCardRecipe } from "../theme/recipes/pressable-card";
 
 /**
  * `PressableCard` is a component that renders a pressable card.
@@ -14,7 +10,7 @@ type PressableCardProps = BoxProps & {
  * It can be rendered as a button, link, label, or any other HTML element by specifying the `as` prop.
  * If no `as` prop is provided, it defaults to a button.
  *
- * The `variant` prop can be used to control the style variant of the card. It defaults to "base".
+ * The `variant` prop can be used to control the style variant of the card. It defaults to "core".
  *
  * Example usage:
  *
@@ -32,21 +28,16 @@ type PressableCardProps = BoxProps & {
  * </PressableCard>
  * ```
  *
- * For a static card with other color schemes, use the `StaticCard` component.
+ * For a static card with other color palette, use the `StaticCard` component.
  *
  * @see StaticCard
  */
 
-export const PressableCard = forwardRef<PressableCardProps, As>(
-  ({ children, variant = "floating", ...props }, ref) => {
-    const styles = useStyleConfig("PressableCard", {
-      variant,
-    });
+const PressableCardButton = chakra("button", pressableCardRecipe);
+
+type PressableCardProps = RecipeVariantProps<typeof pressableCardRecipe> &
+  ButtonProps;
 
-    return (
-      <Box __css={styles} {...props} ref={ref}>
-        {children}
-      </Box>
-    );
-  },
+export const PressableCard = forwardRef<HTMLDivElement, PressableCardProps>(
+  (props, ref) => <PressableCardButton {...props} ref={ref} />,
 );

package/src/layout/RadioCard.tsx

@@ -1,128 +1,95 @@
+"use client";
 import {
-  Box,
-  BoxProps,
-  chakra,
-  forwardRef,
-  useMultiStyleConfig,
+  RadioCard as ChakraRadioCard,
+  RecipeVariantProps,
+  useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { useContext, useEffect, useId, useState } from "react";
-import { RadioCardGroupContext } from "./RadioCardGroup";
-import { dataAttr } from "@chakra-ui/utils";
+import React, { forwardRef, useId } from "react";
+import { radioCardSlotRecipe } from "../theme/slot-recipes/radio-card";
 
 /**
  * Radio cards are used to present a set of options where only one option can be selected.
  *
- * RadioCard components must be wrapped in a RadioCardGroup component.
- *
  * @example
  * ```tsx
- * <RadioCardGroup name="ticket">
- *   <RadioCard value="economy">Economy</RadioCard>
- *   <RadioCard value="business">Business</RadioCard>
- *   <RadioCard value="first-class">First Class</RadioCard>
+ * <RadioCardGroup defaultValue="economy">
+ *   <RadioCardLabel>Choose your class</RadioCardLabel>
+ *   <Stack direction="row">
+ *      <RadioCard value="economy" label="Economy" />
+ *      <RadioCard value="business" label="Business" />
+ *      <RadioCard value="first-class" label="First Class" />
+ *   </Stack>
  * </RadioCardGroup>
  * ```
  *
- * RadioCard inherits props from Box.
- *
- * Be advised to not use the `name` prop on the RadioCard component.
- *
- * Changing the semantics may also cause the component to not work as expected.
  *
  * @see Docs https://spor.vy.no/components/radiocard
  */
 
-export type RadioCardProps = BoxProps & {
-  /** The value that will be passed to the `RadioCardGroup`'s `onChange` function if this `RadioCard` is selected.. */
-  value: string;
-  /** The content of the RadioCard. */
-  children: React.ReactNode;
-  /** Determines if the RadioCard is disabled. */
-  isDisabled?: boolean;
-};
-
-export const RadioCard = forwardRef(
-  ({ children, value, isDisabled, ...props }: RadioCardProps, ref) => {
-    const context = useContext(RadioCardGroupContext);
-
-    if (!context) {
-      throw new Error(
-        "RadioCard components must be wrapped in a RadioCardGroup component",
-      );
-    }
+type RadioCardVariantProps = RecipeVariantProps<typeof radioCardSlotRecipe>;
 
-    const { name, selectedValue, onChange, variant } = context;
+type RadioCardItemProps = Exclude<
+  ChakraRadioCard.ItemProps,
+  "colorPalette" | "indicator" | "variant" | "size" | "addon"
+> &
+  RadioCardVariantProps & {
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    ariaLabel?: string;
+  };
 
-    const styles = useMultiStyleConfig("RadioCard", { variant });
+export const RadioCard = forwardRef<HTMLInputElement, RadioCardItemProps>(
+  (props, ref) => {
+    const { inputProps, children, value, ariaLabel } = props;
 
-    const [isKeyboardUser, setKeyboardUser] = useState(false);
-    const [isFocused, setFocus] = useState(false);
-
-    const isChecked = selectedValue === value;
-
-    useEffect(() => {
-      const handleMouseDown = () => setKeyboardUser(false);
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (event.key === " ") {
-          setFocus(false);
-        } else {
-          setKeyboardUser(true);
-        }
-      };
-
-      window.addEventListener("mousedown", handleMouseDown);
-      window.addEventListener("keydown", handleKeyDown);
+    return (
+      <ChakraRadioCard.Item {...props}>
+        <ChakraRadioCard.ItemHiddenInput
+          aria-label={ariaLabel ?? value}
+          ref={ref}
+          {...inputProps}
+        />
 
-      return () => {
-        window.removeEventListener("mousedown", handleMouseDown);
-        window.removeEventListener("keydown", handleKeyDown);
-      };
-    }, []);
+        <ChakraRadioCard.ItemControl>{children}</ChakraRadioCard.ItemControl>
+      </ChakraRadioCard.Item>
+    );
+  },
+);
 
-    useEffect(() => {
-      if (isKeyboardUser && isChecked) {
-        setFocus(true);
-      } else {
-        setFocus(false);
-      }
-    }, [isKeyboardUser, isChecked]);
+type RadioCardRootProps = RadioCardVariantProps &
+  Exclude<ChakraRadioCard.RootProps, "variant"> & {
+    children: React.ReactNode;
+    gap?: string | number;
+    direction?: "row" | "column";
+    display?: string;
+  };
 
-    const inputId = `radio-card-${useId()}`;
+export const RadioCardGroup = forwardRef<HTMLDivElement, RadioCardRootProps>(
+  (props, ref) => {
+    const {
+      children,
+      variant,
+      gap = 2,
+      direction = "column",
+      display = "flex",
+      ...rest
+    } = props;
+    const recipe = useSlotRecipe({ key: "radio-card" });
+    const styles = recipe({ variant });
 
     return (
-      <Box
-        onFocus={() => isKeyboardUser && setFocus(true)}
-        onBlur={() => setFocus(false)}
+      <ChakraRadioCard.Root
+        ref={ref}
+        variant={variant}
+        css={styles}
+        display={display}
+        gap={gap}
+        flexDirection={direction}
+        {...rest}
       >
-        <chakra.input
-          type="radio"
-          id={inputId}
-          name={name}
-          value={value}
-          ref={ref}
-          checked={isChecked}
-          onChange={() => onChange(value)}
-          disabled={isDisabled}
-          __css={styles.radioInput}
-        />
-        <Box
-          as="label"
-          name={name}
-          htmlFor={inputId}
-          aria-checked={dataAttr(isChecked)}
-          data-checked={dataAttr(isChecked)}
-          data-disabled={dataAttr(isDisabled)}
-          {...props}
-          __css={{
-            ...styles.container,
-            ...(isChecked && styles.checked),
-            ...(isFocused && !isChecked && styles.focused),
-            ...(isChecked && isFocused && styles.focusedChecked),
-          }}
-        >
-          {children}
-        </Box>
-      </Box>
+        {children}
+      </ChakraRadioCard.Root>
     );
   },
 );
+
+export const RadioCardLabel = ChakraRadioCard.Label;

package/src/layout/Separator.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import {
+  RecipeVariantProps,
+  useRecipe,
+  Separator as ChakraSeparator,
+  SeparatorProps as ChakraSeparatorProps,
+} from "@chakra-ui/react";
+import React, { forwardRef, PropsWithChildren } from "react";
+import { separatorRecipe } from "../theme/recipes/separator";
+
+type SeparatorVariantProps = RecipeVariantProps<typeof separatorRecipe>;
+
+type SeparatorProps = Exclude<ChakraSeparatorProps, "size" | "variant"> &
+  PropsWithChildren<SeparatorVariantProps> & {
+    size?: "sm" | "md" | "lg";
+    variant?: "solid" | "dashed";
+  };
+
+export const Separator = forwardRef<HTMLDivElement, SeparatorProps>(
+  (props, ref) => {
+    const {
+      size = "md",
+      variant = "solid",
+      orientation = "horizontal",
+    } = props;
+
+    const recipe = useRecipe({ recipe: separatorRecipe });
+    const styles = recipe({ size, variant, orientation });
+    return <ChakraSeparator css={styles} {...props} ref={ref} />;
+  },
+);

package/src/layout/StaticCard.tsx

@@ -1,22 +1,7 @@
-import React from "react";
-import { Box, BoxProps, useStyleConfig, forwardRef } from "@chakra-ui/react";
-import { As } from "@chakra-ui/system";
-
-export type StaticCardProps = BoxProps & {
-  children: React.ReactNode;
-  /** Defaults to "white" */
-  colorScheme:
-    | "white"
-    | "grey"
-    | "green"
-    | "orange"
-    | "red"
-    | "yellow"
-    | "blue"
-    | "darkBlue"
-    | "darkGreen"
-    | "darkYellow";
-};
+"use client";
+import React, { forwardRef } from "react";
+import { Box, BoxProps, chakra, RecipeVariantProps } from "@chakra-ui/react";
+import { staticCardRecipe } from "../theme/recipes/static-card";
 
 /**
  * `StaticCard` is a component that renders a static card.
@@ -24,7 +9,7 @@ export type StaticCardProps = BoxProps & {
  * The `StaticCard` component can be used to create a card that does not respond to user interactions.
  * It can be rendered as any HTML element by specifying the `as` prop.
  *
- * The `colorScheme` prop can be used to control the color scheme of the card. It defaults to "white".
+ * The `colorPalette` prop can be used to control the color palette of the card. It defaults to "white".
  *
  * Example usage:
  *
@@ -42,10 +27,10 @@ export type StaticCardProps = BoxProps & {
  * </StaticCard>
  * ```
  *
- * To change the color scheme of the card, specify the `colorScheme` prop:
+ * To change the color palette of the card, specify the `colorPalette` prop:
  *
  * ```tsx
- * <StaticCard colorScheme="orange">
+ * <StaticCard colorPalette="orange">
  *   An orange card
  * </StaticCard>
  * ```
@@ -55,16 +40,11 @@ export type StaticCardProps = BoxProps & {
  * @see PressableCard
  */
 
-export const StaticCard = forwardRef<StaticCardProps, As>(
-  ({ colorScheme = "white", children, ...props }, ref) => {
-    const styles = useStyleConfig("StaticCard", {
-      colorScheme,
-    });
+const StyledCardBox = chakra("div", staticCardRecipe);
+
+export type StaticCardProps = RecipeVariantProps<typeof staticCardRecipe> &
+  BoxProps;
 
-    return (
-      <Box __css={styles} {...props} ref={ref}>
-        {children}
-      </Box>
-    );
-  },
+export const StaticCard = forwardRef<HTMLDivElement, StaticCardProps>(
+  (props, ref) => <StyledCardBox {...props} ref={ref}></StyledCardBox>,
 );