pesona-ui 1.0.1

package/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/dist/index.cjs.js

@@ -0,0 +1,195 @@
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+const Button = ({ type = 'button', className, children, ...rest }) => {
+    return (React.createElement("button", { type: type === 'submit' ? 'submit' : 'button', className: className, ...rest }, children));
+};
+
+const CardHeader = ({ children, className }) => (React.createElement("div", { className: `card-header ${className}` }, children));
+const CardBody = ({ children, className = '', ...rest }) => (React.createElement("div", { className: `card-body ${className}`, ...rest }, children));
+const CardFooter = ({ children, className = '' }) => (React.createElement("div", { className: `card-footer ${className}` }, children));
+const Card = ({ children, className = '', ...rest }) => (React.createElement("div", { className: `card ${className}`, ...rest }, children));
+
+const Spinner = () => {
+    return (React.createElement("div", { className: "spinner" },
+        React.createElement("svg", { className: "spinner-icon", width: "30px", height: "30px", viewBox: "0 0 66 66", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("circle", { className: "path", fill: "none", strokeWidth: "6", strokeLinecap: "round", cx: "33", cy: "33", r: "30" }))));
+};
+
+/**
+ * Hook untuk mendeteksi klik di luar elemen yang diberikan
+ * @param refs Array of refs dari elemen yang akan dimonitor
+ * @param handler Fungsi yang akan dipanggil ketika klik terjadi di luar elemen
+ *
+ * @example
+ * const ref = useRef<HTMLDivElement>(null);
+ * useOutsideClick([ref], () => {});
+ */
+const useOutsideClick = (refs, handler) => {
+    React.useEffect(() => {
+        // Cek apakah refs valid
+        if (!Array.isArray(refs) || refs.length === 0) {
+            return;
+        }
+        const handleClickOutside = (event) => {
+            // Cek apakah klik terjadi di luar semua refs yang diberikan
+            const isOutside = refs.every((ref) => {
+                return ref.current && !ref.current.contains(event.target);
+            });
+            if (isOutside) {
+                handler();
+            }
+        };
+        // Menambahkan event listener
+        document.addEventListener('mousedown', handleClickOutside);
+        // Cleanup event listener
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [refs, handler]);
+};
+
+const DropdownMenu = ({ children, items, position = 'bottom-left', className = '', }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [menuPosition, setMenuPosition] = React.useState({ top: 0, left: 0 });
+    const triggerRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    useOutsideClick([triggerRef, menuRef], () => {
+        setIsOpen(false);
+    });
+    React.useEffect(() => {
+        if (isOpen && triggerRef.current && menuRef.current) {
+            const triggerRect = triggerRef.current.getBoundingClientRect();
+            const menuRect = menuRef.current.getBoundingClientRect();
+            const { scrollX, scrollY } = window;
+            let top = 0;
+            let left = 0;
+            switch (position) {
+                case 'bottom-left':
+                    top = triggerRect.bottom;
+                    left = triggerRect.left;
+                    break;
+                case 'bottom-right':
+                    top = triggerRect.bottom;
+                    left = triggerRect.right - menuRect.width;
+                    break;
+                case 'top-left':
+                    top = triggerRect.top - menuRect.height;
+                    left = triggerRect.left;
+                    break;
+                case 'top-right':
+                    top = triggerRect.top - menuRect.height;
+                    left = triggerRect.right - menuRect.width;
+                    break;
+            }
+            setMenuPosition({
+                top: Math.round(top + scrollY),
+                left: Math.round(left + scrollX),
+            });
+        }
+    }, [isOpen, position]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: triggerRef, onClick: () => setIsOpen(!isOpen) }, children),
+        isOpen &&
+            ReactDOM.createPortal(React.createElement("div", { ref: menuRef, style: {
+                    position: 'absolute',
+                    top: `${menuPosition.top}px`,
+                    left: `${menuPosition.left}px`,
+                }, className: `dropdown-menu ${position} ${className}` }, items.map((item, index) => (React.createElement("div", { key: index, className: `dropdown-menu-item ${item.className}`, onClick: () => {
+                    item.onClick();
+                    setIsOpen(false);
+                } },
+                item.icon && item.icon,
+                " ",
+                item.label)))), document.body)));
+};
+
+const Dropdown = ({ children, className = '', position = 'bottom-left' }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const dropdownRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const dropdownId = React.useRef(`dropdown-${Math.random().toString(36).substr(2, 9)}`);
+    const toggleDropdown = () => {
+        setIsOpen(!isOpen);
+    };
+    useOutsideClick([dropdownRef, contentRef], () => {
+        setIsOpen(false);
+    });
+    return (React.createElement("div", { className: `dropdown ${className}`, ref: dropdownRef, id: dropdownId.current }, React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+                toggleDropdown,
+                isOpen,
+                position,
+                contentRef,
+                dropdownId: dropdownId.current,
+            });
+        }
+        return child;
+    })));
+};
+const DropdownToggle = ({ children, className = '', toggleDropdown, dropdownId, }) => (React.createElement("div", { className: `dropdown-toggle ${className}`, onClick: toggleDropdown, "data-dropdown-id": dropdownId }, children));
+const DropdownContent = ({ children, className = '', isOpen = false, position = 'bottom-left', contentRef, dropdownId, }) => {
+    const [menuPosition, setMenuPosition] = React.useState({ top: 0, left: 0 });
+    React.useEffect(() => {
+        if (isOpen && contentRef?.current) {
+            const triggerElement = document.querySelector(`[data-dropdown-id="${dropdownId}"]`);
+            if (triggerElement) {
+                const triggerRect = triggerElement.getBoundingClientRect();
+                const menuRect = contentRef.current.getBoundingClientRect();
+                const { scrollX, scrollY } = window;
+                let top = 0;
+                let left = 0;
+                switch (position) {
+                    case 'bottom-left':
+                        top = triggerRect.bottom;
+                        left = triggerRect.left;
+                        break;
+                    case 'bottom-right':
+                        top = triggerRect.bottom;
+                        left = triggerRect.right - menuRect.width;
+                        break;
+                    case 'top-left':
+                        top = triggerRect.top - menuRect.height;
+                        left = triggerRect.left;
+                        break;
+                    case 'top-right':
+                        top = triggerRect.top - menuRect.height;
+                        left = triggerRect.right - menuRect.width;
+                        break;
+                }
+                // Add window scroll offset
+                setMenuPosition({
+                    top: Math.round(top + scrollY),
+                    left: Math.round(left + scrollX),
+                });
+            }
+        }
+    }, [isOpen, position, contentRef, dropdownId]);
+    if (!isOpen)
+        return null;
+    return ReactDOM.createPortal(React.createElement("div", { ref: contentRef, style: {
+            position: 'absolute',
+            top: `${menuPosition.top}px`,
+            left: `${menuPosition.left}px`,
+        }, className: `dropdown-content ${position} ${className}` }, children), document.body);
+};
+
+const Badge = ({ className, text }) => {
+    return React.createElement("span", { className: className }, text);
+};
+
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Card = Card;
+exports.CardBody = CardBody;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.Dropdown = Dropdown;
+exports.DropdownContent = DropdownContent;
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownToggle = DropdownToggle;
+exports.Spinner = Spinner;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.esm.js

