@rolster/react-components 1.4.0

package/dist/esm/components/organisms/DatePicker/DatePicker.d.ts

@@ -0,0 +1,15 @@
+import { ReactControl } from '../../../hooks';
+import { PickerListener } from '../../../types';
+import { RlsComponent } from '../../definitions';
+import './DatePicker.css';
+interface DatePicker extends RlsComponent {
+    automatic?: boolean;
+    date?: Date;
+    disabled?: boolean;
+    formControl?: ReactControl<HTMLElement, Date>;
+    maxDate?: Date;
+    minDate?: Date;
+    onListener?: (listener: PickerListener<Date>) => void;
+}
+export declare function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDate, onListener, rlsTheme }: DatePicker): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/organisms/DatePicker/DatePicker.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatDate, refactorDay, refactorMonth, refactorYear } from '@rolster/helpers-date';
+import { useEffect, useState } from 'react';
+import { useReactControl } from '../../../hooks';
+import { PickerListenerType } from '../../../types';
+import { renderClassStatus } from '../../../utils/css';
+import { verifyDateRange } from '../../../utils/date-picker';
+import { RlsButton } from '../../atoms';
+import { RlsDayPicker, RlsMonthPicker, RlsMonthTitlePicker, RlsYearPicker } from '../../molecules';
+import './DatePicker.css';
+const FORMAT_DESCRIPTION = 'dw, mx dd de aa';
+const VISIBILITY_STATE = {
+    month: false,
+    day: false,
+    year: false
+};
+const VISIBILITY = {
+    DAY: {
+        ...VISIBILITY_STATE,
+        day: true
+    },
+    MONTH: {
+        ...VISIBILITY_STATE,
+        month: true
+    },
+    YEAR: {
+        ...VISIBILITY_STATE,
+        year: true
+    }
+};
+export function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDate, onListener, rlsTheme }) {
+    const dateInitial = formControl?.state || date || new Date();
+    const yearControl = useReactControl({ state: dateInitial.getFullYear() });
+    const dayControl = useReactControl({ state: dateInitial.getDate() });
+    const monthControl = useReactControl({ state: dateInitial.getMonth() });
+    const [value, setValue] = useState(dateInitial);
+    const [{ day, month, year }, setVisibility] = useState(VISIBILITY.DAY);
+    const title = formatDate(value, FORMAT_DESCRIPTION);
+    useEffect(() => {
+        setValue((prevValue) => {
+            return typeof yearControl.state === 'number'
+                ? verifyDateRange(refactorYear(prevValue, yearControl.state), minDate, maxDate)
+                : prevValue;
+        });
+        setVisibility(VISIBILITY.DAY);
+    }, [yearControl.state]);
+    useEffect(() => {
+        setValue((prevValue) => {
+            return typeof monthControl.state === 'number'
+                ? verifyDateRange(refactorMonth(prevValue, monthControl.state), minDate, maxDate)
+                : prevValue;
+        });
+        setVisibility(VISIBILITY.DAY);
+    }, [monthControl.state]);
+    useEffect(() => {
+        setValue((prevValue) => {
+            return typeof dayControl.state === 'number'
+                ? verifyDateRange(refactorDay(prevValue, dayControl.state), minDate, maxDate)
+                : prevValue;
+        });
+    }, [dayControl.state]);
+    function onVisibilityDay() {
+        setVisibility(VISIBILITY.DAY);
+    }
+    function onVisibilityMonth() {
+        setVisibility(VISIBILITY.MONTH);
+    }
+    function onVisibilityYear() {
+        setVisibility(VISIBILITY.YEAR);
+    }
+    function onCancel() {
+        if (onListener) {
+            onListener({ type: PickerListenerType.Cancel });
+        }
+    }
+    function onToday() {
+        const value = new Date(); // Today date
+        formControl?.setState(value);
+        setValue(value);
+        yearControl.setState(value.getFullYear());
+        dayControl.setState(value.getDate());
+        monthControl.setState(value.getMonth());
+        if (onListener) {
+            onListener({ type: PickerListenerType.Now, value });
+        }
+    }
+    function onSelect() {
+        formControl?.setState(value);
+        if (onListener) {
+            onListener({ type: PickerListenerType.Select, value });
+        }
+    }
+    return (_jsxs("div", { className: "rls-date-picker", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-date-picker__header", children: [_jsx("div", { className: "rls-date-picker__title rls-date-picker__title--description", children: _jsx("span", { onClick: onVisibilityDay, children: title }) }), _jsx("div", { className: "rls-date-picker__title rls-date-picker__title--year", children: _jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), _jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, onClick: onVisibilityMonth })] }), _jsxs("div", { className: renderClassStatus('rls-date-picker__component', {
+                    year,
+                    day,
+                    month
+                }), children: [_jsx(RlsDayPicker, { formControl: dayControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), _jsx(RlsMonthPicker, { formControl: monthControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled }), _jsx(RlsYearPicker, { formControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: disabled })] }), _jsx("div", { className: renderClassStatus('rls-date-picker__footer', { automatic }), children: _jsxs("div", { className: "rls-date-picker__actions", children: [_jsx("div", { className: "rls-date-picker__actions--cancel", children: _jsx(RlsButton, { type: "ghost", onClick: onCancel, children: "Cancelar" }) }), _jsx("div", { className: "rls-date-picker__actions--today", children: _jsx(RlsButton, { type: "ghost", onClick: onToday, children: "Hoy" }) }), _jsx("div", { className: "rls-date-picker__actions--ok", children: _jsx(RlsButton, { type: "raised", onClick: onSelect, children: "Establecer" }) })] }) })] }));
+}
+//# sourceMappingURL=DatePicker.js.map

