@vygruppen/spor-react 10.9.1 → 10.9.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@10.9.1 build
+> @vygruppen/spor-react@10.9.2 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,11 +10,11 @@
 ESM Build start
 DTS Build start
 ESM dist/index.mjs                      2.16 KB
-ESM dist/CountryCodeSelect-KKDPTYI3.mjs 1.22 KB
-ESM dist/chunk-RK3GOXNY.mjs             427.00 KB
-ESM ⚡️ Build success in 2129ms
-CJS dist/index.js 540.68 KB
-CJS ⚡️ Build success in 2130ms
-DTS ⚡️ Build success in 15384ms
-DTS dist/index.d.ts  342.08 KB
-DTS dist/index.d.mts 342.08 KB
+ESM dist/CountryCodeSelect-ATLJUIQ5.mjs 1.22 KB
+ESM dist/chunk-5GZRUD7N.mjs             427.10 KB
+ESM ⚡️ Build success in 2201ms
+CJS dist/index.js 540.85 KB
+CJS ⚡️ Build success in 2201ms
+DTS ⚡️ Build success in 15418ms
+DTS dist/index.d.ts  342.44 KB
+DTS dist/index.d.mts 342.44 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 10.9.2
+
+### Patch Changes
+
+- 96e8a8a: TravelTag: updated disabled variant colors
+
 ## 10.9.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-KKDPTYI3.mjs → CountryCodeSelect-ATLJUIQ5.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-RK3GOXNY.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-5GZRUD7N.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-RK3GOXNY.mjs → chunk-5GZRUD7N.mjs}

@@ -1841,7 +1841,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-KKDPTYI3.mjs'));
+var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-ATLJUIQ5.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
 });
