@vygruppen/spor-react 11.3.10 → 12.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "11.3.10",
+  "version": "12.0.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -13,29 +13,34 @@
     "directory": "packages/spor-react"
   },
   "dependencies": {
+    "@chakra-ui/react": "^3.9.0",
+    "@ark-ui/react": "^4.9.2",
     "@chakra-ui/anatomy": "^2.3.4",
-    "@chakra-ui/react": "^2.8.2",
     "@chakra-ui/react-use-size": "^2.1.0",
     "@chakra-ui/styled-system": "^2.12.0",
     "@chakra-ui/system": "^2.6.2",
     "@chakra-ui/theme": "^3.4.6",
     "@chakra-ui/theme-tools": "^2.0.12",
     "@chakra-ui/utils": "^2.2.2",
-    "@emotion/react": "^11.11.4",
+    "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.11.5",
-    "@internationalized/date": "^3.5.4",
+    "@internationalized/date": "^3.6.0",
     "awesome-phonenumber": "^5.11.0",
     "deepmerge": "^4.3.1",
-    "framer-motion": "^8.5.5",
-    "lottie-react": "^2.4.0",
+    "framer-motion": "^11.11.17",
+    "lottie-react": "^2.4.1",
+    "next-themes": "^0.4.4",
     "react-aria": "^3.33.1",
+    "react-icons": "^5.4.0",
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
-    "@vygruppen/spor-design-tokens": "3.10.0",
-    "@vygruppen/spor-icon-react": "3.14.0",
-    "@vygruppen/spor-loader": "0.5.0"
+    "usehooks-ts": "^3.1.0",
+    "@vygruppen/spor-design-tokens": "4.0.0",
+    "@vygruppen/spor-loader": "0.6.0",
+    "@vygruppen/spor-icon-react": "4.0.0"
   },
   "devDependencies": {
+    "@chakra-ui/cli": "^3.8.0",
     "@react-types/datepicker": "^3.10.0",
     "@react-types/shared": "^3.27.0",
     "@testing-library/jest-dom": "^6.4.5",
@@ -46,18 +51,21 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tsup": "^7.2.0",
+    "typescript": "^5.7.3",
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "typescript": "^5.7.3",
-    "@vygruppen/tsconfig": "0.0.0"
+    "@vygruppen/tsconfig": "0.1.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch"
+    "build": "pnpm typegen && tsup",
+    "dev": "tsup --watch",
+    "typegen": "npx @chakra-ui/cli typegen src/theme/index.ts",
+    "typegen:watch": "npx @chakra-ui/cli typegen src/theme/index.ts --watch",
+    "typegen:strict": "npx @chakra-ui/cli typegen /src/theme/index.ts --strict"
   }
 }

package/src/accordion/Accordion.tsx

@@ -1,64 +1,115 @@
+"use client";
+
 import {
+  Box,
   Accordion as ChakraAccordion,
-  AccordionProps as ChakraAccordionProps,
-  forwardRef,
-} from "@chakra-ui/react";
-import React from "react";
-import { Stack, StackProps } from "../layout";
-export {
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-} from "@chakra-ui/react";
-export type {
-  AccordionButtonProps,
-  AccordionItemProps,
-  AccordionPanelProps,
+  HStack,
+  Stack,
+  useSlotRecipe,
 } from "@chakra-ui/react";
+import { DropdownDownFill24Icon } from "@vygruppen/spor-icon-react";
+import React, { forwardRef } from "react";
+import {
+  AccordionProps,
+  AccordionItemTriggerProps,
+  AccordionItemContentProps,
+} from "./types";
+import { warnAboutMismatchingIcon } from "./helpers";
 