package/dist/esm/components/organisms/DatePicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../../src/components/organisms/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/organisms/DateRangeField/DateRangeField.css

@@ -0,0 +1,37 @@
+.rls-date-range-field {
+  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
+  position: relative;
+  float: left;
+  width: 100%;
+  box-sizing: border-box;
+}
+.rls-date-range-field__control {
+  position: relative;
+  float: left;
+  width: calc(100% - var(--sizing-28));
+  height: var(--sizing-24);
+  line-height: var(--sizing-24);
+  padding: 0rem;
+  cursor: default;
+  border: none;
+  outline: none;
+  color: var(--color-theme-input);
+  background: transparent;
+  font-size: var(--input-font-size);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--input-letter-spacing);
+}
+.rls-date-range-field__control::placeholder {
+  color: var(--color-theme-100);
+}
+.rls-date-range-field__control:disabled {
+  opacity: 0.5;
+}
+.rls-date-range-field__action {
+  color: var(--color-theme-300);
+  width: var(--sizing-24);
+  height: var(--sizing-24);
+  padding: 0rem;
+  margin-left: var(--sizing-4);
+  background: transparent;
+}

package/dist/esm/components/organisms/DateRangeField/DateRangeField.d.ts

@@ -0,0 +1,14 @@
+import { ReactControl } from '../../../hooks';
+import { DateRange } from '../../../models';
+import { RlsComponent } from '../../definitions';
+import './DateRangeField.css';
+interface DateRangeField extends RlsComponent {
+    date?: Date;
+    disabled?: boolean;
+    formControl?: ReactControl<HTMLElement, DateRange>;
+    maxDate?: Date;
+    minDate?: Date;
+    placeholder?: string;
+}
+export declare function RlsDateRangeField({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }: DateRangeField): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/organisms/DateRangeField/DateRangeField.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { DateRange } from '../../../models';
+import { RlsIcon } from '../../atoms';
+import { RlsDateRangePicker } from '../DateRangePicker/DateRangePicker';
+import { RlsModal } from '../Modal/Modal';
+import './DateRangeField.css';
+export function RlsDateRangeField({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
+    const rangeInitial = formControl?.state || DateRange.now();
+    const dateInitial = datePicker || new Date();
+    const [value, setValue] = useState(rangeInitial);
+    const [date] = useState(dateInitial);
+    const [show, setShow] = useState(false);
+    const [description, setDescription] = useState('');
+    useEffect(() => {
+        setDescription(value?.description || '');
+    }, [value]);
+    function onClickInput() {
+        setShow(true);
+    }
+    function onClickAction() {
+        if (value) {
+            formControl?.setState(undefined);
+            setValue(undefined);
+        }
+        else {
+            setShow(true);
+        }
+    }
+    return (_jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-box-field", children: [children && _jsx("label", { className: "rls-box-field__label", children: children }), _jsx("div", { className: "rls-box-field__component", children: _jsxs("div", { className: "rls-box-field__body", children: [_jsx("input", { className: "rls-date-field__control", type: "text", value: description, readOnly: true, placeholder: placeholder, onClick: onClickInput }), _jsx("button", { className: "rls-date-field__action", onClick: onClickAction, children: _jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), _jsx(RlsModal, { visible: show, children: _jsx(RlsDateRangePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
+                        if (value) {
+                            setValue(value);
+                        }
+                        setShow(false);
+                    } }) })] }));
+}
+//# sourceMappingURL=DateRangeField.js.map

