@xanui/core 1.1.2 → 1.1.5

package/main.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { createThemeSwitcher, ThemeProvider, useTheme } from './src/theme'
-import { Tag, Transition } from './src';
-
-const useThemeSwitcher = createThemeSwitcher("light")
-
-const ThemeBox = () => {
-  const themeSwitcher = useThemeSwitcher()
-  return (
-    <button
-      onClick={() => {
-        themeSwitcher.change(themeSwitcher.name === 'light' ? "dark" : "light")
-      }}
-    >
-      change
-    </button>
-  )
-}
-
-const Trans = () => {
-  const theme = useTheme()
-  const [v, setV] = React.useState<any>('zoom')
-  const [open, setOpen] = React.useState(true)
-  return (
-    <Tag>
-      <button onClick={() => setOpen(!open)}>Click</button>
-      <button onClick={() => setV(v === 'zoom' ? { from: {}, to: { transform: "scale(.5)" } } : "zoom")}>change</button>
-      <Transition open={open} variant="fade" >
-        <Tag
-          component="div"
-          width={300}
-          bgcolor="green"
-          radius={2}
-          p={2}
-        >
-          <Transition open={open} variant={v}  >
-            <Tag
-              component="div"
-              width={100}
-              bgcolor="red"
-              radius={2}
-              px={2}
-            >
-              Lorem ipsum dolor sit amet consectetur adipisicing elit.
-            </Tag>
-          </Transition>
-        </Tag>
-      </Transition>
-    </Tag>
-  )
-}
-
-
-const App = () => {
-  return (
-    <ThemeProvider theme="light">
-      <Tag
-        flexBox
-        flexRow
-        flexWrap="wrap"
-        gap={1}
-        p={2}
-      >
-        <Trans />
-        {
-          Array.from({ length: 1 }).map((_, i) => (
-            <Tag
-              key={i}
-              hover={{
-                background: 'green'
-              }}
-              id="asdasd"
-              width={100}
-              height={100}
-              background='red'
-              radius={2}
-              baseClass='hello'
-              className='world'
-              classNames={['world2']}
-              onClick={() => {
-                alert('asd')
-              }}
-            >Tagas</Tag>
-          ))
-        }
-      </Tag>
-    </ThemeProvider>
-  );
-}
-const rootEle = document.getElementById('root')
-
-if (rootEle) {
-
-  const root = createRoot(rootEle);
-  root.render(<App />);
-}

package/src/ServerStyleTags.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react'
-import { CSSFactory } from 'oncss'
-
-const ServerStyleTags = () => {
-    return Array.from(CSSFactory.values()).map((c, idx) => <style
-        key={c.classname + idx}
-        data-oncss={c.classname}
-        dangerouslySetInnerHTML={{ __html: c.css }}
-    />)
-}
-
-export default ServerStyleTags

package/src/Tag/index.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react'
-import { TagComponentType, TagPropsRoot } from './types';
-import useTagProps from './useTagProps';
-
-const Tag = React.forwardRef(<T extends TagComponentType = 'div'>({ component, children, ...rest }: TagPropsRoot<T>, ref: React.Ref<any>) => {
-    const props: any = useTagProps(rest)
-    props.ref = ref
-    return React.createElement(component || "div", props, children)
-})
-
-export default Tag

package/src/Tag/types.ts

