@vygruppen/spor-react 3.0.0 → 3.0.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.0.0 build
+> @vygruppen/spor-react@3.0.2 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 ESM Build start
 DTS Build start
 "toTime" is imported from external module "@internationalized/date" but never used in "dist/index.js".
-"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-YVNVHFTG.mjs".
-CJS dist/index.js 896.11 KB
-CJS ⚡️ Build success in 4412ms
-ESM dist/CountryCodeSelect-57KCWSW3.mjs 351.65 KB
+"toTime" is imported from external module "@internationalized/date" but never used in "dist/chunk-CIZ54LAU.mjs".
 ESM dist/index.mjs                      2.01 KB
-ESM dist/chunk-YVNVHFTG.mjs             416.38 KB
-ESM ⚡️ Build success in 4414ms
-DTS ⚡️ Build success in 17131ms
-DTS dist/index.d.ts 259.10 KB
+ESM dist/CountryCodeSelect-QGMCRWO6.mjs 351.65 KB
+ESM dist/chunk-CIZ54LAU.mjs             416.53 KB
+ESM ⚡️ Build success in 5751ms
+CJS dist/index.js 896.28 KB
+CJS ⚡️ Build success in 5752ms
+DTS ⚡️ Build success in 23047ms
+DTS dist/index.d.ts 259.22 KB

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @vygruppen/spor-react
 
+## 3.0.2
+
+### Patch Changes
+
+- ed4dc214: NumericStepper: Make label work as "add one" button if the value is zero
+- 0e951ddf: Input: Display text cursor for form labels inside of inputs.
+
+## 3.0.1
+
+### Patch Changes
+
+- 828e4f38: Fix a typing issue with Heading
+
 ## 3.0.0
 
 ### Major Changes

package/dist/{CountryCodeSelect-57KCWSW3.mjs → CountryCodeSelect-QGMCRWO6.mjs}

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

package/dist/{chunk-YVNVHFTG.mjs → chunk-CIZ54LAU.mjs}

@@ -3226,7 +3226,11 @@ var Badge = forwardRef(
   }
 );
 var Code = forwardRef((props, ref) => /* @__PURE__ */ React49__default.createElement(Code$1, { ...props, ref }));
