@quillsql/admin 1.6.1 → 1.6.3

package/dist/esm/primitives/ButtonPrimitive.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { theme as defaultTheme } from '../Admin';
+import { defaultTheme } from '../Admin';
 import { LoadingSpinner } from '../components/UiComponents';
-const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = defaultTheme, style, variant = 'primary', }) => {
+const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = defaultTheme, style, disabled, variant = 'primary', type = 'submit', }) => {
     if (variant === 'danger') {
-        return (_jsxs("button", { style: {
-                height: 36,
+        return (_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',
@@ -19,31 +20,38 @@ const ButtonPrimitive = ({ onClick, isLoading = false, label, theme = defaultThe
                 paddingLeft: 20,
                 paddingRight: 20,
                 ...style,
-            }, onClick: onClick, className: "quill--danger-button", children: [_jsx("style", { children: ` .quill--danger-button { background: #e7e7e7 } .quill--danger-button:hover { background: #DCDCDC }` }), isLoading ? (_jsx("div", { style: { padding: '32px 0px' }, children: _jsx(LoadingSpinner, {}) })) : (label)] }));
+            }, onClick: onClick, className: "quill--danger-button", children: isLoading ? (_jsx("div", { style: { padding: '32px 0px' }, children: _jsx(LoadingSpinner, {}) })) : (label) }));
     }
-    return (_jsxs("button", { style: {
-            height: 36,
-            color: theme?.backgroundColor,
+    return (_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: [_jsx("style", { children: `.quill-button {
-                    background: #212121;
-                    color: white;
-                }
-                .quill-button:hover {
-                    background: rgba(0,0,0,0.75);
-                }` }), isLoading ? (_jsx("div", { style: { padding: '0px 16px' }, children: _jsx(LoadingSpinner, {}) })) : (label)] }));
+        }, onClick: disabled || isLoading ? () => { } : onClick, children: [_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 ? (_jsx("div", { style: { position: 'absolute' }, children: _jsx(LoadingSpinner, {}) })) : null, _jsx("div", { style: {
+                    visibility: isLoading ? 'hidden' : 'visible',
+                }, children: label })] }));
 };
 export default ButtonPrimitive;

package/dist/esm/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/esm/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/esm/primitives/CheckboxPrimitive.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CheckboxPrimitive = ({ label, isChecked, onChange, containerStyle, labelStyle, disabled, }) => {
+    return (_jsxs("label", { style: {
+            display: 'flex',
+            width: '100%',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            gap: 4,
+            ...containerStyle,
+        }, children: [_jsx("input", { type: "checkbox", checked: isChecked, onChange: onChange, disabled: disabled, style: {
+                    width: '14px',
+                    height: '14px',
+                    margin: 'auto 0',
+                    cursor: 'pointer',
+                } }), _jsx("span", { style: {
+                    display: 'block',
+                    marginTop: 'auto',
+                    marginBottom: 'auto',
+                    marginLeft: '6px',
+                    whiteSpace: 'nowrap',
+                    textOverflow: 'ellipsis',
+                    overflow: 'hidden',
+                    ...labelStyle,
+                }, children: label })] }));
+};
+export default CheckboxPrimitive;

package/dist/esm/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/esm/primitives/HeaderPrimitive.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { theme as defaultTheme } from '../Admin';
+import { defaultTheme } from '../Admin';
 const HeaderPrimitive = ({ label, theme = defaultTheme, }) => (_jsx("h1", { style: {
         color: theme?.primaryTextColor,
         fontFamily: theme?.fontFamily,

package/dist/esm/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/esm/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/esm/primitives/MiniButtonPrimitive.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defaultTheme } from '../Admin';
+import { LoadingSpinner } from '../components/UiComponents';
+const MiniButtonPrimitive = ({ onClick, isLoading = false, label, theme = defaultTheme, style, disabled, variant = 'primary', type = 'submit', }) => {
+    if (variant === 'danger') {
+        return (_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 ? (_jsx("div", { style: { padding: '32px 0px' }, children: _jsx(LoadingSpinner, {}) })) : (label) }));
+    }
+    return (_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: [_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 ? (_jsx("div", { style: { padding: '0px 16px' }, children: _jsx(LoadingSpinner, {}) })) : (label)] }));
+};
+export default MiniButtonPrimitive;

