@obosbbl/grunnmuren-react 3.0.1 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +11 -1
- package/dist/index.mjs +75 -14
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -702,4 +702,14 @@ declare function Tab(props: TabProps): react_jsx_runtime.JSX.Element;
|
|
|
702
702
|
*/
|
|
703
703
|
declare function TabPanel(props: TabPanelProps): react_jsx_runtime.JSX.Element;
|
|
704
704
|
|
|
705
|
-
|
|
705
|
+
type LinkListProps = React.HTMLProps<HTMLUListElement> & {
|
|
706
|
+
children: JSX.Element | JSX.Element[];
|
|
707
|
+
};
|
|
708
|
+
declare const LinkList: ({ className, children, ...restProps }: LinkListProps) => react_jsx_runtime.JSX.Element;
|
|
709
|
+
type LinkListItemProps = LinkProps & {
|
|
710
|
+
children: ReactNode;
|
|
711
|
+
isExternal?: boolean;
|
|
712
|
+
};
|
|
713
|
+
declare const LinkListItem: ({ children, isExternal, ...restProps }: LinkListItemProps) => react_jsx_runtime.JSX.Element;
|
|
714
|
+
|
|
715
|
+
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 };
|
package/dist/index.mjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
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, ListBoxSection as ListBoxSection$1, Header, 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, ButtonContext as ButtonContext$1, DisclosureContext, DisclosureGroupStateContext, DEFAULT_SLOT, useSlottedContext, FormContext, FieldErrorContext, LabelContext, InputContext, DialogTrigger as DialogTrigger$1, Modal as Modal$1, Dialog as Dialog$1, ModalOverlay as ModalOverlay$1, TagGroup as TagGroup$1, TagList as TagList$1, Tag as Tag$1, GroupContext, Tabs as Tabs$1, TabListStateContext, TabList as TabList$1, Tab as Tab$1, TabPanel as TabPanel$1 } from 'react-aria-components';
|
|
3
3
|
export { Form, Group, DisclosureGroup as UNSAFE_DisclosureGroup } from 'react-aria-components';
|
|
4
4
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
5
|
-
import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, Error, ChevronRight, ChevronLeft, PlayerPause, PlayerPlay, Trash, User } from '@obosbbl/grunnmuren-icons-react';
|
|
5
|
+
import { ChevronDown, LoadingSpinner, Check, Close, InfoCircle, CheckCircle, Warning, Error, ChevronRight, ChevronLeft, PlayerPause, PlayerPlay, Trash, User, ArrowRight, Download, LinkExternal } from '@obosbbl/grunnmuren-icons-react';
|
|
6
6
|
import { useLayoutEffect, filterDOMProps, mergeRefs, mergeProps, useObjectRef, useFormReset, useUpdateEffect } from '@react-aria/utils';
|
|
7
7
|
import { cva, cx, compose } from 'cva';
|
|
8
8
|
import { createContext, Children, useId, useState, useRef, useEffect, useContext, useCallback } from 'react';
|
|
@@ -174,7 +174,7 @@ function AccordionItem(props) {
|
|
|
174
174
|
_innerWrapper: (children)=>/*#__PURE__*/ jsxs("button", {
|
|
175
175
|
"aria-controls": contentId,
|
|
176
176
|
"aria-expanded": isOpen,
|
|
177
|
-
// Use outline with offset as focus indicator, this does not cover the left
|
|
177
|
+
// Use outline with offset as focus indicator, this does not cover the left sky border on the expanded content and works with or without a background color on the accordion container
|
|
178
178
|
className: "flex min-h-[44px] w-full cursor-pointer 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",
|
|
179
179
|
id: buttonId,
|
|
180
180
|
onClick: handleOpenChange,
|
|
@@ -192,7 +192,7 @@ function AccordionItem(props) {
|
|
|
192
192
|
ContentContext,
|
|
193
193
|
{
|
|
194
194
|
className: // Uses pseudo element for vertical padding, since that doesn't affect the height when the accordion is closed
|
|
195
|
-
'text-sm font-light leading-6 px-3.5 relative overflow-hidden border-
|
|
195
|
+
'text-sm font-light leading-6 px-3.5 relative overflow-hidden border-sky border-l-[3px] before:relative before:block before:h-1.5 after:relative after:block after:h-1.5',
|
|
196
196
|
role: 'region',
|
|
197
197
|
inert: !isOpen,
|
|
198
198
|
'aria-labelledby': buttonId,
|
|
@@ -481,17 +481,22 @@ function CheckmarkBox() {
|
|
|
481
481
|
// TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
|
|
482
482
|
'mt-[calc((1em_*_1.75_-_24px)_/_2)] h-[24px] w-[24px]',
|
|
483
483
|
// selected
|
|
484
|
-
'group-data-selected
|
|
484
|
+
'group-data-selected:group-not-data-hovered:group-not-data-invalid:border-blue group-data-selected:group-not-data-hovered:group-not-data-invalid:bg-blue',
|
|
485
|
+
'group-data-selected:group-not-data-hovered:group-data-invalid:border-red group-data-selected:group-not-data-hovered:group-data-invalid:bg-red',
|
|
485
486
|
// focus
|
|
486
487
|
'group-data-focus-visible:outline-focus-offset',
|
|
487
488
|
// hovered
|
|
488
|
-
'group-data-hovered:group-data-invalid:
|
|
489
|
+
'group-data-hovered:group-data-invalid:bg-red-light',
|
|
490
|
+
'group-data-hovered:border-blue',
|
|
491
|
+
'group-data-hovered:bg-sky',
|
|
492
|
+
'group-data-hovered:group-data-selected:group-not-data-invalid:border-blue-dark',
|
|
493
|
+
'group-data-hovered:group-data-selected:group-not-data-invalid:bg-blue-dark',
|
|
489
494
|
// invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
|
|
490
495
|
// so we use an inner shadow of 1 px instead to pad the actual border
|
|
491
|
-
'group-data-invalid:
|
|
496
|
+
'group-data-invalid:border-red group-data-invalid:shadow-[inset_0_0_0_1px] group-data-invalid:shadow-red'
|
|
492
497
|
]),
|
|
493
498
|
children: /*#__PURE__*/ jsx(Check, {
|
|
494
|
-
className: "h-full w-full opacity-0 group-data-selected:opacity-100"
|
|
499
|
+
className: "h-full w-full opacity-0 group-data-invalid:group-data-hovered:group-data-selected:text-red group-data-selected:opacity-100"
|
|
495
500
|
})
|
|
496
501
|
});
|
|
497
502
|
}
|
|
@@ -725,9 +730,9 @@ const defaultClasses = cx([
|
|
|
725
730
|
// TODO: 1.75 here is the unit less lineheight, altough we use 1.75rem as the line height, so there is a mismatch here. Revisit this when we've worked on typography in v2. Should this be a CSS custom property instead?
|
|
726
731
|
'before:mt-[calc((1em_*_1.75_-_24px)_/_2)] before:h-[24px] before:w-[24px]',
|
|
727
732
|
// selected
|
|
728
|
-
'data-selected:before:border-black data-selected:before:bg-
|
|
733
|
+
'data-selected:before:border-black data-selected:before:bg-blue data-selected:before:shadow-[inset_0_0_0_4px_rgb(255,255,255)]',
|
|
729
734
|
// hover
|
|
730
|
-
'data-hovered:data-invalid:before:bg-red-light data-hovered:before:border-
|
|
735
|
+
'data-hovered:data-selected:before:border-blue-dark data-hovered:data-invalid:before:bg-red-light data-hovered:data-selected:before:bg-blue-dark data-hovered:before:border-blue data-hovered:before:bg-sky',
|
|
731
736
|
// focus
|
|
732
737
|
'data-focus-visible:before:ring-focus-offset',
|
|
733
738
|
// invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
|
|
@@ -1947,12 +1952,23 @@ const Dialog = ({ className, children, ...restProps })=>{
|
|
|
1947
1952
|
const tagVariants = cva({
|
|
1948
1953
|
base: [
|
|
1949
1954
|
'relative flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 font-medium text-sm transition-colors duration-200',
|
|
1955
|
+
// Resting
|
|
1956
|
+
'border-2 border-black bg-white text-black',
|
|
1950
1957
|
//Focus
|
|
1951
1958
|
'focus-visible:outline-focus-offset',
|
|
1952
|
-
//
|
|
1953
|
-
'
|
|
1954
|
-
//
|
|
1955
|
-
|
|
1959
|
+
// Hover
|
|
1960
|
+
' data-hovered:bg-sky',
|
|
1961
|
+
// Selected
|
|
1962
|
+
// Allows removing
|
|
1963
|
+
'data-allows-removing:border-transparent',
|
|
1964
|
+
'data-allows-removing:bg-blue',
|
|
1965
|
+
'data-allows-removing:data-hovered:bg-blue-dark',
|
|
1966
|
+
'data-allows-removing:text-white',
|
|
1967
|
+
// Selected
|
|
1968
|
+
'aria-selected:border-transparent',
|
|
1969
|
+
'aria-selected:bg-blue',
|
|
1970
|
+
'aria-selected:data-hovered:bg-blue-dark',
|
|
1971
|
+
'aria-selected:text-white',
|
|
1956
1972
|
//Icons
|
|
1957
1973
|
'[&_svg]:h-4 [&_svg]:w-4'
|
|
1958
1974
|
]
|
|
@@ -2484,4 +2500,49 @@ const tabsVariants = cva({
|
|
|
2484
2500
|
});
|
|
2485
2501
|
}
|
|
2486
2502
|
|
|
2487
|
-
|
|
2503
|
+
const LinkList = ({ className, children, ...restProps })=>{
|
|
2504
|
+
const numberofLinks = Children.count(children);
|
|
2505
|
+
return /*#__PURE__*/ jsx("div", {
|
|
2506
|
+
className: "@container",
|
|
2507
|
+
children: /*#__PURE__*/ jsx("ul", {
|
|
2508
|
+
...restProps,
|
|
2509
|
+
className: cx(className, // Hide dividers at the top of the list (overflow-y) and prevents arrow icon from overflowing container when animated to the right (overflow-x)
|
|
2510
|
+
'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)
|
|
2511
|
+
'grid gap-y-0.25', // Gaps for when the list is displayed in multiple columns
|
|
2512
|
+
'@lg:gap-x-12 @md:gap-x-9 @sm:gap-x-4 @xl:gap-x-16', numberofLinks > 5 && [
|
|
2513
|
+
'@xl:grid-cols-2',
|
|
2514
|
+
numberofLinks > 10 && '@4xl:grid-cols-3'
|
|
2515
|
+
]),
|
|
2516
|
+
children: children
|
|
2517
|
+
})
|
|
2518
|
+
});
|
|
2519
|
+
};
|
|
2520
|
+
const LinkListItem = ({ children, isExternal, ...restProps })=>{
|
|
2521
|
+
let Icon = ArrowRight;
|
|
2522
|
+
let iconTransition = 'group-hover:motion-safe:translate-x-1';
|
|
2523
|
+
if (restProps.download) {
|
|
2524
|
+
Icon = Download;
|
|
2525
|
+
iconTransition = 'group-hover:motion-safe:translate-y-1';
|
|
2526
|
+
} else if (isExternal) {
|
|
2527
|
+
iconTransition = 'group-hover:motion-safe:-translate-y-0.5 group-hover:motion-safe:translate-x-0.5';
|
|
2528
|
+
Icon = LinkExternal;
|
|
2529
|
+
}
|
|
2530
|
+
return /*#__PURE__*/ jsx("li", {
|
|
2531
|
+
// Creates divider lines that works in any grid layout and with the focus ring
|
|
2532
|
+
className: "after:-top-0.25 relative p-0.75 after:absolute after:right-0 after:left-0 after:h-0.25 after:w-full after:bg-gray-light",
|
|
2533
|
+
children: /*#__PURE__*/ jsxs(Link, {
|
|
2534
|
+
className: cx('group paragraph flex cursor-pointer justify-between gap-x-2 py-3.5 font-medium no-underline focus-visible:outline-focus'),
|
|
2535
|
+
...restProps,
|
|
2536
|
+
children: [
|
|
2537
|
+
/*#__PURE__*/ jsx("span", {
|
|
2538
|
+
children: children
|
|
2539
|
+
}),
|
|
2540
|
+
/*#__PURE__*/ jsx(Icon, {
|
|
2541
|
+
className: cx('shrink-0 motion-safe:transition-transform', iconTransition)
|
|
2542
|
+
})
|
|
2543
|
+
]
|
|
2544
|
+
})
|
|
2545
|
+
});
|
|
2546
|
+
};
|
|
2547
|
+
|
|
2548
|
+
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 };
|