@rolster/react-components 18.12.9 → 18.13.0

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

@@ -1,50 +1,55 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MONTH_NAMES } from '@rolster/helpers-date';
-import { MONTH_MAX_VALUE, MONTH_MIN_VALUE, isMaxLimitMonth, isMinLimitMonth } from '../../../helpers/month-picker';
+import { itIsDefined } from '@rolster/helpers-advanced';
+import { MONTH_NAMES, Month } from '@rolster/helpers-date';
 import { RlsButtonAction } from '../../atoms';
 import './MonthTitlePicker.css';
-export function RlsMonthTitlePicker({ date, disabled, monthControl, maxDate, minDate, onClick, type, yearControl }) {
-    const { state: month } = monthControl;
-    const { state: year } = yearControl;
-    const monthName = MONTH_NAMES()[month || 0];
+import { monthLimitTemplate } from '@rolster/helpers-components';
+export function RlsMonthTitlePicker({ monthControl, type, yearControl, date, disabled, maxDate, minDate, onClick }) {
+    const { limitNext, limitPrevious } = monthLimitTemplate({
+        date,
+        maxDate,
+        minDate,
+        month: monthControl.state
+    });
+    const monthName = MONTH_NAMES()[monthControl.state || 0];
     function onPreviousMonth() {
-        if (typeof month === 'number' && typeof year === 'number') {
-            if (month > MONTH_MIN_VALUE) {
-                monthControl.setState(month - 1);
+        if (itIsDefined(monthControl.state) && itIsDefined(yearControl.state)) {
+            if (monthControl.state > Month.January) {
+                monthControl.setState(monthControl.state - 1);
             }
             else {
-                monthControl.setState(MONTH_MAX_VALUE);
-                yearControl.setState(year - 1);
+                monthControl.setState(Month.December);
+                yearControl.setState(yearControl.state - 1);
             }
         }
     }
     function onPreviousYear() {
-        if (typeof year === 'number') {
-            yearControl.setState(year - 1);
+        if (itIsDefined(yearControl.state)) {
+            yearControl.setState(yearControl.state - 1);
         }
     }
     function onPrevious() {
         type === 'month' ? onPreviousMonth() : onPreviousYear();
     }
     function onNextMonth() {
-        if (typeof month === 'number' && typeof year === 'number') {
-            if (month < MONTH_MAX_VALUE) {
-                monthControl.setState(month + 1);
+        if (itIsDefined(monthControl.state) && itIsDefined(yearControl.state)) {
+            if (monthControl.state < Month.December) {
+                monthControl.setState(monthControl.state + 1);
             }
             else {
-                monthControl.setState(MONTH_MIN_VALUE);
-                yearControl.setState(year + 1);
+                monthControl.setState(Month.January);
+                yearControl.setState(yearControl.state + 1);
             }
         }
     }
     function onNextYear() {
-        if (typeof year === 'number') {
-            yearControl.setState(year + 1);
+        if (itIsDefined(yearControl.state)) {
+            yearControl.setState(yearControl.state + 1);
         }
     }
     function onNext() {
         type === 'month' ? onNextMonth() : onNextYear();
     }
-    return (_jsxs("div", { className: "rls-month-title-picker", children: [_jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: isMinLimitMonth(month, date, minDate) || disabled }), _jsx("span", { onClick: onClick, children: monthName }), _jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNext, disabled: isMaxLimitMonth(month, date, maxDate) || disabled })] }));
+    return (_jsxs("div", { className: "rls-month-title-picker", children: [_jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), _jsx("span", { onClick: onClick, children: monthName }), _jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
 }
 //# sourceMappingURL=MonthTitlePicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MonthTitlePicker.js","sourceRoot":"","sources":["../../../../../src/components/molecules/MonthTitlePicker/MonthTitlePicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EACL,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EAChB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,wBAAwB,CAAC;AAehC,MAAM,UAAU,mBAAmB,CAAC,EAClC,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,OAAO,EACP,OAAO,EACP,IAAI,EACJ,WAAW,EACW;IACtB,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,YAAY,CAAC;IACtC,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,WAAW,CAAC;IAEpC,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IAE5C,SAAS,eAAe;QACtB,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC1D,IAAI,KAAK,GAAG,eAAe,EAAE,CAAC;gBAC5B,YAAY,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,YAAY,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;gBACvC,WAAW,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YACjC,CAAC;QACH,CAAC;IACH,CAAC;IAED,SAAS,cAAc;QACrB,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC7B,WAAW,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAED,SAAS,UAAU;QACjB,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC;IAC1D,CAAC;IAED,SAAS,WAAW;QAClB,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC1D,IAAI,KAAK,GAAG,eAAe,EAAE,CAAC;gBAC5B,YAAY,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,YAAY,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;gBACvC,WAAW,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YACjC,CAAC;QACH,CAAC;IACH,CAAC;IAED,SAAS,UAAU;QACjB,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC7B,WAAW,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAED,SAAS,MAAM;QACb,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC;IAClD,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,wBAAwB,aACrC,KAAC,eAAe,IACd,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,QAAQ,GAC3D,EAEF,eAAM,OAAO,EAAE,OAAO,YAAG,SAAS,GAAQ,EAE1C,KAAC,eAAe,IACd,IAAI,EAAC,iBAAiB,EACtB,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,QAAQ,GAC3D,IACE,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"MonthTitlePicker.js","sourceRoot":"","sources":["../../../../../src/components/molecules/MonthTitlePicker/MonthTitlePicker.tsx"],"names":[],"mappings":"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"}

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

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

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

@@ -2,49 +2,48 @@
   position: relative;
   display: flex;
   justify-content: center;
-  float: left;
   width: 100%;
   overflow: hidden;
-  height: var(--sizing-x20);
-  padding: 0rem var(--sizing-x6);
+  height: var(--rls-sizing-x20);
+  padding: 0rem var(--rls-sizing-x6);
   box-sizing: border-box;
 }
 .rls-pagination__pages {
   display: flex;
-  gap: var(--sizing-x4);
+  gap: var(--rls-sizing-x4);
   width: auto;
-  margin: 0rem var(--sizing-x4);
+  margin: 0rem var(--rls-sizing-x4);
 }
 .rls-pagination__page {
-  background: var(--background-theme-100);
-  color: var(--color-theme-500);
+  background: var(--rls-app-background-100);
+  color: var(--rls-app-color-500);
   cursor: default;
   margin: auto 0rem;
   text-align: center;
-  width: var(--sizing-x16);
-  height: var(--sizing-x16);
-  line-height: var(--sizing-x16);
-  border-radius: var(--sizing-x2);
-  font-size: var(--body-font-size);
-  letter-spacing: var(--body-letter-spacing);
+  width: var(--rls-sizing-x16);
+  height: var(--rls-sizing-x16);
+  line-height: var(--rls-sizing-x16);
+  border-radius: var(--rls-sizing-x2);
+  font-size: var(--rls-body-font-size);
+  letter-spacing: var(--rls-body-letter-spacing);
 }
 .rls-pagination__page:hover {
-  background: var(--color-rolster-300);
-  color: var(--color-rolster-900);
+  background: var(--rls-theme-color-300);
+  color: var(--rls-theme-color-900);
 }
 .rls-pagination__page--active {
-  background: var(--gradient-rolster-500);
-  color: var(--color-light-500);
+  background: var(--rls-theme-gradient-500);
+  color: var(--rls-light-color-500);
 }
 .rls-pagination__description {
-  color: var(--color-theme-500);
-  margin: 0rem var(--sizing-x4);
+  color: var(--rls-app-color-500);
+  margin: 0rem var(--rls-sizing-x4);
   width: auto;
-  height: var(--sizing-x20);
-  line-height: var(--sizing-x20);
-  font-size: var(--body-font-size);
-  font-weight: var(--font-weight-bold);
-  letter-spacing: var(--body-letter-spacing);
+  height: var(--rls-sizing-x20);
+  line-height: var(--rls-sizing-x20);
+  font-size: var(--rls-body-font-size);
+  font-weight: var(--rls-font-weight-bold);
+  letter-spacing: var(--rls-body-letter-spacing);
 }
 .rls-pagination__actions {
   width: auto;
@@ -52,14 +51,14 @@
 .rls-pagination__action {
   background: none;
   outline: none;
-  color: var(--color-theme-300);
-  height: var(--sizing-x18);
-  width: var(--sizing-x18);
-  padding: var(--sizing-x3);
-  margin: var(--sizing-x1) 0rem;
+  color: var(--rls-app-color-300);
+  height: var(--rls-sizing-x18);
+  width: var(--rls-sizing-x18);
+  padding: var(--rls-sizing-x3);
+  margin: var(--rls-sizing-x1) 0rem;
 }
 .rls-pagination__action:hover {
-  color: var(--color-rolster-300);
+  color: var(--rls-theme-color-300);
   cursor: pointer;
 }
 .rls-pagination__action:disabled {

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

@@ -1,12 +1,11 @@
 .rls-password-field {
-  --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
-  --rls-action-ripple-dimension: var(--sizing-x16);
-  --rls-action-ripple-position: -8rem;
+  --rlc-input-parent-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
+  --rlc-action-ripple-dimension: var(--rls-sizing-x16);
+  --rlc-action-ripple-position: -8rem;
   position: relative;
-  float: left;
   width: 100%;
   box-sizing: border-box;
 }
 .rls-password-field .rls-button-action {
-  margin: auto var(--sizing-x2) auto 0rem;
+  margin: auto var(--rls-sizing-x2) auto 0rem;
 }

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

@@ -1,11 +1,10 @@
 .rls-radiobutton-label {
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--sizing-x12);
+  --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
   position: relative;
-  float: left;
   width: 100%;
   display: flex;
 }
@@ -20,18 +19,17 @@
   --pvt-text-height: auto;
 }
 .rls-radiobutton-label__component {
-  margin-right: var(--sizing-x4);
+  margin-right: var(--rls-sizing-x4);
   width: auto;
 }
 .rls-radiobutton-label__text {
-  float: left;
-  max-width: calc(100% - var(--sizing-x16));
+  max-width: calc(100% - var(--rls-sizing-x16));
   height: var(--pvt-text-height);
-  line-height: var(--sizing-x12);
-  color: var(--color-theme-300);
-  font-size: var(--label-font-size);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--label-letter-spacing);
+  line-height: var(--rls-sizing-x12);
+  color: var(--rls-app-color-300);
+  font-size: var(--rls-label-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--rls-label-letter-spacing);
   user-select: none;
   opacity: var(--pvt-text-opacity);
   overflow: var(--pvt-text-overflow);

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

@@ -1,11 +1,11 @@
 .rls-switch-label {
   --pvt-text-opacity: 1;
-  --pvt-text-height: var(--sizing-x12);
+  --pvt-text-height: var(--rls-sizing-x12);
   --pvt-text-overflow: hidden;
   --pvt-text-white-space: nowrap;
   --pvt-text-text-overflow: ellipsis;
   display: flex;
-  column-gap: var(--sizing-x4);
+  column-gap: var(--rls-sizing-x4);
 }
 .rls-switch-label--disabled {
   --pvt-text-opacity: 0.5;
@@ -21,14 +21,13 @@
   max-width: 20rem;
 }
 .rls-switch-label__text {
-  float: left;
-  max-width: calc(100% - var(--sizing-x28));
+  max-width: calc(100% - var(--rls-sizing-x28));
   height: var(--pvt-text-height);
-  line-height: var(--sizing-x12);
-  color: var(--color-theme-300);
-  font-size: var(--label-font-size);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--label-letter-spacing);
+  line-height: var(--rls-sizing-x12);
+  color: var(--rls-app-color-300);
+  font-size: var(--rls-label-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--rls-label-letter-spacing);
   user-select: none;
   opacity: var(--pvt-text-opacity);
   overflow: var(--pvt-text-overflow);

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

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

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

@@ -2,8 +2,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  column-gap: var(--sizing-x6);
-  height: var(--rls-toolbar-height);
+  column-gap: var(--rls-sizing-x6);
+  height: var(--rlc-toolbar-height);
 }
 .rls-toolbar > * {
   width: auto;
@@ -11,7 +11,7 @@
 .rls-toolbar__description {
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-x2);
+  row-gap: var(--rls-sizing-x2);
   overflow: hidden;
 }
 .rls-toolbar__description > label {
@@ -22,19 +22,19 @@
   white-space: nowrap;
 }
 .rls-toolbar__title {
-  color: var(--color-theme-500);
-  height: var(--sizing-x12);
-  line-height: var(--sizing-x12);
+  color: var(--rls-app-color-500);
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
   font-size: 8.125rem;
-  letter-spacing: var(--label-letter-spacing);
-  font-weight: var(--font-weight-bold);
+  letter-spacing: var(--rls-label-letter-spacing);
+  font-weight: var(--rls-font-weight-bold);
 }
 .rls-toolbar__subtitle {
-  color: var(--color-theme-300);
+  color: var(--rls-app-color-300);
 }
 .rls-toolbar__actions {
   display: flex;
   box-sizing: border-box;
-  column-gap: var(--sizing-x8);
+  column-gap: var(--rls-sizing-x8);
   align-items: center;
 }

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

@@ -1,6 +1,8 @@
 .rls-year-picker {
+  --pvt-component-background: transparent;
+  --pvt-component-font-color: var(--rls-app-color-500);
+  --pvt-component-border: var(--rls-border-1) solid transparent;
   position: relative;
-  float: left;
   width: 100%;
   max-width: 140rem;
   box-sizing: border-box;
@@ -12,24 +14,25 @@
   justify-content: space-between;
   align-items: center;
   box-sizing: border-box;
-  padding: var(--sizing-x4) var(--sizing-x6);
-  color: var(--color-theme-500);
-  background: var(--background-theme-100);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
+  color: var(--rls-app-color-500);
+  background: var(--rls-app-background-100);
+  border-radius: var(--rls-sizing-x4);
 }
 .rls-year-picker__action {
-  width: var(--sizing-x16);
-  height: var(--sizing-x16);
-  line-height: var(--sizing-x16);
+  width: var(--rls-sizing-x16);
+  height: var(--rls-sizing-x16);
+  line-height: var(--rls-sizing-x16);
 }
 .rls-year-picker__action button {
-  color: var(--color-theme-500);
+  color: var(--rls-app-color-500);
   background: transparent;
   outline: none;
   width: inherit;
   height: inherit;
 }
-.rls-year-picker__action button:hover {
-  color: var(--color-rolster-500);
+.rls-year-picker__action button:not(:disabled):hover {
+  color: var(--rls-theme-color-500);
 }
 .rls-year-picker__action button:disabled {
   opacity: 0.5;
@@ -37,40 +40,51 @@
 .rls-year-picker__component {
   position: relative;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--sizing-x4);
   width: 100%;
-  float: left;
-  padding: var(--sizing-x4);
+  grid-template-columns: repeat(3, 1fr);
+  padding: var(--rls-sizing-x4);
   box-sizing: border-box;
+  row-gap: var(--rls-sizing-x6);
+  column-gap: var(--rls-sizing-x8);
 }
 .rls-year-picker__year {
   position: relative;
-  float: left;
   display: flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
   text-align: center;
-  height: var(--sizing-x18);
-  border-radius: var(--sizing-x4);
-  color: var(--color-theme-300);
+  height: var(--rls-sizing-x20);
+  border-radius: var(--rls-sizing-x4);
+}
+.rls-year-picker__year:not(:hover) {
+  color: var(--pvt-component-font-color);
+  border: var(--pvt-component-border);
+  background: var(--pvt-component-background);
 }
 .rls-year-picker__year:hover {
-  background: var(--color-rolster-900);
-  color: var(--color-light-500);
+  background: var(--rls-theme-color-900);
+  color: var(--rls-theme-font-900);
+  border: var(--rls-theme-border-1-900);
+}
+.rls-year-picker__year--selected {
+  --pvt-component-border: var(--rls-app-border-1-300);
 }
-.rls-year-picker__year--selected:not(:hover) {
-  background: var(--color-rolster-500);
-  color: var(--color-light-500);
+.rls-year-picker__year--focused {
+  --pvt-component-background: var(--rls-theme-color-500);
+  --pvt-component-font-color: var(--rls-theme-font-500);
+  --pvt-component-border: var(--rls-theme-border-1-500);
 }
 .rls-year-picker__year--disabled {
+  --pvt-span-background: var(--rls-app-background-300);
+  --pvt-component-font-color: var(--rls-app-color-100);
+  --pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
   pointer-events: none;
-  border: none;
-  opacity: 0.5;
 }
 .rls-year-picker__year__span {
-  font-size: var(--sizing-x8);
-  margin: auto;
+  font-weight: var(--rls-font-weight-semibold);
+  font-size: var(--rls-sizing-x8);
   cursor: default;
   pointer-events: none;
-  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.325rem;
 }

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

@@ -9,5 +9,5 @@ interface YearPickerProps extends RlsComponent {
     minDate?: Date;
     onValue?: (value: number) => void;
 }
-export declare function RlsYearPicker({ formControl, date, disabled: disabledPicker, maxDate, minDate, rlsTheme, onValue }: YearPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function RlsYearPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme }: YearPickerProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,28 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { itIsDefined } from '@rolster/helpers-advanced';
+import { checkYearPicker, createYearPicker } from '@rolster/helpers-components';
 import { useEffect, useState } from 'react';
 import { renderClassStatus } from '../../../helpers/css';
-import { createYearPicker } from '../../../helpers/year-picker';
-import { RlsIcon } from '../../atoms';
+import { RlsButtonAction } from '../../atoms';
 import './YearPicker.css';
-export function RlsYearPicker({ formControl, date, disabled: disabledPicker, maxDate, minDate, rlsTheme, onValue }) {
-    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
-    }));
+export function RlsYearPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme }) {
+    const currentDate = date || new Date();
+    const [value, setValue] = useState(formControl?.state || currentDate.getFullYear());
+    const [year, setYear] = useState(formControl?.state || currentDate.getFullYear());
+    const [template, setTemplate] = useState(createYearPicker(createPickerProps()));
     useEffect(() => {
-        setTemplate(createYearPicker({
-            value: formControl?.state || value,
+        const props = createPickerProps(); // YearPickerProps
+        const year = checkYearPicker(props);
+        year
+            ? setYearValue(year)
+            : setTemplate(createYearPicker(createPickerProps()));
+    }, [date, year, value, minDate, maxDate]);
+    useEffect(() => {
+        const year = checkYearPicker(createPickerProps());
+        itIsDefined(year)
+            ? formControl?.setState(year)
+            : setValue(formControl?.state || currentDate.getFullYear());
+    }, [formControl?.state]);
+    function createPickerProps() {
+        return {
+            date: currentDate,
             year,
             minDate,
             maxDate
-        }));
-    }, [value, year, minDate, maxDate]);
+        };
+    }
+    function setYearValue(value) {
+        formControl ? formControl.setState(value) : setValue(value);
+        setYear(value);
+    }
     function onClickPrev() {
         setYear(year - 8);
     }
@@ -30,20 +42,15 @@ export function RlsYearPicker({ formControl, date, disabled: disabledPicker, max
         setYear(year + 8);
     }
     function onChange(value) {
-        formControl?.setState(value);
-        setYear(value);
-        setValue(value);
+        setYearValue(value);
         if (onValue) {
             onValue(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" }) }) }), _jsxs("label", { className: "title-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', {
+    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(RlsButtonAction, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabledPicker }) }), _jsxs("label", { className: "rls-title-bold", children: [template.minRange, " - ", template.maxRange] }), _jsx("div", { className: "rls-year-picker__action rls-year-picker__action--next", children: _jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabledPicker }) })] }), _jsx("div", { className: "rls-year-picker__component", children: template.years.map(({ value, disabled, focused, selected }, index) => (_jsx("div", { className: renderClassStatus('rls-year-picker__year', {
                         disabled: disabled || disabledPicker,
+                        focused,
                         selected
-                    }), onClick: () => {
-                        if (value && !disabled) {
-                            onChange(value);
-                        }
-                    }, children: _jsx("span", { className: "rls-year-picker__year__span body1-medium", children: value || '????' }) }, index))) })] }));
+                    }), onClick: value && !disabledPicker ? () => onChange(value) : undefined, children: _jsx("span", { className: "rls-year-picker__year__span rls-body1-medium", children: value || '????' }) }, index))) })] }));
 }
 //# sourceMappingURL=YearPicker.js.map

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

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

@@ -1,4 +1,5 @@
 export * from './Ballot/Ballot';
+export * from './ButtonProgress/ButtonProgress';
 export * from './ButtonToggle/ButtonToggle';
 export * from './CheckBoxLabel/CheckBoxLabel';
 export * from './DayPicker/DayPicker';

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

@@ -1,4 +1,5 @@
 export * from './Ballot/Ballot';
+export * from './ButtonProgress/ButtonProgress';
 export * from './ButtonToggle/ButtonToggle';
 export * from './CheckBoxLabel/CheckBoxLabel';
 export * from './DayPicker/DayPicker';

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

@@ -1 +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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iCAAiC,CAAC;AAChD,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"}