package/dist/esm/components/organisms/DateRangeField/DateRangeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/DateRangeField/DateRangeField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,sBAAsB,CAAC;AAW9B,MAAM,UAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,IAAI,EAAE,UAAU,EAChB,QAAQ,EACR,WAAW,EACX,OAAO,EACP,OAAO,EACP,WAAW,EACX,QAAQ,EACO;IACf,MAAM,YAAY,GAAG,WAAW,EAAE,KAAK,IAAI,SAAS,CAAC,GAAG,EAAE,CAAC;IAC3D,MAAM,WAAW,GAAG,UAAU,IAAI,IAAI,IAAI,EAAE,CAAC;IAE7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAwB,YAAY,CAAC,CAAC;IACxE,MAAM,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAmB,WAAW,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,KAAK,EAAE,WAAW,IAAI,EAAE,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,YAAY;QACnB,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC;IAED,SAAS,aAAa;QACpB,IAAI,KAAK,EAAE;YACT,WAAW,EAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;YACjC,QAAQ,CAAC,SAAS,CAAC,CAAC;SACrB;aAAM;YACL,OAAO,CAAC,IAAI,CAAC,CAAC;SACf;IACH,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,eAAY,QAAQ,aACjD,eAAK,SAAS,EAAC,eAAe,aAC3B,QAAQ,IAAI,gBAAO,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAS,EAEvE,cAAK,SAAS,EAAC,0BAA0B,YACvC,eAAK,SAAS,EAAC,qBAAqB,aAClC,gBACE,SAAS,EAAC,yBAAyB,EACnC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,IAAI,EACd,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,GACrB,EAEF,iBAAQ,SAAS,EAAC,wBAAwB,EAAC,OAAO,EAAE,aAAa,YAC/D,KAAC,OAAO,IAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,GAAI,GAC3C,IACL,GACF,IACF,EAEN,KAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,YACrB,KAAC,kBAAkB,IACjB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;wBACxB,IAAI,KAAK,EAAE;4BACT,QAAQ,CAAC,KAAK,CAAC,CAAC;yBACjB;wBAED,OAAO,CAAC,KAAK,CAAC,CAAC;oBACjB,CAAC,GACD,GACO,IACP,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.css

