@vygruppen/spor-react 13.0.1 → 13.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "13.0.1",
+  "version": "13.0.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,9 +46,9 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
+    "@vygruppen/spor-design-tokens": "4.3.3",
     "@vygruppen/spor-icon-react": "5.0.0",
-    "@vygruppen/spor-loader": "0.7.0",
-    "@vygruppen/spor-design-tokens": "4.3.3"
+    "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/alert/AlertIcon.tsx

@@ -12,9 +12,7 @@ import {
   SuccessFill24Icon,
   WarningFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import { VisuallyHidden } from "react-aria";
 
-import { createTexts, useTranslation } from "../i18n";
 import { AlertProps } from "./Alert";
 
 type AlertIconProps = {
@@ -32,11 +30,8 @@ export const AlertIcon = ({
 }: AlertIconProps & {
   ref?: React.Ref<SVGSVGElement>;
 }) => {
-  const { t } = useTranslation();
-
   return (
     <Box ref={ref}>
-      <VisuallyHidden>{t(texts[variant as keyof typeof texts])}</VisuallyHidden>
       {CustomAlertIcon ? (
         <CustomAlertIcon color={`alert.${variant}.icon`} />
       ) : (
@@ -90,54 +85,3 @@ export const BaseAlertIcon = ({
     }
   }
 };
-
-const texts = createTexts({
-  info: {
-    nb: "Informasjon",
-    nn: "Informasjon",
-    sv: "Information",
-    en: "Information",
-  },
-  success: {
-    nb: "Suksess",
-    nn: "Suksess",
-    sv: "Succé",
-    en: "Success",
-  },
-  important: {
-    nb: "Viktig",
-    nn: "Viktig",
-    sv: "Viktig",
-    en: "Important",
-  },
-  alt: {
-    nb: "Alternativ",
-    nn: "Alternativ",
-    sv: "Alternativ",
-    en: "Alternative",
-  },
-  error: {
-    nb: "Feil",
-    nn: "Feil",
-    sv: "Fel",
-    en: "Error",
-  },
-  "error-secondary": {
-    nb: "Feil",
-    nn: "Feil",
-    sv: "Fel",
-    en: "Error",
-  },
-  neutral: {
-    nb: "Nøytral",
-    nn: "Nøytral",
-    sv: "Neutral",
-    en: "Neutral",
-  },
-  service: {
-    nb: "Service",
-    nn: "Service",
-    sv: "Service",
-    en: "Service",
-  },
-});

package/src/input/Switch.tsx

@@ -59,6 +59,9 @@ export const Switch = ({
     errorText,
     helperText,
     css,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
     ...rest
   } = props;
   const recipe = useSlotRecipe({ key: "switch" });
@@ -80,7 +83,12 @@ export const Switch = ({
         checked={props.checked}
         css={styles.root}
       >
-        <ChakraSwitch.HiddenInput ref={ref} />
+        <ChakraSwitch.HiddenInput
+          ref={ref}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          aria-describedby={ariaDescribedby}
+        />
         <ChakraSwitch.Control css={styles.control}>
           <ChakraSwitch.Thumb />
         </ChakraSwitch.Control>

package/src/layout/Separator.tsx

@@ -11,5 +11,5 @@ export const Separator = ({
 }: ChakraSeparatorProps & {
   ref?: React.Ref<HTMLDivElement>;
 }) => {
-  return <ChakraSeparator {...props} ref={ref} data- />;
+  return <ChakraSeparator aria-hidden="true" {...props} ref={ref} data- />;
 };

package/src/theme/recipes/link.ts

@@ -15,6 +15,7 @@ export const linkRecipe = defineRecipe({
     paddingX: "0.5",
     whiteSpace: "normal",
     wordBreak: "break-word",
+    paddingInline: 0,
 
     _hover: {
       textDecoration: "none",

package/src/toast/toast.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import {
+  BoxProps,
   createToaster,
   Portal,
   Stack,
@@ -22,19 +23,21 @@ type ToastProps = {
   text: string;
   variant: Variant;
   id?: string;
-};
+} & Pick<BoxProps, "width">;
 
 export const createToast = ({
   text,
   variant,
   id,
   duration = 6000,
+  width = "sm",
 }: ToastProps) =>
   toaster.create({
     description: text,
     type: variant,
     id: id ?? crypto.randomUUID(),
     duration,
+    meta: { width },
   });
 
 export const Toaster = () => {
@@ -42,7 +45,7 @@ export const Toaster = () => {
     <Portal>
       <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
         {(toast) => (
-          <Toast.Root width={{ md: "sm" }} role="alert">
+          <Toast.Root width={{ md: toast.meta?.width }} role="alert">
             <AlertIcon variant={toast.type as Variant} />
             <Stack gap="1" flex="1" maxWidth="100%">
               <Toast.Description>{toast.description}</Toast.Description>