@vygruppen/spor-react 13.1.3 → 13.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.1.3",
+  "version": "13.2.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -64,8 +64,8 @@
     "react-dom": "19.2.3",
     "tsup": "^7.2.0",
     "typescript": "^5.7.3",
-    "@vygruppen/eslint-config": "2.2.0",
-    "@vygruppen/tsconfig": "0.1.1"
+    "@vygruppen/tsconfig": "0.1.1",
+    "@vygruppen/eslint-config": "2.2.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",

package/src/input/ChoiceChip.tsx

@@ -1,94 +1,156 @@
 "use client";
-import { CheckboxCard, CheckboxCardRootProps, Span } from "@chakra-ui/react";
-import { CloseOutline24Icon } from "@vygruppen/spor-icon-react";
-import React from "react";
+import {
+  RadioCard as ChakraRadioCard,
+  RecipeVariantProps,
+  Span,
+  useSlotRecipe,
+} from "@chakra-ui/react";
+import { createContext, useContext, useId } from "react";
 
-type CheckBoxIcon = {
-  default: React.ReactNode;
-  checked: React.ReactNode;
-};
-
-export type ChoiceChipProps = Omit<
-  CheckboxCardRootProps,
-  "onCheckedChange" | "checked"
-> & {
-  icon?: CheckBoxIcon;
-  onCheckedChange?: (checked: boolean) => void;
-  checked?: boolean;
-};
+import { choiceChipSlotRecipe } from "@/theme/slot-recipes/choice-chip";
 
 /**
- * Choice chips are checkboxes that look like selectable buttons.
+ * Choice chips are radio buttons that look like selectable buttons, allowing only one selection at a time.
  *
  * Choice chips are available in four different sizes - `xs`, `sm`, `md` and `lg`.
  *
  * ```tsx
- * <Stack flexDirection="row">
- *   <ChoiceChip size="lg">Bus</ChoiceChip>
- *   <ChoiceChip size="lg">Train</ChoiceChip>
- * </Stack>
+ * <ChoiceChipGroup defaultValue="economy">
+ *      <ChoiceChip value="economy">Economy</ChoiceChip>
+ *      <ChoiceChip value="business">Business</ChoiceChip>
+ *      <ChoiceChip value="first-class">First Class</ChoiceChip>
+ * </ChoiceChipGroup>
  * ```
  *
- * There are also three different chipType - `icon`, `choice` and `filter`.
- *
- * ```tsx
- * <Stack flexDirection="row">
- *  <ChoiceChip chipType="icon" icon={<Bus24Icon />}>Bus</ChoiceChip>
- *  <ChoiceChip chipType="choice" icon={<Bus24Icon />}>Bus</ChoiceChip>
- *  <ChoiceChip chipType="filter" icon={<Bus24Icon />}>Bus</ChoiceChip>
- * </Stack>
- *
  * There are also three different variants - `core`, `accent` and `floating`.
  *
  * ```tsx
- * <Stack flexDirection="row">
- *   <ChoiceChip variant="core">Bus</ChoiceChip>
- *   <ChoiceChip variant="accent">Boat</ChoiceChip>
- *   <ChoiceChip variant="floating">Train</ChoiceChip>
- * </Stack>
+ * <>
+ * <ChoiceChipGroup defaultValue="bus" variant="core">
+ *   <ChoiceChip value="bus">Bus</ChoiceChip>
+ * </ChoiceChipGroup>
+ * <ChoiceChipGroup defaultValue="bus" variant="accent">
+ *   <ChoiceChip value="bus">Bus</ChoiceChip>
+ * </ChoiceChipGroup>
+ * <ChoiceChipGroup defaultValue="bus" variant="floating">
+ *   <ChoiceChip value="bus">Bus</ChoiceChip>
+ * </ChoiceChipGroup>
+ * </>
  * ```
+ *
+ * @see https://spor.vy.no/components/choice-chip
  */
 
