@xanui/core 1.0.0

package/Transition/variants.d.ts

@@ -0,0 +1,131 @@
+import { TransitionElementProps } from ".";
+export declare const slideDown: (_arg: TransitionElementProps) => {
+    from: {
+        transform: string;
+    };
+    to: {
+        transform: string;
+    };
+};
+export declare const slideUp: (_arg: TransitionElementProps) => {
+    from: {
+        transform: string;
+    };
+    to: {
+        transform: string;
+    };
+};
+export declare const slideRight: (_arg: TransitionElementProps) => {
+    from: {
+        transform: string;
+    };
+    to: {
+        transform: string;
+    };
+};
+export declare const slideLeft: (_arg: TransitionElementProps) => {
+    from: {
+        transform: string;
+    };
+    to: {
+        transform: string;
+    };
+};
+export declare const fade: (_arg: TransitionElementProps) => {
+    from: {
+        opacity: number;
+    };
+    to: {
+        opacity: number;
+    };
+};
+export declare const fadeDown: (_arg: TransitionElementProps) => {
+    from: {
+        transform: string;
+        opacity: number;
+    };
+    to: {
+        transform: string;
+        opacity: number;
+    };
+};
+export declare const fadeUp: (_arg: TransitionElementProps) => {
+    from: {
+        transform: string;
+        opacity: number;
+    };
+    to: {
+        transform: string;
+        opacity: number;
+    };
+};
+export declare const fadeRight: (_arg: TransitionElementProps) => {
+    from: {
+        transform: string;
+        opacity: number;
+    };
+    to: {
+        transform: string;
+        opacity: number;
+    };
+};
+export declare const fadeLeft: (_arg: TransitionElementProps) => {
+    from: {
+        transform: string;
+        opacity: number;
+    };
+    to: {
+        transform: string;
+        opacity: number;
+    };
+};
+export declare const grow: (_arg: TransitionElementProps) => {
+    from: {
+        transform: string;
+        opacity: number;
+    };
+    to: {
+        transform: string;
+        opacity: number;
+    };
+};
+export declare const zoom: (_arg: TransitionElementProps) => {
+    from: {
+        transform: string;
+        opacity: number;
+    };
+    to: {
+        transform: string;
+        opacity: number;
+    };
+};
+export declare const zoomOver: (_arg: TransitionElementProps) => {
+    from: {
+        transform: string;
+        opacity: number;
+    };
+    to: {
+        transform: string;
+        opacity: number;
+    };
+};
+export declare const collapsVerticle: (_arg: TransitionElementProps) => {
+    from: {
+        height: string;
+        overflow: string;
+    };
+    to: {
+        height: string;
+        overflow: string;
+    };
+};
+export declare const collapsHorizental: (_arg: TransitionElementProps) => {
+    from: {
+        width: string;
+        overflow: string;
+    };
+    to: {
+        width: string;
+        overflow: string;
+    };
+};

package/Transition/variants.js