@@ -1,183 +0,0 @@
-import * as CSS from 'csstype'
-import { Aliases, BreakpointKeys, CSSProps, CSSValueType } from "../css/types"
-import { ColorsRefTypes, TypographyRefTypes } from '../theme/types';
-import { classNamesTypes } from 'pretty-class'
-
-export type TagComponentType = keyof React.JSX.IntrinsicElements | React.ComponentType<any>
-export type TagProps<T extends TagComponentType = 'div'> = Omit<React.HTMLProps<T>, 'width' | 'height'> & {
-    component?: T;
-    children?: React.ReactNode;
-    ref?: any;
-} & CSSPropAsAttr
-
-export type TagPropsRoot<T extends TagComponentType = 'div'> = TagProps<T> & {
-    sxr?: CSSProps
-}
-
-
-interface TagCSSProperties {
-    alignContent: CSSValueType<"alignContent">;
-    alignItems: CSSValueType<"alignItems">;
-    alignSelf: CSSValueType<"alignSelf">;
-    animation: CSSValueType<"animation">;
-    animationComposition: CSSValueType<"animationComposition">;
-    animationDelay: CSSValueType<"animationDelay">;
-    animationDirection: CSSValueType<"animationDirection">;
-    animationDuration: CSSValueType<"animationDuration">;
-    animationFillMode: CSSValueType<"animationFillMode">;
-    animationIterationCount: CSSValueType<"animationIterationCount">;
-    animationName: CSSValueType<"animationName">;
-    animationTimingFunction: CSSValueType<"animationTimingFunction">;
-    backdropFilter: CSSValueType<"backdropFilter">;
-    background: CSSValueType<"background"> | ColorsRefTypes;
-    backgroundAttachment: CSSValueType<"backgroundAttachment">;
-    backgroundColor: CSSValueType<"backgroundColor"> | ColorsRefTypes;
-    backgroundImage: CSSValueType<"backgroundImage">;
-    backgroundOrigin: CSSValueType<"backgroundOrigin">;
-    backgroundPosition: CSSValueType<"backgroundPosition">;
-    backgroundRepeat: CSSValueType<"backgroundRepeat">;
-    backgroundSize: CSSValueType<"backgroundSize">;
-    border: CSSValueType<"border">;
-    borderBottom: CSSValueType<"borderBottom">;
-    borderBottomColor: CSSValueType<"borderBottomColor"> | ColorsRefTypes;
-    borderBottomStyle: CSSValueType<"borderBottomStyle">;
-    borderBottomWidth: CSSValueType<"borderBottomWidth">;
-    borderColor: CSS.Properties['borderColor'] | ColorsRefTypes;
-    borderImage: CSSValueType<"borderImage">;
-    borderLeft: CSSValueType<"borderLeft">;
-    borderLeftColor: CSSValueType<"borderLeftColor"> | ColorsRefTypes;
-    borderLeftStyle: CSSValueType<"borderLeftStyle">;
-    borderLeftWidth: CSSValueType<"borderLeftWidth">;
-    borderRadius: CSSValueType<"borderRadius">;
-    borderRight: CSSValueType<"borderRight">;
-    borderRightColor: CSSValueType<"borderRightColor"> | ColorsRefTypes;
-    borderRightStyle: CSSValueType<"borderRightStyle">;
-    borderRightWidth: CSSValueType<"borderRightWidth">;
-    borderStyle: CSSValueType<"borderStyle">;
-    borderTop: CSSValueType<"borderTop">;
-    borderTopColor: CSSValueType<"borderTopColor"> | ColorsRefTypes;
-    borderTopLeftRadius: CSSValueType<"borderTopLeftRadius">;
-    borderTopRightRadius: CSSValueType<"borderTopRightRadius">;
-    borderTopStyle: CSSValueType<"borderTopStyle">;
-    borderTopWidth: CSSValueType<"borderTopWidth">;
-    borderWidth: CSSValueType<"borderWidth">;
-    bottom: CSSValueType<"bottom">;
-    boxShadow: CSSValueType<"boxShadow"> | number;
-    boxSizing: CSSValueType<"boxSizing">;
-    cursor: CSSValueType<"cursor">;
-    color: CSS.Properties['color'] | ColorsRefTypes;
-    display: CSSValueType<"display">;
-    direction: "row" | "column" | CSSValueType<"direction">;
-    filter: CSSValueType<"filter">;
-    flex: CSSValueType<"flex">;
-    flexBasis: CSSValueType<"flexBasis">;
-    flexDirection: CSSValueType<"flexDirection">;
-    flexFlow: CSSValueType<"flexFlow">;
-    flexGrow: CSSValueType<"flexGrow">;
-    flexShrink: CSSValueType<"flexShrink">;
-    flexWrap: CSSValueType<"flexWrap">;
-    float: CSSValueType<"float">;
-    fontFamily: CSSValueType<"fontFamily"> | "default";
-    fontSize: CSSValueType<"fontSize"> | TypographyRefTypes;
-    fontStyle: CSSValueType<"fontStyle">;
-    fontWeight: CSSValueType<"fontWeight"> | TypographyRefTypes;
-    font: CSSValueType<"font"> | TypographyRefTypes;
-    gap: CSSValueType<"gap">;
-    grid: CSSValueType<"grid">;
-    gridArea: CSSValueType<"gridArea">;
-    gridAutoColumns: CSSValueType<"gridAutoColumns">;
-    gridAutoFlow: CSSValueType<"gridAutoFlow">;
-    gridAutoRows: CSSValueType<"gridAutoRows">;
-    gridColumn: CSSValueType<"gridColumn">;
-    gridColumnEnd: CSSValueType<"gridColumnEnd">;
-    gridColumnGap: CSSValueType<"gridColumnGap">;
-    gridColumnStart: CSSValueType<"gridColumnStart">;
-    gridGap: CSSValueType<"gridGap">;
-    gridRow: CSSValueType<"gridRow">;
-    gridRowEnd: CSSValueType<"gridRowEnd">;
-    gridRowGap: CSSValueType<"gridRowGap">;
-    gridRowStart: CSSValueType<"gridRowStart">;
-    gridTemplate: CSSValueType<"gridTemplate">;
-    gridTemplateAreas: CSSValueType<"gridTemplateAreas">;
-    gridTemplateColumns: CSSValueType<"gridTemplateColumns">;
-    gridTemplateRows: CSSValueType<"gridTemplateRows">;
-    height: CSSValueType<"height">;
-    justifyContent: CSSValueType<"justifyContent">;
-    justifyItems: CSSValueType<"justifyItems">;
-    justifySelf: CSSValueType<"justifySelf">;
-    left: CSSValueType<"left">;
-    letterSpacing: CSSValueType<"letterSpacing">;
-    lineBreak: CSSValueType<"lineBreak">;
-    lineHeight: CSSValueType<"lineHeight"> | TypographyRefTypes;
-    listStyle: CSSValueType<"listStyle">;
-    margin: CSSValueType<"margin">;
-    marginBlock: CSSValueType<"marginBlock">;
-    marginBlockEnd: CSSValueType<"marginBlockEnd">;
-    marginBlockStart: CSSValueType<"marginBlockStart">;
-    marginBottom: CSSValueType<"marginBottom">;
-    marginInline: CSSValueType<"marginInline">;
-    marginInlineEnd: CSSValueType<"marginInlineEnd">;
-    marginInlineStart: CSSValueType<"marginInlineStart">;
-    marginLeft: CSSValueType<"marginLeft">;
-    marginRight: CSSValueType<"marginRight">;
-    marginTop: CSSValueType<"marginTop">;
-    maxHeight: CSSValueType<"maxHeight">;
-    maxWidth: CSSValueType<"maxWidth"> | BreakpointKeys;
-    minHeight: CSSValueType<"minHeight">;
-    minWidth: CSSValueType<"minWidth"> | BreakpointKeys;
-    objectFit: CSSValueType<"objectFit">;
-    objectPosition: CSSValueType<"objectPosition">;
-    opacity: CSSValueType<"opacity">;
-    order: CSSValueType<"order">;
-    outline: CSSValueType<"outline">;
-    overflow: CSSValueType<"overflow">;
-    overflowX: CSSValueType<"overflowX">;
-    overflowY: CSSValueType<"overflowY">;
-    padding: CSSValueType<"padding">;
-    paddingBlock: CSSValueType<"paddingBlock">;
-    paddingBlockEnd: CSSValueType<"paddingBlockEnd">;
-    paddingBlockStart: CSSValueType<"paddingBlockStart">;
-    paddingBottom: CSSValueType<"paddingBottom">;
-    paddingInline: CSSValueType<"paddingInline">;
-    paddingInlineEnd: CSSValueType<"paddingInlineEnd">;
-    paddingInlineStart: CSSValueType<"paddingInlineStart">;
-    paddingLeft: CSSValueType<"paddingLeft">;
-    paddingRight: CSSValueType<"paddingRight">;
-    paddingTop: CSSValueType<"paddingTop">;
-    perspective: CSSValueType<"perspective">;
-    perspectiveOrigin: CSSValueType<"perspectiveOrigin">;
-    pointerEvents: CSSValueType<"pointerEvents">;
-    position: CSSValueType<"position">;
-    right: CSSValueType<"right">;
-    textAlign: CSSValueType<"textAlign">;
-    textDecoration: CSSValueType<"textDecoration">;
-    textShadow: CSSValueType<"textShadow">;
-    textTransform: CSSValueType<"textTransform">;
-    top: CSSValueType<"top">;
-    transform: CSSValueType<"transform">;
-    transformOrigin: CSSValueType<"transformOrigin">;
-    transformStyle: CSSValueType<"transformStyle">;
-    transition: CSSValueType<"transition">;
-    transitionDelay: CSSValueType<"transitionDelay">;
-    transitionDuration: CSSValueType<"transitionDuration">;
-    transitionProperty: CSSValueType<"transitionProperty">;
-    transitionTimingFunction: CSSValueType<"transitionTimingFunction">;
-    translate: CSSValueType<"translate">;
-    userSelect: CSSValueType<"userSelect">;
-    verticalAlign: CSSValueType<"verticalAlign">;
-    visibility: CSSValueType<"visibility">;
-    whiteSpace: CSSValueType<"whiteSpace">;
-    width: CSSValueType<"width"> | BreakpointKeys;
-    wordBreak: CSSValueType<"wordBreak">;
-    wordSpacing: CSSValueType<"wordSpacing">;
-    wordWrap: CSSValueType<"wordWrap">;
-    zIndex: CSSValueType<"zIndex">;
-}
-
-export type CSSPropAsAttr = Partial<TagCSSProperties> & Aliases & {
-    baseClass?: string;
-    sx?: CSSProps;
-    hover?: CSSProps;
-    disabled?: boolean;
-    classNames?: classNamesTypes;
-}

