@obosbbl/grunnmuren-react 2.0.0-canary.8 → 2.0.0-canary.9

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 } from 'react-aria-components';
+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';
 export { ListBoxItemProps as ComboboxItemProps, Form, I18nProvider, ListBoxItemProps as SelectItemProps } from 'react-aria-components';
 import * as react from 'react';
 import { VariantProps } from 'cva';
@@ -226,4 +226,31 @@ type TextFieldProps = {
 } & Omit<TextFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style'>;
 declare const _TextField: react.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & 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, _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 };
+type NumberFieldProps = {
+    /** Additional CSS className for the element. */
+    className?: string;
+    /** Help text for the form control. */
+    description?: React.ReactNode;
+    /** Error message for the form control. Automatically sets `isInvalid` to true */
+    errorMessage?: React.ReactNode;
+    /** Element to be rendered in the left side of the input. */
+    leftAddon?: React.ReactNode;
+    /** Label for the form control. */
+    label?: React.ReactNode;
+    /** Element to be rendered in the right side of the input. */
+    rightAddon?: React.ReactNode;
+    /** Placeholder text. Only visible when the input value is empty. */
+    placeholder?: string;
+    /**
+     * Text alignment of the input
+     * @default left
+     */
+    textAlign?: 'left' | 'right';
+    /** Additional style properties for the element. */
+    style?: React.CSSProperties;
+    /** Add a divider between the left/right addons and the input */
+    withAddonDivider?: boolean;
+} & Omit<NumberFieldProps$1, 'className' | 'isReadOnly' | 'isDisabled' | 'children' | 'style' | 'hideStepper'>;
+declare const _NumberField: react.ForwardRefExoticComponent<Omit<NumberFieldProps, "ref"> & 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 };

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 } from 'react-aria-components';
+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';
 export { Form, I18nProvider } from 'react-aria-components';
 export { _ as Button } from './Button-client-wuoyidfi.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -411,7 +411,7 @@ function TextArea(props, ref) {
 }
 const _TextArea = /*#__PURE__*/ forwardRef(TextArea);
 
-const inputWithAlignment = compose(input, cva({
+const inputWithAlignment$1 = compose(input, cva({
     base: '',
     variants: {
         textAlign: {
@@ -424,6 +424,68 @@ function TextField(props, ref) {
     const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, ...restProps } = props;
     const isInvalid = _isInvalid || errorMessage != null;
     return /*#__PURE__*/ jsxs(TextField$1, {
+        ...restProps,
+        className: cx(className, formField),
+        isInvalid: isInvalid,
+        children: [
+            label && /*#__PURE__*/ jsx(Label, {
+                children: label
+            }),
+            description && /*#__PURE__*/ jsx(Description, {
+                children: description
+            }),
+            leftAddon || rightAddon ? /*#__PURE__*/ jsxs(Group, {
+                className: inputGroup,
+                children: [
+                    leftAddon,
+                    withAddonDivider && leftAddon && /*#__PURE__*/ jsx(Divider$1, {
+                        className: "ml-3"
+                    }),
+                    /*#__PURE__*/ jsx(Input, {
+                        className: inputWithAlignment$1({
+                            textAlign,
+                            isGrouped: true
+                        }),
+                        ref: ref
+                    }),
+                    withAddonDivider && rightAddon && /*#__PURE__*/ jsx(Divider$1, {
+                        className: "mr-3"
+                    }),
+                    rightAddon
+                ]
+            }) : /*#__PURE__*/ jsx(Input, {
+                className: inputWithAlignment$1({
+                    textAlign
+                }),
+                ref: ref
+            }),
+            /*#__PURE__*/ jsx(ErrorMessageOrFieldError, {
+                errorMessage: errorMessage
+            })
+        ]
+    });
+}
+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
+const inputWithAlignment = compose(input, cva({
+    base: '',
+    variants: {
+        textAlign: {
+            right: 'text-right',
+            left: ''
+        }
+    }
+}));
+function NumberField(props, ref) {
+    const { className, description, errorMessage, label, leftAddon, isInvalid: _isInvalid, textAlign, rightAddon, withAddonDivider, ...restProps } = props;
+    const isInvalid = _isInvalid || errorMessage != null;
+    return /*#__PURE__*/ jsxs(NumberField$1, {
         ...restProps,
         className: cx(className, formField),
         isInvalid: isInvalid,
@@ -470,6 +532,6 @@ function Divider({ className }) {
         className: cx(className, 'block h-6 w-px flex-none bg-black')
     });
 }
-const _TextField = /*#__PURE__*/ forwardRef(TextField);
+const _NumberField = /*#__PURE__*/ forwardRef(NumberField);
 
-export { _Checkbox as Checkbox, _CheckboxGroup as CheckboxGroup, _Combobox as Combobox, ComboboxItem, _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, ComboboxItem, _NumberField as NumberField, _Radio as Radio, _RadioGroup as RadioGroup, _Select as Select, SelectItem, _TextArea as TextArea, _TextField as TextField };

package/package.json

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