@zuzjs/ui 0.7.4 → 0.7.6

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

@@ -0,0 +1,461 @@
+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/cjs/src/hooks/index.d.ts

@@ -0,0 +1,21 @@
+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/cjs/src/hooks/index.js

@@ -0,0 +1,21 @@
+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/cjs/src/hooks/useAnchorPosition.d.ts

@@ -0,0 +1,14 @@
+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/cjs/src/hooks/useAnchorPosition.js

@@ -0,0 +1,44 @@
+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/cjs/src/hooks/useBase.d.ts

@@ -0,0 +1,8 @@
+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/cjs/src/hooks/useBase.js

@@ -0,0 +1,103 @@
+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;