@addev-be/ui 0.18.1 → 0.19.0

package/dist/components/forms/Form/Input.js

@@ -24,10 +24,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var Row_1 = require("./Row");
-var styles_1 = require("./styles");
+var InputWithLabel_1 = require("./InputWithLabel");
 var Input = function (_a) {
     var label = _a.label, icon = _a.icon, props = __rest(_a, ["label", "icon"]);
-    return ((0, jsx_runtime_1.jsx)(Row_1.FormRow, { label: label, icon: icon, readOnly: props.readOnly, children: props.readOnly ? ((0, jsx_runtime_1.jsx)(styles_1.ReadOnlyValue, { children: props.value || '-' })) : ((0, jsx_runtime_1.jsx)("input", __assign({}, props))) }));
+    return ((0, jsx_runtime_1.jsx)(InputWithLabel_1.InputWithLabel, { label: label, icon: icon, readOnly: props.readOnly, children: (0, jsx_runtime_1.jsx)("input", __assign({}, props)) }));
 };
 exports.Input = Input;

package/dist/components/forms/Form/InputWithLabel.d.ts

@@ -0,0 +1,2 @@
+import { InputContainerProps } from './types';
+export declare const InputWithLabel: ({ label, icon: Icon, readOnly, children, }: InputContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/Form/InputWithLabel.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputWithLabel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var InputWithLabel = function (_a) {
+    var label = _a.label, Icon = _a.icon, readOnly = _a.readOnly, children = _a.children;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.InputContainer, { className: readOnly ? 'read-only' : '', children: [(label || Icon) && ((0, jsx_runtime_1.jsxs)("span", { children: [Icon && (0, jsx_runtime_1.jsx)(Icon, {}), label] })), children] }));
+};
+exports.InputWithLabel = InputWithLabel;

package/dist/components/forms/Form/Select.d.ts

