@rolster/react-components 1.4.0

package/dist/esm/components/atoms/TabularText/TabularText.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './TabularText.css';
+const baseCls = 'rls-tabular-text';
+const pointers = ['.', ','];
+function charClass(char) {
+    return pointers.includes(char) ? `${baseCls}__pointer` : `${baseCls}__char`;
+}
+export function RlsTabularText({ value }) {
+    return (_jsx("div", { className: "rls-tabular-text", children: value?.split('').map((char, index) => (_jsx("span", { className: charClass(char), children: char }, index))) }));
+}
+//# sourceMappingURL=TabularText.js.map

package/dist/esm/components/atoms/TabularText/TabularText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabularText.js","sourceRoot":"","sources":["../../../../../src/components/atoms/TabularText/TabularText.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAE3B,MAAM,OAAO,GAAG,kBAAkB,CAAC;AACnC,MAAM,QAAQ,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAE5B,SAAS,SAAS,CAAC,IAAY;IAC7B,OAAO,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,OAAO,WAAW,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,CAAC;AAC9E,CAAC;AAMD,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAe;IACnD,OAAO,CACL,cAAK,SAAS,EAAC,kBAAkB,YAC9B,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,eAAkB,SAAS,EAAE,SAAS,CAAC,IAAI,CAAC,YACzC,IAAI,IADI,KAAK,CAET,CACR,CAAC,GACE,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,20 @@
+export * from './Amount/Amount';
+export * from './Avatar/Avatar';
+export * from './Breadcrumb/Breadcrumb';
+export * from './Button/Button';
+export * from './ButtonAction/ButtonAction';
+export * from './CheckBox/CheckBox';
+export * from './Icon/Icon';
+export * from './Input/Input';
+export * from './InputMoney/InputMoney';
+export * from './InputNumber/InputNumber';
+export * from './InputPassword/InputPassword';
+export * from './InputText/InputText';
+export * from './Poster/Poster';
+export * from './ProgressBar/ProgressBar';
+export * from './RadioButton/RadioButton';
+export * from './SearchInput/SearchInput';
+export * from './Skeleton/Skeleton';
+export * from './SkeletonText/SkeletonText';
+export * from './Switch/Switch';
+export * from './TabularText/TabularText';

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

@@ -0,0 +1,21 @@
+export * from './Amount/Amount';
+export * from './Avatar/Avatar';
+export * from './Breadcrumb/Breadcrumb';
+export * from './Button/Button';
+export * from './ButtonAction/ButtonAction';
+export * from './CheckBox/CheckBox';
+export * from './Icon/Icon';
+export * from './Input/Input';
+export * from './InputMoney/InputMoney';
+export * from './InputNumber/InputNumber';
+export * from './InputPassword/InputPassword';
+export * from './InputText/InputText';
+export * from './Poster/Poster';
+export * from './ProgressBar/ProgressBar';
+export * from './RadioButton/RadioButton';
+export * from './SearchInput/SearchInput';
+export * from './Skeleton/Skeleton';
+export * from './SkeletonText/SkeletonText';
+export * from './Switch/Switch';
+export * from './TabularText/TabularText';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}

package/dist/esm/components/definitions.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export type RlsTheme = 'rolster' | 'success' | 'info' | 'happy' | 'warning' | 'danger';
+export interface RlsComponent {
+    children?: ReactNode;
+    rlsTheme?: RlsTheme;
+}

package/dist/esm/components/definitions.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=definitions.js.map

