@rolster/react-components 1.4.0

package/dist/esm/components/molecules/PasswordField/PasswordField.d.ts

@@ -0,0 +1,10 @@
+import { ReactControl } from '../../../hooks';
+import { RlsComponent } from '../../definitions';
+import './PasswordField.css';
+interface PasswordFieldProps extends RlsComponent {
+    disabled?: boolean;
+    formControl?: ReactControl<HTMLInputElement, string>;
+    placeholder?: string;
+}
+export declare function RlsPasswordField({ children, disabled, formControl, placeholder, rlsTheme }: PasswordFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/molecules/PasswordField/PasswordField.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { renderClassStatus } from '../../../utils/css';
+import { RlsButtonAction, RlsInputPassword } from '../../atoms';
+import './PasswordField.css';
+export function RlsPasswordField({ children, disabled, formControl, placeholder, rlsTheme }) {
+    const [password, setPassword] = useState(true);
+    function onToggleInput() {
+        setPassword(!password);
+    }
+    return (_jsxs("div", { className: 'rls-password-field ' +
+            renderClassStatus(' rls-box-field', {
+                active: formControl?.active,
+                error: formControl?.dirty && !formControl?.valid,
+                disabled
+            }), "rls-theme": rlsTheme, 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(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), _jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), formControl?.dirty && formControl?.error && (_jsx("div", { className: "rls-box-field__helper rls-box-field__helper--error", children: _jsx("span", { children: formControl?.error.message }) }))] }));
+}
+//# sourceMappingURL=PasswordField.js.map

package/dist/esm/components/molecules/PasswordField/PasswordField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordField.js","sourceRoot":"","sources":["../../../../../src/components/molecules/PasswordField/PasswordField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEhE,OAAO,qBAAqB,CAAC;AAQ7B,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,WAAW,EACX,QAAQ,EACW;IACnB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE/C,SAAS,aAAa;QACpB,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC;IAED,OAAO,CACL,eACE,SAAS,EACP,qBAAqB;YACrB,iBAAiB,CAAC,gBAAgB,EAAE;gBAClC,MAAM,EAAE,WAAW,EAAE,MAAM;gBAC3B,KAAK,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC,WAAW,EAAE,KAAK;gBAChD,QAAQ;aACT,CAAC,eAEO,QAAQ,aAElB,QAAQ,IAAI,gBAAO,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAS,EACvE,cAAK,SAAS,EAAC,0BAA0B,YACvC,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,gBAAgB,IACf,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,GACpC,EAEF,KAAC,eAAe,IACd,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAClC,OAAO,EAAE,aAAa,GACtB,IACE,GACF,EACL,WAAW,EAAE,KAAK,IAAI,WAAW,EAAE,KAAK,IAAI,CAC3C,cAAK,SAAS,EAAC,oDAAoD,YACjE,yBAAO,WAAW,EAAE,KAAK,CAAC,OAAO,GAAQ,GACrC,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.css

@@ -0,0 +1,40 @@
+.rls-radiobutton-label {
+  --pvt-text-opacity: 1;
+  --pvt-text-height: var(--sizing-24);
+  --pvt-text-overflow: hidden;
+  --pvt-text-white-space: nowrap;
+  --pvt-text-text-overflow: ellipsis;
+  position: relative;
+  float: left;
+  width: 100%;
+  display: flex;
+}
+.rls-radiobutton-label--disabled {
+  --pvt-text-opacity: 0.5;
+  pointer-events: none;
+}
+.rls-radiobutton-label--extended {
+  --pvt-text-text-overflow: initial;
+  --pvt-text-overflow: initial;
+  --pvt-text-white-space: initial;
+  --pvt-text-height: auto;
+}
+.rls-radiobutton-label__component {
+  margin-right: var(--sizing-8);
+  width: auto;
+}
+.rls-radiobutton-label__text {
+  float: left;
+  max-width: calc(100% - var(--sizing-32));
+  height: var(--pvt-text-height);
+  line-height: var(--sizing-24);
+  color: var(--color-theme-300);
+  font-size: var(--label-font-size);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--label-letter-spacing);
+  user-select: none;
+  opacity: var(--pvt-text-opacity);
+  overflow: var(--pvt-text-overflow);
+  white-space: var(--pvt-text-white-space);
+  text-overflow: var(--pvt-text-text-overflow);
+}

