@xanui/core 1.1.0 → 1.1.2

package/main.tsx

@@ -0,0 +1,97 @@
+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/package.json

@@ -1,24 +1,53 @@
 {
-  "name": "@xanui/core",
-  "version": "1.1.0",
-  "description": "",
-  "private": false,
-  "main": "./index.cjs",
-  "module": "./index.mjs",
-  "types": "./index.d.ts",
-  "sideEffects": false,
-  "dependencies": {
-    "oncss": "^1.1.14",
-    "pretty-class": "^1.0.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-state-bucket": "^1.1.8"
-  },
-  "devDependencies": {
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
-    "makepack": "^1.6.4",
-    "typescript": "^4.9.5"
-  },
-  "keywords": []
+   "name": "@xanui/core",
+   "version": "1.1.2",
+   "description": "",
+   "private": false,
+   "main": "./cjs/index.js",
+   "module": "./index.js",
+   "types": "./index.d.ts",
+   "type": "module",
+   "sideEffects": false,
+   "scripts": {
+      "start": "makepack start",
+      "build": "makepack build",
+      "release": "makepack release"
+   },
+   "dependencies": {
+      "oncss": "^1.1.14",
+      "pretty-class": "^1.0.4",
+      "react": "^19.0.0",
+      "react-dom": "^19.0.0",
+      "react-state-bucket": "^1.1.8"
+   },
+   "devDependencies": {
+      "@types/react": "^19.0.2",
+      "@types/react-dom": "^19.0.2",
+      "makepack": "^1.6.8",
+      "typescript": "^4.9.5"
+   },
+   "keywords": [],
+   "exports": {
+      ".": {
+         "require": {
+            "types": "./index.d.ts",
+            "default": "./cjs/index.js"
+         },
+         "import": {
+            "types": "./index.d.ts",
+            "default": "./index.js"
+         }
+      },
+      "./*": {
+         "require": {
+            "types": "./*.d.ts",
+            "default": "./cjs/*.js"
+         },
+         "import": {
+            "types": "./*.d.ts",
+            "default": "./*.js"
+         }
+      },
+      "./cjs": null
+   }
 }

package/src/ServerStyleTags.tsx

@@ -0,0 +1,12 @@
+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/cssPropList.ts

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

@@ -0,0 +1,11 @@
+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/{Tag/types.d.ts → src/Tag/types.ts}

@@ -1,16 +1,20 @@
-import * as CSS from 'csstype';
-import { Aliases, BreakpointKeys, CSSProps, CSSValueType } from "../css/types";
+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>;
+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;
+} & CSSPropAsAttr
+
 export type TagPropsRoot<T extends TagComponentType = 'div'> = TagProps<T> & {
-    sxr?: CSSProps;
-};
+    sxr?: CSSProps
+}
+
+
 interface TagCSSProperties {
     alignContent: CSSValueType<"alignContent">;
     alignItems: CSSValueType<"alignItems">;
@@ -169,11 +173,11 @@ interface TagCSSProperties {
     wordWrap: CSSValueType<"wordWrap">;
     zIndex: CSSValueType<"zIndex">;
 }
+
 export type CSSPropAsAttr = Partial<TagCSSProperties> & Aliases & {
     baseClass?: string;
     sx?: CSSProps;
     hover?: CSSProps;
     disabled?: boolean;
     classNames?: classNamesTypes;
-};
-export {};
+}

package/src/Tag/useTagProps.ts

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

@@ -0,0 +1,148 @@
+'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