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

package/dist/index.mjs

@@ -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'),
@@ -202,6 +206,12 @@ const ListBoxItem = (props)=>{
     });
 };
 
+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;
@@ -419,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,
@@ -429,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, {
@@ -446,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
@@ -481,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,
@@ -491,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, {
@@ -508,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, 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.11",
+  "version": "2.0.0-canary.12",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"