@@ -11,7 +11,6 @@ export declare const Select: <T>(props: {
     label?: string;
     icon?: import("../../..").IconFC;
     readOnly?: boolean;
-    condensed?: boolean;
 } & {
     children?: import("react").ReactNode | undefined;
 } & Omit<SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value"> & SelectProps<T> & import("react").RefAttributes<HTMLSelectElement>) => import("react").JSX.Element | null;

package/dist/components/forms/Form/Select.js

@@ -24,24 +24,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var Row_1 = require("./Row");
 var react_1 = require("react");
-var styles_1 = require("./styles");
+var InputWithLabel_1 = require("./InputWithLabel");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var SelectInner = function (_a, ref) {
     var icon = _a.icon, label = _a.label, items = _a.items, itemKey = _a.itemKey, itemLabel = _a.itemLabel, readOnly = _a.readOnly, onChange = _a.onChange, value = _a.value, props = __rest(_a, ["icon", "label", "items", "itemKey", "itemLabel", "readOnly", "onChange", "value"]);
     var onSelectChange = (0, react_1.useCallback)(function (event) {
         if (onChange) {
             var selectedValue_1 = event.target.value;
-            var selectedItem = items.find(function (item, index) { return itemKey(item, index) == selectedValue_1; });
+            var selectedItem = items.find(function (item, index) { return itemKey(item, index) === selectedValue_1; });
             onChange(selectedItem !== null && selectedItem !== void 0 ? selectedItem : null);
         }
     }, [items, itemKey, onChange]);
     var selectedValue = value ? itemKey(value, -1) : undefined;
-    return ((0, jsx_runtime_1.jsx)(Row_1.FormRow, { label: label, icon: icon, readOnly: readOnly, children: readOnly ? ((0, jsx_runtime_1.jsx)(styles_1.ReadOnlyValue, { children: (value ? itemLabel(value, 0) : '-') || '-' })) : ((0, jsx_runtime_1.jsx)("select", __assign({}, props, { disabled: readOnly, value: selectedValue, onChange: onSelectChange, ref: ref, children: items.map(function (item, index) {
+    return ((0, jsx_runtime_1.jsx)(InputWithLabel_1.InputWithLabel, { label: label, icon: icon, readOnly: readOnly, children: (0, jsx_runtime_1.jsx)("select", __assign({}, props, { disabled: readOnly, value: selectedValue, onChange: onSelectChange, ref: ref, children: items.map(function (item, index) {
                 var key = itemKey(item, index);
                 var label = itemLabel(item, index);
                 return ((0, jsx_runtime_1.jsx)("option", { value: key, children: label }, key));
-            }) }))) }));
+            }) })) }));
 };
 exports.Select = (0, react_1.forwardRef)(SelectInner);

package/dist/components/forms/Form/TextArea.d.ts

@@ -1,4 +1,4 @@
 import { ComponentProps, FC } from 'react';
-import { FormRowProps } from './Row';
 import { AutoTextArea } from '../AutoTextArea';
-export declare const TextArea: FC<FormRowProps & ComponentProps<typeof AutoTextArea>>;
+import { InputContainerProps } from './types';
+export declare const TextArea: FC<InputContainerProps & ComponentProps<typeof AutoTextArea>>;

package/dist/components/forms/Form/TextArea.js

@@ -24,11 +24,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var Row_1 = require("./Row");
 var AutoTextArea_1 = require("../AutoTextArea");
-var styles_1 = require("./styles");
+var InputWithLabel_1 = require("./InputWithLabel");
 var TextArea = function (_a) {
     var label = _a.label, icon = _a.icon, props = __rest(_a, ["label", "icon"]);
-    return ((0, jsx_runtime_1.jsx)(Row_1.FormRow, { label: label, icon: icon, children: props.readOnly ? ((0, jsx_runtime_1.jsx)(styles_1.ReadOnlyValue, { children: props.value || '-' })) : ((0, jsx_runtime_1.jsx)(AutoTextArea_1.AutoTextArea, __assign({}, props))) }));
+    return ((0, jsx_runtime_1.jsx)(InputWithLabel_1.InputWithLabel, { label: label, icon: icon, children: (0, jsx_runtime_1.jsx)(AutoTextArea_1.AutoTextArea, __assign({}, props)) }));
 };
 exports.TextArea = TextArea;

package/dist/components/forms/Form/index.d.ts

@@ -1,8 +1,6 @@
 import { FC, PropsWithChildren } from 'react';
-import { FormCondensedFields, FormFields } from './styles';
 import { Checkbox } from './Checkbox';
 import { FormGroup } from './FormGroup';
-import { FormRow } from './Row';
 import { Input } from './Input';
 import { Select } from './Select';
 import { TextArea } from './TextArea';
@@ -10,29 +8,14 @@ export type FormProps = PropsWithChildren<{
     onSubmit?: () => void;
 }>;
 export type FormFC = FC<FormProps> & {
-    Checkbox: typeof Checkbox;
-    CondensedFields: typeof FormCondensedFields;
-    Fields: typeof FormFields;
     Group: typeof FormGroup;
     Input: typeof Input;
-    Row: typeof FormRow;
     Select: typeof Select;
+    Checkbox: typeof Checkbox;
     TextArea: typeof TextArea;
 };
 export declare const Form: {
     ({ children, onSubmit }: FormProps): import("react/jsx-runtime").JSX.Element;
-    Checkbox: FC<{
-        label?: string;
-        icon?: import("../../..").IconFC;
-        readOnly?: boolean;
-        condensed?: boolean;
-    } & {
-        children?: import("react").ReactNode | undefined;
-    } & import("react").InputHTMLAttributes<HTMLInputElement>>;
-    CondensedFields: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    Fields: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-        $readOnly?: boolean;
-    }>> & string;
     Group: FC<{
         color?: import("../../..").ThemeColorWithIntensity;
         title?: string;
@@ -44,16 +27,13 @@ export declare const Form: {
         label?: string;
         icon?: import("../../..").IconFC;
         readOnly?: boolean;
-        condensed?: boolean;
     } & {
         children?: import("react").ReactNode | undefined;
     } & import("react").InputHTMLAttributes<HTMLInputElement>>;
-    Row: FC<import("./Row").FormRowProps>;
     Select: <T>(props: {
         label?: string;
         icon?: import("../../..").IconFC;
         readOnly?: boolean;
-        condensed?: boolean;
     } & {
         children?: import("react").ReactNode | undefined;
     } & Omit<import("react").SelectHTMLAttributes<HTMLSelectElement>, "onChange" | "value"> & {
@@ -64,11 +44,17 @@ export declare const Form: {
         readOnly?: boolean;
         onChange?: ((value: T | null) => void) | undefined;
     } & import("react").RefAttributes<HTMLSelectElement>) => import("react").JSX.Element | null;
+    Checkbox: FC<{
+        label?: string;
+        icon?: import("../../..").IconFC;
+        readOnly?: boolean;
+    } & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").InputHTMLAttributes<HTMLInputElement>>;
     TextArea: FC<{
         label?: string;
         icon?: import("../../..").IconFC;
         readOnly?: boolean;
-        condensed?: boolean;
     } & {
         children?: import("react").ReactNode | undefined;
     } & import("react").ClassAttributes<HTMLTextAreaElement> & import("react").TextareaHTMLAttributes<HTMLTextAreaElement> & {

package/dist/components/forms/Form/index.js

@@ -3,10 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var styles_1 = require("./styles");
 var Checkbox_1 = require("./Checkbox");
 var FormGroup_1 = require("./FormGroup");
-var Row_1 = require("./Row");
 var Input_1 = require("./Input");
 var Select_1 = require("./Select");
 var TextArea_1 = require("./TextArea");
@@ -19,11 +17,8 @@ var Form = function (_a) {
     return (0, jsx_runtime_1.jsx)("form", { onSubmit: handleSubmit, children: children });
 };
 exports.Form = Form;
-exports.Form.Checkbox = Checkbox_1.Checkbox;
-exports.Form.CondensedFields = styles_1.FormCondensedFields;
-exports.Form.Fields = styles_1.FormFields;
 exports.Form.Group = FormGroup_1.FormGroup;
 exports.Form.Input = Input_1.Input;
-exports.Form.Row = Row_1.FormRow;
 exports.Form.Select = Select_1.Select;
+exports.Form.Checkbox = Checkbox_1.Checkbox;
 exports.Form.TextArea = TextArea_1.TextArea;

package/dist/components/forms/Form/styles.d.ts

@@ -3,17 +3,12 @@ export declare const FormGroupContainer: import("styled-components/dist/types").
     color?: ThemeColorWithIntensity;
 }>> & string;
 export declare const FormGroupHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const inputCss: import("styled-components").RuleSet<object>;
-export declare const FormRowLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const FormRowInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const FormRowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+export declare const inputCss: import("styled-components").RuleSet<{
+    $readOnly?: boolean;
+}>;
+export declare const InputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
     $readOnly?: boolean;
 }>> & string;
 export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
     ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
 }>, never>, never>> & string;
-export declare const ReadOnlyValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const FormFields: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $readOnly?: boolean;
-}>> & string;
-export declare const FormCondensedFields: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/forms/Form/styles.js