+type RadioCardVariantProps = RecipeVariantProps<typeof choiceChipSlotRecipe>;
+
+type Variant = Pick<RadioCardRootProps, "variant" | "size">;
+
+const ChoiceChipContext = createContext<Variant>({
+  variant: "core",
+  size: "sm",
+});
+const useChoiceChipContext = () => useContext(ChoiceChipContext);
+
+type CheckBoxIcon = {
+  default: React.ReactNode;
+  checked: React.ReactNode;
+};
+
+type RadioCardItemProps = Exclude<
+  ChakraRadioCard.ItemProps,
+  "colorPalette" | "indicator" | "variant" | "size" | "addon"
+> &
+  RadioCardVariantProps & {
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    ariaLabel?: string;
+    icon?: CheckBoxIcon;
+  };
+
 export const ChoiceChip = ({
   ref,
-  children,
-  icon,
-  onCheckedChange,
-  ...rootProps
-}: ChoiceChipProps & {
+  ...props
+}: RadioCardItemProps & {
   ref?: React.Ref<HTMLInputElement>;
 }) => {
+  const { children, inputProps, icon, variant, size, css, ...rest } = props;
+  const { variant: contextVariant, size: contextSize } = useChoiceChipContext();
+
+  const uniqueId = useId();
+  const itemControlId = `radio-card-item-control-${uniqueId}`;
+
+  const inputHasAriaLabel =
+    inputProps?.["aria-labelledby"] || inputProps?.["aria-label"];
+
+  const finalVariant = variant ?? contextVariant;
+  const finalSize = size ?? contextSize;
+
+  const recipe = useSlotRecipe({ key: "choiceChip" });
+  const styles = recipe({
+    variant: finalVariant,
+    size: finalSize,
+  });
+
+  return (
+    <ChakraRadioCard.Item {...rest} css={{ ...css, ...styles.item }}>
+      <ChakraRadioCard.ItemHiddenInput
+        aria-labelledby={
+          inputHasAriaLabel ? inputProps?.["aria-labelledby"] : itemControlId
+        }
+        ref={ref}
+        {...inputProps}
+      />
+      <ChakraRadioCard.ItemControl
+        id={itemControlId}
+        aria-hidden
+        css={styles.itemControl}
+      >
+        <ChakraRadioCard.ItemContext>
+          {({ checked }) => (
+            <ChakraRadioCard.Label css={styles.label}>
+              {checked
+                ? icon?.checked && <Span>{icon.checked}</Span>
+                : icon?.default && <Span>{icon.default}</Span>}
+              {children}
+            </ChakraRadioCard.Label>
+          )}
+        </ChakraRadioCard.ItemContext>
+      </ChakraRadioCard.ItemControl>
+    </ChakraRadioCard.Item>
+  );
+};
+
+type RadioCardRootProps = Exclude<
+  ChakraRadioCard.RootProps,
+  "variant" | "size"
+> &
+  RadioCardVariantProps & {
+    children: React.ReactNode;
+    gap?: string | number;
+    direction?: "row" | "column";
+    display?: string;
+  };
+
+export const ChoiceChipGroup = ({
+  ref,
+  ...props
+}: RadioCardRootProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}) => {
+  const { children, variant, size, css, ...rest } = props;
+  const recipe = useSlotRecipe({ key: "choiceChip" });
+  const styles = recipe({ variant, size });
   return (
-    <CheckboxCard.Root
-      {...rootProps}
-      {...(onCheckedChange && {
-        onCheckedChange: (details) => onCheckedChange(!!details.checked),
-      })}
-    >
-      <CheckboxCard.Context>
-        {({ checked }) => (
-          <>
-            <CheckboxCard.HiddenInput ref={ref} />
-            <CheckboxCard.Control>
-              <CheckboxCard.Content>
-                <CheckboxCard.Label>
-                  {icon && (
-                    <Span width="24px">
-                      {checked ? icon.checked : icon.default}
-                    </Span>
-                  )}
-
-                  {rootProps.chipType !== "icon" && children}
-
-                  {rootProps.chipType === "filter" && checked && (
-                    <CloseOutline24Icon />
-                  )}
-                </CheckboxCard.Label>
-              </CheckboxCard.Content>
-            </CheckboxCard.Control>
-          </>
-        )}
-      </CheckboxCard.Context>
-    </CheckboxCard.Root>
+    <ChoiceChipContext.Provider value={{ variant, size }}>
+      <ChakraRadioCard.Root
+        css={{ ...styles.root, ...css }}
+        ref={ref}
+        variant={variant}
+        {...rest}
+      >
+        {children}
+      </ChakraRadioCard.Root>
+    </ChoiceChipContext.Provider>
   );
 };
+
+export const ChoiceChipLabel = ChakraRadioCard.Label;

package/src/input/FilterChip.tsx

