@vygruppen/spor-react 6.0.0 → 6.2.0

package/dist/index.d.mts

@@ -265,7 +265,9 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
     size?: "xs" | "sm" | "md" | "lg";
     /** The different variants of a button
      *
-     * Defaults to "primary"
+     * Defaults to "primary".
+     *
+     * "control" is deprecated, and will be removed in a future version
      */
     variant?: "control" | "primary" | "secondary" | "tertiary" | "ghost" | "floating";
 };
@@ -274,7 +276,6 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
  *
  * There are several button variants. You can specify which one you want with the `variant` prop. The available variants are:
  *
- * - `control`: This button is used for ticket controls only.
  * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
  * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
  * - `tertiary`: Used for additional choices, like a less important secondary action.
@@ -335,6 +336,10 @@ type ButtonGroupProps = ButtonGroupProps$1;
 declare const ButtonGroup: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", ButtonGroupProps$1>;
 
 type IconButtonProps = Omit<IconButtonProps$1, "variant"> & {
+    /** The button variant.
+     *
+     * "control" is deprecated
+     */
     variant: "control" | "primary" | "secondary" | "tertiary" | "ghost" | "floating";
 };
 /**
@@ -1329,13 +1334,28 @@ type Variant =
 
 type Size = "sm" | "md" | "lg";
 
-type TagProps = {
-  variant: Variant;
+type TagProps = VariantProps$1 & {
   size: Size;
   title: string;
   description?: string;
 };
 
+type DefaultVariantProps$1 = {
+  variant: Variant;
+};
+type CustomVariantProps$1 = {
+  variant: "custom";
+  /** When variant="custom", the foreground color of the tag */
+  foregroundColor: string;
+  /** When variant="custom", the background color of the tag */
+  backgroundColor: string;
+  /** When variant="custom", this is the icon you want to display.
+   * It should be one of the other variants
+   */
+  customIconVariant: Variant;
+};
+type VariantProps$1 = DefaultVariantProps$1 | CustomVariantProps$1;
+
 type InfoTagProps = TagProps;
 /**
  * An info tag component.
@@ -1356,12 +1376,33 @@ type InfoTagProps = TagProps;
  * />
  * ```
  *
+ * If required, you can also override the colors and icons in these line tags:
+ *
+ * ```tsx
+ * <InfoTag
+ *  variant="custom"
+ *  customIconVariant="ferry"
+ *  foregroundColor="#b4da55"
+ *  backgroundColor="#c0ffee"
+ * />
+ * ```
+ *
  * @see https://spor.vy.no/components/line-tags
  */
-declare const InfoTag: ({ variant, size, title, description, }: InfoTagProps) => React__default.JSX.Element;
+declare const InfoTag: ({ variant, size, title, description, ...customProps }: InfoTagProps) => React__default.JSX.Element;
 
