@quillsql/admin 1.6.1 → 1.6.3

package/dist/cjs/primitives/ButtonPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ButtonPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAG7D,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;CAC9C,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAC7B,oBAAoB,GAAG;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAoFF,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ButtonPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ButtonPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAgB,MAAM,UAAU,CAAC;AAGpD,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAC7B,oBAAoB,GAAG;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAgGF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/cjs/primitives/ButtonPrimitive.js

@@ -3,17 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Admin_1 = require("../Admin");
 const UiComponents_1 = require("../components/UiComponents");
-const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = Admin_1.theme, style, variant = 'primary', }) => {
+const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = Admin_1.defaultTheme, style, disabled, variant = 'primary', type = 'submit', }) => {
     if (variant === 'danger') {
-        return ((0, jsx_runtime_1.jsxs)("button", { style: {
-                height: 36,
+        return ((0, jsx_runtime_1.jsx)("button", { type: type, style: {
+                height: 40,
                 color: 'red',
                 display: 'flex',
+                background: !disabled ? '#DCDCDC' : '#e7e7e7',
                 borderRadius: 6,
                 alignItems: 'center',
                 justifyContent: 'center',
                 outline: 'none',
-                cursor: 'pointer',
+                cursor: disabled ? 'default' : 'pointer',
                 fontFamily: theme?.fontFamily,
                 fontWeight: theme?.buttonFontWeight || 600,
                 border: 'none',
@@ -21,31 +22,38 @@ const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = Admin_1.th
                 paddingLeft: 20,
                 paddingRight: 20,
                 ...style,
-            }, onClick: onClick, className: "quill--danger-button", children: [(0, jsx_runtime_1.jsx)("style", { children: ` .quill--danger-button { background: #e7e7e7 } .quill--danger-button:hover { background: #DCDCDC }` }), isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: { padding: '32px 0px' }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : (label)] }));
+            }, onClick: onClick, className: "quill--danger-button", children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: { padding: '32px 0px' }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : (label) }));
     }
-    return ((0, jsx_runtime_1.jsxs)("button", { style: {
-            height: 36,
-            color: theme?.backgroundColor,
+    return ((0, jsx_runtime_1.jsxs)("button", { className: disabled ? 'quill-button-disabled' : 'quill-button', type: type, style: {
+            height: 40,
+            color: theme?.backgroundColor ?? 'white',
             display: 'flex',
             borderRadius: 6,
             alignItems: 'center',
             justifyContent: 'center',
             outline: 'none',
-            cursor: 'pointer',
+            cursor: disabled ? 'default' : 'pointer',
             fontFamily: theme?.fontFamily,
             fontWeight: theme?.buttonFontWeight || 600,
+            opacity: disabled ? 0.3 : 1,
             border: 'none',
             whiteSpace: 'nowrap',
             fontSize: 14,
             paddingLeft: 20,
             paddingRight: 20,
+            position: 'relative',
             ...style,
-        }, onClick: onClick, className: "quill-button", children: [(0, jsx_runtime_1.jsx)("style", { children: `.quill-button {
-                    background: #212121;
-                    color: white;
-                }
-                .quill-button:hover {
-                    background: rgba(0,0,0,0.75);
-                }` }), isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: { padding: '0px 16px' }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : (label)] }));
+        }, onClick: disabled || isLoading ? () => { } : onClick, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+      .quill-button {
+        background-color: #212121;
+      }
+      .quill-button-disabled {
+        background-color: rgba(56, 65, 81, 0.9);
+      }
+      .quill-button:hover {
+        background-color: rgba(56, 65, 81, 0.9);
+      }` }), isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute' }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : null, (0, jsx_runtime_1.jsx)("div", { style: {
+                    visibility: isLoading ? 'hidden' : 'visible',
+                }, children: label })] }));
 };
 exports.default = ButtonPrimitive;

package/dist/cjs/primitives/CheckboxPrimitive.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type CheckboxPrimitiveProps = {
+    label: string;
+    isChecked: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    containerStyle?: React.CSSProperties;
+    disabled?: boolean;
+    labelStyle?: React.CSSProperties;
+};
+declare const CheckboxPrimitive: React.FC<CheckboxPrimitiveProps>;
+export default CheckboxPrimitive;
+//# sourceMappingURL=CheckboxPrimitive.d.ts.map

package/dist/cjs/primitives/CheckboxPrimitive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/CheckboxPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC/D,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAgDvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/cjs/primitives/CheckboxPrimitive.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CheckboxPrimitive = ({ label, isChecked, onChange, containerStyle, labelStyle, disabled, }) => {
+    return ((0, jsx_runtime_1.jsxs)("label", { style: {
+            display: 'flex',
+            width: '100%',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            gap: 4,
+            ...containerStyle,
+        }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: isChecked, onChange: onChange, disabled: disabled, style: {
+                    width: '14px',
+                    height: '14px',
+                    margin: 'auto 0',
+                    cursor: 'pointer',
+                } }), (0, jsx_runtime_1.jsx)("span", { style: {
+                    display: 'block',
+                    marginTop: 'auto',
+                    marginBottom: 'auto',
+                    marginLeft: '6px',
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    ...labelStyle,
+                }, children: label })] }));
+};
+exports.default = CheckboxPrimitive;

package/dist/cjs/primitives/HeaderPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/HeaderPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,KAAK,oBAAoB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAcnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"HeaderPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/HeaderPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAgB,MAAM,UAAU,CAAC;AAEpD,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAcnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/cjs/primitives/HeaderPrimitive.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Admin_1 = require("../Admin");
-const HeaderPrimitive = ({ label, theme = Admin_1.theme, }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
+const HeaderPrimitive = ({ label, theme = Admin_1.defaultTheme, }) => ((0, jsx_runtime_1.jsx)("h1", { style: {
         color: theme?.primaryTextColor,
         fontFamily: theme?.fontFamily,
         fontWeight: theme?.buttonFontWeight || 600,

package/dist/cjs/primitives/MiniButtonPrimitive.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ButtonPrimitiveProps } from './ButtonPrimitive';
+declare const MiniButtonPrimitive: React.FC<ButtonPrimitiveProps & {
+    isLoading?: boolean;
+}>;
+export default MiniButtonPrimitive;
+//# sourceMappingURL=MiniButtonPrimitive.d.ts.map

package/dist/cjs/primitives/MiniButtonPrimitive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniButtonPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/MiniButtonPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAEzD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CACjC,oBAAoB,GAAG;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CA0FF,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/cjs/primitives/MiniButtonPrimitive.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Admin_1 = require("../Admin");
+const UiComponents_1 = require("../components/UiComponents");
+const MiniButtonPrimitive = ({ onClick, isLoading = false, label, theme = Admin_1.defaultTheme, style, disabled, variant = 'primary', type = 'submit', }) => {
+    if (variant === 'danger') {
+        return ((0, jsx_runtime_1.jsx)("button", { type: type, style: {
+                height: 40,
+                color: 'red',
+                display: 'flex',
+                background: !disabled ? '#DCDCDC' : '#e7e7e7',
+                borderRadius: 6,
+                alignItems: 'center',
+                justifyContent: 'center',
+                outline: 'none',
+                cursor: disabled ? 'default' : 'pointer',
+                fontFamily: theme?.fontFamily,
+                fontWeight: theme?.buttonFontWeight || 600,
+                border: 'none',
+                fontSize: 14,
+                paddingLeft: 20,
+                paddingRight: 20,
+                ...style,
+            }, onClick: onClick, className: "quill--danger-button", children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: { padding: '32px 0px' }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : (label) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("button", { className: disabled ? 'quill-mini-button-disabled' : 'quill-mini-button', type: type, style: {
+            height: 34,
+            color: theme?.primaryTextColor ?? 'black',
+            backgroundColor: theme?.backgroundColor ?? 'white',
+            display: 'flex',
+            borderRadius: 6,
+            alignItems: 'center',
+            justifyContent: 'center',
+            outline: 'none',
+            cursor: disabled ? 'default' : 'pointer',
+            fontFamily: theme?.fontFamily,
+            fontWeight: theme?.buttonFontWeight || 600,
+            opacity: disabled ? 0.3 : 1,
+            whiteSpace: 'nowrap',
+            fontSize: 14,
+            paddingLeft: 8,
+            paddingRight: 8,
+            ...style,
+        }, onClick: disabled || isLoading ? () => { } : onClick, children: [(0, jsx_runtime_1.jsx)("style", { children: `
+      .quill-mini-button {
+        border: 1px solid #e7e7e7;
+      }
+      .quill-mini-button-disabled {
+        background-color: #e7e7e7;
+      }
+      .quill-mini-button:hover {
+        border: 1px solid #c4c4c4;
+      }` }), isLoading ? ((0, jsx_runtime_1.jsx)("div", { style: { padding: '0px 16px' }, children: (0, jsx_runtime_1.jsx)(UiComponents_1.LoadingSpinner, {}) })) : (label)] }));
+};
+exports.default = MiniButtonPrimitive;

package/dist/cjs/primitives/ModalPrimitive.d.ts

@@ -1,12 +1,4 @@
-import React, { CSSProperties } from 'react';
-import { QuillTheme } from '../Admin';
-type ModalPrimitiveProps = {
-    isOpen: boolean;
-    close: () => void;
-    children: React.ReactNode;
-    style?: CSSProperties;
-    theme?: QuillTheme;
-};
-declare const ModalPrimitive: React.FC<ModalPrimitiveProps>;
+import { ModalComponentProps } from '../components/UiComponents';
+declare const ModalPrimitive: import("react").ForwardRefExoticComponent<ModalComponentProps & import("react").RefAttributes<HTMLDivElement>>;
 export default ModalPrimitive;
 //# sourceMappingURL=ModalPrimitive.d.ts.map

package/dist/cjs/primitives/ModalPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ModalPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,KAAK,mBAAmB,GAAG;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8DjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ModalPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/ModalPrimitive.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAGjE,QAAA,MAAM,cAAc,gHA4DnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/cjs/primitives/ModalPrimitive.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Admin_1 = require("../Admin");
-const ModalPrimitive = ({ isOpen, close, children, style, theme = Admin_1.theme, }) => {
+const react_dom_1 = require("react-dom");
+const ModalPrimitive = (0, react_1.forwardRef)(({ isOpen, onClose, children, style }, ref) => {
     (0, react_1.useEffect)(() => {
         // Prevent scrolling in the background when the modal is open
         if (isOpen) {
@@ -17,7 +17,7 @@ const ModalPrimitive = ({ isOpen, close, children, style, theme = Admin_1.theme,
     if (!isOpen) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+    return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
                     position: 'fixed',
                     top: '0',
                     right: '0',
@@ -26,7 +26,7 @@ const ModalPrimitive = ({ isOpen, close, children, style, theme = Admin_1.theme,
                     zIndex: '50',
                     backgroundColor: 'rgba(255, 255, 255, 0.8)',
                     backdropFilter: 'blur(5px)',
-                }, onClick: close }), (0, jsx_runtime_1.jsx)("div", { style: {
+                }, onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
                     position: 'fixed',
                     left: '50%',
                     top: '50%',
@@ -43,6 +43,6 @@ const ModalPrimitive = ({ isOpen, close, children, style, theme = Admin_1.theme,
                     padding: 30,
                     overflow: 'auto',
                     ...style,
-                }, children: children })] }));
-};
+                }, children: children })] }), document.body);
+});
 exports.default = ModalPrimitive;

package/dist/cjs/primitives/PlaceholderPrimitive.d.ts

@@ -0,0 +1,5 @@
+export default function PlaceholderPrimitive({ className, containerStyle, }: {
+    className?: string;
+    containerStyle?: React.CSSProperties;
+}): JSX.Element;
+//# sourceMappingURL=PlaceholderPrimitive.d.ts.map

package/dist/cjs/primitives/PlaceholderPrimitive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PlaceholderPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/PlaceholderPrimitive.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,SAAS,EACT,cAAc,GACf,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC,GAAG,GAAG,CAAC,OAAO,CAsEd"}

package/dist/cjs/primitives/PlaceholderPrimitive.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PlaceholderPrimitive;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function PlaceholderPrimitive({ className, containerStyle, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            boxSizing: 'content-box',
+            height: '100%',
+            width: '100%',
+            ...containerStyle,
+        }, className: className, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                height: '100%',
+                width: '100%',
+                boxSizing: 'content-box',
+                borderRadius: 8,
+                overflow: 'hidden',
+            }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [(0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: '#F9F9FA' }), (0, jsx_runtime_1.jsx)("defs", { fill: '#F9F9FA', children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "#FEFEFE" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), (0, jsx_runtime_1.jsx)("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }));
+}

package/dist/cjs/primitives/PopoverPrimitive.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PopoverProps {
+    trigger: React.ReactNode;
+    content: React.ReactNode;
+}
+export declare const Popover: ({ trigger, content }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PopoverPrimitive.d.ts.map

package/dist/cjs/primitives/PopoverPrimitive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/PopoverPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,UAAU,YAAY;IACpB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AACD,eAAO,MAAM,OAAO,yBAA0B,YAAY,4CAiEzD,CAAC"}

package/dist/cjs/primitives/PopoverPrimitive.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const Popover = ({ trigger, content }) => {
+    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
+    const [position, setPosition] = (0, react_1.useState)({
+        top: 0,
+        left: 0,
+    });
+    const triggerRef = (0, react_1.useRef)(null);
+    const updatePosition = () => {
+        if (triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            setPosition({
+                top: rect.bottom + window.scrollY + 8,
+                left: rect.left + window.scrollX,
+            });
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (isVisible) {
+            updatePosition();
+            window.addEventListener('scroll', updatePosition);
+            window.addEventListener('resize', updatePosition);
+        }
+        return () => {
+            window.removeEventListener('scroll', updatePosition);
+            window.removeEventListener('resize', updatePosition);
+        };
+    }, [isVisible]);
+    return ((0, jsx_runtime_1.jsxs)("div", { id: "my-relative-container", style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("div", { ref: triggerRef, onClick: () => setIsVisible((isVisible) => !isVisible), children: trigger }), isVisible &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), onClick: () => setIsVisible(false), style: {
+                        position: 'absolute',
+                        zIndex: 1000,
+                        top: position.top,
+                        left: position.left - 53,
+                        background: 'white',
+                        boxShadow: '0px 1px 12px 0px rgba(56, 65, 81, 0.1)',
+                        padding: 12,
+                        borderRadius: 6,
+                        borderWidth: 1,
+                        borderColor: '#e7e7e7',
+                        // zIndex: 1000,
+                        // height: 100,
+                        // minHeight: 100,
+                        // width: 100,
+                        // minWidth: 100,
+                    }, children: content }), document.body)] }));
+};
+exports.Popover = Popover;

package/dist/cjs/primitives/SecondaryButtonPrimitive.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { QuillTheme } from '../Admin';
-type SecondaryButtonPrimitiveProps = {
+export type SecondaryButtonPrimitiveProps = {
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     label: string;
     theme?: QuillTheme;
+    disabled?: boolean;
+    style?: React.CSSProperties;
 };
 declare const SecondaryButtonPrimitive: React.FC<SecondaryButtonPrimitiveProps>;
 export default SecondaryButtonPrimitive;

package/dist/cjs/primitives/SecondaryButtonPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButtonPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/SecondaryButtonPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,KAAK,6BAA6B,GAAG;IACjC,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAyBrE,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"SecondaryButtonPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/SecondaryButtonPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAgB,MAAM,UAAU,CAAC;AAEpD,MAAM,MAAM,6BAA6B,GAAG;IAC1C,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAkCrE,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/cjs/primitives/SecondaryButtonPrimitive.js

@@ -2,23 +2,26 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Admin_1 = require("../Admin");
-const SecondaryButtonPrimitive = ({ onClick, label, theme = Admin_1.theme }) => {
+const SecondaryButtonPrimitive = ({ onClick, label, theme = Admin_1.defaultTheme, disabled, style, }) => {
     return ((0, jsx_runtime_1.jsx)("button", { style: {
-            height: 36,
-            background: "#F9FAFB",
+            height: 40,
+            background: disabled ? '#f8f8f8' : '#ffffff',
+            borderColor: '#E7E7E7',
+            borderStyle: 'solid',
+            borderWidth: 1,
             color: theme?.primaryTextColor,
-            display: "flex",
+            display: 'flex',
             borderRadius: 6,
-            alignItems: "center",
-            justifyContent: "center",
-            outline: "none",
-            cursor: "pointer",
+            alignItems: 'center',
+            justifyContent: 'center',
+            outline: 'none',
+            cursor: disabled ? 'default' : 'pointer',
             fontFamily: theme?.fontFamily,
             fontWeight: theme?.buttonFontWeight || 600,
-            border: "none",
             fontSize: 14,
             paddingLeft: 20,
             paddingRight: 20,
-        }, onClick: onClick, children: label }));
+            ...style,
+        }, onClick: !disabled ? onClick : undefined, children: label }));
 };
 exports.default = SecondaryButtonPrimitive;

package/dist/cjs/primitives/TextInputPrimitive.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { QuillTheme } from '../Admin';
-interface TextInputPrimitiveProps {
+export interface TextInputPrimitiveProps {
     onChange: (e: any) => void;
     value: string;
     placeholder?: string;
@@ -8,7 +8,12 @@ interface TextInputPrimitiveProps {
     disabled?: boolean;
     width?: string;
     password?: boolean;
+    style?: React.CSSProperties;
+    number?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
 }
-declare const TextInputPrimitive: React.FC<TextInputPrimitiveProps>;
+declare const TextInputPrimitive: React.ForwardRefExoticComponent<TextInputPrimitiveProps & React.RefAttributes<HTMLInputElement>>;
 export default TextInputPrimitive;
 //# sourceMappingURL=TextInputPrimitive.d.ts.map

package/dist/cjs/primitives/TextInputPrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TextInputPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAyB,MAAM,UAAU,CAAC;AAE7D,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAmEzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"TextInputPrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TextInputPrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAgB,MAAM,UAAU,CAAC;AAEpD,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,kBAAkB,kGAyLvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/cjs/primitives/TextInputPrimitive.js

@@ -1,23 +1,97 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const Admin_1 = require("../Admin");
-const TextInputPrimitive = ({ onChange, value, placeholder, theme = Admin_1.theme, disabled = false, width = '250px', password = false, }) => {
+const TextInputPrimitive = (0, react_1.forwardRef)(({ onChange, value, placeholder, theme = Admin_1.defaultTheme, disabled = false, 
+// width = '250px',
+width, password = false, style, number = false, min = 0, max, step = 1, }, ref) => {
     const [showPassword, setShowPassword] = react_1.default.useState(!password);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)("input", { style: {
+    const handleNumberChange = (e) => {
+        const newValue = e.target.value;
+        // Allow empty string for clearing the input
+        if (newValue === '') {
+            onChange({ target: { value: '' } });
+            return;
+        }
+        // Filter non-numeric input
+        if (!/^\d*$/.test(newValue)) {
+            return;
+        }
+        // Convert to number for validation
+        let numValue = parseInt(newValue, 10);
+        // Apply min/max constraints
+        if (!isNaN(numValue)) {
+            if (min !== undefined && numValue < min)
+                numValue = min;
+            if (max !== undefined && numValue > max)
+                numValue = max;
+            onChange({ target: { value: numValue.toString() } });
+        }
+    };
+    const incrementValue = () => {
+        if (disabled)
+            return;
+        const currentValue = value === '' ? min - step : parseInt(value, 10);
+        if (isNaN(currentValue))
+            return;
+        let newValue = currentValue + step;
+        if (max !== undefined && newValue > max)
+            newValue = max;
+        onChange({ target: { value: newValue.toString() } });
+    };
+    const decrementValue = () => {
+        if (disabled)
+            return;
+        const currentValue = value === '' ? min + step : parseInt(value, 10);
+        if (isNaN(currentValue))
+            return;
+        let newValue = currentValue - step;
+        if (newValue < min)
+            newValue = min;
+        onChange({ target: { value: newValue.toString() } });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', width: width || '100%' }, children: [(0, jsx_runtime_1.jsx)("input", { ref: ref, style: {
+                    ...style,
                     display: 'flex',
                     flexDirection: 'row',
-                    alignItems: 'center',
                     paddingLeft: '12px',
-                    paddingRight: '12px',
+                    paddingRight: number ? '30px' : '12px',
                     fontWeight: 'medium',
-                    height: 38,
-                    minWidth: width,
-                    boxShadow: '0 1px 2px 0 rgba(0,0,0,.05)',
+                    height: 40,
                     width: '100%',
                     backgroundColor: theme?.backgroundColor || 'white',
                     color: theme?.primaryTextColor,
@@ -26,7 +100,8 @@ const TextInputPrimitive = ({ onChange, value, placeholder, theme = Admin_1.them
                     borderStyle: 'solid',
                     borderRadius: '6px',
                     fontSize: 14,
-                }, type: showPassword ? 'text' : 'password', disabled: disabled, onChange: onChange, value: value, placeholder: placeholder }), password ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                    cursor: disabled ? 'not-allowed' : 'auto',
+                }, type: number ? 'text' : showPassword ? 'text' : 'password', disabled: disabled || number, readOnly: number, onChange: number ? handleNumberChange : onChange, value: value ?? '', placeholder: placeholder }), password && !number ? ((0, jsx_runtime_1.jsx)("div", { style: {
                     position: 'absolute',
                     right: '8px',
                     bottom: '6px',
@@ -36,6 +111,26 @@ const TextInputPrimitive = ({ onChange, value, placeholder, theme = Admin_1.them
                     boxSizing: 'content-box',
                 }, onClick: () => {
                     setShowPassword(!showPassword);
-                }, children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" })] }) })) : null] }));
-};
+                }, children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" })] }) })) : null, number ? ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    position: 'absolute',
+                    right: '4px',
+                    top: '4px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: 'calc(100% - 8px)',
+                    userSelect: 'none',
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            cursor: disabled ? 'not-allowed' : 'pointer',
+                            height: '50%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            opacity: disabled ? 0.5 : 1,
+                        }, onClick: incrementValue, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", fill: theme?.primaryTextColor || 'currentColor', viewBox: "0 0 16 16", children: (0, jsx_runtime_1.jsx)("path", { d: "M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z" }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            cursor: disabled ? 'not-allowed' : 'pointer',
+                            height: '50%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            opacity: disabled ? 0.5 : 1,
+                        }, onClick: decrementValue, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", fill: theme?.primaryTextColor || 'currentColor', viewBox: "0 0 16 16", children: (0, jsx_runtime_1.jsx)("path", { d: "M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" }) }) })] })) : null] }));
+});
 exports.default = TextInputPrimitive;

package/dist/cjs/primitives/TogglePrimitive.d.ts

@@ -1,6 +1,9 @@
-declare const TogglePrimitive: ({ value, onClick }: {
-    value: any;
-    onClick: any;
+import { CSSProperties } from 'react';
+declare const TogglePrimitive: ({ value, onClick, style, disabled, }: {
+    value: boolean;
+    onClick: () => void;
+    style?: CSSProperties;
+    disabled?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TogglePrimitive;
 //# sourceMappingURL=TogglePrimitive.d.ts.map