@obosbbl/grunnmuren-react 2.0.0-canary.5 → 2.0.0-canary.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.5",
+  "version": "2.0.0-canary.51",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -18,13 +18,16 @@
     "dist"
   ],
   "dependencies": {
-    "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.1",
-    "@react-aria/utils": "^3.23.0",
-    "cva": "1.0.0-beta.1",
-    "react-aria-components": "^1.0.0"
+    "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.7",
+    "@react-aria/utils": "^3.25.1",
+    "@types/node": "^22.0.0",
+    "cva": "^1.0.0-0",
+    "react-aria": "^3.35.1",
+    "react-aria-components": "^1.3.1",
+    "react-stately": "^3.35.0"
   },
   "peerDependencies": {
-    "react": "^18"
+    "react": "^18 || ^19"
   },
   "scripts": {
     "build": "bunchee"

package/dist/Button-client-wuoyidfi.js

@@ -1,144 +0,0 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { useLayoutEffect, forwardRef, useState, useRef } from 'react';
-import { cva } from 'cva';
-import { LoadingSpinner } from '@obosbbl/grunnmuren-icons-react';
-import { mergeRefs } from '@react-aria/utils';
-
-const canUseDOM = ()=>{
-    return typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
-};
-const useClientLayoutEffect = canUseDOM() ? useLayoutEffect : ()=>{};
-
-/**
- * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
- */ const buttonVariants = cva({
-    base: [
-        'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2'
-    ],
-    variants: {
-        /**
-     * The variant of the button
-     * @default primary
-     */ variant: {
-            primary: 'no-underline',
-            // by using an inset box-shadow to emulate a border instead of an actual border, the button size will be equal regardless of the variant
-            secondary: 'no-underline shadow-[inset_0_0_0_2px]',
-            tertiary: 'underline hover:no-underline'
-        },
-        /**
-     * Adjusts the color of the button for usage on different backgrounds.
-     * @default green
-     */ color: {
-            green: 'focus-visible:ring-black',
-            mint: 'focus-visible:ring-mint focus-visible:ring-offset-green-dark',
-            white: 'focus-visible:ring-white focus-visible:ring-offset-blue'
-        },
-        /**
-     * When the button is without text, but with a single icon.
-     * @default false
-     */ isIconOnly: {
-            true: 'p-2 [&>svg]:h-7 [&>svg]:w-7',
-            false: // The of-type classes takes care to add spacing when the button is used with icons
-            'px-4 py-2 [&>svg]:first-of-type:mr-2.5 [&>svg]:last-of-type:ml-2.5'
-        }
-    },
-    compoundVariants: [
-        {
-            color: 'green',
-            variant: 'primary',
-            // Darken bg by 20% on hover. The color is manually crafted
-            className: 'bg-green text-white hover:bg-green-dark active:bg-[#007352]'
-        },
-        {
-            color: 'green',
-            variant: 'secondary',
-            className: 'bg-white text-black shadow-green hover:bg-green hover:text-white active:bg-green'
-        },
-        {
-            color: 'mint',
-            variant: 'primary',
-            // Darken bg by 20% on hover. The color is manually crafted
-            className: 'active:[#9ddac6] bg-mint text-black hover:bg-[#8dd4bd]'
-        },
-        {
-            color: 'mint',
-            variant: 'secondary',
-            className: 'text-mint shadow-mint hover:bg-mint hover:text-black'
-        },
-        {
-            color: 'mint',
-            variant: 'tertiary',
-            className: 'text-mint'
-        },
-        {
-            color: 'white',
-            variant: 'primary',
-            className: 'bg-white text-black hover:bg-sky active:bg-sky-light'
-        },
-        {
-            color: 'white',
-            variant: 'secondary',
-            className: 'text-white shadow-white hover:bg-white hover:text-black'
-        },
-        {
-            color: 'white',
-            variant: 'tertiary',
-            className: 'text-white'
-        }
-    ],
-    defaultVariants: {
-        variant: 'primary',
-        color: 'green',
-        isIconOnly: false
-    }
-});
-function Button(props, forwardedRef) {
-    const { children, className, color, isIconOnly, isLoading, variant, style, ...restProps } = props;
-    const [widthOverride, setWidthOverride] = useState();
-    const ownRef = useRef(null);
-    const ref = mergeRefs(ownRef, forwardedRef);
-    useClientLayoutEffect(()=>{
-        if (isLoading) {
-            const requestID = window.requestAnimationFrame(()=>{
-                setWidthOverride(ownRef.current?.getBoundingClientRect()?.width);
-            });
-            return ()=>{
-                setWidthOverride(undefined);
-                cancelAnimationFrame(requestID);
-            };
-        }
-    }, [
-        isLoading,
-        children
-    ]);
-    let Component = 'a';
-    if (props.href == null) {
-        // If we don't have a href, it's a button, and we add a fallback type button to prevent the button from accidentally submitting when in a form
-        Component = 'button';
-        restProps.type ??= 'button';
-    }
-    return(// @ts-expect-error TS doesn't agree here taht restProps is safe to spread, because restProps for anchors aren't type compatible with restProps for buttons, but that should be okay here
-    /*#__PURE__*/ jsx(Component, {
-        "aria-busy": isLoading ? true : undefined,
-        className: buttonVariants({
-            className,
-            color,
-            isIconOnly,
-            variant
-        }),
-        ref: ref,
-        style: {
-            ...style,
-            width: widthOverride
-        },
-        ...restProps,
-        children: widthOverride ? // remove margin for icon alignment
-        /*#__PURE__*/ jsx(LoadingSpinner, {
-            className: "!m-0 mx-auto animate-spin"
-        }) : children
-    }));
-}
-const _Button = /*#__PURE__*/ forwardRef(Button);
-
-export { _Button as _ };