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

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-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';
+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 } 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';
@@ -102,7 +102,7 @@ declare const buttonVariants: (props?: ({
         [x: string]: any;
     } | null | undefined;
 })) | undefined) => string;
-type ButtonOrLinkProps = VariantProps<typeof buttonVariants> & {
+type ButtonOrLinkProps$1 = VariantProps<typeof buttonVariants> & {
     children?: React.ReactNode;
     href?: string;
     /**
@@ -111,7 +111,7 @@ type ButtonOrLinkProps = VariantProps<typeof buttonVariants> & {
      */
     isLoading?: boolean;
 };
-type ButtonProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps;
+type ButtonProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps$1;
 declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 type CheckboxProps = {
@@ -581,29 +581,18 @@ declare const _Breadcrumbs: react.ForwardRefExoticComponent<{
     style?: React.CSSProperties;
 } & Omit<BreadcrumbsProps$1<BreadcrumbProps>, "className" | "style"> & react.RefAttributes<HTMLOListElement>>;
 
-type BacklinkProps = {
-    /** Additional CSS className for the element. */
-    className?: string;
-    /** The URL to navigate to when clicking the backlink. */
-    href?: string;
-    /** The content of the link */
+type ButtonOrLinkProps = {
     children?: React.ReactNode;
-    /** To add a permanent underline on the link (not only on hover)
-     * @default false
-     */
-    withUnderline?: boolean;
-} & LinkProps;
-declare const _Backlink: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
     className?: string;
-    /** The URL to navigate to when clicking the backlink. */
+    /** Determines whether to use an anchor or a button for the Backlink */
     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;
-} & LinkProps & react.RefAttributes<HTMLAnchorElement>>;
+};
+type BacklinkProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps;
+declare const _Backlink: react.ForwardRefExoticComponent<BacklinkProps & react.RefAttributes<HTMLButtonElement | 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

@@ -234,8 +234,8 @@ const _AccordionItem = /*#__PURE__*/ forwardRef(AccordionItem);
         isIconOnly: false
     }
 });
-function isLinkProps(props) {
-    return 'href' in props;
+function isLinkProps$1(props) {
+    return !!props.href;
 }
 function Button(props, forwardedRef) {
     const { children: _children, color, isIconOnly, isLoading, variant, style: _style, ...restProps } = props;
@@ -270,7 +270,7 @@ function Button(props, forwardedRef) {
         ..._style,
         widthOverride
     };
-    return isLinkProps(restProps) ? /*#__PURE__*/ jsx(Link, {
+    return isLinkProps$1(restProps) ? /*#__PURE__*/ jsx(Link, {
         ...restProps,
         className: className,
         style: style,
@@ -290,7 +290,7 @@ const formField = cx('group flex flex-col gap-2');
 const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-sm leading-6 text-red');
 const input = cva({
     base: [
-        'rounded-md py-2.5 text-base font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
+        'min-h-11 rounded-md py-2.5 text-base font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
         // invalid styles
         'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red',
         // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
@@ -317,9 +317,9 @@ const inputGroup = cx([
     'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring'
 ]);
 const dropdown = {
-    popover: cx(// Use outline + clip-path hack instead of border to prevent scrollbars from overflowing border-radius
-    'min-w-[--trigger-width] overflow-y-auto rounded-md bg-white shadow outline outline-1 outline-offset-[-1px] outline-black [clip-path:content-box] data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out'),
-    listbox: cx('max-h-[25rem] text-sm outline-none'),
+    popover: cx('min-w-[--trigger-width] overflow-y-auto rounded-md border border-black bg-white shadow data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out'),
+    // overflow-x-hidden is needed to prevent visible vertical scrollbars from overflowing the border radius of the popover
+    listbox: cx('max-h-[25rem] overflow-x-hidden text-sm outline-none'),
     chevronIcon: cx('text-base transition-transform duration-150 group-data-[open]:rotate-180 motion-reduce:transition-none')
 };
 
@@ -334,7 +334,7 @@ function ErrorMessage(props) {
 }
 
 const defaultClasses$1 = cx([
-    'group relative left-0 inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7'
+    'group relative left-0 -mx-2.5 inline-flex max-w-fit cursor-pointer items-start gap-4 p-2.5 leading-7'
 ]);
 // Pulling this out into it's own component. Will probably export it in the future
 // so it can be used in other views, outside of an input of type checkbox, like in table rows.
@@ -381,9 +381,6 @@ function Checkbox(props, ref) {
                     isInvalid: isInvalid,
                     ref: ref,
                     children: [
-                        /*#__PURE__*/ jsx("span", {
-                            className: "absolute -left-2.5 top-0 z-10 h-11 w-11"
-                        }),
                         /*#__PURE__*/ jsx(CheckmarkBox, {}),
                         children
                     ]
@@ -577,7 +574,7 @@ function RadioGroup(props, ref) {
 const _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);
 
 const defaultClasses = cx([
-    'relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7',
+    'relative -ml-2.5 inline-flex max-w-fit cursor-pointer items-start gap-4 py-2.5 pl-2.5 leading-7',
     // the radio button itself
     'before:flex-none before:rounded-full before:border-2 before:border-black',
     // to vertically align the radio we need to calculate the label's height, which is equal to it's font size multiplied by the line height.
@@ -597,24 +594,19 @@ const defaultClasses = cx([
 ]);
 function Radio(props, ref) {
     const { children, className, description, ...restProps } = props;
-    return /*#__PURE__*/ jsxs(Radio$1, {
+    return /*#__PURE__*/ jsx(Radio$1, {
         ...restProps,
         className: cx(className, defaultClasses),
         ref: ref,
-        children: [
-            /*#__PURE__*/ jsx("span", {
-                className: "absolute -left-2.5 top-0 z-10 h-11 w-11 "
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                children: [
-                    children,
-                    description && /*#__PURE__*/ jsx(Description, {
-                        className: "mt-2 block",
-                        children: description
-                    })
-                ]
-            })
-        ]
+        children: /*#__PURE__*/ jsxs("div", {
+            children: [
+                children,
+                description && /*#__PURE__*/ jsx(Description, {
+                    className: "mt-2 block",
+                    children: description
+                })
+            ]
+        })
     });
 }
 const _Radio = /*#__PURE__*/ forwardRef(Radio);
@@ -966,13 +958,17 @@ function Breadcrumb(props, ref) {
 }
 const _Breadcrumb = /*#__PURE__*/ forwardRef(Breadcrumb);
 
+function isLinkProps(props) {
+    return !!props.href;
+}
 function Backlink(props, ref) {
-    const { className, children, href, withUnderline, ...restProps } = props;
-    return /*#__PURE__*/ jsxs(Link, {
+    const { className, children, withUnderline, ...restProps } = props;
+    const Component = isLinkProps(props) ? Link : Button$1;
+    return /*#__PURE__*/ jsxs(Component, {
         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,
+        // @ts-expect-error ignore the type of the ref here
         ref: ref,
-        href: href,
         children: [
             /*#__PURE__*/ jsx(ChevronLeft, {
                 className: cx('-ml-[0.5em] flex-shrink-0 transition-transform duration-300 group-hover:-translate-x-1')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.32",
+  "version": "2.0.0-canary.33",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -19,10 +19,10 @@
   ],
   "dependencies": {
     "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.1",
-    "@react-aria/utils": "^3.24.1",
+    "@react-aria/utils": "^3.25.1",
     "@types/node": "^20.11.19",
     "cva": "1.0.0-beta.1",
-    "react-aria-components": "^1.2.1"
+    "react-aria-components": "^1.3.1"
   },
   "peerDependencies": {
     "react": "^18"