@vygruppen/spor-react 13.4.5 → 13.5.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@13.4.5 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.5.0 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
-ESM dist/index.mjs           351.14 KB
-ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       747.03 KB
-ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 2348ms
-CJS dist/index.cjs           375.72 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       747.03 KB
+CJS dist/index.cjs           377.88 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2348ms
-DTS ⚡️ Build success in 19728ms
+CJS dist/index.cjs.map       751.12 KB
+CJS ⚡️ Build success in 2931ms
+ESM dist/index.mjs           353.23 KB
+ESM dist/icons/index.mjs     110.00 B
+ESM dist/index.mjs.map       751.12 KB
+ESM dist/icons/index.mjs.map 157.00 B
+ESM ⚡️ Build success in 2932ms
+DTS ⚡️ Build success in 21320ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        154.14 KB
+DTS dist/index.d.ts        154.92 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       154.14 KB
+DTS dist/index.d.cts       154.92 KB

package/.turbo/turbo-postinstall.log

@@ -1,11 +1,12 @@
 
-> @vygruppen/spor-react@13.4.5 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.5.0 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-◇ injected env (0) from .env // tip: ⌘ override existing { override: true }
+◇ injected env (0) from .env // tip: ◈ encrypted .env [www.dotenvx.com]
 ┌  Chakra CLI ⚡️
 [?25l│
-◇  ✅ Generated conditions typings
+◒  Generating conditions types...
+◇  ✅ Generated conditions typings
 [?25h[?25l│
 ◒  Generating recipe types...
 ◇  ✅ Generated recipe typings

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @vygruppen/spor-react
 
+## 13.5.0
+
+### Minor Changes
+
+- 44c4594: Date and time picker: Add `size` prop with `"sm"` and `"md"` variants (defaults to `"md"`)
+- bc0f4b4: RadioCards: Add "showIndicator" as an optional prop. If true, show a radiobutton-indicator on the left side of the content.
+- 3ca4098: Toast: Add action and closable props to Toast component for enhanced functionality
+
+## 13.4.6
+
+### Patch Changes
+
+- 4500a7b: Select: Fix border radius and spacing when dropdown opens above the trigger
+- Updated dependencies [cc9028e]
+- Updated dependencies [5ee8079]
+  - @vygruppen/spor-design-tokens@5.0.6
+  - @vygruppen/spor-icon-react@5.0.2
+
 ## 13.4.5
 
 ### Patch Changes

package/dist/index.cjs

@@ -1572,6 +1572,7 @@ var PressableCard = ({
 };
 var RadioCard = ({
   ref,
+  showIndicator = false,
   ...props
 }) => {
   const { inputProps, children } = props;
@@ -1587,7 +1588,10 @@ var RadioCard = ({
         ...inputProps
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(react.RadioCard.ItemControl, { id: itemControlId, "aria-hidden": true, children })
+    /* @__PURE__ */ jsxRuntime.jsxs(react.RadioCard.ItemControl, { id: itemControlId, "aria-hidden": true, children: [
+      showIndicator && /* @__PURE__ */ jsxRuntime.jsx(react.RadioCard.ItemIndicator, {}),
+      children
+    ] })
   ] });
 };
 var RadioCardGroup = ({
@@ -2505,7 +2509,6 @@ var DateTimeSegment = ({
       textAlign: "center",
       outline: "none",
       borderRadius: "xs",
-      fontSize: ["mobile.sm", "desktop.sm"],
       css: styles.dateTimeSegment,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
@@ -2628,6 +2631,7 @@ var StyledField = function StyledField2({
     isDisabled,
     isActive,
     overrideBorderColor,
+    size,
     ...otherProps
   } = props;
   const { invalid } = react.useFieldContext() ?? {
@@ -2635,7 +2639,7 @@ var StyledField = function StyledField2({
   const recipe = react.useSlotRecipe({
     key: "datePicker"
   });
-  const styles = recipe({ variant });
+  const styles = recipe({ variant, size });
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Box,
     {
@@ -2648,7 +2652,6 @@ var StyledField = function StyledField2({
       ref,
       "aria-invalid": invalid,
       "aria-disabled": isDisabled,
-      fontSize: ["mobile.md", "desktop.md"],
       children
     }
   );
@@ -2656,6 +2659,7 @@ var StyledField = function StyledField2({
 var DatePicker = ({
   ref: externalRef,
   variant,
+  size,
   errorText,
   minHeight,
   showYearNavigation,
@@ -2720,12 +2724,13 @@ var DatePicker = ({
             invalid,
             helperText,
             required: props.required,
+            size,
             children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverAnchor, { children: /* @__PURE__ */ jsxRuntime.jsxs(
               StyledField,
               {
                 variant,
+                size,
                 onClick: onFieldClick,
-                paddingX: 3,
                 minHeight,
                 isDisabled: props.isDisabled,
                 isActive: props.isActive,
@@ -2734,8 +2739,7 @@ var DatePicker = ({
                   props.noCalendar ? /* @__PURE__ */ jsxRuntime.jsx(react.Box, { pr: 3, pl: 0.5, mr: 0.5, children: /* @__PURE__ */ jsxRuntime.jsx(spor_icon_react_star.CalendarOutline24Icon, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                     CalendarTriggerButton,
                     {
-                      paddingLeft: 1,
-                      paddingRight: 1,
+                      marginLeft: 1,
                       variant,
                       ref,
                       ...buttonProps
@@ -2791,6 +2795,7 @@ function RangeCalendar(props) {
 }
 function DateRangePicker({
   variant = "core",
+  size,
   minHeight,
   startName,
   endName,
@@ -2850,6 +2855,7 @@ function DateRangePicker({
               alignItems: "center",
               paddingX: 3,
               variant,
+              size,
               onClick: onFieldClick,
               minHeight,
               children: [
@@ -2914,8 +2920,6 @@ var TimeField = ({ state, ...props }) => {
         color: "text.subtle",
         top: 0,
         cursor: "text",
-        left: "50%",
-        transform: "translateX(-50%)",
         position: "absolute",
         paddingTop: "2px",
         whiteSpace: "nowrap",
@@ -3051,10 +3055,8 @@ var TimePicker = ({
     StyledField,
     {
       width: "fit-content",
-      paddingX: 2,
       alignItems: "center",
       justifyContent: "space-between",
-      gap: 2,
       opacity: isDisabled ? 0.5 : 1,
       pointerEvents: isDisabled ? "none" : "auto",
       "aria-disabled": isDisabled,
@@ -6694,13 +6696,17 @@ var createToast = ({
   variant,
   id,
   duration = 6e3,
-  width = "sm"
+  width = "sm",
+  action,
+  closable = false
 }) => toaster.create({
   description: text,
   type: variant,
   id: id ?? crypto.randomUUID(),
   duration,
-  meta: { width }
+  action,
+  meta: { width },
+  closable
 });
 var Toaster = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Toaster, { toaster, insetInline: { mdDown: "4" }, children: (toast) => {
@@ -6715,7 +6721,9 @@ var Toaster = () => {
         role: "alert",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { variant: toast.type }),
-          /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(react.Toast.Description, { children: toast.description }) })
+          /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(react.Toast.Description, { children: toast.description }) }),
+          toast.action && /* @__PURE__ */ jsxRuntime.jsx(react.Toast.ActionTrigger, { onClick: toast.action.onClick, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "xs", children: toast.action.label }) }),
+          toast.closable && /* @__PURE__ */ jsxRuntime.jsx(react.Toast.CloseTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { size: "xs" }) })
         ]
       }
     );
@@ -7964,7 +7972,8 @@ var radioCardAnatomy = anatomy.createAnatomy("radio-card").parts(
   "itemText",
   "itemDescription",
   "itemContent",
-  "itemControl"
+  "itemControl",
+  "itemIndicator"
 );
 var radioAnatomy = anatomy.createAnatomy("radio").parts(
   "root",
@@ -8989,6 +8998,8 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
       display: "flex",
       flex: 1,
       paddingY: 0.5,
+      paddingX: 2,
+      gap: 1.5,
       alignItems: "center",
       _hover: {
         zIndex: "docked"
@@ -9204,10 +9215,25 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
           }
         }
       }
+    },
+    size: {
+      sm: {
+        wrapper: {
+          fontSize: ["mobile.xs", "desktop.xs"],
+          paddingX: 1,
+          gap: 1
+        }
+      },
+      md: {
+        wrapper: {
+          fontSize: ["mobile.sm", "desktop.sm"]
+        }
+      }
     }
   },
   defaultVariants: {
-    variant: "core"
+    variant: "core",
+    size: "md"
   }
 });
 var dialogSlotRecipe = react.defineSlotRecipe({
@@ -11245,6 +11271,54 @@ var radioCardSlotRecipe = react.defineSlotRecipe({
       _disabled: { opacity: 0.4 },
       fontWeight: "bold",
       fontSize: "inherit"
+    },
+    itemControl: {
+      display: "flex",
+      alignItems: "flex-start",
+      justifyContent: "flex-start"
+    },
+    itemIndicator: {
+      display: "inline-flex",
+      flexShrink: 0,
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: "2px",
+      borderColor: "outline.core",
+      borderRadius: "xl",
+      width: 3,
+      height: 3,
+      marginRight: 2,
+      marginTop: 0.5,
+      _checked: {
+        borderColor: "surface.brand"
+      },
+      _hover: {
+        borderColor: "surface.brand.hover",
+        "& .dot": {
+          backgroundColor: "surface.brand.hover"
+        }
+      },
+      _disabled: {
+        pointerEvents: "none",
+        backgroundColor: "surface.disabled",
+        borderColor: "outline.disabled",
+        "& .dot": {
+          backgroundColor: "outline.disabled"
+        }
+      },
+      _focusVisible: {
+        outlineWidth: "2px",
+        outlineColor: "outline.focus",
+        outlineStyle: "solid",
+        outlineOffset: "1px"
+      },
+      "& .dot": {
+        height: "full",
+        width: "full",
+        borderRadius: "xl",
+        backgroundColor: "surface.brand",
+        scale: "0.5"
+      }
     }
   },
   variants: {
@@ -11387,6 +11461,12 @@ var selectSlotRecipe = react.defineSlotRecipe({
       listStyle: "none",
       borderBottomRadius: "sm",
       marginTop: -1,
+      "&[data-placement^='top']": {
+        borderTopRadius: "sm",
+        borderBottomRadius: 0,
+        marginTop: 0,
+        marginBottom: -1
+      },
       _open: {
         animationStyle: "slide-fade-in",
         animationDuration: "fast",
@@ -11455,6 +11535,10 @@ var selectSlotRecipe = react.defineSlotRecipe({
       _open: {
         borderBottomRadius: 0
       },
+      "&:has([data-placement^='top'][data-state='open'])": {
+        borderTopRadius: 0,
+        borderBottomRadius: "sm"
+      },
       _invalid: {
         outline: "2px solid",
         outlineColor: "outline.error"