@@ -0,0 +1,85 @@
+"use client";
+import { CheckboxCard, CheckboxCardRootProps, Span } from "@chakra-ui/react";
+import { CloseOutline24Icon } from "@vygruppen/spor-icon-react";
+import React from "react";
+
+type CheckBoxIcon = {
+  default: React.ReactNode;
+  checked: React.ReactNode;
+};
+
+export type FilterChipProps = Omit<
+  CheckboxCardRootProps,
+  "onCheckedChange" | "checked"
+> & {
+  icon?: CheckBoxIcon;
+  onCheckedChange?: (checked: boolean) => void;
+  checked?: boolean;
+};
+
+/**
+ * Filter chips are checkboxes that look like selectable buttons.
+ *
+ * Filter chips are available in four different sizes - `xs`, `sm`, `md` and `lg`.
+ *
+ * ```tsx
+ * <Stack flexDirection="row">
+ *   <FilterChip size="lg">Bus</FilterChip>
+ *   <FilterChip size="lg">Train</FilterChip>
+ * </Stack>
+ * ```
+ *
+ * There are also three different variants - `core`, `accent` and `floating`.
+ *
+ * ```tsx
+ * <Stack flexDirection="row">
+ *   <FilterChip variant="core">Bus</FilterChip>
+ *   <FilterChip variant="accent">Boat</FilterChip>
+ *   <FilterChip variant="floating">Train</FilterChip>
+ * </Stack>
+ * ```
+ *
+ * @see https://spor.vy.no/components/filter-chip
+ */
+
+export const FilterChip = ({
+  ref,
+  children,
+  icon,
+  onCheckedChange,
+  ...rootProps
+}: FilterChipProps & {
+  ref?: React.Ref<HTMLInputElement>;
+}) => {
+  return (
+    <CheckboxCard.Root
+      {...rootProps}
+      {...(onCheckedChange && {
+        onCheckedChange: (details) => onCheckedChange(!!details.checked),
+      })}
+    >
+      <CheckboxCard.Context>
+        {({ checked }) => (
+          <>
+            <CheckboxCard.HiddenInput ref={ref} />
+            <CheckboxCard.Control>
+              <CheckboxCard.Content>
+                <CheckboxCard.Label>
+                  {checked
+                    ? icon?.checked && <Span>{icon.checked}</Span>
+                    : icon?.default && <Span>{icon.default}</Span>}
+
+                  {rootProps.chipType !== "icon" && children}
+
+                  {rootProps.chipType === "filter" && checked && (
+                    <CloseOutline24Icon />
+                  )}
+                </CheckboxCard.Label>
+              </CheckboxCard.Content>
+            </CheckboxCard.Control>
+          </>
+        )}
+      </CheckboxCard.Context>
+    </CheckboxCard.Root>
+  );
+};

package/src/input/PasswordInput.tsx