@@ -0,0 +1,175 @@
+const slideDown = (_arg) => {
+  return {
+    from: {
+      transform: `translateY(-${_arg.height}px)!important`
+    },
+    to: {
+      transform: `translateY(0)!important`
+    }
+  };
+};
+const slideUp = (_arg) => {
+  return {
+    from: {
+      transform: `translateY(${_arg.height}px)!important`
+    },
+    to: {
+      transform: `translateY(0)!important`
+    }
+  };
+};
+const slideRight = (_arg) => {
+  return {
+    from: {
+      transform: `translateX(-${_arg.width}px)!important`
+    },
+    to: {
+      transform: `translateX(0)!important`
+    }
+  };
+};
+const slideLeft = (_arg) => {
+  return {
+    from: {
+      transform: `translateX(${_arg.width}px)!important`
+    },
+    to: {
+      transform: `translateX(0)!important`
+    }
+  };
+};
+const fade = (_arg) => {
+  return {
+    from: {
+      opacity: 0
+    },
+    to: {
+      opacity: 1
+    }
+  };
+};
+const fadeDown = (_arg) => {
+  return {
+    from: {
+      transform: `translateY(-30px)!important`,
+      opacity: 0
+    },
+    to: {
+      transform: `translateY(0)!important`,
+      opacity: 1
+    }
+  };
+};
+const fadeUp = (_arg) => {
+  return {
+    from: {
+      transform: `translateY(30px)!important`,
+      opacity: 0
+    },
+    to: {
+      transform: `translateY(0)!important`,
+      opacity: 1
+    }
+  };
+};
+const fadeRight = (_arg) => {
+  return {
+    from: {
+      transform: `translateX(-30px)!important`,
+      opacity: 0
+    },
+    to: {
+      transform: `translateX(0)!important`,
+      opacity: 1
+    }
+  };
+};
+const fadeLeft = (_arg) => {
+  return {
+    from: {
+      transform: `translateX(30px)!important`,
+      opacity: 0
+    },
+    to: {
+      transform: `translateX(0)!important`,
+      opacity: 1
+    }
+  };
+};
+const grow = (_arg) => {
+  return {
+    from: {
+      transform: "scale(.8, .6)!important",
+      opacity: 0
+    },
+    to: {
+      transform: "scale(1)!important",
+      opacity: 1
+    }
+  };
+};
+const zoom = (_arg) => {
+  return {
+    from: {
+      transform: "scale(.8)!important",
+      opacity: 0
+    },
+    to: {
+      transform: "scale(1)!important",
+      opacity: 1
+    }
+  };
+};
+const zoomOver = (_arg) => {
+  return {
+    from: {
+      transform: "scale(1.2)!important",
+      opacity: 0
+    },
+    to: {
+      transform: "scale(1)!important",
+      opacity: 1
+    }
+  };
+};
+const collapsVerticle = (_arg) => {
+  return {
+    from: {
+      height: "0px!important",
+      overflow: "hidden"
+    },
+    to: {
+      height: _arg?.height ? _arg?.height + "px!important" : "auto",
+      overflow: "hidden"
+    }
+  };
+};
+const collapsHorizental = (_arg) => {
+  return {
+    from: {
+      width: "0px!important",
+      overflow: "hidden"
+    },
+    to: {
+      width: _arg?.width ? _arg?.width + "px!important" : "auto",
+      overflow: "hidden"
+    }
+  };
+};
+export {
+  collapsHorizental,
+  collapsVerticle,
+  fade,
+  fadeDown,
+  fadeLeft,
+  fadeRight,
+  fadeUp,
+  grow,
+  slideDown,
+  slideLeft,
+  slideRight,
+  slideUp,
+  zoom,
+  zoomOver
+};
+//# sourceMappingURL=variants.js.map

package/Transition/variants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/Transition/variants.ts"],
+  "sourcesContent": ["import { TransitionElementProps } from \".\"\n\nexport const slideDown = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            transform: `translateY(-${_arg.height}px)!important`,\n        },\n        to: {\n            transform: `translateY(0)!important`,\n        }\n    }\n}\n\nexport const slideUp = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            transform: `translateY(${_arg.height}px)!important`,\n        },\n        to: {\n            transform: `translateY(0)!important`,\n        }\n    }\n}\n\nexport const slideRight = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            transform: `translateX(-${_arg.width}px)!important`,\n        },\n        to: {\n            transform: `translateX(0)!important`,\n        }\n    }\n}\n\nexport const slideLeft = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            transform: `translateX(${_arg.width}px)!important`,\n        },\n        to: {\n            transform: `translateX(0)!important`,\n        }\n    }\n}\n\nexport const fade = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            opacity: 0\n        },\n        to: {\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeDown = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            transform: `translateY(-30px)!important`,\n            opacity: 0\n        },\n        to: {\n            transform: `translateY(0)!important`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeUp = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            transform: `translateY(30px)!important`,\n            opacity: 0\n        },\n        to: {\n            transform: `translateY(0)!important`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeRight = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            transform: `translateX(-30px)!important`,\n            opacity: 0\n        },\n        to: {\n            transform: `translateX(0)!important`,\n            opacity: 1\n        }\n    }\n}\n\nexport const fadeLeft = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            transform: `translateX(30px)!important`,\n            opacity: 0\n        },\n        to: {\n            transform: `translateX(0)!important`,\n            opacity: 1\n        }\n    }\n}\n\nexport const grow = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            transform: \"scale(.8, .6)!important\",\n            opacity: 0\n        },\n        to: {\n            transform: \"scale(1)!important\",\n            opacity: 1\n        }\n    }\n}\n\nexport const zoom = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            transform: \"scale(.8)!important\",\n            opacity: 0\n        },\n        to: {\n            transform: \"scale(1)!important\",\n            opacity: 1\n        }\n    }\n}\n\nexport const zoomOver = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            transform: \"scale(1.2)!important\",\n            opacity: 0\n        },\n        to: {\n            transform: \"scale(1)!important\",\n            opacity: 1\n        }\n    }\n}\n\nexport const collapsVerticle = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            height: 0 + \"px!important\",\n            overflow: \"hidden\"\n        },\n        to: {\n            height: _arg?.height ? _arg?.height + \"px!important\" : \"auto\",\n            overflow: \"hidden\"\n        }\n    }\n}\n\n\nexport const collapsHorizental = (_arg: TransitionElementProps) => {\n    return {\n        from: {\n            width: 0 + \"px!important\",\n            overflow: \"hidden\"\n        },\n        to: {\n            width: _arg?.width ? _arg?.width + \"px!important\" : \"auto\",\n            overflow: \"hidden\"\n        }\n    }\n}\n\n\n\n\n"],
+  "mappings": "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",
+  "names": []
+}

