@vygruppen/spor-react 13.4.0 → 13.4.2

package/dist/index.d.cts

@@ -1390,6 +1390,7 @@ interface DialogContentProps extends Dialog.ContentProps {
     portalRef?: React$1.RefObject<HTMLElement>;
     backdrop?: boolean;
     children?: React$1.ReactNode;
+    positionerProps?: Dialog.PositionerProps;
 }
 declare const DialogContent: ({ ref, ...props }: DialogContentProps & {
     ref?: React$1.Ref<HTMLDivElement>;
@@ -1728,8 +1729,10 @@ type AttachedInputsProps = RecipeVariantProps<typeof attachedInputsRecipe> & Gro
 } | {
     onFlip: () => void;
     flipAriaLabel: string;
-});
-declare const AttachedInputs: ({ ref, ...props }: AttachedInputsProps & {
+}) & {
+    flipButtonProps?: Omit<IconButtonProps$1, "icon" | "aria-label" | "onClick" | "variant" | "size" | "orientation" | "spinner">;
+};
+declare const AttachedInputs: ({ ref, flipButtonProps, ...props }: AttachedInputsProps & {
     ref?: React.Ref<HTMLDivElement>;
 }) => react_jsx_runtime.JSX.Element;
 
@@ -2857,6 +2860,8 @@ type TagProps = VariantProps$1 & {
     size?: Size;
     title: string;
     description?: string;
+    descriptionProps?: BoxProps;
+    titleProps?: BoxProps;
 };
 type DefaultVariantProps$1 = {
     variant: Variant$1;
@@ -2908,7 +2913,7 @@ type InfoTagProps = TagProps & PropsWithChildren<InfoTagVariantProps>;
  *
  * @see https://spor.vy.no/components/line-tags
  */
-declare const InfoTag: ({ variant, size, title, description, ...customProps }: InfoTagProps) => react_jsx_runtime.JSX.Element;
+declare const InfoTag: ({ variant, size, title, description, descriptionProps, titleProps, ...customProps }: InfoTagProps) => react_jsx_runtime.JSX.Element;
 
 declare const lineIconSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "root" | "title" | "iconContainer" | "desc", {
     variant: {
@@ -3073,62 +3078,21 @@ declare const travelTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon"
         none: {};
     };
     variant: {
-        "local-train": {
-            container: {
-                backgroundColor: "linjetag.lokaltogLight";
-            };
-        };
-        "region-train": {
-            container: {
-                backgroundColor: "linjetag.regiontogLight";
-            };
-        };
-        "region-express-train": {
-            container: {
-                backgroundColor: "linjetag.regionEkspressLight";
-            };
-        };
-        "long-distance-train": {
-            container: {
-                backgroundColor: "linjetag.fjerntogLight";
-            };
-        };
-        "airport-express-train": {
-            container: {
-                backgroundColor: "linjetag.flytogLight";
-            };
-        };
-        "vy-bus": {
-            container: {
-                backgroundColor: "linjetag.vyBussLight";
-            };
-        };
-        "local-bus": {
-            container: {
-                backgroundColor: "linjetag.lokalbussLight";
-            };
-        };
-        ferry: {
-            container: {
-                backgroundColor: "linjetag.fergeLight";
-            };
-        };
-        subway: {
-            container: {
-                backgroundColor: "linjetag.tbaneLight";
-            };
-        };
-        tram: {
-            container: {
-                backgroundColor: "linjetag.trikkLight";
-            };
-        };
-        "alt-transport": {
+        "local-train": {};
+        "region-train": {};
+        "region-express-train": {};
+        "long-distance-train": {};
+        "airport-express-train": {};
+        "vy-bus": {};
+        "local-bus": {};
+        ferry: {};
+        subway: {};
+        tram: {};
+        "alt-transport": {};
+        walk: {
             container: {
-                backgroundColor: "linjetag.altTransportLight";
+                backgroundColor: "none";
             };
-        };
-        walk: {
             textContainer: {
                 position: "absolute";
                 left: "0.875rem";
@@ -3199,7 +3163,7 @@ type TravelTagProps = TagProps & BoxProps & PropsWithChildren<TravelTagVariantPr
      */
     customIconVariant?: string;
 };
-declare const TravelTag: ({ ref, variant, size, deviationLevel, title, description, disabled, foregroundColor, backgroundColor, customIconVariant, ...rest }: TravelTagProps & {
+declare const TravelTag: ({ ref, variant, size, deviationLevel, title, description, disabled, foregroundColor, backgroundColor, customIconVariant, descriptionProps, titleProps, ...rest }: TravelTagProps & {
     ref?: React.Ref<HTMLDivElement>;
 }) => react_jsx_runtime.JSX.Element;
 
@@ -4312,7 +4276,124 @@ declare const TooltipContent: ({ ref, children, showArrow, ...props }: TooltipPr
     ref?: React.Ref<HTMLDivElement>;
 }) => react_jsx_runtime.JSX.Element;
 
+declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
+    colorPalette: {
+        neutral: {
+            backgroundColor: "surface";
+            color: "text";
+            "& svg": {
+                color: "icon";
+            };
+        };
+        grey: {
+            backgroundColor: "surface.neutral";
+            color: "text.neutral";
+            "& svg": {
+                color: "icon.neutral";
+            };
+        };
+        green: {
+            backgroundColor: "surface.success";
+            color: "text.success";
+            "& svg": {
+                color: "icon.success";
+            };
+        };
+        blue: {
+            backgroundColor: "surface.info";
+            color: "text.info";
+            "& svg": {
+                color: "icon.info";
+            };
+        };
+        cream: {
+            backgroundColor: "surface.warning";
+            color: "text.warning";
+            "& svg": {
+                color: "icon.warning";
+            };
+        };
+        yellow: {
+            backgroundColor: "surface.notice";
+            color: "text.notice";
+            "& svg": {
+                color: "icon.notice";
+            };
+        };
+        orange: {
+            backgroundColor: "surface.caution";
+            color: "text.caution";
+            "& svg": {
+                color: "icon.caution";
+            };
+        };
+        red: {
+            backgroundColor: "surface.critical";
+            color: "text.critical";
+            "& svg": {
+                color: "icon.critical";
+            };
+        };
+        brightRed: {
+            backgroundColor: {
+                _light: "brightRed";
+                _dark: "brightRed";
+            };
+            color: {
+                _light: "pink";
+                _dark: "pink";
+            };
+            "& svg": {
+                color: {
+                    _light: "pink";
+                    _dark: "pink";
+                };
+            };
+        };
+        disabled: {
+            backgroundColor: "surface.disabled";
+            color: "text.disabled";
+            "& svg": {
+                color: "icon.disabled";
+            };
+        };
+    };
+    size: {
+        sm: {
+            fontSize: "desktop.2xs";
+            paddingX: "0.5";
+            paddingY: "0";
+            fontWeight: "normal";
+            borderRadius: "xxs";
+        };
+        md: {
+            fontSize: "desktop.2xs";
+            paddingX: "1";
+            paddingY: "0.5";
+            fontWeight: "bold";
+            borderRadius: "xs";
+        };
+        lg: {
+            fontSize: "desktop.xs";
+            paddingX: "1.5";
+            paddingY: "0.5";
+            fontWeight: "bold";
+            borderRadius: "xs";
+        };
+    };
+    attached: {
+        true: {
+            borderBottomRadius: "none";
+        };
+    };
+    inverted: {
+        true: {};
+    };
+}>;
+
+type BadgeVariantProps = RecipeVariantProps<typeof badgeRecipie>;
 type BadgeProps = BadgeProps$1 & {
+    colorPalette?: BadgeVariantProps["colorPalette"];
     icon?: IconComponent;
 };
 declare const Badge: ({ ref, icon, children, ...props }: BadgeProps & {

package/dist/index.d.ts

@@ -1390,6 +1390,7 @@ interface DialogContentProps extends Dialog.ContentProps {
     portalRef?: React$1.RefObject<HTMLElement>;
     backdrop?: boolean;
     children?: React$1.ReactNode;
+    positionerProps?: Dialog.PositionerProps;
 }
 declare const DialogContent: ({ ref, ...props }: DialogContentProps & {
     ref?: React$1.Ref<HTMLDivElement>;
@@ -1728,8 +1729,10 @@ type AttachedInputsProps = RecipeVariantProps<typeof attachedInputsRecipe> & Gro
 } | {
     onFlip: () => void;
     flipAriaLabel: string;
-});
-declare const AttachedInputs: ({ ref, ...props }: AttachedInputsProps & {
+}) & {
+    flipButtonProps?: Omit<IconButtonProps$1, "icon" | "aria-label" | "onClick" | "variant" | "size" | "orientation" | "spinner">;
+};
+declare const AttachedInputs: ({ ref, flipButtonProps, ...props }: AttachedInputsProps & {
     ref?: React.Ref<HTMLDivElement>;
 }) => react_jsx_runtime.JSX.Element;
 
@@ -2857,6 +2860,8 @@ type TagProps = VariantProps$1 & {
     size?: Size;
     title: string;
     description?: string;
+    descriptionProps?: BoxProps;
+    titleProps?: BoxProps;
 };
 type DefaultVariantProps$1 = {
     variant: Variant$1;
@@ -2908,7 +2913,7 @@ type InfoTagProps = TagProps & PropsWithChildren<InfoTagVariantProps>;
  *
  * @see https://spor.vy.no/components/line-tags
  */
-declare const InfoTag: ({ variant, size, title, description, ...customProps }: InfoTagProps) => react_jsx_runtime.JSX.Element;
+declare const InfoTag: ({ variant, size, title, description, descriptionProps, titleProps, ...customProps }: InfoTagProps) => react_jsx_runtime.JSX.Element;
 
 declare const lineIconSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon" | "root" | "title" | "iconContainer" | "desc", {
     variant: {
@@ -3073,62 +3078,21 @@ declare const travelTagSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"icon"
         none: {};
     };
     variant: {
-        "local-train": {
-            container: {
-                backgroundColor: "linjetag.lokaltogLight";
-            };
-        };
-        "region-train": {
-            container: {
-                backgroundColor: "linjetag.regiontogLight";
-            };
-        };
-        "region-express-train": {
-            container: {
-                backgroundColor: "linjetag.regionEkspressLight";
-            };
-        };
-        "long-distance-train": {
-            container: {
-                backgroundColor: "linjetag.fjerntogLight";
-            };
-        };
-        "airport-express-train": {
-            container: {
-                backgroundColor: "linjetag.flytogLight";
-            };
-        };
-        "vy-bus": {
-            container: {
-                backgroundColor: "linjetag.vyBussLight";
-            };
-        };
-        "local-bus": {
-            container: {
-                backgroundColor: "linjetag.lokalbussLight";
-            };
-        };
-        ferry: {
-            container: {
-                backgroundColor: "linjetag.fergeLight";
-            };
-        };
-        subway: {
-            container: {
-                backgroundColor: "linjetag.tbaneLight";
-            };
-        };
-        tram: {
-            container: {
-                backgroundColor: "linjetag.trikkLight";
-            };
-        };
-        "alt-transport": {
+        "local-train": {};
+        "region-train": {};
+        "region-express-train": {};
+        "long-distance-train": {};
+        "airport-express-train": {};
+        "vy-bus": {};
+        "local-bus": {};
+        ferry: {};
+        subway: {};
+        tram: {};
+        "alt-transport": {};
+        walk: {
             container: {
-                backgroundColor: "linjetag.altTransportLight";
+                backgroundColor: "none";
             };
-        };
-        walk: {
             textContainer: {
                 position: "absolute";
                 left: "0.875rem";
@@ -3199,7 +3163,7 @@ type TravelTagProps = TagProps & BoxProps & PropsWithChildren<TravelTagVariantPr
      */
     customIconVariant?: string;
 };
-declare const TravelTag: ({ ref, variant, size, deviationLevel, title, description, disabled, foregroundColor, backgroundColor, customIconVariant, ...rest }: TravelTagProps & {
+declare const TravelTag: ({ ref, variant, size, deviationLevel, title, description, disabled, foregroundColor, backgroundColor, customIconVariant, descriptionProps, titleProps, ...rest }: TravelTagProps & {
     ref?: React.Ref<HTMLDivElement>;
 }) => react_jsx_runtime.JSX.Element;
 
@@ -4312,7 +4276,124 @@ declare const TooltipContent: ({ ref, children, showArrow, ...props }: TooltipPr
     ref?: React.Ref<HTMLDivElement>;
 }) => react_jsx_runtime.JSX.Element;
 
+declare const badgeRecipie: _chakra_ui_react.RecipeDefinition<{
+    colorPalette: {
+        neutral: {
+            backgroundColor: "surface";
+            color: "text";
+            "& svg": {
+                color: "icon";
+            };
+        };
+        grey: {
+            backgroundColor: "surface.neutral";
+            color: "text.neutral";
+            "& svg": {
+                color: "icon.neutral";
+            };
+        };
+        green: {
+            backgroundColor: "surface.success";
+            color: "text.success";
+            "& svg": {
+                color: "icon.success";
+            };
+        };
+        blue: {
+            backgroundColor: "surface.info";
+            color: "text.info";
+            "& svg": {
+                color: "icon.info";
+            };
+        };
+        cream: {
+            backgroundColor: "surface.warning";
+            color: "text.warning";
+            "& svg": {
+                color: "icon.warning";
+            };
+        };
+        yellow: {
+            backgroundColor: "surface.notice";
+            color: "text.notice";
+            "& svg": {
+                color: "icon.notice";
+            };
+        };
+        orange: {
+            backgroundColor: "surface.caution";
+            color: "text.caution";
+            "& svg": {
+                color: "icon.caution";
+            };
+        };
+        red: {
+            backgroundColor: "surface.critical";
+            color: "text.critical";
+            "& svg": {
+                color: "icon.critical";
+            };
+        };
+        brightRed: {
+            backgroundColor: {
+                _light: "brightRed";
+                _dark: "brightRed";
+            };
+            color: {
+                _light: "pink";
+                _dark: "pink";
+            };
+            "& svg": {
+                color: {
+                    _light: "pink";
+                    _dark: "pink";
+                };
+            };
+        };
+        disabled: {
+            backgroundColor: "surface.disabled";
+            color: "text.disabled";
+            "& svg": {
+                color: "icon.disabled";
+            };
+        };
+    };
+    size: {
+        sm: {
+            fontSize: "desktop.2xs";
+            paddingX: "0.5";
+            paddingY: "0";
+            fontWeight: "normal";
+            borderRadius: "xxs";
+        };
+        md: {
+            fontSize: "desktop.2xs";
+            paddingX: "1";
+            paddingY: "0.5";
+            fontWeight: "bold";
+            borderRadius: "xs";
+        };
+        lg: {
+            fontSize: "desktop.xs";
+            paddingX: "1.5";
+            paddingY: "0.5";
+            fontWeight: "bold";
+            borderRadius: "xs";
+        };
+    };
+    attached: {
+        true: {
+            borderBottomRadius: "none";
+        };
+    };
+    inverted: {
+        true: {};
+    };
+}>;
+
+type BadgeVariantProps = RecipeVariantProps<typeof badgeRecipie>;
 type BadgeProps = BadgeProps$1 & {
+    colorPalette?: BadgeVariantProps["colorPalette"];
     icon?: IconComponent;
 };
 declare const Badge: ({ ref, icon, children, ...props }: BadgeProps & {