@vygruppen/spor-react 3.1.2 → 3.2.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.1.2 build
+> @vygruppen/spor-react@3.2.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,13 +9,13 @@
 CJS Build start
 ESM Build start
 DTS Build start
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-QOZMDFH3.mjs".
 "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-GIRK7GTN.mjs".
-CJS dist/index.js 901.12 KB
-CJS ⚡️ Build success in 4689ms
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-PU2FEIUH.mjs 350.82 KB
-ESM dist/chunk-GIRK7GTN.mjs             418.55 KB
-ESM ⚡️ Build success in 4689ms
-DTS ⚡️ Build success in 18196ms
-DTS dist/index.d.ts 251.63 KB
+ESM dist/CountryCodeSelect-YGXVIC6H.mjs 350.82 KB
+ESM dist/chunk-QOZMDFH3.mjs             418.96 KB
+ESM ⚡️ Build success in 4811ms
+CJS dist/index.js 901.54 KB
+CJS ⚡️ Build success in 4811ms
+DTS ⚡️ Build success in 17792ms
+DTS dist/index.d.ts 251.71 KB

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @vygruppen/spor-react
 
+## 3.2.0
+
+### Minor Changes
+
+- 37b40a9b: Adds withInput prop to numericStepper
+
 ## 3.1.2
 
 ### Patch Changes

