@vygruppen/spor-react 10.5.0 → 10.6.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@10.5.0 build
+> @vygruppen/spor-react@10.6.0 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-QMX6VHNM.mjs 1.22 KB
-ESM dist/chunk-CHJ6LT66.mjs             424.51 KB
-ESM ⚡️ Build success in 2272ms
-CJS dist/index.js 537.90 KB
-CJS ⚡️ Build success in 2273ms
-DTS ⚡️ Build success in 15423ms
-DTS dist/index.d.ts  339.25 KB
-DTS dist/index.d.mts 339.25 KB
+ESM dist/CountryCodeSelect-R27DZ2PB.mjs 1.22 KB
+ESM dist/chunk-WSGO53OP.mjs             424.74 KB
+ESM ⚡️ Build success in 2252ms
+CJS dist/index.js 538.15 KB
+CJS ⚡️ Build success in 2253ms
+DTS ⚡️ Build success in 15042ms
+DTS dist/index.d.ts  339.27 KB
+DTS dist/index.d.mts 339.27 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 10.6.0
+
+### Minor Changes
+
+- be4754b: PhoneNumberInput: Added the option to display the input as optional
+
 ## 10.5.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-QMX6VHNM.mjs → CountryCodeSelect-R27DZ2PB.mjs}

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

package/dist/{chunk-CHJ6LT66.mjs → chunk-WSGO53OP.mjs}

@@ -1756,10 +1756,11 @@ var PhoneNumberInput = forwardRef(
     value: externalValue,
     onChange: externalOnChange,
     variant,
+    isOptional,
     ...boxProps
   }, ref) => {
     const { t: t2 } = useTranslation();
-    const label = externalLabel ?? t2(texts4.phoneNumber);
+    const label = externalLabel ?? isOptional ? t2(texts4.phoneNumberOptional) : t2(texts4.phoneNumber);
     const [value, onChange] = useControllableState({
       value: externalValue,
       onChange: externalOnChange,
@@ -1827,6 +1828,12 @@ var texts4 = createTexts({
     en: "Phone number",
     sv: "Telefonnummer"
   },
+  phoneNumberOptional: {
+    nb: "Telefonnummer (valgfritt)",
+    nn: "Telefonnummer (valgfritt)",
+    en: "Phone number (optional)",
+    sv: "Telefonnummer (valfritt)"
+  },
   countryCodeLabel: {
     nb: "Landskode",
     nn: "Landskode",
@@ -1834,7 +1841,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-QMX6VHNM.mjs'));
+var LazyCountryCodeSelect = React85__default.lazy(() => import('./CountryCodeSelect-R27DZ2PB.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React85__default.createElement(Radio$1, { ...props, ref });
 });

package/dist/index.d.mts

@@ -1356,6 +1356,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
     /** The optional value of the country code and phone number */
     value?: CountryCodeAndPhoneNumber;
     variant?: "base" | "floating";
+    isOptional?: boolean;
 };
 /**
  * A component for entering phone numbers.

package/dist/index.d.ts

@@ -1356,6 +1356,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
     /** The optional value of the country code and phone number */
     value?: CountryCodeAndPhoneNumber;
     variant?: "base" | "floating";
+    isOptional?: boolean;
 };
 /**
  * A component for entering phone numbers.

package/dist/index.js

@@ -1968,10 +1968,11 @@ var init_PhoneNumberInput = __esm({
         value: externalValue,
         onChange: externalOnChange,
         variant,
+        isOptional,
         ...boxProps
       }, ref) => {
         const { t: t2 } = useTranslation();
-        const label = externalLabel ?? t2(texts5.phoneNumber);
+        const label = externalLabel ?? isOptional ? t2(texts5.phoneNumberOptional) : t2(texts5.phoneNumber);
         const [value, onChange] = react.useControllableState({
           value: externalValue,
           onChange: externalOnChange,
@@ -2039,6 +2040,12 @@ var init_PhoneNumberInput = __esm({
         en: "Phone number",
         sv: "Telefonnummer"
       },
+      phoneNumberOptional: {
+        nb: "Telefonnummer (valgfritt)",
+        nn: "Telefonnummer (valgfritt)",
+        en: "Phone number (optional)",
+        sv: "Telefonnummer (valfritt)"
+      },
       countryCodeLabel: {
         nb: "Landskode",
         nn: "Landskode",

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-CHJ6LT66.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-WSGO53OP.mjs';

package/package.json

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

package/src/input/PhoneNumberInput.tsx

@@ -25,6 +25,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
   /** The optional value of the country code and phone number */
   value?: CountryCodeAndPhoneNumber;
   variant?: "base" | "floating";
+  isOptional?: boolean;
 };
 /**
  * A component for entering phone numbers.
@@ -51,12 +52,16 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
       value: externalValue,
       onChange: externalOnChange,
       variant,
+      isOptional,
       ...boxProps
     },
     ref,
   ) => {
     const { t } = useTranslation();
-    const label = externalLabel ?? t(texts.phoneNumber);
+    const label =
+      externalLabel ?? isOptional
+        ? t(texts.phoneNumberOptional)
+        : t(texts.phoneNumber);
     const [value, onChange] = useControllableState({
       value: externalValue,
       onChange: externalOnChange,
@@ -125,6 +130,12 @@ const texts = createTexts({
     en: "Phone number",
     sv: "Telefonnummer",
   },
+  phoneNumberOptional: {
+    nb: "Telefonnummer (valgfritt)",
+    nn: "Telefonnummer (valgfritt)",
+    en: "Phone number (optional)",
+    sv: "Telefonnummer (valfritt)",
+  },
   countryCodeLabel: {
     nb: "Landskode",
     nn: "Landskode",