@@ -0,0 +1,183 @@
+import React, { useEffect, useState, useRef } from 'react';
+import ReactDOM, { createPortal } from 'react-dom';
+
+const Button = ({ type = 'button', className, children, ...rest }) => {
+    return (React.createElement("button", { type: type === 'submit' ? 'submit' : 'button', className: className, ...rest }, children));
+};
+
+const CardHeader = ({ children, className }) => (React.createElement("div", { className: `card-header ${className}` }, children));
+const CardBody = ({ children, className = '', ...rest }) => (React.createElement("div", { className: `card-body ${className}`, ...rest }, children));
+const CardFooter = ({ children, className = '' }) => (React.createElement("div", { className: `card-footer ${className}` }, children));
+const Card = ({ children, className = '', ...rest }) => (React.createElement("div", { className: `card ${className}`, ...rest }, children));
+
+const Spinner = () => {
+    return (React.createElement("div", { className: "spinner" },
+        React.createElement("svg", { className: "spinner-icon", width: "30px", height: "30px", viewBox: "0 0 66 66", xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement("circle", { className: "path", fill: "none", strokeWidth: "6", strokeLinecap: "round", cx: "33", cy: "33", r: "30" }))));
+};
+
+/**
+ * Hook untuk mendeteksi klik di luar elemen yang diberikan
+ * @param refs Array of refs dari elemen yang akan dimonitor
+ * @param handler Fungsi yang akan dipanggil ketika klik terjadi di luar elemen
+ *
+ * @example
+ * const ref = useRef<HTMLDivElement>(null);
+ * useOutsideClick([ref], () => {});
+ */
+const useOutsideClick = (refs, handler) => {
+    useEffect(() => {
+        // Cek apakah refs valid
+        if (!Array.isArray(refs) || refs.length === 0) {
+            return;
+        }
+        const handleClickOutside = (event) => {
+            // Cek apakah klik terjadi di luar semua refs yang diberikan
+            const isOutside = refs.every((ref) => {
+                return ref.current && !ref.current.contains(event.target);
+            });
+            if (isOutside) {
+                handler();
+            }
+        };
+        // Menambahkan event listener
+        document.addEventListener('mousedown', handleClickOutside);
+        // Cleanup event listener
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [refs, handler]);
+};
+
+const DropdownMenu = ({ children, items, position = 'bottom-left', className = '', }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    useOutsideClick([triggerRef, menuRef], () => {
+        setIsOpen(false);
+    });
+    useEffect(() => {
+        if (isOpen && triggerRef.current && menuRef.current) {
+            const triggerRect = triggerRef.current.getBoundingClientRect();
+            const menuRect = menuRef.current.getBoundingClientRect();
+            const { scrollX, scrollY } = window;
+            let top = 0;
+            let left = 0;
+            switch (position) {
+                case 'bottom-left':
+                    top = triggerRect.bottom;
+                    left = triggerRect.left;
+                    break;
+                case 'bottom-right':
+                    top = triggerRect.bottom;
+                    left = triggerRect.right - menuRect.width;
+                    break;
+                case 'top-left':
+                    top = triggerRect.top - menuRect.height;
+                    left = triggerRect.left;
+                    break;
+                case 'top-right':
+                    top = triggerRect.top - menuRect.height;
+                    left = triggerRect.right - menuRect.width;
+                    break;
+            }
+            setMenuPosition({
+                top: Math.round(top + scrollY),
+                left: Math.round(left + scrollX),
+            });
+        }
+    }, [isOpen, position]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: triggerRef, onClick: () => setIsOpen(!isOpen) }, children),
+        isOpen &&
+            ReactDOM.createPortal(React.createElement("div", { ref: menuRef, style: {
+                    position: 'absolute',
+                    top: `${menuPosition.top}px`,
+                    left: `${menuPosition.left}px`,
+                }, className: `dropdown-menu ${position} ${className}` }, items.map((item, index) => (React.createElement("div", { key: index, className: `dropdown-menu-item ${item.className}`, onClick: () => {
+                    item.onClick();
+                    setIsOpen(false);
+                } },
+                item.icon && item.icon,
+                " ",
+                item.label)))), document.body)));
+};
+
+const Dropdown = ({ children, className = '', position = 'bottom-left' }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    const contentRef = useRef(null);
+    const dropdownId = useRef(`dropdown-${Math.random().toString(36).substr(2, 9)}`);
+    const toggleDropdown = () => {
+        setIsOpen(!isOpen);
+    };
+    useOutsideClick([dropdownRef, contentRef], () => {
+        setIsOpen(false);
+    });
+    return (React.createElement("div", { className: `dropdown ${className}`, ref: dropdownRef, id: dropdownId.current }, React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, {
+                toggleDropdown,
+                isOpen,
+                position,
+                contentRef,
+                dropdownId: dropdownId.current,
+            });
+        }
+        return child;
+    })));
+};
+const DropdownToggle = ({ children, className = '', toggleDropdown, dropdownId, }) => (React.createElement("div", { className: `dropdown-toggle ${className}`, onClick: toggleDropdown, "data-dropdown-id": dropdownId }, children));
+const DropdownContent = ({ children, className = '', isOpen = false, position = 'bottom-left', contentRef, dropdownId, }) => {
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    useEffect(() => {
+        if (isOpen && contentRef?.current) {
+            const triggerElement = document.querySelector(`[data-dropdown-id="${dropdownId}"]`);
+            if (triggerElement) {
+                const triggerRect = triggerElement.getBoundingClientRect();
+                const menuRect = contentRef.current.getBoundingClientRect();
+                const { scrollX, scrollY } = window;
+                let top = 0;
+                let left = 0;
+                switch (position) {
+                    case 'bottom-left':
+                        top = triggerRect.bottom;
+                        left = triggerRect.left;
+                        break;
+                    case 'bottom-right':
+                        top = triggerRect.bottom;
+                        left = triggerRect.right - menuRect.width;
+                        break;
+                    case 'top-left':
+                        top = triggerRect.top - menuRect.height;
+                        left = triggerRect.left;
+                        break;
+                    case 'top-right':
+                        top = triggerRect.top - menuRect.height;
+                        left = triggerRect.right - menuRect.width;
+                        break;
+                }
+                // Add window scroll offset
+                setMenuPosition({
+                    top: Math.round(top + scrollY),
+                    left: Math.round(left + scrollX),
+                });
+            }
+        }
+    }, [isOpen, position, contentRef, dropdownId]);
+    if (!isOpen)
+        return null;
+    return createPortal(React.createElement("div", { ref: contentRef, style: {
+            position: 'absolute',
+            top: `${menuPosition.top}px`,
+            left: `${menuPosition.left}px`,
+        }, className: `dropdown-content ${position} ${className}` }, children), document.body);
+};
+
+const Badge = ({ className, text }) => {
+    return React.createElement("span", { className: className }, text);
+};
+
+export { Badge, Button, Card, CardBody, CardFooter, CardHeader, Dropdown, DropdownContent, DropdownMenu, DropdownToggle, Spinner };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/styles/pesona-ui.css

