@obosbbl/grunnmuren-react 2.0.0-canary.35 → 2.0.0-canary.37

package/dist/index.d.mts

@@ -5,6 +5,12 @@ import * as react from 'react';
 import react__default, { HTMLProps, ForwardedRef } from 'react';
 import { VariantProps } from 'cva';
 
+type Locale = 'nb' | 'sv' | 'en';
+/**
+ * Returns the locale set in `<GrunnmurenProvider />`
+ */
+declare function _useLocale(): Locale;
+
 type RouterProviderProps = React.ComponentProps<typeof RouterProvider>;
 type GrunnmurenProviderProps = {
     children: React.ReactNode;
@@ -12,7 +18,7 @@ type GrunnmurenProviderProps = {
      *  The locale to apply to the children.
      *  @default nb
      */
-    locale?: 'nb' | 'sv' | 'en';
+    locale?: Locale;
     /** The router to use for client side navigation */
     navigate?: RouterProviderProps['navigate'];
     /** Converts a router-specific href to a native HTML href, e.g. prepending a base path */
@@ -724,4 +730,4 @@ type ButtonOrLinkProps = {
 type BacklinkProps = (ButtonProps$1 | React.ComponentPropsWithoutRef<typeof Link>) & ButtonOrLinkProps;
 declare const _Backlink: react.ForwardRefExoticComponent<BacklinkProps & react.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
-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, _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 };
+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, _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, type Locale, _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,5 +1,5 @@
 'use client';
-import { I18nProvider, RouterProvider, 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, useLocale, 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, 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';
 export { Form } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, forwardRef, Children, useId, useState, useRef } from 'react';
@@ -18,6 +18,14 @@ function GrunnmurenProvider({ children, locale = 'nb', navigate, useHref }) {
     });
 }
 
