@obosbbl/grunnmuren-react 2.0.0-canary.16 → 2.0.0-canary.18

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 } from 'react-aria-components';
+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';
 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';
@@ -570,4 +570,33 @@ declare const _Breadcrumbs: react.ForwardRefExoticComponent<{
     style?: react.CSSProperties | undefined;
 } & Omit<BreadcrumbsProps$1<BreadcrumbProps>, "className" | "style"> & react.RefAttributes<HTMLOListElement>>;
 
-export { _Accordion as Accordion, _AccordionItem as AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, _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 };
+type BacklinkProps = {
+    /** Additional CSS className for the element. */
+    className?: string;
+    /** Additional style properties for the element. */
+    style?: React.CSSProperties;
+    /** The URL to navigate to when clicking 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;
+} & Omit<LinkProps, 'className' | 'style'>;
+declare const _Backlink: react.ForwardRefExoticComponent<{
+    /** Additional CSS className for the element. */
+    className?: string | undefined;
+    /** Additional style properties for the element. */
+    style?: react.CSSProperties | undefined;
+    /** The URL to navigate to when clicking the backlink. */
+    href?: string | undefined;
+    /** 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;
+} & Omit<LinkProps, "className" | "style"> & 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

@@ -4,7 +4,7 @@ export { Form } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useLayoutEffect, createContext, forwardRef, Children, useId, useState, useRef } from 'react';
 import { cx, cva, compose } from 'cva';
-import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, CloseCircle, ChevronRight } from '@obosbbl/grunnmuren-icons-react';
+import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, CloseCircle, ChevronRight, ChevronLeft } from '@obosbbl/grunnmuren-icons-react';
 import { mergeRefs } from '@react-aria/utils';
 
 function GrunnmurenProvider({ children, locale = 'nb', navigate }) {
@@ -50,16 +50,18 @@ const Footer = (props)=>/*#__PURE__*/ jsx("div", {
     });
 
 function Accordion(props, ref) {
-    const { children, ...restProps } = props;
+    const { children, className, ...restProps } = props;
     const childCount = Children.count(children);
     return /*#__PURE__*/ jsx("div", {
         ...restProps,
         ref: ref,
+        className: cx('rounded-lg bg-white', className),
         children: Children.map(children, (child, index)=>/*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     child,
-                    index < childCount - 1 && /*#__PURE__*/ jsx("hr", {
-                        className: "border-gray-light",
+                    index < childCount - 1 && // Margin is added to enable support for containers with a background color
+                    /*#__PURE__*/ jsx("hr", {
+                        className: "mx-2 border-gray-light",
                         "aria-hidden": true
                     })
                 ]
@@ -99,7 +101,7 @@ function AccordionItem(props, ref) {
     };
     return /*#__PURE__*/ jsx("div", {
         ...restProps,
-        className: cx('group relative', className),
+        className: cx('group relative px-2', className),
         ref: ref,
         "data-open": isOpen,
         children: /*#__PURE__*/ jsx(Provider, {
@@ -107,14 +109,15 @@ function AccordionItem(props, ref) {
                 [
                     HeadingContext,
                     {
-                        className: 'font-semibold leading-7',
+                        // Negative margin to strech the button to the entire with of the accordion (to support containers with a background color)
+                        className: 'font-semibold leading-7 -mx-2',
                         // Supply a default level here to make this typecheck ok. Will be overwritten with the consumers set heading level anyways
                         level: 3,
                         _innerWrapper: (children)=>/*#__PURE__*/ jsxs("button", {
                                 "aria-controls": contentId,
                                 "aria-expanded": isOpen,
-                                // the z-index is necessary for the focus ring to be drawn above the left border of the content
-                                className: "relative z-10 flex min-h-[44px] w-full items-center justify-between gap-1.5 rounded-sm py-3.5 text-left focus:outline-none focus-visible:ring  focus-visible:ring-black",
+                                // Use outline with offset as focus indicator, this does not cover the left mint border on the expanded content and works with or without a background color on the accordion container
+                                className: "flex min-h-[44px] w-full items-center justify-between gap-1.5 rounded-lg px-2 py-3.5 text-left focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-[-6px] focus-visible:outline-black",
                                 id: buttonId,
                                 onClick: handleOpenChange,
                                 children: [
@@ -923,4 +926,24 @@ function Breadcrumb(props, ref) {
 }
 const _Breadcrumb = /*#__PURE__*/ forwardRef(Breadcrumb);
 
-export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, Content, ContentContext, Footer, GrunnmurenProvider, Heading, HeadingContext, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxItem as SelectItem, _TextArea as TextArea, _TextField as TextField };
+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 focus-visible:ring focus-visible:ring-black'),
+        ...restProps,
+        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')
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: cx('border-b-2 border-t-2 border-transparent leading-none transition-colors duration-300', withUnderline ? 'border-b-black' : 'hover:border-b-black'),
+                children: children
+            })
+        ]
+    });
+}
+const _Backlink = /*#__PURE__*/ forwardRef(Backlink);
+
+export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, Content, ContentContext, Footer, GrunnmurenProvider, Heading, HeadingContext, _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.16",
+  "version": "2.0.0-canary.18",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"