package/breakpoint/index.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from "react";
+import { BreakpointKeys } from "../css/types";
+export declare const BreakpointCtx: React.Context<BreakpointKeys>;
+export declare const BreakpointProvider: ({ children }: {
+    children?: ReactNode;
+}) => React.JSX.Element;

package/breakpoint/index.js

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import isWindow from "../isWindow";
+import { breakpoints } from "../css";
+const BreakpointCtx = React.createContext("xl");
+const getKey = () => {
+  const isWin = isWindow();
+  if (isWin) {
+    const width = window.innerWidth;
+    if (width < breakpoints.sm) {
+      return "xs";
+    } else if (width > breakpoints.xs && width < breakpoints.md) {
+      return "sm";
+    } else if (width > breakpoints.sm && width < breakpoints.lg) {
+      return "md";
+    } else if (width > breakpoints.md && width < breakpoints.xl) {
+      return "lg";
+    } else {
+      return "xl";
+    }
+  } else {
+    return "xl";
+  }
+};
+const BreakpointProvider = ({ children }) => {
+  const [current, setCurrent] = useState(getKey);
+  const handler = () => {
+    let c = getKey();
+    if (current !== c) {
+      setCurrent(c);
+    }
+  };
+  React.useEffect(() => {
+    window.removeEventListener("resize", handler);
+    window.addEventListener("resize", handler);
+    handler();
+    return () => {
+      window.removeEventListener("resize", handler);
+    };
+  }, [current]);
+  return /* @__PURE__ */ React.createElement(BreakpointCtx.Provider, { value: current }, children);
+};
+export {
+  BreakpointCtx,
+  BreakpointProvider
+};
+//# sourceMappingURL=index.js.map

package/breakpoint/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/breakpoint/index.tsx"],
+  "sourcesContent": ["import React, { ReactNode, useState } from \"react\";\nimport isWindow from \"../isWindow\";\nimport { breakpoints } from \"../css\";\nimport { BreakpointKeys } from \"../css/types\";\n\nexport const BreakpointCtx = React.createContext<BreakpointKeys>(\"xl\")\n\nconst getKey = (): BreakpointKeys => {\n    const isWin = isWindow()\n    if (isWin) {\n        const width = window.innerWidth\n        if (width < breakpoints.sm) {\n            return 'xs'\n        } else if (width > breakpoints.xs && width < breakpoints.md) {\n            return 'sm'\n        } else if (width > breakpoints.sm && width < breakpoints.lg) {\n            return 'md'\n        } else if (width > breakpoints.md && width < breakpoints.xl) {\n            return 'lg'\n        } else {\n            return 'xl'\n        }\n    } else {\n        return 'xl'\n    }\n}\n\nexport const BreakpointProvider = ({ children }: { children?: ReactNode }) => {\n    const [current, setCurrent] = useState<BreakpointKeys>(getKey)\n\n    const handler = () => {\n        let c = getKey()\n        if (current !== c) {\n            setCurrent(c)\n        }\n    }\n\n    React.useEffect(() => {\n        window.removeEventListener(\"resize\", handler)\n        window.addEventListener(\"resize\", handler)\n        handler()\n        return () => {\n            window.removeEventListener(\"resize\", handler)\n        }\n    }, [current])\n\n    return (\n        <BreakpointCtx.Provider value={current}>\n            {children}\n        </BreakpointCtx.Provider>\n    )\n}\n"],
+  "mappings": "AAAA,OAAO,SAAoB,gBAAgB;AAC3C,OAAO,cAAc;AACrB,SAAS,mBAAmB;AAGrB,MAAM,gBAAgB,MAAM,cAA8B,IAAI;AAErE,MAAM,SAAS,MAAsB;AACjC,QAAM,QAAQ,SAAS;AACvB,MAAI,OAAO;AACP,UAAM,QAAQ,OAAO;AACrB,QAAI,QAAQ,YAAY,IAAI;AACxB,aAAO;AAAA,IACX,WAAW,QAAQ,YAAY,MAAM,QAAQ,YAAY,IAAI;AACzD,aAAO;AAAA,IACX,WAAW,QAAQ,YAAY,MAAM,QAAQ,YAAY,IAAI;AACzD,aAAO;AAAA,IACX,WAAW,QAAQ,YAAY,MAAM,QAAQ,YAAY,IAAI;AACzD,aAAO;AAAA,IACX,OAAO;AACH,aAAO;AAAA,IACX;AAAA,EACJ,OAAO;AACH,WAAO;AAAA,EACX;AACJ;AAEO,MAAM,qBAAqB,CAAC,EAAE,SAAS,MAAgC;AAC1E,QAAM,CAAC,SAAS,UAAU,IAAI,SAAyB,MAAM;AAE7D,QAAM,UAAU,MAAM;AAClB,QAAI,IAAI,OAAO;AACf,QAAI,YAAY,GAAG;AACf,iBAAW,CAAC;AAAA,IAChB;AAAA,EACJ;AAEA,QAAM,UAAU,MAAM;AAClB,WAAO,oBAAoB,UAAU,OAAO;AAC5C,WAAO,iBAAiB,UAAU,OAAO;AACzC,YAAQ;AACR,WAAO,MAAM;AACT,aAAO,oBAAoB,UAAU,OAAO;AAAA,IAChD;AAAA,EACJ,GAAG,CAAC,OAAO,CAAC;AAEZ,SACI,oCAAC,cAAc,UAAd,EAAuB,OAAO,WAC1B,QACL;AAER;",
+  "names": []
+}

