@obosbbl/grunnmuren-react 2.0.0-canary.24 → 2.0.0-canary.26

package/dist/index.d.mts

@@ -350,8 +350,10 @@ type TextFieldProps = {
     textAlign?: 'left' | 'right';
     /** Additional style properties for the element. */
     style?: React.CSSProperties;
-    /** Add a divider between the left/right addons and the input */
+    /** Add a divider between the left/right addons and the input, a value of 0 will be ignored */
     withAddonDivider?: boolean;
+    /** Defines the number of characters and determines the width of the input element */
+    size?: number;
 } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
 declare const _TextField: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
@@ -375,8 +377,10 @@ declare const _TextField: react.ForwardRefExoticComponent<{
     textAlign?: "left" | "right" | undefined;
     /** Additional style properties for the element. */
     style?: react.CSSProperties | undefined;
-    /** Add a divider between the left/right addons and the input */
+    /** Add a divider between the left/right addons and the input, a value of 0 will be ignored */
     withAddonDivider?: boolean | undefined;
+    /** Defines the number of characters and determines the width of the input element */
+    size?: number | undefined;
 } & Omit<TextFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly"> & react.RefAttributes<HTMLInputElement>>;
 
 type NumberFieldProps = {
@@ -403,6 +407,12 @@ type NumberFieldProps = {
     style?: React.CSSProperties;
     /** Add a divider between the left/right addons and the input */
     withAddonDivider?: boolean;
+    /** Defines the number of characters and determines the width of the input element, a value of 0 will be ignored */
+    size?: number;
+    /** Defines the maximum numeric value */
+    maxValue?: number;
+    /** Defines the minimum numeric value */
+    minValue?: number;
 } & Omit<NumberFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'hideStepper'>;
 declare const _NumberField: react.ForwardRefExoticComponent<{
     /** Additional CSS className for the element. */
@@ -428,6 +438,12 @@ declare const _NumberField: react.ForwardRefExoticComponent<{
     style?: react.CSSProperties | undefined;
     /** Add a divider between the left/right addons and the input */
     withAddonDivider?: boolean | undefined;
+    /** Defines the number of characters and determines the width of the input element, a value of 0 will be ignored */
+    size?: number | undefined;
+    /** Defines the maximum numeric value */
+    maxValue?: number | undefined;
+    /** Defines the minimum numeric value */
+    minValue?: number | undefined;
 } & Omit<NumberFieldProps$1, "children" | "className" | "style" | "isDisabled" | "isReadOnly" | "hideStepper"> & react.RefAttributes<HTMLInputElement>>;
 
 declare const alertVariants: (props?: ({

package/dist/index.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { I18nProvider, RouterProvider, useContextProps, Provider, 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 as Button$1, 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, Link } from 'react-aria-components';
+import { I18nProvider, RouterProvider, useContextProps, Provider, 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, Button as Button$1, 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, Link } from 'react-aria-components';
 export { Form } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useLayoutEffect, createContext, forwardRef, Children, useId, useState, useRef } from 'react';
@@ -396,8 +396,10 @@ function Checkbox(props, ref) {
                 }),
                 description && /*#__PURE__*/ jsx(Description, {
                     className: "block",
-                    id: descriptionId,
-                    children: description
+                    children: /*#__PURE__*/ jsx("div", {
+                        id: descriptionId,
+                        children: description
+                    })
                 }),
                 errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
                     className: "mt-2 block",
@@ -419,6 +421,17 @@ function Label(props) {
     });
 }
 
+/**
+ * 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.
+ */ function ErrorMessageOrFieldError({ errorMessage }) {
+    return errorMessage ? /*#__PURE__*/ jsx(ErrorMessage, {
+        children: errorMessage
+    }) : /*#__PURE__*/ jsx(FieldError, {
+        className: formFieldError
+    });
+}
+
 function CheckboxGroup(props, ref) {
     const { children, className, description, errorMessage, label, isRequired, isInvalid: _isInvalid, ...restProps } = props;
     const isInvalid = _isInvalid || errorMessage != null;
@@ -436,25 +449,14 @@ function CheckboxGroup(props, ref) {
                 children: description
             }),
             children,
-            errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
-                children: errorMessage
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
             })
         ]
     });
 }
 const _CheckboxGroup = /*#__PURE__*/ forwardRef(CheckboxGroup);
 
