@zuzjs/ui 0.10.6 → 0.10.7

package/dist/esm/src/funs/stylesheet.js

@@ -1,461 +0,0 @@
-export const cssProps = {
-    "alignContent": "align-content",
-    "alignItems": "align-items",
-    "alignSelf": "align-self",
-    //Animations
-    "animation": "animation",
-    "animationDelay": "animation-delay",
-    "animationDirection": "animation-direction",
-    "animationDuration": "animation-duration",
-    "animationFillMode": "animation-fill-mode",
-    "animationIterationCount": "animation-iteration-count",
-    "animationName": "animation-name",
-    "animationPlayState": "animation-play-state",
-    "animationTimingFunction": "animation-timing-function",
-    //Backgrounds
-    "background": "background",
-    "bg": "background",
-    "backgroundColor": "background-color",
-    "backgroundImage": "background-image",
-    "bgi": "background-image",
-    "backgroundOrigin": "background-origin",
-    "backgroundPosition": "background-position",
-    "backgroundRepeat": "background-repeat",
-    "backgroundSize": "background-size",
-    "backfaceVisibility": "backface-visibility",
-    "backgroundAttachment": "background-attachment",
-    "backgroundBlendMode": "background-blend-mode",
-    "backgroundClip": "background-clip",
-    "bg-clip": "background-clip",
-    //Borders
-    "border": "border",
-    "borderBottom": "border-bottom",
-    "borderBottomColor": "border-bottom-color",
-    "borderBottomStyle": "border-bottom-style",
-    "borderBottomWidth": "border-bottom-width",
-    "borderCollapse": "border-collapse",
-    "borderColor": "border-color",
-    "borderImage": "border-image",
-    "borderImageOutset": "border-image-outset",
-    "borderImageRepeat": "border-image-repeat",
-    "borderImageSlice": "border-image-slice",
-    "borderImageSource": "border-image-source",
-    "borderImageWidth": "border-image-width",
-    "borderLeft": "border-left",
-    "borderLeftColor": "border-left-color",
-    "borderLeftStyle": "border-left-style",
-    "borderLeftWidth": "border-left-width",
-    "borderRight": "border-right",
-    "borderRightColor": "border-right-color",
-    "borderRightStyle": "border-right-style",
-    "borderRightWidth": "border-right-width",
-    "borderSpacing": "border-spacing",
-    "borderStyle": "border-style",
-    "borderTop": "border-top",
-    "borderTopColor": "border-top-color",
-    "borderTopStyle": "border-top-style",
-    "borderTopWidth": "border-top-width",
-    "borderWidth": "border-width",
-    //Radius
-    "borderRadius": "border-radius",
-    "r": "border-radius",
-    "borderTopLeftRadius": "border-top-left-radius",
-    "rtl": "border-top-left-radius",
-    "borderTopRightRadius": "border-top-right-radius",
-    "rtr": "border-top-right-radius",
-    "borderBottomLeftRadius": "border-bottom-left-radius",
-    "rbl": "border-bottom-left-radius",
-    "borderBottomRightRadius": "border-bottom-right-radius",
-    "rbr": "border-bottom-right-radius",
-    "bottom": "bottom",
-    "boxDecorationBreak": "box-decoration-break",
-    "boxShadow": "box-shadow",
-    "shadow": "box-shadow",
-    "boxSizing": "box-sizing",
-    "captionSide": "caption-side",
-    "caretColor": "caret-color",
-    "@charset": "@charset",
-    "clear": "clear",
-    "clip": "clip-path",
-    "clipPath": "clip-path",
-    "color": "color",
-    "c": "color",
-    "columnCount": "column-count",
-    "columnFill": "column-fill",
-    "columnGap": "column-gap",
-    "colGap": "column-gap",
-    "columnRule": "column-rule",
-    "columnRuleColor": "column-rule-color",
-    "columnRuleStyle": "column-rule-style",
-    "columnRuleWidth": "column-rule-width",
-    "columnSpan": "column-span",
-    "columnWidth": "column-width",
-    "columns": "columns",
-    "content": "content",
-    "counterIncrement": "counter-increment",
-    "counterReset": "counter-reset",
-    "cursor": "cursor",
-    "pointer": "pointer",
-    "direction": "direction",
-    "display": "display",
-    "emptyCells": "empty-cells",
-    "filter": "filter",
-    "flex": "flex",
-    "flexBasis": "flex-basis",
-    "flexDirection": "flex-direction",
-    "flexDir": "flex-direction",
-    "flexFlow": "flex-flow",
-    "flexGrow": "flex-grow",
-    "flexShrink": "flex-shrink",
-    "flexWrap": "flex-wrap",
-    "float": "float",
-    "font": "font",
-    "fontFamily": "font-family",
-    "fontKerning": "font-kerning",
-    "s": "font-size",
-    "fontSize": "font-size",
-    "fontSizeAdjust": "font-size-adjust",
-    "fontStretch": "font-stretch",
-    "fontStyle": "font-style",
-    "fontVariant": "font-variant",
-    "bold": "bold",
-    "fontWeight": "font-weight",
-    "b": "font-weight",
-    "gap": "gap",
-    "grid": "grid",
-    "gridArea": "grid-area",
-    "gridAutoColumns": "grid-auto-columns",
-    "gridAutoFlow": "grid-auto-flow",
-    "gridAutoRows": "grid-auto-rows",
-    "gridColumn": "grid-column",
-    "gridColumnEnd": "grid-column-end",
-    "gridColumnGap": "grid-column-gap",
-    "gridColumnStart": "grid-column-start",
-    "gridGap": "grid-gap",
-    "gridRow": "grid-row",
-    "gridRowEnd": "grid-row-end",
-    "gridRowGap": "grid-row-gap",
-    "gridRowStart": "grid-row-start",
-    "gridTemplate": "grid-template",
-    "gridTemplateAreas": "grid-template-areas",
-    "grid-areas": "grid-template-areas",
-    "gridTemplateColumns": "grid-template-columns",
-    "grid-cols": "grid-template-columns",
-    "gridTemplateRows": "grid-template-rows",
-    "grid-rows": "grid-template-rows",
-    "hangingPunctuation": "hanging-punctuation",
-    "hyphens": "hyphens",
-    "isolation": "isolation",
-    "justifyContent": "justify-content",
-    "left": "left",
-    "letterSpacing": "letter-spacing",
-    "lineHeight": "line-height",
-    "lh": "line-height",
-    "listStyle": "list-style",
-    "listStyleImage": "list-style-image",
-    "listStylePosition": "list-style-position",
-    "listStyleType": "list-style-type",
-    "aspectRatio": "aspect-ratio",
-    //Margin
-    "margin": "margin",
-    "m": "margin",
-    "marginBottom": "margin-bottom",
-    "mb": "margin-bottom",
-    "marginLeft": "margin-left",
-    "ml": "margin-left",
-    "marginRight": "margin-right",
-    "mr": "margin-right",
-    "marginTop": "margin-top",
-    "mt": "margin-top",
-    //Height
-    "height": "height",
-    "h": "height",
-    "minHeight": "min-height",
-    "minH": "min-height",
-    "maxHeight": "max-height",
-    "maxH": "max-height",
-    //Width
-    "width": "width",
-    "w": "width",
-    "minWidth": "min-width",
-    "minW": "min-width",
-    "maxWidth": "max-width",
-    "maxW": "max-width",
-    "mixBlendMode": "mix-blend-mode",
-    "objectFit": "object-fit",
-    "objectPosition": "object-position",
-    "opacity": "opacity",
-    "order": "order",
-    "outline": "outline",
-    "outlineColor": "outline-color",
-    "outlineOffset": "outline-offset",
-    "outlineStyle": "outline-style",
-    "outlineWidth": "outline-width",
-    "overflow": "overflow",
-    "overflowX": "overflow-x",
-    "overflowY": "overflow-y",
-    "padding": "padding",
-    "p": "padding",
-    "paddingBottom": "padding-bottom",
-    "pb": "padding-bottom",
-    "paddingLeft": "padding-left",
-    "pl": "padding-left",
-    "paddingRight": "padding-right",
-    "pr": "padding-right",
-    "paddingTop": "padding-top",
-    "pt": "padding-top",
-    "pageBreakAfter": "page-break-after",
-    "pageBreakBefore": "page-break-before",
-    "pageBreakInside": "page-break-inside",
-    "perspective": "perspective",
-    "perspectiveOrigin": "perspective-origin",
-    "pointerEvents": "pointer-events",
-    "position": "position",
-    "quotes": "quotes",
-    "resize": "resize",
-    "right": "right",
-    "scrollBehavior": "scroll-behavior",
-    "tabSize": "tab-size",
-    "tableLayout": "table-layout",
-    "align": "text-align",
-    "textAlign": "text-align",
-    "textAlignLast": "text-align-last",
-    "textDecoration": "text-decoration",
-    "td": "text-decoration",
-    "textDecorationColor": "text-decoration-color",
-    "textDecorationLine": "text-decoration-line",
-    "textDecorationStyle": "text-decoration-style",
-    "textIndent": "text-indent",
-    "textJustify": "text-justify",
-    "textOverflow": "text-overflow",
-    "textShadow": "text-shadow",
-    "textTransform": "text-transform",
-    "top": "top",
-    "transform": "transform",
-    "transform(2D)": "transform(2D)",
-    "transformOrigin": "transform-origin",
-    "origin": "transform-origin",
-    "transformStyle": "transform-style",
-    "transition": "transition",
-    "transitionDelay": "transition-delay",
-    "transitionDuration": "transition-duration",
-    "transitionProperty": "transition-property",
-    "transitionTimingFunction": "transition-timing-function",
-    "unicodeBidi": "unicode-bidi",
-    "userSelect": "user-select",
-    "verticalAlign": "vertical-align",
-    "visibility": "visibility",
-    "whiteSpace": "white-space",
-    "wordBreak": "word-break",
-    "wordSpacing": "word-spacing",
-    "textWrap": "textWrap",
-    "wordWrap": "word-wrap",
-    "writingMode": "writing-mode",
-    "zIndex": "z-index",
-    "backdropFilter": "backdrop-filter",
-    "placeItems": "place-items",
-    "placeContent": "place-content",
-};
-export const cssDirect = {
-    "extend": "@extend __VALUE__;",
-    "content": "content:'';",
-    "bold": "font-weight: bold;",
-    "grid": "display:grid;",
-    "flex": "display:flex;",
-    "wrap": "flex-wrap:wrap;",
-    "cols": "flex-direction:column;",
-    "cols-reverse": "flex-direction:column-reverse;",
-    "cols-rev": "flex-direction:column-reverse;",
-    "ass": "align-self:flex-start;",
-    "ais": "align-items:flex-start;",
-    "aib": "align-items:baseline;",
-    "aic": "align-items:center;",
-    "align-items-center": "align-items:center;",
-    "aie": "align-items:flex-end;",
-    "jcs": "justify-content:flex-start;",
-    "jcc": "justify-content:center;",
-    "jce": "justify-content:flex-end;",
-    "jcb": "justify-content:space-between;",
-    "jca": "justify-content:space-around;",
-    "pis": "place-items:start",
-    "pie": "place-items:end",
-    "pic": "place-items:center",
-    "pist": "place-items:stretch",
-    "pcs": "place-content:start",
-    "pcc": "place-content:center",
-    "pce": "place-content:end",
-    "pcst": "place-content:stretch",
-    "tal": "text-align: left;",
-    "tac": "text-align: center;",
-    "tar": "text-align: right;",
-    "tas": "text-align: justify;",
-    "fill": "top: 0px;left: 0px;right: 0px;bottom: 0px;",
-    "rel": "position:relative;",
-    "abs": "position:absolute;",
-    "fixed": "position:fixed;",
-    "sticky": "position:sticky;",
-    "abc": "top: 50%;left: 50%;transform: translate(-50%, -50%);",
-    "tdn": "text-decoration:none;",
-    "tdu": "text-decoration:underline;",
-    "nous": "user-select:none;",
-    "nope": "pointer-events:none;",
-    "ph": "padding-left:__VALUE__;padding-right:__VALUE__;",
-    "pv": "padding-top:__VALUE__;padding-bottom:__VALUE__;",
-    "mh": "margin-left:__VALUE__;margin-right:__VALUE__;",
-    "mv": "margin-top:__VALUE__;margin-bottom:__VALUE__;",
-    "translate": "transform: translate(__VALUE__);",
-    "translateX": "transform: translateX(__VALUE__);",
-    "translateY": "transform: translateY(__VALUE__);",
-    "x": "transform: translateX(__VALUE__);",
-    "y": "transform: translateY(__VALUE__);",
-    "rotate": "transform: rotate(__VALUE__);",
-    "rotateX": "transform: rotateX(__VALUE__);",
-    "rotateY": "transform: rotatY(__VALUE__);",
-    "rotateZ": "transform: rotateZ(__VALUE__);",
-    "rotate3d": "transform: rotate3d(__X__, __Y__, __Z__, __A__);",
-    "scale": "transform: scale(__VALUE__);",
-    "view": "perspective: __VALUE__;",
-    "3d": "transform-style: preserve-3d;",
-    "anim": "transition: all __VALUE__ __CURVE__ __DELAY__;",
-    "hide": "display: none;",
-    "block": "display: block;",
-    "inlineblock": "display: inline-block;",
-    "blur": "filter: blur(__VALUE__);",
-    "saturate": "filter: saturate(__VALUE__);",
-    "brightness": "filter: brightness(__VALUE__);",
-    "ratio": "aspect-ratio: __VALUE__;",
-    "center-h": "left: 50%;transform: translateX(-50%);",
-    "center-v": "top: 50%;transform: translateY(-50%);",
-    "no-overflow": "overflow: hidden;",
-    "overflow-x": "overflow-x: auto;",
-    "overflow-y": "overflow-x: auto;",
-    "space-pre": "white-space: pre;",
-    "white-space-pre": "white-space: pre;",
-    "text-wrap": "width: 98%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;",
-    "text-clip": "color: transparent;background-clip: text;-webkit-background-clip: text;",
-};
-export const cssPropsWithColor = [
-    // Regular CSS keys
-    "color",
-    "bg",
-    "background",
-    "background-color",
-    "border",
-    "border-color",
-    "border-top-color",
-    "border-right-color",
-    "border-bottom-color",
-    "border-left-color",
-    "outline-color",
-    "text-decoration-color",
-    "text-shadow",
-    "box-shadow",
-    "fill",
-    "stroke",
-    "stop-color",
-    "caret-color",
-    "column-rule-color",
-    "text-emphasis-color",
-    "accent-color",
-    "border-block-color",
-    "border-inline-color",
-    "column-fill",
-    "marker",
-    "scrollbar-color",
-    "outline-offset-color",
-    // JSX camelCase keys
-    "backgroundColor",
-    "borderColor",
-    "borderTopColor",
-    "borderRightColor",
-    "borderBottomColor",
-    "borderLeftColor",
-    "outlineColor",
-    "textDecorationColor",
-    "textShadow",
-    "boxShadow",
-    "fill",
-    "stroke",
-    "stopColor",
-    "caretColor",
-    "columnRuleColor",
-    "textEmphasisColor",
-    "accentColor",
-    "borderBlockColor",
-    "borderInlineColor",
-    "columnFill",
-    "marker",
-    "scrollbarColor",
-    "outlineOffsetColor",
-];
-export const cssAnimationCurves = {
-    ease: 'ease',
-    in: 'ease-in',
-    out: 'ease-out',
-    inout: 'ease-in-out',
-    linear: 'linear',
-    start: 'step-start',
-    end: 'step-end',
-    steps: 'steps',
-    cubic: 'cubic-bezier',
-    initial: 'initial',
-    inherit: 'inherit'
-};
-export const cssAnimationFunctions = {
-    animation: 'animation',
-    name: 'animation-name',
-    duration: 'animation-duration',
-    timing: 'animation-timing-function',
-    delay: 'animation-delay',
-    count: 'animation-iteration-count',
-    direction: 'animation-direction',
-    fill: 'animation-fill-mode',
-    state: 'animation-play-state',
-    frames: 'keyframes'
-};
-export const cssTransformKeys = [
-    'translate',
-    'translateX',
-    'translateY',
-    'translateZ',
-    'scale',
-    'scaleX',
-    'scaleY',
-    'scaleZ',
-    'rotate',
-    'rotateX',
-    'rotateY',
-    'rotateZ',
-    'skew',
-    'skewX',
-    'skewY',
-    'perspective',
-    'matrix',
-    'matrix3d',
-];
-export const cssFilterKeys = [
-    'blur',
-    'brightness',
-    'contrast',
-    'drop-shadow',
-    'grayscale',
-    'hue-rotate',
-    'invert',
-    'saturate',
-    'sepia',
-];
-export const cssWithKeys = {
-    w: `width`,
-    h: `height`,
-    x: `translateX`,
-    y: `translateY`,
-    z: `translateZ`,
-    r: `rotate`,
-    rx: `rotateX`,
-    ry: `rotateY`,
-    rz: `rotateZ`,
-    s: `scale`,
-    sx: `scaleX`,
-    sy: `scaleY`,
-    sz: `scaleZ`,
-};