package/breakpoint/useBreakpoint.d.ts

@@ -0,0 +1,10 @@
+import { BreakpointKeys } from "../css/types";
+declare const useBreakpoint: () => {
+    value: BreakpointKeys;
+    is: (key: BreakpointKeys) => boolean;
+    isDown: (key: BreakpointKeys) => boolean;
+    isUp: (key: BreakpointKeys) => boolean;
+    isOrDown: (key: BreakpointKeys) => boolean;
+    isOrUp: (key: BreakpointKeys) => boolean;
+};
+export default useBreakpoint;

package/breakpoint/useBreakpoint.js

@@ -0,0 +1,32 @@
+import { useContext } from "react";
+import { BreakpointCtx } from ".";
+import isWindow from "../isWindow";
+import { breakpoints } from "../css";
+const useBreakpoint = () => {
+  const val = useContext(BreakpointCtx);
+  const isWin = isWindow();
+  const o = {
+    value: val,
+    is: (key) => val === key,
+    isDown: (key) => {
+      if (isWin) {
+        return window.innerWidth > breakpoints[key];
+      }
+      return false;
+    },
+    isUp: (key) => {
+      if (isWin) {
+        return window.innerWidth < breakpoints[key];
+      }
+      return false;
+    },
+    isOrDown: (key) => o.is(key) || o.isDown(key),
+    isOrUp: (key) => o.is(key) || o.isUp(key)
+  };
+  return o;
+};
+var useBreakpoint_default = useBreakpoint;
+export {
+  useBreakpoint_default as default
+};
+//# sourceMappingURL=useBreakpoint.js.map

package/breakpoint/useBreakpoint.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/breakpoint/useBreakpoint.ts"],
+  "sourcesContent": ["import { useContext } from \"react\"\nimport { BreakpointCtx } from \".\"\nimport isWindow from \"../isWindow\"\nimport { breakpoints } from \"../css\"\nimport { BreakpointKeys } from \"../css/types\"\n\nconst useBreakpoint = () => {\n   const val = useContext(BreakpointCtx)\n   const isWin = isWindow()\n   const o = {\n      value: val,\n      is: (key: BreakpointKeys) => val === key,\n      isDown: (key: BreakpointKeys) => {\n         if (isWin) {\n            return window.innerWidth > breakpoints[key]\n         }\n         return false\n      },\n      isUp: (key: BreakpointKeys) => {\n         if (isWin) {\n            return window.innerWidth < breakpoints[key]\n         }\n         return false\n      },\n      isOrDown: (key: BreakpointKeys) => o.is(key) || o.isDown(key),\n      isOrUp: (key: BreakpointKeys) => o.is(key) || o.isUp(key)\n   }\n   return o\n}\n\nexport default useBreakpoint\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,OAAO,cAAc;AACrB,SAAS,mBAAmB;AAG5B,MAAM,gBAAgB,MAAM;AACzB,QAAM,MAAM,WAAW,aAAa;AACpC,QAAM,QAAQ,SAAS;AACvB,QAAM,IAAI;AAAA,IACP,OAAO;AAAA,IACP,IAAI,CAAC,QAAwB,QAAQ;AAAA,IACrC,QAAQ,CAAC,QAAwB;AAC9B,UAAI,OAAO;AACR,eAAO,OAAO,aAAa,YAAY,GAAG;AAAA,MAC7C;AACA,aAAO;AAAA,IACV;AAAA,IACA,MAAM,CAAC,QAAwB;AAC5B,UAAI,OAAO;AACR,eAAO,OAAO,aAAa,YAAY,GAAG;AAAA,MAC7C;AACA,aAAO;AAAA,IACV;AAAA,IACA,UAAU,CAAC,QAAwB,EAAE,GAAG,GAAG,KAAK,EAAE,OAAO,GAAG;AAAA,IAC5D,QAAQ,CAAC,QAAwB,EAAE,GAAG,GAAG,KAAK,EAAE,KAAK,GAAG;AAAA,EAC3D;AACA,SAAO;AACV;AAEA,IAAO,wBAAQ;",
+  "names": []
+}