-type LineIconProps = BoxProps & {
-    variant: TagProps["variant"];
+type DefaultVariants = Exclude<TagProps["variant"], "custom">;
+type DefaultVariantProps = {
+    variant: DefaultVariants;
+};
+type CustomVariantProps = {
+    variant: "custom";
+    customIconVariant: DefaultVariants;
+    foregroundColor: string;
+    backgroundColor: string;
+};
+type VariantProps = DefaultVariantProps | CustomVariantProps;
+type LineIconProps = Exclude<BoxProps, "variant"> & VariantProps & {
     size: TagProps["size"];
 };
 /**
@@ -1379,6 +1420,18 @@ type LineIconProps = BoxProps & {
  * <LineIcon variant="subway" size="lg" />
  * ```
  *
+ * If you require some one-off colors, but still want to use the line tag component,
+ * you can do so like this:
+ *
+ * ```tsx
+ * <LineIcon
+ *  variant="custom"
+ *  customIconVariant="ferry"
+ *  foregroundColor="#b4da55"
+ *  backgroundColor="#c0ffee"
+ * />
+ * ```
+ *
  * @see https://spor.vy.no/components/line-tags
  */
 declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => React__default.JSX.Element | null;
@@ -1422,6 +1475,19 @@ type TravelTagProps = TagProps & BoxProps & {
  * />
  * ```
  *
+ * If required, you can also override the colors and icons in these travel tags:
+ *
+ * ```tsx
+ * <TravelTag
+ *   variant="custom"
+ *   customIconVariant="ferry"
+ *   foregroundColor="#b4da55"
+ *   backgroundColor="#c0ffee"
+ *   title="3"
+ *   description="Ringen"
+ * />
+ * ```
+ *
  * @see https://spor.vy.no/components/line-tags
  */
 declare const TravelTag: _chakra_ui_system_dist_system_types.ComponentWithAs<As, TravelTagProps>;
@@ -2270,7 +2336,6 @@ declare const theme: {
             baseStyle?: {
                 border: number;
                 borderRadius: string;
-                fontWeight: string;
                 transitionProperty: string;
                 transitionDuration: string;
                 textWrap: string;
@@ -2297,56 +2362,69 @@ declare const theme: {
                     minHeight: number;
                     minWidth: number;
                     fontSize: string;
+                    fontWeight: string;
                 };
                 md: {
                     minHeight: number;
                     minWidth: number;
                     fontSize: string;
+                    fontWeight: string;
                 };
                 sm: {
                     minHeight: number;
                     minWidth: number;
                     fontSize: string;
+                    fontWeight: string;
                 };
                 xs: {
                     minHeight: number;
                     minWidth: number;
                     fontSize: string;
                     paddingX: number;
+                    fontWeight: string;
                 };
             } | undefined;
             variants?: {
                 primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    backgroundColor: string;
+                    color: string;
+                    _focusVisible: {
+                        boxShadow: string;
+                    };
                     _hover: {
                         backgroundColor: string;
                     };
                     _active: {
                         backgroundColor: string;
                     };
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                    backgroundColor: string;
-                    color: string;
                 };
                 secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    _active: {
+                    backgroundColor: string;
+                    color: string;
+                    _hover: {
                         backgroundColor: string;
+                    };
+                    _focusVisible: {
                         boxShadow: string;
                         _hover: {
                             boxShadow: string;
                         };
                     };
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                    backgroundColor: string;
-                    color: string;
-                    _hover: {
+                    _active: {
                         backgroundColor: string;
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
+                        };
                     };
                 };
                 tertiary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    backgroundColor: string;
+                    color: string;
+                    boxShadow: string;
+                    _focusVisible: {
+                        boxShadow: string;
+                    };
                     _hover: {
                         boxShadow: string;
                     };
@@ -2354,15 +2432,13 @@ declare const theme: {
                         boxShadow: string;
                         backgroundColor: string;
                     };
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                    backgroundColor: string;
-                    color: string;
-                    fontWeight: string;
-                    boxShadow: string;
                 };
                 ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    backgroundColor: string;
+                    color: string;
+                    _focusVisible: {
+                        boxShadow: string;
+                    };
                     _hover: {
                         backgroundColor: string;
                         _disabled: {
@@ -2372,17 +2448,8 @@ declare const theme: {
                     _active: {
                         backgroundColor: string;
                     };
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                    backgroundColor: string;
-                    color: string;
-                    fontWeight: string;
                 };
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
                     backgroundColor: string;
                     boxShadow: string;
                     _active: {
@@ -2392,6 +2459,12 @@ declare const theme: {
                         backgroundColor: string;
                         boxShadow: string;
                     };
+                    _focusVisible: {
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
+                        };
+                    };
                 };
             } | undefined;
             defaultProps?: {
@@ -2541,6 +2614,7 @@ declare const theme: {
                     alignItems: string;
                 };
                 card: {
+                    backgroundColor: string;
                     borderRadius: string;
                     boxShadow: string;
                     padding: number;
@@ -3954,10 +4028,15 @@ declare const theme: {
                         };
                     };
                 };
+                custom: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    iconContainer: {
+                        backgroundColor: any;
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "alt-transport" | "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "walk" | undefined;
+                variant?: "custom" | "alt-transport" | "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "walk" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("icon" | "iconContainer")[];
@@ -5543,10 +5622,15 @@ declare const theme: {
                         display: string;
                     };
                 };
+                custom: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    container: {
+                        backgroundColor: any;
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "alt-transport" | "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "walk" | undefined;
+                variant?: "custom" | "alt-transport" | "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "walk" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("title" | "container" | "icon" | "description" | "iconContainer" | "textContainer" | "deviationIcon")[];

package/dist/index.d.ts

@@ -265,7 +265,9 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
     size?: "xs" | "sm" | "md" | "lg";
     /** The different variants of a button
      *
-     * Defaults to "primary"
+     * Defaults to "primary".
+     *
+     * "control" is deprecated, and will be removed in a future version
      */
     variant?: "control" | "primary" | "secondary" | "tertiary" | "ghost" | "floating";
 };
@@ -274,7 +276,6 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
  *
  * There are several button variants. You can specify which one you want with the `variant` prop. The available variants are:
  *
- * - `control`: This button is used for ticket controls only.
  * - `primary`: This is our main button. It's used for the main actions in a view, like a call to action. There should only be a single primary button in each view.
  * - `secondary`: Used for secondary actions in a view, and when you need to make several actions available at the same time.
  * - `tertiary`: Used for additional choices, like a less important secondary action.
@@ -335,6 +336,10 @@ type ButtonGroupProps = ButtonGroupProps$1;
 declare const ButtonGroup: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", ButtonGroupProps$1>;
 
 type IconButtonProps = Omit<IconButtonProps$1, "variant"> & {
+    /** The button variant.
+     *
+     * "control" is deprecated
+     */
     variant: "control" | "primary" | "secondary" | "tertiary" | "ghost" | "floating";
 };
 /**
@@ -1329,13 +1334,28 @@ type Variant =
 
 type Size = "sm" | "md" | "lg";
 
-type TagProps = {
-  variant: Variant;
+type TagProps = VariantProps$1 & {
   size: Size;
   title: string;
   description?: string;
 };
 
+type DefaultVariantProps$1 = {
+  variant: Variant;
+};
+type CustomVariantProps$1 = {
+  variant: "custom";
+  /** When variant="custom", the foreground color of the tag */
+  foregroundColor: string;
+  /** When variant="custom", the background color of the tag */
+  backgroundColor: string;
+  /** When variant="custom", this is the icon you want to display.
+   * It should be one of the other variants
+   */
+  customIconVariant: Variant;
+};
+type VariantProps$1 = DefaultVariantProps$1 | CustomVariantProps$1;
+
 type InfoTagProps = TagProps;
 /**
  * An info tag component.
@@ -1356,12 +1376,33 @@ type InfoTagProps = TagProps;
  * />
  * ```
  *
+ * If required, you can also override the colors and icons in these line tags:
+ *
+ * ```tsx
+ * <InfoTag
+ *  variant="custom"
+ *  customIconVariant="ferry"
+ *  foregroundColor="#b4da55"
+ *  backgroundColor="#c0ffee"
+ * />
+ * ```
+ *
  * @see https://spor.vy.no/components/line-tags
  */
-declare const InfoTag: ({ variant, size, title, description, }: InfoTagProps) => React__default.JSX.Element;
+declare const InfoTag: ({ variant, size, title, description, ...customProps }: InfoTagProps) => React__default.JSX.Element;
 
-type LineIconProps = BoxProps & {
-    variant: TagProps["variant"];
+type DefaultVariants = Exclude<TagProps["variant"], "custom">;
+type DefaultVariantProps = {
+    variant: DefaultVariants;
+};
+type CustomVariantProps = {
+    variant: "custom";
+    customIconVariant: DefaultVariants;
+    foregroundColor: string;
+    backgroundColor: string;
+};
+type VariantProps = DefaultVariantProps | CustomVariantProps;
+type LineIconProps = Exclude<BoxProps, "variant"> & VariantProps & {
     size: TagProps["size"];
 };
 /**
@@ -1379,6 +1420,18 @@ type LineIconProps = BoxProps & {
  * <LineIcon variant="subway" size="lg" />
  * ```
  *
+ * If you require some one-off colors, but still want to use the line tag component,
+ * you can do so like this:
+ *
+ * ```tsx
+ * <LineIcon
+ *  variant="custom"
+ *  customIconVariant="ferry"
+ *  foregroundColor="#b4da55"
+ *  backgroundColor="#c0ffee"
+ * />
+ * ```
+ *
  * @see https://spor.vy.no/components/line-tags
  */
 declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => React__default.JSX.Element | null;
@@ -1422,6 +1475,19 @@ type TravelTagProps = TagProps & BoxProps & {
  * />
  * ```
  *
+ * If required, you can also override the colors and icons in these travel tags:
+ *
+ * ```tsx
+ * <TravelTag
+ *   variant="custom"
+ *   customIconVariant="ferry"
+ *   foregroundColor="#b4da55"
+ *   backgroundColor="#c0ffee"
+ *   title="3"
+ *   description="Ringen"
+ * />
+ * ```
+ *
  * @see https://spor.vy.no/components/line-tags
  */
 declare const TravelTag: _chakra_ui_system_dist_system_types.ComponentWithAs<As, TravelTagProps>;
@@ -2270,7 +2336,6 @@ declare const theme: {
             baseStyle?: {
                 border: number;
                 borderRadius: string;
-                fontWeight: string;
                 transitionProperty: string;
                 transitionDuration: string;
                 textWrap: string;
@@ -2297,56 +2362,69 @@ declare const theme: {
                     minHeight: number;
                     minWidth: number;
                     fontSize: string;
+                    fontWeight: string;
                 };
                 md: {
                     minHeight: number;
                     minWidth: number;
                     fontSize: string;
+                    fontWeight: string;
                 };
                 sm: {
                     minHeight: number;
                     minWidth: number;
                     fontSize: string;
+                    fontWeight: string;
                 };
                 xs: {
                     minHeight: number;
                     minWidth: number;
                     fontSize: string;
                     paddingX: number;
+                    fontWeight: string;
                 };
             } | undefined;
             variants?: {
                 primary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    backgroundColor: string;
+                    color: string;
+                    _focusVisible: {
+                        boxShadow: string;
+                    };
                     _hover: {
                         backgroundColor: string;
                     };
                     _active: {
                         backgroundColor: string;
                     };
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                    backgroundColor: string;
-                    color: string;
                 };
                 secondary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    _active: {
+                    backgroundColor: string;
+                    color: string;
+                    _hover: {
                         backgroundColor: string;
+                    };
+                    _focusVisible: {
                         boxShadow: string;
                         _hover: {
                             boxShadow: string;
                         };
                     };
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                    backgroundColor: string;
-                    color: string;
-                    _hover: {
+                    _active: {
                         backgroundColor: string;
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
+                        };
                     };
                 };
                 tertiary: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    backgroundColor: string;
+                    color: string;
+                    boxShadow: string;
+                    _focusVisible: {
+                        boxShadow: string;
+                    };
                     _hover: {
                         boxShadow: string;
                     };
@@ -2354,15 +2432,13 @@ declare const theme: {
                         boxShadow: string;
                         backgroundColor: string;
                     };
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                    backgroundColor: string;
-                    color: string;
-                    fontWeight: string;
-                    boxShadow: string;
                 };
                 ghost: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    backgroundColor: string;
+                    color: string;
+                    _focusVisible: {
+                        boxShadow: string;
+                    };
                     _hover: {
                         backgroundColor: string;
                         _disabled: {
@@ -2372,17 +2448,8 @@ declare const theme: {
                     _active: {
                         backgroundColor: string;
                     };
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
-                    backgroundColor: string;
-                    color: string;
-                    fontWeight: string;
                 };
                 floating: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
-                    _focus: _chakra_ui_styled_system.SystemStyleObject;
-                    _focusVisible: _chakra_ui_styled_system.SystemStyleObject;
-                    "&[data-focus]:not([data-focus-visible])": _chakra_ui_styled_system.SystemStyleObject;
                     backgroundColor: string;
                     boxShadow: string;
                     _active: {
@@ -2392,6 +2459,12 @@ declare const theme: {
                         backgroundColor: string;
                         boxShadow: string;
                     };
+                    _focusVisible: {
+                        boxShadow: string;
+                        _hover: {
+                            boxShadow: string;
+                        };
+                    };
                 };
             } | undefined;
             defaultProps?: {
@@ -2541,6 +2614,7 @@ declare const theme: {
                     alignItems: string;
                 };
                 card: {
+                    backgroundColor: string;
                     borderRadius: string;
                     boxShadow: string;
                     padding: number;
@@ -3954,10 +4028,15 @@ declare const theme: {
                         };
                     };
                 };
+                custom: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    iconContainer: {
+                        backgroundColor: any;
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "alt-transport" | "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "walk" | undefined;
+                variant?: "custom" | "alt-transport" | "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "walk" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("icon" | "iconContainer")[];
@@ -5543,10 +5622,15 @@ declare const theme: {
                         display: string;
                     };
                 };
+                custom: (props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                    container: {
+                        backgroundColor: any;
+                    };
+                };
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | undefined;
-                variant?: "alt-transport" | "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "walk" | undefined;
+                variant?: "custom" | "alt-transport" | "local-train" | "region-train" | "region-express-train" | "long-distance-train" | "airport-express-train" | "vy-bus" | "local-bus" | "ferry" | "subway" | "tram" | "walk" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
             parts: ("title" | "container" | "icon" | "description" | "iconContainer" | "textContainer" | "deviationIcon")[];