@vygruppen/spor-react 13.1.4 → 13.2.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@13.1.4 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.2.0 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs           338.58 KB
-ESM dist/icons/index.mjs.map 157.00 B
-ESM dist/index.mjs.map       721.19 KB
-ESM ⚡️ Build success in 2721ms
-CJS dist/index.cjs           362.66 KB
+CJS dist/index.cjs           370.47 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       721.19 KB
+CJS dist/index.cjs.map       736.09 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2721ms
-DTS ⚡️ Build success in 21770ms
+CJS ⚡️ Build success in 2740ms
+ESM dist/index.mjs           346.13 KB
+ESM dist/icons/index.mjs     110.00 B
+ESM dist/index.mjs.map       736.09 KB
+ESM dist/icons/index.mjs.map 157.00 B
+ESM ⚡️ Build success in 2742ms
+DTS ⚡️ Build success in 22147ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        143.31 KB
+DTS dist/index.d.ts        150.06 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       143.31 KB
+DTS dist/index.d.cts       150.06 KB

package/.turbo/turbo-postinstall.log

@@ -1,8 +1,8 @@
 
-> @vygruppen/spor-react@13.1.4 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.2.0 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-◇ injected env (0) from .env // tip: ⌁ auth for agents [www.vestauth.com]
+◇ injected env (0) from .env // tip: ⌘ enable debugging { debug: true }
 ┌  Chakra CLI ⚡️
 [?25l│
 ◒  Generating conditions types...

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 13.2.0
+
+### Minor Changes
+
+- 305f387: Introduces two new Chip-components: ChoiceChip and FilterChip. ChoiceChip becomes a singleselect chip, where the user can only select a singluar item among the chips that are grouped together. FilterChip is introduced as the new multipleselect chip, where the user can select multiple items among the chips that are grouped together.
+
 ## 13.1.4
 
 ### Patch Changes

package/dist/index.cjs

@@ -3757,31 +3757,69 @@ var CheckboxGroup = (props) => {
   const { direction = "row", children, gap = 1, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxGroup, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { direction, gap, children }) });
 };
+var ChoiceChipContext = React13.createContext({
+  variant: "core",
+  size: "sm"
+});
+var useChoiceChipContext = () => React13.useContext(ChoiceChipContext);
 var ChoiceChip = ({
   ref,
-  children,
-  icon,
-  onCheckedChange,
-  ...rootProps
+  ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    react.CheckboxCard.Root,
+  const { children, inputProps, icon, variant, size, css, ...rest } = props;
+  const { variant: contextVariant, size: contextSize } = useChoiceChipContext();
+  const uniqueId = React13.useId();
+  const itemControlId = `radio-card-item-control-${uniqueId}`;
+  const inputHasAriaLabel = (inputProps == null ? void 0 : inputProps["aria-labelledby"]) || (inputProps == null ? void 0 : inputProps["aria-label"]);
+  const finalVariant = variant ?? contextVariant;
+  const finalSize = size ?? contextSize;
+  const recipe = react.useSlotRecipe({ key: "choiceChip" });
+  const styles = recipe({
+    variant: finalVariant,
+    size: finalSize
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.Item, { ...rest, css: { ...css, ...styles.item }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.RadioCard.ItemHiddenInput,
+      {
+        "aria-labelledby": inputHasAriaLabel ? inputProps == null ? void 0 : inputProps["aria-labelledby"] : itemControlId,
+        ref,
+        ...inputProps
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.RadioCard.ItemControl,
+      {
+        id: itemControlId,
+        "aria-hidden": true,
+        css: styles.itemControl,
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.RadioCard.ItemContext, { children: ({ checked }) => /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.Label, { css: styles.label, children: [
+          checked ? (icon == null ? void 0 : icon.checked) && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: icon.checked }) : (icon == null ? void 0 : icon.default) && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: icon.default }),
+          children
+        ] }) })
+      }
+    )
+  ] });
+};
+var ChoiceChipGroup = ({
+  ref,
+  ...props
+}) => {
+  const { children, variant, size, css, ...rest } = props;
+  const recipe = react.useSlotRecipe({ key: "choiceChip" });
+  const styles = recipe({ variant, size });
+  return /* @__PURE__ */ jsxRuntime.jsx(ChoiceChipContext.Provider, { value: { variant, size }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    react.RadioCard.Root,
     {
-      ...rootProps,
-      ...onCheckedChange && {
-        onCheckedChange: (details) => onCheckedChange(!!details.checked)
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Context, { children: ({ checked }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.HiddenInput, { ref }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.CheckboxCard.Label, { children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { width: "24px", children: checked ? icon.checked : icon.default }),
-          rootProps.chipType !== "icon" && children,
-          rootProps.chipType === "filter" && checked && /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseOutline24Icon, {})
-        ] }) }) })
-      ] }) })
+      css: { ...styles.root, ...css },
+      ref,
+      variant,
+      ...rest,
+      children
     }
-  );
+  ) });
 };