@@ -27,23 +27,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormCondensedFields = exports.FormFields = exports.ReadOnlyValue = exports.StyledCheckbox = exports.FormRowContainer = exports.FormRowInputContainer = exports.FormRowLabel = exports.inputCss = exports.FormGroupHeader = exports.FormGroupContainer = void 0;
+exports.StyledCheckbox = exports.InputContainer = exports.inputCss = exports.FormGroupHeader = exports.FormGroupContainer = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var responsive_1 = require("../../../helpers/responsive");
-exports.FormGroupContainer = styled_components_1.default.fieldset(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  background: var(--color-neutral-100);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n\n  padding: var(--space-2);\n  gap: var(--space-1);\n\n  ", " {\n    padding: var(--space-4);\n    gap: var(--space-2);\n  }\n\n  margin: 0;\n  border: 1px solid var(--color-neutral-100);\n  border-left: 8px solid ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  background: var(--color-neutral-100);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n\n  padding: var(--space-2);\n  gap: var(--space-1);\n\n  ", " {\n    padding: var(--space-4);\n    gap: var(--space-2);\n  }\n\n  margin: 0;\n  border: 1px solid var(--color-neutral-100);\n  border-left: 8px solid ", ";\n"])), responsive_1.mediaQueries.lgUp, function (_a) {
+exports.FormGroupContainer = styled_components_1.default.fieldset(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  background: var(--color-neutral-100);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n  padding: var(--space-4);\n  margin: 0;\n  border: 1px solid var(--color-neutral-100);\n  gap: var(--space-2);\n  border-left: 8px solid ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  background: var(--color-neutral-100);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n  padding: var(--space-4);\n  margin: 0;\n  border: 1px solid var(--color-neutral-100);\n  gap: var(--space-2);\n  border-left: 8px solid ", ";\n"])), function (_a) {
     var _b = _a.color, color = _b === void 0 ? 'neutral' : _b;
     return "var(--color-".concat(color, ")");
 });
