@xanui/core 1.1.2 → 1.1.3

package/src/Tag/cssPropList.ts

@@ -1,191 +0,0 @@
-
-const CSS_PROP_LIST: any = {
-    typography: 1,
-    bgcolor: 1,
-    bgimage: 1,
-    bg: 1,
-    p: 1,
-    pt: 1,
-    pr: 1,
-    pb: 1,
-    pl: 1,
-    px: 1,
-    py: 1,
-    m: 1,
-    mt: 1,
-    mr: 1,
-    mb: 1,
-    ml: 1,
-    mx: 1,
-    my: 1,
-    radius: 1,
-    shadow: 1,
-    flexBox: 1,
-    flexRow: 1,
-    flexColumn: 1,
-    flexWraped: 1,
-    disabled: 1,
-    spacing: 1,
-
-    gradient: 1,
-
-    // CSS Props
-    alignContent: 1,
-    alignItems: 1,
-    alignSelf: 1,
-    animation: 1,
-    animationComposition: 1,
-    animationDelay: 1,
-    animationDirection: 1,
-    animationDuration: 1,
-    animationFillMode: 1,
-    animationIterationCount: 1,
-    animationName: 1,
-    animationTimingFunction: 1,
-    backdropFilter: 1,
-    background: 1,
-    backgroundAttachment: 1,
-    backgroundColor: 1,
-    backgroundImage: 1,
-    backgroundOrigin: 1,
-    backgroundPosition: 1,
-    backgroundRepeat: 1,
-    backgroundSize: 1,
-    border: 1,
-    borderBottom: 1,
-    borderBottomColor: 1,
-    borderBottomStyle: 1,
-    borderBottomWidth: 1,
-    borderColor: 1,
-    borderImage: 1,
-    borderLeft: 1,
-    borderLeftColor: 1,
-    borderLeftStyle: 1,
-    borderLeftWidth: 1,
-    borderRadius: 1,
-    borderRight: 1,
-    borderRightColor: 1,
-    borderRightStyle: 1,
-    borderRightWidth: 1,
-    borderStyle: 1,
-    borderTop: 1,
-    borderTopColor: 1,
-    borderTopLeftRadius: 1,
-    borderTopRightRadius: 1,
-    borderTopStyle: 1,
-    borderTopWidth: 1,
-    borderWidth: 1,
-    bottom: 1,
-    boxShadow: 1,
-    boxSizing: 1,
-    cursor: 1,
-    color: 1,
-    display: 1,
-    direction: 1,
-    filter: 1,
-    flex: 1,
-    flexBasis: 1,
-    flexDirection: 1,
-    flexFlow: 1,
-    flexGrow: 1,
-    flexShrink: 1,
-    flexWrap: 1,
-    float: 1,
-    fontFamily: 1,
-    fontSize: 1,
-    fontStyle: 1,
-    fontWeight: 1,
-    font: 1,
-    gap: 1,
-    grid: 1,
-    gridArea: 1,
-    gridAutoColumns: 1,
-    gridAutoFlow: 1,
-    gridAutoRows: 1,
-    gridColumn: 1,
-    gridColumnEnd: 1,
-    gridColumnGap: 1,
-    gridColumnStart: 1,
-    gridGap: 1,
-    gridRow: 1,
-    gridRowEnd: 1,
-    gridRowGap: 1,
-    gridRowStart: 1,
-    gridTemplate: 1,
-    gridTemplateAreas: 1,
-    gridTemplateColumns: 1,
-    gridTemplateRows: 1,
-    height: 1,
-    justifyContent: 1,
-    justifyItems: 1,
-    justifySelf: 1,
-    left: 1,
-    letterSpacing: 1,
-    lineBreak: 1,
-    lineHeight: 1,
-    listStyle: 1,
-    margin: 1,
-    marginBlock: 1,
-    marginBlockEnd: 1,
-    marginBlockStart: 1,
-    marginBottom: 1,
-    marginInline: 1,
-    marginInlineEnd: 1,
-    marginInlineStart: 1,
-    marginLeft: 1,
-    marginRight: 1,
-    marginTop: 1,
-    maxHeight: 1,
-    maxWidth: 1,
-    minHeight: 1,
-    minWidth: 1,
-    objectFit: 1,
-    objectPosition: 1,
-    opacity: 1,
-    order: 1,
-    outline: 1,
-    overflow: 1,
-    overflowX: 1,
-    overflowY: 1,
-    padding: 1,
-    paddingBlock: 1,
-    paddingBlockEnd: 1,
-    paddingBlockStart: 1,
-    paddingBottom: 1,
-    paddingInline: 1,
-    paddingInlineEnd: 1,
-    paddingInlineStart: 1,
-    paddingLeft: 1,
-    paddingRight: 1,
-    paddingTop: 1,
-    perspective: 1,
-    perspectiveOrigin: 1,
-    pointerEvents: 1,
-    position: 1,
-    resize: 1,
-    right: 1,
-    textAlign: 1,
-    textDecoration: 1,
-    textShadow: 1,
-    textTransform: 1,
-    top: 1,
-    transform: 1,
-    transformOrigin: 1,
-    transformStyle: 1,
-    transition: 1,
-    transitionDelay: 1,
-    transitionDuration: 1,
-    transitionProperty: 1,
-    transitionTimingFunction: 1,
-    userSelect: 1,
-    verticalAlign: 1,
-    visibility: 1,
-    whiteSpace: 1,
-    width: 1,
-    wordBreak: 1,
-    wordSpacing: 1,
-    wordWrap: 1,
-    zIndex: 1,
-}
-
-export default CSS_PROP_LIST

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/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/Transition/variants.ts

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

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