@vygruppen/spor-react 13.3.2 → 13.4.1

package/dist/index.d.cts

@@ -1117,7 +1117,38 @@ declare const ColorModeButton: ({ ref, ...props }: ColorModeButtonProps & {
     ref?: React$1.Ref<HTMLButtonElement>;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText", _chakra_ui_react.SlotRecipeVariantRecord<"root" | "label" | "requiredIndicator" | "helperText" | "errorText">>;
+declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText", {
+    size: {
+        sm: {
+            label: {
+                fontSize: ("mobile.xs" | "desktop.xs")[];
+                paddingX: number;
+                "&[data-float]": {
+                    fontSize: ("mobile.2xs" | "desktop.2xs")[];
+                    top: number;
+                };
+                top: "0.5rem";
+            };
+            helperText: {
+                color: "text.subtle";
+                lineHeight: "normal";
+                fontSize: ("mobile.xs" | "desktop.xs")[];
+            };
+        };
+        md: {
+            label: {
+                paddingX: number;
+                fontSize: ("mobile.sm" | "desktop.sm")[];
+                "&[data-float]": {
+                    fontSize: ("mobile.2xs" | "desktop.2xs")[];
+                    color: "text.subtle";
+                    top: "0.3rem";
+                };
+                top: "0.9rem";
+            };
+        };
+    };
+}>;
 
 type FieldVariantProps = RecipeVariantProps<typeof fieldSlotRecipe>;
 type FieldBaseProps = {
@@ -1133,6 +1164,7 @@ type FieldBaseProps = {
     shouldFloat?: boolean;
     labelAsChild?: boolean;
     gap?: string | number;
+    size?: "sm" | "md";
 };
 type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
 /**
@@ -2089,13 +2121,14 @@ declare const FilterChip: ({ ref, children, icon, onCheckedChange, ...rootProps
 
 type ChakraInputProps = ComponentProps<typeof Input$1>;
 
-type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "colorPalette" | "placeholder"> & {
+type InputProps = FieldProps & Exclude<ChakraInputProps, "label" | "colorPalette" | "placeholder"> & {
     /** The input's label */
     label?: ReactNode;
     /** Element that shows up to the left */
     startElement?: React__default.ReactNode;
     /** Element that shows up to the right */
     endElement?: React__default.ReactNode;
+    /** Override the font size of the start and end elements */
     fontSize?: string;
 };
 /**
@@ -2127,7 +2160,7 @@ type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "col
  *
  * @see https://spor.vy.no/components/input
  */
-declare const Input: ({ ref, startElement, endElement, label, invalid, helperText, errorText, required, hidden, fontSize, labelAsChild, ...props }: InputProps & {
+declare const Input: ({ ref, startElement, endElement, label, invalid, helperText, errorText, required, hidden, fontSize, labelAsChild, size, ...props }: InputProps & {
     ref?: React__default.Ref<HTMLInputElement | null>;
 }) => react_jsx_runtime.JSX.Element;
 
@@ -2333,6 +2366,24 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
             };
         };
     };
+    size: {
+        sm: {
+            field: {
+                paddingTop?: number | undefined;
+                height?: number | undefined;
+                fontSize?: "xs" | undefined;
+                paddingX?: number | undefined;
+            };
+        };
+        md: {
+            field: {
+                paddingX?: number | undefined;
+                paddingTop?: number | undefined;
+                height?: number | undefined;
+                fontSize?: "mobile.md" | undefined;
+            };
+        };
+    };
 }>;
 
 type NativeSelectVariantProps = RecipeVariantProps<typeof nativeSelectSlotRecipe>;