package/dist/esm/src/hooks/index.d.ts

@@ -1,21 +0,0 @@
-export { default as useAnchorPosition } from './useAnchorPosition';
-export { default as useBase } from './useBase';
-export { default as useCalendar } from './useCalendar';
-export { useColorScheme } from './useColorScheme';
-export { default as useContextMenu } from './useContextMenu';
-export { type IDBOptions, type IDBSchema, default as useDB } from './useDB';
-export { default as useDebounce } from './useDebounce';
-export { default as useDevice } from './useDevice';
-export { default as useDimensions } from './useDimensions';
-export { default as useDrag } from './useDrag';
-export { type DragOptions } from './useDrag';
-export { default as useImage } from './useImage';
-export { default as useIntersectionObserver } from './useIntersectionObserver';
-export { default as useKeyBind } from './useKeyBind';
-/**
- * @deprecated use useDelayed hook instead
- */
-export { default as useMounted } from './useMounted';
-export { default as useDelayed } from './useMounted';
-export { default as useNetworkStatus } from './useNetworkStatus';
-export { default as useResizeObserver } from './useResizeObserver';

package/dist/esm/src/hooks/index.js

@@ -1,21 +0,0 @@
-export { default as useAnchorPosition } from './useAnchorPosition';
-export { default as useBase } from './useBase';
-export { default as useCalendar } from './useCalendar';
-export { useColorScheme } from './useColorScheme';
-export { default as useContextMenu } from './useContextMenu';
-export { default as useDB } from './useDB';
-export { default as useDebounce } from './useDebounce';
-export { default as useDevice } from './useDevice';
-export { default as useDimensions } from './useDimensions';
-export { default as useDrag } from './useDrag';
-export { default as useImage } from './useImage';
-export { default as useIntersectionObserver } from './useIntersectionObserver';
-export { default as useKeyBind } from './useKeyBind';
-/**
- * @deprecated use useDelayed hook instead
- */
-export { default as useMounted } from './useMounted';
-export { default as useDelayed } from './useMounted';
-export { default as useNetworkStatus } from './useNetworkStatus';
-export { default as useResizeObserver } from './useResizeObserver';
-// export { default as useDomSelector } from './useDomSelector';

