@xanui/core 1.2.0 → 1.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AppRoot/Renderar.js.map +1 -1
- package/AppRoot/Renderar.mjs.map +1 -1
- package/AppRoot/index.js +17 -12
- package/AppRoot/index.js.map +1 -1
- package/AppRoot/index.mjs +17 -12
- package/AppRoot/index.mjs.map +1 -1
- package/RenderServerStyles.js.map +1 -1
- package/RenderServerStyles.mjs.map +1 -1
- package/Tag/cssPropList.js.map +1 -1
- package/Tag/cssPropList.mjs.map +1 -1
- package/Tag/index.js.map +1 -1
- package/Tag/index.mjs.map +1 -1
- package/Tag/useTagProps.js.map +1 -1
- package/Tag/useTagProps.mjs.map +1 -1
- package/Transition/index.js.map +1 -1
- package/Transition/index.mjs.map +1 -1
- package/Transition/variants.js.map +1 -1
- package/Transition/variants.mjs.map +1 -1
- package/breakpoint/BreakpointProvider.js.map +1 -1
- package/breakpoint/BreakpointProvider.mjs.map +1 -1
- package/breakpoint/useBreakpoint.js.map +1 -1
- package/breakpoint/useBreakpoint.mjs.map +1 -1
- package/breakpoint/useBreakpointProps.js.map +1 -1
- package/breakpoint/useBreakpointProps.mjs.map +1 -1
- package/css/aliases.js.map +1 -1
- package/css/aliases.mjs.map +1 -1
- package/css/getProps.js +36 -0
- package/css/getProps.js.map +1 -1
- package/css/getProps.mjs +36 -0
- package/css/getProps.mjs.map +1 -1
- package/css/getValue.js +7 -6
- package/css/getValue.js.map +1 -1
- package/css/getValue.mjs +7 -6
- package/css/getValue.mjs.map +1 -1
- package/css/index.js.map +1 -1
- package/css/index.mjs.map +1 -1
- package/css/types.d.ts +0 -1
- package/hooks/useAnimation.js.map +1 -1
- package/hooks/useAnimation.mjs.map +1 -1
- package/hooks/useColorTemplate.js +1 -1
- package/hooks/useColorTemplate.js.map +1 -1
- package/hooks/useColorTemplate.mjs +1 -1
- package/hooks/useColorTemplate.mjs.map +1 -1
- package/hooks/useInterface.js +1 -1
- package/hooks/useInterface.js.map +1 -1
- package/hooks/useInterface.mjs +1 -1
- package/hooks/useInterface.mjs.map +1 -1
- package/hooks/usePortal.js.map +1 -1
- package/hooks/usePortal.mjs.map +1 -1
- package/hooks/useScrollbar.js +1 -1
- package/hooks/useScrollbar.js.map +1 -1
- package/hooks/useScrollbar.mjs +1 -1
- package/hooks/useScrollbar.mjs.map +1 -1
- package/isWindow.js.map +1 -1
- package/isWindow.mjs.map +1 -1
- package/package.json +1 -1
- package/readme.md +109 -109
- package/theme/ThemeCssVars.js +1 -1
- package/theme/ThemeCssVars.js.map +1 -1
- package/theme/ThemeCssVars.mjs +1 -1
- package/theme/ThemeCssVars.mjs.map +1 -1
- package/theme/ThemeDefaultOptions.js +107 -99
- package/theme/ThemeDefaultOptions.js.map +1 -1
- package/theme/ThemeDefaultOptions.mjs +107 -99
- package/theme/ThemeDefaultOptions.mjs.map +1 -1
- package/theme/ThemeProvider.js +9 -2
- package/theme/ThemeProvider.js.map +1 -1
- package/theme/ThemeProvider.mjs +9 -2
- package/theme/ThemeProvider.mjs.map +1 -1
- package/theme/core.js.map +1 -1
- package/theme/core.mjs.map +1 -1
- package/theme/createColor.js.map +1 -1
- package/theme/createColor.mjs.map +1 -1
- package/theme/createTheme.js +1 -1
- package/theme/createTheme.js.map +1 -1
- package/theme/createTheme.mjs +2 -2
- package/theme/createTheme.mjs.map +1 -1
- package/theme/createThemeSwitcher.js.map +1 -1
- package/theme/createThemeSwitcher.mjs.map +1 -1
- package/theme/index.js +1 -1
- package/theme/index.js.map +1 -1
- package/theme/index.mjs +1 -1
- package/theme/index.mjs.map +1 -1
- package/theme/types.d.ts +6 -4
package/css/getValue.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getValue.mjs","sources":["../../src/css/getValue.ts"],"sourcesContent":["import { CSSProps } from \"./types\"\n\nconst getColor = (color: string) => {\n return {\n [`${color}`]: `var(--color-${color}-primary)`,\n [`${color}.primary`]: `var(--color-${color}-primary)`,\n [`${color}.secondary`]: `var(--color-${color}-secondary)`,\n [`${color}.text`]: `var(--color-${color}-text)`,\n [`${color}.alpha`]: `var(--color-${color}-alpha)`\n }\n}\n\nconst withImportant = (important: any, value: any) => important ? value + important : value\nconst colors: any = {\n \"text\": `var(--color-text-primary)`,\n \"text.primary\": `var(--color-text-primary)`,\n \"text.secondary\": `var(--color-text-secondary)`,\n\n \"background\": `var(--color-background-primary)`,\n \"background.primary\": `var(--color-background-primary)`,\n \"background.secondary\": `var(--color-background-secondary)`,\n \"background.alpha\": `var(--color-background-alpha)`,\n \"divider\": `var(--color-divider)`,\n\n ...getColor(\"brand\"),\n ...getColor(\"accent\"),\n ...getColor(\"info\"),\n ...getColor(\"success\"),\n ...getColor(\"warning\"),\n ...getColor(\"danger\"),\n}\n\nconst breakpoints: any = {\n \"xs\": \"var(--bp-xs)\",\n \"sm\": \"var(--bp-sm)\",\n \"md\": \"var(--bp-md)\",\n \"lg\": \"var(--bp-lg)\",\n \"xl\": \"var(--bp-xl)\"\n}\n\nlet fontsizes: any = {\n \"h1\": \"var(--fontsize-h1)\",\n \"h2\": \"var(--fontsize-h2)\",\n \"h3\": \"var(--fontsize-h3)\",\n \"h4\": \"var(--fontsize-h4)\",\n \"h5\": \"var(--fontsize-h5)\",\n \"h6\": \"var(--fontsize-h6)\",\n \"text\": \"var(--fontsize-text)\",\n \"button\": \"var(--fontsize-button)\",\n \"small\": \"var(--fontsize-small)\"\n}\n\nlet lineHeights: any = {\n \"h1\": \"var(--lineheight-h1)\",\n \"h2\": \"var(--lineheight-h2)\",\n \"h3\": \"var(--lineheight-h3)\",\n \"h4\": \"var(--lineheight-h4)\",\n \"h5\": \"var(--lineheight-h5)\",\n \"h6\": \"var(--lineheight-h6)\",\n \"text\": \"var(--lineheight-text)\",\n \"button\": \"var(--lineheight-button)\",\n \"small\": \"var(--lineheight-small)\"\n}\n\nlet fontWeights: any = {\n \"h1\": \"var(--fontweight-h1)\",\n \"h2\": \"var(--fontweight-h2)\",\n \"h3\": \"var(--fontweight-h3)\",\n \"h4\": \"var(--fontweight-h4)\",\n \"h5\": \"var(--fontweight-h5)\",\n \"h6\": \"var(--fontweight-h6)\",\n \"text\": \"var(--fontweight-text)\",\n \"button\": \"var(--fontweight-button)\",\n \"small\": \"var(--fontweight-small)\"\n}\n\nlet font: any = {\n \"h1\": \"var(--font-h1)\",\n \"h2\": \"var(--font-h2)\",\n \"h3\": \"var(--font-h3)\",\n \"h4\": \"var(--font-h4)\",\n \"h5\": \"var(--font-h5)\",\n \"h6\": \"var(--font-h6)\",\n \"text\": \"var(--font-text)\",\n \"button\": \"var(--font-button)\",\n \"small\": \"var(--font-small)\"\n}\n\nconst getValue = (prop: any, value: string | number, _css: CSSProps): any => {\n let important;\n\n if (typeof value === 'string') {\n const split = value.split(\"!\")\n important = split[1] ? \"!important\" : \"\"\n value = split[0]\n }\n\n if (['width', 'maxWidth', 'minWidth', 'max-width', 'min-width'].includes(prop)) {\n return withImportant(important, breakpoints[value] || value)\n } else if (
|
|
1
|
+
{"version":3,"file":"getValue.mjs","sources":["../../src/css/getValue.ts"],"sourcesContent":["import { CSSProps } from \"./types\"\r\n\r\nconst getColor = (color: string) => {\r\n return {\r\n [`${color}`]: `var(--color-${color}-primary)`,\r\n [`${color}.primary`]: `var(--color-${color}-primary)`,\r\n [`${color}.secondary`]: `var(--color-${color}-secondary)`,\r\n [`${color}.text`]: `var(--color-${color}-text)`,\r\n [`${color}.alpha`]: `var(--color-${color}-alpha)`\r\n }\r\n}\r\n\r\nconst withImportant = (important: any, value: any) => important ? value + important : value\r\nconst colors: any = {\r\n \"text\": `var(--color-text-primary)`,\r\n \"text.primary\": `var(--color-text-primary)`,\r\n \"text.secondary\": `var(--color-text-secondary)`,\r\n\r\n \"background\": `var(--color-background-primary)`,\r\n \"background.primary\": `var(--color-background-primary)`,\r\n \"background.secondary\": `var(--color-background-secondary)`,\r\n \"background.alpha\": `var(--color-background-alpha)`,\r\n \"divider\": `var(--color-divider)`,\r\n\r\n ...getColor(\"surface\"),\r\n ...getColor(\"brand\"),\r\n ...getColor(\"accent\"),\r\n ...getColor(\"info\"),\r\n ...getColor(\"success\"),\r\n ...getColor(\"warning\"),\r\n ...getColor(\"danger\"),\r\n}\r\n\r\nconst breakpoints: any = {\r\n \"xs\": \"var(--bp-xs)\",\r\n \"sm\": \"var(--bp-sm)\",\r\n \"md\": \"var(--bp-md)\",\r\n \"lg\": \"var(--bp-lg)\",\r\n \"xl\": \"var(--bp-xl)\"\r\n}\r\n\r\nlet fontsizes: any = {\r\n \"h1\": \"var(--fontsize-h1)\",\r\n \"h2\": \"var(--fontsize-h2)\",\r\n \"h3\": \"var(--fontsize-h3)\",\r\n \"h4\": \"var(--fontsize-h4)\",\r\n \"h5\": \"var(--fontsize-h5)\",\r\n \"h6\": \"var(--fontsize-h6)\",\r\n \"big\": \"var(--fontsize-big)\",\r\n \"text\": \"var(--fontsize-text)\",\r\n \"button\": \"var(--fontsize-button)\",\r\n \"small\": \"var(--fontsize-small)\"\r\n}\r\n\r\nlet lineHeights: any = {\r\n \"h1\": \"var(--lineheight-h1)\",\r\n \"h2\": \"var(--lineheight-h2)\",\r\n \"h3\": \"var(--lineheight-h3)\",\r\n \"h4\": \"var(--lineheight-h4)\",\r\n \"h5\": \"var(--lineheight-h5)\",\r\n \"h6\": \"var(--lineheight-h6)\",\r\n \"big\": \"var(--lineheight-big)\",\r\n \"text\": \"var(--lineheight-text)\",\r\n \"button\": \"var(--lineheight-button)\",\r\n \"small\": \"var(--lineheight-small)\"\r\n}\r\n\r\nlet fontWeights: any = {\r\n \"h1\": \"var(--fontweight-h1)\",\r\n \"h2\": \"var(--fontweight-h2)\",\r\n \"h3\": \"var(--fontweight-h3)\",\r\n \"h4\": \"var(--fontweight-h4)\",\r\n \"h5\": \"var(--fontweight-h5)\",\r\n \"h6\": \"var(--fontweight-h6)\",\r\n \"big\": \"var(--fontweight-big)\",\r\n \"text\": \"var(--fontweight-text)\",\r\n \"button\": \"var(--fontweight-button)\",\r\n \"small\": \"var(--fontweight-small)\"\r\n}\r\n\r\nlet font: any = {\r\n \"h1\": \"var(--font-h1)\",\r\n \"h2\": \"var(--font-h2)\",\r\n \"h3\": \"var(--font-h3)\",\r\n \"h4\": \"var(--font-h4)\",\r\n \"h5\": \"var(--font-h5)\",\r\n \"h6\": \"var(--font-h6)\",\r\n \"big\": \"var(--font-big)\",\r\n \"text\": \"var(--font-text)\",\r\n \"button\": \"var(--font-button)\",\r\n \"small\": \"var(--font-small)\"\r\n}\r\n\r\nconst getValue = (prop: any, value: string | number, _css: CSSProps): any => {\r\n let important;\r\n\r\n if (typeof value === 'string') {\r\n const split = value.split(\"!\")\r\n important = split[1] ? \"!important\" : \"\"\r\n value = split[0]\r\n }\r\n\r\n\r\n if (['width', 'maxWidth', 'minWidth', 'max-width', 'min-width'].includes(prop)) {\r\n return withImportant(important, breakpoints[value] || value)\r\n } else if (prop === 'font' && typeof value === \"string\" && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\r\n return withImportant(important, font[value] || value)\r\n } else if (['fontWeight', 'font-weight'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\r\n return withImportant(important, fontWeights[value] || value)\r\n } else if (['lineHeight', 'line-height'].includes(prop) && typeof value === 'string' && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'text', 'button', 'small'].includes(value)) {\r\n return withImportant(important, lineHeights[value] || value)\r\n } else if (['fontSize', 'font-size'].includes(prop) && typeof value === 'string') {\r\n return withImportant(important, fontsizes[value] || value)\r\n } else if (typeof value === \"number\" && [\"shadow\", \"boxShadow\"].includes(prop)) {\r\n return withImportant(important, `var(--shadow-${value})`)\r\n }\r\n\r\n return withImportant(important, colors[value] || value)\r\n}\r\n\r\nexport default getValue"],"names":[],"mappings":"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"}
|
package/css/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\nimport getProps from \"./getProps\"\nimport aliases from \"./aliases\"\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\nimport { css as _css } from \"oncss\"\n\nexport {\n getValue,\n getProps\n}\n\nexport const breakpoints = {\n xs: 0,\n sm: 600,\n md: 900,\n lg: 1200,\n xl: 1536\n}\n\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\n const cssOptions: CSSOptionProps = {\n ...options,\n breakpoints,\n aliases,\n getValue: (p: any, v: any, _c: any, dept) => {\n if (options?.getValue) {\n let _val = options?.getValue(p, v, _c, dept)\n if (_val) return _val\n }\n return getValue(p, v, _c)\n },\n getProps: (p: any, v: any, _c: any, dept) => {\n if (options?.getProps) {\n let _p = options?.getProps(p, v, _c, dept)\n if (_p) return _p\n }\n return getProps(p, v, _c)\n },\n }\n return _css<Aliases, BreakpointKeys>(props, cssOptions)\n}\n\nexport const adjustColor = (hex: string, factor: number) => {\n\n hex = hex.replace(/^#/, '')\n\n let r = parseInt(hex.slice(0, 2), 16)\n let g = parseInt(hex.slice(2, 4), 16)\n let b = parseInt(hex.slice(4, 6), 16)\n\n r = Math.floor(r * factor)\n g = Math.floor(g * factor)\n b = Math.floor(b * factor)\n\n r = Math.min(255, Math.max(0, r))\n g = Math.min(255, Math.max(0, g))\n b = Math.min(255, Math.max(0, b))\n\n return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\n}\n\nexport const adjustTextContrast = (color: string) => {\n color = color.replace(/^#/, '')\n const r = parseInt(color.slice(0, 2), 16);\n const g = parseInt(color.slice(2, 4), 16);\n const b = parseInt(color.slice(4, 6), 16);\n\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n return luminance > 0.5 ? '#111111' : '#FFFFFF';\n}\n\nexport const alpha = (color: string, opacity = 1) => {\n if (typeof opacity !== 'number') return color\n let _opacity = opacity * 100\n if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\n return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\n};\n\n"],"names":["aliases","getValue","getProps","_css"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\r\nimport getProps from \"./getProps\"\r\nimport aliases from \"./aliases\"\r\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\r\nimport { css as _css } from \"oncss\"\r\n\r\nexport {\r\n getValue,\r\n getProps\r\n}\r\n\r\nexport const breakpoints = {\r\n xs: 0,\r\n sm: 600,\r\n md: 900,\r\n lg: 1200,\r\n xl: 1536\r\n}\r\n\r\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\r\n const cssOptions: CSSOptionProps = {\r\n ...options,\r\n breakpoints,\r\n aliases,\r\n getValue: (p: any, v: any, _c: any, dept) => {\r\n if (options?.getValue) {\r\n let _val = options?.getValue(p, v, _c, dept)\r\n if (_val) return _val\r\n }\r\n return getValue(p, v, _c)\r\n },\r\n getProps: (p: any, v: any, _c: any, dept) => {\r\n if (options?.getProps) {\r\n let _p = options?.getProps(p, v, _c, dept)\r\n if (_p) return _p\r\n }\r\n return getProps(p, v, _c)\r\n },\r\n }\r\n return _css<Aliases, BreakpointKeys>(props, cssOptions)\r\n}\r\n\r\nexport const adjustColor = (hex: string, factor: number) => {\r\n\r\n hex = hex.replace(/^#/, '')\r\n\r\n let r = parseInt(hex.slice(0, 2), 16)\r\n let g = parseInt(hex.slice(2, 4), 16)\r\n let b = parseInt(hex.slice(4, 6), 16)\r\n\r\n r = Math.floor(r * factor)\r\n g = Math.floor(g * factor)\r\n b = Math.floor(b * factor)\r\n\r\n r = Math.min(255, Math.max(0, r))\r\n g = Math.min(255, Math.max(0, g))\r\n b = Math.min(255, Math.max(0, b))\r\n\r\n return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\r\n}\r\n\r\nexport const adjustTextContrast = (color: string) => {\r\n color = color.replace(/^#/, '')\r\n const r = parseInt(color.slice(0, 2), 16);\r\n const g = parseInt(color.slice(2, 4), 16);\r\n const b = parseInt(color.slice(4, 6), 16);\r\n\r\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\r\n return luminance > 0.5 ? '#111111' : '#FFFFFF';\r\n}\r\n\r\nexport const alpha = (color: string, opacity = 1) => {\r\n if (typeof opacity !== 'number') return color\r\n let _opacity = opacity * 100\r\n if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\r\n return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\r\n};\r\n\r\n"],"names":["aliases","getValue","getProps","_css"],"mappings":"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"}
|
package/css/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\nimport getProps from \"./getProps\"\nimport aliases from \"./aliases\"\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\nimport { css as _css } from \"oncss\"\n\nexport {\n getValue,\n getProps\n}\n\nexport const breakpoints = {\n xs: 0,\n sm: 600,\n md: 900,\n lg: 1200,\n xl: 1536\n}\n\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\n const cssOptions: CSSOptionProps = {\n ...options,\n breakpoints,\n aliases,\n getValue: (p: any, v: any, _c: any, dept) => {\n if (options?.getValue) {\n let _val = options?.getValue(p, v, _c, dept)\n if (_val) return _val\n }\n return getValue(p, v, _c)\n },\n getProps: (p: any, v: any, _c: any, dept) => {\n if (options?.getProps) {\n let _p = options?.getProps(p, v, _c, dept)\n if (_p) return _p\n }\n return getProps(p, v, _c)\n },\n }\n return _css<Aliases, BreakpointKeys>(props, cssOptions)\n}\n\nexport const adjustColor = (hex: string, factor: number) => {\n\n hex = hex.replace(/^#/, '')\n\n let r = parseInt(hex.slice(0, 2), 16)\n let g = parseInt(hex.slice(2, 4), 16)\n let b = parseInt(hex.slice(4, 6), 16)\n\n r = Math.floor(r * factor)\n g = Math.floor(g * factor)\n b = Math.floor(b * factor)\n\n r = Math.min(255, Math.max(0, r))\n g = Math.min(255, Math.max(0, g))\n b = Math.min(255, Math.max(0, b))\n\n return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\n}\n\nexport const adjustTextContrast = (color: string) => {\n color = color.replace(/^#/, '')\n const r = parseInt(color.slice(0, 2), 16);\n const g = parseInt(color.slice(2, 4), 16);\n const b = parseInt(color.slice(4, 6), 16);\n\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n return luminance > 0.5 ? '#111111' : '#FFFFFF';\n}\n\nexport const alpha = (color: string, opacity = 1) => {\n if (typeof opacity !== 'number') return color\n let _opacity = opacity * 100\n if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\n return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\n};\n\n"],"names":["_css"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/css/index.ts"],"sourcesContent":["import getValue from \"./getValue\"\r\nimport getProps from \"./getProps\"\r\nimport aliases from \"./aliases\"\r\nimport { Aliases, BreakpointKeys, CSSOptionProps, CSSProps } from './types'\r\nimport { css as _css } from \"oncss\"\r\n\r\nexport {\r\n getValue,\r\n getProps\r\n}\r\n\r\nexport const breakpoints = {\r\n xs: 0,\r\n sm: 600,\r\n md: 900,\r\n lg: 1200,\r\n xl: 1536\r\n}\r\n\r\nexport const css = (props: CSSProps, options?: CSSOptionProps) => {\r\n const cssOptions: CSSOptionProps = {\r\n ...options,\r\n breakpoints,\r\n aliases,\r\n getValue: (p: any, v: any, _c: any, dept) => {\r\n if (options?.getValue) {\r\n let _val = options?.getValue(p, v, _c, dept)\r\n if (_val) return _val\r\n }\r\n return getValue(p, v, _c)\r\n },\r\n getProps: (p: any, v: any, _c: any, dept) => {\r\n if (options?.getProps) {\r\n let _p = options?.getProps(p, v, _c, dept)\r\n if (_p) return _p\r\n }\r\n return getProps(p, v, _c)\r\n },\r\n }\r\n return _css<Aliases, BreakpointKeys>(props, cssOptions)\r\n}\r\n\r\nexport const adjustColor = (hex: string, factor: number) => {\r\n\r\n hex = hex.replace(/^#/, '')\r\n\r\n let r = parseInt(hex.slice(0, 2), 16)\r\n let g = parseInt(hex.slice(2, 4), 16)\r\n let b = parseInt(hex.slice(4, 6), 16)\r\n\r\n r = Math.floor(r * factor)\r\n g = Math.floor(g * factor)\r\n b = Math.floor(b * factor)\r\n\r\n r = Math.min(255, Math.max(0, r))\r\n g = Math.min(255, Math.max(0, g))\r\n b = Math.min(255, Math.max(0, b))\r\n\r\n return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;\r\n}\r\n\r\nexport const adjustTextContrast = (color: string) => {\r\n color = color.replace(/^#/, '')\r\n const r = parseInt(color.slice(0, 2), 16);\r\n const g = parseInt(color.slice(2, 4), 16);\r\n const b = parseInt(color.slice(4, 6), 16);\r\n\r\n const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\r\n return luminance > 0.5 ? '#111111' : '#FFFFFF';\r\n}\r\n\r\nexport const alpha = (color: string, opacity = 1) => {\r\n if (typeof opacity !== 'number') return color\r\n let _opacity = opacity * 100\r\n if (!color.startsWith(\"#\")) throw new Error(`color must be hex`)\r\n return (color + (`0${Math.round((255 / 100) * _opacity).toString(16)}`.slice(-2))).toUpperCase();\r\n};\r\n\r\n"],"names":["_css"],"mappings":"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"}
|
package/css/types.d.ts
CHANGED
|
@@ -40,7 +40,6 @@ type Aliases = {
|
|
|
40
40
|
width?: CSSValueType<'width'> | BreakpointKeys;
|
|
41
41
|
height?: CSSValueType<'height'>;
|
|
42
42
|
borderColor?: CSSValueType<'backgroundColor'> | ColorsRefTypes;
|
|
43
|
-
fontFamily?: CSSValueType<"fontFamily"> | "default";
|
|
44
43
|
fontSize?: CSSValueType<"fontSize"> | TypographyRefTypes;
|
|
45
44
|
minWidth?: CSSValueType<"minWidth"> | BreakpointKeys;
|
|
46
45
|
maxWidth?: CSSValueType<"maxWidth"> | BreakpointKeys;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimation.js","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["import { css } from '../css'\nimport { useId } from 'react'\nimport { CSSProps } from '../css/types'\n\nexport const animationEases = {\n easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\n easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\n sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\n linear: \"cubic-bezier(0, 0, 1, 1)\",\n easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\n}\n\nexport interface UseAnimationProps {\n delay?: number;\n duration?: number;\n from: CSSProps;\n to: CSSProps;\n ease?: keyof typeof animationEases;\n}\n\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\n let _delay = delay || 0;\n let _duration = duration || 600;\n let _ease = ease || \"easeBounceOut\"\n const id = \"anim\" + useId().replace(/:/g, \"\")\n const anim = css({\n animationName: id,\n animationDelay: _delay + \"ms\",\n animationDuration: _duration + \"ms\",\n animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,\n [`@keyframes ${id}`]: {\n from: from as any,\n to: to as any\n }\n })\n return anim.classname\n}\n\nexport default useAnimation"],"names":["useId","css"],"mappings":"kIAIO,MAAM,cAAc,GAAG;AAC1B,IAAA,SAAS,EAAE,8BAA8B;AACzC,IAAA,OAAO,EAAE,8BAA8B;AACvC,IAAA,MAAM,EAAE,4BAA4B;AACpC,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,aAAa,EAAE;;AAWnB,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAqB,KAAI;AAC5E,IAAA,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC;AACvB,IAAA,IAAI,SAAS,GAAG,QAAQ,IAAI,GAAG;AAC/B,IAAA,IAAI,KAAK,GAAG,IAAI,IAAI,eAAe;AACnC,IAAA,MAAM,EAAE,GAAG,MAAM,GAAGA,WAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAGC,SAAG,CAAC;AACb,QAAA,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,MAAM,GAAG,IAAI;QAC7B,iBAAiB,EAAE,SAAS,GAAG,IAAI;QACnC,uBAAuB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,aAAa;AAC9E,QAAA,CAAC,CAAA,WAAA,EAAc,EAAE,CAAA,CAAE,GAAG;AAClB,YAAA,IAAI,EAAE,IAAW;AACjB,YAAA,EAAE,EAAE;AACP;AACJ,KAAA,CAAC;IACF,OAAO,IAAI,CAAC,SAAS;AACzB"}
|
|
1
|
+
{"version":3,"file":"useAnimation.js","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["import { css } from '../css'\r\nimport { useId } from 'react'\r\nimport { CSSProps } from '../css/types'\r\n\r\nexport const animationEases = {\r\n easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\r\n easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\r\n easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\r\n sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\r\n linear: \"cubic-bezier(0, 0, 1, 1)\",\r\n easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\r\n}\r\n\r\nexport interface UseAnimationProps {\r\n delay?: number;\r\n duration?: number;\r\n from: CSSProps;\r\n to: CSSProps;\r\n ease?: keyof typeof animationEases;\r\n}\r\n\r\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\r\n let _delay = delay || 0;\r\n let _duration = duration || 600;\r\n let _ease = ease || \"easeBounceOut\"\r\n const id = \"anim\" + useId().replace(/:/g, \"\")\r\n const anim = css({\r\n animationName: id,\r\n animationDelay: _delay + \"ms\",\r\n animationDuration: _duration + \"ms\",\r\n animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,\r\n [`@keyframes ${id}`]: {\r\n from: from as any,\r\n to: to as any\r\n }\r\n })\r\n return anim.classname\r\n}\r\n\r\nexport default useAnimation"],"names":["useId","css"],"mappings":"kIAIO,MAAM,cAAc,GAAG;AAC1B,IAAA,SAAS,EAAE,8BAA8B;AACzC,IAAA,OAAO,EAAE,8BAA8B;AACvC,IAAA,MAAM,EAAE,4BAA4B;AACpC,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,aAAa,EAAE;;AAWnB,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAqB,KAAI;AAC5E,IAAA,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC;AACvB,IAAA,IAAI,SAAS,GAAG,QAAQ,IAAI,GAAG;AAC/B,IAAA,IAAI,KAAK,GAAG,IAAI,IAAI,eAAe;AACnC,IAAA,MAAM,EAAE,GAAG,MAAM,GAAGA,WAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAGC,SAAG,CAAC;AACb,QAAA,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,MAAM,GAAG,IAAI;QAC7B,iBAAiB,EAAE,SAAS,GAAG,IAAI;QACnC,uBAAuB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,aAAa;AAC9E,QAAA,CAAC,CAAA,WAAA,EAAc,EAAE,CAAA,CAAE,GAAG;AAClB,YAAA,IAAI,EAAE,IAAW;AACjB,YAAA,EAAE,EAAE;AACP;AACJ,KAAA,CAAC;IACF,OAAO,IAAI,CAAC,SAAS;AACzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAnimation.mjs","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["import { css } from '../css'\nimport { useId } from 'react'\nimport { CSSProps } from '../css/types'\n\nexport const animationEases = {\n easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\n easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\n sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\n linear: \"cubic-bezier(0, 0, 1, 1)\",\n easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\n}\n\nexport interface UseAnimationProps {\n delay?: number;\n duration?: number;\n from: CSSProps;\n to: CSSProps;\n ease?: keyof typeof animationEases;\n}\n\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\n let _delay = delay || 0;\n let _duration = duration || 600;\n let _ease = ease || \"easeBounceOut\"\n const id = \"anim\" + useId().replace(/:/g, \"\")\n const anim = css({\n animationName: id,\n animationDelay: _delay + \"ms\",\n animationDuration: _duration + \"ms\",\n animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,\n [`@keyframes ${id}`]: {\n from: from as any,\n to: to as any\n }\n })\n return anim.classname\n}\n\nexport default useAnimation"],"names":[],"mappings":"6DAIO,MAAM,cAAc,GAAG;AAC1B,IAAA,SAAS,EAAE,8BAA8B;AACzC,IAAA,OAAO,EAAE,8BAA8B;AACvC,IAAA,MAAM,EAAE,4BAA4B;AACpC,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,aAAa,EAAE;;AAWnB,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAqB,KAAI;AAC5E,IAAA,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC;AACvB,IAAA,IAAI,SAAS,GAAG,QAAQ,IAAI,GAAG;AAC/B,IAAA,IAAI,KAAK,GAAG,IAAI,IAAI,eAAe;AACnC,IAAA,MAAM,EAAE,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAG,GAAG,CAAC;AACb,QAAA,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,MAAM,GAAG,IAAI;QAC7B,iBAAiB,EAAE,SAAS,GAAG,IAAI;QACnC,uBAAuB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,aAAa;AAC9E,QAAA,CAAC,CAAA,WAAA,EAAc,EAAE,CAAA,CAAE,GAAG;AAClB,YAAA,IAAI,EAAE,IAAW;AACjB,YAAA,EAAE,EAAE;AACP;AACJ,KAAA,CAAC;IACF,OAAO,IAAI,CAAC,SAAS;AACzB"}
|
|
1
|
+
{"version":3,"file":"useAnimation.mjs","sources":["../../src/hooks/useAnimation.ts"],"sourcesContent":["import { css } from '../css'\r\nimport { useId } from 'react'\r\nimport { CSSProps } from '../css/types'\r\n\r\nexport const animationEases = {\r\n easeInOut: \"cubic-bezier(0.4, 0, 0.2, 1)\",\r\n easeOut: \"cubic-bezier(0.0, 0, 0.2, 1)\",\r\n easeIn: \"cubic-bezier(0.4, 0, 1, 1)\",\r\n sharp: \"cubic-bezier(0.4, 0, 0.6, 1)\",\r\n linear: \"cubic-bezier(0, 0, 1, 1)\",\r\n easeBounceOut: \"cubic-bezier(0.68, -0.55, 0.265, 1.55)\"\r\n}\r\n\r\nexport interface UseAnimationProps {\r\n delay?: number;\r\n duration?: number;\r\n from: CSSProps;\r\n to: CSSProps;\r\n ease?: keyof typeof animationEases;\r\n}\r\n\r\nconst useAnimation = ({ from, to, delay, ease, duration }: UseAnimationProps) => {\r\n let _delay = delay || 0;\r\n let _duration = duration || 600;\r\n let _ease = ease || \"easeBounceOut\"\r\n const id = \"anim\" + useId().replace(/:/g, \"\")\r\n const anim = css({\r\n animationName: id,\r\n animationDelay: _delay + \"ms\",\r\n animationDuration: _duration + \"ms\",\r\n animationTimingFunction: animationEases[_ease] || animationEases.easeBounceOut,\r\n [`@keyframes ${id}`]: {\r\n from: from as any,\r\n to: to as any\r\n }\r\n })\r\n return anim.classname\r\n}\r\n\r\nexport default useAnimation"],"names":[],"mappings":"6DAIO,MAAM,cAAc,GAAG;AAC1B,IAAA,SAAS,EAAE,8BAA8B;AACzC,IAAA,OAAO,EAAE,8BAA8B;AACvC,IAAA,MAAM,EAAE,4BAA4B;AACpC,IAAA,KAAK,EAAE,8BAA8B;AACrC,IAAA,MAAM,EAAE,0BAA0B;AAClC,IAAA,aAAa,EAAE;;AAWnB,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAqB,KAAI;AAC5E,IAAA,IAAI,MAAM,GAAG,KAAK,IAAI,CAAC;AACvB,IAAA,IAAI,SAAS,GAAG,QAAQ,IAAI,GAAG;AAC/B,IAAA,IAAI,KAAK,GAAG,IAAI,IAAI,eAAe;AACnC,IAAA,MAAM,EAAE,GAAG,MAAM,GAAG,KAAK,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;IAC7C,MAAM,IAAI,GAAG,GAAG,CAAC;AACb,QAAA,aAAa,EAAE,EAAE;QACjB,cAAc,EAAE,MAAM,GAAG,IAAI;QAC7B,iBAAiB,EAAE,SAAS,GAAG,IAAI;QACnC,uBAAuB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC,aAAa;AAC9E,QAAA,CAAC,CAAA,WAAA,EAAc,EAAE,CAAA,CAAE,GAAG;AAClB,YAAA,IAAI,EAAE,IAAW;AACjB,YAAA,EAAE,EAAE;AACP;AACJ,KAAA,CAAC;IACF,OAAO,IAAI,CAAC,SAAS;AACzB"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('../theme/ThemeDefaultOptions.js');var core=require('../theme/core.js');require('../css/getValue.js'),require('oncss'),require('
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('../theme/ThemeDefaultOptions.js');var core=require('../theme/core.js');require('../css/getValue.js'),require('oncss'),require('../theme/ThemeProvider.js'),require('react-state-bucket');const useColorTemplate = (color, type) => {
|
|
2
2
|
var _a;
|
|
3
3
|
const theme = core.useTheme();
|
|
4
4
|
let _color = color === 'default' ? "background" : color;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColorTemplate.js","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\nexport type ColorTemplateColors = \"default\" | \"brand\" | \"accent\" | \"info\" | \"success\" | \"warning\" | \"danger\"\nexport type ColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"alpha\"\n\nconst useColorTemplate = (color: ColorTemplateColors, type: ColorTemplateType) => {\n const theme: any = useTheme()\n let _color = color === 'default' ? \"background\" : color as any\n return theme.colors[_color]?.template[type]\n}\n\nexport default useColorTemplate"],"names":["useTheme"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useColorTemplate.js","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\r\nexport type ColorTemplateColors = \"default\" | \"brand\" | \"accent\" | \"info\" | \"success\" | \"warning\" | \"danger\"\r\nexport type ColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"alpha\"\r\n\r\nconst useColorTemplate = (color: ColorTemplateColors, type: ColorTemplateType) => {\r\n const theme: any = useTheme()\r\n let _color = color === 'default' ? \"background\" : color as any\r\n return theme.colors[_color]?.template[type]\r\n}\r\n\r\nexport default useColorTemplate"],"names":["useTheme"],"mappings":"wQAIA,MAAM,gBAAgB,GAAG,CAAC,KAA0B,EAAE,IAAuB,KAAI;;AAC7E,IAAA,MAAM,KAAK,GAAQA,aAAQ,EAAE;AAC7B,IAAA,IAAI,MAAM,GAAG,KAAK,KAAK,SAAS,GAAG,YAAY,GAAG,KAAY;AAC9D,IAAA,OAAO,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,IAAI,CAAC;AAC/C"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import'../theme/ThemeDefaultOptions.mjs';import {useTheme}from'../theme/core.mjs';import'../css/getValue.mjs';import'oncss';import'
|
|
1
|
+
import'../theme/ThemeDefaultOptions.mjs';import {useTheme}from'../theme/core.mjs';import'../css/getValue.mjs';import'oncss';import'../theme/ThemeProvider.mjs';import'react-state-bucket';const useColorTemplate = (color, type) => {
|
|
2
2
|
var _a;
|
|
3
3
|
const theme = useTheme();
|
|
4
4
|
let _color = color === 'default' ? "background" : color;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColorTemplate.mjs","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\nexport type ColorTemplateColors = \"default\" | \"brand\" | \"accent\" | \"info\" | \"success\" | \"warning\" | \"danger\"\nexport type ColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"alpha\"\n\nconst useColorTemplate = (color: ColorTemplateColors, type: ColorTemplateType) => {\n const theme: any = useTheme()\n let _color = color === 'default' ? \"background\" : color as any\n return theme.colors[_color]?.template[type]\n}\n\nexport default useColorTemplate"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useColorTemplate.mjs","sources":["../../src/hooks/useColorTemplate.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\r\nexport type ColorTemplateColors = \"default\" | \"brand\" | \"accent\" | \"info\" | \"success\" | \"warning\" | \"danger\"\r\nexport type ColorTemplateType = \"fill\" | \"outline\" | \"text\" | \"alpha\"\r\n\r\nconst useColorTemplate = (color: ColorTemplateColors, type: ColorTemplateType) => {\r\n const theme: any = useTheme()\r\n let _color = color === 'default' ? \"background\" : color as any\r\n return theme.colors[_color]?.template[type]\r\n}\r\n\r\nexport default useColorTemplate"],"names":[],"mappings":"0LAIA,MAAM,gBAAgB,GAAG,CAAC,KAA0B,EAAE,IAAuB,KAAI;;AAC7E,IAAA,MAAM,KAAK,GAAQ,QAAQ,EAAE;AAC7B,IAAA,IAAI,MAAM,GAAG,KAAK,KAAK,SAAS,GAAG,YAAY,GAAG,KAAY;AAC9D,IAAA,OAAO,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,IAAI,CAAC;AAC/C"}
|
package/hooks/useInterface.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('../theme/ThemeDefaultOptions.js');var core=require('../theme/core.js');require('../css/getValue.js'),require('oncss'),require('
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('../theme/ThemeDefaultOptions.js');var core=require('../theme/core.js');require('../css/getValue.js'),require('oncss'),require('../theme/ThemeProvider.js'),require('react-state-bucket');const useInterface = (name, userPorps, defaultProps) => {
|
|
2
2
|
const theme = core.useTheme();
|
|
3
3
|
const _interface = theme.interfaces[name];
|
|
4
4
|
if (_interface) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInterface.js","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n const theme = useTheme()\n const _interface = theme.interfaces[name]\n\n if (_interface) {\n defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)\n }\n return [{ ...defaultProps, ...userPorps }, theme]\n}\n\nexport default useInterface"],"names":["useTheme"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useInterface.js","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\r\n\r\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\r\n const theme = useTheme()\r\n const _interface = theme.interfaces[name]\r\n\r\n if (_interface) {\r\n defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)\r\n }\r\n return [{ ...defaultProps, ...userPorps }, theme]\r\n}\r\n\r\nexport default useInterface"],"names":["useTheme"],"mappings":"wQAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;IACxB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAEzC,IAAI,UAAU,EAAE;QACZ,YAAY,GAAG,UAAU,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAS,YAAY,GAAK,SAAS,CAAA,EAAI,KAAK,CAAC;IAC1E;AACA,IAAA,OAAO,iCAAM,YAAY,CAAA,EAAK,SAAS,CAAA,EAAI,KAAK,CAAC;AACrD"}
|
package/hooks/useInterface.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import'../theme/ThemeDefaultOptions.mjs';import {useTheme}from'../theme/core.mjs';import'../css/getValue.mjs';import'oncss';import'
|
|
1
|
+
import'../theme/ThemeDefaultOptions.mjs';import {useTheme}from'../theme/core.mjs';import'../css/getValue.mjs';import'oncss';import'../theme/ThemeProvider.mjs';import'react-state-bucket';const useInterface = (name, userPorps, defaultProps) => {
|
|
2
2
|
const theme = useTheme();
|
|
3
3
|
const _interface = theme.interfaces[name];
|
|
4
4
|
if (_interface) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useInterface.mjs","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\n\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\n const theme = useTheme()\n const _interface = theme.interfaces[name]\n\n if (_interface) {\n defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)\n }\n return [{ ...defaultProps, ...userPorps }, theme]\n}\n\nexport default useInterface"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useInterface.mjs","sources":["../../src/hooks/useInterface.ts"],"sourcesContent":["import { useTheme } from \"../theme\"\r\n\r\nconst useInterface = <P extends object>(name: string, userPorps: P, defaultProps: P) => {\r\n const theme = useTheme()\r\n const _interface = theme.interfaces[name]\r\n\r\n if (_interface) {\r\n defaultProps = _interface<P>({ ...defaultProps, ...userPorps }, theme)\r\n }\r\n return [{ ...defaultProps, ...userPorps }, theme]\r\n}\r\n\r\nexport default useInterface"],"names":[],"mappings":"0LAEA,MAAM,YAAY,GAAG,CAAmB,IAAY,EAAE,SAAY,EAAE,YAAe,KAAI;AACnF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;IACxB,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC;IAEzC,IAAI,UAAU,EAAE;QACZ,YAAY,GAAG,UAAU,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAS,YAAY,GAAK,SAAS,CAAA,EAAI,KAAK,CAAC;IAC1E;AACA,IAAA,OAAO,iCAAM,YAAY,CAAA,EAAK,SAAS,CAAA,EAAI,KAAK,CAAC;AACrD"}
|
package/hooks/usePortal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\nimport { appRootElement } from \"../AppRoot\";\n\nexport type UsePortalOptions = {\n container?: HTMLElement;\n autoMount?: boolean;\n}\n\nexport function usePortal(children: React.ReactNode, options?: UsePortalOptions) {\n options = options || {};\n if (options.autoMount === undefined) {\n options.autoMount = true;\n }\n const [mounted, setMounted] = React.useState(options.autoMount);\n const theme = useTheme();\n const { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el);\n return { el, root };\n }, [options.autoMount]);\n\n const container = () => {\n const rootEle = appRootElement();\n const container = options?.container || rootEle\n if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\n return container;\n }\n\n const mount = () => {\n const cont = container();\n if (!cont.contains(el)) {\n cont.appendChild(el);\n }\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\n }\n\n const unmount = () => {\n root.render(null)\n el.remove();\n }\n\n\n useEffect(() => {\n if (mounted) {\n mount()\n } else {\n unmount()\n }\n }, [mounted]);\n\n useEffect(() => {\n if (mounted) {\n mount()\n }\n }, [children]);\n\n useEffect(() => {\n return () => {\n unmount()\n };\n }, []);\n\n return {\n isMount: () => mounted,\n mount: () => setMounted(true),\n unmount: () => setMounted(false)\n }\n}\n\n\nexport default usePortal;"],"names":["useTheme","useMemo","createRoot","appRootElement","_jsx","ThemeProvider","useEffect"],"mappings":"yaAUM,SAAU,SAAS,CAAC,QAAyB,EAAE,OAA0B,EAAA;AAC5E,IAAA,OAAO,GAAG,OAAO,IAAI,EAAE;AACvB,IAAA,IAAI,OAAO,CAAC,SAAS,KAAK,SAAS,EAAE;AAClC,QAAA,OAAO,CAAC,SAAS,GAAG,IAAI;IAC3B;AACA,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/D,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAGC,aAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACxC,QAAA,MAAM,IAAI,GAAGC,iBAAU,CAAC,EAAE,CAAC;AAC3B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;AACtB,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAEvB,MAAM,SAAS,GAAG,MAAK;AACpB,QAAA,MAAM,OAAO,GAAGC,oBAAc,EAAE;AAChC,QAAA,MAAM,SAAS,GAAG,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,SAAS,KAAI,OAAO;AAC/C,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8FAAA,CAAgG,CAAC;AACjI,QAAA,OAAO,SAAS;AACnB,IAAA,CAAC;IAED,MAAM,KAAK,GAAG,MAAK;AAChB,QAAA,MAAM,IAAI,GAAG,SAAS,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AACrB,YAAA,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QACvB;AACA,QAAA,IAAI,CAAC,MAAM,CAACC,cAAA,CAACC,qBAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAED,MAAM,OAAO,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACjB,EAAE,CAAC,MAAM,EAAE;AACd,IAAA,CAAC;IAGDC,eAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;aAAO;AACJ,YAAA,OAAO,EAAE;QACZ;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEbA,eAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEdA,eAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;AACT,YAAA,OAAO,EAAE;AACZ,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;AACJ,QAAA,OAAO,EAAE,MAAM,OAAO;AACtB,QAAA,KAAK,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC;AAC7B,QAAA,OAAO,EAAE,MAAM,UAAU,CAAC,KAAK;KACjC;AACJ"}
|
|
1
|
+
{"version":3,"file":"usePortal.js","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { appRootElement } from \"../AppRoot\";\r\n\r\nexport type UsePortalOptions = {\r\n container?: HTMLElement;\r\n autoMount?: boolean;\r\n}\r\n\r\nexport function usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n options = options || {};\r\n if (options.autoMount === undefined) {\r\n options.autoMount = true;\r\n }\r\n const [mounted, setMounted] = React.useState(options.autoMount);\r\n const theme = useTheme();\r\n const { el, root } = useMemo(() => {\r\n const el = document.createElement(\"div\");\r\n const root = createRoot(el);\r\n return { el, root };\r\n }, [options.autoMount]);\r\n\r\n const container = () => {\r\n const rootEle = appRootElement();\r\n const container = options?.container || rootEle\r\n if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n return container;\r\n }\r\n\r\n const mount = () => {\r\n const cont = container();\r\n if (!cont.contains(el)) {\r\n cont.appendChild(el);\r\n }\r\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\r\n }\r\n\r\n const unmount = () => {\r\n root.render(null)\r\n el.remove();\r\n }\r\n\r\n\r\n useEffect(() => {\r\n if (mounted) {\r\n mount()\r\n } else {\r\n unmount()\r\n }\r\n }, [mounted]);\r\n\r\n useEffect(() => {\r\n if (mounted) {\r\n mount()\r\n }\r\n }, [children]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n unmount()\r\n };\r\n }, []);\r\n\r\n return {\r\n isMount: () => mounted,\r\n mount: () => setMounted(true),\r\n unmount: () => setMounted(false)\r\n }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":["useTheme","useMemo","createRoot","appRootElement","_jsx","ThemeProvider","useEffect"],"mappings":"yaAUM,SAAU,SAAS,CAAC,QAAyB,EAAE,OAA0B,EAAA;AAC5E,IAAA,OAAO,GAAG,OAAO,IAAI,EAAE;AACvB,IAAA,IAAI,OAAO,CAAC,SAAS,KAAK,SAAS,EAAE;AAClC,QAAA,OAAO,CAAC,SAAS,GAAG,IAAI;IAC3B;AACA,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/D,IAAA,MAAM,KAAK,GAAGA,aAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAGC,aAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACxC,QAAA,MAAM,IAAI,GAAGC,iBAAU,CAAC,EAAE,CAAC;AAC3B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;AACtB,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAEvB,MAAM,SAAS,GAAG,MAAK;AACpB,QAAA,MAAM,OAAO,GAAGC,oBAAc,EAAE;AAChC,QAAA,MAAM,SAAS,GAAG,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,SAAS,KAAI,OAAO;AAC/C,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8FAAA,CAAgG,CAAC;AACjI,QAAA,OAAO,SAAS;AACnB,IAAA,CAAC;IAED,MAAM,KAAK,GAAG,MAAK;AAChB,QAAA,MAAM,IAAI,GAAG,SAAS,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AACrB,YAAA,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QACvB;AACA,QAAA,IAAI,CAAC,MAAM,CAACC,cAAA,CAACC,qBAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAED,MAAM,OAAO,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACjB,EAAE,CAAC,MAAM,EAAE;AACd,IAAA,CAAC;IAGDC,eAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;aAAO;AACJ,YAAA,OAAO,EAAE;QACZ;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEbA,eAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEdA,eAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;AACT,YAAA,OAAO,EAAE;AACZ,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;AACJ,QAAA,OAAO,EAAE,MAAM,OAAO;AACtB,QAAA,KAAK,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC;AAC7B,QAAA,OAAO,EAAE,MAAM,UAAU,CAAC,KAAK;KACjC;AACJ"}
|
package/hooks/usePortal.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePortal.mjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { ThemeProvider, useTheme } from \"../theme\";\nimport { appRootElement } from \"../AppRoot\";\n\nexport type UsePortalOptions = {\n container?: HTMLElement;\n autoMount?: boolean;\n}\n\nexport function usePortal(children: React.ReactNode, options?: UsePortalOptions) {\n options = options || {};\n if (options.autoMount === undefined) {\n options.autoMount = true;\n }\n const [mounted, setMounted] = React.useState(options.autoMount);\n const theme = useTheme();\n const { el, root } = useMemo(() => {\n const el = document.createElement(\"div\");\n const root = createRoot(el);\n return { el, root };\n }, [options.autoMount]);\n\n const container = () => {\n const rootEle = appRootElement();\n const container = options?.container || rootEle\n if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\n return container;\n }\n\n const mount = () => {\n const cont = container();\n if (!cont.contains(el)) {\n cont.appendChild(el);\n }\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\n }\n\n const unmount = () => {\n root.render(null)\n el.remove();\n }\n\n\n useEffect(() => {\n if (mounted) {\n mount()\n } else {\n unmount()\n }\n }, [mounted]);\n\n useEffect(() => {\n if (mounted) {\n mount()\n }\n }, [children]);\n\n useEffect(() => {\n return () => {\n unmount()\n };\n }, []);\n\n return {\n isMount: () => mounted,\n mount: () => setMounted(true),\n unmount: () => setMounted(false)\n }\n}\n\n\nexport default usePortal;"],"names":["React","_jsx"],"mappings":"kYAUM,SAAU,SAAS,CAAC,QAAyB,EAAE,OAA0B,EAAA;AAC5E,IAAA,OAAO,GAAG,OAAO,IAAI,EAAE;AACvB,IAAA,IAAI,OAAO,CAAC,SAAS,KAAK,SAAS,EAAE;AAClC,QAAA,OAAO,CAAC,SAAS,GAAG,IAAI;IAC3B;AACA,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/D,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACxC,QAAA,MAAM,IAAI,GAAG,UAAU,CAAC,EAAE,CAAC;AAC3B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;AACtB,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAEvB,MAAM,SAAS,GAAG,MAAK;AACpB,QAAA,MAAM,OAAO,GAAG,cAAc,EAAE;AAChC,QAAA,MAAM,SAAS,GAAG,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,SAAS,KAAI,OAAO;AAC/C,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8FAAA,CAAgG,CAAC;AACjI,QAAA,OAAO,SAAS;AACnB,IAAA,CAAC;IAED,MAAM,KAAK,GAAG,MAAK;AAChB,QAAA,MAAM,IAAI,GAAG,SAAS,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AACrB,YAAA,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QACvB;AACA,QAAA,IAAI,CAAC,MAAM,CAACC,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAED,MAAM,OAAO,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACjB,EAAE,CAAC,MAAM,EAAE;AACd,IAAA,CAAC;IAGD,SAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;aAAO;AACJ,YAAA,OAAO,EAAE;QACZ;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEb,SAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;AACT,YAAA,OAAO,EAAE;AACZ,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;AACJ,QAAA,OAAO,EAAE,MAAM,OAAO;AACtB,QAAA,KAAK,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC;AAC7B,QAAA,OAAO,EAAE,MAAM,UAAU,CAAC,KAAK;KACjC;AACJ"}
|
|
1
|
+
{"version":3,"file":"usePortal.mjs","sources":["../../src/hooks/usePortal.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { ThemeProvider, useTheme } from \"../theme\";\r\nimport { appRootElement } from \"../AppRoot\";\r\n\r\nexport type UsePortalOptions = {\r\n container?: HTMLElement;\r\n autoMount?: boolean;\r\n}\r\n\r\nexport function usePortal(children: React.ReactNode, options?: UsePortalOptions) {\r\n options = options || {};\r\n if (options.autoMount === undefined) {\r\n options.autoMount = true;\r\n }\r\n const [mounted, setMounted] = React.useState(options.autoMount);\r\n const theme = useTheme();\r\n const { el, root } = useMemo(() => {\r\n const el = document.createElement(\"div\");\r\n const root = createRoot(el);\r\n return { el, root };\r\n }, [options.autoMount]);\r\n\r\n const container = () => {\r\n const rootEle = appRootElement();\r\n const container = options?.container || rootEle\r\n if (!container) throw new Error(`Container not found for portal. Please ensure that AppRoot is present in the application tree.`);\r\n return container;\r\n }\r\n\r\n const mount = () => {\r\n const cont = container();\r\n if (!cont.contains(el)) {\r\n cont.appendChild(el);\r\n }\r\n root.render(<ThemeProvider theme={theme.name}>{children}</ThemeProvider>)\r\n }\r\n\r\n const unmount = () => {\r\n root.render(null)\r\n el.remove();\r\n }\r\n\r\n\r\n useEffect(() => {\r\n if (mounted) {\r\n mount()\r\n } else {\r\n unmount()\r\n }\r\n }, [mounted]);\r\n\r\n useEffect(() => {\r\n if (mounted) {\r\n mount()\r\n }\r\n }, [children]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n unmount()\r\n };\r\n }, []);\r\n\r\n return {\r\n isMount: () => mounted,\r\n mount: () => setMounted(true),\r\n unmount: () => setMounted(false)\r\n }\r\n}\r\n\r\n\r\nexport default usePortal;"],"names":["React","_jsx"],"mappings":"kYAUM,SAAU,SAAS,CAAC,QAAyB,EAAE,OAA0B,EAAA;AAC5E,IAAA,OAAO,GAAG,OAAO,IAAI,EAAE;AACvB,IAAA,IAAI,OAAO,CAAC,SAAS,KAAK,SAAS,EAAE;AAClC,QAAA,OAAO,CAAC,SAAS,GAAG,IAAI;IAC3B;AACA,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC;AAC/D,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;IACxB,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,MAAK;QAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACxC,QAAA,MAAM,IAAI,GAAG,UAAU,CAAC,EAAE,CAAC;AAC3B,QAAA,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE;AACtB,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAEvB,MAAM,SAAS,GAAG,MAAK;AACpB,QAAA,MAAM,OAAO,GAAG,cAAc,EAAE;AAChC,QAAA,MAAM,SAAS,GAAG,CAAA,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,SAAS,KAAI,OAAO;AAC/C,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,8FAAA,CAAgG,CAAC;AACjI,QAAA,OAAO,SAAS;AACnB,IAAA,CAAC;IAED,MAAM,KAAK,GAAG,MAAK;AAChB,QAAA,MAAM,IAAI,GAAG,SAAS,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;AACrB,YAAA,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;QACvB;AACA,QAAA,IAAI,CAAC,MAAM,CAACC,GAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,KAAK,CAAC,IAAI,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAiB,CAAC;AAC5E,IAAA,CAAC;IAED,MAAM,OAAO,GAAG,MAAK;AAClB,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;QACjB,EAAE,CAAC,MAAM,EAAE;AACd,IAAA,CAAC;IAGD,SAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;aAAO;AACJ,YAAA,OAAO,EAAE;QACZ;AACH,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;IAEb,SAAS,CAAC,MAAK;QACZ,IAAI,OAAO,EAAE;AACV,YAAA,KAAK,EAAE;QACV;AACH,IAAA,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;IAEd,SAAS,CAAC,MAAK;AACZ,QAAA,OAAO,MAAK;AACT,YAAA,OAAO,EAAE;AACZ,QAAA,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO;AACJ,QAAA,OAAO,EAAE,MAAM,OAAO;AACtB,QAAA,KAAK,EAAE,MAAM,UAAU,CAAC,IAAI,CAAC;AAC7B,QAAA,OAAO,EAAE,MAAM,UAAU,CAAC,KAAK;KACjC;AACJ"}
|
package/hooks/useScrollbar.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('../theme/ThemeDefaultOptions.js');var core=require('../theme/core.js'),index=require('../css/index.js');require('
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});require('../theme/ThemeDefaultOptions.js');var core=require('../theme/core.js'),index=require('../css/index.js');require('../theme/ThemeProvider.js'),require('react-state-bucket');const useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }) => {
|
|
2
2
|
let theme = core.getTheme(themeName);
|
|
3
3
|
if (!theme) {
|
|
4
4
|
console.error(`useScrollbar: The theme '${themeName}' is not defined. Please make sure to use a valid theme name.`);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollbar.js","sources":["../../src/hooks/useScrollbar.ts"],"sourcesContent":["import { getTheme } from '../theme'\nimport { css } from '../css'\nimport { ThemeOptions } from '../theme/types';\n\nexport type UseScrollbarOption = {\n themeName: string\n root_cls?: string;\n thumbSize?: number\n thumbColor?: string\n trackColor?: string\n}\n\ntype ClassName = string\n\nconst useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }: UseScrollbarOption): ClassName => {\n let theme = getTheme(themeName)\n if (!theme) {\n console.error(`useScrollbar: The theme '${themeName}' is not defined. Please make sure to use a valid theme name.`)\n theme = getTheme(\"light\") as ThemeOptions\n }\n\n thumbSize = thumbSize || 10\n thumbColor = thumbColor || theme.colors.text.secondary\n trackColor = trackColor || theme.colors.divider\n root_cls = root_cls || \"\"\n\n let clss = {\n \"*\": root_cls ? `${root_cls} *` : `*`,\n \"scrollbar\": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,\n \"scrollbarThumb\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,\n \"scrollbarThumbHover\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,\n \"scrollbarTrack\": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,\n }\n\n return css({\n \"@global\": {\n [clss['*']]: {\n scrollbarWidth: \"thin\",\n scrollbarColor: `${thumbColor} ${trackColor}`,\n },\n [clss[\"scrollbar\"]]: {\n width: thumbSize,\n height: thumbSize,\n },\n [clss[\"scrollbarThumb\"]]: {\n backgroundColor: thumbColor,\n borderRadius: \"5px\",\n border: \"2px solid #f4f4f4\",\n },\n [clss[\"scrollbarThumbHover\"]]: {\n backgroundColor: thumbColor,\n },\n [clss['scrollbarTrack']]: {\n backgroundColor: trackColor,\n borderRadius: \"5px\",\n },\n }\n }, {\n injectStyle: typeof window !== 'undefined'\n }) as any\n}\n\nexport default useScrollbar\n"],"names":["getTheme","css"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useScrollbar.js","sources":["../../src/hooks/useScrollbar.ts"],"sourcesContent":["import { getTheme } from '../theme'\r\nimport { css } from '../css'\r\nimport { ThemeOptions } from '../theme/types';\r\n\r\nexport type UseScrollbarOption = {\r\n themeName: string\r\n root_cls?: string;\r\n thumbSize?: number\r\n thumbColor?: string\r\n trackColor?: string\r\n}\r\n\r\ntype ClassName = string\r\n\r\nconst useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }: UseScrollbarOption): ClassName => {\r\n let theme = getTheme(themeName)\r\n if (!theme) {\r\n console.error(`useScrollbar: The theme '${themeName}' is not defined. Please make sure to use a valid theme name.`)\r\n theme = getTheme(\"light\") as ThemeOptions\r\n }\r\n\r\n thumbSize = thumbSize || 10\r\n thumbColor = thumbColor || theme.colors.text.secondary\r\n trackColor = trackColor || theme.colors.divider\r\n root_cls = root_cls || \"\"\r\n\r\n let clss = {\r\n \"*\": root_cls ? `${root_cls} *` : `*`,\r\n \"scrollbar\": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,\r\n \"scrollbarThumb\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,\r\n \"scrollbarThumbHover\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,\r\n \"scrollbarTrack\": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,\r\n }\r\n\r\n return css({\r\n \"@global\": {\r\n [clss['*']]: {\r\n scrollbarWidth: \"thin\",\r\n scrollbarColor: `${thumbColor} ${trackColor}`,\r\n },\r\n [clss[\"scrollbar\"]]: {\r\n width: thumbSize,\r\n height: thumbSize,\r\n },\r\n [clss[\"scrollbarThumb\"]]: {\r\n backgroundColor: thumbColor,\r\n borderRadius: \"5px\",\r\n border: \"2px solid #f4f4f4\",\r\n },\r\n [clss[\"scrollbarThumbHover\"]]: {\r\n backgroundColor: thumbColor,\r\n },\r\n [clss['scrollbarTrack']]: {\r\n backgroundColor: trackColor,\r\n borderRadius: \"5px\",\r\n },\r\n }\r\n }, {\r\n injectStyle: typeof window !== 'undefined'\r\n }) as any\r\n}\r\n\r\nexport default useScrollbar\r\n"],"names":["getTheme","css"],"mappings":"0PAcA,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAsB,KAAe;AAChH,IAAA,IAAI,KAAK,GAAGA,aAAQ,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,4BAA4B,SAAS,CAAA,6DAAA,CAA+D,CAAC;AACnH,QAAA,KAAK,GAAGA,aAAQ,CAAC,OAAO,CAAiB;IAC5C;AAEA,IAAA,SAAS,GAAG,SAAS,IAAI,EAAE;IAC3B,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;IACtD,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO;AAC/C,IAAA,QAAQ,GAAG,QAAQ,IAAI,EAAE;AAEzB,IAAA,IAAI,IAAI,GAAG;QACR,GAAG,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAI,GAAG,CAAA,CAAA,CAAG;AACrC,QAAA,WAAW,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,qBAAA,EAAwB,QAAQ,CAAA,oBAAA,CAAsB,GAAG,CAAA,mBAAA,CAAqB;AACjH,QAAA,gBAAgB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,2BAAA,EAA8B,QAAQ,CAAA,0BAAA,CAA4B,GAAG,CAAA,yBAAA,CAA2B;AACxI,QAAA,qBAAqB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,iCAAA,EAAoC,QAAQ,CAAA,gCAAA,CAAkC,GAAG,CAAA,+BAAA,CAAiC;AAC/J,QAAA,gBAAgB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,2BAAA,EAA8B,QAAQ,CAAA,0BAAA,CAA4B,GAAG,CAAA,yBAAA,CAA2B;KAC1I;AAED,IAAA,OAAOC,SAAG,CAAC;AACR,QAAA,SAAS,EAAE;AACR,YAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG;AACV,gBAAA,cAAc,EAAE,MAAM;AACtB,gBAAA,cAAc,EAAE,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,UAAU,CAAA,CAAE;AAC/C,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG;AAClB,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,MAAM,EAAE,SAAS;AACnB,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG;AACvB,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACnB,gBAAA,MAAM,EAAE,mBAAmB;AAC7B,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG;AAC5B,gBAAA,eAAe,EAAE,UAAU;AAC7B,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG;AACvB,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACrB,aAAA;AACH;KACH,EAAE;AACA,QAAA,WAAW,EAAE,OAAO,MAAM,KAAK;AACjC,KAAA,CAAQ;AACZ"}
|
package/hooks/useScrollbar.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import'../theme/ThemeDefaultOptions.mjs';import {getTheme}from'../theme/core.mjs';import {css}from'../css/index.mjs';import'
|
|
1
|
+
import'../theme/ThemeDefaultOptions.mjs';import {getTheme}from'../theme/core.mjs';import {css}from'../css/index.mjs';import'../theme/ThemeProvider.mjs';import'react-state-bucket';const useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }) => {
|
|
2
2
|
let theme = getTheme(themeName);
|
|
3
3
|
if (!theme) {
|
|
4
4
|
console.error(`useScrollbar: The theme '${themeName}' is not defined. Please make sure to use a valid theme name.`);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollbar.mjs","sources":["../../src/hooks/useScrollbar.ts"],"sourcesContent":["import { getTheme } from '../theme'\nimport { css } from '../css'\nimport { ThemeOptions } from '../theme/types';\n\nexport type UseScrollbarOption = {\n themeName: string\n root_cls?: string;\n thumbSize?: number\n thumbColor?: string\n trackColor?: string\n}\n\ntype ClassName = string\n\nconst useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }: UseScrollbarOption): ClassName => {\n let theme = getTheme(themeName)\n if (!theme) {\n console.error(`useScrollbar: The theme '${themeName}' is not defined. Please make sure to use a valid theme name.`)\n theme = getTheme(\"light\") as ThemeOptions\n }\n\n thumbSize = thumbSize || 10\n thumbColor = thumbColor || theme.colors.text.secondary\n trackColor = trackColor || theme.colors.divider\n root_cls = root_cls || \"\"\n\n let clss = {\n \"*\": root_cls ? `${root_cls} *` : `*`,\n \"scrollbar\": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,\n \"scrollbarThumb\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,\n \"scrollbarThumbHover\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,\n \"scrollbarTrack\": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,\n }\n\n return css({\n \"@global\": {\n [clss['*']]: {\n scrollbarWidth: \"thin\",\n scrollbarColor: `${thumbColor} ${trackColor}`,\n },\n [clss[\"scrollbar\"]]: {\n width: thumbSize,\n height: thumbSize,\n },\n [clss[\"scrollbarThumb\"]]: {\n backgroundColor: thumbColor,\n borderRadius: \"5px\",\n border: \"2px solid #f4f4f4\",\n },\n [clss[\"scrollbarThumbHover\"]]: {\n backgroundColor: thumbColor,\n },\n [clss['scrollbarTrack']]: {\n backgroundColor: trackColor,\n borderRadius: \"5px\",\n },\n }\n }, {\n injectStyle: typeof window !== 'undefined'\n }) as any\n}\n\nexport default useScrollbar\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"useScrollbar.mjs","sources":["../../src/hooks/useScrollbar.ts"],"sourcesContent":["import { getTheme } from '../theme'\r\nimport { css } from '../css'\r\nimport { ThemeOptions } from '../theme/types';\r\n\r\nexport type UseScrollbarOption = {\r\n themeName: string\r\n root_cls?: string;\r\n thumbSize?: number\r\n thumbColor?: string\r\n trackColor?: string\r\n}\r\n\r\ntype ClassName = string\r\n\r\nconst useScrollbar = ({ themeName, root_cls, thumbSize, thumbColor, trackColor }: UseScrollbarOption): ClassName => {\r\n let theme = getTheme(themeName)\r\n if (!theme) {\r\n console.error(`useScrollbar: The theme '${themeName}' is not defined. Please make sure to use a valid theme name.`)\r\n theme = getTheme(\"light\") as ThemeOptions\r\n }\r\n\r\n thumbSize = thumbSize || 10\r\n thumbColor = thumbColor || theme.colors.text.secondary\r\n trackColor = trackColor || theme.colors.divider\r\n root_cls = root_cls || \"\"\r\n\r\n let clss = {\r\n \"*\": root_cls ? `${root_cls} *` : `*`,\r\n \"scrollbar\": root_cls ? `${root_cls}::-webkit-scrollbar, ${root_cls} ::-webkit-scrollbar` : `::-webkit-scrollbar`,\r\n \"scrollbarThumb\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb, ${root_cls} ::-webkit-scrollbar-thumb` : `::-webkit-scrollbar-thumb`,\r\n \"scrollbarThumbHover\": root_cls ? `${root_cls}::-webkit-scrollbar-thumb:hover, ${root_cls} ::-webkit-scrollbar-thumb:hover` : `::-webkit-scrollbar-thumb:hover`,\r\n \"scrollbarTrack\": root_cls ? `${root_cls}::-webkit-scrollbar-track, ${root_cls} ::-webkit-scrollbar-track` : `::-webkit-scrollbar-track`,\r\n }\r\n\r\n return css({\r\n \"@global\": {\r\n [clss['*']]: {\r\n scrollbarWidth: \"thin\",\r\n scrollbarColor: `${thumbColor} ${trackColor}`,\r\n },\r\n [clss[\"scrollbar\"]]: {\r\n width: thumbSize,\r\n height: thumbSize,\r\n },\r\n [clss[\"scrollbarThumb\"]]: {\r\n backgroundColor: thumbColor,\r\n borderRadius: \"5px\",\r\n border: \"2px solid #f4f4f4\",\r\n },\r\n [clss[\"scrollbarThumbHover\"]]: {\r\n backgroundColor: thumbColor,\r\n },\r\n [clss['scrollbarTrack']]: {\r\n backgroundColor: trackColor,\r\n borderRadius: \"5px\",\r\n },\r\n }\r\n }, {\r\n injectStyle: typeof window !== 'undefined'\r\n }) as any\r\n}\r\n\r\nexport default useScrollbar\r\n"],"names":[],"mappings":"mLAcA,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAsB,KAAe;AAChH,IAAA,IAAI,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,KAAK,EAAE;AACT,QAAA,OAAO,CAAC,KAAK,CAAC,4BAA4B,SAAS,CAAA,6DAAA,CAA+D,CAAC;AACnH,QAAA,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAiB;IAC5C;AAEA,IAAA,SAAS,GAAG,SAAS,IAAI,EAAE;IAC3B,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS;IACtD,UAAU,GAAG,UAAU,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO;AAC/C,IAAA,QAAQ,GAAG,QAAQ,IAAI,EAAE;AAEzB,IAAA,IAAI,IAAI,GAAG;QACR,GAAG,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAI,GAAG,CAAA,CAAA,CAAG;AACrC,QAAA,WAAW,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,qBAAA,EAAwB,QAAQ,CAAA,oBAAA,CAAsB,GAAG,CAAA,mBAAA,CAAqB;AACjH,QAAA,gBAAgB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,2BAAA,EAA8B,QAAQ,CAAA,0BAAA,CAA4B,GAAG,CAAA,yBAAA,CAA2B;AACxI,QAAA,qBAAqB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,iCAAA,EAAoC,QAAQ,CAAA,gCAAA,CAAkC,GAAG,CAAA,+BAAA,CAAiC;AAC/J,QAAA,gBAAgB,EAAE,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,2BAAA,EAA8B,QAAQ,CAAA,0BAAA,CAA4B,GAAG,CAAA,yBAAA,CAA2B;KAC1I;AAED,IAAA,OAAO,GAAG,CAAC;AACR,QAAA,SAAS,EAAE;AACR,YAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG;AACV,gBAAA,cAAc,EAAE,MAAM;AACtB,gBAAA,cAAc,EAAE,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,UAAU,CAAA,CAAE;AAC/C,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG;AAClB,gBAAA,KAAK,EAAE,SAAS;AAChB,gBAAA,MAAM,EAAE,SAAS;AACnB,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG;AACvB,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACnB,gBAAA,MAAM,EAAE,mBAAmB;AAC7B,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG;AAC5B,gBAAA,eAAe,EAAE,UAAU;AAC7B,aAAA;AACD,YAAA,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG;AACvB,gBAAA,eAAe,EAAE,UAAU;AAC3B,gBAAA,YAAY,EAAE,KAAK;AACrB,aAAA;AACH;KACH,EAAE;AACA,QAAA,WAAW,EAAE,OAAO,MAAM,KAAK;AACjC,KAAA,CAAQ;AACZ"}
|
package/isWindow.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"isWindow.js","sources":["../src/isWindow.ts"],"sourcesContent":["\nconst isWindow = () => typeof window !== 'undefined'\nexport default isWindow"],"names":[],"mappings":"sEACA,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,KAAK"}
|
|
1
|
+
{"version":3,"file":"isWindow.js","sources":["../src/isWindow.ts"],"sourcesContent":["\r\nconst isWindow = () => typeof window !== 'undefined'\r\nexport default isWindow"],"names":[],"mappings":"sEACA,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,KAAK"}
|
package/isWindow.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"isWindow.mjs","sources":["../src/isWindow.ts"],"sourcesContent":["\nconst isWindow = () => typeof window !== 'undefined'\nexport default isWindow"],"names":[],"mappings":"AACA,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,KAAK"}
|
|
1
|
+
{"version":3,"file":"isWindow.mjs","sources":["../src/isWindow.ts"],"sourcesContent":["\r\nconst isWindow = () => typeof window !== 'undefined'\r\nexport default isWindow"],"names":[],"mappings":"AACA,MAAM,QAAQ,GAAG,MAAM,OAAO,MAAM,KAAK"}
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -1,109 +1,109 @@
|
|
|
1
|
-
# Xanui Core
|
|
2
|
-
|
|
3
|
-
Xanui Core is a lightweight styling and theming toolkit for React. It bundles a constraint-based CSS generator, a TypeScript-friendly `<Tag>` primitive, responsive helpers, and an opinionated theme engine so that design tokens, animations, and layout logic stay consistent across your application.
|
|
4
|
-
|
|
5
|
-
## Highlights
|
|
6
|
-
|
|
7
|
-
- Build any element with `<Tag>` and the ergonomic `sx`/alias props while still passing native attributes.
|
|
8
|
-
- Author design tokens once via `createTheme`, ship them with `ThemeProvider`, and switch them at runtime with `createThemeSwitcher`.
|
|
9
|
-
- Drive responsive layouts using `BreakpointProvider`, `useBreakpoint`, and `useBreakpointProps` without bespoke media queries.
|
|
10
|
-
- Compose micro-animations through `useAnimation`, ready-made `Transition` variants, and reusable CSS utilities.
|
|
11
|
-
- Support SSR portals by rehydrating critical styles with `RenderServerStyles`.
|
|
12
|
-
|
|
13
|
-
## Installation
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npm install @xanui/core
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Quick Start
|
|
20
|
-
|
|
21
|
-
```tsx
|
|
22
|
-
import { ThemeProvider, Tag, createTheme, createThemeSwitcher } from '@xanui/core'
|
|
23
|
-
|
|
24
|
-
// Register a custom theme once at startup
|
|
25
|
-
createTheme('brand', {
|
|
26
|
-
colors: {
|
|
27
|
-
brand: { primary: '#7C3AED', secondary: '#5B21B6' },
|
|
28
|
-
},
|
|
29
|
-
})
|
|
30
|
-
|
|
31
|
-
const useThemeSwitcher = createThemeSwitcher('brand', ThemeSwitcherOption)
|
|
32
|
-
|
|
33
|
-
export const App = () => {
|
|
34
|
-
const { name, change } = useThemeSwitcher()
|
|
35
|
-
|
|
36
|
-
return (
|
|
37
|
-
<ThemeProvider theme={name} isRootProvider>
|
|
38
|
-
<Tag
|
|
39
|
-
component="main"
|
|
40
|
-
px={24}
|
|
41
|
-
py={32}
|
|
42
|
-
bgcolor="background"
|
|
43
|
-
color="text.primary"
|
|
44
|
-
gap={24}
|
|
45
|
-
>
|
|
46
|
-
<Tag component="h1" fontSize="h2">
|
|
47
|
-
Xanui Core
|
|
48
|
-
</Tag>
|
|
49
|
-
|
|
50
|
-
<button onClick={() => change(name === 'brand' ? 'dark' : 'brand')}>
|
|
51
|
-
Toggle Theme
|
|
52
|
-
</button>
|
|
53
|
-
</Tag>
|
|
54
|
-
</ThemeProvider>
|
|
55
|
-
)
|
|
56
|
-
}
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
## Core Concepts
|
|
60
|
-
|
|
61
|
-
- **Design Tokens** – `createTheme` merges your overrides with defaults and exposes typed references like `brand.primary` or typography presets.
|
|
62
|
-
- **Adaptive Layout** – Wrap your app with `BreakpointProvider` (automatically included by `ThemeProvider` when `isRootProvider` is `true`) to consume breakpoint helpers throughout the tree.
|
|
63
|
-
- **Composable Styles** – `css`, `getValue`, and `getProps` transform alias props, breakpoints, and pseudo selectors into atomic class names. Use them directly for utilities such as scrollbars or keyframes.
|
|
64
|
-
- **Animation Primitives** – `useAnimation` builds scoped keyframes on the fly; `Transition` controls mount/unmount sequences with variants such as `fade`, `slideDown`, or `collapseVertical`.
|
|
65
|
-
|
|
66
|
-
## Server-Side Rendering
|
|
67
|
-
|
|
68
|
-
When rendering on the server, collect the emitted styles:
|
|
69
|
-
|
|
70
|
-
```tsx
|
|
71
|
-
import RenderServerStyles from '@xanui/core/RenderServerStyles'
|
|
72
|
-
|
|
73
|
-
export const Document = () => (
|
|
74
|
-
<html>
|
|
75
|
-
<head>
|
|
76
|
-
<RenderServerStyles />
|
|
77
|
-
</head>
|
|
78
|
-
<body>{/* app */}</body>
|
|
79
|
-
</html>
|
|
80
|
-
)
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
## Documentation
|
|
84
|
-
|
|
85
|
-
Detailed API docs (props tables, option summaries, and usage examples) live inside the `docs/` directory. Each API/component has its own `README.md` for fast reference:
|
|
86
|
-
|
|
87
|
-
- `docs/tag/README.md`
|
|
88
|
-
- `docs/theme-provider/README.md`
|
|
89
|
-
- `docs/transition/README.md`
|
|
90
|
-
- `docs/use-animation/README.md`
|
|
91
|
-
- `docs/use-color-template/README.md`
|
|
92
|
-
- `docs/use-interface/README.md`
|
|
93
|
-
- `docs/use-breakpoint/README.md`
|
|
94
|
-
- `docs/use-breakpoint-props/README.md`
|
|
95
|
-
- `docs/use-scrollbar/README.md`
|
|
96
|
-
- `docs/render-server-styles/README.md`
|
|
97
|
-
- `docs/css/README.md`
|
|
98
|
-
- `docs/create-theme/README.md`
|
|
99
|
-
|
|
100
|
-
## Contributing
|
|
101
|
-
|
|
102
|
-
1. Fork and clone the repo.
|
|
103
|
-
2. Run `npm install`.
|
|
104
|
-
3. Use `npm run build` to verify type safety.
|
|
105
|
-
4. Submit a pull request that focuses on one improvement at a time.
|
|
106
|
-
|
|
107
|
-
---
|
|
108
|
-
|
|
109
|
-
Need another integration example or a new preset? Open an issue so we can keep the primitives lean and discoverable.
|
|
1
|
+
# Xanui Core
|
|
2
|
+
|
|
3
|
+
Xanui Core is a lightweight styling and theming toolkit for React. It bundles a constraint-based CSS generator, a TypeScript-friendly `<Tag>` primitive, responsive helpers, and an opinionated theme engine so that design tokens, animations, and layout logic stay consistent across your application.
|
|
4
|
+
|
|
5
|
+
## Highlights
|
|
6
|
+
|
|
7
|
+
- Build any element with `<Tag>` and the ergonomic `sx`/alias props while still passing native attributes.
|
|
8
|
+
- Author design tokens once via `createTheme`, ship them with `ThemeProvider`, and switch them at runtime with `createThemeSwitcher`.
|
|
9
|
+
- Drive responsive layouts using `BreakpointProvider`, `useBreakpoint`, and `useBreakpointProps` without bespoke media queries.
|
|
10
|
+
- Compose micro-animations through `useAnimation`, ready-made `Transition` variants, and reusable CSS utilities.
|
|
11
|
+
- Support SSR portals by rehydrating critical styles with `RenderServerStyles`.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @xanui/core
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Quick Start
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { ThemeProvider, Tag, createTheme, createThemeSwitcher } from '@xanui/core'
|
|
23
|
+
|
|
24
|
+
// Register a custom theme once at startup
|
|
25
|
+
createTheme('brand', {
|
|
26
|
+
colors: {
|
|
27
|
+
brand: { primary: '#7C3AED', secondary: '#5B21B6' },
|
|
28
|
+
},
|
|
29
|
+
})
|
|
30
|
+
|
|
31
|
+
const useThemeSwitcher = createThemeSwitcher('brand', ThemeSwitcherOption)
|
|
32
|
+
|
|
33
|
+
export const App = () => {
|
|
34
|
+
const { name, change } = useThemeSwitcher()
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<ThemeProvider theme={name} isRootProvider>
|
|
38
|
+
<Tag
|
|
39
|
+
component="main"
|
|
40
|
+
px={24}
|
|
41
|
+
py={32}
|
|
42
|
+
bgcolor="background"
|
|
43
|
+
color="text.primary"
|
|
44
|
+
gap={24}
|
|
45
|
+
>
|
|
46
|
+
<Tag component="h1" fontSize="h2">
|
|
47
|
+
Xanui Core
|
|
48
|
+
</Tag>
|
|
49
|
+
|
|
50
|
+
<button onClick={() => change(name === 'brand' ? 'dark' : 'brand')}>
|
|
51
|
+
Toggle Theme
|
|
52
|
+
</button>
|
|
53
|
+
</Tag>
|
|
54
|
+
</ThemeProvider>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Core Concepts
|
|
60
|
+
|
|
61
|
+
- **Design Tokens** – `createTheme` merges your overrides with defaults and exposes typed references like `brand.primary` or typography presets.
|
|
62
|
+
- **Adaptive Layout** – Wrap your app with `BreakpointProvider` (automatically included by `ThemeProvider` when `isRootProvider` is `true`) to consume breakpoint helpers throughout the tree.
|
|
63
|
+
- **Composable Styles** – `css`, `getValue`, and `getProps` transform alias props, breakpoints, and pseudo selectors into atomic class names. Use them directly for utilities such as scrollbars or keyframes.
|
|
64
|
+
- **Animation Primitives** – `useAnimation` builds scoped keyframes on the fly; `Transition` controls mount/unmount sequences with variants such as `fade`, `slideDown`, or `collapseVertical`.
|
|
65
|
+
|
|
66
|
+
## Server-Side Rendering
|
|
67
|
+
|
|
68
|
+
When rendering on the server, collect the emitted styles:
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
import RenderServerStyles from '@xanui/core/RenderServerStyles'
|
|
72
|
+
|
|
73
|
+
export const Document = () => (
|
|
74
|
+
<html>
|
|
75
|
+
<head>
|
|
76
|
+
<RenderServerStyles />
|
|
77
|
+
</head>
|
|
78
|
+
<body>{/* app */}</body>
|
|
79
|
+
</html>
|
|
80
|
+
)
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Documentation
|
|
84
|
+
|
|
85
|
+
Detailed API docs (props tables, option summaries, and usage examples) live inside the `docs/` directory. Each API/component has its own `README.md` for fast reference:
|
|
86
|
+
|
|
87
|
+
- `docs/tag/README.md`
|
|
88
|
+
- `docs/theme-provider/README.md`
|
|
89
|
+
- `docs/transition/README.md`
|
|
90
|
+
- `docs/use-animation/README.md`
|
|
91
|
+
- `docs/use-color-template/README.md`
|
|
92
|
+
- `docs/use-interface/README.md`
|
|
93
|
+
- `docs/use-breakpoint/README.md`
|
|
94
|
+
- `docs/use-breakpoint-props/README.md`
|
|
95
|
+
- `docs/use-scrollbar/README.md`
|
|
96
|
+
- `docs/render-server-styles/README.md`
|
|
97
|
+
- `docs/css/README.md`
|
|
98
|
+
- `docs/create-theme/README.md`
|
|
99
|
+
|
|
100
|
+
## Contributing
|
|
101
|
+
|
|
102
|
+
1. Fork and clone the repo.
|
|
103
|
+
2. Run `npm install`.
|
|
104
|
+
3. Use `npm run build` to verify type safety.
|
|
105
|
+
4. Submit a pull request that focuses on one improvement at a time.
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
Need another integration example or a new preset? Open an issue so we can keep the primitives lean and discoverable.
|