pesona-ui 1.0.2 → 1.0.4

package/dist/index.esm.js

@@ -7908,6 +7908,31 @@ const FormRadio = ({ className = '', children }) => {
     return React.createElement("div", { className: `form-radio ${className}` }, children);
 };
 
+const ListView = ({ className = '', children }) => {
+    return React.createElement("ul", { className: `block-list ${className}` }, children);
+};
+const ListItem = ({ children }) => {
+    return React.createElement("li", null, children);
+};
+
+const CheckboxAgreement = forwardRef(({ name, label, error, checked = false, onChange, ...rest }, ref) => {
+    const uniqueCheckboxId = v4();
+    const handleChange = (event) => {
+        onChange(event);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ListView, { className: `${error ? 'has-error' : ''}` },
+            React.createElement(ListItem, null,
+                React.createElement("div", { className: "d-flex align-items-center" },
+                    React.createElement(FormCheckbox, { className: `${error ? 'has-error' : ''}` },
+                        React.createElement("label", { className: `custom-checkbox`, htmlFor: uniqueCheckboxId },
+                            React.createElement("input", { className: "form-control", type: "checkbox", id: uniqueCheckboxId, name: name, ref: ref, role: "checkbox", checked: checked, onChange: handleChange, ...rest }),
+                            React.createElement("span", { className: "checkmark" })))),
+                React.createElement("div", { className: "d-flex align-items-center pl-10" },
+                    React.createElement("p", { className: `mb-0 ${error ? 'text-danger' : ''}` }, label && React.createElement("span", { className: rest.required ? 'required' : '' }, label)))))));
+});
+CheckboxAgreement.displayName = 'CheckboxAgreement';
+
 // Convert date to local format, e.g., '2024-12-31' local Indonesia
 const dateToDb = (date) => {
     return date
@@ -8534,6 +8559,13 @@ const Switch = React.forwardRef(({ name, className = '', error, checked = false,
 });
 Switch.displayName = 'Switch';
 
+const LoadingBar = ({ progress, visible }) => {
+    if (!visible)
+        return null;
+    return (React.createElement("div", { className: "loading-bar-container" },
+        React.createElement("div", { className: "loading-bar", style: { width: `${progress}%`, transition: 'width 300ms ease-in-out' } })));
+};
+
 const DivTable = ({ children, className = '', view = 'list', gridColumn = 1 }) => {
     return (React.createElement("div", { className: `divcard-table ${view === 'grid' ? 'grid-mode' : ''} ${className}`, style: view === 'grid' ? { gridTemplateColumns: `repeat(${gridColumn}, 1fr)` } : {} }, children));
 };
@@ -8578,5 +8610,5 @@ const TableFooter = ({ children, className = '' }) => {
     return React.createElement("tfoot", { className: className }, children);
 };
 
-export { Accordion, AccordionSection, AccordionSectionBody, AccordionSectionFooter, Alert, Badge, Button, Callout, Card, CardBody, CardFooter, CardHeader, Checkbox, CircularProgress, CircularProgressWithLabel, ClearInput, ConfirmationAlert, DatePicker, DivTable, DivTableBody, DivTableCell, DivTableFooter, DivTableHeader, DivTableRow, Dropdown, DropdownContent, DropdownDatePicker, DropdownMenu, DropdownToggle, FormCheckbox, FormContainer, FormGroup, FormRadio, Input, InputDate, InputFile, InputImageSize, InputTextArea, InputWysiwyg, LinearProgress, Modal, ModalBody, ModalFooter, ModalHeader, Popover, Radio, RadioButtonGroup, Select, SelectMultiple, SelectWithSearch, Spinner, Switch, Tab, Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, Tabs, Tooltip };
+export { Accordion, AccordionSection, AccordionSectionBody, AccordionSectionFooter, Alert, Badge, Button, Callout, Card, CardBody, CardFooter, CardHeader, Checkbox, CheckboxAgreement, CircularProgress, CircularProgressWithLabel, ClearInput, ConfirmationAlert, DatePicker, DivTable, DivTableBody, DivTableCell, DivTableFooter, DivTableHeader, DivTableRow, Dropdown, DropdownContent, DropdownDatePicker, DropdownMenu, DropdownToggle, FormCheckbox, FormContainer, FormGroup, FormRadio, Input, InputDate, InputFile, InputImageSize, InputTextArea, InputWysiwyg, LinearProgress, ListItem, ListView, LoadingBar, Modal, ModalBody, ModalFooter, ModalHeader, Popover, Radio, RadioButtonGroup, Select, SelectMultiple, SelectWithSearch, Spinner, Switch, Tab, Table, TableBody, TableCell, TableFooter, TableHeader, TableRow, Tabs, Tooltip };
 //# sourceMappingURL=index.esm.js.map