@@ -69,7 +69,7 @@ export const PasswordInput = ({
   return (
     <Input
       ref={ref}
-      startElement={startElement && startElement}
+      startElement={startElement}
       label={label}
       type={visible ? "text" : "password"}
       endElement={

package/src/input/index.ts

@@ -7,6 +7,7 @@ export * from "./ChoiceChip";
 export * from "./Combobox";
 export * from "./Field";
 export * from "./Fieldset";
+export * from "./FilterChip";
 export * from "./Input";
 export * from "./InputChip";
 export * from "./ListBox";

package/src/popover/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  Box,
   Popover as ChakraPopover,
   Portal,
   usePopoverContext,
@@ -22,8 +23,13 @@ export const PopoverTrigger = ({
   const isStringChild = typeof children === "string";
 
   return (
-    <ChakraPopover.Trigger {...props} ref={ref} asChild={!isStringChild}>
-      {children}
+    <ChakraPopover.Trigger
+      ref={ref}
+      asChild={!isStringChild}
+      width={isStringChild ? undefined : "fit-content"}
+      {...props}
+    >
+      {isStringChild ? children : <Box>{children}</Box>}
     </ChakraPopover.Trigger>
   );
 };
@@ -58,6 +64,7 @@ export const PopoverContent = ({
       <ChakraPopover.Positioner>
         <ChakraPopover.Content ref={ref} {...props}>
           <ChakraPopover.Arrow />
+          <ChakraPopover.Body {...props}>{children}</ChakraPopover.Body>
           {showCloseButton && (
             <div>
               <ChakraPopover.CloseTrigger asChild>
@@ -68,7 +75,6 @@ export const PopoverContent = ({
               </ChakraPopover.CloseTrigger>
             </div>
           )}
-          <ChakraPopover.Body {...props}>{children}</ChakraPopover.Body>
         </ChakraPopover.Content>
       </ChakraPopover.Positioner>
     </Portal>

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

@@ -158,6 +158,7 @@ export const radioCardAnatomy = createAnatomy("radio-card").parts(
   "itemText",
   "itemDescription",
   "itemContent",
+  "itemControl",
 );
 
 export const radioAnatomy = createAnatomy("radio").parts(

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

@@ -1,43 +1,33 @@
 import { defineSlotRecipe } from "@chakra-ui/react";
 
-import { checkboxCardAnatomy } from "./anatomy";
+import { radioCardAnatomy } from "./anatomy";
 
 export const choiceChipSlotRecipe = defineSlotRecipe({
-  slots: checkboxCardAnatomy.keys(),
-  className: "chakra-checkbox-card",
+  className: "spor-choice-chip",
+  slots: radioCardAnatomy.keys(),
   base: {
     root: {
-      display: "inline-flex",
-      alignItems: "center",
-      boxAlign: "center",
-      cursor: "pointer",
+      display: "flex",
+      flexDirection: "row",
+      gap: "1",
+      width: "fit-content",
+    },
+    item: {
+      display: "flex-inline",
       transitionProperty: "all",
-      borderRadius: "xl",
       transitionDuration: "fast",
-      paddingInlineStart: "2",
-      paddingInlineEnd: "2",
 
-      outline: "1px solid",
-      outlineColor: "outline.core",
       _checked: {
-        backgroundColor: "surface.brand",
-        borderRadius: "sm",
         outline: "none",
-        color: "text.brand",
+        _focusVisible: {
+          outline: "2px solid",
+          outlineColor: "outline.focus",
+          outlineOffset: "1px",
+        },
         _hover: {
-          backgroundColor: "surface.brand.hover",
-          _active: {
-            backgroundColor: "surface.brand.active",
-          },
+          outline: "none",
         },
       },
-
-      _focusVisible: {
-        outline: "2px solid",
-        outlineColor: "outline.focus",
-        outlineOffset: "1px",
-      },
-
       _disabled: {
         pointerEvents: "none",
         boxShadow: "none",
@@ -63,34 +53,44 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
         },
       },
     },
-
+    itemControl: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
     label: {
       display: "flex",
       alignItems: "center",
+      justifyContent: "center",
       gap: "1",
     },
   },
-
   variants: {
     size: {
       xs: {
-        root: {
+        item: {
+          borderRadius: "xl",
           _checked: {
-            borderRadius: "0.563rem",
+            borderRadius: "9px",
           },
+        },
+        itemControl: {
           height: 5,
           paddingX: 1.5,
         },
         label: {
           fontSize: { base: "mobile.sm", sm: "desktop.sm" },
-          fontWeight: "medium",
+          fontWeight: "regular",
         },
       },
       sm: {
-        root: {
+        item: {
+          borderRadius: "xl",
           _checked: {
             borderRadius: "sm",
           },
+        },
+        itemControl: {
           height: 6,
           paddingX: 2,
         },
@@ -100,10 +100,13 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
         },
       },
       md: {
-        root: {
+        item: {
+          borderRadius: "xl",
           _checked: {
             borderRadius: "sm",
           },
+        },
+        itemControl: {
           height: 7,
           paddingX: 2,
         },
@@ -113,10 +116,13 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
         },
       },
       lg: {
-        root: {
+        item: {
+          borderRadius: "xl",
           _checked: {
             borderRadius: "md",
           },
+        },
+        itemControl: {
           height: 8,
           paddingX: 3,
         },
@@ -126,13 +132,20 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
         },
       },
     },
-
     variant: {
       core: {
-        root: {
-          color: "text.core",
-          outlineColor: "outline.core",
-
+        itemControl: {
+          _checked: {
+            backgroundColor: "surface.brand",
+            color: "text.brand",
+            outline: "none",
+            _hover: {
+              backgroundColor: "surface.brand.hover",
+              _active: {
+                backgroundColor: "surface.brand.active",
+              },
+            },
+          },
           _hover: {
             outline: "2px solid",
             outlineColor: "outline.core.hover",
@@ -146,11 +159,22 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
         },
       },
       accent: {
-        root: {
+        itemControl: {
           backgroundColor: "surface.accent",
           color: "text.accent",
           outline: "none",
-
+          border: "none",
+          _checked: {
+            backgroundColor: "surface.brand",
+            color: "text.brand",
+            outline: "none",
+            _hover: {
+              backgroundColor: "surface.brand.hover",
+              _active: {
+                backgroundColor: "surface.brand.active",
+              },
+            },
+          },
           _hover: {
             backgroundColor: "surface.accent.hover",
 
@@ -161,13 +185,24 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
         },
       },
       floating: {
-        root: {
+        itemControl: {
           backgroundColor: "surface.floating",
           outline: "1px solid",
           outlineColor: "outline.floating",
           color: "text.floating",
 
           boxShadow: "sm",
+          _checked: {
+            backgroundColor: "surface.brand",
+            color: "text.brand",
+            outline: "none",
+            _hover: {
+              backgroundColor: "surface.brand.hover",
+              _active: {
+                backgroundColor: "surface.brand.active",
+              },
+            },
+          },
           _hover: {
             backgroundColor: "surface.floating.hover",
             outline: "1px solid",
@@ -182,16 +217,9 @@ export const choiceChipSlotRecipe = defineSlotRecipe({
         },
       },
     },
-    chipType: {
-      icon: {},
-      choice: {},
-      filter: {},
-    },
   },
-
   defaultVariants: {
     size: "sm",
     variant: "core",
-    chipType: "choice",
   },
 });