package/src/Tag/useTagProps.ts

@@ -1,28 +0,0 @@
-import { TagComponentType, TagProps, TagPropsRoot } from './types';
-import cssPropList from './cssPropList';
-import { css } from '../css';
-import { classNames } from 'pretty-class';
-
-const useTagProps = <T extends TagComponentType = "div">({ sxr, sx, baseClass, classNames: clses, hover, ...props }: TagPropsRoot<T>): TagProps<T> => {
-   let _css: any = { ...sxr, ...sx, ...props }
-   if (hover) _css['&:hover'] = hover
-   const style = css(_css, {
-      skipProps: (prop, _val, dept): any => dept === 1 && !cssPropList[prop]
-   })
-
-   let skipProps = style.skiped[style.classname as any] || []
-   const _props: any = {};
-   for (let prop of skipProps) {
-      _props[prop] = (props as any)[prop]
-   }
-   _props.className = classNames([
-      baseClass ? "xui-" + baseClass : "",
-      style.classname,
-      props.className,
-      ...(clses as any || []),
-   ])
-   return _props
-}
-
-
-export default useTagProps

package/src/Transition/index.tsx

@@ -1,148 +0,0 @@
-'use client'
-import React, { ReactElement, cloneElement, Children, useState, useEffect, useId } from 'react';
-import Tag from '../Tag';
-import { animationEases } from '../useAnimation';
-import { css } from '../css';
-import { formatCSSProp } from 'oncss';
-import { CSSProps } from '../css/types';
-import * as variants from './variants'
-export type TransitionVariantTypes = keyof typeof variants
-
-export type TransitionElementProps = {
-    height: number;
-    width: number;
-    rect: DOMRect | null
-}
-
-export type TransitionState = "open" | "opened" | "close" | "closed"
-
-export type TransitionProps = {
-    children: ReactElement;
-    open: boolean;
-    variant: {
-        from: CSSProps;
-        to: CSSProps;
-    } | TransitionVariantTypes;
-    ease?: string;
-    easing?: keyof typeof animationEases;
-    duration?: number;
-    delay?: number;
-    disableInitialTransition?: boolean;
-    onOpen?: () => void;
-    onOpened?: () => void;
-    onClose?: () => void;
-    onClosed?: () => void;
-    onState?: (state: TransitionState) => void;
-}
-
-const Transition = ({ children, open, ...props }: TransitionProps) => {
-    let { disableInitialTransition, variant, duration, delay, ease, easing, onOpen, onOpened, onClose, onClosed, onState } = props as TransitionProps
-    let _ease = ease || (animationEases as any)[easing as any] || animationEases.easeBounceOut
-    disableInitialTransition ??= false
-    duration ??= 400
-    variant ??= "fade"
-
-    const id = useId().replace(/:/g, "")
-    const [rendered, setRendered] = useState(false)
-    const [initial, setInitial] = useState(false)
-    const [transitionState, setTransitionState] = useState<TransitionState>(open ? (disableInitialTransition ? "opened" : "open") : "closed")
-    const [element, setElement] = useState<TransitionElementProps>({
-        height: 0,
-        width: 0,
-        rect: null
-    });
-
-    if (typeof variant === 'string') {
-        variant = (variants as any)[variant](element)
-    }
-
-    let from = (variant as any).from
-    let to = (variant as any).to
-
-    const [_css, setCss] = useState(open ? to : from)
-
-    useEffect(() => {
-        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any
-        if (ele) {
-            setRendered(true)
-            setElement({
-                height: ele.clientHeight,
-                width: ele.clientWidth,
-                rect: ele.getBoundingClientRect()
-            })
-            if (!disableInitialTransition && open) {
-                setCss(from)
-            }
-        }
-    }, [])
-
-    useEffect(() => {
-        const ele: HTMLElement = document.querySelector(`.trans-${id}`) as any
-        if (rendered && ele) {
-            let stimer: any = null
-            let etimer: any = null
-            ele.ontransitionstart = () => {
-                clearTimeout(stimer)
-                stimer = setTimeout(() => {
-                    const isOpen = Array.from(ele.classList).includes("trans-open");
-                    (onOpen && isOpen) && onOpen();
-                    (onClose && !isOpen) && onClose()
-                    onState && onState(isOpen ? "open" : "close")
-                    setTransitionState(isOpen ? "open" : "close")
-                }, 1)
-            }
-            ele.ontransitionend = () => {
-                clearTimeout(etimer)
-                etimer = setTimeout(() => {
-                    const isOpen = Array.from(ele.classList).includes("trans-open");
-                    (onOpened && isOpen) && onOpened();
-                    (onClosed && !isOpen) && onClosed();
-                    onState && onState(isOpen ? "opened" : "closed")
-                    setTransitionState(isOpen ? "opened" : "closed")
-                }, 1)
-            }
-        }
-    }, [rendered])
-
-    useEffect(() => {
-        if (rendered) {
-            if (!initial) {
-                setInitial(true)
-                setTimeout(() => {
-                    setCss(open ? to : from)
-                }, 50);
-            } else {
-                setCss(open ? to : from)
-            }
-        }
-    }, [rendered, open, JSON.stringify(from), JSON.stringify(to)])
-
-    let _: any = {}
-    if (rendered) {
-        let trans = ` ${duration}ms ${_ease} ${delay || 0}ms`
-        _ = {
-            ..._css,
-            transition: Object.keys(_css || {}).map(k => formatCSSProp(k)).join(trans + ", ") + trans,
-        }
-    }
-
-    const cls = css(_)
-    if (!children || Array.isArray(children)) throw new Error("Invalid children in Transition")
-    const first: any = Children.toArray(children).shift();
-    let classname = `${cls.classname} trans-${id} trans-${(open ? "open" : "close")} trans-state-${transitionState}`
-    const child = cloneElement(first, { classNames: [classname] })
-    if (rendered) return child
-    if (!rendered && disableInitialTransition && open) return child
-
-    return (
-        <Tag
-            height={0}
-            overflow="hidden"
-        >
-            {child}
-        </Tag>
-    )
-}
-
-
-export default Transition