-exports.FormGroupHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n\n  & > h3 {\n    margin: 0;\n    font-size: var(--text-lg);\n    font-weight: bold;\n  }\n  & > h4 {\n    margin: 0;\n    font-size: var(--text-sm);\n    font-weight: var(--font-normal);\n    color: var(--color-neutral-500);\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n\n  & > h3 {\n    margin: 0;\n    font-size: var(--text-lg);\n    font-weight: bold;\n  }\n  & > h4 {\n    margin: 0;\n    font-size: var(--text-sm);\n    font-weight: var(--font-normal);\n    color: var(--color-neutral-500);\n  }\n"])));
-exports.inputCss = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-family: inherit;\n  font-size: var(--text-lg);\n\n  border: none;\n  color: var(--color-neutral-900);\n  background: var(--color-neutral-0);\n\n  box-sizing: border-box;\n  width: 100%;\n  padding: var(--space-1);\n  ", " {\n    text-align: right;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  font-family: inherit;\n  font-size: var(--text-lg);\n\n  border: none;\n  color: var(--color-neutral-900);\n  background: var(--color-neutral-0);\n\n  box-sizing: border-box;\n  width: 100%;\n  padding: var(--space-1);\n  ", " {\n    text-align: right;\n  }\n\n  &:focus {\n    outline: none;\n  }\n"])), responsive_1.mediaQueries.lgUp);
-exports.FormRowLabel = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: var(--color-neutral-500);\n  font-size: var(--text-base);\n  padding: var(--space-1) 0;\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n  line-height: 1.25;\n  font-weight: bold;\n  align-self: flex-start;\n\n  & > svg {\n    width: var(--space-4);\n    height: var(--space-4);\n    fill: var(--color-neutral-500);\n    flex-shrink: 0;\n  }\n"], ["\n  color: var(--color-neutral-500);\n  font-size: var(--text-base);\n  padding: var(--space-1) 0;\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n  line-height: 1.25;\n  font-weight: bold;\n  align-self: flex-start;\n\n  & > svg {\n    width: var(--space-4);\n    height: var(--space-4);\n    fill: var(--color-neutral-500);\n    flex-shrink: 0;\n  }\n"])));
-exports.FormRowInputContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex: 1;\n  text-align: right;\n\n  ", " {\n    width: 100%;\n    text-align: left;\n  }\n\n  & > select,\n  & > input,\n  & > textarea {\n    ", "\n  }\n"], ["\n  flex: 1;\n  text-align: right;\n\n  ", " {\n    width: 100%;\n    text-align: left;\n  }\n\n  & > select,\n  & > input,\n  & > textarea {\n    ", "\n  }\n"])), responsive_1.mediaQueries.mdDown, exports.inputCss);
-exports.FormRowContainer = styled_components_1.default.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0;\n  padding: var(--space-2);\n\n  ", " {\n    flex-direction: row;\n    gap: var(--space-2);\n    padding: var(--space-1) var(--space-2);\n  }\n\n  border: 1px solid var(--color-neutral-200);\n  background: var(--color-neutral-0);\n  &:focus-within {\n    outline: 2px solid var(--color-primary-500);\n    z-index: 1;\n  }\n\n  &.read-only {\n    background: none;\n    border: none;\n    &:focus-within {\n      outline: none;\n    }\n\n    & + & {\n      border-top: 1px solid var(--color-neutral-300);\n    }\n\n    & > div > select,\n    & > div > select[disabled],\n    & > div > input,\n    & > div > textarea {\n      background: none;\n      color: var(--color-neutral-900);\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0;\n  padding: var(--space-2);\n\n  ", " {\n    flex-direction: row;\n    gap: var(--space-2);\n    padding: var(--space-1) var(--space-2);\n  }\n\n  border: 1px solid var(--color-neutral-200);\n  background: var(--color-neutral-0);\n  &:focus-within {\n    outline: 2px solid var(--color-primary-500);\n    z-index: 1;\n  }\n\n  &.read-only {\n    background: none;\n    border: none;\n    &:focus-within {\n      outline: none;\n    }\n\n    & + & {\n      border-top: 1px solid var(--color-neutral-300);\n    }\n\n    & > div > select,\n    & > div > select[disabled],\n    & > div > input,\n    & > div > textarea {\n      background: none;\n      color: var(--color-neutral-900);\n    }\n  }\n"])), responsive_1.mediaQueries.lgUp);
-exports.StyledCheckbox = styled_components_1.default.input.attrs({ type: 'checkbox' })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: var(--space-4);\n  height: var(--space-4);\n"], ["\n  width: var(--space-4);\n  height: var(--space-4);\n"])));
-exports.ReadOnlyValue = styled_components_1.default.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: var(--text-lg);\n  padding: var(--space-1) 0;\n"], ["\n  font-size: var(--text-lg);\n  padding: var(--space-1) 0;\n"])));
-exports.FormFields = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n"])), function (_a) {
+exports.FormGroupHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  margin-bottom: var(--space-1);\n\n  & > h3 {\n    margin: 0;\n    font-size: var(--text-lg);\n    font-weight: bold;\n  }\n  & > h4 {\n    margin: 0;\n    font-size: var(--text-sm);\n    font-weight: var(--font-normal);\n    color: var(--color-neutral-500);\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  margin-bottom: var(--space-1);\n\n  & > h3 {\n    margin: 0;\n    font-size: var(--text-lg);\n    font-weight: bold;\n  }\n  & > h4 {\n    margin: 0;\n    font-size: var(--text-sm);\n    font-weight: var(--font-normal);\n    color: var(--color-neutral-500);\n  }\n"])));
+exports.inputCss = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-family: inherit;\n  font-size: var(--text-base);\n\n  border: none;\n  color: ", ";\n  background: ", ";\n\n  padding: var(--space-1);\n  width: 100%;\n  text-align: right;\n\n  &:focus {\n    outline: none;\n  }\n"], ["\n  font-family: inherit;\n  font-size: var(--text-base);\n\n  border: none;\n  color: ", ";\n  background: ", ";\n\n  padding: var(--space-1);\n  width: 100%;\n  text-align: right;\n\n  &:focus {\n    outline: none;\n  }\n"])), function (_a) {
     var $readOnly = _a.$readOnly;
-    return ($readOnly ? '0' : 'var(--space-2)');
+    return $readOnly ? 'var(--color-neutral-800)' : 'var(--color-neutral-900)';
+}, function (_a) {
+    var $readOnly = _a.$readOnly;
+    return $readOnly ? 'none' : 'var(--color-neutral-0)';
 });
-exports.FormCondensedFields = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  ", " & > ", " {\n    padding: var(--space-0_5) var(--space-2);\n  }\n\n  > ", ":not(.read-only) + ", ":not(.read-only) {\n    border-top: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  ", " & > ", " {\n    padding: var(--space-0_5) var(--space-2);\n  }\n\n  > ", ":not(.read-only) + ", ":not(.read-only) {\n    border-top: none;\n  }\n"])), responsive_1.mediaQueries.lgUp, exports.FormRowContainer, exports.FormRowContainer, exports.FormRowContainer);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+exports.InputContainer = styled_components_1.default.label(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  ", " {\n    flex-direction: row;\n  }\n\n  align-items: flex-start;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n\n  border: 1px solid var(--color-neutral-200);\n  background: var(--color-neutral-0);\n  &:focus-within {\n    outline: 2px solid var(--color-primary-500);\n  }\n\n  &.read-only {\n    background: none;\n    border: none;\n    &:focus-within {\n      outline: none;\n    }\n\n    & + & {\n      border-top: 1px solid var(--color-neutral-300);\n      padding-top: var(--space-4);\n    }\n  }\n\n  & > span {\n    color: var(--color-neutral-500);\n    font-size: var(--text-base);\n    padding: var(--space-1);\n    display: flex;\n    flex-direction: row;\n    gap: var(--space-2);\n    line-height: 1.25;\n\n    & > svg {\n      width: var(--space-4);\n      height: var(--space-4);\n      fill: var(--color-neutral-500);\n      flex-shrink: 0;\n    }\n  }\n\n  & > div {\n    flex: 1;\n  }\n\n  & > select,\n  & > input,\n  & > textarea {\n    ", "\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  ", " {\n    flex-direction: row;\n  }\n\n  align-items: flex-start;\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-2);\n\n  border: 1px solid var(--color-neutral-200);\n  background: var(--color-neutral-0);\n  &:focus-within {\n    outline: 2px solid var(--color-primary-500);\n  }\n\n  &.read-only {\n    background: none;\n    border: none;\n    &:focus-within {\n      outline: none;\n    }\n\n    & + & {\n      border-top: 1px solid var(--color-neutral-300);\n      padding-top: var(--space-4);\n    }\n  }\n\n  & > span {\n    color: var(--color-neutral-500);\n    font-size: var(--text-base);\n    padding: var(--space-1);\n    display: flex;\n    flex-direction: row;\n    gap: var(--space-2);\n    line-height: 1.25;\n\n    & > svg {\n      width: var(--space-4);\n      height: var(--space-4);\n      fill: var(--color-neutral-500);\n      flex-shrink: 0;\n    }\n  }\n\n  & > div {\n    flex: 1;\n  }\n\n  & > select,\n  & > input,\n  & > textarea {\n    ", "\n  }\n"])), responsive_1.mediaQueries.mdUp, exports.inputCss);
+exports.StyledCheckbox = styled_components_1.default.input.attrs({ type: 'checkbox' })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: var(--space-4);\n  height: var(--space-4);\n"], ["\n  width: var(--space-4);\n  height: var(--space-4);\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/forms/Form/types.d.ts