package/breakpoint/useBreakpointProps.d.ts

@@ -0,0 +1,6 @@
+import { BreakpointKeys } from "../css/types";
+export type useBreakpointPropsType<P> = P | {
+    [key in BreakpointKeys]?: P;
+};
+declare const useBreakpoinProps: <P extends object>(props: useBreakpointPropsType<P>) => useBreakpointPropsType<P>;
+export default useBreakpoinProps;

package/breakpoint/useBreakpointProps.js

@@ -0,0 +1,48 @@
+import React, { isValidElement } from "react";
+import useBreakpoint from "./useBreakpoint";
+const useBreakpoinProps = (props) => {
+  const bpoint = useBreakpoint();
+  const stringifiedElement = JSON.stringify(props, (key, value) => {
+    if (key === "_owner" || key === "_store") {
+      return void 0;
+    }
+    return value;
+  }, 2);
+  let format = React.useMemo(() => {
+    const _format = {
+      xs: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {}
+    };
+    for (let prop in props) {
+      let val = props[prop];
+      if (!isValidElement(val) && typeof val === "object") {
+        for (let breakpoin in val) {
+          _format[breakpoin][prop] = props[prop][breakpoin];
+        }
+      } else {
+        _format.xs[prop] = props[prop];
+      }
+    }
+    return _format;
+  }, [stringifiedElement, bpoint.value]);
+  return React.useMemo(() => {
+    let _props = format.xs || {};
+    for (let key of ["sm", "md", "lg", "xl"]) {
+      if (bpoint.isOrDown(key)) {
+        _props = { ..._props, ...format[key] };
+      }
+      if (bpoint.is(key)) {
+        break;
+      }
+    }
+    return _props;
+  }, [format, bpoint.value]);
+};
+var useBreakpointProps_default = useBreakpoinProps;
+export {
+  useBreakpointProps_default as default
+};
+//# sourceMappingURL=useBreakpointProps.js.map

package/breakpoint/useBreakpointProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/breakpoint/useBreakpointProps.ts"],
+  "sourcesContent": ["import React, { isValidElement } from \"react\"\nimport useBreakpoint from \"./useBreakpoint\"\nimport { BreakpointKeys } from \"../css/types\"\n\nexport type useBreakpointPropsType<P> = P | {\n   [key in BreakpointKeys]?: P\n}\n\nconst useBreakpoinProps = <P extends object>(props: useBreakpointPropsType<P>): useBreakpointPropsType<P> => {\n   const bpoint = useBreakpoint()\n   const stringifiedElement = JSON.stringify(props, (key, value) => {\n      if (key === '_owner' || key === '_store') {\n         return undefined; // Skip circular references\n      }\n      return value;\n   }, 2);\n\n   let format: any = React.useMemo(() => {\n\n      const _format: any = {\n         xs: {},\n         sm: {},\n         md: {},\n         lg: {},\n         xl: {}\n      }\n      for (let prop in props) {\n         let val = (props as any)[prop]\n         if (!isValidElement(val) && typeof val === 'object') {\n            for (let breakpoin in val) {\n               _format[breakpoin][prop] = (props as any)[prop][breakpoin]\n            }\n         } else {\n            _format.xs[prop] = (props as any)[prop]\n         }\n      }\n\n      return _format\n   }, [stringifiedElement, bpoint.value])\n\n   return React.useMemo(() => {\n      let _props = format.xs || {};\n      for (let key of ['sm', 'md', 'lg', 'xl']) {\n         if (bpoint.isOrDown(key as any)) {\n            _props = { ..._props, ...format[key] };\n         }\n         if (bpoint.is(key as any)) {\n            break;\n         }\n      }\n      return _props;\n   }, [format, bpoint.value]);\n}\n\n\n\nexport default useBreakpoinProps"],
+  "mappings": "AAAA,OAAO,SAAS,sBAAsB;AACtC,OAAO,mBAAmB;AAO1B,MAAM,oBAAoB,CAAmB,UAAgE;AAC1G,QAAM,SAAS,cAAc;AAC7B,QAAM,qBAAqB,KAAK,UAAU,OAAO,CAAC,KAAK,UAAU;AAC9D,QAAI,QAAQ,YAAY,QAAQ,UAAU;AACvC,aAAO;AAAA,IACV;AACA,WAAO;AAAA,EACV,GAAG,CAAC;AAEJ,MAAI,SAAc,MAAM,QAAQ,MAAM;AAEnC,UAAM,UAAe;AAAA,MAClB,IAAI,CAAC;AAAA,MACL,IAAI,CAAC;AAAA,MACL,IAAI,CAAC;AAAA,MACL,IAAI,CAAC;AAAA,MACL,IAAI,CAAC;AAAA,IACR;AACA,aAAS,QAAQ,OAAO;AACrB,UAAI,MAAO,MAAc,IAAI;AAC7B,UAAI,CAAC,eAAe,GAAG,KAAK,OAAO,QAAQ,UAAU;AAClD,iBAAS,aAAa,KAAK;AACxB,kBAAQ,SAAS,EAAE,IAAI,IAAK,MAAc,IAAI,EAAE,SAAS;AAAA,QAC5D;AAAA,MACH,OAAO;AACJ,gBAAQ,GAAG,IAAI,IAAK,MAAc,IAAI;AAAA,MACzC;AAAA,IACH;AAEA,WAAO;AAAA,EACV,GAAG,CAAC,oBAAoB,OAAO,KAAK,CAAC;AAErC,SAAO,MAAM,QAAQ,MAAM;AACxB,QAAI,SAAS,OAAO,MAAM,CAAC;AAC3B,aAAS,OAAO,CAAC,MAAM,MAAM,MAAM,IAAI,GAAG;AACvC,UAAI,OAAO,SAAS,GAAU,GAAG;AAC9B,iBAAS,EAAE,GAAG,QAAQ,GAAG,OAAO,GAAG,EAAE;AAAA,MACxC;AACA,UAAI,OAAO,GAAG,GAAU,GAAG;AACxB;AAAA,MACH;AAAA,IACH;AACA,WAAO;AAAA,EACV,GAAG,CAAC,QAAQ,OAAO,KAAK,CAAC;AAC5B;AAIA,IAAO,6BAAQ;",
+  "names": []
+}

