@xanui/core 1.1.2 → 1.1.5

package/src/css/index.ts

@@ -1,78 +0,0 @@
-import getValue from "./getValue"
-import getProps from "./getProps"
-import aliases from "./aliases"
-import { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'
-import { css as _css } from "oncss"
-
-export {
-    getValue,
-    getProps
-}
-
-export const breakpoints = {
-    xs: 0,
-    sm: 600,
-    md: 900,
-    lg: 1200,
-    xl: 1536
-}
-
-export const css = (props: CSSProps, options?: CSSOptionProps) => {
-    const cssOptions: CSSOptionProps = {
-        ...options,
-        breakpoints,
-        aliases,
-        getValue: (p: any, v: any, _c: any, dept) => {
-            if (options?.getValue) {
-                let _val = options?.getValue(p, v, _c, dept)
-                if (_val) return _val
-            }
-            return getValue(p, v, _c)
-        },
-        getProps: (p: any, v: any, _c: any, dept) => {
-            if (options?.getProps) {
-                let _p = options?.getProps(p, v, _c, dept)
-                if (_p) return _p
-            }
-            return getProps(p, v, _c)
-        },
-    }
-    return _css<Aliases, BreakpointKeys>(props, cssOptions)
-}
-
-export const adjustColor = (hex: string, factor: number) => {
-
-    hex = hex.replace(/^#/, '')
-
-    let r = parseInt(hex.slice(0, 2), 16)
-    let g = parseInt(hex.slice(2, 4), 16)
-    let b = parseInt(hex.slice(4, 6), 16)
-
-    r = Math.floor(r * factor)
-    g = Math.floor(g * factor)
-    b = Math.floor(b * factor)
-
-    r = Math.min(255, Math.max(0, r))
-    g = Math.min(255, Math.max(0, g))
-    b = Math.min(255, Math.max(0, b))
-
-    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
-}
-
-export const adjustTextContrast = (color: string) => {
-    color = color.replace(/^#/, '')
-    const r = parseInt(color.slice(0, 2), 16);
-    const g = parseInt(color.slice(2, 4), 16);
-    const b = parseInt(color.slice(4, 6), 16);
-
-    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-    return luminance > 0.5 ? '#111111' : '#FFFFFF';
-}
-
-export const alpha = (color: string, opacity = 1) => {
-    if (typeof opacity !== 'number') return color
-    let _opacity = opacity * 100
-    if (!color.startsWith("#")) throw new Error(`color must be hex`)
-    return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();
-};
-

package/src/css/types.ts

@@ -1,60 +0,0 @@
-import * as CSS from 'csstype'
-import { ColorsRefTypes, TypographyRefTypes, ThemeOptions, } from '../theme/types';
-import * as oncss from 'oncss'
-export type FN = (theme: ThemeOptions) => string | number
-export type CSSBreakpointType = { [key in BreakpointKeys]: string | number }
-export type CSSValueType<T extends keyof CSS.Properties> = CSS.Properties[T] | Partial<CSSBreakpointType> | number
-
-export 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">
-}
-
-
-export type BreakpointKeys = "xs" | "sm" | "md" | "lg" | "xl"
-
-export type CSSProps = oncss.CSSProps<Aliases, BreakpointKeys>
-export type CSSOptionProps = oncss.CSSOptionProps<Aliases, BreakpointKeys>
-
-export type GlobalCSS = {
-    [key: string]: oncss.CSSPropsWithoutGlobal<Aliases, BreakpointKeys>;
-}

package/src/index.ts

@@ -1,34 +0,0 @@
-import Tag from './Tag'
-import useTagProps from './Tag/useTagProps'
-import useAnimation from './useAnimation'
-import useColorTemplate from './useColorTemplate'
-import useBreakpoint from './breakpoint/useBreakpoint'
-import useBreakpointProps from './breakpoint/useBreakpointProps'
-import ServerStyleTags from './ServerStyleTags'
-import isWindow from './isWindow'
-import useInterface from './useInterface'
-import Transition from './Transition'
-
-export * from './css'
-export * from "./theme"
-export * from './css/types'
-export * from './Tag/types'
-export * from './theme/types'
-export * from './useColorTemplate'
-export * from './useAnimation'
-export type * from './Transition'
-export type * from './Tag/types'
-export type { useBreakpointPropsType } from './breakpoint/useBreakpointProps'
-
-export {
-    Tag,
-    useTagProps,
-    useAnimation,
-    Transition,
-    useColorTemplate,
-    ServerStyleTags,
-    useBreakpoint,
-    useBreakpointProps,
-    isWindow,
-    useInterface
-}

package/src/isWindow.ts

@@ -1,3 +0,0 @@
-
-const isWindow = (): Window | void => typeof window !== 'undefined' ? window : undefined
-export default isWindow

package/src/theme/ThemeCssVars.ts

@@ -1,107 +0,0 @@
-import { ThemeOptions } from "./types";
-
-const ThemeCssVars = (theme: ThemeOptions) => {
-
-    const shadows: any = {}
-    theme.shadow.forEach((s, i) => shadows[`--shadow-${i}`] = s)
-
-    return {
-        "--bp-xs": theme.breakpoints.xs,
-        "--bp-sm": theme.breakpoints.sm,
-        "--bp-md": theme.breakpoints.md,
-        "--bp-lg": theme.breakpoints.lg,
-        "--bp-xl": theme.breakpoints.xl,
-
-        "--font-family": theme.typography.fontFamily,
-        "--font-h1": `${theme.typography.h1.fontWeight} ${theme.typography.h1.fontSize}px/${theme.typography.h1.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-h2": `${theme.typography.h2.fontWeight} ${theme.typography.h2.fontSize}px/${theme.typography.h2.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-h3": `${theme.typography.h3.fontWeight} ${theme.typography.h3.fontSize}px/${theme.typography.h3.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-h4": `${theme.typography.h4.fontWeight} ${theme.typography.h4.fontSize}px/${theme.typography.h4.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-h5": `${theme.typography.h5.fontWeight} ${theme.typography.h5.fontSize}px/${theme.typography.h5.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-h6": `${theme.typography.h6.fontWeight} ${theme.typography.h6.fontSize}px/${theme.typography.h6.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-text": `${theme.typography.text.fontWeight} ${theme.typography.text.fontSize}px/${theme.typography.text.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-button": `${theme.typography.button.fontWeight} ${theme.typography.button.fontSize}px/${theme.typography.button.lineHeight} ${theme.typography.fontFamily}`,
-        "--font-small": `${theme.typography.small.fontWeight} ${theme.typography.small.fontSize}px/${theme.typography.small.lineHeight} ${theme.typography.fontFamily}`,
-
-        "--fontsize-h1": `${theme.typography.h1.fontSize}px`,
-        "--fontsize-h2": `${theme.typography.h2.fontSize}px`,
-        "--fontsize-h3": `${theme.typography.h3.fontSize}px`,
-        "--fontsize-h4": `${theme.typography.h4.fontSize}px`,
-        "--fontsize-h5": `${theme.typography.h5.fontSize}px`,
-        "--fontsize-h6": `${theme.typography.h6.fontSize}px`,
-        "--fontsize-text": `${theme.typography.text.fontSize}px`,
-        "--fontsize-button": `${theme.typography.button.fontSize}px`,
-        "--fontsize-small": `${theme.typography.small.fontSize}px`,
-
-        "--fontweight-h1": theme.typography.h1.fontWeight + "",
-        "--fontweight-h2": theme.typography.h2.fontWeight + "",
-        "--fontweight-h3": theme.typography.h3.fontWeight + "",
-        "--fontweight-h4": theme.typography.h4.fontWeight + "",
-        "--fontweight-h5": theme.typography.h5.fontWeight + "",
-        "--fontweight-h6": theme.typography.h6.fontWeight + "",
-        "--fontweight-text": theme.typography.text.fontWeight + "",
-        "--fontweight-button": theme.typography.button.fontWeight + "",
-        "--fontweight-small": theme.typography.small.fontWeight + "",
-
-        "--lineheight-h1": theme.typography.h1.lineHeight + "",
-        "--lineheight-h2": theme.typography.h2.lineHeight + "",
-        "--lineheight-h3": theme.typography.h3.lineHeight + "",
-        "--lineheight-h4": theme.typography.h4.lineHeight + "",
-        "--lineheight-h5": theme.typography.h5.lineHeight + "",
-        "--lineheight-h6": theme.typography.h6.lineHeight + "",
-        "--lineheight-text": theme.typography.text.lineHeight + "",
-        "--lineheight-button": theme.typography.button.lineHeight + "",
-        "--lineheight-small": theme.typography.small.lineHeight + "",
-
-        "--color-text": theme.colors.text.primary,
-        "--color-text-primary": theme.colors.text.primary,
-        "--color-text-secondary": theme.colors.text.secondary,
-
-        "--color-background": theme.colors.background.primary,
-        "--color-background-primary": theme.colors.background.primary,
-        "--color-background-secondary": theme.colors.background.secondary,
-        "--color-background-alpha": theme.colors.background.alpha,
-
-        "--color-divider": theme.colors.divider,
-
-        "--color-brand": theme.colors.brand.primary,
-        "--color-brand-primary": theme.colors.brand.primary,
-        "--color-brand-secondary": theme.colors.brand.secondary,
-        "--color-brand-alpha": theme.colors.brand.alpha,
-        "--color-brand-text": theme.colors.brand.text,
-
-        "--color-accent": theme.colors.accent.primary,
-        "--color-accent-primary": theme.colors.accent.primary,
-        "--color-accent-secondary": theme.colors.accent.secondary,
-        "--color-accent-alpha": theme.colors.accent.alpha,
-        "--color-accent-text": theme.colors.accent.text,
-
-        "--color-info": theme.colors.info.primary,
-        "--color-info-primary": theme.colors.info.primary,
-        "--color-info-secondary": theme.colors.info.secondary,
-        "--color-info-alpha": theme.colors.info.alpha,
-        "--color-info-text": theme.colors.info.text,
-
-        "--color-success": theme.colors.success.primary,
-        "--color-success-primary": theme.colors.success.primary,
-        "--color-success-secondary": theme.colors.success.secondary,
-        "--color-success-alpha": theme.colors.success.alpha,
-        "--color-success-text": theme.colors.success.text,
-
-        "--color-warning": theme.colors.warning.primary,
-        "--color-warning-primary": theme.colors.warning.primary,
-        "--color-warning-secondary": theme.colors.warning.secondary,
-        "--color-warning-alpha": theme.colors.warning.alpha,
-        "--color-warning-text": theme.colors.warning.text,
-
-        "--color-danger": theme.colors.danger.primary,
-        "--color-danger-primary": theme.colors.danger.primary,
-        "--color-danger-secondary": theme.colors.danger.secondary,
-        "--color-danger-alpha": theme.colors.danger.alpha,
-        "--color-danger-text": theme.colors.danger.text,
-        ...shadows,
-    }
-}
-
-
-export default ThemeCssVars

package/src/theme/ThemeProvider.tsx

@@ -1,140 +0,0 @@
-import * as React from "react"
-import { ThemeOptions } from "./types"
-import Tag from "../Tag"
-import { TagComponentType, TagProps } from "../Tag/types"
-import { BreakpointProvider } from "../breakpoint"
-import { ThemeContex, ThemeFactory } from "./core"
-import ThemeCssVars from "./ThemeCssVars"
-import { css } from "../css"
-
-export type ThemeProviderProps<T extends TagComponentType = 'div'> = TagProps<T> & {
-   theme: string;
-   resetCss?: boolean;
-   scrollbarCss?: boolean;
-   isRootProvider?: boolean;
-   renderIsRoot?: React.ReactElement;
-}
-
-const ThemeProvider = ({ children, theme, resetCss, scrollbarCss, isRootProvider, renderIsRoot, ...props }: ThemeProviderProps) => {
-   const THEME = ThemeFactory.get(theme) as ThemeOptions
-   if (!THEME) throw new Error(`Invalid theme name provided: ${theme}`)
-   resetCss ??= true
-   scrollbarCss ??= true
-
-   React.useMemo(() => {
-      if (!!Object.keys(THEME.globalStyle).length) {
-         css({
-            "@global": THEME.globalStyle
-         })
-      }
-
-      css({
-         "@global": {
-            [`.xui-${theme}-theme-root`]: ThemeCssVars(THEME)
-         }
-      })
-
-      if (scrollbarCss && typeof document !== 'undefined') {
-         let thumbSize = 10
-         let thumbColor = THEME.colors.divider
-         let trackColor = THEME.colors.background.secondary
-         css({
-            "@global": {
-               "*": {
-                  scrollbarWidth: "thin",
-                  scrollbarColor: `${thumbColor} ${trackColor}`,
-               },
-               "::-webkit-scrollbar": {
-                  width: thumbSize,
-                  height: thumbSize,
-               },
-               "::-webkit-scrollbar-thumb": {
-                  backgroundColor: thumbColor,
-                  borderRadius: "5px",
-                  border: "2px solid #f4f4f4",
-               },
-               "::-webkit-scrollbar-thumb:hover": {
-                  backgroundColor: thumbColor,
-               },
-               "::-webkit-scrollbar-track": {
-                  backgroundColor: trackColor,
-                  borderRadius: "5px",
-               },
-            }
-         })
-      }
-
-      resetCss && css({
-         "@global": {
-            "*": {
-               m: 0,
-               p: 0,
-               outline: "none",
-               boxSizing: "border-box",
-               verticalAlign: "baseline",
-            },
-            "html, body": {
-               minHeight: "100%",
-               "-webkit-font-smoothing": "antialiased"
-            } as any,
-            "img, picture, video, canvas, svg": {
-               maxWidth: "100%",
-               display: "block"
-            },
-            "input, button, textarea, select": {
-               font: "inherit"
-            },
-            "table": {
-               borderCollapse: "collapse",
-               borderSpacing: 0
-            },
-            "ol, ul": {
-               listStyle: "none"
-            },
-            "a": {
-               display: "inline-block"
-            },
-            "p, h1, h2, h3, h4, h5, h6": {
-               overflowWrap: "break-word",
-            }
-         }
-      })
-   }, [theme])
-
-   return (
-      <ThemeContex.Provider value={theme}>
-         {
-            isRootProvider ? <BreakpointProvider>
-               <Tag
-                  minHeight="100%"
-                  bgcolor={THEME.colors.background.primary}
-                  fontFamily={THEME.typography.fontFamily}
-                  fontSize={THEME.typography.text.fontSize}
-                  fontWeight={THEME.typography.text.fontWeight}
-                  lineHeight={THEME.typography.text.lineHeight}
-                  {...props}
-                  baseClass={`${theme}-theme-root`}
-                  direction={THEME.rtl ? "rtl" : "ltr"}
-               >
-                  {children}
-                  {renderIsRoot}
-               </Tag>
-            </BreakpointProvider> : <Tag
-               minHeight="100%"
-               bgcolor={THEME.colors.background.primary}
-               fontFamily={THEME.typography.fontFamily}
-               fontSize={THEME.typography.text.fontSize}
-               fontWeight={THEME.typography.text.fontWeight}
-               lineHeight={THEME.typography.text.lineHeight}
-               {...props}
-               baseClass={`${theme}-theme-root`}
-               direction={THEME.rtl ? "rtl" : "ltr"}
-            >
-               {children}
-            </Tag>
-         }
-      </ThemeContex.Provider>
-   )
-}
-
-export default ThemeProvider

package/src/theme/core.ts

@@ -1,21 +0,0 @@
-import React from "react"
-import { ObjectType, ThemeOptions } from "./types"
-
-export const ThemeFactory = new Map<string, ThemeOptions>()
-export const ThemeContex = React.createContext("light")
-export const getTheme = (theme: string) => ThemeFactory.get(theme)
-export const useTheme = (): ThemeOptions => ThemeFactory.get(React.useContext(ThemeContex)) as any
-
-export const mergeObject = (a: ObjectType, b: ObjectType) => {
-   a = { ...a }
-   b = { ...b }
-   for (const key in b) {
-      const v = (b as any)[key]
-      if (typeof v === 'object' && !Array.isArray(v) && !React.isValidElement(v)) {
-         a[key] = mergeObject(a[key], b[key])
-      } else {
-         a[key] = v
-      }
-   }
-   return a
-}

package/src/theme/createColor.ts

@@ -1,53 +0,0 @@
-import { ThemeOptions, ThemeColor } from "./types"
-import { alpha } from "../css"
-
-const createColor = (theme: ThemeOptions, name: keyof ThemeColor) => {
-   let color = theme.colors[name]
-   let { primary, secondary } = color as any
-   let text = (color as any).text || theme.colors.text.primary
-   let _alpha = alpha(primary, .1)
-
-   const isBag = (a: any, b: any) => name === "background" ? a : b
-
-   return {
-      alpha: _alpha,
-      template: {
-         outline: {
-            bgcolor: "transparent",
-            color: isBag(text, primary),
-            border: 1,
-            borderColor: isBag("divider", alpha(primary, .4)),
-            hover: {
-               color: isBag(text, primary),
-               borderColor: isBag("divider", alpha(primary, .8)),
-            }
-         },
-         fill: {
-            bgcolor: isBag(secondary, primary),
-            color: text,
-            hover: {
-               bgcolor: isBag(alpha(secondary, .6), secondary),
-               color: text,
-            }
-         },
-         text: {
-            bgcolor: "transparent",
-            color: isBag(text, primary),
-            hover: {
-               bgcolor: isBag(alpha(secondary, .6), alpha(primary, .1)),
-               color: isBag(text, primary),
-            }
-         },
-         alpha: {
-            bgcolor: isBag(alpha(secondary, .5), alpha(primary, .1)),
-            color: isBag(text, primary),
-            hover: {
-               bgcolor: isBag(alpha(secondary, .8), alpha(primary, .15)),
-               color: isBag(text, primary),
-            }
-         }
-      }
-   }
-}
-
-export default createColor

package/src/theme/createTheme.ts

@@ -1,33 +0,0 @@
-import { ThemeOptions, ThemeOptionInput } from "./types"
-import defaultThemeOption, { darkColorPallete } from './ThemeDefaultOptions'
-import { mergeObject, ThemeFactory } from "./core"
-import createColor from "./createColor"
-import { breakpoints } from "../css"
-
-export const createTheme = (name: string, options: ThemeOptionInput, darkMode?: boolean): ThemeOptions => {
-   if (!ThemeFactory.has(name)) {
-      let theme: any = mergeObject(defaultThemeOption, {
-         ...(darkMode ? darkColorPallete : {}),
-         ...options,
-         name,
-         breakpoints: breakpoints
-      })
-
-      theme = mergeObject(theme, {
-         colors: {
-            background: createColor(theme, "background"),
-            brand: createColor(theme, "brand"),
-            accent: createColor(theme, "accent"),
-            info: createColor(theme, "info"),
-            success: createColor(theme, "success"),
-            warning: createColor(theme, "warning"),
-            danger: createColor(theme, "danger")
-         }
-      })
-      ThemeFactory.set(name, theme)
-   } else {
-      throw new Error(`theme "${name}" already exists!`);
-   }
-
-   return ThemeFactory.get(name) as ThemeOptions
-}

package/src/theme/createThemeSwitcher.ts

@@ -1,18 +0,0 @@
-import { createBucket } from "react-state-bucket"
-import { getTheme } from "./core"
-
-const createThemeSwitcher = (defaultTheme: string, store?: "session" | "local") => {
-   const useThemeState = createBucket({ name: defaultTheme }, { store })
-   const useThemeSwitcher = () => {
-      const state = useThemeState()
-      return {
-         name: state.get("name"),
-         theme: getTheme(state.get("name")),
-         change: (theme: string) => state.set("name", theme)
-      }
-   }
-   return useThemeSwitcher
-}
-
-
-export default createThemeSwitcher

package/src/theme/index.tsx

@@ -1,17 +0,0 @@
-import { lightColorPallete, darkColorPallete } from './ThemeDefaultOptions'
-import { createTheme } from "./createTheme"
-import ThemeProvider from './ThemeProvider'
-import createThemeSwitcher from './createThemeSwitcher'
-import { getTheme, useTheme } from './core'
-export type { ThemeProviderProps } from './ThemeProvider'
-
-export {
-    ThemeProvider,
-    createThemeSwitcher,
-    getTheme,
-    useTheme
-}
-
-createTheme("light", { colors: lightColorPallete })
-createTheme("dark", { colors: darkColorPallete })
-