package/dist/esm/src/hooks/useAnchorPosition.d.ts

@@ -1,14 +0,0 @@
-import { RefObject } from "react";
-export type AnchorOptions = {
-    offsetX?: number;
-    offsetY?: number;
-    overflow?: boolean;
-};
-declare const useAnchorPosition: (parent?: HTMLElement, event?: MouseEvent, options?: AnchorOptions) => {
-    position: {
-        top: number;
-        left: number;
-    };
-    targetRef: RefObject<HTMLDivElement | null>;
-};
-export default useAnchorPosition;

package/dist/esm/src/hooks/useAnchorPosition.js

@@ -1,44 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-const useAnchorPosition = (parent, event, options = {}) => {
-    const [position, setPosition] = useState({ top: 0, left: 0 });
-    const { offsetX = 0, offsetY = 0, overflow = true } = options;
-    const targetRef = useRef(null);
-    const updatePosition = useCallback(() => {
-        let top = 0;
-        let left = 0;
-        if (event) {
-            // Position based on mouse event
-            top = event.clientY + offsetY;
-            left = event.clientX + offsetX;
-        }
-        else if (parent) {
-            // Position based on parent element
-            const rect = parent.getBoundingClientRect();
-            top = rect.bottom + offsetY;
-            left = rect.left + offsetX;
-        }
-        // Prevent overflow
-        if (overflow && targetRef.current) {
-            const popperRect = targetRef.current.getBoundingClientRect();
-            const { innerWidth, innerHeight } = window;
-            if (left + popperRect.width > innerWidth) {
-                left = innerWidth - popperRect.width - 10; // Add padding
-            }
-            if (top + popperRect.height > innerHeight) {
-                top = innerHeight - popperRect.height - 10;
-            }
-        }
-        setPosition({ top, left });
-    }, [event, parent, offsetX, offsetY, overflow]);
-    useEffect(() => {
-        updatePosition();
-        window.addEventListener("resize", updatePosition);
-        window.addEventListener("scroll", updatePosition);
-        return () => {
-            window.removeEventListener("resize", updatePosition);
-            window.removeEventListener("scroll", updatePosition);
-        };
-    }, [updatePosition]);
-    return { position, targetRef };
-};
-export default useAnchorPosition;