package/dist/esm/components/definitions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"definitions.js","sourceRoot":"","sources":["../../../src/components/definitions.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,4 @@
+export * from './atoms';
+export * from './definitions';
+export * from './molecules';
+export * from './organisms';

package/dist/esm/components/index.js

@@ -0,0 +1,5 @@
+export * from './atoms';
+export * from './definitions';
+export * from './molecules';
+export * from './organisms';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC"}

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

@@ -0,0 +1,58 @@
+.rls-ballot {
+  --rls-avatar-width: var(--sizing-40);
+  --rls-avatar-height: var(--sizing-40);
+  position: relative;
+  float: left;
+  display: flex;
+  width: 100%;
+  padding: var(--sizing-8);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.rls-ballot--bordered {
+  border-radius: var(--sizing-8);
+  border: var(--border-1-theme-300);
+}
+.rls-ballot--skeleton {
+  --subtitle-width: 60%;
+}
+.rls-ballot > .rls-avatar {
+  margin: auto 0rem;
+}
+.rls-ballot > .rls-avatar + .rls-ballot__component {
+  width: calc(100% - var(--sizing-56));
+  margin-left: var(--sizing-8);
+}
+.rls-ballot__component {
+  overflow: hidden;
+  margin: auto;
+}
+.rls-ballot__title {
+  position: relative;
+  float: left;
+  width: 100%;
+  color: var(--color-theme-500);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: var(--font-weight-medium);
+  font-size: var(--label-font-size);
+  letter-spacing: var(--label-letter-spacing);
+  min-height: var(--label-line-height);
+  line-height: var(--label-line-height);
+}
+.rls-ballot__subtitle {
+  position: relative;
+  float: left;
+  width: var(--rls-ballot-subtitle-width);
+  color: var(--color-theme-300);
+  margin-top: var(--sizing-4);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--smalltext-font-size);
+  letter-spacing: var(--smalltext-letter-spacing);
+  min-height: var(--rls-ballot-subtitle-height);
+  line-height: var(--rls-ballot-subtitle-height);
+  overflow: var(--rls-ballot-subtitle-overflow);
+  text-overflow: var(--rls-ballot-subtitle-text-overflow);
+  white-space: var(--rls-ballot-subtitle-white-space);
+}

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

@@ -0,0 +1,11 @@
+import { RlsComponent } from '../../definitions';
+import './Ballot.css';
+interface BallotProps extends RlsComponent {
+    bordered?: boolean;
+    img?: string;
+    initials?: string;
+    skeleton?: boolean;
+    subtitle?: string;
+}
+export declare function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsTheme }: BallotProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { renderClassStatus } from '../../../utils/css';
+import { RlsAvatar, RlsSkeletonText } from '../../atoms';
+import './Ballot.css';
+export function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsTheme }) {
+    return (_jsxs("div", { className: renderClassStatus('rls-ballot', { bordered, skeleton }), "rls-theme": rlsTheme, children: [(img || initials) && (_jsxs(RlsAvatar, { skeleton: skeleton, children: [img && _jsx("img", { src: img }), initials && _jsx("span", { children: initials })] })), _jsxs("div", { className: "rls-ballot__component", children: [_jsx("label", { className: "rls-ballot__title", children: _jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (_jsx("label", { className: "rls-ballot__subtitle", children: _jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
+}
+//# sourceMappingURL=Ballot.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Ballot.js","sourceRoot":"","sources":["../../../../../src/components/molecules/Ballot/Ballot.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAEzD,OAAO,cAAc,CAAC;AAUtB,MAAM,UAAU,SAAS,CAAC,EACxB,QAAQ,EACR,QAAQ,EACR,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACI;IACZ,OAAO,CACL,eACE,SAAS,EAAE,iBAAiB,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,eACvD,QAAQ,aAElB,CAAC,GAAG,IAAI,QAAQ,CAAC,IAAI,CACpB,MAAC,SAAS,IAAC,QAAQ,EAAE,QAAQ,aAC1B,GAAG,IAAI,cAAK,GAAG,EAAE,GAAG,GAAI,EACxB,QAAQ,IAAI,yBAAO,QAAQ,GAAQ,IAC1B,CACb,EACD,eAAK,SAAS,EAAC,uBAAuB,aACpC,gBAAO,SAAS,EAAC,mBAAmB,YAClC,KAAC,eAAe,IAAC,MAAM,EAAE,QAAQ,YAAG,QAAQ,GAAmB,GACzD,EACP,QAAQ,IAAI,CACX,gBAAO,SAAS,EAAC,sBAAsB,YACrC,KAAC,eAAe,IAAC,MAAM,EAAE,QAAQ,YAAG,QAAQ,GAAmB,GACzD,CACT,IACG,IACF,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,78 @@
+.rls-button-toggle {
+  width: auto;
+}
+.rls-button-toggle__content {
+  display: flex;
+  justify-content: center;
+}
+.rls-button-toggle__action {
+  --rls-button-content-radius: var(--sizing-4) 0rem 0rem var(--sizing-4);
+  width: auto;
+}
+.rls-button-toggle__icon {
+  --rls-button-content-radius: 0rem var(--sizing-4) var(--sizing-4) 0rem;
+  --rls-button-content-padding: var(--sizing-4);
+  width: auto;
+}
+.rls-button-toggle__list {
+  --rls-button-toggle-ul-height: 0rem;
+  --rls-button-toggle-ul-opacity: 0;
+  --rls-button-toggle-ul-transform: none;
+  position: absolute;
+  top: 2.8125rem;
+  left: 0rem;
+  width: 100%;
+  height: 0rem;
+  overflow: hidden;
+  z-index: var(--z-index-4);
+}
+.rls-button-toggle__list--hide {
+  --rls-button-toggle-ul-opacity: 0;
+  --rls-button-toggle-ul-transform: scale(0, 0);
+}
+.rls-button-toggle__list--visible {
+  --rls-button-toggle-ul-height: auto;
+  --rls-button-toggle-ul-opacity: 1;
+  --rls-button-toggle-ul-transform: scale(1, 1);
+  overflow: initial;
+  opacity: 1;
+  height: auto;
+}
+.rls-button-toggle__list ul {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  float: left;
+  width: 100%;
+  height: var(--rls-button-toggle-ul-height);
+  opacity: var(--rls-button-toggle-ul-opacity);
+  padding: var(--sizing-8) 0rem;
+  border-radius: var(--sizing-8);
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: var(--z-index-2);
+  background: var(--background-theme-500);
+  border: var(--border-3) solid var(--color-rolster-300);
+  transform: var(--rls-button-toggle-ul-transform);
+  transform-origin: 0% 0%;
+  transition: transform 240ms 0ms var(--standard-curve),
+    opacity 240ms 0ms var(--standard-curve);
+  will-change: opacity, transform;
+}
+.rls-button-toggle__list ul li {
+  padding: 0rem var(--sizing-12);
+  box-sizing: border-box;
+  height: var(--sizing-40);
+  line-height: var(--sizing-40);
+  cursor: default;
+  font-weight: var(--font-weight-bold);
+  font-size: 0.825rem;
+  letter-spacing: 0.825px;
+  text-transform: uppercase;
+  color: var(--color-theme-300);
+}
+.rls-button-toggle__list ul li:hover {
+  background: var(--background-theme-300);
+  color: var(--color-theme-500);
+}

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { ButtonType } from '../../atoms';
+import { RlsComponent } from '../../definitions';
+import './ButtonToggle.css';
+export interface ButtonToggleOption {
+    label: ReactNode;
+    value: string;
+}
+interface ButtonToggle extends RlsComponent {
+    options: ButtonToggleOption[];
+    type: ButtonType;
+    disabled?: boolean;
+    onAction?: (value: string) => void;
+}
+export declare function RlsButtonToggle({ options, type, disabled, rlsTheme, onAction }: ButtonToggle): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { renderClassStatus } from '../../../utils/css';
+import { RlsButton } from '../../atoms';
+import './ButtonToggle.css';
+export function RlsButtonToggle({ options, type, disabled, rlsTheme, onAction }) {
+    const contentRef = useRef(null);
+    const [firstAction] = options;
+    const [action, setAction] = useState(firstAction);
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+        function onCloseMenu({ target }) {
+            if (!contentRef?.current?.contains(target)) {
+                setVisible(false);
+            }
+        }
+        document.addEventListener('click', onCloseMenu);
+        return () => {
+            document.removeEventListener('click', onCloseMenu);
+        };
+    }, []);
+    function onClickMenu() {
+        setVisible((prevValue) => !prevValue);
+    }
+    function onSelectAction(action) {
+        setAction(action);
+        setVisible(false);
+    }
+    return (_jsxs("div", { className: "rls-button-toggle", ref: contentRef, "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-button-toggle__content", children: [action && (_jsx("div", { className: "rls-button-toggle__action", children: _jsx(RlsButton, { disabled: disabled, type: type, onClick: () => {
+                                if (onAction) {
+                                    onAction(action.value);
+                                }
+                            }, children: action.label }) })), _jsx("div", { className: "rls-button-toggle__icon", children: _jsx(RlsButton, { type: type, prefixIcon: "arrow-ios-down", disabled: disabled, onClick: onClickMenu }) })] }), _jsx("div", { className: renderClassStatus('rls-button-toggle__list', {
+                    visible,
+                    hide: !visible
+                }), children: _jsx("ul", { children: options.map((action, index) => (_jsx("li", { className: "truncate", onClick: () => {
+                            onSelectAction(action);
+                        }, children: action.label }, index))) }) })] }));
+}
+//# sourceMappingURL=ButtonToggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonToggle.js","sourceRoot":"","sources":["../../../../../src/components/molecules/ButtonToggle/ButtonToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAc,SAAS,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,oBAAoB,CAAC;AAc5B,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACK;IACb,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;IAE9B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,WAAW,CAAC,EAAE,MAAM,EAAO;YAClC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE;gBAC1C,UAAU,CAAC,KAAK,CAAC,CAAC;aACnB;QACH,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAEhD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,WAAW;QAClB,UAAU,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC;IAED,SAAS,cAAc,CAAC,MAA0B;QAChD,SAAS,CAAC,MAAM,CAAC,CAAC;QAClB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAE,UAAU,eAAa,QAAQ,aACrE,eAAK,SAAS,EAAC,4BAA4B,aACxC,MAAM,IAAI,CACT,cAAK,SAAS,EAAC,2BAA2B,YACxC,KAAC,SAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE;gCACZ,IAAI,QAAQ,EAAE;oCACZ,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;iCACxB;4BACH,CAAC,YAEA,MAAM,CAAC,KAAK,GACH,GACR,CACP,EAED,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,UAAU,EAAC,gBAAgB,EAC3B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,GACpB,GACE,IACF,EAEN,cACE,SAAS,EAAE,iBAAiB,CAAC,yBAAyB,EAAE;oBACtD,OAAO;oBACP,IAAI,EAAE,CAAC,OAAO;iBACf,CAAC,YAEF,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,aACE,SAAS,EAAC,UAAU,EAEpB,OAAO,EAAE,GAAG,EAAE;4BACZ,cAAc,CAAC,MAAM,CAAC,CAAC;wBACzB,CAAC,YAEA,MAAM,CAAC,KAAK,IALR,KAAK,CAMP,CACN,CAAC,GACC,GACD,IACF,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,40 @@
+.rls-checkbox-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-checkbox-label--disabled {
+  --pvt-text-opacity: 0.5;
+  pointer-events: none;
+}
+.rls-checkbox-label--extended {
+  --pvt-text-text-overflow: initial;
+  --pvt-text-overflow: initial;
+  --pvt-text-white-space: initial;
+  --pvt-text-height: auto;
+}
+.rls-checkbox-label__component {
+  margin-right: var(--sizing-8);
+  width: auto;
+}
+.rls-checkbox-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/CheckBoxLabel/CheckBoxLabel.d.ts

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

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { renderClassStatus } from '../../../utils/css';
+import { RlsCheckBox } from '../../atoms';
+import './CheckBoxLabel.css';
+export function RlsCheckBoxLabel({ 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-checkbox-label', {
+            disabled,
+            extended
+        }), "rls-theme": rlsTheme, children: [_jsx("div", { className: "rls-checkbox-label__component", onClick: onToggle, children: _jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), _jsx("label", { className: "rls-checkbox-label__text", children: children })] }));
+}
+//# sourceMappingURL=CheckBoxLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBoxLabel.js","sourceRoot":"","sources":["../../../../../src/components/molecules/CheckBoxLabel/CheckBoxLabel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,qBAAqB,CAAC;AAQ7B,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,EACM;IACd,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,oBAAoB,EAAE;YACjD,QAAQ;YACR,QAAQ;SACT,CAAC,eACS,QAAQ,aAEnB,cAAK,SAAS,EAAC,+BAA+B,EAAC,OAAO,EAAE,QAAQ,YAC9D,KAAC,WAAW,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI,GACjD,EACN,gBAAO,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAS,IAC1D,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,66 @@
+.rls-day-picker {
+  --pvt-span-nothover-background: transparent;
+  --pvt-span-nothover-font-color: inherit;
+  --pvt-span-background: transparent;
+  position: relative;
+  float: left;
+  width: 100%;
+  max-width: 17.5rem;
+  box-sizing: border-box;
+  user-select: none;
+}
+.rls-day-picker__header {
+  display: flex;
+  margin-bottom: var(--sizing-8);
+  background: var(--background-theme-100);
+  color: var(--color-theme-500);
+  border-radius: var(--sizing-4);
+}
+.rls-day-picker__label {
+  padding: var(--sizing-12) 0rem;
+  text-align: center;
+  width: 100%;
+  font-size: var(--sizing-12);
+  font-weight: var(--font-weight-bold);
+}
+.rls-day-picker__week {
+  display: flex;
+}
+.rls-day-picker__day {
+  text-align: center;
+  padding: var(--sizing-2);
+  box-sizing: border-box;
+}
+.rls-day-picker__day__span {
+  position: relative;
+  display: block;
+  color: var(--color-theme-500);
+  border-radius: var(--sizing-8);
+  height: var(--sizing-36);
+  line-height: var(--sizing-36);
+  margin: var(--sizing-2) 0rem;
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-semibold);
+  background: var(--pvt-span-background);
+}
+.rls-day-picker__day__span:not(:hover) {
+  background: var(--pvt-span-nothover-background);
+  color: var(--pvt-span-nothover-font-color);
+}
+.rls-day-picker__day__span:hover {
+  background: var(--color-rolster-900);
+  color: var(--color-light-500);
+}
+.rls-day-picker__day--selected {
+  --pvt-span-nothover-background: var(--color-rolster-500);
+  --pvt-span-nothover-font-color: var(--color-light-500);
+}
+.rls-day-picker__day--forbidden {
+  --pvt-span-background: var(--background-theme-100);
+  pointer-events: none;
+  opacity: 0.5;
+}
+.rls-day-picker__day--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

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

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

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DAY_LABELS } from '@rolster/helpers-date';
+import { useEffect, useState } from 'react';
+import { renderClassStatus } from '../../../utils/css';
+import { createDayPicker } from '../../../utils/day-picker';
+import './DayPicker.css';
+export function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, rlsTheme }) {
+    const initialDate = date || new Date();
+    const initialDay = formControl?.state || initialDate.getDate();
+    const [weeks, setWeeks] = useState([]);
+    const [value, setValue] = useState(initialDay);
+    useEffect(() => {
+        setWeeks(createDayPicker({
+            date: initialDate,
+            value: formControl?.state || value,
+            minDate,
+            maxDate
+        }));
+    }, [value, date, minDate, maxDate]);
+    useEffect(() => {
+        if (date && date.getDate() !== value) {
+            onChange(date.getDate());
+        }
+    }, [date]);
+    function onChange(value) {
+        setValue(value);
+        formControl?.setState(value);
+    }
+    return (_jsxs("div", { className: "rls-day-picker", "rls-theme": rlsTheme, children: [_jsx("div", { className: "rls-day-picker__header", children: DAY_LABELS.map((title, index) => (_jsx("label", { className: "rls-day-picker__label", children: title }, index))) }), _jsx("div", { className: "rls-day-picker__component", children: weeks.map(({ days }, index) => (_jsx("div", { className: "rls-day-picker__week", children: days.map(({ value, disabled, forbidden, selected }, index) => (_jsx("div", { className: renderClassStatus('rls-day-picker__day', {
+                            disabled: disabled || disabledPicker,
+                            forbidden,
+                            selected
+                        }), onClick: () => {
+                            if (value && !disabled) {
+                                onChange(value);
+                            }
+                        }, children: _jsx("span", { className: "rls-day-picker__day__span", children: value || '??' }) }, index))) }, index))) })] }));
+}
+//# sourceMappingURL=DayPicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DayPicker.js","sourceRoot":"","sources":["../../../../../src/components/molecules/DayPicker/DayPicker.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAI5D,OAAO,iBAAiB,CAAC;AAUzB,MAAM,UAAU,YAAY,CAAC,EAC3B,IAAI,EACJ,QAAQ,EAAE,cAAc,EACxB,WAAW,EACX,OAAO,EACP,OAAO,EACP,QAAQ,EACE;IACV,MAAM,WAAW,GAAG,IAAI,IAAI,IAAI,IAAI,EAAE,CAAC;IACvC,MAAM,UAAU,GAAG,WAAW,EAAE,KAAK,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;IAE/D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAc,EAAE,CAAC,CAAC;IACpD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAE/C,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CACN,eAAe,CAAC;YACd,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,WAAW,EAAE,KAAK,IAAI,KAAK;YAClC,OAAO;YACP,OAAO;SACR,CAAC,CACH,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,KAAK,KAAK,EAAE;YACpC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,SAAS,QAAQ,CAAC,KAAa;QAC7B,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,eAAY,QAAQ,aACjD,cAAK,SAAS,EAAC,wBAAwB,YACpC,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,gBAAmB,SAAS,EAAC,uBAAuB,YACjD,KAAK,IADI,KAAK,CAET,CACT,CAAC,GACE,EAEN,cAAK,SAAS,EAAC,2BAA2B,YACvC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,cAAiB,SAAS,EAAC,sBAAsB,YAC9C,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CAC7D,cAEE,SAAS,EAAE,iBAAiB,CAAC,qBAAqB,EAAE;4BAClD,QAAQ,EAAE,QAAQ,IAAI,cAAc;4BACpC,SAAS;4BACT,QAAQ;yBACT,CAAC,EACF,OAAO,EAAE,GAAG,EAAE;4BACZ,IAAI,KAAK,IAAI,CAAC,QAAQ,EAAE;gCACtB,QAAQ,CAAC,KAAK,CAAC,CAAC;6BACjB;wBACH,CAAC,YAED,eAAM,SAAS,EAAC,2BAA2B,YACxC,KAAK,IAAI,IAAI,GACT,IAdF,KAAK,CAeN,CACP,CAAC,IAnBM,KAAK,CAoBT,CACP,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,68 @@
+.rls-day-range-picker {
+  --pvt-span-nothover-background: transparent;
+  --pvt-span-nothover-font-color: inherit;
+  --pvt-span-background: transparent;
+  position: relative;
+  float: left;
+  width: 100%;
+  max-width: 17.5rem;
+  box-sizing: border-box;
+  user-select: none;
+}
+.rls-day-range-picker__header {
+  display: flex;
+  margin-bottom: var(--sizing-8);
+  background: var(--background-theme-100);
+  color: var(--color-theme-500);
+  border-radius: var(--sizing-4);
+}
+.rls-day-range-picker__label {
+  padding: var(--sizing-12) 0rem;
+  text-align: center;
+  width: 100%;
+  font-size: var(--sizing-12);
+  font-weight: var(--font-weight-bold);
+}
+.rls-day-range-picker__week {
+  display: flex;
+}
+.rls-day-range-picker__day {
+  text-align: center;
+  padding: var(--sizing-2);
+  box-sizing: border-box;
+}
+.rls-day-range-picker__day__span {
+  position: relative;
+  display: block;
+  color: var(--color-theme-500);
+  border-radius: var(--sizing-8);
+  height: var(--sizing-36);
+  line-height: var(--sizing-36);
+  margin: var(--sizing-2) 0rem;
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-semibold);
+}
+.rls-day-range-picker__day__span:not(:hover) {
+  background: var(--pvt-span-nothover-background);
+  color: var(--pvt-span-nothover-font-color);
+}
+.rls-day-range-picker__day__span:hover {
+  color: var(--color-light-500);
+  background: var(--color-rolster-900);
+}
+.rls-day-range-picker__day--selected {
+  --pvt-span-nothover-background: var(--color-rolster-500);
+  --pvt-span-nothover-font-color: var(--color-light-500);
+}
+.rls-day-range-picker__day--ranged {
+  --pvt-span-nothover-background: var(--color-rolster-100);
+}
+.rls-day-range-picker__day--forbidden {
+  --pvt-span-background: var(--background-theme-100);
+  pointer-events: none;
+  opacity: 0.5;
+}
+.rls-day-range-picker__day--disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}

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

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