@obosbbl/grunnmuren-react 2.0.0-canary.12 → 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,6 +5,7 @@ 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');
@@ -507,4 +508,20 @@ function NumberField(props, ref) {
 }
 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.12",
+  "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"
   },