-var Heading = ({ as, variant = "xl-display", ...props }) => {
+var Heading = ({
+  as,
+  variant = "xl-display",
+  ...props
+}) => {
   return /* @__PURE__ */ React49__default.createElement(Text, { as, textStyle: variant, ...props });
 };
 var Text4 = forwardRef(
@@ -4220,7 +4224,8 @@ function Combobox({
     ...rest,
     defaultFilter: contains2,
     allowsEmptyCollection: Boolean(emptyContent),
-    shouldCloseOnBlur: true
+    shouldCloseOnBlur: true,
+    label
   });
   const {
     inputProps: { size: size2, ...inputProps },
@@ -4669,6 +4674,7 @@ function NumericStepper({
       name: nameProp,
       value,
       ...formControlProps,
+      id: value !== 0 ? formControlProps.id : void 0,
       fontSize: "sm",
       fontWeight: "bold",
       width: "3ch",
@@ -4716,7 +4722,8 @@ function NumericStepper({
       "aria-label": t2(texts11.incrementButtonAriaLabel),
       onClick: () => onChange(value + 1),
       visibility: value >= maxValue ? "hidden" : "visible",
-      isDisabled: formControlProps.disabled
+      isDisabled: formControlProps.disabled,
+      id: value === 0 ? formControlProps.id : void 0
     }
   ));
 }
@@ -4921,7 +4928,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-57KCWSW3.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-QGMCRWO6.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -12739,7 +12746,8 @@ var config21 = helpers13.defineMultiStyleConfig({
         position: "absolute",
         my: 2,
         transition: ".1s ease-out",
-        transformOrigin: "top left"
+        transformOrigin: "top left",
+        cursor: "text"
       },
       "&:not(:placeholder-shown)": {
         pt: "16px",

package/dist/index.d.ts

@@ -3383,6 +3383,7 @@ declare const theme: {
                         my: number;
                         transition: string;
                         transformOrigin: string;
+                        cursor: string;
                     };
                     "&:not(:placeholder-shown)": {
                         pt: string;
@@ -4047,6 +4048,7 @@ declare const theme: {
                         my: number;
                         transition: string;
                         transformOrigin: string;
+                        cursor: string;
                     };
                     "&:not(:placeholder-shown)": {
                         pt: string;
@@ -4827,6 +4829,7 @@ declare const theme: {
                     my: number;
                     transition: string;
                     transformOrigin: string;
+                    cursor: string;
                 };
                 "&:not(:placeholder-shown)": {
                     pt: string;
@@ -6988,7 +6991,7 @@ type HeadingProps = Omit<HeadingProps$1, "textStyle" | "as"> & {
  * <Heading as="h1" variant="2xl">Look at me!</Heading>
  * ```
  */
-declare const Heading: ({ as, variant, ...props }: any) => React__default.JSX.Element;
+declare const Heading: ({ as, variant, ...props }: HeadingProps) => React__default.JSX.Element;
 
 type TextProps = Omit<TextProps$1, "textStyle"> & {
     /** The size and style of the text.

package/dist/index.js

@@ -2825,7 +2825,11 @@ var init_Code = __esm({
 exports.Heading = void 0;
 var init_Heading = __esm({
   "src/typography/Heading.tsx"() {
-    exports.Heading = ({ as, variant = "xl-display", ...props }) => {
+    exports.Heading = ({
+      as,
+      variant = "xl-display",
+      ...props
+    }) => {
       return /* @__PURE__ */ React49__namespace.default.createElement(react.Text, { as, textStyle: variant, ...props });
     };
   }
@@ -4730,7 +4734,8 @@ function Combobox({
     ...rest,
     defaultFilter: contains2,
     allowsEmptyCollection: Boolean(emptyContent),
-    shouldCloseOnBlur: true
+    shouldCloseOnBlur: true,
+    label
   });
   const {
     inputProps: { size: size2, ...inputProps },
@@ -5248,6 +5253,7 @@ function NumericStepper({
       name: nameProp,
       value,
       ...formControlProps,
+      id: value !== 0 ? formControlProps.id : void 0,
       fontSize: "sm",
       fontWeight: "bold",
       width: "3ch",
@@ -5295,7 +5301,8 @@ function NumericStepper({
       "aria-label": t2(texts11.incrementButtonAriaLabel),
       onClick: () => onChange(value + 1),
       visibility: value >= maxValue ? "hidden" : "visible",
-      isDisabled: formControlProps.disabled
+      isDisabled: formControlProps.disabled,
+      id: value === 0 ? formControlProps.id : void 0
     }
   ));
 }
@@ -20866,7 +20873,8 @@ var init_input2 = __esm({
             position: "absolute",
             my: 2,
             transition: ".1s ease-out",
-            transformOrigin: "top left"
+            transformOrigin: "top left",
+            cursor: "text"
           },
           "&:not(:placeholder-shown)": {
             pt: "16px",

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-YVNVHFTG.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-CIZ54LAU.mjs';

package/package.json

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

package/src/input/Combobox.tsx

@@ -93,6 +93,7 @@ export function Combobox<T extends object>({
     defaultFilter: contains,
     allowsEmptyCollection: Boolean(emptyContent),
     shouldCloseOnBlur: true,
+    label,
   });
 
   const {

package/src/input/NumericStepper.tsx

@@ -94,6 +94,7 @@ export function NumericStepper({
         name={nameProp}
         value={value}
         {...formControlProps}
+        id={value !== 0 ? formControlProps.id : undefined}
         fontSize="sm"
         fontWeight="bold"
         width="3ch"
@@ -140,6 +141,7 @@ export function NumericStepper({
         onClick={() => onChange(value + 1)}
         visibility={value >= maxValue ? "hidden" : "visible"}
         isDisabled={formControlProps.disabled}
+        id={value === 0 ? formControlProps.id : undefined}
       />
     </Flex>
   );
@@ -156,6 +158,8 @@ type VerySmallButtonProps = {
   visibility?: "visible" | "hidden";
   /** Whether or not the button is disabled */
   isDisabled?: boolean;
+  /** The ID of the button */
+  id?: string;
 };
 /** Internal override for extra small icon buttons */
 const VerySmallButton = (props: VerySmallButtonProps) => {

package/src/theme/components/input.ts

@@ -82,6 +82,7 @@ const config = helpers.defineMultiStyleConfig({
         my: 2,
         transition: ".1s ease-out",
         transformOrigin: "top left",
+        cursor: "text",
       },
       "&:not(:placeholder-shown)": {
         pt: "16px",

package/src/typography/Heading.tsx

@@ -26,6 +26,10 @@ export type HeadingProps = Omit<ChakraHeadingProps, "textStyle" | "as"> & {
  * <Heading as="h1" variant="2xl">Look at me!</Heading>
  * ```
  */
-export const Heading = ({ as, variant = "xl-display", ...props }: any) => {
+export const Heading = ({
+  as,
+  variant = "xl-display",
+  ...props
+}: HeadingProps) => {
   return <Text as={as} textStyle={variant} {...props} />;
 };