@vygruppen/spor-react 13.4.6 → 13.6.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@13.4.6 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.6.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.42 KB
+ESM dist/index.mjs           353.61 KB
 ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       747.49 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 2649ms
-CJS dist/index.cjs           376.00 KB
+ESM dist/index.mjs.map       752.22 KB
+ESM ⚡️ Build success in 2851ms
+CJS dist/index.cjs           378.29 KB
 CJS dist/icons/index.cjs     381.00 B
 CJS dist/icons/index.cjs.map 157.00 B
-CJS dist/index.cjs.map       747.49 KB
-CJS ⚡️ Build success in 2649ms
-DTS ⚡️ Build success in 20906ms
+CJS dist/index.cjs.map       752.22 KB
+CJS ⚡️ Build success in 2850ms
+DTS ⚡️ Build success in 21728ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        154.14 KB
+DTS dist/index.d.ts        155.16 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       154.14 KB
+DTS dist/index.d.cts       155.16 KB

package/.turbo/turbo-postinstall.log

@@ -1,8 +1,8 @@
 
-> @vygruppen/spor-react@13.4.6 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@13.6.0 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
-◇ injected env (0) from .env // tip: ⌘ suppress logs { quiet: true }
+◇ injected env (0) from .env // tip: ◈ secrets for agents [www.dotenvx.com]
 ┌  Chakra CLI ⚡️
 [?25l│
 ◒  Generating conditions types...

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @vygruppen/spor-react
 
+## 13.6.0
+
+### Minor Changes
+
+- ce5b9e0: Add new VyTeknologi brand theme and deprecate VyUtvikling
+  - New `Brand.VyTeknologi` theme, usable with `<SporProvider theme={themes[Brand.VyTeknologi]}>`
+  - Three new color palettes with 12 steps each: `teal`, `pink` and `violet`, with named aliases (e.g. `grape` → `violet.900`, `moss` → `teal.700`, `jam` → `pink.800`)
+  - The existing `pink` alias (→ `red.50`) still resolves as before; the new range is available as `pink.50`–`pink.1100`
+  - `Brand.VyUtvikling` and `vyUtviklingColors` are marked as `@deprecated` — migrate to `Brand.VyTeknologi`
+  - The MCP server's `get_spor_tokens` tool now accepts `vyTeknologi` as a theme
+
+### Patch Changes
+
+- Updated dependencies [ce5b9e0]
+  - @vygruppen/spor-design-tokens@5.1.0
+
+## 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

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,
@@ -6682,6 +6684,7 @@ var fontFaces = `
 var Brand = /* @__PURE__ */ ((Brand2) => {
   Brand2["VyDigital"] = "VyDigital";
   Brand2["VyUtvikling"] = "VyUtvikling";
+  Brand2["VyTeknologi"] = "VyTeknologi";
   Brand2["CargoNet"] = "CargoNet";
   return Brand2;
 })(Brand || {});
@@ -6694,13 +6697,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 +6722,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" }) })
         ]
       }
     );
@@ -7768,6 +7777,9 @@ var vyDigitalColors = react.defineSemanticTokens.colors({
 var vyUtviklingColors = react.defineSemanticTokens.colors({
   ...tokens4__default.default.color["vy-utvikling"].color.vyUtvikling
 });
+var vyTeknologiColors = react.defineSemanticTokens.colors({
+  ...tokens4__default.default.color["vy-teknologi"].color.vyTeknologi
+});
 var cargonetColors = react.defineSemanticTokens.colors({
   ...tokens4__default.default.color["cargonet"].color.cargonet
 });
@@ -7814,6 +7826,10 @@ var semanticTokens = {
     ...baseSemanticTokens,
     colors: vyUtviklingColors
   },
+  ["VyTeknologi" /* VyTeknologi */]: {
+    ...baseSemanticTokens,
+    colors: vyTeknologiColors
+  },
   ["CargoNet" /* CargoNet */]: {
     ...baseSemanticTokens,
     colors: cargonetColors
@@ -7964,7 +7980,8 @@ var radioCardAnatomy = anatomy.createAnatomy("radio-card").parts(
   "itemText",
   "itemDescription",
   "itemContent",
-  "itemControl"
+  "itemControl",
+  "itemIndicator"
 );
 var radioAnatomy = anatomy.createAnatomy("radio").parts(
   "root",
@@ -8989,6 +9006,8 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
       display: "flex",
       flex: 1,
       paddingY: 0.5,
+      paddingX: 2,
+      gap: 1.5,
       alignItems: "center",
       _hover: {
         zIndex: "docked"
@@ -9204,10 +9223,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 +11279,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: {
@@ -13100,6 +13182,10 @@ var themes = {
   ["VyUtvikling" /* VyUtvikling */]: react.createSystem(
     react.defaultBaseConfig,
     generateTheme("VyUtvikling" /* VyUtvikling */)
+  ),
+  ["VyTeknologi" /* VyTeknologi */]: react.createSystem(
+    react.defaultBaseConfig,
+    generateTheme("VyTeknologi" /* VyTeknologi */)
   )
 };
 var system = themes["VyDigital" /* VyDigital */];