@obosbbl/grunnmuren-react 3.0.9 → 3.0.10

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import { RouterProvider, ButtonProps as ButtonProps$1, LinkProps, ContextValue,
 export { ListBoxItemProps as ComboboxItemProps, Form, Group, LabelProps, ListBoxItemProps as SelectItemProps, DisclosureGroup as UNSAFE_DisclosureGroup, DisclosureGroupProps as UNSAFE_DisclosureGroupProps } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { Ref, HTMLProps, ReactNode, RefAttributes, HTMLAttributes, RefObject, Dispatch, SetStateAction, ComponentProps, JSX } from 'react';
+import { Ref, HTMLProps, HTMLAttributes, ReactNode, RefAttributes, RefObject, Dispatch, SetStateAction, ComponentProps, JSX } from 'react';
 import * as cva from 'cva';
 import { VariantProps } from 'cva';
 import { DateFormatterOptions } from 'react-aria';
@@ -444,9 +444,8 @@ type ButtonOrLinkProps = {
 type BacklinkProps = (ButtonProps$1 | LinkProps) & ButtonOrLinkProps;
 declare function Backlink(props: BacklinkProps): react_jsx_runtime.JSX.Element;
 
-type CardProps = VariantProps<typeof cardVariants> & {
+type CardProps = VariantProps<typeof cardVariants> & HTMLAttributes<HTMLDivElement> & {
     children?: React.ReactNode;
-    className?: string;
 };
 declare const cardVariants: (props?: ({
     variant?: "subtle" | "outlined" | undefined;
@@ -702,7 +701,16 @@ declare function Tab(props: TabProps): react_jsx_runtime.JSX.Element;
  */
 declare function TabPanel(props: TabPanelProps): react_jsx_runtime.JSX.Element;
 
-type LinkListProps = React.HTMLProps<HTMLUListElement> & {
+type CustomLinkProps = LinkProps & {
+    children: ReactNode;
+};
+/**
+ * A basic link component that extends react-aria-components Link with consistent styling.
+ * Provides accessible focus styles and maintains design system consistency.
+ */
+declare const CustomLink: ({ children, className, ...restProps }: CustomLinkProps) => react_jsx_runtime.JSX.Element;
+
+type LinkListProps = React.HTMLProps<HTMLDivElement> & {
     children: JSX.Element | JSX.Element[];
 };
 declare const LinkList: ({ className, children, ...restProps }: LinkListProps) => react_jsx_runtime.JSX.Element;
@@ -712,4 +720,4 @@ type LinkListItemProps = LinkProps & {
 };
 declare const LinkListItem: ({ children, isExternal, className, ...restProps }: LinkListItemProps) => react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, Avatar, type AvatarProps, Backlink, type BacklinkProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonContext, type ButtonProps, Caption, type CaptionProps, Card, CardLink, type CardLinkProps, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, type ComboboxProps, ListBoxSection as ComboboxSection, Content, ContentContext, type ContentProps, DateFormatter, type DateFormatterProps, Description, type DescriptionProps, DisclosureStateContext, ErrorMessage, type ErrorMessageProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, HeadingContext, type HeadingProps, Label, type Locale, Media, MediaContext, type MediaProps, NumberField, type NumberFieldProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, type SelectProps, ListBoxSection as SelectSection, type TagGroupProps, type TagListProps, type TagProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Carousel as UNSAFE_Carousel, CarouselItem as UNSAFE_CarouselItem, type CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItems as UNSAFE_CarouselItems, type CarouselItemsProps as UNSAFE_CarouselItemsProps, type CarouselProps as UNSAFE_CarouselProps, Dialog as UNSAFE_Dialog, type DialogProps as UNSAFE_DialogProps, DialogTrigger as UNSAFE_DialogTrigger, type DialogTriggerProps as UNSAFE_DialogTriggerProps, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, type DisclosureButtonProps as UNSAFE_DisclosureButtonProps, DisclosurePanel as UNSAFE_DisclosurePanel, type DisclosurePanelProps as UNSAFE_DisclosurePanelProps, type DisclosureProps as UNSAFE_DisclosureProps, FileUpload as UNSAFE_FileUpload, type FileUploadProps as UNSAFE_FileUploadProps, Hero as UNSAFE_Hero, type HeroProps as UNSAFE_HeroProps, LinkList as UNSAFE_LinkList, LinkListItem as UNSAFE_LinkListItem, type LinkListItemProps as UNSAFE_LinkListItemProps, type LinkListProps as UNSAFE_LinkListProps, Modal as UNSAFE_Modal, type ModalProps as UNSAFE_ModalProps, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, type TabListProps as UNSAFE_TabListProps, TabPanel as UNSAFE_TabPanel, type TabPanelProps as UNSAFE_TabPanelProps, type TabProps as UNSAFE_TabProps, Tabs as UNSAFE_Tabs, type TabsProps as UNSAFE_TabsProps, Tag as UNSAFE_Tag, TagGroup as UNSAFE_TagGroup, TagList as UNSAFE_TagList, VideoLoop, _useLocale as useLocale };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alertbox, type Props as AlertboxProps, Avatar, type AvatarProps, Backlink, type BacklinkProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonContext, type ButtonProps, Caption, type CaptionProps, Card, CardLink, type CardLinkProps, type CardProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, type ComboboxProps, ListBoxSection as ComboboxSection, Content, ContentContext, type ContentProps, DateFormatter, type DateFormatterProps, Description, type DescriptionProps, DisclosureStateContext, ErrorMessage, type ErrorMessageProps, Footer, type FooterProps, GrunnmurenProvider, type GrunnmurenProviderProps, Heading, HeadingContext, type HeadingProps, Label, CustomLink as Link, type CustomLinkProps as LinkProps, type Locale, Media, MediaContext, type MediaProps, NumberField, type NumberFieldProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, type SelectProps, ListBoxSection as SelectSection, type TagGroupProps, type TagListProps, type TagProps, TextArea, type TextAreaProps, TextField, type TextFieldProps, Carousel as UNSAFE_Carousel, CarouselItem as UNSAFE_CarouselItem, type CarouselItemProps as UNSAFE_CarouselItemProps, CarouselItems as UNSAFE_CarouselItems, type CarouselItemsProps as UNSAFE_CarouselItemsProps, type CarouselProps as UNSAFE_CarouselProps, Dialog as UNSAFE_Dialog, type DialogProps as UNSAFE_DialogProps, DialogTrigger as UNSAFE_DialogTrigger, type DialogTriggerProps as UNSAFE_DialogTriggerProps, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, type DisclosureButtonProps as UNSAFE_DisclosureButtonProps, DisclosurePanel as UNSAFE_DisclosurePanel, type DisclosurePanelProps as UNSAFE_DisclosurePanelProps, type DisclosureProps as UNSAFE_DisclosureProps, FileUpload as UNSAFE_FileUpload, type FileUploadProps as UNSAFE_FileUploadProps, Hero as UNSAFE_Hero, type HeroProps as UNSAFE_HeroProps, LinkList as UNSAFE_LinkList, LinkListItem as UNSAFE_LinkListItem, type LinkListItemProps as UNSAFE_LinkListItemProps, type LinkListProps as UNSAFE_LinkListProps, Modal as UNSAFE_Modal, type ModalProps as UNSAFE_ModalProps, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, type TabListProps as UNSAFE_TabListProps, TabPanel as UNSAFE_TabPanel, type TabPanelProps as UNSAFE_TabPanelProps, type TabProps as UNSAFE_TabProps, Tabs as UNSAFE_Tabs, type TabsProps as UNSAFE_TabsProps, Tag as UNSAFE_Tag, TagGroup as UNSAFE_TagGroup, TagList as UNSAFE_TagList, VideoLoop, _useLocale as useLocale };

package/dist/index.mjs

@@ -1765,7 +1765,7 @@ const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _i
         ],
         children: /*#__PURE__*/ jsxs("div", {
             "data-slot": "file-upload",
-            className: "group grid w-72 max-w-full gap-2",
+            className: "group grid gap-2",
             "data-required": isRequired,
             children: [
                 /*#__PURE__*/ jsx(Provider, {
@@ -1811,7 +1811,7 @@ const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _i
                     })
                 }),
                 controlledOrUncontrolledFiles.length > 0 && /*#__PURE__*/ jsx("ul", {
-                    className: "mt-4 grid gap-y-2",
+                    className: "mt-4 grid max-w-fit gap-y-2",
                     children: controlledOrUncontrolledFiles.map((file, fileIndex)=>{
                         let fileName = file.name;
                         if (fileTriggerProps.acceptDirectory && file.webkitRelativePath !== '') {
@@ -1825,9 +1825,8 @@ const FileUpload = ({ children, files: _files, onChange, validate, isInvalid: _i
                                     className: cx('flex items-center justify-between gap-2 rounded-lg border-2 px-4 py-2', hasError ? 'border-red bg-red-light' : 'border-gray bg-gray-lightest'),
                                     children: [
                                         fileName,
-                                        ' ',
                                         /*#__PURE__*/ jsx("button", {
-                                            className: cx('-m-2 grid h-11 w-11 shrink-0 cursor-pointer place-items-center rounded-xl', // Focus styles
+                                            className: cx('self-start', '-m-2 grid h-11 w-11 shrink-0 cursor-pointer place-items-center rounded-xl', // Focus styles
                                             'focus-visible:-outline-offset-8 focus-visible:outline-focus'),
                                             onClick: ()=>{
                                                 // For controlled component
@@ -2506,12 +2505,23 @@ const tabsVariants = cva({
     });
 }
 
+/**
+ * A basic link component that extends react-aria-components Link with consistent styling.
+ * Provides accessible focus styles and maintains design system consistency.
+ */ const CustomLink = ({ children, className, ...restProps })=>{
+    return /*#__PURE__*/ jsx(Link, {
+        ...restProps,
+        className: cx(className, 'cursor-pointer font-medium focus-visible:outline-focus-offset'),
+        children: children
+    });
+};
+
 const LinkList = ({ className, children, ...restProps })=>{
     const numberofLinks = Children.count(children);
     return /*#__PURE__*/ jsx("div", {
         className: cx(className, '@container'),
+        ...restProps,
         children: /*#__PURE__*/ jsx("ul", {
-            ...restProps,
             className: cx('min-w-fit', // Hide dividers at the top of the list (overflow-y) and prevents arrow icon from overflowing container when animated to the right (overflow-x)
             'overflow-hidden', // Add a small gap between items that fits the divider lines (this way the divider line don't take up any space in each item)
             'grid auto-rows-max gap-y-0.25', // Gaps for when the list is displayed in multiple columns
@@ -2551,4 +2561,4 @@ const LinkListItem = ({ children, isExternal, className, ...restProps })=>{
     });
 };
 
-export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, LinkList as UNSAFE_LinkList, LinkListItem as UNSAFE_LinkListItem, Modal as UNSAFE_Modal, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Tabs as UNSAFE_Tabs, Tag as UNSAFE_Tag, TagGroup as UNSAFE_TagGroup, TagList as UNSAFE_TagList, VideoLoop, _useLocale as useLocale };
+export { Accordion, AccordionItem, Alertbox, Avatar, Backlink, Badge, Breadcrumb, Breadcrumbs, Button, ButtonContext, Caption, Card, CardLink, Checkbox, CheckboxGroup, Combobox, ListBoxHeader as ComboboxHeader, ListBoxItem as ComboboxItem, ListBoxSection as ComboboxSection, Content, ContentContext, DateFormatter, Description, DisclosureStateContext, ErrorMessage, Footer, GrunnmurenProvider, Heading, HeadingContext, Label, CustomLink as Link, Media, MediaContext, NumberField, Radio, RadioGroup, Select, ListBoxHeader as SelectHeader, ListBoxItem as SelectItem, ListBoxSection as SelectSection, TextArea, TextField, Carousel as UNSAFE_Carousel, CarouselItem as UNSAFE_CarouselItem, CarouselItems as UNSAFE_CarouselItems, Dialog as UNSAFE_Dialog, DialogTrigger as UNSAFE_DialogTrigger, Disclosure as UNSAFE_Disclosure, DisclosureButton as UNSAFE_DisclosureButton, DisclosurePanel as UNSAFE_DisclosurePanel, FileUpload as UNSAFE_FileUpload, Hero as UNSAFE_Hero, LinkList as UNSAFE_LinkList, LinkListItem as UNSAFE_LinkListItem, Modal as UNSAFE_Modal, Tab as UNSAFE_Tab, TabList as UNSAFE_TabList, TabPanel as UNSAFE_TabPanel, Tabs as UNSAFE_Tabs, Tag as UNSAFE_Tag, TagGroup as UNSAFE_TagGroup, TagList as UNSAFE_TagList, VideoLoop, _useLocale as useLocale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.0.9",
+  "version": "3.0.10",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"