@obosbbl/grunnmuren-react 2.0.0-canary.40 → 2.0.0-canary.43

package/dist/index.d.mts

@@ -1,8 +1,8 @@
-import { RouterProvider, 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 { RouterProvider, ButtonProps as ButtonProps$1, LinkProps, 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, Link } 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';
-import react__default, { HTMLProps, ForwardedRef, ReactNode } from 'react';
+import { HTMLProps, ReactNode } from 'react';
 import { VariantProps } from 'cva';
 import { DateFormatterOptions } from 'react-aria';
 
@@ -28,18 +28,18 @@ type GrunnmurenProviderProps = {
 declare function GrunnmurenProvider({ children, locale, navigate, useHref, }: GrunnmurenProviderProps): react_jsx_runtime.JSX.Element;
 
 type AccordionProps = {
-    children: react__default.ReactNode;
+    children: React.ReactNode;
     /** Additional CSS className for the element. */
     className?: string;
     /** Additional style properties for the element. */
-    style?: react__default.CSSProperties;
+    style?: React.CSSProperties;
 };
 type AccordionItemProps = {
-    children?: react__default.ReactNode;
+    children?: React.ReactNode;
     /** Additional CSS className for the element. */
     className?: string;
     /** Additional style properties for the element. */
-    style?: react__default.CSSProperties;
+    style?: React.CSSProperties;
     /** Whether the accordion is open (controlled) */
     isOpen?: boolean;
     /** Whether the accordion is open by default (uncontrolled) */
@@ -47,8 +47,8 @@ type AccordionItemProps = {
     /** Handler that is called when the accordion's open state changes */
     onOpenChange?: (isOpen: boolean) => void;
 };
-declare const _Accordion: react__default.ForwardRefExoticComponent<AccordionProps & react__default.RefAttributes<HTMLDivElement>>;
-declare const _AccordionItem: react__default.ForwardRefExoticComponent<AccordionItemProps & react__default.RefAttributes<HTMLDivElement>>;
+declare const _Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
+declare const _AccordionItem: react.ForwardRefExoticComponent<AccordionItemProps & react.RefAttributes<HTMLDivElement>>;
 
 type BadgeProps = VariantProps<typeof badgeVariants> & {
     children?: React.ReactNode;
@@ -249,7 +249,7 @@ type ButtonOrLinkProps$1 = VariantProps<typeof buttonVariants> & {
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
 };
-type ButtonProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps$1;
+type ButtonProps = (ButtonProps$1 | LinkProps) & ButtonOrLinkProps$1;
 declare const _Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 type CheckboxProps = {
@@ -686,14 +686,12 @@ type HeadingProps = HTMLProps<HTMLHeadingElement> & {
     _innerWrapper?: (children: React.ReactNode) => React.ReactNode;
 };
 declare const HeadingContext: react.Context<ContextValue<Partial<HeadingProps>, HTMLHeadingElement>>;
-declare const Heading: (props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) => react_jsx_runtime.JSX.Element;
 declare const ContentContext: react.Context<ContextValue<Partial<ContentProps>, HTMLDivElement>>;
 type ContentProps = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
     /** @private Used internally for slotted components */
     _outerWrapper?: (children: React.ReactNode) => React.ReactNode;
 };
-declare const Content: (props: ContentProps, ref: ForwardedRef<HTMLDivElement>) => string | number | boolean | Iterable<react.ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
 type MediaProps = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
 };
@@ -702,6 +700,8 @@ type FooterProps = HTMLProps<HTMLDivElement> & {
     children: React.ReactNode;
 };
 declare const Footer: (props: FooterProps) => react_jsx_runtime.JSX.Element;
+declare const _Heading: react.ForwardRefExoticComponent<Omit<HeadingProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+declare const _Content: react.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
 type BreadcrumbProps = {
     /** Additional CSS className for the element. */
@@ -837,4 +837,4 @@ type DateFormatterProps = {
  */
 declare const DateFormatter: ({ options: _options, value, children: render, }: DateFormatterProps) => ReactNode;
 
-export { _Accordion as Accordion, _AccordionItem as AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, _Backlink as Backlink, type BacklinkProps, _Badge as Badge, type BadgeProps, _Breadcrumb as Breadcrumb, type BreadcrumbProps, _Breadcrumbs as Breadcrumbs, type BreadcrumbsProps, _Button as Button, type ButtonProps, Card, CardLink, type CardLinkProps, type CardProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxItem as ComboboxItem, type ComboboxProps, Content, ContentContext, type ContentProps, DateFormatter, type DateFormatterProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, HeadingContext, type HeadingProps, type Locale, Media, type MediaProps, _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, _useLocale as useLocale };
+export { _Accordion as Accordion, _AccordionItem as AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, _Backlink as Backlink, type BacklinkProps, _Badge as Badge, type BadgeProps, _Breadcrumb as Breadcrumb, type BreadcrumbProps, _Breadcrumbs as Breadcrumbs, type BreadcrumbsProps, _Button as Button, type ButtonProps, Card, CardLink, type CardLinkProps, type CardProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxItem as ComboboxItem, type ComboboxProps, _Content as Content, ContentContext, type ContentProps, DateFormatter, type DateFormatterProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, _Heading as Heading, HeadingContext, type HeadingProps, type Locale, Media, type MediaProps, _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, _useLocale as useLocale };

package/dist/index.mjs

@@ -1,11 +1,11 @@
 'use client';
-import { I18nProvider, RouterProvider, useLocale, useContextProps, Provider, Link, Button as Button$1, Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, FieldError, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBox as ListBox$1, ComboBox, Group, Input, 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, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1 } from 'react-aria-components';
+import { I18nProvider, RouterProvider, useLocale, useContextProps, Provider, Link, Button as Button$1, Text, CheckboxContext, Checkbox as Checkbox$1, FieldError, Label as Label$1, CheckboxGroup as CheckboxGroup$1, ListBoxItem as ListBoxItem$1, ListBox as ListBox$1, ComboBox, Group, Input, 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, Breadcrumbs as Breadcrumbs$1, Breadcrumb as Breadcrumb$1 } from 'react-aria-components';
 export { Form } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, forwardRef, Children, useId, useState } from 'react';
-import { cx, cva, compose } from 'cva';
 import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, CloseCircle, ChevronRight, ChevronLeft } from '@obosbbl/grunnmuren-icons-react';
 import { useLayoutEffect } from '@react-aria/utils';
+import { cx, cva, compose } from 'cva';
+import { createContext, forwardRef, Children, useId, useState } from 'react';
 import { useProgressBar, useDateFormatter } from 'react-aria';
 
 function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
@@ -29,6 +29,7 @@ function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
 
 const HeadingContext = /*#__PURE__*/ createContext({});
 const Heading = (props, ref)=>{
+    // biome-ignore lint/style/noParameterAssign: fix when removing refs for React 19
     [props, ref] = useContextProps(props, ref, HeadingContext);
     const { children, level, className, _innerWrapper: innerWrapper, ...restProps } = props;
     const Element = `h${level}`;
@@ -41,6 +42,7 @@ const Heading = (props, ref)=>{
 };
 const ContentContext = /*#__PURE__*/ createContext({});
 const Content = (props, ref)=>{
+    // biome-ignore lint/style/noParameterAssign: fix when removing refs for React 19
     [props, ref] = useContextProps(props, ref, ContentContext);
     const { _outerWrapper: outerWrapper, ...restProps } = props;
     const content = /*#__PURE__*/ jsx("div", {
@@ -57,6 +59,8 @@ const Footer = (props)=>/*#__PURE__*/ jsx("div", {
         ...props,
         "data-slot": "footer"
     });
+const _Heading = /*#__PURE__*/ forwardRef(Heading);
+const _Content = /*#__PURE__*/ forwardRef(Content);
 
 function Accordion(props, ref) {
     const { children, className, ...restProps } = props;
@@ -129,6 +133,7 @@ function AccordionItem(props, ref) {
                                 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 focus-visible:outline-focus-inset",
                                 id: buttonId,
                                 onClick: handleOpenChange,
+                                type: "button",
                                 children: [
                                     children,
                                     /*#__PURE__*/ jsx(ChevronDown, {
@@ -426,8 +431,8 @@ function CheckmarkBox() {
 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 descriptionId = `desc${id}`;
+    const errorMessageId = `error${id}`;
     const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsx("div", {
         children: /*#__PURE__*/ jsxs(CheckboxContext.Provider, {
@@ -464,15 +469,6 @@ function Checkbox(props, ref) {
 }
 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 Description(props) {
     const { className, ...restProps } = props;
     return /*#__PURE__*/ jsx(Text, {
@@ -493,6 +489,15 @@ function Description(props) {
     });
 }
 
+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;
     // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
@@ -962,6 +967,7 @@ const Alertbox = ({ children, role, className, variant = 'info', isDismissable =
                 className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus-visible:outline-focus focus-visible:-outline-offset-8'),
                 onClick: close,
                 "aria-label": translations.close[locale],
+                type: "button",
                 children: /*#__PURE__*/ jsx(Close, {})
             }),
             isExpandable && /*#__PURE__*/ jsxs("button", {
@@ -970,6 +976,7 @@ const Alertbox = ({ children, role, className, variant = 'info', isDismissable =
                 onClick: ()=>setIsExpanded((prevState)=>!prevState),
                 "aria-expanded": isExpanded,
                 "aria-controls": id,
+                type: "button",
                 children: [
                     isExpanded ? translations.showLess[locale] : translations.showMore[locale],
                     /*#__PURE__*/ jsx(ChevronDown, {
@@ -1056,6 +1063,8 @@ const cardVariants = cva({
         '[&_[data-slot="heading"]]:leading-6',
         '[&_[data-slot="heading"]]:w-fit',
         '[&_[data-slot="heading"]]:text-pretty',
+        '[&_[data-slot="heading"]]:hyphens-auto',
+        '[&_[data-slot="heading"]]:[word-break:break-word]',
         // **** Content ****
         '[&_[data-slot="content"]]:grid [&_[data-slot="content"]]:auto-rows-max [&_[data-slot="content"]]:gap-y-4',
         // **** Media ****
@@ -1081,7 +1090,11 @@ const cardVariants = cva({
         '[&_[data-slot="heading"]_[data-slot="card-link"]]:transition-colors',
         '[&_[data-slot="heading"]_[data-slot="card-link"]:hover]:border-b-current',
         // Mimic heading styles for the card link if placed in the heading slot. This is necessary to make the custom underline align with the link text
-        '[&_[data-slot="heading"]_[data-slot="card-link"]]:heading-s [&_[data-slot="heading"]_[data-slot="card-link"]]:text-pretty [&_[data-slot="heading"]_[data-slot="card-link"]]:leading-6',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:heading-s',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:leading-6',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:text-pretty',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:hyphens-auto',
+        '[&_[data-slot="heading"]_[data-slot="card-link"]]:[word-break:break-word]',
         // **** Fail-safe for interactive elements ****
         // Make interactive elements clickable by themselves, while the rest of the card is clickable as a whole
         // The card is made clickable by a pseudo-element on the heading that covers the entire card
@@ -1196,4 +1209,4 @@ const cardLinkVariants = cva({
     return render ? render(formatted) : formatted;
 };
 
-export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Badge as Badge, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, Card, CardLink, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, Content, ContentContext, DateFormatter, Footer, GrunnmurenProvider, Heading, HeadingContext, Media, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxItem as SelectItem, _TextArea as TextArea, _TextField as TextField, _useLocale as useLocale };
+export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Badge as Badge, _Breadcrumb as Breadcrumb, _Breadcrumbs as Breadcrumbs, _Button as Button, Card, CardLink, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, _Content as Content, ContentContext, DateFormatter, Footer, GrunnmurenProvider, _Heading as Heading, HeadingContext, Media, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxItem as SelectItem, _TextArea as TextArea, _TextField as TextField, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.40",
+  "version": "2.0.0-canary.43",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -18,15 +18,15 @@
     "dist"
   ],
   "dependencies": {
-    "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.1",
+    "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.3",
     "@react-aria/utils": "^3.25.1",
     "@types/node": "^22.0.0",
-    "cva": "1.0.0-beta.1",
+    "cva": "1.0.0-beta.2",
     "react-aria": "^3.35.1",
     "react-aria-components": "^1.3.1"
   },
   "peerDependencies": {
-    "react": "^18"
+    "react": "^18 || ^19"
   },
   "scripts": {
     "build": "bunchee"