package/src/breakpoint/index.tsx

@@ -1,52 +0,0 @@
-import React, { ReactNode, useState } from "react";
-import isWindow from "../isWindow";
-import { breakpoints } from "../css";
-import { BreakpointKeys } from "../css/types";
-
-export const BreakpointCtx = React.createContext<BreakpointKeys>("xl")
-
-const getKey = (): BreakpointKeys => {
-    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'
-    }
-}
-
-export const BreakpointProvider = ({ children }: { children?: ReactNode }) => {
-    const [current, setCurrent] = useState<BreakpointKeys>(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 (
-        <BreakpointCtx.Provider value={current}>
-            {children}
-        </BreakpointCtx.Provider>
-    )
-}

package/src/breakpoint/useBreakpoint.ts

@@ -1,31 +0,0 @@
-import { useContext } from "react"
-import { BreakpointCtx } from "."
-import isWindow from "../isWindow"
-import { breakpoints } from "../css"
-import { BreakpointKeys } from "../css/types"
-
-const useBreakpoint = () => {
-   const val = useContext(BreakpointCtx)
-   const isWin = isWindow()
-   const o = {
-      value: val,
-      is: (key: BreakpointKeys) => val === key,
-      isDown: (key: BreakpointKeys) => {
-         if (isWin) {
-            return window.innerWidth > breakpoints[key]
-         }
-         return false
-      },
-      isUp: (key: BreakpointKeys) => {
-         if (isWin) {
-            return window.innerWidth < breakpoints[key]
-         }
-         return false
-      },
-      isOrDown: (key: BreakpointKeys) => o.is(key) || o.isDown(key),
-      isOrUp: (key: BreakpointKeys) => o.is(key) || o.isUp(key)
-   }
-   return o
-}
-
-export default useBreakpoint

package/src/breakpoint/useBreakpointProps.ts

@@ -1,57 +0,0 @@
-import React, { isValidElement } from "react"
-import useBreakpoint from "./useBreakpoint"
-import { BreakpointKeys } from "../css/types"
-
-export type useBreakpointPropsType<P> = P | {
-   [key in BreakpointKeys]?: P
-}
-
-const useBreakpoinProps = <P extends object>(props: useBreakpointPropsType<P>): useBreakpointPropsType<P> => {
-   const bpoint = useBreakpoint()
-   const stringifiedElement = JSON.stringify(props, (key, value) => {
-      if (key === '_owner' || key === '_store') {
-         return undefined; // Skip circular references
-      }
-      return value;
-   }, 2);
-
-   let format: any = React.useMemo(() => {
-
-      const _format: any = {
-         xs: {},
-         sm: {},
-         md: {},
-         lg: {},
-         xl: {}
-      }
-      for (let prop in props) {
-         let val = (props as any)[prop]
-         if (!isValidElement(val) && typeof val === 'object') {
-            for (let breakpoin in val) {
-               _format[breakpoin][prop] = (props as any)[prop][breakpoin]
-            }
-         } else {
-            _format.xs[prop] = (props as any)[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 as any)) {
-            _props = { ..._props, ...format[key] };
-         }
-         if (bpoint.is(key as any)) {
-            break;
-         }
-      }
-      return _props;
-   }, [format, bpoint.value]);
-}
-
-
-
-export default useBreakpoinProps

package/src/css/aliases.ts

@@ -1,35 +0,0 @@
-import { OptionAliases } from 'oncss'
-import { Aliases } from './types'
-
-const isStr = (v: any, or: any) => typeof v === 'string' ? v : or
-
-const aliases: OptionAliases<Aliases> = {
-   bgcolor: (v) => ({ backgroundColor: v }),
-   bgimage: (v) => ({ backgroundImage: `url(${v})`, backgroundSize: "cover", backgroundRepeat: "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' ? { flexDirection: v } : { direction: v }),
-   gap: (v) => ({ gap: isStr(v, 8 * v) }),
-};
-
-export default aliases