@aristobyte-ui/switch 1.0.2 → 1.0.7

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.
Files changed (65) hide show
  1. package/dist/index.css +326 -0
  2. package/dist/index.css.map +1 -0
  3. package/dist/index.d.mts +20 -0
  4. package/dist/{types/components/Switch/index.d.ts → index.d.ts} +6 -4
  5. package/dist/index.js +105 -1
  6. package/dist/index.js.map +1 -0
  7. package/dist/index.mjs +68 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/package.json +11 -8
  10. package/dist/components/Anchor/index.js +0 -28
  11. package/dist/components/Button/index.js +0 -35
  12. package/dist/components/ButtonGroup/index.js +0 -16
  13. package/dist/components/CodeBlock/index.js +0 -33
  14. package/dist/components/CodeBlock/types.js +0 -1
  15. package/dist/components/Dropdown/index.js +0 -73
  16. package/dist/components/DropdownOption/index.js +0 -13
  17. package/dist/components/MessageBox/index.js +0 -19
  18. package/dist/components/Radio/index.js +0 -10
  19. package/dist/components/RadioGroup/index.js +0 -21
  20. package/dist/components/Spinner/index.js +0 -6
  21. package/dist/components/Switch/index.js +0 -15
  22. package/dist/components/TabSwitchWithSlidingIndicator/index.js +0 -10
  23. package/dist/components/index.js +0 -1
  24. package/dist/tsconfig.tsbuildinfo +0 -1
  25. package/dist/types/components/Anchor/index.d.ts +0 -6
  26. package/dist/types/components/Anchor/index.d.ts.map +0 -1
  27. package/dist/types/components/Button/index.d.ts +0 -15
  28. package/dist/types/components/Button/index.d.ts.map +0 -1
  29. package/dist/types/components/ButtonGroup/index.d.ts +0 -13
  30. package/dist/types/components/ButtonGroup/index.d.ts.map +0 -1
  31. package/dist/types/components/CodeBlock/index.d.ts +0 -11
  32. package/dist/types/components/CodeBlock/index.d.ts.map +0 -1
  33. package/dist/types/components/CodeBlock/types.d.ts +0 -3
  34. package/dist/types/components/CodeBlock/types.d.ts.map +0 -1
  35. package/dist/types/components/Dropdown/index.d.ts +0 -14
  36. package/dist/types/components/Dropdown/index.d.ts.map +0 -1
  37. package/dist/types/components/DropdownOption/index.d.ts +0 -12
  38. package/dist/types/components/DropdownOption/index.d.ts.map +0 -1
  39. package/dist/types/components/MessageBox/index.d.ts +0 -14
  40. package/dist/types/components/MessageBox/index.d.ts.map +0 -1
  41. package/dist/types/components/Radio/index.d.ts +0 -17
  42. package/dist/types/components/Radio/index.d.ts.map +0 -1
  43. package/dist/types/components/RadioGroup/index.d.ts +0 -18
  44. package/dist/types/components/RadioGroup/index.d.ts.map +0 -1
  45. package/dist/types/components/Spinner/index.d.ts +0 -9
  46. package/dist/types/components/Spinner/index.d.ts.map +0 -1
  47. package/dist/types/components/Switch/index.d.ts.map +0 -1
  48. package/dist/types/components/TabSwitchWithSlidingIndicator/index.d.ts +0 -9
  49. package/dist/types/components/TabSwitchWithSlidingIndicator/index.d.ts.map +0 -1
  50. package/dist/types/components/index.d.ts +0 -2
  51. package/dist/types/components/index.d.ts.map +0 -1
  52. package/dist/types/index.d.ts +0 -2
  53. package/dist/types/index.d.ts.map +0 -1
  54. package/dist/types/utils/Portal.d.ts +0 -5
  55. package/dist/types/utils/Portal.d.ts.map +0 -1
  56. package/dist/types/utils/icons.d.ts +0 -8
  57. package/dist/types/utils/icons.d.ts.map +0 -1
  58. package/dist/types/utils/index.d.ts +0 -3
  59. package/dist/types/utils/index.d.ts.map +0 -1
  60. package/dist/types/utils/ripple.d.ts +0 -9
  61. package/dist/types/utils/ripple.d.ts.map +0 -1
  62. package/dist/utils/Portal.js +0 -12
  63. package/dist/utils/icons.js +0 -12
  64. package/dist/utils/index.js +0 -2
  65. package/dist/utils/ripple.js +0 -38