@@ -2602,8 +2653,9 @@ declare const SelectItemGroup: ({ ref, ...props }: SelectItemGroupProps & {
 type SelectTriggerProps = Select$1.ControlProps & {
     clearable?: boolean;
     children?: React$1.ReactNode;
+    size: "sm" | "md";
 };
-declare const SelectTrigger: ({ ref, ...props }: SelectTriggerProps & {
+declare const SelectTrigger: ({ ref, size, ...props }: SelectTriggerProps & {
     ref?: React$1.Ref<HTMLButtonElement>;
 }) => react_jsx_runtime.JSX.Element;
 type SelectContentProps = Select$1.ContentProps & {
@@ -2805,6 +2857,8 @@ type TagProps = VariantProps$1 & {
     size?: Size;
     title: string;
     description?: string;
+    descriptionProps?: BoxProps;
+    titleProps?: BoxProps;
 };
 type DefaultVariantProps$1 = {
     variant: Variant$1;
@@ -2856,7 +2910,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: {
@@ -3021,62 +3075,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";
@@ -3147,7 +3160,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;
 

package/dist/index.d.ts

@@ -1117,7 +1117,38 @@ declare const ColorModeButton: ({ ref, ...props }: ColorModeButtonProps & {
     ref?: React$1.Ref<HTMLButtonElement>;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText", _chakra_ui_react.SlotRecipeVariantRecord<"root" | "label" | "requiredIndicator" | "helperText" | "errorText">>;
+declare const fieldSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"root" | "label" | "requiredIndicator" | "helperText" | "errorText", {
+    size: {
+        sm: {
+            label: {
+                fontSize: ("mobile.xs" | "desktop.xs")[];
+                paddingX: number;
+                "&[data-float]": {
+                    fontSize: ("mobile.2xs" | "desktop.2xs")[];
+                    top: number;
+                };
+                top: "0.5rem";
+            };
+            helperText: {
+                color: "text.subtle";
+                lineHeight: "normal";
+                fontSize: ("mobile.xs" | "desktop.xs")[];
+            };
+        };
+        md: {
+            label: {
+                paddingX: number;
+                fontSize: ("mobile.sm" | "desktop.sm")[];
+                "&[data-float]": {
+                    fontSize: ("mobile.2xs" | "desktop.2xs")[];
+                    color: "text.subtle";
+                    top: "0.3rem";
+                };
+                top: "0.9rem";
+            };
+        };
+    };
+}>;
 
 type FieldVariantProps = RecipeVariantProps<typeof fieldSlotRecipe>;
 type FieldBaseProps = {
@@ -1133,6 +1164,7 @@ type FieldBaseProps = {
     shouldFloat?: boolean;
     labelAsChild?: boolean;
     gap?: string | number;
+    size?: "sm" | "md";
 };
 type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
 /**
@@ -2089,13 +2121,14 @@ declare const FilterChip: ({ ref, children, icon, onCheckedChange, ...rootProps
 
 type ChakraInputProps = ComponentProps<typeof Input$1>;
 
-type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "colorPalette" | "placeholder"> & {
+type InputProps = FieldProps & Exclude<ChakraInputProps, "label" | "colorPalette" | "placeholder"> & {
     /** The input's label */
     label?: ReactNode;
     /** Element that shows up to the left */
     startElement?: React__default.ReactNode;
     /** Element that shows up to the right */
     endElement?: React__default.ReactNode;
+    /** Override the font size of the start and end elements */
     fontSize?: string;
 };
 /**
@@ -2127,7 +2160,7 @@ type InputProps = FieldProps & Exclude<ChakraInputProps, "size" | "label" | "col
  *
  * @see https://spor.vy.no/components/input
  */
-declare const Input: ({ ref, startElement, endElement, label, invalid, helperText, errorText, required, hidden, fontSize, labelAsChild, ...props }: InputProps & {
+declare const Input: ({ ref, startElement, endElement, label, invalid, helperText, errorText, required, hidden, fontSize, labelAsChild, size, ...props }: InputProps & {
     ref?: React__default.Ref<HTMLInputElement | null>;
 }) => react_jsx_runtime.JSX.Element;
 
@@ -2333,6 +2366,24 @@ declare const nativeSelectSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"ico
             };
         };
     };
+    size: {
+        sm: {
+            field: {
+                paddingTop?: number | undefined;
+                height?: number | undefined;
+                fontSize?: "xs" | undefined;
+                paddingX?: number | undefined;
+            };
+        };
+        md: {
+            field: {
+                paddingX?: number | undefined;
+                paddingTop?: number | undefined;
+                height?: number | undefined;
+                fontSize?: "mobile.md" | undefined;
+            };
+        };
+    };
 }>;
 
 type NativeSelectVariantProps = RecipeVariantProps<typeof nativeSelectSlotRecipe>;
@@ -2602,8 +2653,9 @@ declare const SelectItemGroup: ({ ref, ...props }: SelectItemGroupProps & {
 type SelectTriggerProps = Select$1.ControlProps & {
     clearable?: boolean;
     children?: React$1.ReactNode;
+    size: "sm" | "md";
 };
-declare const SelectTrigger: ({ ref, ...props }: SelectTriggerProps & {
+declare const SelectTrigger: ({ ref, size, ...props }: SelectTriggerProps & {
     ref?: React$1.Ref<HTMLButtonElement>;
 }) => react_jsx_runtime.JSX.Element;
 type SelectContentProps = Select$1.ContentProps & {
@@ -2805,6 +2857,8 @@ type TagProps = VariantProps$1 & {
     size?: Size;
     title: string;
     description?: string;
+    descriptionProps?: BoxProps;
+    titleProps?: BoxProps;
 };
 type DefaultVariantProps$1 = {
     variant: Variant$1;
@@ -2856,7 +2910,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: {
@@ -3021,62 +3075,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";
@@ -3147,7 +3160,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;