-export type AccordionProps = Omit<ChakraAccordionProps, "variant" | "size"> & {
-  /**
-   * The display variant of the accordion items.
-   *
-   * - `ghost` renders a pretty unstyled expandable list without any borders
-   * - `base` renders an outlined version
-   * - `floating` renders a version with a drop shadow
-   */
-  variant?: "ghost" | "base" | "floating";
-  /** The margin between accordion items */
-  spacing?: StackProps["spacing"];
-};
 /*
- * Wraps a set of ExpandableItem or AccordionItem components.
+ * Wraps a set of AccordionItem or AccordionItem components.
  *
  * ```tsx
  * <Accordion variant="ghost">
- *   <ExpandableItem title="Is Spor easy?" headingLevel="h3">
- *     Yes
- *   </ExpandableItem>
- *   <ExpandableItem title="Is Spor lovable?" headingLevel="h3">
- *     🥰
- *   </ExpandableItem>
+ *   <AccordionItem>
+ *      <AccordionItemTrigger>Is Spor easy?</AccordionItemTrigger>
+ *      <AccordionItemContent>Yes</AccordionItemContent>
+ *   </AccordionItem>
+ *   <AccordionItem>
+ *      <AccordionItemTrigger>Is Spor lovable?</AccordionItemTrigger>
+ *      <AccordionItemContent>Yes</AccordionItemContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * If you need to have a default open item, you can use the `defaultValue` prop.
+ *
+ * ```tsx
+ * <Accordion defaultValue={["a"]}>
+ *  <AccordionItem value="a">
+ *    <AccordionItemTrigger>Is Spor easy?</AccordionItemTrigger>
+ *    <AccordionItemContent>Yes</AccordionItemContent>
+ *  </AccordionItem>
+ *  <AccordionItem value="b">
+ *    <AccordionItemTrigger>Is Spor lovable?</AccordionItemTrigger>
+ *    <AccordionItemContent>Yes</AccordionItemContent>
+ *  </AccordionItem>
  * </Accordion>
  * ```
  *
  * If you only have one expandable item, you can use the `<Expandable />` component instead.
+ *
+ * @see https://spor.vy.no/components/accordion
  */
-export const Accordion = forwardRef<AccordionProps, "div">(
-  ({ children, spacing = 2, ...props }, ref) => {
-    const defaultIndex =
-      typeof props.defaultIndex === "number" && props.allowMultiple
-        ? [props.defaultIndex]
-        : props.defaultIndex;
+
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+  (props, ref) => {
+    const { variant = "core", children, gap = 2, ...rest } = props;
+    const recipe = useSlotRecipe({ key: "accordion" });
+    const styles = recipe({ variant });
     return (
-      <ChakraAccordion
-        {...props}
+      <ChakraAccordion.Root
+        {...rest}
         ref={ref}
-        defaultIndex={defaultIndex as number[] | undefined}
+        css={styles.root}
+        variant={variant}
       >
-        <Stack spacing={spacing}>{children}</Stack>
-      </ChakraAccordion>
+        <Stack gap={gap}>{children}</Stack>
+      </ChakraAccordion.Root>
     );
   },
 );
+
+export const AccordionItemTrigger = forwardRef<
+  HTMLButtonElement,
+  AccordionItemTriggerProps
+>(function AccordionItemTrigger(props, ref) {
+  const { startElement, children, headingLevel, ...rest } = props;
+  warnAboutMismatchingIcon({ icon: startElement });
+  const recipe = useSlotRecipe({ key: "accordion" });
+  const styles = recipe();
+  return (
+    <Box as={headingLevel}>
+      <ChakraAccordion.ItemTrigger {...rest} ref={ref} css={styles.itemTrigger}>
+        <HStack flex="1" gap={1} textAlign="start" width="full">
+          {startElement && startElement}
+          {children}
+        </HStack>
+
+        <ChakraAccordion.ItemIndicator>
+          <DropdownDownFill24Icon />
+        </ChakraAccordion.ItemIndicator>
+      </ChakraAccordion.ItemTrigger>
+    </Box>
+  );
+});
+
+export const AccordionItemContent = forwardRef<
+  HTMLDivElement,
+  AccordionItemContentProps
+>(function AccordionItemContent(props, ref) {
+  const { children } = props;
+
+  const recipe = useSlotRecipe({ key: "accordion" });
+  const styles = recipe();
+
+  return (
+    <ChakraAccordion.ItemContent css={styles.itemContent}>
+      <ChakraAccordion.ItemBody {...props} ref={ref}>
+        {children}
+      </ChakraAccordion.ItemBody>
+    </ChakraAccordion.ItemContent>
+  );
+});
+
+export const AccordionItem = ChakraAccordion.Item;

package/src/accordion/Expandable.tsx

@@ -1,40 +1,15 @@
+"use client";
+
+import React, { forwardRef } from "react";
 import {
-  AccordionButton,
-  AccordionIcon,
+  Accordion,
   AccordionItem,
-  AccordionItemProps,
-  AccordionPanel,
-  Box,
-  Flex,
-} from "@chakra-ui/react";
-import React from "react";
-import { Accordion, AccordionProps } from "./Accordion";
-
-type HeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
-type ExpandableProps = Omit<
-  AccordionProps,
-  "title" | "index" | "defaultIndex" | "onChange"
-> & {
-  /** The hidden content */
-  children: React.ReactNode;
-  /** The title that's shown inside the toggle button */
-  title: React.ReactNode;
-  /** The semantic heading level of the toggle button */
-  headingLevel?: HeadingLevel;
-  /**
-   * Icon shown to the left of the title
-   *
-   * Make sure it's the 24px outlined version of the icon
-   */
-  leftIcon?: React.ReactNode;
+  AccordionItemContent,
+  AccordionItemTrigger,
+} from "./Accordion";
+import { ExpandableItemProps, ExpandableProps } from "./types";
+import { warnAboutMismatchingIcon } from "./helpers";
 
-  /** Controlled value of whether the accordion is open or not */
-  isOpen?: boolean;
-  /** Default value of when the accordion is open or not */
-  defaultOpen?: boolean;
-  /** Callback for when the expandable opens or closes */
-  onChange?: (isOpen: boolean) => void;
-};
 /**
  * A standalone expandable component.
  *
@@ -42,118 +17,70 @@ type ExpandableProps = Omit<
  * If you want several expandables in a row, use the `Accordion` and `ExpandableItem` components instead.
  *
  * ```tsx
- * <Expandable title="Click for more" variant="base">
+ * <Expandable title="Click for more" variant="core">
  *   <Text>MORE! 🎉</Text>
  * </Expandable>
  * ```
  */