@@ -1,12 +0,0 @@
1
- import * as React from "react";
2
- export interface IDropdownOption {
3
- children: string;
4
- value: string;
5
- onChange?: () => void;
6
- selectedValue?: string;
7
- description?: string;
8
- icon?: string;
9
- disabled?: boolean;
10
- }
11
- export declare const DropdownOption: React.FC<IDropdownOption>;
12
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/DropdownOption/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkBpD,CAAC"}
@@ -1,14 +0,0 @@
1
- import * as React from "react";
2
- type MessageBoxVariant = "default" | "info" | "warning" | "success" | "error";
3
- export interface IMessageBox {
4
- variant?: MessageBoxVariant;
5
- children?: React.ReactElement | React.ReactNode | string;
6
- withIcon?: boolean;
7
- customIcon?: React.ReactElement | React.ReactNode | string;
8
- radius?: "none" | "sm" | "md" | "lg" | "full";
9
- type?: "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
10
- className?: string;
11
- }
12
- export declare const MessageBox: React.FC<IMessageBox>;
13
- export {};
14
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/MessageBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAC3D,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,gBAAgB,GAAG,YAAY,GAAG,SAAS,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgBD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyB5C,CAAC"}
@@ -1,17 +0,0 @@
1
- import * as React from "react";
2
- export interface IRadio {
3
- children: React.ReactNode;
4
- value: string;
5
- checked?: boolean;
6
- onChange?: (value: string) => void;
7
- name?: string;
8
- disabled?: boolean;
9
- className?: string;
10
- highlightLabel?: boolean;
11
- size?: "xsm" | "sm" | "md" | "lg" | "xlg";
12
- variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
13
- appearance?: "default" | "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
14
- alignLabel?: "top" | "right" | "bottom" | "left";
15
- }
16
- export declare const Radio: React.FC<IRadio>;
17
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/Radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,MAAM;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAC1C,OAAO,CAAC,EACJ,SAAS,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,OAAO,GACP,SAAS,CAAC;IACd,UAAU,CAAC,EACP,SAAS,GACT,OAAO,GACP,SAAS,GACT,gBAAgB,GAChB,YAAY,GACZ,SAAS,CAAC;IACd,UAAU,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;CAClD;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA2ClC,CAAC"}
@@ -1,18 +0,0 @@
1
- import * as React from "react";
2
- import { type IRadio } from "../Radio";
3
- export interface IRadioGroup {
4
- name: string;
5
- value: string;
6
- children: React.ReactElement<IRadio> | React.ReactElement<IRadio>[];
7
- onChange?: (newValue: string) => void;
8
- disabled?: boolean;
9
- className?: string;
10
- size?: "xsm" | "sm" | "md" | "lg" | "xlg";
11
- variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
12
- appearance?: "solid" | "outline" | "outline-dashed" | "no-outline" | "glowing";
13
- align?: "horizontal" | "vertical";
14
- alignLabel?: "top" | "right" | "bottom" | "left";
15
- highlightLabel?: boolean;
16
- }
17
- export declare const RadioGroup: React.FC<IRadioGroup>;
18
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/RadioGroup/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAS,KAAK,MAAM,EAAE,MAAM,UAAU,CAAC;AAI9C,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;IACpE,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAC1C,OAAO,CAAC,EACJ,SAAS,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,OAAO,GACP,SAAS,CAAC;IACd,UAAU,CAAC,EACP,OAAO,GACP,SAAS,GACT,gBAAgB,GAChB,YAAY,GACZ,SAAS,CAAC;IACd,KAAK,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAClC,UAAU,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IACjD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAoD5C,CAAC"}
@@ -1,9 +0,0 @@
1
- import * as React from "react";
2
- export interface ISpinner {
3
- type?: "default" | "duo" | "gradient" | "pulse" | "pulse-duo";
4
- variant?: "default" | "primary" | "secondary" | "success" | "error" | "warning";
5
- size?: "xsm" | "sm" | "md" | "lg" | "xlg";
6
- className?: string;
7
- }
8
- export declare const Spinner: React.FC<ISpinner>;
9
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/Spinner/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,KAAK,GAAG,UAAU,GAAG,OAAO,GAAG,WAAW,CAAC;IAC9D,OAAO,CAAC,EACJ,SAAS,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,OAAO,GACP,SAAS,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAWtC,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/Switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,OAAO;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,UAAU,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAChD,OAAO,CAAC,EACJ,SAAS,GACT,SAAS,GACT,WAAW,GACX,SAAS,GACT,OAAO,GACP,SAAS,CAAC;IACd,SAAS,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;QAAC,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;KAAE,CAAC;IAC3E,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAGD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO,CA6DpC,CAAC"}
@@ -1,9 +0,0 @@
1
- import * as React from "react";
2
- export interface ITabSwitchWithSlidingIndicator {
3
- tabs: {
4
- buttonContent?: React.ReactElement | React.ReactNode | string;
5
- content: React.ReactElement | React.ReactNode | string;
6
- }[];
7
- }
8
- export declare const TabSwitchWithSlidingIndicator: React.FC<ITabSwitchWithSlidingIndicator>;
9
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../components/TabSwitchWithSlidingIndicator/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,8BAA8B;IAC7C,IAAI,EAAE;QACJ,aAAa,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;QAC9D,OAAO,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;KACxD,EAAE,CAAC;CACL;AAED,eAAO,MAAM,6BAA6B,EAAE,KAAK,CAAC,EAAE,CAClD,8BAA8B,CAgC/B,CAAC"}
@@ -1,2 +0,0 @@
1
- export { Switch } from "./Switch";
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
@@ -1,2 +0,0 @@
1
- export { Switch } from "./components";
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC"}
@@ -1,5 +0,0 @@
1
- import * as React from "react";
2
- export declare const Portal: React.FC<{
3
- children: React.ReactNode;
4
- }>;
5
- //# sourceMappingURL=Portal.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../../utils/Portal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAW1D,CAAC"}
@@ -1,8 +0,0 @@
1
- export declare const Icons: {
2
- Copy: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
3
- Error: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
4
- Info: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
5
- Success: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
6
- Warning: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
7
- };
8
- //# sourceMappingURL=icons.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../utils/icons.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK;;;;;;CAMjB,CAAC"}
@@ -1,3 +0,0 @@
1
- export { renderRipple, type RippleParams } from "./ripple";
2
- export { Icons } from "./icons";
3
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
@@ -1,9 +0,0 @@
1
- type RippleParamsRef = HTMLButtonElement | HTMLAnchorElement;
2
- export type RippleParams<HTMLElementType extends RippleParamsRef> = {
3
- ref: React.RefObject<HTMLElementType | null>;
4
- clientX: number;
5
- clientY: number;
6
- };
7
- export declare const renderRipple: <HTMLElementType extends RippleParamsRef>({ ref, clientX, clientY, }: RippleParams<HTMLElementType>) => void;
8
- export {};
9
- //# sourceMappingURL=ripple.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../../utils/ripple.tsx"],"names":[],"mappings":"AAAA,KAAK,eAAe,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAE7D,MAAM,MAAM,YAAY,CAAC,eAAe,SAAS,eAAe,IAAI;IAClE,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,eAAe,SAAS,eAAe,EAAE,4BAInE,YAAY,CAAC,eAAe,CAAC,SAyC/B,CAAC"}
@@ -1,12 +0,0 @@
1
- "use client";
2
- import * as React from "react";
3
- import { createPortal } from "react-dom";
4
- export const Portal = ({ children, }) => {
5
- const [mounted, setMounted] = React.useState(false);
6
- React.useEffect(() => {
7
- setMounted(true);
8
- }, []);
9
- if (!mounted || typeof window === "undefined")
10
- return null;
11
- return createPortal(children, document.body);
12
- };
@@ -1,12 +0,0 @@
1
- import Copy from "../assets/svg/i_Copy.svg";
2
- import Error from "../assets/svg/i_Error.svg";
3
- import Info from "../assets/svg/i_Info.svg";
4
- import Success from "../assets/svg/i_Success.svg";
5
- import Warning from "../assets/svg/i_Warning.svg";
6
- export const Icons = {
7
- Copy,
8
- Error,
9
- Info,
10
- Success,
11
- Warning,
12
- };
@@ -1,2 +0,0 @@
1
- export { renderRipple } from "./ripple";
2
- export { Icons } from "./icons";
@@ -1,38 +0,0 @@
1
- export const renderRipple = ({ ref, clientX, clientY, }) => {
2
- const button = ref.current;
3
- if (!button)
4
- return;
5
- const circle = document.createElement("span");
6
- const diameter = Math.max(button.clientWidth, button.clientHeight);
7
- const radius = diameter / 2;
8
- circle.id = "ripple";
9
- const style = document.createElement("style");
10
- style.innerHTML = `
11
- #ripple {
12
- animation: ripple 300ms linear;
13
- background-color: rgba(255, 255, 255, 0.3);
14
- border-radius: 50%;
15
- height: ${diameter}px;
16
- left: ${clientX - button.getBoundingClientRect().left - radius}px;
17
- pointer-events: none;
18
- position: absolute;
19
- top: ${clientY - button.getBoundingClientRect().top - radius}px;
20
- transform: scale(0);
21
- width: ${diameter}px;
22
- z-index: 0;
23
- }
24
-
25
- @keyframes ripple {
26
- to {
27
- opacity: 0;
28
- transform: scale(2);
29
- }
30
- }
31
- `;
32
- button.appendChild(style);
33
- button.appendChild(circle);
34
- circle.addEventListener("animationend", () => {
35
- circle.remove();
36
- style.remove();
37
- });
38
- };