@xanui/ui 1.1.23 → 1.1.24
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/IconButton/index.js
CHANGED
|
@@ -51,7 +51,7 @@ const IconButton = React.forwardRef((_a, ref) => {
|
|
|
51
51
|
fontSize: Math.round((size / 3) * 2),
|
|
52
52
|
bgcolor: "transparent",
|
|
53
53
|
"& svg": {
|
|
54
|
-
fontSize: Math.round((size / 3) *
|
|
54
|
+
fontSize: Math.round((size / 3) * 1.8),
|
|
55
55
|
display: "block",
|
|
56
56
|
width: "1em",
|
|
57
57
|
height: "1em",
|
package/IconButton/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n rest.sx = (rest as any).sx || {};\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n const p: any = useBreakpointProps(_p)\n\n size = p.size ?? \"medium\"\n color = p.color\n variant = p.variant\n corner = p.corner ?? \"circle\"\n\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n const cornerCss = useCorner(corner)\n\n if (size === 'small') {\n size = 28\n } else if (size === 'medium') {\n size = 34\n } else if (size === 'large') {\n size = 52\n }\n\n\n return (\n <Tag\n component='button'\n ref={ref}\n {...cornerCss}\n {..._props}\n {...template.primary}\n baseClass='icon-button'\n sxr={{\n border: 0,\n radius: size,\n height: size,\n width: size,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n\n lineHeight: 1,\n fontSize: Math.round((size / 3) * 2),\n\n bgcolor: \"transparent\",\n\n \"& svg\": {\n fontSize: Math.round((size / 3) *
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n rest.sx = (rest as any).sx || {};\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n const p: any = useBreakpointProps(_p)\n\n size = p.size ?? \"medium\"\n color = p.color\n variant = p.variant\n corner = p.corner ?? \"circle\"\n\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n const cornerCss = useCorner(corner)\n\n if (size === 'small') {\n size = 28\n } else if (size === 'medium') {\n size = 34\n } else if (size === 'large') {\n size = 52\n }\n\n\n return (\n <Tag\n component='button'\n ref={ref}\n {...cornerCss}\n {..._props}\n {...template.primary}\n baseClass='icon-button'\n sxr={{\n border: 0,\n radius: size,\n height: size,\n width: size,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n\n lineHeight: 1,\n fontSize: Math.round((size / 3) * 2),\n\n bgcolor: \"transparent\",\n\n \"& svg\": {\n fontSize: Math.round((size / 3) * 1.8),\n display: \"block\",\n width: \"1em\",\n height: \"1em\",\n flexShrink: 0,\n },\n\n \"& > *\": {\n fontSize: Math.round((size / 3) * 2),\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n >\n {children}\n </Tag>\n )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":[],"mappings":";;;;;;;;;AAaA;;AAA4E;;;;AAKxE;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAEO;;;AAEA;;;;AAcK;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AACI;AACA;AACA;AACA;AACA;AACH;AAED;AACI;AACA;AACA;AACA;AACH;;AAUjB;;"}
|
package/IconButton/index.mjs
CHANGED
|
@@ -49,7 +49,7 @@ const IconButton = React.forwardRef((_a, ref) => {
|
|
|
49
49
|
fontSize: Math.round((size / 3) * 2),
|
|
50
50
|
bgcolor: "transparent",
|
|
51
51
|
"& svg": {
|
|
52
|
-
fontSize: Math.round((size / 3) *
|
|
52
|
+
fontSize: Math.round((size / 3) * 1.8),
|
|
53
53
|
display: "block",
|
|
54
54
|
width: "1em",
|
|
55
55
|
height: "1em",
|
package/IconButton/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n rest.sx = (rest as any).sx || {};\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n const p: any = useBreakpointProps(_p)\n\n size = p.size ?? \"medium\"\n color = p.color\n variant = p.variant\n corner = p.corner ?? \"circle\"\n\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n const cornerCss = useCorner(corner)\n\n if (size === 'small') {\n size = 28\n } else if (size === 'medium') {\n size = 34\n } else if (size === 'large') {\n size = 52\n }\n\n\n return (\n <Tag\n component='button'\n ref={ref}\n {...cornerCss}\n {..._props}\n {...template.primary}\n baseClass='icon-button'\n sxr={{\n border: 0,\n radius: size,\n height: size,\n width: size,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n\n lineHeight: 1,\n fontSize: Math.round((size / 3) * 2),\n\n bgcolor: \"transparent\",\n\n \"& svg\": {\n fontSize: Math.round((size / 3) *
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n rest.sx = (rest as any).sx || {};\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n const p: any = useBreakpointProps(_p)\n\n size = p.size ?? \"medium\"\n color = p.color\n variant = p.variant\n corner = p.corner ?? \"circle\"\n\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n const cornerCss = useCorner(corner)\n\n if (size === 'small') {\n size = 28\n } else if (size === 'medium') {\n size = 34\n } else if (size === 'large') {\n size = 52\n }\n\n\n return (\n <Tag\n component='button'\n ref={ref}\n {...cornerCss}\n {..._props}\n {...template.primary}\n baseClass='icon-button'\n sxr={{\n border: 0,\n radius: size,\n height: size,\n width: size,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n\n lineHeight: 1,\n fontSize: Math.round((size / 3) * 2),\n\n bgcolor: \"transparent\",\n\n \"& svg\": {\n fontSize: Math.round((size / 3) * 1.8),\n display: \"block\",\n width: \"1em\",\n height: \"1em\",\n flexShrink: 0,\n },\n\n \"& > *\": {\n fontSize: Math.round((size / 3) * 2),\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n >\n {children}\n </Tag>\n )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":[],"mappings":";;;;;;;AAaA;;AAA4E;;;;AAKxE;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAEO;;;AAEA;;;;AAcK;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AACI;AACA;AACA;AACA;AACA;AACH;AAED;AACI;AACA;AACA;AACA;AACH;;AAUjB;;"}
|