@vygruppen/spor-react 4.1.1 → 5.0.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@4.1.1 build
+> @vygruppen/spor-react@5.0.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js 490.53 KB
-CJS ⚡️ Build success in 2250ms
 ESM dist/index.mjs                      2.10 KB
-ESM dist/CountryCodeSelect-7MAIS4VT.mjs 1.19 KB
-ESM dist/chunk-U2IWIWOD.mjs             382.91 KB
-ESM ⚡️ Build success in 2252ms
-DTS ⚡️ Build success in 12839ms
-DTS dist/index.d.ts  262.48 KB
-DTS dist/index.d.mts 262.48 KB
+ESM dist/CountryCodeSelect-YOBYHYCF.mjs 1.19 KB
+ESM dist/chunk-UOZQ4EDI.mjs             382.90 KB
+ESM ⚡️ Build success in 2307ms
+CJS dist/index.js 490.51 KB
+CJS ⚡️ Build success in 2308ms
+DTS ⚡️ Build success in 13078ms
+DTS dist/index.d.ts  262.47 KB
+DTS dist/index.d.mts 262.47 KB

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @vygruppen/spor-react
 
+## 5.0.0
+
+### Major Changes
+
+- 24963270: Breaking: Rename <Button variant="additional" /> to <Button variant="tertiary" />
+
+  Due to a… minor screwup on ~our~ @selbekk's side, we deprecated the wrong name earlier on.
+
+  To mitigate my screwup, please search through your code base for "additional", and replace it with "tertiary". It should be a simple enough upgrade. Make sure to do this with all Button and IconButton components.
+
+  Sorry. - @selbekk.
+
+### Patch Changes
+
+- 799d47bb: Button: bugfix changed primary button color to pine
+
 ## 4.1.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-7MAIS4VT.mjs → CountryCodeSelect-YOBYHYCF.mjs}

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

package/dist/{chunk-U2IWIWOD.mjs → chunk-UOZQ4EDI.mjs}