@@ -0,0 +1 @@
+button:disabled,button[disabled]{background:transparent!important;color:var(--font-color-secondary)!important;cursor:not-allowed;pointer-events:none}.Button_btn__W6oxS{align-items:center;background:none;border:1px solid transparent;border-radius:4px;color:var(--black-white);display:inline-flex;gap:5px;height:32px;justify-content:center;line-height:1;padding:0 12px;position:relative;touch-action:manipulation;white-space:nowrap}.Button_btn__W6oxS .Button_icon__OeKUC,.Button_btn__W6oxS svg{pointer-events:none}.Button_btn__W6oxS svg{height:14px;margin-top:0;width:14px}.Button_btn__W6oxS:hover{text-decoration:none}.Button_btn__W6oxS:active,.Button_btn__W6oxS:focus{box-shadow:inset 0 3px 5px rgba(0,0,0,.15)}.Button_btn__W6oxS.Button_active__BWfrx{background-color:var(--primary-bg);box-shadow:inset 0 3px 5px rgba(0,0,0,.1)}.Button_btn__W6oxS.Button_btn-default__Cucka{border-color:var(--border-color);color:var(--font-color)}.Button_btn__W6oxS.Button_btn-default__Cucka:hover{background-color:var(--primary-bg)}.Button_btn__W6oxS.Button_btn-danger__nwxfa,.Button_btn__W6oxS.Button_btn-info__kXW9e,.Button_btn__W6oxS.Button_btn-primary__Y1iy-,.Button_btn__W6oxS.Button_btn-success__DK393,.Button_btn__W6oxS.Button_btn-warning__MlDsD{color:#fff}.Button_btn__W6oxS.Button_btn-danger__nwxfa.Button_btn-primary__Y1iy-,.Button_btn__W6oxS.Button_btn-info__kXW9e.Button_btn-primary__Y1iy-,.Button_btn__W6oxS.Button_btn-primary__Y1iy-.Button_btn-primary__Y1iy-,.Button_btn__W6oxS.Button_btn-success__DK393.Button_btn-primary__Y1iy-,.Button_btn__W6oxS.Button_btn-warning__MlDsD.Button_btn-primary__Y1iy-{background-color:#1668dc;border-color:#0f4796}.Button_btn__W6oxS.Button_btn-danger__nwxfa.Button_btn-primary__Y1iy-:hover,.Button_btn__W6oxS.Button_btn-info__kXW9e.Button_btn-primary__Y1iy-:hover,.Button_btn__W6oxS.Button_btn-primary__Y1iy-.Button_btn-primary__Y1iy-:hover,.Button_btn__W6oxS.Button_btn-success__DK393.Button_btn-primary__Y1iy-:hover,.Button_btn__W6oxS.Button_btn-warning__MlDsD.Button_btn-primary__Y1iy-:hover{background-color:#0d3c7f}.Button_btn__W6oxS.Button_btn-danger__nwxfa.Button_btn-success__DK393,.Button_btn__W6oxS.Button_btn-info__kXW9e.Button_btn-success__DK393,.Button_btn__W6oxS.Button_btn-primary__Y1iy-.Button_btn-success__DK393,.Button_btn__W6oxS.Button_btn-success__DK393.Button_btn-success__DK393,.Button_btn__W6oxS.Button_btn-warning__MlDsD.Button_btn-success__DK393{background-color:#66bf60;border-color:#42963c}.Button_btn__W6oxS.Button_btn-danger__nwxfa.Button_btn-success__DK393:hover,.Button_btn__W6oxS.Button_btn-info__kXW9e.Button_btn-success__DK393:hover,.Button_btn__W6oxS.Button_btn-primary__Y1iy-.Button_btn-success__DK393:hover,.Button_btn__W6oxS.Button_btn-success__DK393.Button_btn-success__DK393:hover,.Button_btn__W6oxS.Button_btn-warning__MlDsD.Button_btn-success__DK393:hover{background-color:#3a8435}.Button_btn__W6oxS.Button_btn-danger__nwxfa.Button_btn-info__kXW9e,.Button_btn__W6oxS.Button_btn-info__kXW9e.Button_btn-info__kXW9e,.Button_btn__W6oxS.Button_btn-primary__Y1iy-.Button_btn-info__kXW9e,.Button_btn__W6oxS.Button_btn-success__DK393.Button_btn-info__kXW9e,.Button_btn__W6oxS.Button_btn-warning__MlDsD.Button_btn-info__kXW9e{background-color:#67c2ec;border-color:#23a7e4}.Button_btn__W6oxS.Button_btn-danger__nwxfa.Button_btn-info__kXW9e:hover,.Button_btn__W6oxS.Button_btn-info__kXW9e.Button_btn-info__kXW9e:hover,.Button_btn__W6oxS.Button_btn-primary__Y1iy-.Button_btn-info__kXW9e:hover,.Button_btn__W6oxS.Button_btn-success__DK393.Button_btn-info__kXW9e:hover,.Button_btn__W6oxS.Button_btn-warning__MlDsD.Button_btn-info__kXW9e:hover{background-color:#1a98d3}.Button_btn__W6oxS.Button_btn-danger__nwxfa.Button_btn-warning__MlDsD,.Button_btn__W6oxS.Button_btn-info__kXW9e.Button_btn-warning__MlDsD,.Button_btn__W6oxS.Button_btn-primary__Y1iy-.Button_btn-warning__MlDsD,.Button_btn__W6oxS.Button_btn-success__DK393.Button_btn-warning__MlDsD,.Button_btn__W6oxS.Button_btn-warning__MlDsD.Button_btn-warning__MlDsD{background-color:#fd9a17;border-color:#c67102}.Button_btn__W6oxS.Button_btn-danger__nwxfa.Button_btn-warning__MlDsD:hover,.Button_btn__W6oxS.Button_btn-info__kXW9e.Button_btn-warning__MlDsD:hover,.Button_btn__W6oxS.Button_btn-primary__Y1iy-.Button_btn-warning__MlDsD:hover,.Button_btn__W6oxS.Button_btn-success__DK393.Button_btn-warning__MlDsD:hover,.Button_btn__W6oxS.Button_btn-warning__MlDsD.Button_btn-warning__MlDsD:hover{background-color:#ad6301}.Button_btn__W6oxS.Button_btn-danger__nwxfa.Button_btn-danger__nwxfa,.Button_btn__W6oxS.Button_btn-info__kXW9e.Button_btn-danger__nwxfa,.Button_btn__W6oxS.Button_btn-primary__Y1iy-.Button_btn-danger__nwxfa,.Button_btn__W6oxS.Button_btn-success__DK393.Button_btn-danger__nwxfa,.Button_btn__W6oxS.Button_btn-warning__MlDsD.Button_btn-danger__nwxfa{background-color:#f15554;border-color:#e61413}.Button_btn__W6oxS.Button_btn-danger__nwxfa.Button_btn-danger__nwxfa:hover,.Button_btn__W6oxS.Button_btn-info__kXW9e.Button_btn-danger__nwxfa:hover,.Button_btn__W6oxS.Button_btn-primary__Y1iy-.Button_btn-danger__nwxfa:hover,.Button_btn__W6oxS.Button_btn-success__DK393.Button_btn-danger__nwxfa:hover,.Button_btn__W6oxS.Button_btn-warning__MlDsD.Button_btn-danger__nwxfa:hover{background-color:#ce1211}.Button_btn__W6oxS.Button_btn-link__nXTLn{background-color:transparent;border-color:transparent;color:var(--link-color)}.Button_btn__W6oxS.Button_btn-block__44OZY{display:block;width:100%}.Button_btn__W6oxS.Button_btn-lg__nTi1W{height:36px}.Button_btn__W6oxS.Button_btn-sm__NGixt{height:28px}.Button_btn__W6oxS.Button_btn-rounded__s5DPa{border-radius:50%!important;font-size:14px;height:35px;padding:0;text-align:center;width:35px}.Button_btn__W6oxS.Button_btn-round__e7AKL{border-radius:30px}.Button_btn__W6oxS.Button_btn-ripple__U47i5{overflow:hidden}.Button_btn__W6oxS.Button_btn-ripple__U47i5:before{background:#fff;border-radius:50%;content:"";height:0;left:0;opacity:.5;position:absolute;top:0;transform:translate(-50%,-50%);transition:width .5s,height .5s;width:0}.Button_btn__W6oxS.Button_btn-ripple__U47i5:hover:before{height:300px;width:300px}.Button_btn__W6oxS.Button_loading__f5mmD svg{animation:Button_spin__cK5ia 1s linear infinite;transform-origin:center}.Button_btn-icon__UqlIV{align-items:center;background:transparent;border:none;border-radius:50%;color:var(--black-white);display:flex;font-size:1.3em;height:35px;justify-content:center;line-height:1;width:35px}.Button_btn-icon__UqlIV .Button_icon__OeKUC{height:auto;width:100%}.Button_btn-icon__UqlIV:hover.Button_btn-default__Cucka{background-color:#fff}.Button_btn-icon__UqlIV:hover.Button_btn-primary__Y1iy-{background-color:#68a0f0}.Button_btn-icon__UqlIV:hover.Button_btn-success__DK393{background-color:#acdca9}.Button_btn-icon__UqlIV:hover.Button_btn-info__kXW9e{background-color:#c2e6f7}.Button_btn-icon__UqlIV:hover.Button_btn-warning__MlDsD{background-color:#fec67c}.Button_btn-icon__UqlIV:hover.Button_btn-danger__nwxfa{background-color:#f9b3b2}.Button_btn-icon__UqlIV.Button_btn-rounded__s5DPa .Button_icon__OeKUC{border-radius:50%}.Button_btn-toolbar__qgbHo{margin-left:-5px}.Button_btn-toolbar__qgbHo>.Button_btn-group__ByOF5,.Button_btn-toolbar__qgbHo>.Button_btn__W6oxS,.Button_btn-toolbar__qgbHo>.Button_input-group__tjkJ3{margin-left:5px}.Button_btn-group-vertical__hbV6F,.Button_btn-group__ByOF5{position:relative}.Button_btn-group-vertical__hbV6F>label,.Button_btn-group__ByOF5>label{margin-bottom:0}.Button_btn-group-vertical__hbV6F>.Button_auto__NAlwq,.Button_btn-group__ByOF5>.Button_auto__NAlwq{flex:1 1 auto;position:relative}.Button_btn-group-vertical__hbV6F>.Button_active__BWfrx,.Button_btn-group__ByOF5>.Button_active__BWfrx{background-color:var(--link-active-color);border-color:var(--link-active-color);color:var(--white-black)}.Button_btn-group-vertical__hbV6F>.Button_active__BWfrx:hover,.Button_btn-group__ByOF5>.Button_active__BWfrx:hover{background-color:var(--link-active-color)}.Button_btn-group__ByOF5{align-items:center;display:flex}.Button_btn-group__ByOF5>.Button_btn__W6oxS:first-child:not(:last-child):not(.Button_dropdown-toggle__H1XIw){border-bottom-right-radius:0;border-top-right-radius:0;margin-left:0}.Button_btn-group__ByOF5>.Button_btn__W6oxS:not(:first-child):not(:last-child):not(.Button_dropdown-toggle__H1XIw){border-radius:0}.Button_btn-group__ByOF5>.Button_btn__W6oxS:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.Button_btn-group__ByOF5 .Button_btn-group__ByOF5+.Button_btn-group__ByOF5,.Button_btn-group__ByOF5 .Button_btn-group__ByOF5+.Button_btn__W6oxS,.Button_btn-group__ByOF5 .Button_btn__W6oxS+.Button_btn-group__ByOF5,.Button_btn-group__ByOF5 .Button_btn__W6oxS+.Button_btn__W6oxS{margin-left:-1px}.Button_btn-group-vertical__hbV6F{display:inline-flex;flex-direction:column}.Button_btn-group-vertical__hbV6F>.Button_btn__W6oxS{min-width:150px}.Button_btn-group-vertical__hbV6F>.Button_btn__W6oxS:first-child:not(:last-child){border-radius:4px 4px 0 0}.Button_btn-group-vertical__hbV6F>.Button_btn__W6oxS:not(:first-child):not(:last-child){border-radius:0}.Button_btn-group-vertical__hbV6F>.Button_btn__W6oxS:last-child:not(:first-child){border-radius:0 0 4px 4px}.Button_btn-group-vertical__hbV6F .Button_btn-group__ByOF5+.Button_btn-group__ByOF5,.Button_btn-group-vertical__hbV6F .Button_btn-group__ByOF5+.Button_btn__W6oxS,.Button_btn-group-vertical__hbV6F .Button_btn__W6oxS+.Button_btn-group__ByOF5,.Button_btn-group-vertical__hbV6F .Button_btn__W6oxS+.Button_btn__W6oxS{margin-left:0;margin-top:-1px}[data-toggle=buttons]>.Button_btn-group__ByOF5>.Button_btn__W6oxS input[type=checkbox],[data-toggle=buttons]>.Button_btn-group__ByOF5>.Button_btn__W6oxS input[type=radio],[data-toggle=buttons]>.Button_btn__W6oxS input[type=checkbox],[data-toggle=buttons]>.Button_btn__W6oxS input[type=radio]{clip:rect(0,0,0,0);pointer-events:none;position:absolute}input[type=checkbox],input[type=radio]{line-height:normal}@keyframes Button_spin__cK5ia{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.Card_card__9VbVP{background-color:var(--secondary-bg);border:1px solid var(--border-color);border-radius:4px;display:flex;flex-direction:column;position:relative;width:100%}.Card_card__9VbVP .Card_card-header__hfkqU{align-items:center;border-bottom:1px solid var(--border-color);border-radius:4px 4px 0 0;display:flex;justify-content:space-between;min-height:50px;padding:0 20px}.Card_card__9VbVP .Card_card-header__hfkqU .Card_card-header-title__vSeAf{align-items:center;display:flex;font-weight:500;gap:10px;line-height:1}.Card_card__9VbVP .Card_card-header__hfkqU .Card_card-header-title__vSeAf svg.Card_icon__u40Sx{fill:rgba(84,90,109,.2);height:16px;margin-right:0;margin-top:-2px;width:16px}.Card_card__9VbVP .Card_card-header__hfkqU .Card_card-header-title__vSeAf span{font-weight:500}.Card_card__9VbVP .Card_card-header__hfkqU .Card_tools__SLGqz{align-items:center;display:flex;gap:10px;position:relative}.Card_card__9VbVP .Card_card-header__hfkqU .Card_tools__SLGqz .Card_icon__u40Sx{border-radius:50%;cursor:pointer;height:25px;padding:3px;width:25px}.Card_card__9VbVP .Card_card-header__hfkqU .Card_tools__SLGqz .Card_icon__u40Sx:hover{background:var(--hover-bg)}.Card_card__9VbVP .Card_card-header__hfkqU .Card_tools__SLGqz .Card_icon__u40Sx:focus{background:var(--hover-bg);outline:none}.Card_card__9VbVP .Card_card-header__hfkqU.Card_sm__6lW1T{min-height:40px}.Card_card__9VbVP .Card_card-body__tkhoz{height:100%;padding:20px;width:100%}.Card_card__9VbVP .Card_card-footer__-aFRf{align-items:center;border-top:1px solid var(--border-color);display:flex;justify-content:space-between;min-height:50px;padding:5px 20px;position:relative}.Card_card__9VbVP .Card_card-footer__-aFRf button{margin-bottom:0}.Card_card__9VbVP.Card_card-h-left__TFJ5-{flex-direction:row}.Card_card__9VbVP.Card_card-h-left__TFJ5->.Card_card-header__hfkqU{align-items:start;background:var(--hover-bg);padding:0}.Card_card__9VbVP.Card_card-h-right__RzmaC{flex-direction:row-reverse}.Card_card__9VbVP.Card_card-h-right__RzmaC>.Card_card-header__hfkqU{align-items:start;background:var(--hover-bg);padding:0}.Card_modul-child-items__VrKPt{margin-left:20px}.Card_modul-child-items__VrKPt>:before{border-left:1px dashed var(--border-color);content:"";height:100%;left:-20px;position:absolute;top:0;width:1px}.Card_modul-child-items__VrKPt>:after{border-top:1px dashed var(--border-color);content:"";height:1px;left:-20px;position:absolute;top:50%;transform:translateY(-50%);width:20px}@media (max-width:992px){.Card_card__9VbVP .Card_card-footer__-aFRf,.Card_card__9VbVP .Card_card-footer__-aFRf .Card_pagination-toolbar__mpIGN,.Card_card__9VbVP .Card_card-header__hfkqU{flex-direction:column;gap:10px;justify-content:center;padding:15px 20px}.Card_card__9VbVP .Card_card-footer__-aFRf .Card_pagination-toolbar__mpIGN>div,.Card_card__9VbVP .Card_card-footer__-aFRf>div,.Card_card__9VbVP .Card_card-header__hfkqU>div{margin:0!important}.Card_card__9VbVP .Card_card-body__tkhoz{overflow-y:auto}}.spinner_spinner__kDIER{display:inline-block;margin-bottom:5px;margin-right:5px}.spinner_spinner__kDIER .spinner_spinner-icon__QlzMR{animation:spinner_rotator__eQjVe 1.4s linear infinite}@keyframes spinner_rotator__eQjVe{0%{transform:rotate(0deg)}to{transform:rotate(270deg)}}.spinner_spinner__kDIER .spinner_path__G-87M{stroke-dasharray:187;stroke-dashoffset:0;animation:spinner_dash__1HpcO 1.4s ease-in-out infinite,spinner_colors__Cp8ST 5.6s ease-in-out infinite;transform-origin:center}@keyframes spinner_colors__Cp8ST{0%{stroke:#4285f4}25%{stroke:#de3e35}50%{stroke:#f7c223}75%{stroke:#1b9a59}to{stroke:#4285f4}}@keyframes spinner_dash__1HpcO{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}.DropdownMenu_dropdown-menu__3VCoD{background-clip:padding-box;background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:3px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.18);box-shadow:0 6px 12px rgba(0,0,0,.18);min-width:160px;z-index:1001}.DropdownMenu_dropdown-menu-item__0cGSf{cursor:pointer;padding:8px 16px}.DropdownMenu_dropdown-menu-item__0cGSf:last-child{border-bottom:none}.DropdownMenu_dropdown-menu-item__0cGSf:hover{background:var(--hover-bg)}.DropdownMenu_dropdown-menu-item__0cGSf .DropdownMenu_icon__s1oRM,.DropdownMenu_dropdown-menu-item__0cGSf svg{fill:rgba(84,90,109,.2);height:16px;margin-right:10px;margin-top:-2px;width:16px}.Dropdown_dropdown__pt4zU{display:inline-block;position:relative}.Dropdown_dropdown__pt4zU .Dropdown_dropdown-toggle__CCe-U{cursor:pointer;user-select:none}.Dropdown_dropdown__pt4zU .Dropdown_dropdown-toggle__CCe-U svg.Dropdown_icon__aIftF{fill:rgba(84,90,109,.2);height:16px;width:16px}.Dropdown_dropdown-content__qnIAG{background-clip:padding-box;background:var(--secondary-bg);border:1px solid var(--border-color);border-radius:3px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.18);box-shadow:0 6px 12px rgba(0,0,0,.18);min-width:160px;z-index:1001}.Dropdown_dropdown-content__qnIAG.Dropdown_bottom-left__cuUsU,.Dropdown_dropdown-content__qnIAG.Dropdown_bottom-right__HpnxP{margin-top:4px}.Dropdown_dropdown-content__qnIAG.Dropdown_top-left__DHElR,.Dropdown_dropdown-content__qnIAG.Dropdown_top-right__wp9Jq{margin-bottom:4px}@media (max-width:768px){.Dropdown_dropdown-content__qnIAG{left:50%!important;max-width:320px;min-width:calc(100% - 32px);position:fixed!important;transform:translateX(-50%)}.Dropdown_dropdown-content__qnIAG.Dropdown_bottom-left__cuUsU,.Dropdown_dropdown-content__qnIAG.Dropdown_bottom-right__HpnxP,.Dropdown_dropdown-content__qnIAG.Dropdown_top-left__DHElR,.Dropdown_dropdown-content__qnIAG.Dropdown_top-right__wp9Jq{top:50%!important;transform:translate(-50%,-50%)}}.Badge_badge__V11MP{border-radius:3px;display:inline-block;font-size:12px;font-weight:500;line-height:1;padding:5px 10px;text-align:center;vertical-align:baseline;white-space:nowrap}.Badge_badge__V11MP.Badge_badge-primary__kbIbZ{background-color:#96bdf5;color:#082651}.Badge_badge__V11MP.Badge_badge-success__p3xRL{background-color:#cfebcd;color:#2a6026}.Badge_badge__V11MP.Badge_badge-info__rrciq{background-color:#d8effa;color:#1578a5}.Badge_badge__V11MP.Badge_badge-warning__D7uFZ{background-color:#fedcaf;color:#7a4601}.Badge_badge__V11MP.Badge_badge-danger__3j-yd{background-color:#fde2e1;color:#9f0e0d}.Badge_badge__V11MP.Badge_badge-light__eXhHT{background-color:#f1f1f1;color:#000}.Badge_badge__V11MP.Badge_badge-dark__ILThB{background-color:#4d4d4d;color:#b3b3b3}.Badge_badge__V11MP.Badge_rounded-pill__9bkwJ{border-radius:30px}.Badge_badge__V11MP.Badge_badge-notif__SH-r9{border-radius:50px;font-size:10px;font-weight:600;padding:5px;pointer-events:none;position:absolute;right:-10px;top:-10px}

package/dist/types/components/Badge/Badge.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './Badge.scss';
+interface BadgeProps {
+    className?: string;
+    text: string | number;
+}
+declare const Badge: React.FC<BadgeProps>;
+export { Badge };

package/dist/types/components/Badge/index.d.ts

@@ -0,0 +1 @@
+export { Badge } from "./Badge";

package/dist/types/components/Button/Button.d.ts

@@ -0,0 +1,5 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import './Button.scss';
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+declare const Button: React.FC<ButtonProps>;
+export { Button };

package/dist/types/components/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from "./Button";

package/dist/types/components/Card/Card.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import "./Card.scss";
+interface CardHeaderProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const CardHeader: React.FC<CardHeaderProps>;
+interface CardBodyProps {
+    children: React.ReactNode;
+    className?: string;
+    onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;
+    onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;
+    style?: React.CSSProperties;
+}
+declare const CardBody: React.FC<CardBodyProps>;
+interface CardFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const CardFooter: React.FC<CardFooterProps>;
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const Card: React.FC<CardProps>;
+export { Card, CardHeader, CardBody, CardFooter };

package/dist/types/components/Card/index.d.ts

@@ -0,0 +1 @@
+export { Card, CardHeader, CardBody, CardFooter } from "./Card";

package/dist/types/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+import './Dropdown.scss';
+interface DropdownProps {
+    children: ReactNode;
+    className?: string;
+    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+}
+interface DropdownToggleProps {
+    children: ReactNode;
+    className?: string;
+    toggleDropdown?: () => void;
+    dropdownId?: string;
+}
+interface DropdownContentProps {
+    children: ReactNode;
+    className?: string;
+    isOpen?: boolean;
+    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    contentRef?: React.RefObject<HTMLDivElement>;
+    dropdownId?: string;
+}
+declare const Dropdown: React.FC<DropdownProps>;
+declare const DropdownToggle: React.FC<DropdownToggleProps>;
+declare const DropdownContent: React.FC<DropdownContentProps>;
+export { Dropdown, DropdownToggle, DropdownContent };

package/dist/types/components/Dropdown/DropdownMenu.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from 'react';
+import './DropdownMenu.scss';
+interface DropdownMenuItem {
+    icon?: ReactNode;
+    label: string;
+    className?: string;
+    onClick: () => void;
+}
+interface DropdownMenuProps {
+    children: ReactNode;
+    items: DropdownMenuItem[];
+    position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    className?: string;
+}
+declare const DropdownMenu: React.FC<DropdownMenuProps>;
+export { DropdownMenu };

package/dist/types/components/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownMenu } from "./DropdownMenu";
+export { Dropdown, DropdownToggle, DropdownContent } from "./Dropdown";

