@vygruppen/spor-react 12.7.0 → 12.7.1

package/dist/index.cjs

@@ -13,11 +13,12 @@ var lu = require('react-icons/lu');
 var reactStately = require('react-stately');
 var date = require('@internationalized/date');
 var awesomePhonenumber = require('awesome-phonenumber');
-var tokens23 = require('@vygruppen/spor-design-tokens');
 var react$1 = require('@emotion/react');
+var tokens23 = require('@vygruppen/spor-design-tokens');
 var tokens4 = require('@vygruppen/spor-design-tokens/raw-tokens');
 var anatomy = require('@ark-ui/react/anatomy');
 var popover = require('@ark-ui/react/popover');
+var collapsible = require('@ark-ui/react/collapsible');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -626,38 +627,12 @@ var texts2 = createTexts({
     sv: "Laddar\u2026"
   }
 });
-var groupRecipe = react.defineRecipe({
-  className: "spor-group",
-  base: {
-    fontSize: "lg"
-  },
-  variants: {
-    disabled: {
-      true: {
-        "& > *": {
-          pointerEvents: "none",
-          backgroundColor: "surface.disabled",
-          color: "text.disabled"
-        }
-      }
-    }
-  }
-});
-var Group = react.chakra(react.Group, groupRecipe);
 var ButtonGroup = React28.forwardRef(
   (props, ref) => {
-    const { children, disabled, grow, attached, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Group,
-      {
-        ...rest,
-        ref,
-        attached,
-        grow,
-        disabled,
-        children
-      }
-    );
+    const recipe = react.useRecipe({ key: "buttonGroup" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Group, { ...restProps, ref, css: styles });
   }
 );
 ButtonGroup.displayName = "ButtonGroup";
@@ -2366,7 +2341,7 @@ var DialogContent = React28__namespace.forwardRef((props, ref) => {
 });
 DialogContent.displayName = "DialogContent";
 var DialogCloseTrigger = React28__namespace.forwardRef(function DialogCloseTrigger2(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.CloseTrigger, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "md" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Dialog.CloseTrigger, { ref, position: "absolute", ...props, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "md" }) });
 });
 var DialogRoot = react.Dialog.Root;
 var DialogFooter = react.Dialog.Footer;
@@ -2467,51 +2442,12 @@ var texts12 = createTexts({
     sv: "St\xE4ng"
   }
 });
-var attachedInputsRecipe = react.defineRecipe({
-  base: {
-    display: "flex",
-    gap: "0.1rem",
-    width: "100%",
-    "& select": {
-      borderEndRadius: 0
-    }
-  },
-  variants: {
-    orientation: {
-      horizontal: {
-        flexDirection: "row",
-        "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
-          borderEndRadius: 0
-        },
-        "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
-          borderRadius: 0
-        },
-        "& > *:not(:first-of-type):last-of-type [data-attachable]": {
-          borderStartRadius: 0
-        }
-      },
-      vertical: {
-        flexDirection: "column",
-        "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
-          borderBottomRadius: 0
-        },
-        "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
-          borderRadius: 0
-        },
-        "& > *:not(:first-of-type):last-of-type [data-attachable]": {
-          borderTopRadius: 0
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    orientation: "horizontal"
-  }
-});
-var StyledGroup = react.chakra(react.Group, attachedInputsRecipe);
 var AttachedInputs = React28.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(StyledGroup, { ref, attached: true, ...props });
+    const recipe = react.useRecipe({ key: "attachedInputs" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Group, { ref, css: styles, attached: true, ...restProps });
   }
 );
 AttachedInputs.displayName = "AttachedInputs";
@@ -2833,90 +2769,6 @@ var FieldsetLegend = react.Fieldset.Legend;
 var FieldsetContent = react.Fieldset.Content;
 var FieldsetHelperText = react.Fieldset.HelperText;
 var FieldsetErrorText = react.Fieldset.ErrorText;