package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.d.ts

@@ -0,0 +1,11 @@
+import { ReactControl } from '../../../hooks';
+import { RlsComponent } from '../../definitions';
+import './RadioButtonLabel.css';
+interface RadioButtonLabel extends RlsComponent {
+    disabled?: boolean;
+    extended?: boolean;
+    formControl?: ReactControl<HTMLElement>;
+    value?: any;
+}
+export declare function RlsRadioButtonLabel({ children, disabled, extended, formControl, rlsTheme, value }: RadioButtonLabel): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { renderClassStatus } from '../../../utils/css';
+import { RlsRadioButton } from '../../atoms';
+import './RadioButtonLabel.css';
+export function RlsRadioButtonLabel({ children, disabled, extended, formControl, rlsTheme, value }) {
+    const [checked, setChecked] = useState(formControl?.state || false);
+    useEffect(() => {
+        setChecked(formControl?.state === value);
+    }, [formControl?.state]);
+    function onSelect() {
+        if (formControl) {
+            formControl?.setState(value);
+        }
+    }
+    return (_jsxs("div", { className: renderClassStatus('rls-radiobutton-label', {
+            disabled,
+            extended
+        }), "rls-theme": rlsTheme, children: [_jsx("div", { className: "rls-radiobutton-label__component", onClick: onSelect, children: _jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), _jsx("label", { className: "rls-radiobutton-label__text", children: children })] }));
+}
+//# sourceMappingURL=RadioButtonLabel.js.map

package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioButtonLabel.js","sourceRoot":"","sources":["../../../../../src/components/molecules/RadioButtonLabel/RadioButtonLabel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,OAAO,wBAAwB,CAAC;AAShC,MAAM,UAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACY;IACjB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,WAAW,EAAE,KAAK,IAAI,KAAK,CAAC,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,WAAW,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,SAAS,QAAQ;QACf,IAAI,WAAW,EAAE;YACf,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;SAC9B;IACH,CAAC;IAED,OAAO,CACL,eACE,SAAS,EAAE,iBAAiB,CAAC,uBAAuB,EAAE;YACpD,QAAQ;YACR,QAAQ;SACT,CAAC,eACS,QAAQ,aAEnB,cAAK,SAAS,EAAC,kCAAkC,EAAC,OAAO,EAAE,QAAQ,YACjE,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,GACpD,EACN,gBAAO,SAAS,EAAC,6BAA6B,YAAE,QAAQ,GAAS,IAC7D,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.css

@@ -0,0 +1,40 @@
+.rls-switch-label {
+  --pvt-text-opacity: 1;
+  --pvt-text-height: var(--sizing-24);
+  --pvt-text-overflow: hidden;
+  --pvt-text-white-space: nowrap;
+  --pvt-text-text-overflow: ellipsis;
+  position: relative;
+  float: left;
+  width: 100%;
+  display: flex;
+}
+.rls-switch-label--disabled {
+  --pvt-text-opacity: 0.5;
+  pointer-events: none;
+}
+.rls-switch-label--extended {
+  --pvt-text-text-overflow: initial;
+  --pvt-text-overflow: initial;
+  --pvt-text-white-space: initial;
+  --pvt-text-height: auto;
+}
+.rls-switch-label__component {
+  margin-right: var(--sizing-8);
+  width: auto;
+}
+.rls-switch-label__text {
+  float: left;
+  max-width: calc(100% - var(--sizing-56));
+  height: var(--pvt-text-height);
+  line-height: var(--sizing-24);
+  color: var(--color-theme-300);
+  font-size: var(--label-font-size);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--label-letter-spacing);
+  user-select: none;
+  opacity: var(--pvt-text-opacity);
+  overflow: var(--pvt-text-overflow);
+  white-space: var(--pvt-text-white-space);
+  text-overflow: var(--pvt-text-text-overflow);
+}

package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.d.ts