package/dist/{CountryCodeSelect-PU2FEIUH.mjs → CountryCodeSelect-YGXVIC6H.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-GIRK7GTN.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-QOZMDFH3.mjs';
 import React from 'react';
 
 // ../../node_modules/awesome-phonenumber/index-esm.mjs

package/dist/{chunk-GIRK7GTN.mjs → chunk-QOZMDFH3.mjs}

@@ -4969,6 +4969,7 @@ function NumericStepper({
   minValue = 0,
   maxValue = 99,
   isDisabled,
+  withInput = true,
   ...boxProps
 }) {
   const { t: t2 } = useTranslation();
@@ -4990,7 +4991,7 @@ function NumericStepper({
       visibility: value <= minValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled
     }
-  ), /* @__PURE__ */ React49__default.createElement(
+  ), withInput ? /* @__PURE__ */ React49__default.createElement(
     chakra.input,
     {
       type: "number",
@@ -5040,6 +5041,21 @@ function NumericStepper({
         onChange(numericInput);
       }
     }
+  ) : /* @__PURE__ */ React49__default.createElement(
+    chakra.text,
+    {
+      fontSize: "sm",
+      fontWeight: "bold",
+      width: "3ch",
+      marginX: 1,
+      paddingX: 1,
+      textAlign: "center",
+      color: textColor,
+      transition: "box-shadow .1s ease-out",
+      visibility: value === 0 ? "hidden" : "visible",
+      "aria-label": value.toString()
+    },
+    value
   ), /* @__PURE__ */ React49__default.createElement(
     VerySmallButton,
     {
@@ -5253,7 +5269,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-PU2FEIUH.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-YGXVIC6H.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });

package/dist/index.d.ts

@@ -1096,6 +1096,8 @@ type NumericStepperProps = {
     maxValue?: number;
     /** Whether the stepper is disabled or not */
     isDisabled?: boolean;
+    /** Whether to show input field or not */
+    withInput?: boolean;
 } & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
@@ -1121,7 +1123,7 @@ type NumericStepperProps = {
  * </FormControl>
  * ```
  */
-declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, ...boxProps }: NumericStepperProps): React__default.JSX.Element;
+declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, ...boxProps }: NumericStepperProps): React__default.JSX.Element;
 
 type PasswordInputProps = InputProps;
 declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", InputProps>;

package/dist/index.js

@@ -5626,6 +5626,7 @@ function NumericStepper({
   minValue = 0,
   maxValue = 99,
   isDisabled,
+  withInput = true,
   ...boxProps
 }) {
   const { t: t2 } = useTranslation();
@@ -5647,7 +5648,7 @@ function NumericStepper({
       visibility: value <= minValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled
     }
-  ), /* @__PURE__ */ React49__namespace.default.createElement(
+  ), withInput ? /* @__PURE__ */ React49__namespace.default.createElement(
     react.chakra.input,
     {
       type: "number",
@@ -5697,6 +5698,21 @@ function NumericStepper({
         onChange(numericInput);
       }
     }
+  ) : /* @__PURE__ */ React49__namespace.default.createElement(
+    react.chakra.text,
+    {
+      fontSize: "sm",
+      fontWeight: "bold",
+      width: "3ch",
+      marginX: 1,
+      paddingX: 1,
+      textAlign: "center",
+      color: textColor,
+      transition: "box-shadow .1s ease-out",
+      visibility: value === 0 ? "hidden" : "visible",
+      "aria-label": value.toString()
+    },
+    value
   ), /* @__PURE__ */ React49__namespace.default.createElement(
     VerySmallButton,
     {

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, 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, 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-GIRK7GTN.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, 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, 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-QOZMDFH3.mjs';

package/package.json

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

package/src/input/NumericStepper.tsx

@@ -31,6 +31,8 @@ type NumericStepperProps = {
   maxValue?: number;
   /** Whether the stepper is disabled or not */
   isDisabled?: boolean;
+  /** Whether to show input field or not */
+  withInput?: boolean;
 } & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
@@ -65,6 +67,7 @@ export function NumericStepper({
   minValue = 0,
   maxValue = 99,
   isDisabled,
+  withInput = true,
   ...boxProps
 }: NumericStepperProps) {
   const { t } = useTranslation();
@@ -87,54 +90,71 @@ export function NumericStepper({
         visibility={value <= minValue ? "hidden" : "visible"}
         isDisabled={formControlProps.disabled}
       />
-      <chakra.input
-        type="number"
-        min={minValue}
-        max={maxValue}
-        name={nameProp}
-        value={value}
-        {...formControlProps}
-        id={value !== 0 ? formControlProps.id : undefined}
-        fontSize="sm"
-        fontWeight="bold"
-        width="3ch"
-        marginX={1}
-        paddingX={1}
-        borderRadius="xs"
-        textAlign="center"
-        backgroundColor={backgroundColor}
-        color={textColor}
-        transition="box-shadow .1s ease-out"
-        visibility={value === 0 ? "hidden" : "visible"}
-        aria-live="assertive"
-        aria-label={value.toString()}
-        _hover={{
-          boxShadow: getBoxShadowString({
-            borderColor: "currentColor",
-            borderWidth: 1,
-          }),
-          _disabled: {
-            boxShadow: "none",
-          },
-        }}
-        _disabled={{
-          opacity: 0.5,
-        }}
-        _focus={{
-          outline: "none",
-          boxShadow: getBoxShadowString({
-            borderColor: focusColor,
-            borderWidth: 1,
-          }),
-        }}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-          const numericInput = Number(e.target.value);
-          if (Number.isNaN(numericInput)) {
-            return;
-          }
-          onChange(numericInput);
-        }}
-      />
+      {withInput ? (
+        <chakra.input
+          type="number"
+          min={minValue}
+          max={maxValue}
+          name={nameProp}
+          value={value}
+          {...formControlProps}
+          id={value !== 0 ? formControlProps.id : undefined}
+          fontSize="sm"
+          fontWeight="bold"
+          width="3ch"
+          marginX={1}
+          paddingX={1}
+          borderRadius="xs"
+          textAlign="center"
+          backgroundColor={backgroundColor}
+          color={textColor}
+          transition="box-shadow .1s ease-out"
+          visibility={value === 0 ? "hidden" : "visible"}
+          aria-live="assertive"
+          aria-label={value.toString()}
+          _hover={{
+            boxShadow: getBoxShadowString({
+              borderColor: "currentColor",
+              borderWidth: 1,
+            }),
+            _disabled: {
+              boxShadow: "none",
+            },
+          }}
+          _disabled={{
+            opacity: 0.5,
+          }}
+          _focus={{
+            outline: "none",
+            boxShadow: getBoxShadowString({
+              borderColor: focusColor,
+              borderWidth: 1,
+            }),
+          }}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            const numericInput = Number(e.target.value);
+            if (Number.isNaN(numericInput)) {
+              return;
+            }
+            onChange(numericInput);
+          }}
+        />
+      ) : (
+        <chakra.text
+          fontSize="sm"
+          fontWeight="bold"
+          width="3ch"
+          marginX={1}
+          paddingX={1}
+          textAlign="center"
+          color={textColor}
+          transition="box-shadow .1s ease-out"
+          visibility={value === 0 ? "hidden" : "visible"}
+          aria-label={value.toString()}
+        >
+          {value}
+        </chakra.text>
+      )}
       <VerySmallButton
         icon={<AddIcon color="white" />}
         aria-label={t(texts.incrementButtonAriaLabel)}
@@ -242,4 +262,4 @@ const texts = createTexts({
     nn: "Legg til 1",
     sv: "Lägg till 1",
   },
-});
+});