@arkyn/components 1.3.78 → 1.3.80

Sign up to get free protection for your applications and to get access to all the features.
Files changed (122) hide show
  1. package/dist/bundle.js +880 -878
  2. package/dist/bundle.umd.cjs +10 -10
  3. package/dist/components/Alert/AlertContainer/index.d.ts.map +1 -1
  4. package/dist/components/Alert/AlertContainer/index.js +3 -3
  5. package/dist/components/Alert/AlertContent/index.d.ts.map +1 -1
  6. package/dist/components/Alert/AlertContent/index.js +3 -3
  7. package/dist/components/Alert/AlertDescription/index.d.ts.map +1 -1
  8. package/dist/components/Alert/AlertDescription/index.js +3 -3
  9. package/dist/components/Alert/AlertIcon/index.js +1 -1
  10. package/dist/components/Alert/AlertTitle/index.d.ts.map +1 -1
  11. package/dist/components/Alert/AlertTitle/index.js +3 -3
  12. package/dist/components/Badge/index.js +1 -1
  13. package/dist/components/Breadcrumb/BreadcrumbContainer/index.js +1 -1
  14. package/dist/components/Breadcrumb/BreadcrumbLink/index.js +1 -1
  15. package/dist/components/Button/index.d.ts.map +1 -1
  16. package/dist/components/Button/index.js +6 -2
  17. package/dist/components/Card/index.js +1 -1
  18. package/dist/components/Checkbox/index.d.ts.map +1 -1
  19. package/dist/components/Checkbox/index.js +4 -2
  20. package/dist/components/Divider/index.js +2 -2
  21. package/dist/components/Drawer/Container/index.js +3 -3
  22. package/dist/components/Drawer/Header/index.js +2 -2
  23. package/dist/components/Form/FormController/index.js +1 -1
  24. package/dist/components/Form/FormError/index.js +1 -1
  25. package/dist/components/Form/FormLabel/index.js +3 -3
  26. package/dist/components/IconButton/index.d.ts.map +1 -1
  27. package/dist/components/IconButton/index.js +3 -2
  28. package/dist/components/Modal/Container/index.js +3 -3
  29. package/dist/components/Modal/Footer/index.js +1 -1
  30. package/dist/components/Modal/Header/index.js +2 -2
  31. package/dist/components/Pagination/index.js +1 -1
  32. package/dist/components/Popover/index.d.ts.map +1 -1
  33. package/dist/components/Popover/index.js +3 -2
  34. package/dist/components/Radio/RadioBox/index.d.ts.map +1 -1
  35. package/dist/components/Radio/RadioBox/index.js +6 -6
  36. package/dist/components/Radio/RadioGroup/index.js +2 -2
  37. package/dist/components/Skeleton/index.js +1 -1
  38. package/dist/components/Table/TableBody/index.d.ts.map +1 -1
  39. package/dist/components/Table/TableBody/index.js +5 -3
  40. package/dist/components/Table/TableCaption/index.js +2 -2
  41. package/dist/components/Table/TableContainer/index.js +1 -1
  42. package/dist/components/Table/TableFooter/index.js +2 -2
  43. package/dist/components/Table/TableHeader/index.js +2 -2
  44. package/dist/components/Tabs/TabButton/index.js +3 -3
  45. package/dist/components/Tabs/TabContainer/index.js +2 -2
  46. package/dist/components/Textarea/index.js +4 -4
  47. package/dist/components/Toast/index.js +1 -1
  48. package/dist/components/Tooltip/index.js +3 -3
  49. package/dist/style.css +1 -1
  50. package/package.json +1 -1
  51. package/src/components/Alert/AlertContainer/index.tsx +3 -5
  52. package/src/components/Alert/AlertContainer/styles.css +5 -5
  53. package/src/components/Alert/AlertContent/index.tsx +3 -8
  54. package/src/components/Alert/AlertContent/styles.css +1 -1
  55. package/src/components/Alert/AlertDescription/index.tsx +3 -7
  56. package/src/components/Alert/AlertDescription/styles.css +1 -2
  57. package/src/components/Alert/AlertIcon/index.tsx +1 -1
  58. package/src/components/Alert/AlertIcon/styles.css +5 -5
  59. package/src/components/Alert/AlertTitle/index.tsx +3 -7
  60. package/src/components/Alert/AlertTitle/styles.css +1 -2
  61. package/src/components/Badge/index.tsx +1 -1
  62. package/src/components/Badge/styles.css +19 -23
  63. package/src/components/Breadcrumb/BreadcrumbContainer/index.tsx +1 -1
  64. package/src/components/Breadcrumb/BreadcrumbContainer/styles.css +1 -33
  65. package/src/components/Breadcrumb/BreadcrumbLink/index.tsx +1 -1
  66. package/src/components/Breadcrumb/BreadcrumbLink/styles.css +6 -6
  67. package/src/components/Button/index.tsx +8 -3
  68. package/src/components/Button/styles.css +45 -45
  69. package/src/components/Card/index.tsx +1 -1
  70. package/src/components/Card/styles.css +1 -1
  71. package/src/components/Checkbox/index.tsx +6 -4
  72. package/src/components/Checkbox/styles.css +12 -12
  73. package/src/components/Divider/index.tsx +2 -2
  74. package/src/components/Divider/styles.css +3 -3
  75. package/src/components/Drawer/Container/index.tsx +4 -4
  76. package/src/components/Drawer/Container/styles.css +6 -6
  77. package/src/components/Drawer/Header/index.tsx +2 -2
  78. package/src/components/Drawer/Header/styles.css +3 -3
  79. package/src/components/Form/FormController/index.tsx +1 -1
  80. package/src/components/Form/FormController/styles.css +1 -1
  81. package/src/components/Form/FormError/index.tsx +1 -1
  82. package/src/components/Form/FormError/styles.css +1 -1
  83. package/src/components/Form/FormLabel/index.tsx +3 -3
  84. package/src/components/Form/FormLabel/styles.css +2 -2
  85. package/src/components/IconButton/index.tsx +4 -3
  86. package/src/components/IconButton/styles.css +35 -35
  87. package/src/components/Modal/Container/index.tsx +4 -4
  88. package/src/components/Modal/Container/styles.css +4 -4
  89. package/src/components/Modal/Footer/index.tsx +1 -1
  90. package/src/components/Modal/Footer/styles.css +6 -6
  91. package/src/components/Modal/Header/index.tsx +2 -2
  92. package/src/components/Modal/Header/styles.css +3 -3
  93. package/src/components/Pagination/index.tsx +10 -10
  94. package/src/components/Pagination/styles.css +13 -13
  95. package/src/components/Popover/index.tsx +4 -6
  96. package/src/components/Popover/styles.css +13 -13
  97. package/src/components/Radio/RadioBox/index.tsx +8 -4
  98. package/src/components/Radio/RadioBox/styles.css +14 -14
  99. package/src/components/Radio/RadioGroup/index.tsx +2 -2
  100. package/src/components/Radio/RadioGroup/styles.css +1 -1
  101. package/src/components/Skeleton/index.tsx +1 -1
  102. package/src/components/Skeleton/styles.css +1 -1
  103. package/src/components/Table/TableBody/index.tsx +23 -3
  104. package/src/components/Table/TableBody/styles.css +27 -8
  105. package/src/components/Table/TableCaption/index.tsx +2 -2
  106. package/src/components/Table/TableCaption/styles.css +3 -3
  107. package/src/components/Table/TableContainer/index.tsx +1 -1
  108. package/src/components/Table/TableContainer/styles.css +2 -2
  109. package/src/components/Table/TableFooter/index.tsx +3 -3
  110. package/src/components/Table/TableFooter/styles.css +2 -2
  111. package/src/components/Table/TableHeader/index.tsx +2 -2
  112. package/src/components/Table/TableHeader/styles.css +4 -4
  113. package/src/components/Tabs/TabButton/index.tsx +4 -4
  114. package/src/components/Tabs/TabButton/styles.css +4 -4
  115. package/src/components/Tabs/TabContainer/index.tsx +2 -2
  116. package/src/components/Tabs/TabContainer/styles.css +2 -2
  117. package/src/components/Textarea/index.tsx +4 -4
  118. package/src/components/Textarea/styles.css +16 -16
  119. package/src/components/Toast/index.tsx +1 -1
  120. package/src/components/Toast/styles.css +25 -25
  121. package/src/components/Tooltip/index.tsx +3 -3
  122. package/src/components/Tooltip/styles.css +13 -13