@@ -0,0 +1,81 @@
+.rls-date-range-picker {
+  position: relative;
+  float: left;
+  max-width: 18.75rem;
+  overflow: hidden;
+}
+.rls-date-range-picker__header {
+  background: var(--color-rolster-100);
+  padding: var(--sizing-8);
+  box-sizing: border-box;
+  margin-bottom: var(--sizing-16);
+}
+.rls-date-range-picker__title {
+  color: var(--color-theme-500);
+  text-align: center;
+  cursor: default;
+  font-weight: var(--font-weight-bold);
+}
+.rls-date-range-picker__title:hover {
+  color: var(--color-rolster-500);
+}
+.rls-date-range-picker__title--description {
+  height: var(--sizing-32);
+  line-height: var(--sizing-32);
+  font-size: 1.15rem;
+}
+.rls-date-range-picker__title--year {
+  margin: var(--sizing-8) 0rem var(--sizing-4) 0rem;
+  height: var(--sizing-32);
+  line-height: var(--sizing-32);
+  font-size: var(--sizing-24);
+  color: var(--color-theme-300);
+}
+.rls-date-range-picker__title--month {
+  display: flex;
+  justify-content: space-between;
+}
+.rls-date-range-picker__title--month span {
+  height: var(--sizing-28);
+  line-height: var(--sizing-28);
+  font-size: var(--sizing-20);
+  color: var(--color-theme-300);
+  margin: auto 0rem;
+}
+.rls-date-range-picker__component {
+  display: flex;
+  padding: 0rem var(--sizing-4);
+  box-sizing: border-box;
+  margin-bottom: var(--sizing-8);
+}
+.rls-date-range-picker__component > * {
+  margin: 0rem auto;
+  display: none;
+}
+.rls-date-range-picker__component--day .rls-day-range-picker {
+  display: block;
+}
+.rls-date-range-picker__component--month .rls-month-picker {
+  display: grid;
+}
+.rls-date-range-picker__component--year .rls-year-picker {
+  display: block;
+}
+.rls-date-range-picker__footer--hidden {
+  display: none;
+}
+.rls-date-range-picker__actions {
+  padding: var(--sizing-8) var(--sizing-16) var(--sizing-12) var(--sizing-16);
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.rls-date-range-picker__actions--cancel {
+  width: 100%;
+}
+.rls-date-range-picker__actions--ok {
+  margin-top: var(--sizing-8);
+  width: 100%;
+}
+.rls-date-range-picker__actions button {
+  width: 100%;
+}

package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,16 @@
+import { ReactControl } from '../../../hooks';
+import { DateRange } from '../../../models';
+import { PickerListener } from '../../../types';
+import { RlsComponent } from '../../definitions';
+import './DateRangePicker.css';
+interface DateRangePicker extends RlsComponent {
+    automatic?: boolean;
+    date?: Date;
+    disabled?: boolean;
+    formControl?: ReactControl<HTMLElement, DateRange>;
+    maxDate?: Date;
+    minDate?: Date;
+    onListener?: (listener: PickerListener<DateRange>) => void;
+}
+export declare function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, rlsTheme, onListener }: DateRangePicker): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { normalizeMinTime, refactorMonth, refactorYear } from '@rolster/helpers-date';
+import { useEffect, useState } from 'react';
+import { useReactControl } from '../../../hooks';
+import { DateRange } from '../../../models';
+import { renderClassStatus } from '../../../utils/css';
+import { PickerListenerType } from '../../../types';
+import { RlsButton } from '../../atoms';
+import { RlsDayRangePicker, RlsMonthPicker, RlsMonthTitlePicker, RlsYearPicker } from '../../molecules';
+import './DateRangePicker.css';
+const VISIBILITY_STATE = {
+    month: false,
+    day: false,
+    year: false
+};
+const VISIBILITY = {
+    DAY: {
+        ...VISIBILITY_STATE,
+        day: true
+    },
+    MONTH: {
+        ...VISIBILITY_STATE,
+        month: true
+    },
+    YEAR: {
+        ...VISIBILITY_STATE,
+        year: true
+    }
+};
+export function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, rlsTheme, onListener }) {
+    const dateInitial = normalizeMinTime(datePicker || new Date());
+    const rangeInitial = formControl?.state || DateRange.now();
+    const yearControl = useReactControl({ state: dateInitial.getFullYear() });
+    const monthControl = useReactControl({ state: dateInitial.getMonth() });
+    const dayControl = useReactControl({ state: rangeInitial });
+    const [value, setValue] = useState(rangeInitial);
+    const [date, setDate] = useState(dateInitial);
+    const [{ day, month, year }, setVisibility] = useState(VISIBILITY.DAY);
+    useEffect(() => {
+        setDate((prevValue) => {
+            return typeof yearControl.state === 'number'
+                ? refactorYear(prevValue, yearControl.state)
+                : prevValue;
+        });
+        setVisibility(VISIBILITY.DAY);
+    }, [yearControl.state]);
+    useEffect(() => {
+        setDate((prevValue) => {
+            return typeof monthControl.state === 'number'
+                ? refactorMonth(prevValue, monthControl.state)
+                : prevValue;
+        });
+        setVisibility(VISIBILITY.DAY);
+    }, [monthControl.state]);
+    useEffect(() => {
+        if (dayControl.state) {
+            setValue(dayControl.state);
+        }
+        setVisibility(VISIBILITY.DAY);
+    }, [dayControl.state]);
+    function onVisibilityDay() {
+        setVisibility(VISIBILITY.DAY);
+    }
+    function onVisibilityMonth() {
+        setVisibility(VISIBILITY.MONTH);
+    }
+    function onVisibilityYear() {
+        setVisibility(VISIBILITY.YEAR);
+    }
+    function onCancel() {
+        if (onListener) {
+            onListener({ type: PickerListenerType.Cancel });
+        }
+    }
+    function onSelect() {
+        formControl?.setState(value);
+        if (onListener) {
+            onListener({ type: PickerListenerType.Select, value });
+        }
+    }
+    return (_jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-date-range-picker__header", children: [_jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: _jsx("span", { onClick: onVisibilityDay, children: value.description }) }), _jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: _jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), _jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, onClick: onVisibilityMonth })] }), _jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
+                    year,
+                    day,
+                    month
+                }), children: [_jsx(RlsDayRangePicker, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), _jsx(RlsMonthPicker, { formControl: monthControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), _jsx(RlsYearPicker, { formControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled })] }), _jsx("div", { className: renderClassStatus('rls-date-range-picker__footer', {
+                    automatic
+                }), children: _jsxs("div", { className: "rls-date-range-picker__actions", children: [_jsx("div", { className: "rls-date-range-picker__actions--cancel", children: _jsx(RlsButton, { type: "ghost", onClick: onCancel, children: "Cancelar" }) }), _jsx("div", { className: "rls-date-range-picker__actions--ok", children: _jsx(RlsButton, { type: "raised", onClick: onSelect, children: "Establecer" }) })] }) })] }));
+}
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../../../../src/components/organisms/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/organisms/FormNavigation/FormNavigation.css