@@ -0,0 +1,10 @@
+import { ReactControl } from '../../../hooks';
+import { RlsComponent } from '../../definitions';
+import './SwitchLabel.css';
+interface SwitchLabelProps extends RlsComponent {
+    disabled?: boolean;
+    extended?: boolean;
+    formControl?: ReactControl<HTMLElement, boolean>;
+}
+export declare function RlsSwitchLabel({ children, disabled, extended, formControl, rlsTheme }: SwitchLabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { renderClassStatus } from '../../../utils/css';
+import { RlsSwitch } from '../../atoms';
+import './SwitchLabel.css';
+export function RlsSwitchLabel({ children, disabled, extended, formControl, rlsTheme }) {
+    const [checked, setChecked] = useState(formControl?.value || false);
+    useEffect(() => {
+        setChecked(formControl?.state || false);
+    }, [formControl?.state]);
+    function onToggle() {
+        if (formControl) {
+            formControl?.setState(!formControl.state);
+        }
+        else {
+            setChecked(!checked);
+        }
+    }
+    return (_jsxs("div", { className: renderClassStatus('rls-switch-label', { disabled, extended }), "rls-theme": rlsTheme, children: [_jsx("div", { className: "rls-switch-label__component", onClick: onToggle, children: _jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), _jsx("label", { className: "rls-switch-label__text", children: children })] }));
+}
+//# sourceMappingURL=SwitchLabel.js.map

package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchLabel.js","sourceRoot":"","sources":["../../../../../src/components/molecules/SwitchLabel/SwitchLabel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,mBAAmB,CAAC;AAQ3B,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,EACS;IACjB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,WAAW,EAAE,KAAK,IAAI,KAAK,CAAC,CAAC;IAEpE,SAAS,CAAC,GAAG,EAAE;QACb,UAAU,CAAC,WAAW,EAAE,KAAK,IAAI,KAAK,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,SAAS,QAAQ;QACf,IAAI,WAAW,EAAE;YACf,WAAW,EAAE,QAAQ,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;SAC3C;aAAM;YACL,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC;SACtB;IACH,CAAC;IAED,OAAO,CACL,eACE,SAAS,EAAE,iBAAiB,CAAC,kBAAkB,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,eAC7D,QAAQ,aAEnB,cAAK,SAAS,EAAC,6BAA6B,EAAC,OAAO,EAAE,QAAQ,YAC5D,KAAC,SAAS,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC/C,EACN,gBAAO,SAAS,EAAC,wBAAwB,YAAE,QAAQ,GAAS,IACxD,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/molecules/TextField/TextField.css

@@ -0,0 +1,7 @@
+.rls-text-field {
+  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
+  position: relative;
+  float: left;
+  width: 100%;
+  box-sizing: border-box;
+}

package/dist/esm/components/molecules/TextField/TextField.d.ts

@@ -0,0 +1,10 @@
+import { ReactControl } from '../../../hooks';
+import { RlsComponent } from '../../definitions';
+import './TextField.css';
+interface TextField extends RlsComponent {
+    disabled?: boolean;
+    formControl?: ReactControl<HTMLInputElement, string>;
+    placeholder?: string;
+}
+export declare function RlsTextField({ children, disabled, formControl, placeholder, rlsTheme }: TextField): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/molecules/TextField/TextField.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderClassStatus } from '../../../utils/css';
+import { RlsInputText } from '../../atoms';
+import './TextField.css';
+export function RlsTextField({ children, disabled, formControl, placeholder, rlsTheme }) {
+    return (_jsxs("div", { className: 'rls-text-field ' +
+            renderClassStatus('rls-box-field', {
+                active: formControl?.active,
+                error: formControl?.dirty && !formControl?.valid,
+                disabled
+            }), "rls-theme": rlsTheme, children: [children && _jsx("label", { className: "rls-box-field__label", children: children }), _jsx("div", { className: "rls-box-field__component", children: _jsx("div", { className: "rls-box-field__body", children: _jsx(RlsInputText, { formControl: formControl, disabled: disabled, placeholder: placeholder }) }) }), formControl?.dirty && formControl?.error && (_jsx("div", { className: "rls-box-field__helper rls-box-field__helper--error", children: _jsx("span", { children: formControl?.error.message }) }))] }));
+}
+//# sourceMappingURL=TextField.js.map

package/dist/esm/components/molecules/TextField/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../../../src/components/molecules/TextField/TextField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,iBAAiB,CAAC;AAQzB,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,WAAW,EACX,QAAQ,EACE;IACV,OAAO,CACL,eACE,SAAS,EACP,iBAAiB;YACjB,iBAAiB,CAAC,eAAe,EAAE;gBACjC,MAAM,EAAE,WAAW,EAAE,MAAM;gBAC3B,KAAK,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC,WAAW,EAAE,KAAK;gBAChD,QAAQ;aACT,CAAC,eAEO,QAAQ,aAElB,QAAQ,IAAI,gBAAO,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAS,EACvE,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,qBAAqB,YAClC,KAAC,YAAY,IACX,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GACxB,GACE,GACF,EACL,WAAW,EAAE,KAAK,IAAI,WAAW,EAAE,KAAK,IAAI,CAC3C,cAAK,SAAS,EAAC,oDAAoD,YACjE,yBAAO,WAAW,EAAE,KAAK,CAAC,OAAO,GAAQ,GACrC,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/molecules/Toolbar/Toolbar.css

@@ -0,0 +1,50 @@
+.rls-toolbar {
+  display: flex;
+  justify-content: space-between;
+  column-gap: var(--sizing-12);
+  height: var(--rls-toolbar-height);
+}
+.rls-toolbar > * {
+  width: auto;
+}
+.rls-toolbar__content {
+  display: flex;
+  height: 100%;
+  padding: var(--sizing-4) var(--sizing-12);
+  box-sizing: border-box;
+  margin: auto 0rem;
+}
+.rls-toolbar__description {
+  overflow: hidden;
+  padding: 0rem var(--sizing-4);
+  box-sizing: border-box;
+  margin: auto 0rem;
+}
+.rls-toolbar__description > label {
+  position: relative;
+  float: left;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rls-toolbar__title {
+  color: var(--color-theme-500);
+  height: var(--sizing-24);
+  line-height: var(--sizing-24);
+  font-size: 1.0125rem;
+  letter-spacing: var(--label-letter-spacing);
+  font-weight: var(--font-weight-bold);
+}
+.rls-toolbar__subtitle {
+  color: var(--color-theme-300);
+}
+.rls-toolbar__actions {
+  display: flex;
+  box-sizing: border-box;
+  margin: auto 0rem;
+  column-gap: var(--sizing-16);
+}
+.rls-toolbar__actions > * {
+  margin: auto 0rem;
+}

package/dist/esm/components/molecules/Toolbar/Toolbar.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { RlsComponent } from '../../definitions';
+import './Toolbar.css';
+interface Toolbar extends RlsComponent {
+    actions?: ReactNode[];
+    subtitle?: ReactNode;
+}
+export declare function RlsToolbar({ actions, children, subtitle }: Toolbar): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/molecules/Toolbar/Toolbar.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Toolbar.css';
+export function RlsToolbar({ actions, children, subtitle }) {
+    return (_jsxs("div", { className: "rls-toolbar", children: [_jsxs("div", { className: "rls-toolbar__description", children: [children && _jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (_jsx("label", { className: "rls-toolbar__subtitle caption-semibold", children: subtitle }))] }), actions && (_jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (_jsx("div", { children: action }, index))) }))] }));
+}
+//# sourceMappingURL=Toolbar.js.map