-export const Expandable = ({
-  children,
-  headingLevel,
-  title,
-  leftIcon,
-  defaultOpen,
-  isOpen,
-  onChange = () => {},
-  ...rest
-}: ExpandableProps) => {
-  return (
-    <Accordion
-      {...rest}
-      index={isOpen ? 0 : undefined}
-      defaultIndex={defaultOpen ? 0 : undefined}
-      onChange={(expandedIndex) => onChange(expandedIndex === 0)}
-    >
-      <ExpandableItem
-        headingLevel={headingLevel}
-        title={title}
-        leftIcon={leftIcon}
-      >
-        {children}
-      </ExpandableItem>
-    </Accordion>
-  );
-};
 
-export type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
-  /** The hidden content */
-  children: React.ReactNode;
-  /** The title that's shown inside the toggle button */
-  title: React.ReactNode;
-  /** The semantic heading level of the toggle button */
-  headingLevel?: HeadingLevel;
-  /**
-   * Icon shown to the left of the title
-   *
-   * Make sure it's the 24px outlined version of the icon
-   */
-  leftIcon?: React.ReactNode;
-};
+export const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(
+  (props, ref) => {
+    const { title, children, headingLevel, startElement, ...rest } = props;
+    return (
+      <Accordion {...props} ref={ref} {...rest}>
+        <ExpandableItem
+          title={title}
+          headingLevel={headingLevel}
+          startElement={startElement}
+          value="single-expandable"
+        >
+          {children}
+        </ExpandableItem>
+      </Accordion>
+    );
+  },
+);
+
 /**
  * An item in a set of Expandables. Must be wrapped in an `<Accordion>` component.
  *
  * ```tsx
  * <Accordion variant="ghost">
- *  <ExpandableItem title="Is Spor easy?" headingLevel="h3">
+ *  <ExpandableItem value="a" title="Is Spor easy?" headingLevel="h3">
  *    Yes
  *  </ExpandableItem>
- *  <ExpandableItem title="Do you love it?" headingLevel="h3">
+ *  <ExpandableItem value="b" title="Do you love it?" headingLevel="h3">
  *    🥰
  *  </ExpandableItem>
  * </Accordion>
  * ```
  *
- * If you need even more control, you can put together your own expandable with the `Accordion`, `AccordionItem`, `AccordionButton`, `AccordionIcon` and `AccordionPanel` components.
+ *
+ * If you need even more control, you can put together your own expandable with the `Accordion`, `AccordionItem`, `AccordionItemTrigger`, and `AccordionItemContent` components.
+ *
+ * @see https://spor.vy.no/components/accordion
  */