-var inputRecipe = react.defineRecipe({
-  base: {
-    appearance: "none",
-    width: "100%",
-    outline: "none",
-    border: 0,
-    borderRadius: "sm",
-    transitionProperty: "common",
-    transitionDuration: "fast",
-    color: "text",
-    position: "relative",
-    paddingX: 3,
-    paddingTop: 3,
-    height: 8,
-    fontSize: "mobile.md",
-    _disabled: {
-      backgroundColor: "surface.disabled",
-      outline: "1px solid",
-      outlineColor: "outline.disabled",
-      pointerEvents: "none"
-    },
-    _invalid: {
-      outline: "2px solid",
-      outlineColor: "outline.error",
-      _active: {
-        outline: "2px solid",
-        outlineColor: "outline.error"
-      },
-      _focus: {
-        outline: "2px solid",
-        outlineColor: "outline.error"
-      },
-      _hover: {
-        outline: "2px solid",
-        outlineColor: "core.outline"
-      }
-    }
-  },
-  variants: {
-    variant: {
-      core: {
-        backgroundColor: "transparent",
-        outline: "1px solid",
-        outlineColor: "core.outline",
-        _hover: {
-          outline: "2px solid",
-          outlineColor: "core.outline.hover",
-          _active: {
-            outline: "1px solid",
-            outlineColor: "outline.disabled",
-            backgroundColor: "core.surface.active"
-          }
-        },
-        _focus: {
-          outline: "2px solid",
-          outlineColor: "outline.focus"
-        }
-      },
-      floating: {
-        boxShadow: "sm",
-        bg: "floating.surface",
-        outline: "1px solid",
-        outlineColor: "floating.outline",
-        _hover: {
-          outline: "1px solid",
-          outlineColor: "floating.outline.hover"
-        },
-        _active: {
-          outline: "1px solid",
-          outlineColor: "floating.outline.active",
-          backgroundColor: "floating.surface.active"
-        },
-        focus: {
-          outline: "1px solid",
-          outlineColor: "outline.focus"
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "core"
-  }
-});
-var StyledInput = react.chakra(react.Input, inputRecipe);
 var Input = React28.forwardRef(
   ({
     startElement,
@@ -2927,6 +2779,9 @@ var Input = React28.forwardRef(
     errorText,
     ...props
   }, ref) => {
+    const recipe = react.useRecipe({ key: "input" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Field3,
       {
@@ -2944,7 +2799,7 @@ var Input = React28.forwardRef(
         children: [
           startElement && /* @__PURE__ */ jsxRuntime.jsx(react.InputElement, { pointerEvents: "none", paddingX: 2, children: startElement }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            StyledInput,
+            react.Input,
             {
               "data-attachable": true,
               ref,
@@ -2952,9 +2807,10 @@ var Input = React28.forwardRef(
               overflow: "hidden",
               paddingLeft: startElement ? "2.6rem" : void 0,
               paddingRight: endElement ? "2.6rem" : void 0,
-              ...props,
+              ...restProps,
               className: `peer ${props.className}`,
-              placeholder: ""
+              placeholder: "",
+              css: styles
             }
           ),
           endElement && /* @__PURE__ */ jsxRuntime.jsx(react.InputElement, { placement: "end", paddingX: 2, children: endElement })
@@ -3790,97 +3646,12 @@ var Textarea = React28.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-
-// src/util/slugify.tsx
-function slugify(text, maxLength = 50) {
-  if (!text) {
-    return text;
-  }
-  if (Array.isArray(text)) {
-    text = text.join(" ");
-  }
-  if (maxLength < 1) {
-    throw new Error("The maxLength parameter must be a positive number");
-  }
-  return text.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[\u00C6\u00E6]/g, "ae").replaceAll(/[\u00D8\u00F8]/g, "oe").replaceAll(/[\u00C5\u00E5]/g, "aa").toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^\w-]+/g, "").replaceAll(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").slice(0, Math.max(0, maxLength));
-}
-
-// src/theme/recipes/pressable-card.ts
-var pressableCardRecipe = react.defineRecipe({
-  base: {
-    appearance: "none",
-    border: "none",
-    overflow: "hidden",
-    fontSize: "inherit",
-    display: "block",
-    borderRadius: "md",
-    cursor: "pointer",
-    transitionProperty: "common",
-    transitionDuration: "fast",
-    _disabled: {
-      outline: "none",
-      pointerEvents: "none",
-      background: "surface.disabled",
-      color: "text.disabled"
-    }
-  },
-  variants: {
-    variant: {
-      floating: {
-        boxShadow: "0px 1px 3px 0px var(--shadow-color)",
-        shadowColor: "surface.disabled",
-        border: "sm",
-        borderColor: "floating.outline",
-        backgroundColor: "floating.surface",
-        _hover: {
-          boxShadow: "0px 2px 6px 0px var(--shadow-color)",
-          backgroundColor: "floating.surface.hover",
-          borderColor: "floating.outline.hover",
-          _active: {
-            boxShadow: "none",
-            backgroundColor: "floating.surface.active",
-            borderColor: "floating.outline.active"
-          }
-        }
-      },
-      core: {
-        outlineColor: "core.outline",
-        outlineWidth: tokens23__namespace.default.size.stroke.sm,
-        outlineStyle: "solid",
-        backgroundColor: "core.surface",
-        _hover: {
-          outlineColor: "core.outline.hover",
-          outlineWidth: tokens23__namespace.default.size.stroke.md,
-          outlineStyle: "solid",
-          _active: {
-            backgroundColor: "core.surface.active",
-            outlineWidth: tokens23__namespace.default.size.stroke.sm
-          }
-        }
-      },
-      accent: {
-        boxShadow: "0px 1px 3px 0px var(--shadow-color)",
-        shadowColor: "surface.disabled",
-        background: "alert.success.surface",
-        _hover: {
-          background: "alert.success.surface.hover",
-          boxShadow: "0px 2px 6px 0px var(--shadow-color)",
-          _active: {
-            background: "alert.success.surface.active",
-            boxShadow: "none"
-          }
-        }
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "core"
-  }
-});
-var PressableCardButton = react.chakra("button", pressableCardRecipe);
 var PressableCard = React28.forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(PressableCardButton, { ...props, ref });
+    const recipe = react.useRecipe({ key: "pressableCard" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(react.chakra.button, { ...restProps, css: styles, ref });
   }
 );
 PressableCard.displayName = "PressableCard";
@@ -3943,55 +3714,20 @@ var Separator = React28.forwardRef(
   }
 );
 Separator.displayName = "Separator";
-var staticCardRecipe = react.defineRecipe({
-  base: {
-    borderRadius: "md"
-  },
-  variants: {
-    colorPalette: {
-      white: {
-        backgroundColor: "surface.color.neutral",
-        color: "text"
-      },
-      grey: {
-        backgroundColor: "surface.color.grey"
-      },
-      yellow: {
-        backgroundColor: "surface.color.cream"
-      },
-      darkYellow: {
-        backgroundColor: "surface.color.yellow"
-      },
-      red: {
-        backgroundColor: "surface.color.red"
-      },
-      green: {
-        backgroundColor: "surface.color.green"
-      },
-      blue: {
-        backgroundColor: "surface.color.blue"
-      },
-      orange: {
-        backgroundColor: "surface.color.orange"
-      }
-    }
-  },
-  defaultVariants: {
-    colorPalette: "white"
-  }
-});
-var StyledCardBox = react.chakra("div", staticCardRecipe);
-var StaticCard = React28.forwardRef(
-  (props, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(StyledCardBox, { ...props, ref });
-  }
-);
-StaticCard.displayName = "StaticCard";
-var icons = {
-  "local-train": {
-    sm: sporIconReact.TrainFill18Icon,
-    md: sporIconReact.TrainFill24Icon,
-    lg: sporIconReact.TrainFill30Icon
+var StaticCard = React28.forwardRef(
+  (props, ref) => {
+    const recipe = react.useRecipe({ key: "staticCard" });
+    const [recipeProps, restProps] = recipe.splitVariantProps(props);
+    const styles = recipe(recipeProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: styles, ...restProps, ref });
+  }
+);
+StaticCard.displayName = "StaticCard";
+var icons = {
+  "local-train": {
+    sm: sporIconReact.TrainFill18Icon,
+    md: sporIconReact.TrainFill24Icon,
+    lg: sporIconReact.TrainFill30Icon
   },
   "region-train": {
     sm: sporIconReact.TrainFill18Icon,
@@ -5544,6 +5280,47 @@ var Table = React28.forwardRef((props, ref) => {
   );
 });
 Table.displayName = "Table";
+var attachedInputsRecipe = react.defineRecipe({
+  base: {
+    display: "flex",
+    gap: "0.1rem",
+    width: "100%",
+    "& select": {
+      borderEndRadius: 0
+    }
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: "row",
+        "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
+          borderEndRadius: 0
+        },
+        "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
+          borderRadius: 0
+        },
+        "& > *:not(:first-of-type):last-of-type [data-attachable]": {
+          borderStartRadius: 0
+        }
+      },
+      vertical: {
+        flexDirection: "column",
+        "& > *:first-of-type:not(:last-of-type) [data-attachable]": {
+          borderBottomRadius: 0
+        },
+        "& > *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
+          borderRadius: 0
+        },
+        "& > *:not(:first-of-type):last-of-type [data-attachable]": {
+          borderTopRadius: 0
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
 var buttonRecipe = react.defineRecipe({
   className: "spor-button",
   base: {
@@ -5707,6 +5484,106 @@ var closeButtonRecipe = react.defineRecipe({
     }
   }
 });
+var groupRecipe = react.defineRecipe({
+  className: "spor-group",
+  base: {
+    fontSize: "lg"
+  },
+  variants: {
+    disabled: {
+      true: {
+        "& > *": {
+          pointerEvents: "none",
+          backgroundColor: "surface.disabled",
+          color: "text.disabled"
+        }
+      }
+    }
+  }
+});
+var inputRecipe = react.defineRecipe({
+  base: {
+    appearance: "none",
+    width: "100%",
+    outline: "none",
+    border: 0,
+    borderRadius: "sm",
+    transitionProperty: "common",
+    transitionDuration: "fast",
+    color: "text",
+    position: "relative",
+    paddingX: 3,
+    paddingTop: 3,
+    height: 8,
+    fontSize: "mobile.md",
+    _disabled: {
+      backgroundColor: "surface.disabled",
+      outline: "1px solid",
+      outlineColor: "outline.disabled",
+      pointerEvents: "none"
+    },
+    _invalid: {
+      outline: "2px solid",
+      outlineColor: "outline.error",
+      _active: {
+        outline: "2px solid",
+        outlineColor: "outline.error"
+      },
+      _focus: {
+        outline: "2px solid",
+        outlineColor: "outline.error"
+      },
+      _hover: {
+        outline: "2px solid",
+        outlineColor: "core.outline"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      core: {
+        backgroundColor: "transparent",
+        outline: "1px solid",
+        outlineColor: "core.outline",
+        _hover: {
+          outline: "2px solid",
+          outlineColor: "core.outline.hover",
+          _active: {
+            outline: "1px solid",
+            outlineColor: "outline.disabled",
+            backgroundColor: "core.surface.active"
+          }
+        },
+        _focus: {
+          outline: "2px solid",
+          outlineColor: "outline.focus"
+        }
+      },
+      floating: {
+        boxShadow: "sm",
+        bg: "floating.surface",
+        outline: "1px solid",
+        outlineColor: "floating.outline",
+        _hover: {
+          outline: "1px solid",
+          outlineColor: "floating.outline.hover"
+        },
+        _active: {
+          outline: "1px solid",
+          outlineColor: "floating.outline.active",
+          backgroundColor: "floating.surface.active"
+        },
+        focus: {
+          outline: "1px solid",
+          outlineColor: "outline.focus"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "core"
+  }
+});
 var linkRecipe = react.defineRecipe({
   base: {
     transitionProperty: "common",
@@ -5785,6 +5662,93 @@ var linkRecipe = react.defineRecipe({
     size: "sm"
   }
 });
+
+// src/util/slugify.tsx
+function slugify(text, maxLength = 50) {
+  if (!text) {
+    return text;
+  }
+  if (Array.isArray(text)) {
+    text = text.join(" ");
+  }
+  if (maxLength < 1) {
+    throw new Error("The maxLength parameter must be a positive number");
+  }
+  return text.normalize("NFD").replaceAll(/[\u0300-\u036F]/g, "").replaceAll(/[\u00C6\u00E6]/g, "ae").replaceAll(/[\u00D8\u00F8]/g, "oe").replaceAll(/[\u00C5\u00E5]/g, "aa").toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^\w-]+/g, "").replaceAll(/--+/g, "-").replace(/^-+/, "").replace(/-+$/, "").slice(0, Math.max(0, maxLength));
+}
+
+// src/theme/recipes/pressable-card.ts
+var pressableCardRecipe = react.defineRecipe({
+  base: {
+    appearance: "none",
+    border: "none",
+    overflow: "hidden",
+    fontSize: "inherit",
+    display: "block",
+    borderRadius: "md",
+    cursor: "pointer",
+    transitionProperty: "common",
+    transitionDuration: "fast",
+    _disabled: {
+      outline: "none",
+      pointerEvents: "none",
+      background: "surface.disabled",
+      color: "text.disabled"
+    }
+  },
+  variants: {
+    variant: {
+      floating: {
+        boxShadow: "0px 1px 3px 0px var(--shadow-color)",
+        shadowColor: "surface.disabled",
+        border: "sm",
+        borderColor: "floating.outline",
+        backgroundColor: "floating.surface",
+        _hover: {
+          boxShadow: "0px 2px 6px 0px var(--shadow-color)",
+          backgroundColor: "floating.surface.hover",
+          borderColor: "floating.outline.hover",
+          _active: {
+            boxShadow: "none",
+            backgroundColor: "floating.surface.active",
+            borderColor: "floating.outline.active"
+          }
+        }
+      },
+      core: {
+        outlineColor: "core.outline",
+        outlineWidth: tokens23__namespace.default.size.stroke.sm,
+        outlineStyle: "solid",
+        backgroundColor: "core.surface",
+        _hover: {
+          outlineColor: "core.outline.hover",
+          outlineWidth: tokens23__namespace.default.size.stroke.md,
+          outlineStyle: "solid",
+          _active: {
+            backgroundColor: "core.surface.active",
+            outlineWidth: tokens23__namespace.default.size.stroke.sm
+          }
+        }
+      },
+      accent: {
+        boxShadow: "0px 1px 3px 0px var(--shadow-color)",
+        shadowColor: "surface.disabled",
+        background: "alert.success.surface",
+        _hover: {
+          background: "alert.success.surface.hover",
+          boxShadow: "0px 2px 6px 0px var(--shadow-color)",
+          _active: {
+            background: "alert.success.surface.active",
+            boxShadow: "none"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "core"
+  }
+});
 var separatorRecipe = react.defineRecipe({
   className: "spor-separator",
   base: {
@@ -5918,6 +5882,43 @@ var skeletonRecipe = react.defineRecipe({
     }
   }
 });
+var staticCardRecipe = react.defineRecipe({
+  base: {
+    borderRadius: "md"
+  },
+  variants: {
+    colorPalette: {
+      white: {
+        backgroundColor: "surface.color.neutral",
+        color: "text"
+      },
+      grey: {
+        backgroundColor: "surface.color.grey"
+      },
+      yellow: {
+        backgroundColor: "surface.color.cream"
+      },
+      darkYellow: {
+        backgroundColor: "surface.color.yellow"
+      },
+      red: {
+        backgroundColor: "surface.color.red"
+      },
+      green: {
+        backgroundColor: "surface.color.green"
+      },
+      blue: {
+        backgroundColor: "surface.color.blue"
+      },
+      orange: {
+        backgroundColor: "surface.color.orange"
+      }
+    }
+  },
+  defaultVariants: {
+    colorPalette: "white"
+  }
+});
 var _a2, _b;
 var textareaRecipe = react.defineRecipe({
   className: "spor-textarea",
@@ -5949,6 +5950,7 @@ var recipes = {
   attachedInputs: attachedInputsRecipe,
   badge: badgeRecipie,
   button: buttonRecipe,
+  buttonGroup: groupRecipe,
   closeButton: closeButtonRecipe,
   code: codeRecipie,
   input: inputRecipe,
@@ -6952,6 +6954,23 @@ var choiceChipSlotRecipe = react.defineSlotRecipe({
     chipType: "choice"
   }
 });
+var collapsibleSlotRecipe = react.defineSlotRecipe({
+  slots: collapsible.collapsibleAnatomy.keys(),
+  className: "chakra-collapsible",
+  base: {
+    content: {
+      overflow: "hidden",
+      _open: {
+        animationName: "expand-height, fade-in",
+        animationDuration: "moderate"
+      },
+      _closed: {
+        animationName: "collapse-height, fade-out",
+        animationDuration: "moderate"
+      }
+    }
+  }
+});
 var datePickerSlotRecipe = react.defineSlotRecipe({
   slots: datepickerAnatomy.keys(),
   className: "spor-datepicker",
@@ -9739,7 +9758,8 @@ var slotRecipes = {
   tabs: tabsSlotRecipe,
   travelTag: travelTagSlotRecipe,
   toast: toastSlotRecipe,
-  checkboxCard: choiceChipSlotRecipe
+  checkboxCard: choiceChipSlotRecipe,
+  collapsible: collapsibleSlotRecipe
 };
 var animations = react.defineTokens.animations({
   spin: {