+var ChoiceChipLabel = react.RadioCard.Label;
 var Popover = ({
   ref,
   children,
@@ -4038,6 +4076,31 @@ var FieldsetLegend = react.Fieldset.Legend;
 var FieldsetContent = react.Fieldset.Content;
 var FieldsetHelperText = react.Fieldset.HelperText;
 var FieldsetErrorText = react.Fieldset.ErrorText;
+var FilterChip = ({
+  ref,
+  children,
+  icon,
+  onCheckedChange,
+  ...rootProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.CheckboxCard.Root,
+    {
+      ...rootProps,
+      ...onCheckedChange && {
+        onCheckedChange: (details) => onCheckedChange(!!details.checked)
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Context, { children: ({ checked }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.HiddenInput, { ref }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Control, { children: /* @__PURE__ */ jsxRuntime.jsx(react.CheckboxCard.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.CheckboxCard.Label, { children: [
+          checked ? (icon == null ? void 0 : icon.checked) && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: icon.checked }) : (icon == null ? void 0 : icon.default) && /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: icon.default }),
+          rootProps.chipType !== "icon" && children,
+          rootProps.chipType === "filter" && checked && /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CloseOutline24Icon, {})
+        ] }) }) })
+      ] }) })
+    }
+  );
+};
 var InputChip = ({
   startIcon,
   endIcon,
@@ -7832,7 +7895,8 @@ var radioCardAnatomy = anatomy.createAnatomy("radio-card").parts(
   "label",
   "itemText",
   "itemDescription",
-  "itemContent"
+  "itemContent",
+  "itemControl"
 );
 var radioAnatomy = anatomy.createAnatomy("radio").parts(
   "root",
@@ -8613,38 +8677,30 @@ var checkboxSlotRecipe = react.defineSlotRecipe({
   }
 });
 var choiceChipSlotRecipe = react.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",
@@ -8669,32 +8725,44 @@ var choiceChipSlotRecipe = react.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
         },
@@ -8704,10 +8772,13 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
         }
       },
       md: {
-        root: {
+        item: {
+          borderRadius: "xl",
           _checked: {
             borderRadius: "sm"
-          },
+          }
+        },
+        itemControl: {
           height: 7,
           paddingX: 2
         },
@@ -8717,10 +8788,13 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
         }
       },
       lg: {
-        root: {
+        item: {
+          borderRadius: "xl",
           _checked: {
             borderRadius: "md"
-          },
+          }
+        },
+        itemControl: {
           height: 8,
           paddingX: 3
         },
@@ -8732,9 +8806,18 @@ var choiceChipSlotRecipe = react.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",
@@ -8747,10 +8830,22 @@ var choiceChipSlotRecipe = react.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",
             _active: {
@@ -8760,12 +8855,23 @@ var choiceChipSlotRecipe = react.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",
@@ -8778,17 +8884,11 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
           }
         }
       }
-    },
-    chipType: {
-      icon: {},
-      choice: {},
-      filter: {}
     }
   },
   defaultVariants: {
     size: "sm",
-    variant: "core",
-    chipType: "choice"
+    variant: "core"
   }
 });
 var collapsibleSlotRecipe = react.defineSlotRecipe({
@@ -9510,6 +9610,186 @@ var fieldSlotRecipe = react.defineSlotRecipe({
     }
   }
 });
+var filterChipSlotRecipe = react.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"
+  }
+});
 var floatingActionButtonSlotRecipe = react.defineSlotRecipe({
   slots: floatingActionButtonAnatomy.keys(),
   className: "spor-floating-action-button",
@@ -11822,11 +12102,12 @@ var slotRecipes = {
   tabs: tabsSlotRecipe,
   travelTag: travelTagSlotRecipe,
   toast: toastSlotRecipe,
-  checkboxCard: choiceChipSlotRecipe,
+  checkboxCard: filterChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
   tooltip: popoverSlotRecipe,
   tag: inputChipSlotRecipe,
-  menu: menuSlotRecipe
+  menu: menuSlotRecipe,
+  choiceChip: choiceChipSlotRecipe
 };
 var animations = react.defineTokens.animations({
   spin: {
@@ -12950,6 +13231,8 @@ exports.CargonetLogo = CargonetLogo;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.ChoiceChip = ChoiceChip;
+exports.ChoiceChipGroup = ChoiceChipGroup;
+exports.ChoiceChipLabel = ChoiceChipLabel;
 exports.Clipboard = Clipboard;
 exports.ClipboardButton = ClipboardButton;
 exports.CloseButton = CloseButton;
@@ -13001,6 +13284,7 @@ exports.FieldsetContent = FieldsetContent;
 exports.FieldsetErrorText = FieldsetErrorText;
 exports.FieldsetHelperText = FieldsetHelperText;
 exports.FieldsetLegend = FieldsetLegend;
+exports.FilterChip = FilterChip;
 exports.FloatingActionButton = FloatingActionButton;
 exports.Heading = Heading;
 exports.IconButton = IconButton;