package/css/aliases.d.ts

@@ -0,0 +1,4 @@
+import { OptionAliases } from 'oncss';
+import { Aliases } from './types';
+declare const aliases: OptionAliases<Aliases>;
+export default aliases;

package/css/aliases.js

@@ -0,0 +1,34 @@
+const isStr = (v, or) => typeof v === "string" ? v : or;
+const aliases = {
+  bgcolor: (v) => ({ backgroundColor: v }),
+  bgimage: (v) => ({ backgroundImage: `url(${v})`, "background-size": "cover", "background-repeat": "no-repeat" }),
+  bg: (v) => ({ "background": v }),
+  p: (v) => ({ "padding": isStr(v, 8 * v) }),
+  pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),
+  pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),
+  pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),
+  pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),
+  px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),
+  py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),
+  m: (v) => ({ margin: isStr(v, 8 * v) }),
+  mt: (v) => ({ marginTop: isStr(v, 8 * v) }),
+  mr: (v) => ({ marginRight: isStr(v, 8 * v) }),
+  mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),
+  ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),
+  mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),
+  my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),
+  radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
+  borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),
+  shadow: (v) => ({ boxShadow: v }),
+  flexBox: (v) => v ? { display: "flex" } : {},
+  flexRow: (v) => v ? { flexDirection: "row" } : {},
+  flexColumn: (v) => v ? { flexDirection: "column" } : {},
+  flexWraped: (v) => v ? { flexWrap: "wrap" } : {},
+  direction: (v) => v === "row" || v === "column" ? { "flex-direction": v } : { direction: v },
+  gap: (v) => ({ "gap": isStr(v, 8 * v) })
+};
+var aliases_default = aliases;
+export {
+  aliases_default as default
+};
+//# sourceMappingURL=aliases.js.map