@@ -0,0 +1,7 @@
+import { IconFC } from '../../../Icons';
+import { PropsWithChildren } from 'react';
+export type InputContainerProps = PropsWithChildren<{
+    label?: string;
+    icon?: IconFC;
+    readOnly?: boolean;
+}>;

package/dist/components/forms/Form/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/forms/index.d.ts

@@ -4,6 +4,5 @@ export * from './Select';
 export * from './IconButton';
 export * from './IndeterminateCheckbox';
 export * from './Form';
-export * from './Form/Row';
+export * from './Form/InputWithLabel';
 export * from './styles';
-export * from './NumberInput';

package/dist/components/forms/index.js

@@ -20,6 +20,5 @@ __exportStar(require("./Select"), exports);
 __exportStar(require("./IconButton"), exports);
 __exportStar(require("./IndeterminateCheckbox"), exports);
 __exportStar(require("./Form"), exports);
-__exportStar(require("./Form/Row"), exports);
+__exportStar(require("./Form/InputWithLabel"), exports);
 __exportStar(require("./styles"), exports);
-__exportStar(require("./NumberInput"), exports);

package/dist/config/types.d.ts

@@ -0,0 +1,11 @@
+export type EnvType = 'dev' | 'test' | 'staging' | 'prod';
+export type Config = {
+    webSocketUrl: string;
+    httpServerUrl: `${string}/`;
+    invoicingEnabled?: boolean;
+};
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+export type PartialConfig = DeepPartial<Config>;
+export {};