package/dist/esm/components/molecules/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../../src/components/molecules/Toolbar/Toolbar.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAOvB,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAW;IACjE,OAAO,CACL,eAAK,SAAS,EAAC,aAAa,aAC1B,eAAK,SAAS,EAAC,0BAA0B,aACtC,QAAQ,IAAI,gBAAO,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAS,EACpE,QAAQ,IAAI,CACX,gBAAO,SAAS,EAAC,wCAAwC,YACtD,QAAQ,GACH,CACT,IACG,EACL,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,sBAAsB,YAClC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,wBAAkB,MAAM,IAAd,KAAK,CAAgB,CAChC,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/molecules/YearPicker/YearPicker.css

@@ -0,0 +1,77 @@
+.rls-year-picker {
+  position: relative;
+  float: left;
+  width: 100%;
+  max-width: 17.5rem;
+  box-sizing: border-box;
+  overflow: hidden;
+  user-select: none;
+}
+.rls-year-picker__header {
+  display: flex;
+  box-sizing: border-box;
+  padding: var(--sizing-8) var(--sizing-12);
+  color: var(--color-theme-500);
+  background: var(--background-theme-100);
+}
+.rls-year-picker__title {
+  width: 100%;
+  height: var(--sizing-32);
+  line-height: var(--sizing-32);
+  text-align: center;
+  font-weight: var(--font-weight-bold);
+}
+.rls-year-picker__action {
+  width: var(--sizing-32);
+  height: var(--sizing-32);
+  line-height: var(--sizing-32);
+}
+.rls-year-picker__action button {
+  color: var(--color-theme-500);
+  background: transparent;
+  outline: none;
+  width: inherit;
+  height: inherit;
+}
+.rls-year-picker__action button:disabled {
+  opacity: 0.5;
+}
+.rls-year-picker__component {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--sizing-8);
+  width: 100%;
+  float: left;
+  padding: var(--sizing-8);
+  box-sizing: border-box;
+}
+.rls-year-picker__year {
+  position: relative;
+  float: left;
+  display: flex;
+  box-sizing: border-box;
+  text-align: center;
+  height: var(--sizing-36);
+  border-radius: var(--sizing-8);
+  color: var(--color-theme-300);
+}
+.rls-year-picker__year:hover {
+  background: var(--color-rolster-900);
+  color: var(--color-light-500);
+}
+.rls-year-picker__year--selected:not(:hover) {
+  background: var(--color-rolster-500);
+  color: var(--color-light-500);
+}
+.rls-year-picker__year--disabled {
+  pointer-events: none;
+  border: none;
+  opacity: 0.5;
+}
+.rls-year-picker__year__span {
+  margin: auto;
+  cursor: default;
+  pointer-events: none;
+  font-weight: var(--font-weight-medium);
+}

