@vygruppen/spor-react 12.2.0 → 12.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.2.0",
+  "version": "12.2.1",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -36,8 +36,8 @@
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
     "@vygruppen/spor-design-tokens": "4.0.5",
-    "@vygruppen/spor-icon-react": "4.0.3",
-    "@vygruppen/spor-loader": "0.6.0"
+    "@vygruppen/spor-loader": "0.6.0",
+    "@vygruppen/spor-icon-react": "4.0.4"
   },
   "devDependencies": {
     "@chakra-ui/cli": "^3.8.0",
@@ -56,8 +56,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/tsconfig": "0.1.0",
-    "@vygruppen/eslint-config": "1.0.1"
+    "@vygruppen/eslint-config": "1.0.1",
+    "@vygruppen/tsconfig": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/input/ChoiceChip.tsx

@@ -1,30 +1,15 @@
 "use client";
-import {
-  chakra,
-  RecipeVariantProps,
-  Span,
-  useCheckbox,
-} from "@chakra-ui/react";
+import { CheckboxCard, CheckboxCardRootProps, Span } from "@chakra-ui/react";
 import { CloseOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, { ChangeEvent, PropsWithChildren } from "react";
+import React, { forwardRef } from "react";
 
-import { choiceChipRecipe } from "@/theme/recipes/choice-chip";
-
-type ChoiceChipVariantProps = RecipeVariantProps<typeof choiceChipRecipe>;
+type CheckBoxIcon = {
+  default: React.ReactNode;
+  checked: React.ReactNode;
+};
 
-export type ChoiceChipProps = PropsWithChildren<ChoiceChipVariantProps> & {
-  onChange?: (value: ChangeEvent<HTMLInputElement>) => void;
-  checked?: boolean;
-  disabled?: boolean;
-  defaultChecked?: boolean;
-  /** The button text */
-  children: React.ReactNode;
-  icon?: {
-    default: React.ReactNode;
-    checked: React.ReactNode;
-  };
-  chipType?: "icon" | "choice" | "filter";
-  "aria-label"?: string;
+export type ChoiceChipProps = CheckboxCardRootProps & {
+  icon?: CheckBoxIcon;
 };
 
 /**
@@ -59,49 +44,37 @@ export type ChoiceChipProps = PropsWithChildren<ChoiceChipVariantProps> & {
  * ```
  */
 
-const ChoiceChipStyledDiv = chakra("div", choiceChipRecipe);
+export const ChoiceChip = forwardRef<HTMLInputElement, ChoiceChipProps>(
+  ({ children, icon, ...rootProps }, ref) => {
+    return (
+      <CheckboxCard.Root {...rootProps}>
+        <CheckboxCard.Context>
+          {({ checked }) => (
+            <>
+              <CheckboxCard.HiddenInput ref={ref} />
+              <CheckboxCard.Control>
+                <CheckboxCard.Content>
+                  <CheckboxCard.Label>
+                    {icon && (
+                      <Span width="24px">
+                        {checked ? icon.checked : icon.default}
+                      </Span>
+                    )}
 
-export const ChoiceChip = ({
-  children,
-  icon,
-  size = "sm",
-  chipType = "choice",
-  variant = "core",
-  ...props
-}: ChoiceChipProps) => {
-  const {
-    getControlProps,
-    disabled,
-    getLabelProps,
-    getHiddenInputProps,
-    setChecked,
-    checked,
-  } = useCheckbox(props);
+                    {rootProps.chipType !== "icon" && children}
 
-  return (
-    <chakra.label
-      {...getLabelProps()}
-      aria-label={props["aria-label"] ?? String(children)}
-    >
-      <chakra.input
-        {...getHiddenInputProps()}
-        disabled={disabled}
-        defaultChecked={checked}
-        value={checked ? "on" : "off"}
-        type="checkbox"
-        aria-checked={checked}
-        onClick={() => {
-          setChecked(!checked);
-        }}
-      />
-      <ChoiceChipStyledDiv {...getControlProps()} size={size} variant={variant}>
-        {icon && <Span>{checked ? icon.checked : icon.default}</Span>}
-        {chipType !== "icon" && <Span>{children}</Span>}
+                    {rootProps.chipType === "filter" && checked && (
+                      <CloseOutline24Icon />
+                    )}
+                  </CheckboxCard.Label>
+                </CheckboxCard.Content>
+              </CheckboxCard.Control>
+            </>
+          )}
+        </CheckboxCard.Context>
+      </CheckboxCard.Root>
+    );
+  },
+);
 
-        {chipType === "filter" && checked && (
-          <CloseOutline24Icon marginLeft={1.5} />
-        )}
-      </ChoiceChipStyledDiv>
-    </chakra.label>
-  );
-};
+ChoiceChip.displayName = "ChoiceChip";

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",
+  },
+});

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

@@ -4,6 +4,7 @@ import { alertExpandableSlotRecipe } from "./alert-expandable";
 import { alertServiceSlotRecipe } from "./alert-service";
 import { breadcrumbSlotRecipe } from "./breadcrumb";
 import { checkboxSlotRecipe } from "./checkbox";
+import { choiceChipSlotRecipe } from "./choice-chip";
 import { datePickerSlotRecipe } from "./datepicker";
 import { dialogSlotRecipe } from "./dialog";
 import { drawerSlotRecipe } from "./drawer";
@@ -62,4 +63,5 @@ export const slotRecipes = {
   tabs: tabsSlotRecipe,
   travelTag: travelTagSlotRecipe,
   toast: toastSlotRecipe,
+  checkboxCard: choiceChipSlotRecipe,
 };

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

@@ -1,144 +0,0 @@
-import { defineRecipe } from "@chakra-ui/react";
-
-export const choiceChipRecipe = defineRecipe({
-  base: {
-    display: "inline-flex",
-    alignItems: "center",
-    boxAlign: "center",
-    fontSize: "xs",
-    cursor: "pointer",
-    transitionProperty: "all",
-    borderRadius: "xl",
-    transitionDuration: "fast",
-    height: 6,
-    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",
-        },
-      },
-    },
-  },
-  variants: {
-    variant: {
-      core: {
-        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: {
-        backgroundColor: "accent.surface",
-        color: "accent.text",
-        outline: "none",
-
-        _hover: {
-          backgroundColor: "accent.surface.hover",
-
-          _active: {
-            backgroundColor: "accent.surface.active",
-          },
-        },
-      },
-      floating: {
-        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",
-          },
-        },
-      },
-    },
-    size: {
-      xs: {
-        _checked: {
-          borderRadius: "0.563rem",
-        },
-        height: 5,
-        paddingX: 1.5,
-      },
-      sm: {
-        _checked: {
-          borderRadius: "sm",
-        },
-        height: 6,
-        paddingX: 2,
-      },
-      md: {
-        _checked: {
-          borderRadius: "sm",
-        },
-        height: 7,
-        paddingX: 2,
-      },
-      lg: {
-        _checked: {
-          borderRadius: "md",
-        },
-        height: 8,
-        paddingX: 3,
-      },
-    },
-  },
-});