+/**
+ * Returns the locale set in `<GrunnmurenProvider />`
+ */ function _useLocale() {
+    // a small wrapper around react-arias useLocale with a simpler return type with only the locales that we actually support
+    const locale = useLocale();
+    return locale.locale;
+}
+
 const HeadingContext = /*#__PURE__*/ createContext({});
 const Heading = (props, ref)=>{
     [props, ref] = useContextProps(props, ref, HeadingContext);
@@ -97,7 +105,7 @@ function AccordionItem(props, ref) {
     };
     return /*#__PURE__*/ jsx("div", {
         ...restProps,
-        className: cx('group relative px-2', className),
+        className: cx('relative px-2', className),
         ref: ref,
         "data-open": isOpen,
         children: /*#__PURE__*/ jsx(Provider, {
@@ -113,7 +121,7 @@ function AccordionItem(props, ref) {
                                 "aria-controls": contentId,
                                 "aria-expanded": isOpen,
                                 // 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",
+                                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,
                                 children: [
@@ -190,7 +198,7 @@ const _Badge = /*#__PURE__*/ forwardRef(Badge);
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
  */ const buttonVariants = cva({
     base: [
-        'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-all duration-200 focus:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-offset-2'
+        'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors duration-200 focus-visible:outline-focus-offset'
     ],
     variants: {
         /**
@@ -206,9 +214,9 @@ const _Badge = /*#__PURE__*/ forwardRef(Badge);
      * Adjusts the color of the button for usage on different backgrounds.
      * @default green
      */ color: {
-            green: 'focus-visible:ring-black',
-            mint: 'focus-visible:ring-mint focus-visible:ring-offset-green-dark',
-            white: 'focus-visible:ring-white focus-visible:ring-offset-blue'
+            green: 'focus-visible:outline-focus',
+            mint: 'focus-visible:outline-focus focus-visible:outline-mint',
+            white: 'focus-visible:outline-focus focus-visible:outline-white'
         },
         /**
      * When the button is without text, but with a single icon.
@@ -324,24 +332,26 @@ const formField = cx('group flex flex-col gap-2');
 const formFieldError = cx('w-fit rounded-sm bg-red-light px-2 py-1 text-sm leading-6 text-red');
 const input = cva({
     base: [
+        // All inputs should always have a white background (this also ensures that type="search" on Safri doesn't get a gray background)
+        'bg-white',
         // Use box-content to enable auto width based on number of characters (size)
         // Setting min-height to prevent the input from collapsing in Safari
         // Combining these with a padding-y as base classes makes it easier to standardize the height (44px) of all inputs
         'box-content min-h-6 py-2.5',
         'rounded-md text-base font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
         // invalid styles
-        'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red',
+        'group-data-[invalid]:ring-focus group-data-[invalid]:ring-red',
         // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
         'appearance-none'
     ],
     variants: {
         // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
         focusModifier: {
-            focus: 'focus:ring-2 group-data-[invalid]:focus:ring',
-            visible: 'data-[focus-visible]:ring-2 group-data-[invalid]:data-[focus-visible]:ring'
+            focus: 'focus:ring-focus group-data-[invalid]:focus:ring',
+            visible: 'data-[focus-visible]:ring-focus group-data-[invalid]:data-[focus-visible]:ring'
         },
         isGrouped: {
-            false: 'bg-white px-3',
+            false: 'px-3',
             true: 'flex-1 !ring-0'
         }
     },
@@ -351,8 +361,8 @@ const input = cva({
     }
 });
 const inputGroup = cx([
-    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-2',
-    'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring'
+    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
+    'group-data-[invalid]:ring-focus group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring'
 ]);
 const dropdown = {
     popover: cx('min-w-[--trigger-width] overflow-y-auto rounded-md border border-black bg-white shadow data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out'),
@@ -388,7 +398,7 @@ function CheckmarkBox() {
             // selected
             'group-data-[selected]:!border-green group-data-[selected]:!bg-green',
             // focus
-            'group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-black group-data-[focus-visible]:ring-offset-[9px]',
+            'group-data-[focus-visible]:outline-focus-offset',
             // hovered
             'group-data-[hovered]:border-green group-data-[hovered]:group-data-[invalid]:border-red group-data-[hovered]:bg-green-lightest group-data-[hovered]:group-data-[invalid]:bg-red-light',
             // 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
@@ -625,7 +635,7 @@ const defaultClasses = cx([
     // hover
     'data-[hovered]:before:border-green data-[hovered]:before:bg-green-lightest data-[hovered]:data-[invalid]:before:bg-red-light',
     // focus
-    'data-[focus-visible]:before:ring data-[focus-visible]:before:ring-black data-[focus-visible]:before:ring-offset-[9px]',
+    'data-[focus-visible]:before:ring-focus-offset',
     // 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
     // so we use an inner outline to artifically pad the border
     'data-[invalid]:before:outline-solid data-[invalid]:before:border-red data-[invalid]:data-[selected]:before:!bg-red data-[invalid]:before:outline data-[invalid]:before:outline-[3px] data-[invalid]:before:outline-offset-[-3px] data-[invalid]:before:outline-red'
@@ -903,7 +913,7 @@ const translations = {
 };
 const Alertbox = ({ children, role, className, variant = 'info', isDismissable = false, isDismissed, onDismiss, isExpandable })=>{
     const Icon = iconMap[variant];
-    const { locale } = useLocale();
+    const locale = _useLocale();
     const id = useId();
     const [isExpanded, setIsExpanded] = useState(false);
     const isCollapsed = isExpandable && !isExpanded;
@@ -936,14 +946,14 @@ const Alertbox = ({ children, role, className, variant = 'info', isDismissable =
             /*#__PURE__*/ jsx(Icon, {}),
             firstChild,
             isDismissable && /*#__PURE__*/ jsx("button", {
-                className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus-visible:outline-none focus-visible:-outline-offset-8 focus-visible:outline-black'),
+                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],
                 children: /*#__PURE__*/ jsx(Close, {})
             }),
             isExpandable && /*#__PURE__*/ jsxs("button", {
                 className: cx('relative col-span-full row-start-2 -my-3 inline-flex max-w-fit cursor-pointer items-center gap-1 py-3 text-sm leading-6', // Focus styles:
-                'outline-none after:absolute after:bottom-3 after:left-0 after:right-0 after:h-0 after:bg-transparent after:transition-all after:duration-200', 'focus-visible:after:h-[2px] focus-visible:after:bg-black'),
+                'outline-none after:absolute after:bottom-3 after:left-0 after:right-0 after:h-0', 'focus-visible:after:h-[2px] focus-visible:after:bg-black'),
                 onClick: ()=>setIsExpanded((prevState)=>!prevState),
                 "aria-expanded": isExpanded,
                 "aria-controls": id,
@@ -985,7 +995,7 @@ function Breadcrumb(props, ref) {
             href ? /*#__PURE__*/ jsx(Link, {
                 href: href,
                 // use outline instead of ring for focus marker that can be offset without creating a white background between the focus marker and the element content
-                className: "rounded-sm focus:outline-none group-last:no-underline data-[focus-visible]:outline data-[focus-visible]:outline-offset-2 data-[focus-visible]:outline-black",
+                className: "rounded-sm data-[focus-visible]:focus-visible:outline-focus focus:outline-none group-last:no-underline",
                 children: children
             }) : children,
             /*#__PURE__*/ jsx(ChevronRight, {
@@ -1003,7 +1013,7 @@ function Backlink(props, ref) {
     const { className, children, withUnderline, ...restProps } = props;
     const Component = isLinkProps(props) ? Link : Button$1;
     return /*#__PURE__*/ jsxs(Component, {
-        className: cx(className, 'group flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 no-underline focus:outline-none data-[focus-visible]:ring data-[focus-visible]:ring-black'),
+        className: cx(className, 'group flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 no-underline focus-visible:outline-focus'),
         ...restProps,
         // @ts-expect-error ignore the type of the ref here
         ref: ref,
@@ -1022,4 +1032,4 @@ function Backlink(props, ref) {
 }
 const _Backlink = /*#__PURE__*/ forwardRef(Backlink);
 
-export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Badge as Badge, _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 };
+export { _Accordion as Accordion, _AccordionItem as AccordionItem, Alertbox, _Backlink as Backlink, _Badge as Badge, _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, _useLocale as useLocale };

package/package.json

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