package/dist/config/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/hooks/index.d.ts

@@ -4,4 +4,3 @@ export * from './useWindowSize';
 export * from './useMediaQuery';
 export * from './useContainerMediaQuery';
 export * from './useMediaQueryForWidth';
-export * from './useMutableState';

package/dist/hooks/index.js

@@ -20,4 +20,3 @@ __exportStar(require("./useWindowSize"), exports);
 __exportStar(require("./useMediaQuery"), exports);
 __exportStar(require("./useContainerMediaQuery"), exports);
 __exportStar(require("./useMediaQueryForWidth"), exports);
-__exportStar(require("./useMutableState"), exports);

package/dist/services/requests/userPermissions.d.ts

@@ -0,0 +1,4 @@
+export declare const useGetUserPermissionRequestHandler: () => (data: GetUserPermissionRequestDTO) => Promise<GetUserPermissionResponseDTO>;
+export declare const useGetAllUserPermissionsRequestHandler: () => (data: GetAllUserPermissionsRequestDTO) => Promise<GetAllUserPermissionsResponseDTO>;
+export declare const useSaveUserPermissionRequestHandler: () => (data: SaveUserPermissionRequestDTO) => Promise<SaveUserPermissionResponseDTO>;
+export declare const useDeleteUserPermissionRequestHandler: () => (data: DeleteUserPermissionRequestDTO) => Promise<DeleteUserPermissionResponseDTO>;