package/dist/types/components/Spinner/Spinner.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './spinner.scss';
+declare const Spinner: () => React.JSX.Element;
+export { Spinner };

package/dist/types/components/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { Spinner } from "./Spinner";

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

@@ -0,0 +1,5 @@
+export * from './Button';
+export * from './Card';
+export * from './Spinner';
+export * from './Dropdown';
+export * from './Badge';

package/dist/types/hooks/useOutsideClick.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+/**
+ * Hook untuk mendeteksi klik di luar elemen yang diberikan
+ * @param refs Array of refs dari elemen yang akan dimonitor
+ * @param handler Fungsi yang akan dipanggil ketika klik terjadi di luar elemen
+ *
+ * @example
+ * const ref = useRef<HTMLDivElement>(null);
+ * useOutsideClick([ref], () => {});
+ */
+declare const useOutsideClick: (refs: RefObject<HTMLElement>[], handler: () => void) => void;
+export default useOutsideClick;

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/package.json

@@ -0,0 +1,57 @@
+{
+  "type": "module",
+  "name": "pesona-ui",
+  "version": "1.0.1",
+  "description": "PesonaUI - A reusable React component library built with TypeScript and SCSS",
+  "keywords": [
+    "react",
+    "ui",
+    "component-library",
+    "typescript",
+    "scss"
+  ],
+  "author": "MASRIADI",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "start-demo": "vite demo",
+    "prepublishOnly": "yarn build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@types/node": "^22.12.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "postcss": "^8.4.49",
+    "rollup": "^4.29.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^4.0.1",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "sass": "^1.83.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "dependencies": {
+    "rollup-plugin-sass": "^1.14.0"
+  }
+}