package/css/aliases.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/css/aliases.ts"],
+  "sourcesContent": ["import { OptionAliases } from 'oncss'\nimport { Aliases } from './types'\n\nconst isStr = (v: any, or: any) => typeof v === 'string' ? v : or\n\nconst aliases: OptionAliases<Aliases> = {\n   bgcolor: (v) => ({ backgroundColor: v }),\n   bgimage: (v) => ({ backgroundImage: `url(${v})`, \"background-size\": \"cover\", \"background-repeat\": \"no-repeat\" }),\n   bg: (v) => ({ 'background': v }),\n   p: (v) => ({ \"padding\": isStr(v, 8 * v) }),\n   pt: (v) => ({ paddingTop: isStr(v, 8 * v) }),\n   pr: (v) => ({ paddingRight: isStr(v, 8 * v) }),\n   pb: (v) => ({ paddingBottom: isStr(v, 8 * v) }),\n   pl: (v) => ({ paddingLeft: isStr(v, 8 * v) }),\n   px: (v) => ({ paddingLeft: isStr(v, 8 * v), paddingRight: isStr(v, 8 * v) }),\n   py: (v) => ({ paddingTop: isStr(v, 8 * v), paddingBottom: isStr(v, 8 * v) }),\n   m: (v) => ({ margin: isStr(v, 8 * v) }),\n   mt: (v) => ({ marginTop: isStr(v, 8 * v) }),\n   mr: (v) => ({ marginRight: isStr(v, 8 * v) }),\n   mb: (v) => ({ marginBottom: isStr(v, 8 * v) }),\n   ml: (v) => ({ marginLeft: isStr(v, 8 * v) }),\n   mx: (v) => ({ marginLeft: isStr(v, 8 * v), marginRight: isStr(v, 8 * v) }),\n   my: (v) => ({ marginTop: isStr(v, 8 * v), marginBottom: isStr(v, 8 * v) }),\n   radius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n   borderRadius: (v) => ({ borderRadius: isStr(v, 8 * v) }),\n   shadow: (v) => ({ boxShadow: v }),\n   flexBox: (v) => (v ? { display: \"flex\" } : {}),\n   flexRow: (v) => (v ? { flexDirection: \"row\" } : {}),\n   flexColumn: (v) => (v ? { flexDirection: \"column\" } : {}),\n   flexWraped: (v) => (v ? { flexWrap: \"wrap\" } : {}),\n   direction: (v) => (v === 'row' || v === 'column' ? { \"flex-direction\": v } : { direction: v }),\n   gap: (v) => ({ \"gap\": isStr(v, 8 * v) }),\n};\n\nexport default aliases"],
+  "mappings": "AAGA,MAAM,QAAQ,CAAC,GAAQ,OAAY,OAAO,MAAM,WAAW,IAAI;AAE/D,MAAM,UAAkC;AAAA,EACrC,SAAS,CAAC,OAAO,EAAE,iBAAiB,EAAE;AAAA,EACtC,SAAS,CAAC,OAAO,EAAE,iBAAiB,OAAO,CAAC,KAAK,mBAAmB,SAAS,qBAAqB,YAAY;AAAA,EAC9G,IAAI,CAAC,OAAO,EAAE,cAAc,EAAE;AAAA,EAC9B,GAAG,CAAC,OAAO,EAAE,WAAW,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EACxC,IAAI,CAAC,OAAO,EAAE,YAAY,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC1C,IAAI,CAAC,OAAO,EAAE,cAAc,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC5C,IAAI,CAAC,OAAO,EAAE,eAAe,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC7C,IAAI,CAAC,OAAO,EAAE,aAAa,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC3C,IAAI,CAAC,OAAO,EAAE,aAAa,MAAM,GAAG,IAAI,CAAC,GAAG,cAAc,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC1E,IAAI,CAAC,OAAO,EAAE,YAAY,MAAM,GAAG,IAAI,CAAC,GAAG,eAAe,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC1E,GAAG,CAAC,OAAO,EAAE,QAAQ,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EACrC,IAAI,CAAC,OAAO,EAAE,WAAW,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EACzC,IAAI,CAAC,OAAO,EAAE,aAAa,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC3C,IAAI,CAAC,OAAO,EAAE,cAAc,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC5C,IAAI,CAAC,OAAO,EAAE,YAAY,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAC1C,IAAI,CAAC,OAAO,EAAE,YAAY,MAAM,GAAG,IAAI,CAAC,GAAG,aAAa,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EACxE,IAAI,CAAC,OAAO,EAAE,WAAW,MAAM,GAAG,IAAI,CAAC,GAAG,cAAc,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EACxE,QAAQ,CAAC,OAAO,EAAE,cAAc,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EAChD,cAAc,CAAC,OAAO,EAAE,cAAc,MAAM,GAAG,IAAI,CAAC,EAAE;AAAA,EACtD,QAAQ,CAAC,OAAO,EAAE,WAAW,EAAE;AAAA,EAC/B,SAAS,CAAC,MAAO,IAAI,EAAE,SAAS,OAAO,IAAI,CAAC;AAAA,EAC5C,SAAS,CAAC,MAAO,IAAI,EAAE,eAAe,MAAM,IAAI,CAAC;AAAA,EACjD,YAAY,CAAC,MAAO,IAAI,EAAE,eAAe,SAAS,IAAI,CAAC;AAAA,EACvD,YAAY,CAAC,MAAO,IAAI,EAAE,UAAU,OAAO,IAAI,CAAC;AAAA,EAChD,WAAW,CAAC,MAAO,MAAM,SAAS,MAAM,WAAW,EAAE,kBAAkB,EAAE,IAAI,EAAE,WAAW,EAAE;AAAA,EAC5F,KAAK,CAAC,OAAO,EAAE,OAAO,MAAM,GAAG,IAAI,CAAC,EAAE;AACzC;AAEA,IAAO,kBAAQ;",
+  "names": []
+}

