@vygruppen/spor-react 13.6.0 → 13.7.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.6.0",
+  "version": "13.7.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "5.1.0",
-    "@vygruppen/spor-icon-react": "5.0.2",
+    "@vygruppen/spor-design-tokens": "5.1.1",
+    "@vygruppen/spor-icon-react": "5.0.3",
     "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {

package/src/input/Autocomplete.tsx

@@ -50,6 +50,7 @@ export function Autocomplete({
   openOnClick = true,
   openOnFocus = true,
   ref,
+  size = "md",
   ...rest
 }: Props) {
   const { contains } = useFilter({ sensitivity: "base" });
@@ -114,6 +115,7 @@ export function Autocomplete({
               if (openOnFocus && filteredChildren.length > 0)
                 combobox.setOpen(true);
             }}
+            size={size}
           />
         </Combobox.Input>
         <Combobox.IndicatorGroup>

package/src/input/Field.tsx

@@ -121,23 +121,21 @@ export const Field = ({
         gap={gap}
       >
         {label && !floatingLabel && (
-          <Label asChild={labelAsChild} aria-hidden css={styles.label}>
+          <Label asChild={labelAsChild} css={styles.label}>
             {renderLabelWithIndicator(label, labelAsChild)}
           </Label>
         )}
 
-        {children}
-
         {label && floatingLabel && (
           <FloatingLabel
             data-float={shouldFloat ? true : undefined}
             asChild={labelAsChild}
-            aria-hidden
             css={styles.label}
           >
             {renderLabelWithIndicator(label, labelAsChild)}
           </FloatingLabel>
         )}
+        {children}
         {errorText && (
           <ChakraField.ErrorText aria-live="polite">
             {errorText}

package/src/layout/RadioCard.tsx

@@ -1,5 +1,6 @@
 "use client";
 import {
+  Flex,
   RadioCard as ChakraRadioCard,
   RecipeVariantProps,
   useSlotRecipe,
@@ -64,7 +65,7 @@ export const RadioCard = ({
       />
       <ChakraRadioCard.ItemControl id={itemControlId} aria-hidden>
         {showIndicator && <ChakraRadioCard.ItemIndicator />}
-        {children}
+        <Flex direction="column">{children}</Flex>
       </ChakraRadioCard.ItemControl>
     </ChakraRadioCard.Item>
   );

package/src/link/TextLink.tsx

@@ -7,6 +7,7 @@ import {
 import {
   LinkOutOutline18Icon,
   LinkOutOutline24Icon,
+  LinkOutOutline30Icon,
 } from "@vygruppen/spor-icon-react";
 import React, {
   cloneElement,
@@ -39,17 +40,32 @@ const ExternalIcon = ({
 }: {
   label: string;
   size: LinkProps["size"];
-}) => (
-  <>
-    {size === "lg" || size === "md" ? (
-      <LinkOutOutline24Icon aria-hidden display="inline" />
-    ) : (
-      <LinkOutOutline18Icon aria-hidden display="inline" />
-    )}
-    {/* Visually hidden text for screen readers */}
-    <VisuallyHidden>{label}</VisuallyHidden>
-  </>
-);
+}) => {
+  const getIcon = () => {
+    switch (size) {
+      case "lg": {
+        return <LinkOutOutline30Icon aria-hidden display="inline" />;
+      }
+      case "md": {
+        return <LinkOutOutline24Icon aria-hidden display="inline" />;
+      }
+      case "sm": {
+        return <LinkOutOutline18Icon aria-hidden display="inline" />;
+      }
+      default: {
+        return <LinkOutOutline24Icon aria-hidden display="inline" />;
+      }
+    }
+  };
+  return (
+    <span style={{ whiteSpace: "nowrap" }}>
+      {"\u2060"}
+      {getIcon()}
+      {/* Visually hidden text for screen readers */}
+      <VisuallyHidden>{label}</VisuallyHidden>
+    </span>
+  );
+};
 
 export const TextLink = ({
   ref,

package/src/theme/recipes/badge.ts

@@ -7,57 +7,69 @@ export const badgeRecipie = defineRecipe({
     justifyContent: "center",
     height: "fit-content",
     gap: "0.5",
+    outline: "1px solid",
+    outlineOffset: "-1px",
   },
   variants: {
     colorPalette: {
       neutral: {
         backgroundColor: "surface",
         color: "text",
+        outlineColor: "outline",
         "& svg": { color: "icon" },
       },
       grey: {
         backgroundColor: "surface.neutral",
         color: "text.neutral",
+        outlineColor: "outline.neutral",
         "& svg": { color: "icon.neutral" },
       },
       green: {
         backgroundColor: "surface.success",
         color: "text.success",
+        outlineColor: "outline.success",
         "& svg": { color: "icon.success" },
       },
       blue: {
         backgroundColor: "surface.info",
         color: "text.info",
+        outlineColor: "outline.info",
         "& svg": { color: "icon.info" },
       },
       cream: {
         backgroundColor: "surface.warning",
         color: "text.warning",
+        outlineColor: "outline.warning",
         "& svg": { color: "icon.warning" },
       },
       yellow: {
         backgroundColor: "surface.notice",
         color: "text.notice",
+        outlineColor: "outline.notice",
         "& svg": { color: "icon.notice" },
       },
       orange: {
         backgroundColor: "surface.caution",
         color: "text.caution",
+        outlineColor: "outline.caution",
         "& svg": { color: "icon.caution" },
       },
       red: {
         backgroundColor: "surface.critical",
         color: "text.critical",
+        outlineColor: "outline.critical",
         "& svg": { color: "icon.critical" },
       },
       brightRed: {
         backgroundColor: { _light: "brightRed", _dark: "brightRed" },
         color: { _light: "pink", _dark: "pink" },
+        outlineColor: "outline.error",
         "& svg": { color: { _light: "pink", _dark: "pink" } },
       },
       disabled: {
         backgroundColor: "surface.disabled",
         color: "text.disabled",
+        outlineColor: "outline.disabled",
         "& svg": { color: "icon.disabled" },
       },
     },
@@ -100,6 +112,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
         color: { _light: "icyBlue", _dark: "royal" },
+        outlineColor: { _light: "ocean", _dark: "cloudy" },
         "& svg": { color: { _light: "royal", _dark: "icyBlue" } },
       },
     },
@@ -109,6 +122,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
         color: { _light: "mint", _dark: "jungle" },
+        outlineColor: { _light: "greenHaze", _dark: "coralGreen" },
         "& svg": { color: { _light: "mint", _dark: "jungle" } },
       },
     },
@@ -118,6 +132,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "carbon", _dark: "platinum" },
         color: { _light: "white", _dark: "darkGrey" },
+        outlineColor: { _light: "iron", _dark: "silver" },
         "& svg": { color: { _light: "white", _dark: "darkGrey" } },
       },
     },
@@ -128,6 +143,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "coffee", _dark: "blonde" },
         color: { _light: "cornsilk", _dark: "coffee" },
+        outlineColor: { _light: "bronze", _dark: "banana" },
         "& svg": { color: { _light: "cornsilk", _dark: "coffee" } },
       },
     },
@@ -137,6 +153,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "bronze", _dark: "banana" },
         color: { _light: "cornsilk", _dark: "coffee" },
