@vygruppen/spor-react 12.10.1 → 12.10.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.10.1 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.10.2 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-CJS dist/index.cjs           314.93 KB
-CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       629.08 KB
-CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2614ms
-ESM dist/index.mjs           293.53 KB
+ESM dist/index.mjs           293.03 KB
 ESM dist/icons/index.mjs     110.00 B
 ESM dist/icons/index.mjs.map 157.00 B
-ESM dist/index.mjs.map       629.08 KB
-ESM ⚡️ Build success in 2615ms
-DTS ⚡️ Build success in 27219ms
+ESM dist/index.mjs.map       628.47 KB
+ESM ⚡️ Build success in 2673ms
+CJS dist/index.cjs           314.43 KB
+CJS dist/icons/index.cjs     381.00 B
+CJS dist/index.cjs.map       628.47 KB
+CJS dist/icons/index.cjs.map 157.00 B
+CJS ⚡️ Build success in 2674ms
+DTS ⚡️ Build success in 18779ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        155.93 KB
+DTS dist/index.d.ts        156.01 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       155.93 KB
+DTS dist/index.d.cts       156.01 KB

package/.turbo/turbo-postinstall.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.10.1 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.10.2 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vygruppen/spor-react
 
+## 12.10.2
+
+### Patch Changes
+
+- a35e94b: - ServiceAlert text is now left-aligned
+  - DateField displays required indicator correctly
+  - Combobox padding issues resolved
+  - PhoneNumberInput border rendering fixed
+  - Floating PhoneNumberInput shows correct invalid border
+  - Switch no longer has unwanted left padding
+  - TimePicker functionality improved
+
 ## 12.10.1
 
 ### Patch Changes
@@ -82,7 +94,6 @@
 ### Patch Changes
 
 - 286dbdc: Improve type definitions for Field and CheckboxGroup components:
-
   - CheckboxGroup: Make `direction` optional.
   - Field: Ensure `onClick` is included in props.
 
@@ -288,7 +299,6 @@
 
 - 94e9282: Nudge, WizardNudge and Toast does not work after updating chakra in a previous version of spor.
   Fixed:
-
   - Toast needed an id for each toast. Auto generated if not supplied from user.
   - Nudge imported usePopoverContext from ark. Now imports from chakra and works.
 
@@ -320,12 +330,10 @@
 ### Minor Changes
 
 - 404114d: **spor-icon-react**:
-
   - Upgraded Chakra UI to the latest version
   - Removed `ClientOnlyWrapper` from all icons
 
   **spor-react**:
-
   - Upgraded Chakra UI to the latest version
   - Fixed minor styling issues in the `Select` component
 
@@ -476,12 +484,10 @@
 ### Major Changes
 
 - fcd6f80: Checkbox:
-
   - Updated props, `onChange` is now `onCheckedChange`
   - "`is`" removed from props names. `invalid`, `disabled` and `checked`
 
   CheckboxGroup:
-
   - `defaultChecked` > `defaultValue`
 
 - fcd6f80: Separator: Changed name from Divider to Separator. Fixed styling on separators to match Figma styling
@@ -491,7 +497,6 @@
 - fcd6f80: Name update: "base" is now "core" on all platforms. Colors and variants.
 - fcd6f80: Lists: UnorderedList is removed, use List with prop as="ul"; OrderedList is removed, use List with prop as="ol"
 - fcd6f80: Table:
-
   - Thead is now TableHeader,
   - Tbody is now TableBody,
   - Tr is now TableRow,
@@ -506,7 +511,6 @@
   Pagination has changed and been converted to composition pattern. Please see docs for info.
 
   Prop changes:
-
   - `totalPages` > `count`
   - `selectedPage` > `page`
 
@@ -519,11 +523,9 @@
   Spor is getting a major update with Chakra 3.
 
   ## Updated variants
-
   - `base` is now `core`
 
   ### Update props
-
   - `isDisabled` is now `disabled`
   - `isLoading` is now `loading`
   - `sx` and `__css` is gone, use `css` or `style` instead
@@ -535,7 +537,6 @@
   - `isAttached` is now `attached`
 
   ### Updated components
-
   - `Dialog` replaces `Modal` - And all sizes and placements are now available from the same component
   - `Accordion`, `Pagination`, `Tabs`, `RadioCard` and `RadioCardGroup` now have a different syntax. Please consult the documentation for name changes.
   - `Table` components has many changes. Instead of the generic HTML names (Td, Tr etc.), it will now work with full names. Please see docs. Variant `simple` is now `line`.
@@ -578,7 +579,6 @@
 - fcd6f80: Accordion: Update syntax and props.
 
   Changes for component:
-
   - `AccordionButton` > `AccordionItemTrigger`
   - `AccordionPanel` > `AccordionItemContent`
   - `AccordionIcon` is deprecated and used in all Accordions
@@ -588,7 +588,6 @@
 - fcd6f80: Radio: can no longer be used without RadioGroup, for accessibility reasons.
 - fcd6f80: Button Group: variant and size are no longer props of ButtonGroup, these props are passed from children. isAttached is now attached
 - fcd6f80: RadioCardGroup and RadioCard:
-
   - Updated props: `onChange` is now `onValueChange`
   - Deleted props: `name`, `groupLabel` is replaced by `<RadioCardLabel />`
   - `core` replaces the `base` variant
@@ -604,7 +603,6 @@
 
 - fcd6f80: NativeSelect: isDisabled and isInvalid is now disabled and invalid. It is no longer necessary to define true or false.
 - fcd6f80: Alert & ExpandableAlert
-
   - `Alert`: `ClosableAlert` and `StaticAlert` are deprecated. Use component `Alert` and prop `closable` instead
   - `ExpandableAlert`: New colorscheme and styling
   - `Accordion`: Some styling updates
@@ -614,19 +612,16 @@
 
 - fcd6f80: Switch: FormLabel is depricated, use label prop. isDisabled, isChecked and isInvalid is now disabled, checked and invalid.
 - fcd6f80: **spor-design-tokens: major**
-
   - teal has been removed from the palette. Use the green palette instead
   - Some aliases are removed to make way for new ones
 
   **spor-design-tokens: minor**
-
   - The palette has been extended from 50-600 to 50-1100 with new values
   - New aliases has been added to support the extended color palette
   - New tokens has been added to themes; detail.color, surface.color and alert
   - Some values for tokens has changed to support the new palette
 
   **spor-react: patch**
-
   - Updated darkGreen Badge with new alias
 
 - fcd6f80: CardSelect: the variant are now: core, ghost and floating
@@ -647,12 +642,10 @@
 - fcd6f80: remove support for elm
 - fcd6f80: ProgressBar: You can now use showValueText to show the percentage done
 - fcd6f80: ### Changed
-
   - Changed the way the theme is switched to work with Chakra 3.
   - Removed the `theme` prop and its value from `SporProvider`. Specifying brand should be sufficient.
 
 - fcd6f80: ### Skeleton Component Updates
-
   - **Skeleton**: Introduced new props. The `isLoaded` prop has been replaced with `loading`, which is its opposite.
   - **SkeletonCircle**: The `boxSize` prop has been replaced with `size`.
 
@@ -968,7 +961,6 @@
 ### Minor Changes
 
 - 8184ed1: ### New component
-
   - ServiceAlert added to the bunch
   - Alert: New variant "service"
 
@@ -1189,7 +1181,6 @@
 ### Minor Changes
 
 - 37c8580: Card is deprecated
-
   - Update styling for PressableCard
   - Update styling for StaticCard
   - Make Card deprecated, is replaced by the above components
@@ -1199,7 +1190,6 @@
 ### Minor Changes
 
 - a3d2ca4: New component: RadioCard & RadioCardGroup
-
   - Should be used togehter for optimal functionality
 
 ### Patch Changes
@@ -1353,14 +1343,12 @@
   Sizes that used to be "sm, md, lg, xl" are now "xs, sm, md, lg".
 
   To migrate, change size
-
   - "sm" to "xs",
   - "md" to "sm",
   - "lg" to "md",
   - and "xl" to "lg".
 
   Affected components are:
-
   - ChoiceChip
   - Tabs
 
@@ -1428,7 +1416,6 @@
   added text
 
   choiceChip:
-
   - We have renamed the variant prop to chipType. This prop now accepts three values: choice, icon, and filter.
     Please update your components to use chipType instead of variant.
   - We have introduced a new variant prop. This prop accepts three values: base, accent, and floating.
@@ -1612,7 +1599,6 @@
 ### Minor Changes
 
 - a16a9972: Expose new methods and components from Chakra:
-
   - defineStyleConfig
   - Collapse
   - useSize
@@ -1838,7 +1824,6 @@
 
 - cfa3ebb1: ExpandableAlert: Fix double padding bug
   Other:
-
   - Set the document-level line height to a valid value
   - Fix a bug with icon generation
 
@@ -2124,7 +2109,6 @@
 - 5bd65c9e: Export some new transition components from Chakra
 
   This change adds the following components:
-
   - Fade
   - ScaleFade
   - Slide