package/dist/esm/components/molecules/YearPicker/YearPicker.d.ts

@@ -0,0 +1,12 @@
+import './YearPicker.css';
+import { RlsComponent } from '../../definitions';
+import { ReactControl } from '../../../hooks';
+interface YearPicker extends RlsComponent {
+    date?: Date;
+    disabled?: boolean;
+    formControl?: ReactControl<HTMLElement, number>;
+    maxDate?: Date;
+    minDate?: Date;
+}
+export declare function RlsYearPicker({ formControl, date: date, disabled: disabledPicker, maxDate, minDate, rlsTheme }: YearPicker): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/molecules/YearPicker/YearPicker.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import './YearPicker.css';
+import { createYearPicker } from '../../../utils/year-picker';
+import { RlsIcon } from '../../atoms';
+import { renderClassStatus } from '../../../utils/css';
+export function RlsYearPicker({ formControl, date: date, disabled: disabledPicker, maxDate, minDate, rlsTheme }) {
+    const initialDate = date || new Date();
+    const initialYear = formControl?.state || initialDate.getFullYear();
+    const [value, setValue] = useState(initialYear);
+    const [year, setYear] = useState(initialYear);
+    const [template, setTemplate] = useState(createYearPicker({
+        value: formControl?.state || value,
+        year: initialYear,
+        minDate,
+        maxDate
+    }));
+    useEffect(() => {
+        setTemplate(createYearPicker({
+            value: formControl?.state || value,
+            year,
+            minDate,
+            maxDate
+        }));
+    }, [value, year, date, minDate, maxDate]);
+    function onClickPrev() {
+        setYear(year - 8);
+    }
+    function onClickNext() {
+        setYear(year + 8);
+    }
+    function onChange(value) {
+        formControl?.setState(value);
+        setYear(value);
+        setValue(value);
+    }
+    return (_jsxs("div", { className: "rls-year-picker", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-year-picker__header", children: [_jsx("div", { className: "rls-year-picker__action rls-year-picker__action--prev", children: _jsx("button", { disabled: !template.hasPrevious || disabledPicker, onClick: onClickPrev, children: _jsx(RlsIcon, { value: "arrow-ios-left" }) }) }), _jsx("div", { className: "rls-year-picker__title", children: _jsxs("label", { className: "title1-bold", children: [template.minRange, " - ", template.maxRange] }) }), _jsx("div", { className: "rls-year-picker__action rls-year-picker__action--next", children: _jsx("button", { disabled: !template.hasNext || disabledPicker, onClick: onClickNext, children: _jsx(RlsIcon, { value: "arrow-ios-right" }) }) })] }), _jsx("div", { className: "rls-year-picker__component", children: template.years.map(({ value, disabled, selected }, index) => (_jsx("div", { className: renderClassStatus('rls-year-picker__year', {
+                        disabled: disabled || disabledPicker,
+                        selected
+                    }), onClick: () => {
+                        if (value) {
+                            onChange(value);
+                        }
+                    }, children: _jsx("span", { className: "rls-year-picker__year__span body1-medium", children: value || '????' }) }, index))) })] }));
+}
+//# sourceMappingURL=YearPicker.js.map