-/**
- * 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.
- */ function ErrorMessageOrFieldError({ errorMessage }) {
-    return errorMessage ? /*#__PURE__*/ jsx(ErrorMessage, {
-        children: errorMessage
-    }) : /*#__PURE__*/ jsx(FieldError, {
-        className: formFieldError
-    });
-}
-
 const ListBox = ({ className, ...restProps })=>/*#__PURE__*/ jsx(ListBox$1, {
         ...restProps,
         className: cx(dropdown.listbox, className)
@@ -556,8 +558,8 @@ function RadioGroup(props, ref) {
                 children: description
             }),
             children,
-            errorMessage && /*#__PURE__*/ jsx(ErrorMessage, {
-                children: errorMessage
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
             })
         ]
     });
@@ -678,17 +680,21 @@ function TextArea(props, ref) {
 }
 const _TextArea = /*#__PURE__*/ forwardRef(TextArea);
 
-const inputWithAlignment$1 = compose(input, cva({
+const inputVariants$1 = compose(input, cva({
     base: '',
     variants: {
         textAlign: {
             right: 'text-right',
             left: ''
+        },
+        autoWidth: {
+            true: 'box-content max-w-fit',
+            false: ''
         }
     }
 }));
 function TextField(props, ref) {
-    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, ...restProps } = props;
+    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, size, ...restProps } = props;
     const isInvalid = _isInvalid || errorMessage != null;
     return /*#__PURE__*/ jsxs(TextField$1, {
         ...restProps,
@@ -702,25 +708,31 @@ function TextField(props, ref) {
                 children: description
             }),
             leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
-                className: inputGroup,
+                className: cx(inputGroup, {
+                    'w-fit': !!size
+                }),
                 children: [
                     leftAddon,
                     withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     /*#__PURE__*/ jsx(Input, {
-                        className: inputWithAlignment$1({
+                        className: inputVariants$1({
                             textAlign,
-                            isGrouped: true
+                            isGrouped: true,
+                            autoWidth: !!size
                         }),
-                        ref: ref
+                        ref: ref,
+                        size: size
                     }),
                     withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     rightAddon
                 ]
             }) : /*#__PURE__*/ jsx(Input, {
-                className: inputWithAlignment$1({
-                    textAlign
+                className: inputVariants$1({
+                    textAlign,
+                    autoWidth: !!size
                 }),
-                ref: ref
+                ref: ref,
+                size: size
             }),
             /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
                 errorMessage: errorMessage
@@ -731,17 +743,21 @@ function TextField(props, ref) {
 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
-const inputWithAlignment = compose(input, cva({
+const inputVariants = compose(input, cva({
     base: '',
     variants: {
         textAlign: {
             right: 'text-right',
             left: ''
+        },
+        autoWidth: {
+            true: 'box-content max-w-fit',
+            false: ''
         }
     }
 }));
 function NumberField(props, ref) {
-    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, ...restProps } = props;
+    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, size, ...restProps } = props;
     const isInvalid = _isInvalid || errorMessage != null;
     return /*#__PURE__*/ jsxs(NumberField$1, {
         ...restProps,
@@ -755,25 +771,31 @@ function NumberField(props, ref) {
                 children: description
             }),
             leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
-                className: inputGroup,
+                className: cx(inputGroup, {
+                    'w-fit': !!size
+                }),
                 children: [
                     leftAddon,
                     withAddonDivider && leftAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     /*#__PURE__*/ jsx(Input, {
-                        className: inputWithAlignment({
+                        className: inputVariants({
                             textAlign,
-                            isGrouped: true
+                            isGrouped: true,
+                            autoWidth: !!size
                         }),
-                        ref: ref
+                        ref: ref,
+                        size: size
                     }),
                     withAddonDivider && rightAddon && /*#__PURE__*/ jsx(InputAddonDivider, {}),
                     rightAddon
                 ]
             }) : /*#__PURE__*/ jsx(Input, {
-                className: inputWithAlignment({
-                    textAlign
+                className: inputVariants({
+                    textAlign,
+                    autoWidth: !!size
                 }),
-                ref: ref
+                ref: ref,
+                size: size
             }),
             /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
                 errorMessage: errorMessage

package/package.json

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