package/css/getProps.d.ts

@@ -0,0 +1,3 @@
+import { CSSProps } from "./types";
+declare const getProps: (prop: string, value: string, _css: CSSProps) => any;
+export default getProps;

package/css/getProps.js

@@ -0,0 +1,37 @@
+const getProps = (prop, value, _css) => {
+  let important;
+  if (typeof value === "string") {
+    const split = value.split("!");
+    important = split[1] ? "!important" : "";
+    value = split[0];
+  }
+  if (prop === "disabled") {
+    if (value === true) {
+      return {
+        pointerEvents: "none!important",
+        cursor: "default!important",
+        userSelect: "none!important",
+        opacity: ".8!important"
+      };
+    }
+    return {};
+  }
+  if (value && typeof value === "number" && ["border", "borderRight", "borderLeft", "borderTop", "borderBottom"].includes(prop)) {
+    const keys = Object.keys(_css);
+    let p = {
+      [`${prop}Width`]: value + "px" + (important || "")
+    };
+    if (!keys.includes(`${prop}Color`)) {
+      p[`${prop}Color`] = "divider";
+    }
+    if (!keys.includes(`${prop}Style`)) {
+      p[`${prop}Style`] = "solid";
+    }
+    return p;
+  }
+};
+var getProps_default = getProps;
+export {
+  getProps_default as default
+};
+//# sourceMappingURL=getProps.js.map

package/css/getProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/css/getProps.ts"],
+  "sourcesContent": ["import { CSSProps } from \"./types\";\n\nconst getProps = (prop: string, value: string, _css: CSSProps) => {\n    let important;\n    if (typeof value === 'string') {\n        const split = value.split(\"!\")\n        important = split[1] ? \"!important\" : \"\"\n        value = split[0]\n    }\n\n    if (prop === 'disabled') {\n        if ((value as any) === true) {\n            return {\n                pointerEvents: \"none!important\",\n                cursor: \"default!important\",\n                userSelect: \"none!important\",\n                opacity: \".8!important\"\n            } as any\n        }\n        return {}\n    }\n\n    if (value && typeof value === \"number\" && [\"border\", \"borderRight\", \"borderLeft\", \"borderTop\", \"borderBottom\"].includes(prop as any)) {\n        const keys = Object.keys(_css)\n        let p: any = {\n            [`${prop}Width`]: value + 'px' + (important || \"\"),\n        }\n        if (!keys.includes(`${prop}Color`)) {\n            p[`${prop}Color`] = \"divider\"\n        }\n        if (!keys.includes(`${prop}Style`)) {\n            p[`${prop}Style`] = \"solid\"\n        }\n        return p\n    }\n}\n\nexport default getProps"],
+  "mappings": "AAEA,MAAM,WAAW,CAAC,MAAc,OAAe,SAAmB;AAC9D,MAAI;AACJ,MAAI,OAAO,UAAU,UAAU;AAC3B,UAAM,QAAQ,MAAM,MAAM,GAAG;AAC7B,gBAAY,MAAM,CAAC,IAAI,eAAe;AACtC,YAAQ,MAAM,CAAC;AAAA,EACnB;AAEA,MAAI,SAAS,YAAY;AACrB,QAAK,UAAkB,MAAM;AACzB,aAAO;AAAA,QACH,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,SAAS;AAAA,MACb;AAAA,IACJ;AACA,WAAO,CAAC;AAAA,EACZ;AAEA,MAAI,SAAS,OAAO,UAAU,YAAY,CAAC,UAAU,eAAe,cAAc,aAAa,cAAc,EAAE,SAAS,IAAW,GAAG;AAClI,UAAM,OAAO,OAAO,KAAK,IAAI;AAC7B,QAAI,IAAS;AAAA,MACT,CAAC,GAAG,IAAI,OAAO,GAAG,QAAQ,QAAQ,aAAa;AAAA,IACnD;AACA,QAAI,CAAC,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG;AAChC,QAAE,GAAG,IAAI,OAAO,IAAI;AAAA,IACxB;AACA,QAAI,CAAC,KAAK,SAAS,GAAG,IAAI,OAAO,GAAG;AAChC,QAAE,GAAG,IAAI,OAAO,IAAI;AAAA,IACxB;AACA,WAAO;AAAA,EACX;AACJ;AAEA,IAAO,mBAAQ;",
+  "names": []
+}

package/css/getValue.d.ts

@@ -0,0 +1,3 @@
+import { CSSProps } from "./types";
+declare const getValue: (prop: any, value: string | number, _css: CSSProps) => any;
+export default getValue;