@xanui/core 1.1.5 → 1.1.6

package/ServerStyleTags.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+declare const ServerStyleTags: () => React.JSX.Element[];
+
+export { ServerStyleTags as default };

package/Tag/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { TagPropsRoot, TagComponentType } from './types.js';
+
+declare const Tag: React.ForwardRefExoticComponent<Omit<TagPropsRoot<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+
+export { Tag as default };

package/Tag/types.d.ts

@@ -0,0 +1,181 @@
+import * as CSS from 'csstype';
+import { CSSValueType, BreakpointKeys, Aliases, CSSProps } from '../css/types.js';
+import { ColorsRefTypes, TypographyRefTypes } from '../theme/types.js';
+import { classNamesTypes } from 'pretty-class';
+
+type TagComponentType = keyof React.JSX.IntrinsicElements | React.ComponentType<any>;
+type TagProps<T extends TagComponentType = 'div'> = Omit<React.HTMLProps<T>, 'width' | 'height'> & {
+    component?: T;
+    children?: React.ReactNode;
+    ref?: any;
+} & CSSPropAsAttr;
+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">;
+}
+type CSSPropAsAttr = Partial<TagCSSProperties> & Aliases & {
+    baseClass?: string;
+    sx?: CSSProps;
+    hover?: CSSProps;
+    disabled?: boolean;
+    classNames?: classNamesTypes;
+};
+
+export type { CSSPropAsAttr, TagComponentType, TagProps, TagPropsRoot };

package/Tag/useTagProps.d.ts

@@ -0,0 +1,5 @@
+import { TagComponentType, TagPropsRoot, TagProps } from './types.js';
+
+declare const useTagProps: <T extends TagComponentType = "div">({ sxr, sx, baseClass, classNames: clses, hover, ...props }: TagPropsRoot<T>) => TagProps<T>;
+
+export { useTagProps as default };

package/Transition/index.d.ts

@@ -0,0 +1,34 @@
+import React__default, { ReactElement } from 'react';
+import { animationEases } from '../useAnimation.js';
+import { CSSProps } from '../css/types.js';
+import * as variants from './variants.js';
+
+type TransitionVariantTypes = keyof typeof variants;
+type TransitionElementProps = {
+    height: number;
+    width: number;
+    rect: DOMRect | null;
+};
+type TransitionState = "open" | "opened" | "close" | "closed";
+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;
+};
+declare const Transition: ({ children, open, ...props }: TransitionProps) => React__default.JSX.Element;
+
+export { Transition as default };
+export type { TransitionElementProps, TransitionProps, TransitionState, TransitionVariantTypes };

package/Transition/variants.d.ts

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

package/breakpoint/useBreakpoint.d.ts

@@ -0,0 +1,12 @@
+import { BreakpointKeys } from '../css/types.js';
+
+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 { useBreakpoint as default };

package/breakpoint/useBreakpointProps.d.ts

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

package/css/getProps.d.ts

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

package/css/getValue.d.ts

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

package/css/index.d.ts

@@ -0,0 +1,16 @@
+import * as oncss_types from 'oncss/types';
+import { CSSProps, CSSOptionProps } from './types.js';
+
+declare const breakpoints: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+declare const css: (props: CSSProps, options?: CSSOptionProps) => oncss_types.CSSFactoryType;
+declare const adjustColor: (hex: string, factor: number) => string;
+declare const adjustTextContrast: (color: string) => "#111111" | "#FFFFFF";
+declare const alpha: (color: string, opacity?: number) => string;
+
+export { adjustColor, adjustTextContrast, alpha, breakpoints, css };

package/css/types.d.ts

@@ -0,0 +1,57 @@
+import * as CSS from 'csstype';
+import { ColorsRefTypes, TypographyRefTypes, ThemeOptions } from '../theme/types.js';
+import * as oncss from 'oncss';
+
+type FN = (theme: ThemeOptions) => string | number;
+type CSSBreakpointType = {
+    [key in BreakpointKeys]: string | number;
+};
+type CSSValueType<T extends keyof CSS.Properties> = CSS.Properties[T] | Partial<CSSBreakpointType> | number;
+type Aliases = {
+    bgcolor?: CSSValueType<'background'> | ColorsRefTypes;
+    bgimage?: CSSValueType<'backgroundImage'>;
+    bg?: CSSValueType<'background'> | ColorsRefTypes;
+    p?: CSSValueType<'padding'>;
+    pt?: CSSValueType<'padding'>;
+    pr?: CSSValueType<'padding'>;
+    pb?: CSSValueType<'padding'>;
+    pl?: CSSValueType<'padding'>;
+    px?: CSSValueType<'padding'>;
+    py?: CSSValueType<'margin'>;
+    m?: CSSValueType<'margin'>;
+    mt?: CSSValueType<'margin'>;
+    mr?: CSSValueType<'margin'>;
+    mb?: CSSValueType<'margin'>;
+    ml?: CSSValueType<'margin'>;
+    mx?: CSSValueType<'margin'>;
+    my?: CSSValueType<'margin'>;
+    size?: CSSValueType<'width'>;
+    spacing?: Partial<CSSBreakpointType> | number;
+    radius?: CSSValueType<'borderRadius'> | number;
+    borderRadius?: CSSValueType<'borderRadius'> | number;
+    shadow?: CSSValueType<'boxShadow'> | number;
+    flexBox?: boolean;
+    flexRow?: boolean;
+    flexColumn?: boolean;
+    flexWraped?: boolean;
+    direction?: "row" | "column" | CSSValueType<'direction'>;
+    gap?: CSSValueType<'gap'>;
+    color?: CSSValueType<'color'> | ColorsRefTypes;
+    width?: CSSValueType<'width'> | BreakpointKeys;
+    height?: CSSValueType<'height'>;
+    borderColor?: CSSValueType<'backgroundColor'> | ColorsRefTypes;
+    fontFamily?: CSSValueType<"fontFamily"> | "default";
+    fontSize?: CSSValueType<"fontSize"> | TypographyRefTypes;
+    minWidth?: CSSValueType<"minWidth"> | BreakpointKeys;
+    maxWidth?: CSSValueType<"maxWidth"> | BreakpointKeys;
+    minHeight?: CSSValueType<"minHeight">;
+    maxHeight?: CSSValueType<"maxHeight">;
+};
+type BreakpointKeys = "xs" | "sm" | "md" | "lg" | "xl";
+type CSSProps = oncss.CSSProps<Aliases, BreakpointKeys>;
+type CSSOptionProps = oncss.CSSOptionProps<Aliases, BreakpointKeys>;
+type GlobalCSS = {
+    [key: string]: oncss.CSSPropsWithoutGlobal<Aliases, BreakpointKeys>;
+};
+
+export type { Aliases, BreakpointKeys, CSSBreakpointType, CSSOptionProps, CSSProps, CSSValueType, FN, GlobalCSS };