@@ -12468,7 +12468,7 @@ var config20 = helpers13.defineMultiStyleConfig({
       transitionDuration: "fast",
       transitionProperty: "common",
       _disabled: {
-        backgroundColor: "silver"
+        ...surface("disabled", props)
       },
       "button&, a&": {
         boxShadow: "sm",
@@ -12485,8 +12485,7 @@ var config20 = helpers13.defineMultiStyleConfig({
     iconContainer: {
       padding: 0.5,
       "[aria-disabled=true] &": {
-        backgroundColor: "osloGrey",
-        color: "white"
+        ...surface("disabled", props)
       }
     },
     textContainer: {
@@ -12494,7 +12493,7 @@ var config20 = helpers13.defineMultiStyleConfig({
       paddingRight: 0.5,
       whiteSpace: "nowrap",
       "[aria-disabled=true] &": {
-        color: "dimGrey"
+        ...baseText("disabled", props)
       }
     },
     title: {
@@ -12893,7 +12892,10 @@ var config23 = helpers16.defineMultiStyleConfig({
       alignItems: "center"
     },
     icon: {
-      color: "white"
+      color: "white",
+      "[aria-disabled=true] &": {
+        color: mode("icon.disabled.light", "icon.disabled.dark")
+      }
     }
   },
   variants: {

package/dist/index.d.mts

@@ -1581,10 +1581,23 @@ type LineIconProps = Exclude<BoxProps, "variant"> & VariantProps & {
 declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => React.JSX.Element | null;
 
 type TravelTagProps = TagProps & BoxProps & {
+    /**
+     * Defines the level of importance
+     * Default to none
+     */
     deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
     isDisabled?: boolean;
+    /**
+     * Needs to be defined if variant is custom
+     */
     foregroundColor?: string;
+    /**
+     * Needs to be defined if variant is custom
+     */
     backgroundColor?: string;
+    /**
+     * Define a custom icon variant
+     */
     customIconVariant?: string;
 };
 /**
@@ -4381,7 +4394,6 @@ declare const theme: {
                     padding: number;
                     "[aria-disabled=true] &": {
                         backgroundColor: string;
-                        color: string;
                     };
                 };
                 textContainer: {
@@ -4814,6 +4826,9 @@ declare const theme: {
                 };
                 icon: {
                     color: string;
+                    "[aria-disabled=true] &": {
+                        color: (props: Record<string, any> | _chakra_ui_styled_system.StyleFunctionProps) => string;
+                    };
                 };
             } | undefined;
             sizes?: {
@@ -7336,7 +7351,6 @@ declare const theme: {
                     padding: number;
                     "[aria-disabled=true] &": {
                         backgroundColor: string;
-                        color: string;
                     };
                 };
                 textContainer: {

package/dist/index.d.ts

@@ -1581,10 +1581,23 @@ type LineIconProps = Exclude<BoxProps, "variant"> & VariantProps & {
 declare const LineIcon: ({ variant, size, sx, ...rest }: LineIconProps) => React.JSX.Element | null;
 
 type TravelTagProps = TagProps & BoxProps & {
+    /**
+     * Defines the level of importance
+     * Default to none
+     */
     deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
     isDisabled?: boolean;
+    /**
+     * Needs to be defined if variant is custom
+     */
     foregroundColor?: string;
+    /**
+     * Needs to be defined if variant is custom
+     */
     backgroundColor?: string;
+    /**
+     * Define a custom icon variant
+     */
     customIconVariant?: string;
 };
 /**
@@ -4381,7 +4394,6 @@ declare const theme: {
                     padding: number;
                     "[aria-disabled=true] &": {
                         backgroundColor: string;
-                        color: string;
                     };
                 };
                 textContainer: {
@@ -4814,6 +4826,9 @@ declare const theme: {
                 };
                 icon: {
                     color: string;
+                    "[aria-disabled=true] &": {
+                        color: (props: Record<string, any> | _chakra_ui_styled_system.StyleFunctionProps) => string;
+                    };
                 };
             } | undefined;
             sizes?: {
@@ -7336,7 +7351,6 @@ declare const theme: {
                     padding: number;
                     "[aria-disabled=true] &": {
                         backgroundColor: string;
-                        color: string;
                     };
                 };
                 textContainer: {

package/dist/index.js

@@ -14071,6 +14071,8 @@ var parts9, helpers13, config20, travel_tag_default, getDeviationContainerStyle,
 var init_travel_tag = __esm({
   "src/theme/components/travel-tag.ts"() {
     init_focus_utils();
+    init_surface_utils();
+    init_base_utils();
     parts9 = themeTools.anatomy("travel-tag").parts(
       "container",
       "iconContainer",
@@ -14093,7 +14095,7 @@ var init_travel_tag = __esm({
           transitionDuration: "fast",
           transitionProperty: "common",
           _disabled: {
-            backgroundColor: "silver"
+            ...surface("disabled", props)
           },
           "button&, a&": {
             boxShadow: "sm",
@@ -14110,8 +14112,7 @@ var init_travel_tag = __esm({
         iconContainer: {
           padding: 0.5,
           "[aria-disabled=true] &": {
-            backgroundColor: "osloGrey",
-            color: "white"
+            ...surface("disabled", props)
           }
         },
         textContainer: {
@@ -14119,7 +14120,7 @@ var init_travel_tag = __esm({
           paddingRight: 0.5,
           whiteSpace: "nowrap",
           "[aria-disabled=true] &": {
-            color: "dimGrey"
+            ...baseText("disabled", props)
           }
         },
         title: {
@@ -14541,7 +14542,10 @@ var init_line_icon = __esm({
           alignItems: "center"
         },
         icon: {
-          color: "white"
+          color: "white",
+          "[aria-disabled=true] &": {
+            color: themeTools.mode("icon.disabled.light", "icon.disabled.dark")
+          }
         }
       },
       variants: {

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-RK3GOXNY.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, CardSelect, CargonetLogo, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, FullScreenDrawer, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, Pagination, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, PressableCard, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioCard, RadioCardGroup, RadioCardGroupContext, RadioGroup, ScaleFade, SearchInput, Section, ServiceAlert, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, StaticCard, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, VyLogoPride, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-5GZRUD7N.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "10.9.1",
+  "version": "10.9.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/linjetag/TravelTag.tsx

@@ -19,10 +19,23 @@ import type { TagProps } from "./types";
 
 export type TravelTagProps = TagProps &
   BoxProps & {
+    /**
+     * Defines the level of importance
+     * Default to none
+     */
     deviationLevel?: "critical" | "major" | "minor" | "info" | "none";
     isDisabled?: boolean;
+    /**
+     * Needs to be defined if variant is custom
+     */
     foregroundColor?: string;
+    /**
+     * Needs to be defined if variant is custom
+     */
     backgroundColor?: string;
+    /**
+     * Define a custom icon variant
+     */
     customIconVariant?: string;
   };
 

package/src/theme/components/line-icon.ts

@@ -13,6 +13,9 @@ const config = helpers.defineMultiStyleConfig({
     },
     icon: {
       color: "white",
+      "[aria-disabled=true] &": {
+        color: mode("icon.disabled.light", "icon.disabled.dark"),
+      },
     },
   },
   variants: {

package/src/theme/components/travel-tag.ts

@@ -2,6 +2,8 @@ import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import type { StyleFunctionProps } from "@chakra-ui/theme-tools";
 import { anatomy, mode } from "@chakra-ui/theme-tools";
 import { focusVisibleStyles } from "../utils/focus-utils";
+import { surface } from "../utils/surface-utils";
+import { baseText } from "../utils/base-utils";
 
 const parts = anatomy("travel-tag").parts(
   "container",
@@ -27,7 +29,7 @@ const config = helpers.defineMultiStyleConfig({
       transitionDuration: "fast",
       transitionProperty: "common",
       _disabled: {
-        backgroundColor: "silver",
+        ...surface("disabled", props),
       },
       "button&, a&": {
         boxShadow: "sm",
@@ -44,8 +46,7 @@ const config = helpers.defineMultiStyleConfig({
     iconContainer: {
       padding: 0.5,
       "[aria-disabled=true] &": {
-        backgroundColor: "osloGrey",
-        color: "white",
+        ...surface("disabled", props),
       },
     },
     textContainer: {
@@ -53,7 +54,7 @@ const config = helpers.defineMultiStyleConfig({
       paddingRight: 0.5,
       whiteSpace: "nowrap",
       "[aria-disabled=true] &": {
-        color: "dimGrey",
+        ...baseText("disabled", props),
       },
     },
     title: {