@obosbbl/grunnmuren-react 2.0.0-canary.30 → 2.0.0-canary.32

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ListBoxItemProps, ComboBoxProps, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, SelectProps as SelectProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, ContextValue, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, LinkProps } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, Link, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ListBoxItemProps, ComboBoxProps, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, SelectProps as SelectProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, ContextValue, BreadcrumbProps as BreadcrumbProps$1, BreadcrumbsProps as BreadcrumbsProps$1, LinkProps } from 'react-aria-components';
 export { ListBoxItemProps as ComboboxItemProps, Form, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
@@ -73,9 +73,9 @@ declare const buttonVariants: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
+    class?: never;
     className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
         [x: string]: any;
     } | null | undefined)[] | {
@@ -102,21 +102,16 @@ declare const buttonVariants: (props?: ({
         [x: string]: any;
     } | null | undefined;
 })) | undefined) => string;
-type ButtonOrLinkProps = (React.ComponentPropsWithoutRef<'button'> & {
-    href?: never;
-}) | (React.ComponentPropsWithoutRef<'a'> & {
-    href: string;
-});
-type ButtonProps = VariantProps<typeof buttonVariants> & {
-    className?: string;
-    children: React.ReactNode;
+type ButtonOrLinkProps = VariantProps<typeof buttonVariants> & {
+    children?: React.ReactNode;
+    href?: string;
     /**
      * Display the button in a loading state
      * @default false
      */
     isLoading?: boolean;
-    style?: React.CSSProperties;
-} & ButtonOrLinkProps;
+};
+type ButtonProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps;
 declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 type CheckboxProps = {
@@ -133,13 +128,13 @@ type CheckboxProps = {
 declare const _Checkbox: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
     errorMessage?: React.ReactNode;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<CheckboxProps$1, "children" | "style" | "isDisabled" | "isIndeterminate" | "isReadOnly"> & react.RefAttributes<HTMLLabelElement>>;
 
 type CheckboxGroupProps = {
@@ -158,7 +153,7 @@ type CheckboxGroupProps = {
 declare const _CheckboxGroup: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -166,7 +161,7 @@ declare const _CheckboxGroup: react.ForwardRefExoticComponent<{
     /** Label for the form control. */
     label?: React.ReactNode;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<CheckboxGroupProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
 
 declare const ListBoxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
@@ -194,7 +189,7 @@ type ComboboxProps<T extends object> = {
 declare const _Combobox: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -203,13 +198,13 @@ declare const _Combobox: react.ForwardRefExoticComponent<{
      * Display the dropdown button trigger in a loading state
      * @default false
      */
-    isLoading?: boolean | undefined;
+    isLoading?: boolean;
     /** Label for the form control. */
     label?: React.ReactNode;
     /** Placeholder text. Only visible when the input value is empty. */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<ComboBoxProps<object>, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
 
 type RadioGroupProps = {
@@ -228,7 +223,7 @@ type RadioGroupProps = {
 declare const _RadioGroup: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -236,7 +231,7 @@ declare const _RadioGroup: react.ForwardRefExoticComponent<{
     /** Label for the form control. */
     label?: React.ReactNode;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<RadioGroupProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
 
 type RadioProps = {
@@ -251,11 +246,11 @@ type RadioProps = {
 declare const _Radio: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<RadioProps$1, "children" | "style" | "isDisabled"> & react.RefAttributes<HTMLLabelElement>>;
 
 type SelectProps<T extends object> = {
@@ -276,7 +271,7 @@ type SelectProps<T extends object> = {
 declare const _Select: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -284,9 +279,9 @@ declare const _Select: react.ForwardRefExoticComponent<{
     /** Label for the form control. */
     label?: React.ReactNode;
     /** Placeholder text. Only visible when the input value is empty. */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<SelectProps$1<object>, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLButtonElement>>;
 
 type TextAreaProps = {
@@ -310,7 +305,7 @@ type TextAreaProps = {
 } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
 declare const _TextArea: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -318,14 +313,14 @@ declare const _TextArea: react.ForwardRefExoticComponent<{
     /** Label for the form control. */
     label?: React.ReactNode;
     /** Placeholder text. Only visible when the input value is empty. */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
     /**
      * The number of visible text lines for the control.
      * @default 2
      */
-    rows?: number | undefined;
+    rows?: number;
 } & Omit<TextFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLTextAreaElement>>;
 
 type TextFieldProps = {
@@ -357,7 +352,7 @@ type TextFieldProps = {
 } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
 declare const _TextField: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -369,18 +364,18 @@ declare const _TextField: react.ForwardRefExoticComponent<{
     /** Element to be rendered in the right side of the input. */
     rightAddon?: React.ReactNode;
     /** Placeholder text. Only visible when the input value is empty. */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /**
      * Text alignment of the input
      * @default left
      */
-    textAlign?: "left" | "right" | undefined;
+    textAlign?: "left" | "right";
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
     /** Add a divider between the left/right addons and the input, a value of 0 will be ignored */
-    withAddonDivider?: boolean | undefined;
+    withAddonDivider?: boolean;
     /** Defines the number of characters and determines the width of the input element */
-    size?: number | undefined;
+    size?: number;
 } & Omit<TextFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
 
 type NumberFieldProps = {
@@ -416,7 +411,7 @@ type NumberFieldProps = {
 } & Omit<NumberFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'hideStepper'>;
 declare const _NumberField: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Help text for the form control. */
     description?: React.ReactNode;
     /** Error message for the form control. Automatically sets `isInvalid` to true */
@@ -428,22 +423,22 @@ declare const _NumberField: react.ForwardRefExoticComponent<{
     /** Element to be rendered in the right side of the input. */
     rightAddon?: React.ReactNode;
     /** Placeholder text. Only visible when the input value is empty. */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /**
      * Text alignment of the input
      * @default left
      */
-    textAlign?: "left" | "right" | undefined;
+    textAlign?: "left" | "right";
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
     /** Add a divider between the left/right addons and the input */
-    withAddonDivider?: boolean | undefined;
+    withAddonDivider?: boolean;
     /** Defines the number of characters and determines the width of the input element, a value of 0 will be ignored */
-    size?: number | undefined;
+    size?: number;
     /** Defines the maximum numeric value */
-    maxValue?: number | undefined;
+    maxValue?: number;
     /** Defines the minimum numeric value */
-    minValue?: number | undefined;
+    minValue?: number;
 } & Omit<NumberFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "hideStepper"> & react.RefAttributes<HTMLInputElement>>;
 
 declare const alertVariants: (props?: ({
@@ -474,9 +469,9 @@ declare const alertVariants: (props?: ({
     } | null | undefined)[] | {
         [x: string]: any;
     } | null | undefined;
-    className?: undefined;
+    className?: never;
 } | {
-    class?: undefined;
+    class?: never;
     className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
         [x: string]: any;
     } | null | undefined)[] | {
@@ -566,11 +561,11 @@ type BreadcrumbProps = {
 } & Omit<BreadcrumbProps$1, 'className' | 'style'>;
 declare const _Breadcrumb: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
     /** The URL to navigate to when clicking the breadcrumb. */
-    href?: string | undefined;
+    href?: string;
 } & Omit<BreadcrumbProps$1, "className" | "style"> & react.RefAttributes<HTMLLIElement>>;
 
 type BreadcrumbsProps = {
@@ -581,9 +576,9 @@ type BreadcrumbsProps = {
 } & Omit<BreadcrumbsProps$1<BreadcrumbProps>, 'className' | 'style'>;
 declare const _Breadcrumbs: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** Additional style properties for the element. */
-    style?: react.CSSProperties | undefined;
+    style?: React.CSSProperties;
 } & Omit<BreadcrumbsProps$1<BreadcrumbProps>, "className" | "style"> & react.RefAttributes<HTMLOListElement>>;
 
 type BacklinkProps = {
@@ -600,15 +595,15 @@ type BacklinkProps = {
 } & LinkProps;
 declare const _Backlink: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
-    className?: string | undefined;
+    className?: string;
     /** The URL to navigate to when clicking the backlink. */
-    href?: string | undefined;
+    href?: string;
     /** The content of the link */
     children?: React.ReactNode;
     /** To add a permanent underline on the link (not only on hover)
      * @default false
      */
-    withUnderline?: boolean | undefined;
+    withUnderline?: boolean;
 } & LinkProps & react.RefAttributes<HTMLAnchorElement>>;
 
 export { _Accordion as Accordion, _AccordionItem as AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, _Backlink as Backlink, type BacklinkProps, _Breadcrumb as Breadcrumb, type BreadcrumbProps, _Breadcrumbs as Breadcrumbs, type BreadcrumbsProps, _Button as Button, type ButtonProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxItem as ComboboxItem, type ComboboxProps, Content, ContentContext, type ContentProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, HeadingContext, type HeadingProps, _NumberField as NumberField, type NumberFieldProps, _Radio as Radio, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, _Select as Select, ListBoxItem as SelectItem, type SelectProps, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps };

package/dist/index.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { I18nProvider, RouterProvider, useContextProps, Provider, Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, FieldError, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBox as ListBox$1, ComboBox, Group, Input, Button as Button$1, Popover, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1, NumberField as NumberField$1, useLocale, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1, Link } from 'react-aria-components';
+import { I18nProvider, RouterProvider, useContextProps, Provider, Link, Button as Button$1, Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, FieldError, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBox as ListBox$1, ComboBox, Group, Input, Popover, RadioGroup as RadioGroup$1, Radio as Radio$1, Select as Select$1, SelectValue, TextField as TextField$1, TextArea as TextArea$1, NumberField as NumberField$1, useLocale, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1 } from 'react-aria-components';
 export { Form } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useLayoutEffect, createContext, forwardRef, Children, useId, useState, useRef } from 'react';
@@ -156,7 +156,7 @@ const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
  * 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'
+        'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-all duration-200 focus:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-offset-2'
     ],
     variants: {
         /**
@@ -234,8 +234,11 @@ const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
         isIconOnly: false
     }
 });
+function isLinkProps(props) {
+    return 'href' in props;
+}
 function Button(props, forwardedRef) {
-    const { children, className, color, isIconOnly, isLoading, variant, style, ...restProps } = props;
+    const { children: _children, color, isIconOnly, isLoading, variant, style: _style, ...restProps } = props;
     const [widthOverride, setWidthOverride] = useState();
     const ownRef = useRef(null);
     const ref = mergeRefs(ownRef, forwardedRef);
@@ -251,34 +254,35 @@ function Button(props, forwardedRef) {
         }
     }, [
         isLoading,
-        children
+        _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
-        }),
+    const className = buttonVariants({
+        className: props.className,
+        color,
+        isIconOnly,
+        variant
+    });
+    const children = widthOverride ? // remove margin for icon alignment
+    /*#__PURE__*/ jsx(LoadingSpinner, {
+        className: "!m-0 mx-auto animate-spin"
+    }) : _children;
+    const style = {
+        ..._style,
+        widthOverride
+    };
+    return isLinkProps(restProps) ? /*#__PURE__*/ jsx(Link, {
+        ...restProps,
+        className: className,
+        style: style,
         ref: ref,
-        style: {
-            ...style,
-            width: widthOverride
-        },
+        children: children
+    }) : /*#__PURE__*/ jsx(Button$1, {
         ...restProps,
-        children: widthOverride ? // remove margin for icon alignment
-        /*#__PURE__*/ jsx(LoadingSpinner, {
-            className: "!m-0 mx-auto animate-spin"
-        }) : children
-    }));
+        className: className,
+        style: style,
+        ref: ref,
+        children: children
+    });
 }
 const _Button = /*#__PURE__*/ forwardRef(Button);
 
@@ -950,7 +954,8 @@ function Breadcrumb(props, ref) {
         children: [
             href ? /*#__PURE__*/ jsx(Link, {
                 href: href,
-                className: "group-last:no-underline",
+                // use outline instead of ring for focus marker that can be offset without creating a white background between the focus marker and the element content
+                className: "rounded-sm focus:outline-none group-last:no-underline data-[focus-visible]:outline data-[focus-visible]:outline-offset-2 data-[focus-visible]:outline-black",
                 children: children
             }) : children,
             /*#__PURE__*/ jsx(ChevronRight, {
@@ -964,7 +969,7 @@ const _Breadcrumb = /*#__PURE__*/ forwardRef(Breadcrumb);
 function Backlink(props, ref) {
     const { className, children, href, withUnderline, ...restProps } = props;
     return /*#__PURE__*/ jsxs(Link, {
-        className: cx(className, 'group flex max-w-fit items-center gap-3 rounded-md p-2.5 no-underline focus:outline-none data-[focus-visible]:ring data-[focus-visible]:ring-black'),
+        className: cx(className, 'group flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 no-underline focus:outline-none data-[focus-visible]:ring data-[focus-visible]:ring-black'),
         ...restProps,
         ref: ref,
         href: href,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.30",
+  "version": "2.0.0-canary.32",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"