-export const ExpandableItem = ({
-  children,
-  title,
-  headingLevel = "h3",
-  leftIcon,
-  ...rest
-}: ExpandableItemProps) => {
-  warnAboutMismatchingIcon({ icon: leftIcon });
+
+export const ExpandableItem = (props: ExpandableItemProps) => {
+  const {
+    title,
+    children,
+    value,
+    headingLevel = "h3",
+    startElement,
+    ...rest
+  } = props;
+  warnAboutMismatchingIcon({ icon: startElement });
   return (
-    <AccordionItem {...rest}>
-      <Box as={headingLevel}>
-        <AccordionButton>
-          <Flex alignItems="center">
-            {leftIcon && <Box marginRight={1}>{leftIcon}</Box>}
-            {title}
-          </Flex>
-          <AccordionIcon />
-        </AccordionButton>
-      </Box>
-      <AccordionPanel>{children}</AccordionPanel>
+    <AccordionItem value={value} {...rest}>
+      <AccordionItemTrigger
+        startElement={startElement}
+        headingLevel={headingLevel}
+      >
+        {title}
+      </AccordionItemTrigger>
+
+      <AccordionItemContent>{children}</AccordionItemContent>
     </AccordionItem>
   );
 };
-
-type WarnAboutMismatchingIcon = {
-  icon: any;
-};
-const warnAboutMismatchingIcon = ({ icon }: WarnAboutMismatchingIcon) => {
-  if (process.env.NODE_ENV !== "production") {
-    const displayName = icon?.type?.render?.displayName;
-    if (!displayName) {
-      return;
-    }
-    if (displayName.includes("Fill")) {
-      console.warn(
-        `You passed a filled icon. This component requires outlined icons. You passed ${displayName}, replace it with ${displayName.replace(
-          "Fill",
-          "Outline",
-        )}.`,
-      );
-      return;
-    }
-    if (!displayName.includes("24Icon")) {
-      console.warn(
-        `The icon you passed was of the wrong size. You passed ${displayName}, replace it with ${displayName.replace(
-          /(\d{2})Icon/,
-          "24Icon",
-        )}.`,
-      );
-    }
-  }
-};

package/src/accordion/helpers.ts

@@ -0,0 +1,31 @@
+type WarnAboutMismatchingIcon = {
+  icon: any;
+};
+
+export const warnAboutMismatchingIcon = ({
+  icon,
+}: WarnAboutMismatchingIcon) => {
+  if (process.env.NODE_ENV !== "production") {
+    const displayName = icon?.type?.render?.displayName;
+    if (!displayName) {
+      return;
+    }
+    if (displayName.includes("Fill")) {
+      console.warn(
+        `You passed a filled icon. This component requires outlined icons. You passed ${displayName}, replace it with ${displayName.replace(
+          "Fill",
+          "Outline",
+        )}.`,
+      );
+      return;
+    }
+    if (!displayName.includes("24Icon")) {
+      console.warn(
+        `The icon you passed was of the wrong size. You passed ${displayName}, replace it with ${displayName.replace(
+          /(\d{2})Icon/,
+          "24Icon",
+        )}.`,
+      );
+    }
+  }
+};

package/src/accordion/types.ts

@@ -0,0 +1,60 @@
+import { accordionSlotRecipe } from "@/theme/slot-recipes/accordion";
+import { RecipeVariantProps } from "@chakra-ui/react";
+import {
+  AccordionRootProps as ChakraAccordionProps,
+  Accordion as ChakraAccordion,
+} from "@chakra-ui/react";
+import { PropsWithChildren } from "react";
+
+export type AccordionVariantProps = RecipeVariantProps<
+  typeof accordionSlotRecipe
+>;
+
+export type AccordionProps = Exclude<
+  ChakraAccordionProps,
+  "variant" | "size" | "orientation"
+> &
+  AccordionVariantProps &
+  PropsWithChildren & {
+    /**
+     * The display variant of the accordion items.
+     *
+     * - `core` renders a pretty unstyled expandable list without any borders
+     * - `base` renders an outlined version
+     * - `floating` renders a version with a drop shadow
+     */
+    variant?: "ghost" | "core" | "floating";
+    /* Gap between accordions */
+    gap?: string | number;
+  };
+
+export type HeadingLevel = {
+  /** Heading level of the trigger button */
+  headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6";
+};
+
+export type AccordionItemTriggerProps = Omit<
+  ChakraAccordion.ItemTriggerProps,
+  "indicatorElement"
+> &
+  HeadingLevel & {
+    /** Icon to be displayed on the left of the trigger button. Use 24px outline. */
+    startElement?: React.ReactNode;
+  };
+
+export type AccordionItemContentProps = ChakraAccordion.ItemContentProps & {
+  children?: React.ReactNode;
+};
+
+export type ExpandableProps = AccordionProps &
+  AccordionItemTriggerProps &
+  HeadingLevel & {
+    title: string;
+  };
+
+export type ExpandableItemProps = HeadingLevel & {
+  value: string;
+  title: string;
+  children?: React.ReactNode;
+  startElement?: React.ReactNode;
+};

package/src/alert/Alert.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import {
+  Alert as ChakraAlert,
+  useDisclosure,
+  HStack,
+  useSlotRecipe,
+} from "@chakra-ui/react";
+import React, { forwardRef } from "react";
+import { AlertIcon } from "./AlertIcon";
+import { CloseButton } from "@/button";
+import { IconComponent } from "@vygruppen/spor-icon-react";
+
+export type AlertProps = Omit<ChakraAlert.RootProps, "colorPalette"> & {
+  /** Whether or not to show the alert icon */
+  showIndicator?: boolean;
+  /** Whether or not the alert is closable */
+  icon?: IconComponent;
+  closable?: boolean;
+  /** Callback for when the alert is closed */
+  onAlertClose?: () => void;
+};
+
+/**
+ *
+ * Alerts are used to communicate important information to the user.
+ * They can be used to inform about success, errors, warnings, or other important information.
+ *
+ * ```tsx
+ * <Alert variant="info" title="Information">
+ *  This is an information alert
+ * </Alert>
+ * ```
+ *
+ * You may also use the closable prop to allow the user to dismiss the alert.
+ *
+ * ```tsx
+ * <Alert variant="info" title="Information" closable>
+ *    This is an closable alert
+ * </Alert>
+ *
+ * @see Docs https://spor.vy.no/alert
+ */
+
+export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+  const {
+    title,
+    showIndicator = true,
+    icon,
+    closable = false,
+    onAlertClose,
+    children,
+  } = props;
+  const { open, onClose } = useDisclosure({ defaultOpen: true });
+
+  const handleAlertClose = () => {
+    onClose();
+    onAlertClose?.();
+  };
+
+  const recipe = useSlotRecipe({ key: "alert" });
+  const styles = recipe({ variant: props.variant });
+
+  if (!open) return null;
+  return (
+    <ChakraAlert.Root ref={ref} {...props}>
+      <ChakraAlert.Content flexDirection={title ? "column" : "row"}>
+        <HStack gap="1" alignItems="flex-start">
+          {showIndicator && (
+            <ChakraAlert.Indicator asChild>
+              <AlertIcon variant={props.variant} customIcon={icon} />
+            </ChakraAlert.Indicator>
+          )}
+          {title && (
+            <ChakraAlert.Title paddingRight={closable ? 6 : 0}>
+              {title}
+            </ChakraAlert.Title>
+          )}
+        </HStack>
+        {children && (
+          <ChakraAlert.Description
+            paddingLeft={title ? 0.5 : 0}
+            paddingRight={closable ? 6 : 0}
+          >
+            {children}
+          </ChakraAlert.Description>
+        )}
+      </ChakraAlert.Content>
+      {closable && (
+        <CloseButton
+          size="xs"
+          position="absolute"
+          top="1.5"
+          right="1.5"
+          onClick={handleAlertClose}
+          css={styles.closeButton}
+        />
+      )}
+    </ChakraAlert.Root>
+  );
+});