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

package/dist/Alertbox-client-J1P2mzVC.js

@@ -0,0 +1,120 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useState, Children } from 'react';
+import { cva, cx } from 'cva';
+import { useLocale } from 'react-aria-components';
+import { Close, ChevronDown, InfoCircle, CheckCircle, Warning, CloseCircle } from '@obosbbl/grunnmuren-icons-react';
+
+// TODO: add new icons
+const iconMap = {
+    info: InfoCircle,
+    success: CheckCircle,
+    warning: Warning,
+    danger: CloseCircle
+};
+const alertVariants = cva({
+    base: [
+        'grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded-md border-2 px-3 py-2',
+        // Heading styles:
+        '[&_[data-slot="heading"]]:text-base [&_[data-slot="heading"]]:font-medium [&_[data-slot="heading"]]:leading-7',
+        // Content styles:
+        '[&:has([data-slot="heading"])_[data-slot="content"]]:col-span-full [&_[data-slot="content"]]:text-sm [&_[data-slot="content"]]:leading-6',
+        // Footer styles:
+        '[&_[data-slot="footer"]]:col-span-full [&_[data-slot="footer"]]:text-xs [&_[data-slot="footer"]]:font-light [&_[data-slot="footer"]]:leading-6'
+    ],
+    variants: {
+        /**
+     * The variant of the alert
+     * @default info
+     */ variant: {
+            info: 'border-[#1A7FA7] bg-sky-light',
+            success: 'border-[#0F9B6E] bg-mint-light',
+            warning: 'border-[#C57C13] bg-[#FFF2DE]',
+            danger: 'border-[#C0385D] bg-red-light'
+        }
+    },
+    defaultVariants: {
+        variant: 'info'
+    }
+});
+const translations = {
+    close: {
+        nb: 'Lukk',
+        sv: 'Stäng',
+        en: 'Close'
+    },
+    showMore: {
+        nb: 'Les mer',
+        sv: 'Läs mer',
+        en: 'Read more'
+    },
+    showLess: {
+        nb: 'Vis mindre',
+        sv: 'Dölj',
+        en: 'Show less'
+    }
+};
+const Alertbox = ({ children, role, className, variant = 'info', isDismissable = false, isDismissed, onDismiss, isExpandable })=>{
+    const Icon = iconMap[variant];
+    const { locale } = useLocale();
+    const id = useId();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const isCollapsed = isExpandable && !isExpanded;
+    const [isUncontrolledVisible, setIsUncontrolledVisible] = useState(true);
+    const isVisible = isDismissed !== undefined ? !isDismissed : isUncontrolledVisible;
+    if (!isVisible) return;
+    const close = ()=>{
+        setIsUncontrolledVisible(false);
+        if (onDismiss) onDismiss();
+    };
+    const isInDevMode = process.env.NODE_ENV !== 'production';
+    if (isInDevMode && onDismiss && !isDismissable) {
+        console.warn('Passing an `onDismiss` callback without setting the `isDismissable` prop to `true` will not have any effect.');
+    }
+    if (isInDevMode && !children) {
+        console.error('`No children was passed to the <AlertBox/>` component.');
+        return;
+    }
+    const [firstChild, ...restChildren] = Children.toArray(children);
+    const lastChild = restChildren.pop();
+    return /*#__PURE__*/ jsxs("div", {
+        className: alertVariants({
+            className,
+            variant
+        }),
+        // The role prop is required to force consumers to consider and choose the appropriate alertbox role.
+        // role="none" will not have any effect on a div, so it can be omitted.
+        role: role === 'none' ? undefined : role,
+        children: [
+            /*#__PURE__*/ jsx(Icon, {}),
+            firstChild,
+            isDismissable && /*#__PURE__*/ jsx("button", {
+                className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus:outline-none focus:-outline-offset-8 focus:outline-black'),
+                onClick: close,
+                "aria-label": translations.close[locale],
+                children: /*#__PURE__*/ jsx(Close, {})
+            }),
+            isExpandable && /*#__PURE__*/ jsxs("button", {
+                className: cx('relative col-span-full row-start-2 -my-3 inline-flex max-w-fit cursor-pointer items-center gap-1 py-3 text-sm leading-6', // Focus styles:
+                'outline-none after:absolute after:bottom-3 after:left-0 after:right-0 after:h-0 after:bg-transparent after:transition-all after:duration-200', 'focus:after:h-[1px] focus:after:bg-black'),
+                onClick: ()=>setIsExpanded((prevState)=>!prevState),
+                "aria-expanded": isExpanded,
+                "aria-controls": id,
+                children: [
+                    isExpanded ? translations.showLess[locale] : translations.showMore[locale],
+                    /*#__PURE__*/ jsx(ChevronDown, {
+                        className: cx('transition-transform duration-150 motion-reduce:transition-none', isExpanded && 'rotate-180')
+                    })
+                ]
+            }),
+            !isCollapsed && restChildren.length > 0 && /*#__PURE__*/ jsx("div", {
+                className: "col-span-full grid gap-y-4",
+                id: id,
+                children: restChildren
+            }),
+            lastChild
+        ]
+    });
+};
+
+export { Alertbox as A };

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 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 } from 'react-aria-components';
 export { ListBoxItemProps as ComboboxItemProps, Form, I18nProvider, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
 import * as react from 'react';
+import { HTMLProps } from 'react';
 import { VariantProps } from 'cva';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -394,4 +395,108 @@ declare const _NumberField: react.ForwardRefExoticComponent<{
     withAddonDivider?: boolean | undefined;
 } & Omit<NumberFieldProps$1, "className" | "style" | "children" | "isDisabled" | "isReadOnly" | "hideStepper"> & react.RefAttributes<HTMLInputElement>>;
 
-export { _Button as Button, type ButtonProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxItem as ComboboxItem, type ComboboxProps, _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 };
+declare const alertVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "danger" | 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 Props = VariantProps<typeof alertVariants> & {
+    children: React.ReactNode;
+    /**
+     * The ARIA role for the alertbox.
+     */
+    role: 'alert' | 'status' | 'none';
+    /** Additional CSS className for the element. */
+    className?: string;
+    /**
+     * Controls if the alert is expandable or not
+     * @default false
+     */
+    isExpandable?: boolean;
+    /**
+     * Controls if the alert can be dismissed with a close button.
+     * @default false
+     */
+    isDismissable?: boolean;
+    /**
+     * Controls if the alert is rendered or not.
+     * This is used to control the open/closed state of the component; make the component "controlled".
+     * @default false
+     */
+    isDismissed?: boolean;
+    /**
+     * Callback that should be triggered when a dismissable alert is closed.
+     * This is used to control the open/closed state of the component; make the component "controlled".
+     */
+    onDismiss?: () => void;
+};
+declare const Alertbox: ({ children, role, className, variant, isDismissable, isDismissed, onDismiss, isExpandable, }: Props) => react_jsx_runtime.JSX.Element | undefined;
+
+type HeadingProps = HTMLProps<HTMLHeadingElement> & {
+    children: React.ReactNode;
+    /** The level of the heading */
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+};
+declare const Heading: ({ level, ...restProps }: HeadingProps) => react_jsx_runtime.JSX.Element;
+type ContentProps = HTMLProps<HTMLDivElement> & {
+    children: React.ReactNode;
+};
+declare const Content: (props: ContentProps) => react_jsx_runtime.JSX.Element;
+type FooterProps = HTMLProps<HTMLDivElement> & {
+    children: React.ReactNode;
+};
+declare const Footer: (props: FooterProps) => react_jsx_runtime.JSX.Element;
+
+export { Alertbox, type Props as AlertboxProps, _Button as Button, type ButtonProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxItem as ComboboxItem, type ComboboxProps, Content, type ContentProps, Footer, type FooterProps, Heading, 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

@@ -5,12 +5,13 @@ 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';
+export { A as Alertbox } from './Alertbox-client-J1P2mzVC.js';
 
 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',
+        'rounded-md 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
@@ -23,9 +24,8 @@ const input = cva({
             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'
+            false: 'px-3',
+            true: 'flex-1 !ring-0'
         }
     },
     defaultVariants: {
@@ -33,7 +33,12 @@ const input = cva({
         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 inputGroup = cx([
+    'inline-flex items-center gap-3 overflow-hidden rounded-md px-3 text-sm ring-1 ring-black focus-within:ring-2',
+    'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring',
+    // Make sure icons are the correct size
+    '[&_svg]:text-base'
+]);
 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'),
@@ -202,6 +207,12 @@ const ListBoxItem = (props)=>{
     });
 };
 
+function InputAddonDivider() {
+    return /*#__PURE__*/ jsx("span", {
+        className: "block h-6 w-px flex-none bg-black"
+    });
+}
+
 function Combobox(props, ref) {
     const { className, children, description, errorMessage, isLoading, label, isInvalid: _isInvalid, ...restProps } = props;
     const isInvalid = _isInvalid || errorMessage != null;
@@ -419,9 +430,7 @@ function TextField(props, ref) {
                 className: inputGroup,
                 children: [
                     leftAddon,
-                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(Divider$1, {
-                        className: "ml-3"
-                    }),
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     /*#__PURE__*/ jsx(Input, {
                         className: inputWithAlignment$1({
                             textAlign,
@@ -429,9 +438,7 @@ function TextField(props, ref) {
                         }),
                         ref: ref
                     }),
-                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(Divider$1, {
-                        className: "mr-3"
-                    }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     rightAddon
                 ]
             }) : /*#__PURE__*/ jsx(Input, {
@@ -446,11 +453,6 @@ function TextField(props, ref) {
         ]
     });
 }
-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
@@ -481,9 +483,7 @@ function NumberField(props, ref) {
                 className: inputGroup,
                 children: [
                     leftAddon,
-                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(Divider, {
-                        className: "ml-3"
-                    }),
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     /*#__PURE__*/ jsx(Input, {
                         className: inputWithAlignment({
                             textAlign,
@@ -491,9 +491,7 @@ function NumberField(props, ref) {
                         }),
                         ref: ref
                     }),
-                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(Divider, {
-                        className: "mr-3"
-                    }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     rightAddon
                 ]
             }) : /*#__PURE__*/ jsx(Input, {
@@ -508,11 +506,22 @@ function NumberField(props, ref) {
         ]
     });
 }
-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 };
+const Heading = ({ level, ...restProps })=>{
+    const Heading = `h${level}`;
+    return /*#__PURE__*/ jsx(Heading, {
+        ...restProps,
+        "data-slot": "heading"
+    });
+};
+const Content = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "content"
+    });
+const Footer = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "footer"
+    });
+
+export { _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, Content, Footer, Heading, _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.11",
+  "version": "2.0.0-canary.13",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -20,6 +20,7 @@
   "dependencies": {
     "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.1",
     "@react-aria/utils": "^3.23.0",
+    "@types/node": "^20.11.19",
     "cva": "1.0.0-beta.1",
     "react-aria-components": "^1.0.0"
   },