@obosbbl/grunnmuren-react 2.0.0-canary.10 → 2.0.0-canary.12

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ComboBoxProps, ListBoxItemProps, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, SelectProps as SelectProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1 } from 'react-aria-components';
+import { 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 } from 'react-aria-components';
 export { ListBoxItemProps as ComboboxItemProps, Form, I18nProvider, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
 import * as react from 'react';
 import { VariantProps } from 'cva';
@@ -133,6 +133,8 @@ declare const _CheckboxGroup: react.ForwardRefExoticComponent<{
     style?: react.CSSProperties | undefined;
 } & Omit<CheckboxGroupProps$1, "className" | "style" | "children" | "isDisabled" | "isReadOnly" | "orientation"> & react.RefAttributes<HTMLDivElement>>;
 
+declare const ListBoxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
+
 type ComboboxProps<T extends object> = {
     children: React.ReactNode;
     /** Additional CSS className for the element. */
@@ -153,7 +155,6 @@ type ComboboxProps<T extends object> = {
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
 } & Omit<ComboBoxProps<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
-declare const ComboboxItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
 declare const _Combobox: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
@@ -236,7 +237,6 @@ type SelectProps<T extends object> = {
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
 } & Omit<SelectProps$1<T>, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
-declare const SelectItem: (props: ListBoxItemProps) => react_jsx_runtime.JSX.Element;
 declare const _Select: react.ForwardRefExoticComponent<{
     children: React.ReactNode;
     /** Additional CSS className for the element. */
@@ -394,4 +394,4 @@ declare const _NumberField: react.ForwardRefExoticComponent<{
     withAddonDivider?: boolean | undefined;
 } & Omit<NumberFieldProps$1, "className" | "style" | "children" | "isDisabled" | "isReadOnly" | "hideStepper"> & react.RefAttributes<HTMLInputElement>>;
 
-export { _Button as Button, type ButtonProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ComboboxItem, type ComboboxProps, _NumberField as NumberField, type NumberFieldProps, _Radio as Radio, _RadioGroup as RadioGroup, type RadioGroupProps, type RadioProps, _Select as Select, SelectItem, type SelectProps, _TextArea as TextArea, type TextAreaProps, _TextField as TextField, type TextFieldProps };
+export { _Button as Button, type ButtonProps, _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _Combobox as Combobox, ListBoxItem as ComboboxItem, type ComboboxProps, _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 };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ListBoxItem, ComboBox, Group, Input, Button, Popover, ListBox, 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 } from 'react-aria-components';
+import { Text, CheckboxContext, Checkbox as Checkbox$1, Label as Label$1, CheckboxGroup as CheckboxGroup$1, FieldError, ListBoxItem as ListBoxItem$1, ListBox as ListBox$1, ComboBox, Group, Input, Button, 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 } from 'react-aria-components';
 export { Form, I18nProvider } from 'react-aria-components';
 export { _ as Button } from './Button-client-XmGlKEk4.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -10,7 +10,7 @@ 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: [
-        'rounded-md px-3 py-2.5 text-sm font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
+        'rounded-md py-2.5 text-sm font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
         // invalid styles
         'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red',
         // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
@@ -23,9 +23,8 @@ const input = cva({
             visible: 'data-[focus-visible]:ring-2 group-data-[invalid]:data-[focus-visible]:ring'
         },
         isGrouped: {
-            false: '',
-            //
-            true: 'flex-1 !ring-0 first:pl-0 last:pr-0'
+            false: 'px-3',
+            true: 'flex-1 !ring-0'
         }
     },
     defaultVariants: {
@@ -33,7 +32,12 @@ const input = cva({
         isGrouped: false
     }
 });
-const inputGroup = cx('inline-flex items-center overflow-hidden rounded-md px-3 ring-1 ring-black focus-within:ring-2 group-data-[invalid]:ring-2 group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring');
+const inputGroup = cx([
+    'inline-flex items-center gap-3 overflow-hidden rounded-md px-3 text-sm ring-1 ring-black focus-within:ring-2',
+    'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring',
+    // Make sure icons are the correct size
+    '[&_svg]:text-base'
+]);
 const dropdown = {
     popover: cx('min-w-[--trigger-width] overflow-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'),
     listbox: cx('text-sm outline-none'),
@@ -175,6 +179,39 @@ const _CheckboxGroup = /*#__PURE__*/ forwardRef(CheckboxGroup);
     });
 }
 
+const ListBox = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ListBox$1, {
+        ...restProps,
+        className: cx(dropdown.listbox, className)
+    });
+const ListBoxItem = (props)=>{
+    let textValue = props.textValue;
+    // When the ListBoxItem child isn't a string we have to set textValue for keyboard completion to work.
+    // Since we use a render function (to handle the selected state) the child is never a string.
+    // This condition adds back that behaviour
+    if (textValue == null && typeof props.children === 'string') {
+        textValue = props.children;
+    }
+    return /*#__PURE__*/ jsx(ListBoxItem$1, {
+        ...props,
+        className: cx(props.className, 'flex cursor-pointer px-6 py-3 leading-6 outline-none data-[focused]:bg-sky-lightest'),
+        textValue: textValue,
+        children: ({ isSelected })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    isSelected && /*#__PURE__*/ jsx(Check, {
+                        className: "-ml-6 text-base"
+                    }),
+                    props.children
+                ]
+            })
+    });
+};
+
+function InputAddonDivider() {
+    return /*#__PURE__*/ jsx("span", {
+        className: "block h-6 w-px flex-none bg-black"
+    });
+}
+
 function Combobox(props, ref) {
     const { className, children, description, errorMessage, isLoading, label, isInvalid: _isInvalid, ...restProps } = props;
     const isInvalid = _isInvalid || errorMessage != null;
@@ -218,35 +255,12 @@ function Combobox(props, ref) {
                 className: cx(dropdown.popover, 'min-w-[calc(var(--trigger-width)+26px)]'),
                 crossOffset: -13,
                 children: /*#__PURE__*/ jsx(ListBox, {
-                    className: dropdown.listbox,
                     children: children
                 })
             })
         ]
     });
 }