@@ -0,0 +1,29 @@
+.rls-form-navigation {
+  position: fixed;
+  top: var(--sizing-16);
+  right: var(--sizing-16);
+  width: calc(100% - var(--sizing-32));
+  max-width: 20rem;
+  height: auto;
+  max-height: calc(100vh - var(--sizing-32));
+  z-index: var(--z-index-12);
+  padding: var(--sizing-16) var(--sizing-16) var(--sizing-24) var(--sizing-16);
+  box-sizing: border-box;
+  background: var(--background-theme-500);
+  border-radius: var(--sizing-8);
+  box-shadow: var(--shadow-center-dark-8);
+  transform: translateX(calc(100% + var(--sizing-32)));
+  transition: transform 240ms 0ms var(--standard-curve);
+}
+.rls-form-navigation--visible {
+  transform: translateX(0%);
+}
+.rls-form-navigation__header {
+  margin-bottom: var(--sizing-16);
+}
+.rls-form-navigation__header .rls-button-action {
+  width: var(--sizing-24);
+  height: var(--sizing-24);
+  padding: 0rem;
+  float: right;
+}

package/dist/esm/components/organisms/FormNavigation/FormNavigation.d.ts

@@ -0,0 +1,7 @@
+import { RlsComponent } from '../../definitions';
+import './FormNavigation.css';
+interface FormNavigation extends RlsComponent {
+    visible?: boolean;
+}
+export declare function RlsFormNavigation({ children, visible, rlsTheme }: FormNavigation): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/organisms/FormNavigation/FormNavigation.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderClassStatus } from '../../../utils/css';
+import './FormNavigation.css';
+export function RlsFormNavigation({ children, visible, rlsTheme }) {
+    return (_jsx("div", { className: renderClassStatus('rls-form-navigation', { visible }), "rls-theme": rlsTheme, children: _jsx("div", { className: "rls-form-navigation__body", children: children }) }));
+}
+//# sourceMappingURL=FormNavigation.js.map

package/dist/esm/components/organisms/FormNavigation/FormNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormNavigation.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FormNavigation/FormNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,sBAAsB,CAAC;AAM9B,MAAM,UAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAO,EACP,QAAQ,EACO;IACf,OAAO,CACL,cACE,SAAS,EAAE,iBAAiB,CAAC,qBAAqB,EAAE,EAAE,OAAO,EAAE,CAAC,eACrD,QAAQ,YAEnB,cAAK,SAAS,EAAC,2BAA2B,YAAE,QAAQ,GAAO,GACvD,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/organisms/Modal/Modal.css

