@obosbbl/grunnmuren-react 2.0.0-canary.41 → 2.0.0-canary.44

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import { RouterProvider, ButtonProps as ButtonProps$1, LinkProps, CheckboxProps
 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 { HTMLProps, Ref, ReactNode } from 'react';
+import { HTMLProps, ReactNode } from 'react';
 import { VariantProps } from 'cva';
 import { DateFormatterOptions } from 'react-aria';
 
@@ -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: Ref<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: Ref<HTMLDivElement>) => string | number | bigint | boolean | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined> | 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. */
@@ -811,13 +811,13 @@ declare const cardVariants: (props?: ({
     } | null | undefined;
 })) | undefined) => string;
 declare const Card: ({ children, className: _className, variant, ...restProps }: CardProps) => react_jsx_runtime.JSX.Element;
-type RACLinkProps = Pick<LinkProps, 'href' | 'routerOptions' | 'children'>;
-type CardLinkWrapperProps = RACLinkProps & {
-    children: React.ReactNode;
-};
-type CardLinkProps = {
+type CardLinkWrapperProps = {
+    children?: React.ReactNode;
     className?: string;
-} & (RACLinkProps | CardLinkWrapperProps);
+} & {
+    [K in keyof Omit<LinkProps, 'className' | 'children'>]?: never;
+};
+type CardLinkProps = (Omit<LinkProps, 'href'> & Required<Pick<LinkProps, 'href'>>) | CardLinkWrapperProps;
 /**
  * A component that creates a clickable area on a card.
  * It can be used either as a wrapper around a link or as a standalone link.
@@ -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

@@ -59,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;
@@ -1061,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 ****
@@ -1086,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
@@ -1180,9 +1188,9 @@ const cardLinkVariants = cva({
     // because it still renders with role="link" and tabindex="0" which makes it focusable.
     // So we need to render a div instead.
     /*#__PURE__*/ jsx("div", {
+        ...restProps,
         "data-slot": "card-link",
-        className: className,
-        ...restProps
+        className: className
     });
 };
 
@@ -1201,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.41",
+  "version": "2.0.0-canary.44",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"