@@ -1,4 +1,4 @@
1
- .arkyn_checkbox {
1
+ .arkynCheckbox {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  justify-content: center;
@@ -7,60 +7,60 @@
7
7
  background-color: rgba(var(--input-background), 1);
8
8
  }
9
9
 
10
- .arkyn_checkbox:hover {
10
+ .arkynCheckbox:hover {
11
11
  cursor: pointer;
12
12
  }
13
13
 
14
- .arkyn_checkbox > svg {
14
+ .arkynCheckbox > svg {
15
15
  display: none;
16
16
  stroke-width: 3px;
17
17
  }
18
18
 
19
19
  /* SIZE */
20
- .arkyn_checkbox.sm {
20
+ .arkynCheckbox.sm {
21
21
  height: 16px;
22
22
  width: 16px;
23
23
  border-radius: calc(var(--rounded-inputs) * 0.3333);
24
24
  }
25
25
 
26
- .arkyn_checkbox.sm > svg {
26
+ .arkynCheckbox.sm > svg {
27
27
  min-height: 12px;
28
28
  min-width: 12px;
29
29
  }
30
30
 
31
- .arkyn_checkbox.md {
31
+ .arkynCheckbox.md {
32
32
  height: 20px;
33
33
  width: 20px;
34
34
  border-radius: calc(var(--rounded-inputs) * 0.6667);
35
35
  }
36
36
 
37
- .arkyn_checkbox.md > svg {
37
+ .arkynCheckbox.md > svg {
38
38
  min-height: 14px;
39
39
  min-width: 14px;
40
40
  }
41
41
 
42
- .arkyn_checkbox.lg {
42
+ .arkynCheckbox.lg {
43
43
  height: 24px;
44
44
  width: 24px;
45
45
  border-radius: var(--rounded-inputs);
46
46
  }
47
47
 
48
- .arkyn_checkbox.lg > svg {
48
+ .arkynCheckbox.lg > svg {
49
49
  min-height: 14px;
50
50
  min-width: 14px;
51
51
  }
52
52
 
53
53
  /* CHECKED */
54
- .arkyn_checkbox.checked {
54
+ .arkynCheckbox.checkedTrue {
55
55
  background-color: rgb(var(--spotlight-primary), 1);
56
56
  border-color: rgb(var(--spotlight-primary), 1);
57
57
  }
58
58
 
59
- .arkyn_checkbox.checked > svg {
59
+ .arkynCheckbox.checkedTrue > svg {
60
60
  display: unset;
61
61
  color: #fff;
62
62
  }
63
63
 
64
- .arkyn_checkbox.error {
64
+ .arkynCheckbox.errorTrue {
65
65
  border-color: rgb(var(--spotlight-danger), 1);
66
66
  }
@@ -8,9 +8,9 @@ function Divider(props: DividerProps) {
8
8
  ...rest
9
9
  } = props;
10
10
 
11
- const className = `arkyn_divider ${orientation} ${baseClassName}`;
11
+ const className = `arkynDivider ${orientation} ${baseClassName}`;
12
12
 
13
- return <div className={className} {...rest} />;
13
+ return <div className={className.trim()} {...rest} />;
14
14
  }
15
15
 
16
16
  export { Divider };
@@ -1,16 +1,16 @@
1
- .arkyn_divider {
1
+ .arkynDivider {
2
2
  display: block;
3
3
  flex: 1;
4
4
  background-color: var(--border);
5
5
  }
6
6
 
7
- .arkyn_divider.horizontal {
7
+ .arkynDivider.horizontal {
8
8
  width: 100%;
9
9
  min-height: 1px;
10
10
  max-height: 1px;
11
11
  }
12
12
 
13
- .arkyn_divider.vertical {
13
+ .arkynDivider.vertical {
14
14
  height: 100%;
15
15
  min-width: 1px;
16
16
  max-width: 1px;
@@ -19,8 +19,8 @@ function DrawerContainer(props: DrawerContainerProps) {
19
19
 
20
20
  const translateX = orientation === "left" ? "-100%" : "100%";
21
21
 
22
- const visibled = isVisibled ? "visible" : "";
23
- const className = `arkyn_drawer_container ${orientation} ${visibled} ${baseClassName}`;
22
+ const visibledClass = isVisibled ? "visibleTrue" : "visibleFalse";
23
+ const className = `arkynDrawerContainer ${orientation} ${visibledClass} ${baseClassName}`;
24
24
 
25
25
  return (
26
26
  <drawerContext.Provider value={{ makeInvisible }}>
@@ -28,7 +28,7 @@ function DrawerContainer(props: DrawerContainerProps) {
28
28
  {isVisibled && (
29
29
  <aside className={className.trim()} {...rest}>
30
30
  <motion.div
31
- className="arkyn_drawer_container-overlay"
31
+ className="arkynDrawerContainerOverlay"
32
32
  transition={{ duration: 0.15, ease: "easeOut" }}
33
33
  initial={{ opacity: 0 }}
34
34
  animate={{ opacity: 1 }}
@@ -37,7 +37,7 @@ function DrawerContainer(props: DrawerContainerProps) {
37
37
  />
38
38
 
39
39
  <motion.div
40
- className="arkyn_drawer_container-content"
40
+ className="arkynDrawerContainerContent"
41
41
  transition={{ ease: "easeOut", duration: 0.15 }}
42
42
  initial={{ transform: `translateX(${translateX})` }}
43
43
  animate={{ transform: "translateX(0px)" }}
@@ -1,4 +1,4 @@
1
- .arkyn_drawer_container {
1
+ .arkynDrawerContainer {
2
2
  position: fixed;
3
3
  top: 0;
4
4
  left: 0;
@@ -9,7 +9,7 @@
9
9
  z-index: 9999;
10
10
  }
11
11
 
12
- .arkyn_drawer_container-overlay {
12
+ .arkynDrawerContainerOverlay {
13
13
  position: fixed;
14
14
  z-index: 9997;
15
15
  top: 0;
@@ -19,11 +19,11 @@
19
19
  background: rgba(0, 0, 0, 0.5);
20
20
  }
21
21
 
22
- .arkyn_drawer_container-overlay:hover {
22
+ .arkynDrawerContainerOverlay:hover {
23
23
  cursor: pointer;
24
24
  }
25
25
 
26
- .arkyn_drawer_container-content {
26
+ .arkynDrawerContainerContent {
27
27
  z-index: 9999;
28
28
  position: fixed;
29
29
  top: 0;
@@ -32,10 +32,10 @@
32
32
  background: var(--card);
33
33
  }
34
34
 
35
- .arkyn_drawer_container.left > .arkyn_drawer_container-content {
35
+ .arkynDrawerContainer.left > .arkynDrawerContainerContent {
36
36
  left: 0;
37
37
  }
38
38
 
39
- .arkyn_drawer_container.right > .arkyn_drawer_container-content {
39
+ .arkynDrawerContainer.right > .arkynDrawerContainerContent {
40
40
  right: 0;
41
41
  }
@@ -15,7 +15,7 @@ function DrawerHeader(props: ModalHeaderProps) {
15
15
  } = props;
16
16
 
17
17
  const { makeInvisible } = useContext(drawerContext);
18
- const className = `arkyn_drawer_header ${baseClassName}`;
18
+ const className = `arkynDrawerHeader ${baseClassName}`;
19
19
 
20
20
  return (
21
21
  <header className={className.trim()} {...rest}>
@@ -23,7 +23,7 @@ function DrawerHeader(props: ModalHeaderProps) {
23
23
 
24
24
  {showCloseButton && (
25
25
  <button
26
- className="arkyn_drawer_header-close_button"
26
+ className="arkynDrawerHeaderCloseButton"
27
27
  type="button"
28
28
  onClick={makeInvisible}
29
29
  aria-label="Close drawer"
@@ -1,4 +1,4 @@
1
- .arkyn_drawer_header {
1
+ .arkynDrawerHeader {
2
2
  display: flex;
3
3
  align-items: center;
4
4
 
@@ -14,7 +14,7 @@
14
14
  border-bottom: 1px solid var(--border);
15
15
  }
16
16
 
17
- .arkyn_drawer_header-close_button {
17
+ .arkynDrawerHeaderCloseButton {
18
18
  display: flex;
19
19
  align-items: center;
20
20
  justify-content: center;
@@ -32,7 +32,7 @@
32
32
  transition: all 0.15s ease-out;
33
33
  }
34
34
 
35
- .arkyn_drawer_header-close_button:hover {
35
+ .arkynDrawerHeaderCloseButton:hover {
36
36
  cursor: pointer;
37
37
  filter: brightness(0.9);
38
38
  }
@@ -17,7 +17,7 @@ function FormController(props: FormControllerProps) {
17
17
 
18
18
  const id = useId();
19
19
 
20
- const className = `arkyn_form_controller ${baseClassName}`;
20
+ const className = `arkynFormController ${baseClassName}`;
21
21
 
22
22
  return (
23
23
  <FormControllerContext.Provider value={{ error, id, inputRef }}>
@@ -1,4 +1,4 @@
1
- .arkyn_form_controller {
1
+ .arkynFormController {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  gap: 6px;
@@ -5,7 +5,7 @@ import "./styles.css";
5
5
 
6
6
  function FormError(props: FormErrorProps) {
7
7
  const { children, className: baseClassName, ...rest } = props;
8
- const className = `arkyn_form_error ${baseClassName}`;
8
+ const className = `arkynFormError ${baseClassName}`;
9
9
 
10
10
  const { error } = useFormController();
11
11
  if (children) {
@@ -1,4 +1,4 @@
1
- .arkyn_form_error {
1
+ .arkynFormError {
2
2
  font-size: 12px;
3
3
  line-height: 12px;
4
4
  font-weight: 600;
@@ -12,10 +12,10 @@ function FormLabel(props: FormLabelProps) {
12
12
 
13
13
  const { id } = useFormController();
14
14
 
15
- const show = showAsterisk ? "show-asterisk" : "";
16
- const className = `arkyn_form_label ${show} ${baseClassName}`;
15
+ const show = showAsterisk ? "asteriskTrue" : "asteriskFalse";
16
+ const className = `arkynFormLabel ${show} ${baseClassName}`;
17
17
 
18
- return <label {...rest} className={className.trim()} htmlFor={id} />;
18
+ return <label className={className.trim()} htmlFor={id} {...rest} />;
19
19
  }
20
20
 
21
21
  export { FormLabel };
@@ -1,11 +1,11 @@
1
- .arkyn_form_label {
1
+ .arkynFormLabel {
2
2
  color: var(--text-body);
3
3
  font-size: 14px;
4
4
  font-weight: 600;
5
5
  line-height: 19.07px;
6
6
  }
7
7
 
8
- .arkyn_form_label.show-asterisk::before {
8
+ .arkynFormLabel.asteriskTrue::before {
9
9
  content: "* ";
10
10
  font-size: 12px;
11
11
  font-weight: 600;
@@ -16,7 +16,8 @@ function IconButton(props: IconButtonProps) {
16
16
  } = props;
17
17
 
18
18
  const iconSize = { xs: 12, sm: 16, md: 20, lg: 24 };
19
- const className = `arkyn_icon_button ${variant} ${scheme} ${size} loading_${isLoading} ${baseClassName}`;
19
+ const loading = isLoading ? "loadingTrue" : "loadingFalse";
20
+ const className = `arkynIconButton ${variant} ${scheme} ${size} ${loading} ${baseClassName}`;
20
21
 
21
22
  return (
22
23
  <button
@@ -24,11 +25,11 @@ function IconButton(props: IconButtonProps) {
24
25
  className={className.trim()}
25
26
  {...rest}
26
27
  >
27
- <div className="arkyn_icon_button-spinner">
28
+ <div className="arkynIconButtonSpinner">
28
29
  <Loader2 size={iconSize[size]} strokeWidth={2.5} />
29
30
  </div>
30
31
 
31
- <div className="arkyn_icon_button-content">
32
+ <div className="arkynIconButtonContent">
32
33
  <Icon size={iconSize[size]} strokeWidth={2.5} />
33
34
  </div>
34
35
  </button>
@@ -1,5 +1,5 @@
1
1
  /* BASE */
2
- .arkyn_icon_button {
2
+ .arkynIconButton {
3
3
  background: transparent;
4
4
  border: 1px solid transparent;
5
5
  outline: 1px solid transparent;
@@ -7,149 +7,149 @@
7
7
  transition: 0.15s all ease-out;
8
8
  }
9
9
 
10
- .arkyn_icon_button:hover {
10
+ .arkynIconButton:hover {
11
11
  cursor: pointer;
12
12
  filter: brightness(0.95);
13
13
  }
14
14
 
15
- html.dark .arkyn_icon_button:hover {
15
+ html.dark .arkynIconButton:hover {
16
16
  cursor: pointer;
17
17
  filter: brightness(1.2);
18
18
  }
19
19
 
20
- .arkyn_icon_button:disabled {
20
+ .arkynIconButton:disabled {
21
21
  cursor: not-allowed;
22
22
  opacity: 0.5;
23
23
  }
24
24
 
25
- .arkyn_icon_button-content {
25
+ .arkynIconButtonContent {
26
26
  display: flex;
27
27
  align-items: center;
28
28
  justify-content: center;
29
29
  }
30
30
 
31
31
  /* VARIANTS */
32
- .arkyn_icon_button.solid {
32
+ .arkynIconButton.solid {
33
33
  color: #fff;
34
34
  }
35
35
 
36
- .arkyn_icon_button.solid.primary {
36
+ .arkynIconButton.solid.primary {
37
37
  background-color: rgba(var(--spotlight-primary), 1);
38
38
  }
39
39
 
40
- .arkyn_icon_button.solid.danger {
40
+ .arkynIconButton.solid.danger {
41
41
  background-color: rgba(var(--spotlight-danger), 1);
42
42
  }
43
43
 
44
- .arkyn_icon_button.solid.success {
44
+ .arkynIconButton.solid.success {
45
45
  background-color: rgba(var(--spotlight-success), 1);
46
46
  }
47
47
 
48
- .arkyn_icon_button.solid.warning {
48
+ .arkynIconButton.solid.warning {
49
49
  background-color: rgba(var(--spotlight-warning), 1);
50
50
  }
51
51
 
52
- .arkyn_icon_button.solid.info {
52
+ .arkynIconButton.solid.info {
53
53
  background-color: rgba(var(--spotlight-info), 1);
54
54
  }
55
55
 
56
- .arkyn_icon_button.outline {
56
+ .arkynIconButton.outline {
57
57
  background-color: rgba(var(--input-background), 1);
58
58
  border-color: var(--border);
59
59
  }
60
60
 
61
- .arkyn_icon_button.outline.primary {
61
+ .arkynIconButton.outline.primary {
62
62
  color: rgba(var(--spotlight-primary), 1);
63
63
  }
64
64
 
65
- .arkyn_icon_button.outline.danger {
65
+ .arkynIconButton.outline.danger {
66
66
  color: rgba(var(--spotlight-danger), 1);
67
67
  }
68
68
 
69
- .arkyn_icon_button.outline.success {
69
+ .arkynIconButton.outline.success {
70
70
  color: rgba(var(--spotlight-success), 1);
71
71
  }
72
72
 
73
- .arkyn_icon_button.outline.warning {
73
+ .arkynIconButton.outline.warning {
74
74
  color: rgba(var(--spotlight-warning), 1);
75
75
  }
76
76
 
77
- .arkyn_icon_button.outline.info {
77
+ .arkynIconButton.outline.info {
78
78
  color: rgba(var(--spotlight-info), 1);
79
79
  }
80
80
 
81
- .arkyn_icon_button.ghost.primary {
81
+ .arkynIconButton.ghost.primary {
82
82
  color: rgba(var(--spotlight-primary), 1);
83
83
  background-color: rgba(var(--spotlight-primary), 0.2);
84
84
  }
85
85
 
86
- .arkyn_icon_button.ghost.danger {
86
+ .arkynIconButton.ghost.danger {
87
87
  color: rgba(var(--spotlight-danger), 1);
88
88
  background-color: rgba(var(--spotlight-danger), 0.2);
89
89
  }
90
90
 
91
- .arkyn_icon_button.ghost.success {
91
+ .arkynIconButton.ghost.success {
92
92
  color: rgba(var(--spotlight-success), 1);
93
93
  background-color: rgba(var(--spotlight-success), 0.2);
94
94
  }
95
95
 
96
- .arkyn_icon_button.ghost.warning {
96
+ .arkynIconButton.ghost.warning {
97
97
  color: rgba(var(--spotlight-warning), 1);
98
98
  background-color: rgba(var(--spotlight-warning), 0.2);
99
99
  }
100
100
 
101
- .arkyn_icon_button.ghost.info {
101
+ .arkynIconButton.ghost.info {
102
102
  color: rgba(var(--spotlight-info), 1);
103
103
  background-color: rgba(var(--spotlight-info), 0.2);
104
104
  }
105
105
 
106
- .arkyn_icon_button.invisible.primary {
106
+ .arkynIconButton.invisible.primary {
107
107
  color: rgba(var(--spotlight-primary), 1);
108
108
  }
109
109
 
110
- .arkyn_icon_button.invisible.danger {
110
+ .arkynIconButton.invisible.danger {
111
111
  color: rgba(var(--spotlight-danger), 1);
112
112
  }
113
113
 
114
- .arkyn_icon_button.invisible.success {
114
+ .arkynIconButton.invisible.success {
115
115
  color: rgba(var(--spotlight-success), 1);
116
116
  }
117
117
 
118
- .arkyn_icon_button.invisible.warning {
118
+ .arkynIconButton.invisible.warning {
119
119
  color: rgba(var(--spotlight-warning), 1);
120
120
  }
121
121
 
122
- .arkyn_icon_button.invisible.info {
122
+ .arkynIconButton.invisible.info {
123
123
  color: rgba(var(--spotlight-info), 1);
124
124
  }
125
125
 
126
126
  /* SIZE */
127
- .arkyn_icon_button.lg {
127
+ .arkynIconButton.lg {
128
128
  border-radius: var(--rounded-inputs);
129
129
  height: 44px;
130
130
  width: 44px;
131
131
  }
132
132
 
133
- .arkyn_icon_button.md {
133
+ .arkynIconButton.md {
134
134
  border-radius: var(--rounded-inputs);
135
135
  height: 40px;
136
136
  width: 40px;
137
137
  }
138
138
 
139
- .arkyn_icon_button.sm {
139
+ .arkynIconButton.sm {
140
140
  border-radius: var(--rounded-inputs);
141
141
  height: 32px;
142
142
  width: 32px;
143
143
  }
144
144
 
145
- .arkyn_icon_button.xs {
145
+ .arkynIconButton.xs {
146
146
  border-radius: calc(var(--rounded-inputs) * 0.6667); /* 2/3 */
147
147
  height: 24px;
148
148
  width: 24px;
149
149
  }
150
150
 
151
151
  /* SPIN */
152
- .arkyn_icon_button-spinner {
152
+ .arkynIconButtonSpinner {
153
153
  display: flex;
154
154
  align-items: center;
155
155
  justify-content: center;
@@ -161,15 +161,15 @@ html.dark .arkyn_icon_button:hover {
161
161
  opacity: 0;
162
162
  }
163
163
 
164
- .arkyn_icon_button-spinner > svg {
164
+ .arkynIconButtonSpinner > svg {
165
165
  animation: spin 2s linear infinite;
166
166
  }
167
167
 
168
- .arkyn_icon_button.loading_true .arkyn_icon_button-spinner {
168
+ .arkynIconButton.loadingTrue .arkynIconButtonSpinner {
169
169
  opacity: 1;
170
170
  }
171
171
 
172
- .arkyn_icon_button.loading_true .arkyn_icon_button-content {
172
+ .arkynIconButton.loadingTrue .arkynIconButtonContent {
173
173
  opacity: 0;
174
174
  }
175
175
 
@@ -16,8 +16,8 @@ function ModalContainer(args: ModalContainerProps) {
16
16
  ...rest
17
17
  } = args;
18
18
 
19
- const visibled = isVisibled ? "visible" : "";
20
- const className = `arkyn_modal_container ${visibled} ${baseClassName}`;
19
+ const visibleClass = isVisibled ? "visibleTrue" : "visibleFalse";
20
+ const className = `arkynModalContainer ${visibleClass} ${baseClassName}`;
21
21
 
22
22
  return (
23
23
  <modalContext.Provider value={{ makeInvisible }}>
@@ -25,7 +25,7 @@ function ModalContainer(args: ModalContainerProps) {
25
25
  {isVisibled && (
26
26
  <aside className={className.trim()} {...rest}>
27
27
  <motion.div
28
- className="arkyn_modal_container-overlay"
28
+ className="arkynModalContainerOverlay"
29
29
  transition={{ duration: 0.15, ease: "easeOut" }}
30
30
  initial={{ opacity: 0 }}
31
31
  animate={{ opacity: 1 }}
@@ -34,7 +34,7 @@ function ModalContainer(args: ModalContainerProps) {
34
34
  />
35
35
 
36
36
  <motion.div
37
- className="arkyn_modal_container-content"
37
+ className="arkynModalContainerContent"
38
38
  transition={{ duration: 0.15, ease: "easeOut" }}
39
39
  initial={{ opacity: 0, scale: 0.75 }}
40
40
  animate={{ opacity: 1, scale: 1 }}
@@ -1,4 +1,4 @@
1
- .arkyn_modal_container {
1
+ .arkynModalContainer {
2
2
  position: fixed;
3
3
  top: 0;
4
4
  left: 0;
@@ -16,7 +16,7 @@
16
16
  z-index: 9999;
17
17
  }
18
18
 
19
- .arkyn_modal_container-overlay {
19
+ .arkynModalContainerOverlay {
20
20
  position: fixed;
21
21
  z-index: 9997;
22
22
  top: 0;
@@ -26,11 +26,11 @@
26
26
  background: rgba(0, 0, 0, 0.5);
27
27
  }
28
28
 
29
- .arkyn_modal_container-overlay:hover {
29
+ .arkynModalContainerOverlay:hover {
30
30
  cursor: pointer;
31
31
  }
32
32
 
33
- .arkyn_modal_container-content {
33
+ .arkynModalContainerContent {
34
34
  z-index: 9999;
35
35
  border-radius: var(--rounded-cards);
36
36
  background: var(--card);
@@ -3,7 +3,7 @@ import "./styles.css";
3
3
 
4
4
  function ModalFooter(args: ModalFooterProps) {
5
5
  const { alignment = "right", className: baseClassName, ...rest } = args;
6
- const className = `arkyn_modal_footer ${alignment} ${baseClassName}`;
6
+ const className = `arkynModalFooter ${alignment} ${baseClassName}`;
7
7
 
8
8
  return <footer className={className.trim()} {...rest} />;
9
9
  }
@@ -1,4 +1,4 @@
1
- .arkyn_modal_footer {
1
+ .arkynModalFooter {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  gap: 16px;
@@ -6,22 +6,22 @@
6
6
  border-top: 1px solid var(--border);
7
7
  }
8
8
 
9
- .arkyn_modal_footer.left {
9
+ .arkynModalFooter.left {
10
10
  justify-content: flex-start;
11
11
  }
12
12
 
13
- .arkyn_modal_footer.right {
13
+ .arkynModalFooter.right {
14
14
  justify-content: flex-end;
15
15
  }
16
16
 
17
- .arkyn_modal_footer.center {
17
+ .arkynModalFooter.center {
18
18
  justify-content: center;
19
19
  }
20
20
 
21
- .arkyn_modal_footer.between {
21
+ .arkynModalFooter.between {
22
22
  justify-content: space-between;
23
23
  }
24
24
 
25
- .arkyn_modal_footer.around {
25
+ .arkynModalFooter.around {
26
26
  justify-content: space-around;
27
27
  }
@@ -14,7 +14,7 @@ function ModalHeader(args: ModalHeaderProps) {
14
14
  } = args;
15
15
 
16
16
  const { makeInvisible } = useContext(modalContext);
17
- const className = `arkyn_modal_header ${baseClassName}`;
17
+ const className = `arkynModalHeader ${baseClassName}`;
18
18
 
19
19
  return (
20
20
  <header className={className.trim()} {...rest}>
@@ -25,7 +25,7 @@ function ModalHeader(args: ModalHeaderProps) {
25
25
  type="button"
26
26
  onClick={makeInvisible}
27
27
  aria-label="Close modal button"
28
- className="arkyn_modal_header-close_button"
28
+ className="arkynModalHeaderCloseButton"
29
29
  >
30
30
  <X size={24} />
31
31
  </button>
@@ -1,4 +1,4 @@
1
- .arkyn_modal_header {
1
+ .arkynModalHeader {
2
2
  display: flex;
3
3
  align-items: center;
4
4
 
@@ -14,7 +14,7 @@
14
14
  border-bottom: 1px solid var(--border);
15
15
  }
16
16
 
17
- .arkyn_modal_header-close_button {
17
+ .arkynModalHeaderCloseButton {
18
18
  display: flex;
19
19
  align-items: center;
20
20
  justify-content: center;
@@ -32,7 +32,7 @@
32
32
  transition: all 0.15s ease-out;
33
33
  }
34
34
 
35
- .arkyn_modal_header-close_button:hover {
35
+ .arkynModalHeaderCloseButton:hover {
36
36
  cursor: pointer;
37
37
  filter: brightness(0.9);
38
38
  }