@@ -0,0 +1,59 @@
+.rls-modal {
+  --pvt-component-transform: translateY(10rem) scale(0.6);
+  --pvt-component-height: 0rem;
+  --pvt-component-opacity: 0;
+  --pvt-component-visibility: hidden;
+  --pvt-backdrop-opacity: 0;
+  --pvt-backdrop-bottom: initial;
+  position: fixed;
+  display: flex;
+  top: 0rem;
+  left: 0rem;
+  width: 100%;
+  height: 100%;
+  z-index: var(--z-index-24);
+  visibility: hidden;
+  align-items: center;
+  justify-content: center;
+}
+.rls-modal--visible {
+  --pvt-component-visibility: visible;
+  --pvt-component-height: auto;
+  --pvt-component-opacity: 1;
+  --pvt-component-transform: translateY(0) scale(1);
+  --pvt-backdrop-bottom: 0rem;
+  --pvt-backdrop-opacity: 1;
+  visibility: visible;
+}
+.rls-modal__component {
+  position: absolute;
+  width: auto;
+  max-width: calc(100% - var(--sizing-16));
+  height: var(--pvt-component-height);
+  opacity: var(--pvt-component-opacity);
+  visibility: var(--pvt-component-visibility);
+  z-index: var(--z-index-2);
+  overflow: hidden;
+  border-radius: var(--sizing-8);
+  background: var(--background-theme-500);
+  will-change: transform;
+  transform: var(--pvt-component-transform);
+  transition: opacity 125ms 0ms var(--deceleration-curve),
+    transform 125ms 0ms var(--deceleration-curve),
+    visibility 125ms 0ms var(--deceleration-curve);
+}
+.rls-modal__backdrop {
+  position: absolute;
+  display: block;
+  top: 0rem;
+  left: 0rem;
+  right: 0rem;
+  bottom: var(--pvt-backdrop-bottom);
+  opacity: var(--pvt-backdrop-opacity);
+  z-index: 1;
+  will-change: opacity;
+  background: var(--backdrop-rolster-500);
+  backdrop-filter: blur(2px);
+  transition: opacity 120ms 0ms var(--deceleration-curve),
+    bottom 120ms 0ms var(--deceleration-curve);
+}

package/dist/esm/components/organisms/Modal/Modal.d.ts

@@ -0,0 +1,7 @@
+import { RlsComponent } from '../../definitions';
+import './Modal.css';
+interface Modal extends RlsComponent {
+    visible?: boolean;
+}
+export declare function RlsModal({ children, visible, rlsTheme }: Modal): import("react").ReactPortal;
+export {};

package/dist/esm/components/organisms/Modal/Modal.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ReactDOM from 'react-dom';
+import { renderClassStatus } from '../../../utils/css';
+import './Modal.css';
+export function RlsModal({ children, visible, rlsTheme }) {
+    return ReactDOM.createPortal(_jsxs("div", { className: renderClassStatus('rls-modal', { visible }), "rls-theme": rlsTheme, children: [_jsx("div", { className: "rls-modal__component", children: children }), _jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
+}
+//# sourceMappingURL=Modal.js.map

package/dist/esm/components/organisms/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../../../src/components/organisms/Modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,aAAa,CAAC;AAMrB,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAS;IAC7D,OAAO,QAAQ,CAAC,YAAY,CAC1B,eACE,SAAS,EAAE,iBAAiB,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,eAC3C,QAAQ,aAEnB,cAAK,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAO,EAEtD,cAAK,SAAS,EAAC,qBAAqB,GAAO,IACvC,EACN,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ,CAAC"}

package/dist/esm/components/organisms/SelectField/SelectField.css

@@ -0,0 +1,10 @@
+.rls-select-field .rls-list-field__control {
+  cursor: pointer;
+}
+
+.rls-select-field .rls-list-field__action {
+  transition: transform 160ms 0ms var(--sharp-curve);
+}
+.rls-select-field .rls-list-field__action--visible {
+  transform: rotate(180deg);
+}

package/dist/esm/components/organisms/SelectField/SelectField.d.ts

@@ -0,0 +1,13 @@
+import { ReactControl } from '../../../hooks';
+import { ListFieldElement } from '../../../models';
+import { RlsComponent } from '../../definitions';
+import './SelectField.css';
+interface SelectField<T = unknown> extends RlsComponent {
+    suggestions: ListFieldElement<T>[];
+    children?: any;
+    disabled?: boolean;
+    formControl?: ReactControl<HTMLElement>;
+    placeholder?: string;
+}
+export declare function RlsSelectField<T = unknown>({ suggestions, children, disabled, formControl, placeholder, rlsTheme }: SelectField<T>): import("react/jsx-runtime").JSX.Element;
+export {};