package/dist/services/requests/userPermissions.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDeleteUserPermissionRequestHandler = exports.useSaveUserPermissionRequestHandler = exports.useGetAllUserPermissionsRequestHandler = exports.useGetUserPermissionRequestHandler = void 0;
+var hooks_1 = require("../hooks");
+var useGetUserPermissionRequestHandler = function () {
+    return (0, hooks_1.useLoadingRequestHandler)('GetUserPermission');
+};
+exports.useGetUserPermissionRequestHandler = useGetUserPermissionRequestHandler;
+var useGetAllUserPermissionsRequestHandler = function () {
+    return (0, hooks_1.useLoadingRequestHandler)('GetAllUserPermissions');
+};
+exports.useGetAllUserPermissionsRequestHandler = useGetAllUserPermissionsRequestHandler;
+var useSaveUserPermissionRequestHandler = function () {
+    return (0, hooks_1.useLoadingRequestHandler)('SaveUserPermission');
+};
+exports.useSaveUserPermissionRequestHandler = useSaveUserPermissionRequestHandler;
+var useDeleteUserPermissionRequestHandler = function () {
+    return (0, hooks_1.useLoadingRequestHandler)('DeleteUserPermission');
+};
+exports.useDeleteUserPermissionRequestHandler = useDeleteUserPermissionRequestHandler;

package/eslint.config.js

@@ -1,28 +1,3 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import { eslintReactConfig } from '@addev-be/framework-utils/eslint/react.config.mjs';
 
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)
+export default eslintReactConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",
@@ -20,24 +20,15 @@
     "update-version": "../../node/update-version.mjs"
   },
   "devDependencies": {
-    "@eslint/js": "^8.57.0",
+    "@addev-be/framework-utils": "^0.19.0",
     "@types/lodash": "^4",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10",
-    "@typescript-eslint/eslint-plugin": "^8.6.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jest": "^28.8.3",
-    "eslint-plugin-n": "^17.10.2",
-    "eslint-plugin-promise": "^7.1.0",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint": "^9.31.0",
     "globals": "^15.9.0",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.6.0"
+    "typescript": "^5.5.3"
   },
   "peerDependencies": {
     "react": "^18.3.1",