@vygruppen/spor-react 12.4.5 → 12.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.4.5",
+  "version": "12.4.7",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -66,7 +66,7 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/eslint-config": "1.1.0",
+    "@vygruppen/eslint-config": "1.1.1",
     "@vygruppen/tsconfig": "0.1.0"
   },
   "peerDependencies": {

package/src/datepicker/TimePicker.tsx

@@ -45,6 +45,11 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> &
     minuteInterval?: number;
     /** Whether or not the field is disabled */
     disabled?: boolean;
+    /**
+     * The variant of the time picker.
+     * Defaults to "core".
+     */
+    variant?: "core" | "floating" | "ghost";
   };
 /** A time picker component.
  *

package/src/linjetag/InfoTag.tsx

@@ -52,7 +52,6 @@ export const InfoTag = ({
   const recipe = useSlotRecipe({ key: "infoTag" });
 
   const styles = recipe({
-    variant,
     size,
     ...customProps,
   });

package/src/linjetag/LineIcon.tsx

@@ -24,7 +24,7 @@ type VariantProps = DefaultVariantProps | CustomVariantProps;
 export type LineIconProps = Exclude<BoxProps, "variant"> &
   VariantProps &
   PropsWithChildren<LineIconVariantProps> & {
-    size: TagProps["size"];
+    size?: TagProps["size"];
     foregroundColor?: string;
     backgroundColor?: string;
     disabled?: boolean;

package/src/linjetag/types.ts

@@ -17,7 +17,7 @@ export type Size = "sm" | "md" | "lg";
 export type TagType = "info" | "travel";
 
 export type TagProps = VariantProps & {
-  size: Size;
+  size?: Size;
   title: string;
   description?: string;
 };

package/src/loader/ProgressBar.tsx

@@ -16,7 +16,7 @@ type ProgressBarVariants = RecipeVariantProps<typeof progressBarRecipe>;
 export type ProgressBarProps = BoxProps &
   UseProgressProps &
   PropsWithChildren<ProgressBarVariants> & {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /** The height of the progress bar.
      * Defaults to .5rem
      **/
@@ -28,12 +28,12 @@ export type ProgressBarProps = BoxProps &
     width?: BoxProps["width"];
 
     /** Pass if no label is passed to the label */
-    "aria-label": string;
+    "aria-label"?: string;
     /** Optional text shown below the loader.
      *
      * If you pass an array of strings, the text will rotate every 5 seconds. If you want to change the delay, pass the delay in milliseconds to the `labelRotationDelay` prop.
      */
-    label: string | string[];
+    label?: string | string[];
     /** The number of milliseconds a label is shown, if an array of strings is passed to the `label` prop.
      *
      * Defaults to 5000 (5 seconds).

package/src/theme/slot-recipes/accordion.ts

@@ -94,24 +94,24 @@ export const accordionSlotRecipe = defineSlotRecipe({
           },
           "&:hover": {
             outlineWidth: tokens.size.stroke.md,
-            outlineColor: "core.outline.hover",
-            outline: "solid",
+            outlineColor: "core.outline",
+            outline: "2px solid",
 
             outlineOffset: 0,
           },
           "&:active": {
             backgroundColor: "core.surface.active",
             outlineWidth: tokens.size.stroke.sm,
-            outlineColor: "core.outline.active",
-            outline: "solid",
+            outline: "none",
           },
         },
       },
       floating: {
         item: {
-          outline: "solid",
+          outline: "1px solid",
           outlineWidth: tokens.size.stroke.sm,
-          outlineColor: "core.outline",
+          boxShadow: "sm",
+          outlineColor: "floating.outline",
         },
         itemTrigger: {
           _expanded: {
@@ -119,16 +119,15 @@ export const accordionSlotRecipe = defineSlotRecipe({
           },
           "&:hover": {
             outlineWidth: tokens.size.stroke.md,
+            outline: "1px solid",
             outlineColor: "floating.outline.hover",
-            outline: "solid",
 
-            outlineOffset: 0,
+            outlineOffset: 1,
           },
           "&:active": {
             backgroundColor: "floating.surface.active",
             outlineWidth: tokens.size.stroke.sm,
-            outlineColor: "floating.outline.active",
-            outline: "solid",
+            outline: "none",
           },
         },
       },

package/src/theme/slot-recipes/info-tag.ts

@@ -26,13 +26,17 @@ export const infoTagSlotRecipe = defineSlotRecipe({
   },
   variants: {
     variant: {
-      walk: {
-        iconContainer: {
-          icon: {
-            color: "text",
-          },
-        },
-      },
+      walk: {},
+      ferry: {},
+      subway: {},
+      tram: {},
+      "local-train": {},
+      "region-train": {},
+      "region-express-train": {},
+      "long-distance-train": {},
+      "airport-express-train": {},
+      "vy-bus": {},
+      "local-bus": {},
     },
     size: {
       ...travelTagSlotRecipe.variants?.size,

package/src/util/externals.tsx

@@ -1,6 +1,7 @@
 /** This file works as a proxy for all Chakra UI exports */
 export type { PortalProps, UseDisclosureProps } from "@chakra-ui/react";
 export {
+  ClientOnly,
   createListCollection,
   defineRecipe,
   defineStyle,