package/dist/esm/src/hooks/useBase.d.ts

@@ -1,8 +0,0 @@
-import { ComponentPropsWithRef, CSSProperties, JSX } from "react";
-import { Props } from "../types";
-declare const useBase: <T extends keyof JSX.IntrinsicElements>(props: Props<T>) => {
-    style: CSSProperties;
-    className: string;
-    rest: ComponentPropsWithRef<T>;
-};
-export default useBase;

package/dist/esm/src/hooks/useBase.js

@@ -1,103 +0,0 @@
-import { cleanProps, css } from "../funs";
-import { buildWithStyles, getAnimationCurve, getAnimationTransition } from "../funs/css";
-import { cssFilterKeys, cssTransformKeys, cssWithKeys } from "../funs/stylesheet";
-import useDrag from "./useDrag";
-const buildSkeletonStyle = (s) => {
-    const makeValue = (v, unit = `px`) => {
-        return v ?
-            `string` == typeof v ? v : `${v}${unit}`
-            : `inherit`;
-    };
-    const style = {};
-    if (s.radius) {
-        style.borderRadius = makeValue(s.radius);
-    }
-    if (s.size) {
-        style.width = style.minWidth = style.maxWidth = style.height = style.minHeight = style.maxHeight = makeValue(s.size);
-    }
-    else if (s.width || s.height) {
-        if (s.width) {
-            style.width = style.minWidth = style.maxWidth = makeValue(s.width);
-        }
-        if (s.height) {
-            style.height = style.minHeight = style.maxHeight = makeValue(s.height);
-        }
-    }
-    else {
-        style.minWidth = style.minHeight = s.defaultSize || `100%`;
-    }
-    return style;
-};
-const useBase = (props) => {
-    const { as, fx, animate, skeleton, className, shimmer, propsToRemove, draggable, dragOptions, ...rest } = props || {};
-    let cx = [];
-    if (as) {
-        cx = css().Build(`string` == typeof as ? as : as.join(` `)).cx;
-    }
-    const { transition, from, to, when, duration, delay, curve } = fx || animate || {};
-    let _style = {};
-    if (undefined === when) {
-        _style = transition ? getAnimationTransition(transition, true) : { ...from, ...to };
-    }
-    else if (true === when) {
-        _style = transition ? getAnimationTransition(transition, false) : { ...(to || {}) };
-    }
-    else {
-        _style = transition ? getAnimationTransition(transition, false, true) : from || {};
-    }
-    const _transition = {};
-    if (transition || (from && to)) {
-        // { transition: `all ${duration || `0.2`}s ${getAnimationCurve(curve)} ${delay || 0}s` }
-        const _curve = getAnimationCurve(curve);
-        const _transitionList = [];
-        Object.keys(_style).forEach(ck => {
-            let prop = ck;
-            let _subTrans = ck;
-            if (prop in cssWithKeys) {
-                _subTrans = cssTransformKeys.includes(cssWithKeys[prop].toString()) ? `transform`
-                    : cssFilterKeys.includes(cssWithKeys[prop].toString()) ? `filter`
-                        : _subTrans;
-            }
-            else if (cssTransformKeys.includes(prop)) {
-                _subTrans = `transform`;
-            }
-            const _newTransition = `${_subTrans} ${duration || `0.2`}s ${_curve} ${delay || 0}s`;
-            if (!_transitionList.includes(_newTransition))
-                _transitionList.push(_newTransition);
-        });
-        _transition.transition = _transitionList.join(`, `);
-    }
-    // console.log(_style, _transition)
-    const drag = useDrag(dragOptions);
-    let dragProps = {};
-    let dragStyle = {};
-    if (draggable) {
-        dragProps = {
-            onMouseDown: drag.onMouseDown,
-        };
-        dragStyle = {
-            transform: `translate(${drag.position.x}px, ${drag.position.y}px)`,
-        };
-    }
-    // console.log(`x`, buildWithStyles(_style),)
-    return {
-        style: {
-            ...buildWithStyles(_style),
-            ..._transition,
-            ...(skeleton?.enabled ? buildSkeletonStyle(skeleton) : {}),
-            ...dragStyle,
-        },
-        className: [
-            className,
-            ...cx,
-            skeleton?.enabled ? `--skeleton` : ``,
-            shimmer ? `--shimmer --${shimmer.toLowerCase()}` : ``,
-            draggable ? `--draggable` : ``,
-        ].join(' ').trim(),
-        rest: {
-            ...dragProps,
-            ...cleanProps(rest, propsToRemove ? [...propsToRemove, `skeleton`] : [`skeleton`]),
-        },
-    };
-};
-export default useBase;