@obosbbl/grunnmuren-react 2.0.0-canary.1 → 2.0.0-canary.11

package/dist/index.mjs

@@ -0,0 +1,518 @@
+import { Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ListBoxItem as ListBoxItem$1, ListBox as ListBox$1, ComboBox, Group, Input, Button, 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 } from 'react-aria-components';
+export { Form, I18nProvider } from 'react-aria-components';
+export { _ as Button } from './Button-client-XmGlKEk4.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useId } from 'react';
+import { cx, cva, compose } from 'cva';
+import { Check, LoadingSpinner, ChevronDown } from '@obosbbl/grunnmuren-icons-react';
+
+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 px-3 py-2.5 text-sm 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
+        'appearance-none'
+    ],
+    variants: {
+        // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
+        focusModifier: {
+            focus: 'focus:ring-2 group-data-[invalid]:focus:ring',
+            visible: 'data-[focus-visible]:ring-2 group-data-[invalid]:data-[focus-visible]:ring'
+        },
+        isGrouped: {
+            false: '',
+            //
+            true: 'flex-1 !ring-0 first:pl-0 last:pr-0'
+        }
+    },
+    defaultVariants: {
+        focusModifier: 'focus',
+        isGrouped: false
+    }
+});
+const inputGroup = cx('inline-flex items-center overflow-hidden rounded-md px-3 ring-1 ring-black focus-within:ring-2 group-data-[invalid]:ring-2 group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring');
+const dropdown = {
+    popover: cx('min-w-[--trigger-width] overflow-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'),
+    listbox: cx('text-sm outline-none'),
+    chevronIcon: cx('text-base transition-transform duration-150 group-data-[open]:rotate-180 motion-reduce:transition-none')
+};
+
+function ErrorMessage(props) {
+    const { children, className, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Text, {
+        ...restProps,
+        className: cx(className, formFieldError),
+        slot: "errorMessage",
+        children: children
+    });
+}
+
+function Description(props) {
+    const { className, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Text, {
+        ...restProps,
+        className: cx(className, 'text-sm font-light leading-6'),
+        slot: "description"
+    });
+}
+
+const defaultClasses$1 = cx([
+    'group relative left-0 inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 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.
+function CheckmarkBox() {
+    return /*#__PURE__*/ jsx("span", {
+        className: cx([
+            'relative left-0 grid flex-none place-content-center rounded-sm border-2 border-black text-white',
+            // 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.
+            // For the ::before psuedo element the line height of the label is always 1em.
+            // When we know the height of the label we use the height of the radio to push it down to align with the label's first line
+            // TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
+            'mt-[calc((1em_*_1.75_-_24px)_/_2)] h-[24px] w-[24px]',
+            // selected
+            'group-data-[selected]:!border-green group-data-[selected]:!bg-green',
+            // focus
+            'group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-black group-data-[focus-visible]:ring-offset-[9px]',
+            // hovered
+            'group-data-[hovered]:border-green group-data-[hovered]:group-data-[invalid]:border-red group-data-[hovered]:bg-green-lightest group-data-[hovered]:group-data-[invalid]:bg-red-light',
+            // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
+            // so we use an inner shadow of 1 px instead to pad the actual border
+            'group-data-[invalid]:border-red group-data-[invalid]:group-data-[selected]:shadow-none group-data-[invalid]:shadow-[inset_0_0_0_1px] group-data-[invalid]:shadow-red'
+        ]),
+        children: /*#__PURE__*/ jsx(Check, {
+            className: "h-full w-full opacity-0 group-data-[selected]:opacity-100"
+        })
+    });
+}
+function Checkbox(props, ref) {
+    const { children, className, description, errorMessage, isInvalid: _isInvalid, ...restProps } = props;
+    const id = useId();
+    const descriptionId = 'desc' + id;
+    const errorMessageId = 'error' + id;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsx("div", {
+        children: /*#__PURE__*/ jsxs(CheckboxContext.Provider, {
+            value: {
+                'aria-describedby': description ? descriptionId : undefined,
+                'aria-errormessage': errorMessage ? errorMessageId : undefined
+            },
+            children: [
+                /*#__PURE__*/ jsxs(Checkbox$1, {
+                    ...restProps,
+                    className: cx(className, defaultClasses$1),
+                    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
+                    ]
+                }),
+                description && /*#__PURE__*/ jsx(Description, {
+                    className: "block",
+                    id: descriptionId,
+                    children: description
+                }),
+                errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
+                    className: "mt-2 block",
+                    id: errorMessageId,
+                    children: errorMessage
+                })
+            ]
+        })
+    });
+}
+const _Checkbox = /*#__PURE__*/ forwardRef(Checkbox);
+
+function Label(props) {
+    const { children, className, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Label$1, {
+        className: cx(className, 'font-semibold leading-7'),
+        ...restProps,
+        children: children
+    });
+}
+
+function CheckboxGroup(props, ref) {
+    const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(CheckboxGroup$1, {
+        ...restProps,
+        className: cx(className, 'flex flex-col gap-2'),
+        isInvalid: isInvalid,
+        isRequired: isRequired,
+        ref: ref,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            children,
+            errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
+                children: errorMessage
+            })
+        ]
+    });
+}
+const _CheckboxGroup = /*#__PURE__*/ forwardRef(CheckboxGroup);
+
+/**
+ * This component handles renders a custom error message (if provided), otherwise it falls back to the browser's native validation.
+ * In other words, this handles controlled and uncontrolled form errors.
+ */ function ErrorMessageOrFieldError({ errorMessage }) {
+    return errorMessage ? /*#__PURE__*/ jsx(ErrorMessage, {
+        children: errorMessage
+    }) : /*#__PURE__*/ jsx(FieldError, {
+        className: formFieldError
+    });
+}
+
+const ListBox = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ListBox$1, {
+        ...restProps,
+        className: cx(dropdown.listbox, className)
+    });
+const ListBoxItem = (props)=>{
+    let textValue = props.textValue;
+    // When the ListBoxItem child isn't a string we have to set textValue for keyboard completion to work.
+    // Since we use a render function (to handle the selected state) the child is never a string.
+    // This condition adds back that behaviour
+    if (textValue == null && typeof props.children === 'string') {
+        textValue = props.children;
+    }
+    return /*#__PURE__*/ jsx(ListBoxItem$1, {
+        ...props,
+        className: cx(props.className, 'flex cursor-pointer px-6 py-3 leading-6 outline-none data-[focused]:bg-sky-lightest'),
+        textValue: textValue,
+        children: ({ isSelected })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    isSelected && /*#__PURE__*/ jsx(Check, {
+                        className: "-ml-6 text-base"
+                    }),
+                    props.children
+                ]
+            })
+    });
+};
+
+function Combobox(props, ref) {
+    const { className, children, description, errorMessage, isLoading, label, isInvalid: _isInvalid, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(ComboBox, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            /*#__PURE__*/ jsxs(Group, {
+                className: inputGroup,
+                children: [
+                    /*#__PURE__*/ jsx(Input, {
+                        className: input({
+                            isGrouped: true
+                        }),
+                        ref: ref
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        children: isLoading ? /*#__PURE__*/ jsx(LoadingSpinner, {
+                            className: "animate-spin"
+                        }) : /*#__PURE__*/ jsx(ChevronDown, {
+                            className: dropdown.chevronIcon
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                // FIXME: The trigger width doesn't include the padding of the group, so for now we have to apply this workaround.
+                // Also... the combobox border gets a pixel wider when focused, so we account for that as well when calculating the width
+                // and the offset.
+                // The input gutter should probably be moved to a theme variable instead of using the hardcoded value as here.
+                className: cx(dropdown.popover, 'min-w-[calc(var(--trigger-width)+26px)]'),
+                crossOffset: -13,
+                children: /*#__PURE__*/ jsx(ListBox, {
+                    children: children
+                })
+            })
+        ]
+    });
+}
+const _Combobox = /*#__PURE__*/ forwardRef(Combobox);
+
+function RadioGroup(props, ref) {
+    const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(RadioGroup$1, {
+        ...restProps,
+        className: cx(className, 'flex flex-col gap-2'),
+        isInvalid: isInvalid,
+        isRequired: isRequired,
+        ref: ref,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            children,
+            errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
+                children: errorMessage
+            })
+        ]
+    });
+}
+const _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);
+
+const defaultClasses = cx([
+    'relative inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 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.
+    // For the ::before psuedo element the line height of the label is always 1em.
+    // When we know the height of the label we use the height of the radio to push it down to align with the label's first line
+    // TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
+    'before:mt-[calc((1em_*_1.75_-_24px)_/_2)] before:h-[24px] before:w-[24px]',
+    // selected
+    'data-[selected]:before:border-black data-[selected]:before:bg-green data-[selected]:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
+    // hover
+    'data-[hovered]:before:border-green data-[hovered]:before:bg-green-lightest data-[hovered]:data-[invalid]:before:bg-red-light',
+    // focus
+    'data-[focus-visible]:before:ring data-[focus-visible]:before:ring-black data-[focus-visible]:before:ring-offset-[9px]',
+    // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
+    // so we use an inner outline to artifically pad the border
+    'data-[invalid]:before:outline-solid data-[invalid]:before:border-red data-[invalid]:data-[selected]:before:!bg-red data-[invalid]:before:outline data-[invalid]:before:outline-[3px] data-[invalid]:before:outline-offset-[-3px] data-[invalid]:before:outline-red'
+]);
+function Radio(props, ref) {
+    const { children, className, description, ...restProps } = props;
+    return /*#__PURE__*/ jsxs(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
+                    })
+                ]
+            })
+        ]
+    });
+}
+const _Radio = /*#__PURE__*/ forwardRef(Radio);
+
+function Select(props, ref) {
+    const { className, children, description, errorMessage, label, isInvalid: _isInvalid, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(Select$1, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            /*#__PURE__*/ jsxs(Button, {
+                className: cx(input({
+                    focusModifier: 'visible'
+                }), // How to reuse placeholder text?
+                'inline-flex cursor-default items-center gap-2'),
+                // See https://github.com/adobe/react-spectrum/discussions/4792#discussioncomment-6492305
+                ref: ref,
+                children: [
+                    /*#__PURE__*/ jsx(SelectValue, {
+                        className: "flex-1 truncate text-left data-[placeholder]:text-[#727070]"
+                    }),
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        className: dropdown.chevronIcon
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            }),
+            /*#__PURE__*/ jsx(Popover, {
+                className: dropdown.popover,
+                children: /*#__PURE__*/ jsx(ListBox, {
+                    children: children
+                })
+            })
+        ]
+    });
+}
+const _Select = /*#__PURE__*/ forwardRef(Select);
+
+function TextArea(props, ref) {
+    const { className, description, errorMessage, label, isInvalid: _isInvalid, rows, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(TextField$1, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            /*#__PURE__*/ jsx(TextArea$1, {
+                className: input(),
+                rows: rows,
+                ref: ref
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            })
+        ]
+    });
+}
+const _TextArea = /*#__PURE__*/ forwardRef(TextArea);
+
+const inputWithAlignment$1 = compose(input, cva({
+    base: '',
+    variants: {
+        textAlign: {
+            right: 'text-right',
+            left: ''
+        }
+    }
+}));
+function TextField(props, ref) {
+    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(TextField$1, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
+                className: inputGroup,
+                children: [
+                    leftAddon,
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(Divider$1, {
+                        className: "ml-3"
+                    }),
+                    /*#__PURE__*/ jsx(Input, {
+                        className: inputWithAlignment$1({
+                            textAlign,
+                            isGrouped: true
+                        }),
+                        ref: ref
+                    }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(Divider$1, {
+                        className: "mr-3"
+                    }),
+                    rightAddon
+                ]
+            }) : /*#__PURE__*/ jsx(Input, {
+                className: inputWithAlignment$1({
+                    textAlign
+                }),
+                ref: ref
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            })
+        ]
+    });
+}
+function Divider$1({ className }) {
+    return /*#__PURE__*/ jsx("span", {
+        className: cx(className, 'block h-6 w-px flex-none bg-black')
+    });
+}
+const _TextField = /*#__PURE__*/ forwardRef(TextField);
+
+// This component is based on a copy of ../textfield/TextField, refactoring is TBD: https://github.com/code-obos/grunnmuren/pull/722#issuecomment-1931478786
+const inputWithAlignment = compose(input, cva({
+    base: '',
+    variants: {
+        textAlign: {
+            right: 'text-right',
+            left: ''
+        }
+    }
+}));
+function NumberField(props, ref) {
+    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(NumberField$1, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
+                className: inputGroup,
+                children: [
+                    leftAddon,
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(Divider, {
+                        className: "ml-3"
+                    }),
+                    /*#__PURE__*/ jsx(Input, {
+                        className: inputWithAlignment({
+                            textAlign,
+                            isGrouped: true
+                        }),
+                        ref: ref
+                    }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(Divider, {
+                        className: "mr-3"
+                    }),
+                    rightAddon
+                ]
+            }) : /*#__PURE__*/ jsx(Input, {
+                className: inputWithAlignment({
+                    textAlign
+                }),
+                ref: ref
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            })
+        ]
+    });
+}
+function Divider({ className }) {
+    return /*#__PURE__*/ jsx("span", {
+        className: cx(className, 'block h-6 w-px flex-none bg-black')
+    });
+}
+const _NumberField = /*#__PURE__*/ forwardRef(NumberField);
+
+export { _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxItem as SelectItem, _TextArea as TextArea, _TextField as TextField };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.1",
+  "version": "2.0.0-canary.11",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -9,54 +9,24 @@
   "sideEffects": false,
   "type": "module",
   "exports": {
-    "./button": {
-      "types": "./dist/button/Button.d.ts",
-      "default": "./dist/button/Button.mjs"
-    },
-    "./checkbox": {
-      "types": "./dist/checkbox/index.d.ts",
-      "default": "./dist/checkbox/index.mjs"
-    },
-    "./label": {
-      "types": "./dist/label/index.d.ts",
-      "default": "./dist/label/index.mjs"
-    },
-    "./radiogroup": {
-      "types": "./dist/radiogroup/index.d.ts",
-      "default": "./dist/radiogroup/index.mjs"
-    },
-    "./textfield": {
-      "types": "./dist/textfield/index.d.ts",
-      "default": "./dist/textfield/index.mjs"
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     }
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.0",
+    "@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-rc.0"
+    "react-aria-components": "^1.0.0"
   },
   "peerDependencies": {
     "react": "^18"
   },
-  "unbuild": {
-    "entries": [
-      "./src/button/Button.tsx",
-      "./src/checkbox/index.ts",
-      "./src/label/index.ts",
-      "./src/radiogroup/index.ts",
-      "./src/textfield/index.ts"
-    ],
-    "declaration": true,
-    "rollup": {
-      "esbuild": {
-        "jsx": "automatic"
-      }
-    }
-  },
   "scripts": {
-    "build": "unbuild"
+    "build": "bunchee"
   }
 }

package/dist/button/Button.d.mts

@@ -1,83 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { VariantProps } from 'cva';
-
-/**
- * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
- */
-declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | undefined;
-    color?: "green" | "mint" | "white" | undefined;
-    isIconOnly?: boolean | undefined;
-} & ({
-    class?: 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)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined;
-    className?: undefined;
-} | {
-    class?: undefined;
-    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)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [x: string]: any;
-    } | null | undefined)[] | {
-        [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;
-    /**
-     * Display the button in a loading state
-     * @default false
-     */
-    loading?: boolean;
-    style?: React.CSSProperties;
-} & ButtonOrLinkProps;
-declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
-
-export { Button, type ButtonProps };