@aristobyte-ui/button 1.0.55 → 1.0.56
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/dist/index.js.map +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../index.ts","../components/Button/index.tsx","../../../node_modules/clsx/dist/clsx.mjs","../components/ButtonGroup/index.tsx"],"sourcesContent":["export * from \"./components\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Spinner } from \"@aristobyte-ui/spinner\";\nimport { type IconPropsType, renderRipple } from \"@aristobyte-ui/utils\";\n\nexport interface IButton {\n type?: \"button\" | \"link\";\n text?: string;\n children?: React.ReactNode;\n href?: string;\n target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\";\n onClick?: (\n e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n ) => void | Promise<void>;\n disabled?: boolean;\n transparent?: boolean;\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n radius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n icon?: {\n component: (props: IconPropsType) => React.ReactElement;\n color?: string;\n size?: number;\n align?: \"left\" | \"right\";\n };\n isLoading?: boolean;\n spinnerType?: \"default\" | \"duo\" | \"gradient\" | \"pulse\" | \"pulse-duo\";\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const Button: React.FC<IButton> = ({\n onClick,\n text = \"\",\n href = \"\",\n target = \"_self\",\n children = \"\",\n type = \"button\",\n variant = \"default\",\n appearance = \"solid\",\n size = \"md\",\n radius = \"md\",\n icon,\n spinnerType = \"default\",\n transparent = false,\n isLoading = false,\n disabled = false,\n className = \"\",\n style = {},\n}) => {\n const uniqueId = React.useId();\n const ref = React.useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n const handleClick = (\n e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n ) => {\n const { clientX, clientY } = e;\n renderRipple({ ref, clientX, clientY });\n onClick?.(e);\n };\n\n const buttonClasses = clsx(\n \"btn\",\n transparent && \"btn-transparent\",\n `btn-${variant}-${appearance}`,\n `btn-${size}`,\n `btn-radius-${radius}`,\n isLoading && \"btn-loading\",\n className\n );\n\n const renderContent = () => (\n <>\n {isLoading && (\n <Spinner\n size={size}\n variant={variant}\n type={spinnerType}\n className=\"inline-block\"\n />\n )}\n {icon && (\n <span\n className={clsx(\n \"btn-icon\",\n icon.align === \"right\" && \"btn-icon-right\"\n )}\n >\n {icon.component({ color: icon.color, size: icon.size })}\n </span>\n )}\n {text || children}\n </>\n );\n\n if (type === \"link\") {\n return (\n <a\n key={uniqueId}\n ref={ref as React.RefObject<HTMLAnchorElement>}\n href={href}\n target={target}\n style={style}\n className={buttonClasses}\n onClick={handleClick}\n >\n {renderContent()}\n </a>\n );\n }\n\n return (\n <button\n key={uniqueId}\n ref={ref as React.RefObject<HTMLButtonElement>}\n type=\"button\"\n disabled={disabled || isLoading}\n style={style}\n className={buttonClasses}\n onClick={handleClick}\n >\n {renderContent()}\n </button>\n );\n};\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","\"use client\";\n\nimport * as React from \"react\";\nimport { type IButton, Button } from \"../Button\";\nimport clsx from \"clsx\";\n\nexport interface IButtonGroup {\n children:\n | React.ReactElement<IButton, typeof Button>\n | React.ReactElement<IButton, typeof Button>[];\n align?: \"vertical\" | \"horizontal\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n radius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n disabled?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const ButtonGroup: React.FC<IButtonGroup> = ({\n children,\n align = \"horizontal\",\n variant = \"default\",\n size = \"md\",\n radius = \"md\",\n disabled = false,\n className = \"\",\n style = {},\n}) => {\n const groupClasses = clsx(\n \"btn-group\",\n `btn-group-${align}`,\n `btn-group-variant-${variant}`,\n `btn-group-radius-${radius}`,\n `btn-group-size-${size}`,\n className\n );\n\n return (\n <div className={groupClasses} style={style}>\n {React.Children.toArray(children)\n .filter(\n (child): child is React.
|
|
1
|
+
{"version":3,"sources":["../index.ts","../components/Button/index.tsx","../../../node_modules/clsx/dist/clsx.mjs","../components/ButtonGroup/index.tsx"],"sourcesContent":["export * from \"./components\";\n","\"use client\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Spinner } from \"@aristobyte-ui/spinner\";\nimport { type IconPropsType, renderRipple } from \"@aristobyte-ui/utils\";\n\nexport interface IButton {\n type?: \"button\" | \"link\";\n text?: string;\n children?: React.ReactNode;\n href?: string;\n target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\";\n onClick?: (\n e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n ) => void | Promise<void>;\n disabled?: boolean;\n transparent?: boolean;\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n radius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n icon?: {\n component: (props: IconPropsType) => React.ReactElement;\n color?: string;\n size?: number;\n align?: \"left\" | \"right\";\n };\n isLoading?: boolean;\n spinnerType?: \"default\" | \"duo\" | \"gradient\" | \"pulse\" | \"pulse-duo\";\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const Button: React.FC<IButton> = ({\n onClick,\n text = \"\",\n href = \"\",\n target = \"_self\",\n children = \"\",\n type = \"button\",\n variant = \"default\",\n appearance = \"solid\",\n size = \"md\",\n radius = \"md\",\n icon,\n spinnerType = \"default\",\n transparent = false,\n isLoading = false,\n disabled = false,\n className = \"\",\n style = {},\n}) => {\n const uniqueId = React.useId();\n const ref = React.useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n const handleClick = (\n e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n ) => {\n const { clientX, clientY } = e;\n renderRipple({ ref, clientX, clientY });\n onClick?.(e);\n };\n\n const buttonClasses = clsx(\n \"btn\",\n transparent && \"btn-transparent\",\n `btn-${variant}-${appearance}`,\n `btn-${size}`,\n `btn-radius-${radius}`,\n isLoading && \"btn-loading\",\n className\n );\n\n const renderContent = () => (\n <>\n {isLoading && (\n <Spinner\n size={size}\n variant={variant}\n type={spinnerType}\n className=\"inline-block\"\n />\n )}\n {icon && (\n <span\n className={clsx(\n \"btn-icon\",\n icon.align === \"right\" && \"btn-icon-right\"\n )}\n >\n {icon.component({ color: icon.color, size: icon.size })}\n </span>\n )}\n {text || children}\n </>\n );\n\n if (type === \"link\") {\n return (\n <a\n key={uniqueId}\n ref={ref as React.RefObject<HTMLAnchorElement>}\n href={href}\n target={target}\n style={style}\n className={buttonClasses}\n onClick={handleClick}\n >\n {renderContent()}\n </a>\n );\n }\n\n return (\n <button\n key={uniqueId}\n ref={ref as React.RefObject<HTMLButtonElement>}\n type=\"button\"\n disabled={disabled || isLoading}\n style={style}\n className={buttonClasses}\n onClick={handleClick}\n >\n {renderContent()}\n </button>\n );\n};\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","\"use client\";\n\nimport * as React from \"react\";\nimport { type IButton, Button } from \"../Button\";\nimport clsx from \"clsx\";\n\nexport interface IButtonGroup {\n children:\n | React.ReactElement<IButton, typeof Button>\n | React.ReactElement<IButton, typeof Button>[];\n align?: \"vertical\" | \"horizontal\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n radius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n disabled?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const ButtonGroup: React.FC<IButtonGroup> = ({\n children,\n align = \"horizontal\",\n variant = \"default\",\n size = \"md\",\n radius = \"md\",\n disabled = false,\n className = \"\",\n style = {},\n}) => {\n const groupClasses = clsx(\n \"btn-group\",\n `btn-group-${align}`,\n `btn-group-variant-${variant}`,\n `btn-group-radius-${radius}`,\n `btn-group-size-${size}`,\n className\n );\n\n return (\n <div className={groupClasses} style={style}>\n {React.Children.toArray(children)\n .filter(\n (child): child is React.JSX.Element =>\n React.isValidElement(child) && child.type === Button\n )\n .map((child, index) =>\n React.cloneElement(child, {\n key: index || child.key,\n size: size || child.props.size,\n disabled: disabled || child.props.disabled,\n variant: variant || child.props.variant,\n radius: \"none\", // individual buttons inside group have no border-radius, group handles it\n })\n )}\n </div>\n );\n};\n"],"mappings":"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","names":["React","import_jsx_runtime"]}
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../components/Button/index.tsx","../../../node_modules/clsx/dist/clsx.mjs","../components/ButtonGroup/index.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Spinner } from \"@aristobyte-ui/spinner\";\nimport { type IconPropsType, renderRipple } from \"@aristobyte-ui/utils\";\n\nexport interface IButton {\n type?: \"button\" | \"link\";\n text?: string;\n children?: React.ReactNode;\n href?: string;\n target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\";\n onClick?: (\n e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n ) => void | Promise<void>;\n disabled?: boolean;\n transparent?: boolean;\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n radius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n icon?: {\n component: (props: IconPropsType) => React.ReactElement;\n color?: string;\n size?: number;\n align?: \"left\" | \"right\";\n };\n isLoading?: boolean;\n spinnerType?: \"default\" | \"duo\" | \"gradient\" | \"pulse\" | \"pulse-duo\";\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const Button: React.FC<IButton> = ({\n onClick,\n text = \"\",\n href = \"\",\n target = \"_self\",\n children = \"\",\n type = \"button\",\n variant = \"default\",\n appearance = \"solid\",\n size = \"md\",\n radius = \"md\",\n icon,\n spinnerType = \"default\",\n transparent = false,\n isLoading = false,\n disabled = false,\n className = \"\",\n style = {},\n}) => {\n const uniqueId = React.useId();\n const ref = React.useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n const handleClick = (\n e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n ) => {\n const { clientX, clientY } = e;\n renderRipple({ ref, clientX, clientY });\n onClick?.(e);\n };\n\n const buttonClasses = clsx(\n \"btn\",\n transparent && \"btn-transparent\",\n `btn-${variant}-${appearance}`,\n `btn-${size}`,\n `btn-radius-${radius}`,\n isLoading && \"btn-loading\",\n className\n );\n\n const renderContent = () => (\n <>\n {isLoading && (\n <Spinner\n size={size}\n variant={variant}\n type={spinnerType}\n className=\"inline-block\"\n />\n )}\n {icon && (\n <span\n className={clsx(\n \"btn-icon\",\n icon.align === \"right\" && \"btn-icon-right\"\n )}\n >\n {icon.component({ color: icon.color, size: icon.size })}\n </span>\n )}\n {text || children}\n </>\n );\n\n if (type === \"link\") {\n return (\n <a\n key={uniqueId}\n ref={ref as React.RefObject<HTMLAnchorElement>}\n href={href}\n target={target}\n style={style}\n className={buttonClasses}\n onClick={handleClick}\n >\n {renderContent()}\n </a>\n );\n }\n\n return (\n <button\n key={uniqueId}\n ref={ref as React.RefObject<HTMLButtonElement>}\n type=\"button\"\n disabled={disabled || isLoading}\n style={style}\n className={buttonClasses}\n onClick={handleClick}\n >\n {renderContent()}\n </button>\n );\n};\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","\"use client\";\n\nimport * as React from \"react\";\nimport { type IButton, Button } from \"../Button\";\nimport clsx from \"clsx\";\n\nexport interface IButtonGroup {\n children:\n | React.ReactElement<IButton, typeof Button>\n | React.ReactElement<IButton, typeof Button>[];\n align?: \"vertical\" | \"horizontal\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n radius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n disabled?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const ButtonGroup: React.FC<IButtonGroup> = ({\n children,\n align = \"horizontal\",\n variant = \"default\",\n size = \"md\",\n radius = \"md\",\n disabled = false,\n className = \"\",\n style = {},\n}) => {\n const groupClasses = clsx(\n \"btn-group\",\n `btn-group-${align}`,\n `btn-group-variant-${variant}`,\n `btn-group-radius-${radius}`,\n `btn-group-size-${size}`,\n className\n );\n\n return (\n <div className={groupClasses} style={style}>\n {React.Children.toArray(children)\n .filter(\n (child): child is React.
|
|
1
|
+
{"version":3,"sources":["../components/Button/index.tsx","../../../node_modules/clsx/dist/clsx.mjs","../components/ButtonGroup/index.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport clsx from \"clsx\";\nimport { Spinner } from \"@aristobyte-ui/spinner\";\nimport { type IconPropsType, renderRipple } from \"@aristobyte-ui/utils\";\n\nexport interface IButton {\n type?: \"button\" | \"link\";\n text?: string;\n children?: React.ReactNode;\n href?: string;\n target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\";\n onClick?: (\n e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n ) => void | Promise<void>;\n disabled?: boolean;\n transparent?: boolean;\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n appearance?:\n | \"solid\"\n | \"outline\"\n | \"outline-dashed\"\n | \"no-outline\"\n | \"glowing\";\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n radius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n icon?: {\n component: (props: IconPropsType) => React.ReactElement;\n color?: string;\n size?: number;\n align?: \"left\" | \"right\";\n };\n isLoading?: boolean;\n spinnerType?: \"default\" | \"duo\" | \"gradient\" | \"pulse\" | \"pulse-duo\";\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const Button: React.FC<IButton> = ({\n onClick,\n text = \"\",\n href = \"\",\n target = \"_self\",\n children = \"\",\n type = \"button\",\n variant = \"default\",\n appearance = \"solid\",\n size = \"md\",\n radius = \"md\",\n icon,\n spinnerType = \"default\",\n transparent = false,\n isLoading = false,\n disabled = false,\n className = \"\",\n style = {},\n}) => {\n const uniqueId = React.useId();\n const ref = React.useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n const handleClick = (\n e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>\n ) => {\n const { clientX, clientY } = e;\n renderRipple({ ref, clientX, clientY });\n onClick?.(e);\n };\n\n const buttonClasses = clsx(\n \"btn\",\n transparent && \"btn-transparent\",\n `btn-${variant}-${appearance}`,\n `btn-${size}`,\n `btn-radius-${radius}`,\n isLoading && \"btn-loading\",\n className\n );\n\n const renderContent = () => (\n <>\n {isLoading && (\n <Spinner\n size={size}\n variant={variant}\n type={spinnerType}\n className=\"inline-block\"\n />\n )}\n {icon && (\n <span\n className={clsx(\n \"btn-icon\",\n icon.align === \"right\" && \"btn-icon-right\"\n )}\n >\n {icon.component({ color: icon.color, size: icon.size })}\n </span>\n )}\n {text || children}\n </>\n );\n\n if (type === \"link\") {\n return (\n <a\n key={uniqueId}\n ref={ref as React.RefObject<HTMLAnchorElement>}\n href={href}\n target={target}\n style={style}\n className={buttonClasses}\n onClick={handleClick}\n >\n {renderContent()}\n </a>\n );\n }\n\n return (\n <button\n key={uniqueId}\n ref={ref as React.RefObject<HTMLButtonElement>}\n type=\"button\"\n disabled={disabled || isLoading}\n style={style}\n className={buttonClasses}\n onClick={handleClick}\n >\n {renderContent()}\n </button>\n );\n};\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","\"use client\";\n\nimport * as React from \"react\";\nimport { type IButton, Button } from \"../Button\";\nimport clsx from \"clsx\";\n\nexport interface IButtonGroup {\n children:\n | React.ReactElement<IButton, typeof Button>\n | React.ReactElement<IButton, typeof Button>[];\n align?: \"vertical\" | \"horizontal\";\n variant?:\n | \"default\"\n | \"primary\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\";\n size?: \"xsm\" | \"sm\" | \"md\" | \"lg\" | \"xlg\";\n radius?: \"none\" | \"sm\" | \"md\" | \"lg\" | \"full\";\n disabled?: boolean;\n className?: string;\n style?: React.CSSProperties;\n}\n\nexport const ButtonGroup: React.FC<IButtonGroup> = ({\n children,\n align = \"horizontal\",\n variant = \"default\",\n size = \"md\",\n radius = \"md\",\n disabled = false,\n className = \"\",\n style = {},\n}) => {\n const groupClasses = clsx(\n \"btn-group\",\n `btn-group-${align}`,\n `btn-group-variant-${variant}`,\n `btn-group-radius-${radius}`,\n `btn-group-size-${size}`,\n className\n );\n\n return (\n <div className={groupClasses} style={style}>\n {React.Children.toArray(children)\n .filter(\n (child): child is React.JSX.Element =>\n React.isValidElement(child) && child.type === Button\n )\n .map((child, index) =>\n React.cloneElement(child, {\n key: index || child.key,\n size: size || child.props.size,\n disabled: disabled || child.props.disabled,\n variant: variant || child.props.variant,\n radius: \"none\", // individual buttons inside group have no border-radius, group handles it\n })\n )}\n </div>\n );\n};\n"],"mappings":"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","names":["React","jsx"]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aristobyte-ui/button",
|
|
3
3
|
"description": "react button and buttongroup components with multiple variants, appearances, sizes, radius options, icons, ripple feedback, and fully typed typescript support",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.56",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"private": false,
|
|
7
7
|
"author": "AristoByte <info@aristobyte.com>",
|
|
@@ -60,15 +60,15 @@
|
|
|
60
60
|
"check-types": "tsc --noEmit"
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"@aristobyte-ui/spinner": "^1.0.
|
|
64
|
-
"@aristobyte-ui/utils": "^1.0.
|
|
63
|
+
"@aristobyte-ui/spinner": "^1.0.56",
|
|
64
|
+
"@aristobyte-ui/utils": "^1.0.56",
|
|
65
65
|
"react": "^19.1.0",
|
|
66
66
|
"react-dom": "^19.1.0",
|
|
67
67
|
"tsup": "^8.5.0"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
|
-
"@aristobyte-ui/eslint-config": "^1.0.
|
|
71
|
-
"@aristobyte-ui/typescript-config": "^1.0.
|
|
70
|
+
"@aristobyte-ui/eslint-config": "^1.0.56",
|
|
71
|
+
"@aristobyte-ui/typescript-config": "^1.0.56",
|
|
72
72
|
"@turbo/gen": "^2.5.0",
|
|
73
73
|
"@types/node": "^24.3.0",
|
|
74
74
|
"@types/react": "19.1.0",
|