@@ -3416,7 +3416,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-7MAIS4VT.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-YOBYHYCF.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4098,7 +4098,7 @@ var NextStepButton = ({ isLastStep, onNext }) => {
   return /* @__PURE__ */ React69.createElement(
     Button,
     {
-      variant: "additional",
+      variant: "tertiary",
       size: "sm",
       color: "white",
       leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React69.createElement(ArrowRightFill18Icon, null),
@@ -4269,7 +4269,7 @@ var StepperStep = ({
     Button,
     {
       size: "xs",
-      variant: state2 === "active" ? "primary" : state2 === "completed" ? "additional" : "ghost",
+      variant: state2 === "active" ? "primary" : state2 === "completed" ? "tertiary" : "ghost",
       ...adjustedProps,
       onClick: () => onClick(stepNumber)
     },
@@ -9799,7 +9799,7 @@ var config6 = defineStyleConfig$1({
     primary: (props) => ({
       // FIXME: Update to use a global defined background color for darkMode whenever it is available.
       // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
-      backgroundColor: mode("primaryGreen", "coralGreen")(props),
+      backgroundColor: mode("pine", "coralGreen")(props),
       color: mode("white", "darkTeal")(props),
       ...focusVisible({
         focus: {
@@ -13459,7 +13459,7 @@ var ActionToast = ({
   buttonText,
   id
 }) => {
-  return /* @__PURE__ */ React69__default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React69__default.createElement(Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React69__default.createElement(Button, { variant: "additional", size: "sm", onClick }, buttonText));
+  return /* @__PURE__ */ React69__default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React69__default.createElement(Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React69__default.createElement(Button, { variant: "tertiary", size: "sm", onClick }, buttonText));
 };
 var ClosableToast = ({
   children,

package/dist/index.d.mts

@@ -266,7 +266,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
      *
      * Defaults to "primary"
      */
-    variant?: "control" | "primary" | "secondary" | "additional" | "ghost" | "floating";
+    variant?: "control" | "primary" | "secondary" | "tertiary" | "ghost" | "floating";
 };
 /**
  * Buttons are used to trigger actions.
@@ -276,7 +276,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
  * - `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.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *
@@ -334,7 +334,7 @@ type ButtonGroupProps = ButtonGroupProps$1;
 declare const ButtonGroup: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", ButtonGroupProps$1>;
 
 type IconButtonProps = Omit<IconButtonProps$1, "variant"> & {
-    variant: "control" | "primary" | "secondary" | "additional" | "ghost" | "floating";
+    variant: "control" | "primary" | "secondary" | "tertiary" | "ghost" | "floating";
 };
 /**
  * An icon-only button.
@@ -346,7 +346,7 @@ type IconButtonProps = Omit<IconButtonProps$1, "variant"> & {
  * - `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.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *
@@ -2363,7 +2363,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | "xs" | undefined;
-                variant?: "primary" | "secondary" | "ghost" | "floating" | "tertiary" | undefined;
+                variant?: "primary" | "secondary" | "tertiary" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };

package/dist/index.d.ts

@@ -266,7 +266,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
      *
      * Defaults to "primary"
      */
-    variant?: "control" | "primary" | "secondary" | "additional" | "ghost" | "floating";
+    variant?: "control" | "primary" | "secondary" | "tertiary" | "ghost" | "floating";
 };
 /**
  * Buttons are used to trigger actions.
@@ -276,7 +276,7 @@ type ButtonProps = Exclude<ButtonProps$1, "colorScheme" | "loadingText" | "size"
  * - `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.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *
@@ -334,7 +334,7 @@ type ButtonGroupProps = ButtonGroupProps$1;
 declare const ButtonGroup: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", ButtonGroupProps$1>;
 
 type IconButtonProps = Omit<IconButtonProps$1, "variant"> & {
-    variant: "control" | "primary" | "secondary" | "additional" | "ghost" | "floating";
+    variant: "control" | "primary" | "secondary" | "tertiary" | "ghost" | "floating";
 };
 /**
  * An icon-only button.
@@ -346,7 +346,7 @@ type IconButtonProps = Omit<IconButtonProps$1, "variant"> & {
  * - `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.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *
@@ -2363,7 +2363,7 @@ declare const theme: {
             } | undefined;
             defaultProps?: {
                 size?: "sm" | "md" | "lg" | "xs" | undefined;
-                variant?: "primary" | "secondary" | "ghost" | "floating" | "tertiary" | undefined;
+                variant?: "primary" | "secondary" | "tertiary" | "ghost" | "floating" | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
         };

package/dist/index.js

@@ -4912,7 +4912,7 @@ var init_PopoverWizardBody = __esm({
       return /* @__PURE__ */ React69__namespace.createElement(
         exports.Button,
         {
-          variant: "additional",
+          variant: "tertiary",
           size: "sm",
           color: "white",
           leftIcon: isLastStep ? void 0 : /* @__PURE__ */ React69__namespace.createElement(sporIconReact.ArrowRightFill18Icon, null),
@@ -5133,7 +5133,7 @@ var init_StepperStep = __esm({
         exports.Button,
         {
           size: "xs",
-          variant: state2 === "active" ? "primary" : state2 === "completed" ? "additional" : "ghost",
+          variant: state2 === "active" ? "primary" : state2 === "completed" ? "tertiary" : "ghost",
           ...adjustedProps,
           onClick: () => onClick(stepNumber)
         },
@@ -11286,7 +11286,7 @@ var init_button2 = __esm({
         primary: (props) => ({
           // FIXME: Update to use a global defined background color for darkMode whenever it is available.
           // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
-          backgroundColor: themeTools.mode("primaryGreen", "coralGreen")(props),
+          backgroundColor: themeTools.mode("pine", "coralGreen")(props),
           color: themeTools.mode("white", "darkTeal")(props),
           ...focusVisible({
             focus: {
@@ -15295,7 +15295,7 @@ var init_ActionToast = __esm({
       buttonText,
       id
     }) => {
-      return /* @__PURE__ */ React69__namespace.default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "additional", size: "sm", onClick }, buttonText));
+      return /* @__PURE__ */ React69__namespace.default.createElement(BaseToast, { variant, id }, /* @__PURE__ */ React69__namespace.default.createElement(react.Box, { marginRight: 2, flexGrow: "1" }, children), /* @__PURE__ */ React69__namespace.default.createElement(exports.Button, { variant: "tertiary", size: "sm", onClick }, buttonText));
     };
   }
 });

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, 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, 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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-U2IWIWOD.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, 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, 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, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, Portal, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-UOZQ4EDI.mjs';

package/package.json

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

package/src/button/Button.tsx

@@ -28,7 +28,7 @@ export type ButtonProps = Exclude<
     | "control"
     | "primary"
     | "secondary"
-    | "additional"
+    | "tertiary"
     | "ghost"
     | "floating";
 };
@@ -40,7 +40,7 @@ export type ButtonProps = Exclude<
  * - `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.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *

package/src/button/IconButton.tsx

@@ -12,7 +12,7 @@ export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
     | "control"
     | "primary"
     | "secondary"
-    | "additional"
+    | "tertiary"
     | "ghost"
     | "floating";
 };
@@ -26,7 +26,7 @@ export type IconButtonProps = Omit<ChakraIconButtonProps, "variant"> & {
  * - `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.
- * - `additional`: Used for additional choices, like a less important secondary action.
+ * - `tertiary`: Used for additional choices, like a less important secondary action.
  * - `ghost`: Used inside other interactive elements, like date pickers and input fields.
  * - `floating`: Used for floating actions, like a menu button in a menu.
  *

package/src/popover/PopoverWizardBody.tsx

@@ -64,7 +64,7 @@ const NextStepButton = ({ isLastStep, onNext }: NextStepButtonProps) => {
   const { t } = useTranslation();
   return (
     <Button
-      variant="additional"
+      variant="tertiary"
       size="sm"
       color="white"
       leftIcon={isLastStep ? undefined : <ArrowRightFill18Icon />}

package/src/stepper/StepperStep.tsx

@@ -35,7 +35,7 @@ export const StepperStep = ({
           state === "active"
             ? "primary"
             : state === "completed"
-            ? "additional"
+            ? "tertiary"
             : "ghost"
         }
         {...adjustedProps}

package/src/theme/components/button.ts

@@ -34,7 +34,7 @@ const config = defineStyleConfig({
     primary: (props) => ({
       // FIXME: Update to use a global defined background color for darkMode whenever it is available.
       // hardcoded background color as alpha-"hack" below is not feasible for dark mode with solid background color
-      backgroundColor: mode("primaryGreen", "coralGreen")(props),
+      backgroundColor: mode("pine", "coralGreen")(props),
       color: mode("white", "darkTeal")(props),
       ...focusVisible({
         focus: {

package/src/toast/ActionToast.tsx

@@ -20,7 +20,7 @@ export const ActionToast = ({
       <Box marginRight={2} flexGrow="1">
         {children}
       </Box>
-      <Button variant="additional" size="sm" onClick={onClick}>
+      <Button variant="tertiary" size="sm" onClick={onClick}>
         {buttonText}
       </Button>
     </BaseToast>