@vygruppen/spor-react 13.1.4 → 13.2.1

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

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

@@ -0,0 +1,197 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+
+import { checkboxCardAnatomy } from "./anatomy";
+
+export const filterChipSlotRecipe = defineSlotRecipe({
+  slots: checkboxCardAnatomy.keys(),
+  className: "chakra-checkbox-card",
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      boxAlign: "center",
+      cursor: "pointer",
+      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",
+        _hover: {
+          outline: "none",
+          backgroundColor: "surface.brand.hover",
+          _active: {
+            backgroundColor: "surface.brand.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: "surface.disabled",
+          boxShadow: "none",
+          color: "text.disabled",
+        },
+        _checked: {
+          cursor: "not-allowed",
+          boxShadow: "none",
+          color: "text.disabled",
+          backgroundColor: "surface.disabled",
+          _hover: {
+            backgroundColor: "surface.disabled",
+            boxShadow: "none",
+            color: "text.disabled",
+          },
+        },
+      },
+    },
+
+    label: {
+      display: "flex",
+      alignItems: "center",
+      gap: "1",
+    },
+  },
+
+  variants: {
+    size: {
+      xs: {
+        root: {
+          _checked: {
+            borderRadius: "0.563rem",
+          },
+          height: 5,
+          paddingX: 1.5,
+        },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "medium",
+        },
+      },
+      sm: {
+        root: {
+          _checked: {
+            borderRadius: "sm",
+          },
+          height: 6,
+          paddingX: 2,
+        },
+        label: {
+          fontSize: { base: "mobile.sm", sm: "desktop.sm" },
+          fontWeight: "bold",
+        },
+      },
+      md: {
+        root: {
+          _checked: {
+            borderRadius: "sm",
+          },
+          height: 7,
+          paddingX: 2,
+        },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold",
+        },
+      },
+      lg: {
+        root: {
+          _checked: {
+            borderRadius: "md",
+          },
+          height: 8,
+          paddingX: 3,
+        },
+        label: {
+          fontSize: { base: "mobile.md", sm: "desktop.md" },
+          fontWeight: "bold",
+        },
+      },
+    },
+
+    variant: {
+      core: {
+        root: {
+          color: "text.core",
+          outlineColor: "outline.core",
+
+          _hover: {
+            outline: "2px solid",
+            outlineColor: "outline.core.hover",
+            _active: {
+              outline: "1px solid",
+              outlineColor: "outline.core",
+              backgroundColor: "surface.core.active",
+            },
+          },
+        },
+      },
+      accent: {
+        root: {
+          backgroundColor: "surface.accent",
+          color: "text.accent",
+          outline: "none",
+
+          _hover: {
+            backgroundColor: "surface.accent.hover",
+
+            _active: {
+              backgroundColor: "surface.accent.active",
+            },
+          },
+        },
+      },
+      floating: {
+        root: {
+          backgroundColor: "surface.floating",
+          outline: "1px solid",
+          outlineColor: "outline.floating",
+          color: "text.floating",
+
+          boxShadow: "sm",
+          _hover: {
+            backgroundColor: "surface.floating.hover",
+            outline: "1px solid",
+            outlineColor: "outline.floating.hover",
+
+            _active: {
+              backgroundColor: "surface.floating.active",
+              outline: "1px solid",
+              outlineColor: "outline.floating",
+            },
+          },
+        },
+      },
+    },
+    chipType: {
+      icon: {},
+      choice: {},
+      filter: {},
+    },
+  },
+
+  defaultVariants: {
+    size: "sm",
+    variant: "core",
+    chipType: "choice",
+  },
+});

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

@@ -11,6 +11,7 @@ import { datePickerSlotRecipe } from "./datepicker";
 import { dialogSlotRecipe } from "./dialog";
 import { drawerSlotRecipe } from "./drawer";
 import { fieldSlotRecipe } from "./field";
+import { filterChipSlotRecipe } from "./filter-chip";
 import { floatingActionButtonSlotRecipe } from "./floating-action-button";
 import { infoTagSlotRecipe } from "./info-tag";
 import { inputChipSlotRecipe } from "./input-chip";
@@ -68,9 +69,10 @@ export const slotRecipes = {
   tabs: tabsSlotRecipe,
   travelTag: travelTagSlotRecipe,
   toast: toastSlotRecipe,
-  checkboxCard: choiceChipSlotRecipe,
+  checkboxCard: filterChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
   tooltip: popoverSlotRecipe,
   tag: inputChipSlotRecipe,
   menu: menuSlotRecipe,
+  choiceChip: choiceChipSlotRecipe,
 };

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

@@ -11,16 +11,17 @@ export const numericStepperRecipe = defineSlotRecipe({
         display: "flex",
         flexDirection: "row",
         alignItems: "center",
+        gap: 1,
       },
     },
     input: {
       fontSize: "sm",
       fontWeight: "bold",
-      marginX: 0.5,
       padding: 0,
       paddingX: 0.5,
       borderRadius: "xs",
-      outline: "none",
+      outline: "1px solid",
+      outlineColor: "outline.core",
       height: "auto",
       textAlign: "center",
       transitionProperty: "common",