package/dist/esm/components/molecules/YearPicker/YearPicker.js.map

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

package/dist/esm/components/molecules/index.d.ts

@@ -0,0 +1,16 @@
+export * from './Ballot/Ballot';
+export * from './ButtonToggle/ButtonToggle';
+export * from './CheckBoxLabel/CheckBoxLabel';
+export * from './DayPicker/DayPicker';
+export * from './DayRangePicker/DayRangePicker';
+export * from './MoneyField/MoneyField';
+export * from './MonthPicker/MonthPicker';
+export * from './MonthTitlePicker/MonthTitlePicker';
+export * from './NumberField/NumberField';
+export * from './Pagination/Pagination';
+export * from './PasswordField/PasswordField';
+export * from './RadioButtonLabel/RadioButtonLabel';
+export * from './SwitchLabel/SwitchLabel';
+export * from './TextField/TextField';
+export * from './Toolbar/Toolbar';
+export * from './YearPicker/YearPicker';

package/dist/esm/components/molecules/index.js

@@ -0,0 +1,17 @@
+export * from './Ballot/Ballot';
+export * from './ButtonToggle/ButtonToggle';
+export * from './CheckBoxLabel/CheckBoxLabel';
+export * from './DayPicker/DayPicker';
+export * from './DayRangePicker/DayRangePicker';
+export * from './MoneyField/MoneyField';
+export * from './MonthPicker/MonthPicker';
+export * from './MonthTitlePicker/MonthTitlePicker';
+export * from './NumberField/NumberField';
+export * from './Pagination/Pagination';
+export * from './PasswordField/PasswordField';
+export * from './RadioButtonLabel/RadioButtonLabel';
+export * from './SwitchLabel/SwitchLabel';
+export * from './TextField/TextField';
+export * from './Toolbar/Toolbar';
+export * from './YearPicker/YearPicker';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/molecules/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC"}

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

@@ -0,0 +1,71 @@
+.rls-autocomplete-field.rls-box-field--selected .rls-list-field__control {
+  width: calc(100% - var(--sizing-28));
+}
+
+.rls-autocomplete-field .rls-list-field__control {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rls-autocomplete-field .rls-list-field__ul__search {
+  display: flex;
+  width: calc(100% - var(--sizing-24));
+  margin: var(--sizing-4) var(--sizing-12) var(--sizing-12) var(--sizing-12);
+  overflow: hidden;
+  background: var(--background-theme-300);
+  border-radius: var(--sizing-8);
+  padding: var(--sizing-8);
+  box-sizing: border-box;
+}
+.rls-autocomplete-field .rls-list-field__ul__search button {
+  color: var(--color-theme-300);
+  background: transparent;
+}
+.rls-autocomplete-field
+  .rls-list-field__ul__search
+  button:not(:disabled):hover {
+  color: var(--color-xofttion-300);
+}
+.rls-autocomplete-field .rls-list-field__ul__search button:disabled {
+  opacity: 0.5;
+}
+
+.rls-autocomplete-field .rls-list-field__ul__control {
+  position: relative;
+  float: left;
+  width: 100%;
+  height: var(--sizing-24);
+  line-height: var(--sizing-24);
+  padding: 0rem;
+  cursor: text;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--color-theme-input);
+  font-size: var(--input-font-size);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--input-letter-spacing);
+}
+.rls-autocomplete-field .rls-list-field__ul__control::placeholder {
+  color: var(--color-theme-100);
+}
+.rls-autocomplete-field .rls-list-field__ul__control::selection {
+  background: var(--color-xofttion-700);
+  color: var(--color-light-500);
+}
+.rls-autocomplete-field .rls-list-field__ul__control:disabled {
+  opacity: 0.5;
+}
+
+.rls-autocomplete-field .rls-list-field__ul .rls-progress-bar {
+  margin-bottom: var(--sizing-16);
+}
+
+.rls-autocomplete-field .rls-list-field__element .rls-ballot__title label {
+  background: var(--color-xofttion-100);
+  color: var(--color-xofttion-500);
+  padding: 0rem var(--sizing-4);
+  border-radius: var(--sizing-4);
+}

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

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