@obosbbl/grunnmuren-react 2.0.0-canary.28 → 2.0.0-canary.29

package/dist/index.mjs

@@ -299,7 +299,7 @@ const input = cva({
             visible: 'data-[focus-visible]:ring-2 group-data-[invalid]:data-[focus-visible]:ring'
         },
         isGrouped: {
-            false: 'px-3',
+            false: 'bg-white px-3',
             true: 'flex-1 !ring-0'
         }
     },
@@ -328,16 +328,6 @@ function ErrorMessage(props) {
     });
 }
 
-const descriptionClasses = 'text-sm font-light leading-6';
-function Description(props) {
-    const { className, ...restProps } = props;
-    return /*#__PURE__*/ jsx(Text, {
-        ...restProps,
-        className: cx(className, descriptionClasses),
-        slot: "description"
-    });
-}
-
 const defaultClasses$1 = cx([
     'group relative left-0 inline-flex max-w-fit cursor-pointer items-start gap-4 py-2 leading-7'
 ]);
@@ -372,7 +362,7 @@ function Checkbox(props, ref) {
     const id = useId();
     const descriptionId = 'desc' + id;
     const errorMessageId = 'error' + id;
-    const isInvalid = _isInvalid || errorMessage != null;
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsx("div", {
         children: /*#__PURE__*/ jsxs(CheckboxContext.Provider, {
             value: {
@@ -397,7 +387,7 @@ function Checkbox(props, ref) {
                 /*#__PURE__*/ jsx("div", {
                     id: descriptionId,
                     slot: "description",
-                    className: cx('block', descriptionClasses),
+                    className: "description block",
                     children: description
                 }),
                 errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
@@ -420,6 +410,15 @@ function Label(props) {
     });
 }
 
+function Description(props) {
+    const { className, ...restProps } = props;
+    return /*#__PURE__*/ jsx(Text, {
+        ...restProps,
+        className: cx(className, 'description'),
+        slot: "description"
+    });
+}
+
 /**
  * This component handles renders a custom error message (if provided), otherwise it falls back to the browser's native validation.
  * In other words, this handles controlled and uncontrolled form errors.
@@ -433,7 +432,9 @@ function Label(props) {
 
 function CheckboxGroup(props, ref) {
     const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(CheckboxGroup$1, {
         ...restProps,
         className: cx(className, 'flex flex-col gap-2'),
@@ -491,7 +492,9 @@ function InputAddonDivider() {
 
 function Combobox(props, ref) {
     const { className, children, description, errorMessage, isLoading, label, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(ComboBox, {
         ...restProps,
         className: cx(className, formField),
@@ -543,7 +546,9 @@ const _Combobox = /*#__PURE__*/ forwardRef(Combobox);
 
 function RadioGroup(props, ref) {
     const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(RadioGroup$1, {
         ...restProps,
         className: cx(className, 'flex flex-col gap-2'),
@@ -611,7 +616,9 @@ const _Radio = /*#__PURE__*/ forwardRef(Radio);
 
 function Select(props, ref) {
     const { className, children, description, errorMessage, label, isInvalid: _isInvalid, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(Select$1, {
         ...restProps,
         className: cx(className, formField),
@@ -656,7 +663,7 @@ const _Select = /*#__PURE__*/ forwardRef(Select);
 
 function TextArea(props, ref) {
     const { className, description, errorMessage, label, isInvalid: _isInvalid, rows, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(TextField$1, {
         ...restProps,
         className: cx(className, formField),
@@ -696,7 +703,9 @@ const inputVariants$1 = compose(input, cva({
 }));
 function TextField(props, ref) {
     const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, size, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(TextField$1, {
         ...restProps,
         className: cx(className, formField),
@@ -759,7 +768,9 @@ const inputVariants = compose(input, cva({
 }));
 function NumberField(props, ref) {
     const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, size, ...restProps } = props;
-    const isInvalid = _isInvalid || errorMessage != null;
+    // the order of the conditions matter here, because providing a value for isInvalid makes the validation state "controlled",
+    // which will override any built in validation
+    const isInvalid = errorMessage != null || _isInvalid;
     return /*#__PURE__*/ jsxs(NumberField$1, {
         ...restProps,
         className: cx(className, formField),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.28",
+  "version": "2.0.0-canary.29",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"
@@ -19,10 +19,10 @@
   ],
   "dependencies": {
     "@obosbbl/grunnmuren-icons-react": "^2.0.0-canary.1",
-    "@react-aria/utils": "^3.24.0",
+    "@react-aria/utils": "^3.24.1",
     "@types/node": "^20.11.19",
     "cva": "1.0.0-beta.1",
-    "react-aria-components": "^1.2.0"
+    "react-aria-components": "^1.2.1"
   },
   "peerDependencies": {
     "react": "^18"