+        outlineColor: { _light: "golden", _dark: "banana" },
         "& svg": { color: { _light: "cornsilk", _dark: "coffee" } },
       },
     },
@@ -146,6 +163,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "wood", _dark: "champagne" },
         color: { _light: "bisque", _dark: "wood" },
+        outlineColor: { _light: "russet", _dark: "saffron" },
         "& svg": { color: { _light: "bisque", _dark: "wood" } },
       },
     },
@@ -155,6 +173,7 @@ export const badgeRecipie = defineRecipe({
       css: {
         backgroundColor: { _light: "burgundy", _dark: "lightRed" },
         color: { _light: "pink", _dark: "maroon" },
+        outlineColor: { _light: "crimson", _dark: "salmon" },
         "& svg": { color: { _light: "pink", _dark: "maroon" } },
       },
     },
@@ -164,6 +183,7 @@ export const badgeRecipie = defineRecipe({
       inverted: true,
       css: {
         backgroundColor: { _light: "ink", _dark: "white" },
+        outlineColor: { _light: "whiteAlpha.400", _dark: "blackAlpha.400" },
         color: { _light: "white", _dark: "darkGrey" },
         "& svg": { color: { _light: "white", _dark: "darkGrey" } },
       },

package/src/theme/recipes/input.ts

@@ -56,6 +56,10 @@ export const inputRecipe = defineRecipe({
           outline: "2px solid",
           outlineColor: "outline.focus",
         },
+        "&:-webkit-autofill, &:-webkit-autofill:focus": {
+          boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset",
+          WebkitTextFillColor: "var(--spor-colors-text)",
+        },
       },
       floating: {
         boxShadow: "sm",
@@ -72,11 +76,14 @@ export const inputRecipe = defineRecipe({
           outlineColor: "outline.neutral",
           backgroundColor: "surface.floating.active",
         },
-
         focus: {
           outline: "1px solid",
           outlineColor: "outline.focus",
         },
+        "&:-webkit-autofill, &:-webkit-autofill:focus": {
+          boxShadow: "0 0 0 1000px var(--spor-colors-surface-info-hover) inset",
+          WebkitTextFillColor: "var(--spor-colors-text)",
+        },
       },
     },
     size: {

package/src/theme/recipes/separator.ts

@@ -12,13 +12,14 @@ export const separatorRecipe = defineRecipe({
         borderStyle: "solid",
       },
       dashed: {
+        "--dash-color": "var(--spor-colors-outline)",
         borderImageSlice: 1,
         borderImageSource: `repeating-linear-gradient(
             var(--gradient-direction),
-            var(--spor-colors-outline-disabled) 0,
-            var(--spor-colors-outline-disabled) var(--dash-size),
+            var(--dash-color) 0,
+            var(--dash-color) var(--dash-size),
             transparent var(--dash-size),
-            transparent calc(var(--dash-size) + var(--dash-gap))
+            transparent calc(var(--dash-size) + var(--dash-gap))         
           )`,
       },
     },

package/src/theme/slot-recipes/input-chip.ts

@@ -76,7 +76,7 @@ export const inputChipSlotRecipe = defineSlotRecipe({
         root: {
           fontSize: "desktop.xs",
           paddingX: "1.5",
-          paddingY: "0",
+          height: 5,
           fontWeight: "normal",
           borderRadius: "xs",
         },
@@ -85,17 +85,16 @@ export const inputChipSlotRecipe = defineSlotRecipe({
         root: {
           fontSize: "desktop.sm",
           paddingX: "2",
-          paddingY: "0.5",
+          height: 6,
           fontWeight: "bold",
           borderRadius: "9px",
         },
       },
       md: {
         root: {
-          padding: 5,
           fontSize: "desktop.md",
           paddingX: "2",
-          paddingY: "1",
+          height: 7,
           fontWeight: "bold",
           borderRadius: "sm",
         },
@@ -104,7 +103,7 @@ export const inputChipSlotRecipe = defineSlotRecipe({
         root: {
           fontSize: "desktop.md",
           paddingX: "2",
-          paddingY: "3",
+          height: "8",
           fontWeight: "bold",
           borderRadius: "md",
         },

package/src/theme/slot-recipes/select.ts

@@ -166,6 +166,11 @@ export const selectSlotRecipe = defineSlotRecipe({
         outlineColor: "outline.error",
       },
     },
+    valueText: {
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+    },
     itemText: {
       flex: "1",
       alignItems: "center",

package/src/theme/slot-recipes/toast.ts

@@ -16,6 +16,7 @@ export const toastSlotRecipe = defineSlotRecipe({
       translate: "var(--x) var(--y)",
       opacity: "var(--opacity)",
       willChange: "translate, opacity, scale",
+      outline: "1px solid",
 
       borderRadius: "sm",
       transition:
@@ -25,18 +26,54 @@ export const toastSlotRecipe = defineSlotRecipe({
         transition: "translate 400ms, scale 400ms, opacity 200ms",
         transitionTimingFunction: "cubic-bezier(0.06, 0.71, 0.55, 1)",
       },
-      boxShadow: "xl",
+      boxShadow: "sm",
 
       color: "text",
       "&[data-type=success]": {
         backgroundColor: "surface.success",
+        outlineColor: "outline.success",
       },
       "&[data-type=error]": {
         backgroundColor: "surface.critical",
+        outlineColor: "outline.critical",
       },
 
       "&[data-type=info]": {
         backgroundColor: "surface.info",
+        outlineColor: "outline.info",
+      },
+      "&[data-inverted][data-type=success]": {
+        backgroundColor: { _light: "darkTeal", _dark: "seaMist" },
+        color: { _light: "mint", _dark: "jungle" },
+        outlineColor: { _light: "greenHaze", _dark: "coralGreen" },
+        "& path:first-of-type": {
+          fill: { _light: "mint", _dark: "jungle" },
+        },
+        "& path:not(:first-of-type)": {
+          fill: { _light: "darkTeal", _dark: "seaMist" },
+        },
+      },
+      "&[data-inverted][data-type=error]": {
+        backgroundColor: { _light: "burgundy", _dark: "lightRed" },
+        color: { _light: "pink", _dark: "maroon" },
+        outlineColor: { _light: "crimson", _dark: "salmon" },
+        "& path:first-of-type": {
+          fill: { _light: "pink", _dark: "maroon" },
+        },
+        "& path:not(:first-of-type)": {
+          fill: { _light: "burgundy", _dark: "lightRed" },
+        },
+      },
+      "&[data-inverted][data-type=info]": {
+        backgroundColor: { _light: "darkBlue", _dark: "lightBlue" },
+        color: { _light: "icyBlue", _dark: "royal" },
+        outlineColor: { _light: "ocean", _dark: "cloudy" },
+        "& path:first-of-type": {
+          fill: { _light: "icyBlue", _dark: "navy" },
+        },
+        "& path:not(:first-of-type)": {
+          fill: { _light: "darkBlue", _dark: "lightBlue" },
+        },
       },
     },
 

package/src/toast/toast.tsx

@@ -31,6 +31,7 @@ type ToastProps = {
   id?: string;
   action?: ToastAction;
   closable?: boolean;
+  inverted?: boolean;
 } & Pick<BoxProps, "width">;
 
 export const createToast = ({
@@ -41,6 +42,7 @@ export const createToast = ({
   width = "sm",
   action,
   closable = false,
+  inverted = false,
 }: ToastProps) =>
   toaster.create({
     description: text,
@@ -48,7 +50,7 @@ export const createToast = ({
     id: id ?? crypto.randomUUID(),
     duration,
     action,
-    meta: { width },
+    meta: { width, inverted },
     closable: closable,
   });
 
@@ -59,9 +61,7 @@ export const Toaster = () => {
         {(toast) => (
           <Toast.Root
             width={{ md: toast.meta?.width }}
-            border="sm"
-            borderColor={`outline.${toast.type}`}
-            boxShadow="sm"
+            data-inverted={toast.meta?.inverted ? "" : undefined}
             role="alert"
           >
             <AlertIcon variant={toast.type as Variant} />
@@ -69,8 +69,12 @@ export const Toaster = () => {
               <Toast.Description>{toast.description}</Toast.Description>
             </Stack>
             {toast.action && (
-              <Toast.ActionTrigger onClick={toast.action.onClick}>
-                <Button variant="ghost" size="xs">
+              <Toast.ActionTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="xs"
+                  onClick={toast.action.onClick}
+                >
                   {toast.action.label}
                 </Button>
               </Toast.ActionTrigger>