package/dist/esm/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/esm/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/esm/primitives/ModalPrimitive.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import { theme as defaultTheme } from '../Admin';
-const ModalPrimitive = ({ isOpen, close, children, style, theme = defaultTheme, }) => {
+import { useEffect, forwardRef } from 'react';
+import { createPortal } from 'react-dom';
+const ModalPrimitive = forwardRef(({ isOpen, onClose, children, style }, ref) => {
     useEffect(() => {
         // Prevent scrolling in the background when the modal is open
         if (isOpen) {
@@ -15,7 +15,7 @@ const ModalPrimitive = ({ isOpen, close, children, style, theme = defaultTheme,
     if (!isOpen) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+    return createPortal(_jsxs(_Fragment, { children: [_jsx("div", { style: {
                     position: 'fixed',
                     top: '0',
                     right: '0',
@@ -24,7 +24,7 @@ const ModalPrimitive = ({ isOpen, close, children, style, theme = defaultTheme,
                     zIndex: '50',
                     backgroundColor: 'rgba(255, 255, 255, 0.8)',
                     backdropFilter: 'blur(5px)',
-                }, onClick: close }), _jsx("div", { style: {
+                }, onClick: onClose }), _jsx("div", { ref: ref, style: {
                     position: 'fixed',
                     left: '50%',
                     top: '50%',
@@ -41,6 +41,6 @@ const ModalPrimitive = ({ isOpen, close, children, style, theme = defaultTheme,
                     padding: 30,
                     overflow: 'auto',
                     ...style,
-                }, children: children })] }));
-};
+                }, children: children })] }), document.body);
+});
 export default ModalPrimitive;

package/dist/esm/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/esm/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/esm/primitives/PlaceholderPrimitive.js

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

package/dist/esm/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/esm/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/esm/primitives/PopoverPrimitive.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
+import { createPortal } from 'react-dom';
+export const Popover = ({ trigger, content }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [position, setPosition] = useState({
+        top: 0,
+        left: 0,
+    });
+    const triggerRef = useRef(null);
+    const updatePosition = () => {
+        if (triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            setPosition({
+                top: rect.bottom + window.scrollY + 8,
+                left: rect.left + window.scrollX,
+            });
+        }
+    };
+    useEffect(() => {
+        if (isVisible) {
+            updatePosition();
+            window.addEventListener('scroll', updatePosition);
+            window.addEventListener('resize', updatePosition);
+        }
+        return () => {
+            window.removeEventListener('scroll', updatePosition);
+            window.removeEventListener('resize', updatePosition);
+        };
+    }, [isVisible]);
+    return (_jsxs("div", { id: "my-relative-container", style: { position: 'relative' }, children: [_jsx("div", { ref: triggerRef, onClick: () => setIsVisible((isVisible) => !isVisible), children: trigger }), isVisible &&
+                createPortal(_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)] }));
+};

package/dist/esm/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/esm/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/esm/primitives/SecondaryButtonPrimitive.js

@@ -1,22 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { theme as defaultTheme } from '../Admin';
-const SecondaryButtonPrimitive = ({ onClick, label, theme = defaultTheme }) => {
+import { defaultTheme } from '../Admin';
+const SecondaryButtonPrimitive = ({ onClick, label, theme = defaultTheme, disabled, style, }) => {
     return (_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 }));
 };
 export default SecondaryButtonPrimitive;

package/dist/esm/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/esm/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/esm/primitives/TextInputPrimitive.js

@@ -1,18 +1,62 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { theme as defaultTheme } from '../Admin';
-const TextInputPrimitive = ({ onChange, value, placeholder, theme = defaultTheme, disabled = false, width = '250px', password = false, }) => {
+import React, { forwardRef } from 'react';
+import { defaultTheme } from '../Admin';
+const TextInputPrimitive = forwardRef(({ onChange, value, placeholder, theme = defaultTheme, disabled = false, 
+// width = '250px',
+width, password = false, style, number = false, min = 0, max, step = 1, }, ref) => {
     const [showPassword, setShowPassword] = React.useState(!password);
-    return (_jsxs("div", { style: { position: 'relative' }, children: [_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 (_jsxs("div", { style: { position: 'relative', width: width || '100%' }, children: [_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,
@@ -21,7 +65,8 @@ const TextInputPrimitive = ({ onChange, value, placeholder, theme = defaultTheme
                     borderStyle: 'solid',
                     borderRadius: '6px',
                     fontSize: 14,
-                }, type: showPassword ? 'text' : 'password', disabled: disabled, onChange: onChange, value: value, placeholder: placeholder }), password ? (_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 ? (_jsx("div", { style: {
                     position: 'absolute',
                     right: '8px',
                     bottom: '6px',
@@ -31,6 +76,26 @@ const TextInputPrimitive = ({ onChange, value, placeholder, theme = defaultTheme
                     boxSizing: 'content-box',
                 }, onClick: () => {
                     setShowPassword(!showPassword);
-                }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_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" }), _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: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_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" }), _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 ? (_jsxs("div", { style: {
+                    position: 'absolute',
+                    right: '4px',
+                    top: '4px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: 'calc(100% - 8px)',
+                    userSelect: 'none',
+                }, children: [_jsx("div", { style: {
+                            cursor: disabled ? 'not-allowed' : 'pointer',
+                            height: '50%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            opacity: disabled ? 0.5 : 1,
+                        }, onClick: incrementValue, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", fill: theme?.primaryTextColor || 'currentColor', viewBox: "0 0 16 16", children: _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" }) }) }), _jsx("div", { style: {
+                            cursor: disabled ? 'not-allowed' : 'pointer',
+                            height: '50%',
+                            display: 'flex',
+                            alignItems: 'center',
+                            opacity: disabled ? 0.5 : 1,
+                        }, onClick: decrementValue, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", fill: theme?.primaryTextColor || 'currentColor', viewBox: "0 0 16 16", children: _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] }));
+});
 export default TextInputPrimitive;

package/dist/esm/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

package/dist/esm/primitives/TogglePrimitive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TogglePrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TogglePrimitive.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,eAAe;WAAiC,GAAG;aAAW,GAAG;6CAiEtE,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"TogglePrimitive.d.ts","sourceRoot":"","sources":["../../../src/primitives/TogglePrimitive.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,QAAA,MAAM,eAAe,yCAKlB;IACD,KAAK,EAAE,OAAO,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,4CAoEA,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/esm/primitives/TogglePrimitive.js

@@ -1,22 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TogglePrimitive = ({ value, onClick }) => {
+const TogglePrimitive = ({ value, onClick, style, disabled, }) => {
     const toggleStyle = {
         container: {
+            transformOrigin: 'top left',
             display: 'inline-block',
             position: 'relative',
-            width: '50px',
-            height: '30px',
+            width: '30px',
+            height: '18px',
             borderRadius: '24px',
             backgroundColor: value ? '#212121' : '#ccc',
             cursor: 'pointer',
             transition: 'background-color 0.4s',
+            opacity: disabled ? 0.5 : 1,
+            ...style,
         },
         circle: {
             position: 'absolute',
             top: '3px',
-            left: value ? '23px' : '3px',
-            width: '24px',
-            height: '24px',
+            left: value ? '15px' : '3px',
+            width: '12px',
+            height: '12px',
             borderRadius: '50%',
             backgroundColor: '#FFF',
             transition: 'left 0.4s',
@@ -33,7 +36,7 @@ const TogglePrimitive = ({ value, onClick }) => {
             color: '#FFF',
         },
     };
-    return (_jsxs("div", { style: toggleStyle.container, onClick: onClick, "aria-checked": value, role: "switch", "aria-label": "Toggle between dark and light mode", children: [_jsx("div", { style: toggleStyle.circle }), value ? (_jsx("div", { style: {
+    return (_jsxs("div", { style: toggleStyle.container, onClick: disabled ? () => { } : onClick, "aria-checked": value, role: "switch", "aria-label": "Toggle", children: [_jsx("div", { style: toggleStyle.circle }), value ? (_jsx("div", { style: {
                     ...toggleStyle.icon,
                     left: '35px',
                     color: '#FFC107',

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

@@ -2,6 +2,6 @@ export { default as TextInputPrimitive } from './TextInputPrimitive';
 export { default as ButtonPrimitive } from './ButtonPrimitive';
 export { default as SecondaryButtonPrimitive } from './SecondaryButtonPrimitive';
 export { default as ModalPrimitive } from './ModalPrimitive';
-export { default as SelectPrimitive } from './SelectPrimitive';
 export { default as HeaderPrimitive } from './HeaderPrimitive';
+export { default as CheckboxPrimitive } from './CheckboxPrimitive';
 //# sourceMappingURL=index.d.ts.map