-const ComboboxItem = (props)=>{
-    let textValue = props.textValue;
-    // When the ListBoxItem child isn't a string we have to set textValue for keyboard completion to work.
-    // Since we use a render function (to handle the selected state) the child is never a string.
-    // This condition adds back that behaviour
-    if (textValue == null && typeof props.children === 'string') {
-        textValue = props.children;
-    }
-    return /*#__PURE__*/ jsx(ListBoxItem, {
-        ...props,
-        className: cx(props.className, 'flex cursor-default px-6 py-2 leading-6 outline-none data-[focused]:bg-sky-lightest'),
-        textValue: textValue,
-        children: ({ isSelected })=>/*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    isSelected && /*#__PURE__*/ jsx(Check, {
-                        className: "-ml-6 text-base"
-                    }),
-                    props.children
-                ]
-            })
-    });
-};
 const _Combobox = /*#__PURE__*/ forwardRef(Combobox);
 
 function RadioGroup(props, ref) {
@@ -353,35 +367,12 @@ function Select(props, ref) {
             /*#__PURE__*/ jsx(Popover, {
                 className: dropdown.popover,
                 children: /*#__PURE__*/ jsx(ListBox, {
-                    className: dropdown.listbox,
                     children: children
                 })
             })
         ]
     });
 }
-const SelectItem = (props)=>{
-    let textValue = props.textValue;
-    // When the ListBoxItem child isn't a string we have to set textValue for keyboard completion to work.
-    // Since we use a render function (to handle the selected state) the child is never a string.
-    // This condition adds back that behaviour
-    if (textValue == null && typeof props.children === 'string') {
-        textValue = props.children;
-    }
-    return /*#__PURE__*/ jsx(ListBoxItem, {
-        ...props,
-        className: cx(props.className, 'flex cursor-default px-6 py-2 leading-6 outline-none data-[focused]:bg-sky-lightest'),
-        textValue: textValue,
-        children: ({ isSelected })=>/*#__PURE__*/ jsxs(Fragment, {
-                children: [
-                    isSelected && /*#__PURE__*/ jsx(Check, {
-                        className: "-ml-6 text-base"
-                    }),
-                    props.children
-                ]
-            })
-    });
-};
 const _Select = /*#__PURE__*/ forwardRef(Select);
 
 function TextArea(props, ref) {
@@ -438,9 +429,7 @@ function TextField(props, ref) {
                 className: inputGroup,
                 children: [
                     leftAddon,
-                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(Divider$1, {
-                        className: "ml-3"
-                    }),
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     /*#__PURE__*/ jsx(Input, {
                         className: inputWithAlignment$1({
                             textAlign,
@@ -448,9 +437,7 @@ function TextField(props, ref) {
                         }),
                         ref: ref
                     }),
-                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(Divider$1, {
-                        className: "mr-3"
-                    }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     rightAddon
                 ]
             }) : /*#__PURE__*/ jsx(Input, {
@@ -465,11 +452,6 @@ function TextField(props, ref) {
         ]
     });
 }
-function Divider$1({ className }) {
-    return /*#__PURE__*/ jsx("span", {
-        className: cx(className, 'block h-6 w-px flex-none bg-black')
-    });
-}
 const _TextField = /*#__PURE__*/ forwardRef(TextField);
 
 // This component is based on a copy of ../textfield/TextField, refactoring is TBD: https://github.com/code-obos/grunnmuren/pull/722#issuecomment-1931478786
@@ -500,9 +482,7 @@ function NumberField(props, ref) {
                 className: inputGroup,
                 children: [
                     leftAddon,
-                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(Divider, {
-                        className: "ml-3"
-                    }),
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     /*#__PURE__*/ jsx(Input, {
                         className: inputWithAlignment({
                             textAlign,
@@ -510,9 +490,7 @@ function NumberField(props, ref) {
                         }),
                         ref: ref
                     }),
-                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(Divider, {
-                        className: "mr-3"
-                    }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     rightAddon
                 ]
             }) : /*#__PURE__*/ jsx(Input, {
@@ -527,11 +505,6 @@ function NumberField(props, ref) {
         ]
     });
 }
-function Divider({ className }) {
-    return /*#__PURE__*/ jsx("span", {
-        className: cx(className, 'block h-6 w-px flex-none bg-black')
-    });
-}
 const _NumberField = /*#__PURE__*/ forwardRef(NumberField);
 
-export { _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ComboboxItem, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, SelectItem, _TextArea as TextArea, _TextField as TextField };
+export { _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ListBoxItem as ComboboxItem, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, ListBoxItem as SelectItem, _TextArea as TextArea, _TextField as TextField };

package/package.json

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