@@ -2181,7 +2165,6 @@
   The design tokens were previously also exported from `spor-react` - they should now be imported from `spor-design-tokens` directly instead.
 
   Some deprecated components and props have also been removed or replaced:
-
   - `Link` is replaced by `TextLink`
   - `Select` is replaced by `NativeSelect`
   - `Spinner` is replaced by `ColorSpinner`

package/dist/index.cjs

@@ -1227,11 +1227,11 @@ var ServiceAlert = React27.forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemContent, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { flexDirection: "row", justifyContent: "center", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(react.Accordion.ItemContent, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { flexDirection: "row", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
             react.Accordion.ItemBody,
             {
               as: react.Stack,
-              maxWidth: contentWidth,
+              width: contentWidth,
               css: styles.itemBody,
               children
             }
@@ -1826,7 +1826,11 @@ var DateField = React27.forwardRef(
           css: styles.inputLabel,
           position: "absolute",
           paddingTop: "2px",
-          children: /* @__PURE__ */ jsxRuntime.jsx("label", { ...props.labelProps, children: props.label })
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Label, { padding: "0", fontSize: "2xs", ...props.labelProps, children: [
+            props.label,
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(react.Field.RequiredIndicator, {})
+          ] })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -2169,14 +2173,7 @@ var TimeField = ({ state, ...props }) => {
         children: props.label
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment) => /* @__PURE__ */ jsxRuntime.jsx(
-      DateTimeSegment,
-      {
-        segment,
-        state
-      },
-      JSON.stringify(segment)
-    )) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { ...fieldProps, ref, paddingTop: "3", paddingBottom: "0.5", children: state.segments.map((segment, index) => /* @__PURE__ */ jsxRuntime.jsx(DateTimeSegment, { segment, state }, index)) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
@@ -2863,6 +2860,7 @@ var ListBox = (props) => {
       css: styles.root,
       "aria-busy": loading,
       maxWidth,
+      padding: "1",
       children: [
         state.collection.size === 0 && props.emptyContent,
         [...state.collection].map(
@@ -2920,7 +2918,18 @@ function Option({ item, state }) {
       { passive: false, once: true }
     );
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsxRuntime.jsx(react.ListItem, { ...optionProps, ...dataFields, ref, css: styles.item, children: item.rendered }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(OptionContext.Provider, { value: { labelProps, descriptionProps }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    react.ListItem,
+    {
+      ...optionProps,
+      ...dataFields,
+      ref,
+      css: styles.item,
+      padding: "1",
+      marginX: "0",
+      children: item.rendered
+    }
+  ) });
 }
 var OptionContext = React27__namespace.default.createContext({
   labelProps: {},
@@ -2937,25 +2946,34 @@ function ListBoxSection({ section, state }) {
   });
   const isFirstSection = section.key === state.collection.getFirstKey();
   const titleColor = useColorModeValue("darkGrey", "white");
-  return /* @__PURE__ */ jsxRuntime.jsx(List, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.ListItem, { ...itemProps, listStyleType: "none", children: [
-    section.rendered && /* @__PURE__ */ jsxRuntime.jsx(
-      react.Box,
-      {
-        fontSize: "mobile.xs",
-        color: titleColor,
-        paddingX: 3,
-        paddingTop: 1,
-        marginTop: isFirstSection ? 0 : 2,
-        textTransform: "uppercase",
-        fontWeight: "bold",
-        ...headingProps,
-        children: section.rendered
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []].map(
-      (item) => /* @__PURE__ */ jsxRuntime.jsx(Option, { item, state }, item.key)
-    ) })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(List, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    react.ListItem,
+    {
+      ...itemProps,
+      listStyleType: "none",
+      marginLeft: "0",
+      paddingX: "1",
+      children: [
+        section.rendered && /* @__PURE__ */ jsxRuntime.jsx(
+          react.Box,
+          {
+            fontSize: "mobile.xs",
+            color: titleColor,
+            paddingTop: 1,
+            marginTop: isFirstSection ? 0 : 2,
+            marginLeft: "1",
+            textTransform: "uppercase",
+            fontWeight: "bold",
+            ...headingProps,
+            children: section.rendered
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(List, { ...groupProps, padding: 0, listStyleType: "none", children: [...((_b4 = (_a5 = state.collection).getChildren) == null ? void 0 : _b4.call(_a5, section.key)) ?? []].map(
+          (item) => /* @__PURE__ */ jsxRuntime.jsx(Option, { item, state }, item.key)
+        ) })
+      ]
+    }
+  ) });
 }
 var NativeSelect = React27__namespace.forwardRef(function NativeSelect2(props, ref) {
   const {
@@ -3347,54 +3365,43 @@ var PhoneNumberInput = React27.forwardRef((props, ref) => {
       nationalNumber: value.nationalNumber
     });
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    AttachedInputs,
-    {
-      border: invalid ? "1px solid" : "none",
-      borderColor: invalid ? "outline.error" : "none",
-      outline: invalid ? "1px solid" : "none",
-      outlineColor: invalid ? "outline.error" : "none",
-      borderRadius: invalid ? "sm" : "none",
-      display: "grid",
-      gridTemplateColumns: "1fr 10fr",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          CountryCodeSelect,
-          {
-            value: [value.countryCode],
-            onValueChange: handleCountryCodeChange,
-            height: "100%",
-            width: "6.25rem",
-            variant,
-            allowedCountryCodes,
-            "data-state": "on"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
-          {
-            ref,
-            type: "tel",
-            ...props,
-            value: value.nationalNumber,
-            invalid,
-            errorText,
-            onChange: (e) => {
-              const target = e.target;
-              const strippedValue = target.value.replaceAll(/[^\d\s-]/g, "");
-              onChange({
-                countryCode: value.countryCode,
-                nationalNumber: strippedValue
-              });
-            },
-            variant,
-            "data-state": "on",
-            label
-          }
-        )
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(AttachedInputs, { display: "grid", gridTemplateColumns: "1fr 10fr", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CountryCodeSelect,
+      {
+        value: [value.countryCode],
+        onValueChange: handleCountryCodeChange,
+        height: "100%",
+        width: "6.25rem",
+        variant,
+        allowedCountryCodes,
+        "data-state": "on",
+        invalid
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Input,
+      {
+        ref,
+        type: "tel",
+        ...props,
+        value: value.nationalNumber,
+        invalid,
+        errorText,
+        onChange: (e) => {
+          const target = e.target;
+          const strippedValue = target.value.replaceAll(/[^\d\s-]/g, "");
+          onChange({
+            countryCode: value.countryCode,
+            nationalNumber: strippedValue
+          });
+        },
+        variant,
+        "data-state": "on",
+        label
+      }
+    )
+  ] });
 });
 PhoneNumberInput.displayName = "PhoneNumberInput";
 var texts16 = createTexts({
@@ -3632,9 +3639,9 @@ var Switch = React27.forwardRef(
             checked: props.checked,
             css: styles.root,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Label, { children: label }),
               /* @__PURE__ */ jsxRuntime.jsx(react.Switch.HiddenInput, { ref }),
-              /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Control, { css: styles.control, children: /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Thumb, {}) })
+              /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Control, { css: styles.control, children: /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Thumb, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx(react.Switch.Label, { children: label })
             ]
           }
         )
@@ -6698,13 +6705,13 @@ var alertServiceSlotRecipe = react.defineSlotRecipe({
       textWrap: "nowrap"
     },
     itemBody: {
-      paddingInline: 2,
+      marginX: "auto",
+      padding: "0 !important",
       paddingBottom: ["0.5", null, null, "1"],
       color: "text.inverted",
       "& > p": {
         gap: 2,
         width: "full",
-        justifyContent: "center",
         borderBottom: "1px dashed",
         borderColor: "outline.inverted",
         paddingBottom: "3",
@@ -9066,29 +9073,20 @@ var selectSlotRecipe = react.defineSlotRecipe({
       },
       floating: {
         control: {
-          backgroundColor: {
-            _light: "bg",
-            _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`
-          },
           outline: "1px solid",
           outlineColor: "floating.outline",
           _hover: {
-            outline: "1px solid",
-            outlineColor: "floating.outline.hover",
-            backgroundColor: {
-              _light: "floating.surface.hover",
-              _dark: `color-mix(in srgb, white 10%, var(--spor-colors-bg))`
-            }
+            outline: "2px solid",
+            outlineColor: "floating.outline"
           },
           _active: {
-            outline: "1px solid",
-            outlineColor: "floating.outline.active",
-            backgroundColor: "floating.surface.active"
+            backgroundColor: "brand.surface.active"
+          },
+          _disabled: {
+            pointerEvents: "none",
+            color: "text.disabled",
+            backgroundColor: "surface.disabled"
           }
-        },
-        selectContent: {
-          outline: "1px solid",
-          outlineColor: "floating.outline"
         }
       }
     },
@@ -9210,7 +9208,7 @@ var switchSlotRecipe = react.defineSlotRecipe({
   base: {
     root: {
       display: "inline-flex",
-      gap: "2.5",
+      gap: "2",
       alignItems: "center",
       position: "relative",
       verticalAlign: "middle",