@arkyn/components 1.3.78 → 1.3.80

package/src/components/Alert/AlertContent/index.tsx

@@ -1,16 +1,11 @@
 import { AlertContentProps } from "@arkyn/types";
-
 import "./styles.css";
 
 function AlertContent(props: AlertContentProps) {
-  const { children, className: baseClassName, ...rest } = props;
-  const className = `arkyn_alert_content ${baseClassName}`;
+  const { className: baseClassName, ...rest } = props;
+  const className = `arkynAlertContent ${baseClassName}`;
 
-  return (
-    <div className={className.trim()} {...rest}>
-      {children}
-    </div>
-  );
+  return <div className={className.trim()} {...rest} />;
 }
 
 export { AlertContent };

package/src/components/Alert/AlertContent/styles.css

@@ -1,4 +1,4 @@
-.arkyn_alert_content {
+.arkynAlertContent {
   display: flex;
   flex-direction: column;
   gap: 8px;

package/src/components/Alert/AlertDescription/index.tsx

@@ -2,14 +2,10 @@ import { AlertDescriptionProps } from "@arkyn/types";
 import "./styles.css";
 
 function AlertDescription(props: AlertDescriptionProps) {
-  const { children, className: baseClassName, ...rest } = props;
-  const className = `arkyn_description ${baseClassName}`;
+  const { className: baseClassName, ...rest } = props;
+  const className = `arkynAlertDescription ${baseClassName}`;
 
-  return (
-    <div className={className.trim()} {...rest}>
-      {children}
-    </div>
-  );
+  return <div className={className.trim()} {...rest} />;
 }
 
 export { AlertDescription };

package/src/components/Alert/AlertDescription/styles.css

@@ -1,8 +1,7 @@
-.arkyn_description {
+.arkynAlertDescription {
   font-size: 14px;
   font-weight: 400;
   line-height: 15px;
   text-align: left;
-
   color: var(--text-body);
 }

package/src/components/Alert/AlertIcon/index.tsx

@@ -8,7 +8,7 @@ function AlertIcon(props: AlertIconProps) {
   const { className: baseClassName, ...rest } = props;
   const { schema } = useAlertContainer();
 
-  const className = `arkyn_alert_icon ${schema} ${baseClassName}`;
+  const className = `arkynAlertIcon ${schema} ${baseClassName}`;
 
   switch (schema) {
     case "success":

package/src/components/Alert/AlertIcon/styles.css

@@ -1,4 +1,4 @@
-.arkyn_alert_icon {
+.arkynAlertIcon {
   min-width: 28px;
   min-height: 28px;
 
@@ -6,18 +6,18 @@
   max-height: 28px;
 }
 
-.arkyn_alert_icon.danger {
+.arkynAlertIcon.danger {
   color: rgba(var(--spotlight-danger), 1);
 }
 
-.arkyn_alert_icon.success {
+.arkynAlertIcon.success {
   color: rgba(var(--spotlight-success), 1);
 }
 
-.arkyn_alert_icon.info {
+.arkynAlertIcon.info {
   color: rgba(var(--spotlight-info), 1);
 }
 
-.arkyn_alert_icon.warning {
+.arkynAlertIcon.warning {
   color: rgba(var(--spotlight-warning), 1);
 }

package/src/components/Alert/AlertTitle/index.tsx

@@ -2,14 +2,10 @@ import { AlertTitleProps } from "@arkyn/types";
 import "./styles.css";
 
 function AlertTitle(props: AlertTitleProps) {
-  const { children, className: baseClassName, ...rest } = props;
-  const className = `arkyn_title ${baseClassName}`;
+  const { className: baseClassName, ...rest } = props;
+  const className = `arkynAlertTitle ${baseClassName}`;
 
-  return (
-    <div className={className.trim()} {...rest}>
-      {children}
-    </div>
-  );
+  return <div className={className.trim()} {...rest} />;
 }
 
 export { AlertTitle };

package/src/components/Alert/AlertTitle/styles.css

@@ -1,8 +1,7 @@
-.arkyn_title {
+.arkynAlertTitle {
   font-size: 16px;
   font-weight: 600;
   line-height: 17px;
   text-align: left;
-
   color: var(--text-heading);
 }

package/src/components/Badge/index.tsx

@@ -18,7 +18,7 @@ function Badge(args: BadgeProps) {
   const iconSizes = { md: 12, lg: 14 };
   const iconSize = iconSizes[size];
 
-  const className = `arkyn_badge ${variant} ${scheme} ${size} ${baseClassName}`;
+  const className = `arkynBadge ${variant} ${scheme} ${size} ${baseClassName}`;
 
   return (
     <div className={className.trim()} {...rest}>

package/src/components/Badge/styles.css

@@ -1,5 +1,5 @@
 /* BASE */
-.arkyn_badge {
+.arkynBadge {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11,86 +11,82 @@
 }
 
 /* VARIANTS */
-.arkyn_badge.solid {
+.arkynBadge.solid {
   color: #fff;
 }
 
-.arkyn_badge.solid.primary {
+.arkynBadge.solid.primary {
   background-color: rgba(var(--spotlight-primary), 1);
 }
 
-.arkyn_badge.solid.danger {
+.arkynBadge.solid.danger {
   background-color: rgba(var(--spotlight-danger), 1);
 }
 
-.arkyn_badge.solid.success {
+.arkynBadge.solid.success {
   background-color: rgba(var(--spotlight-success), 1);
 }
 
-.arkyn_badge.solid.warning {
+.arkynBadge.solid.warning {
   background-color: rgba(var(--spotlight-warning), 1);
 }
 
-.arkyn_badge.solid.info {
+.arkynBadge.solid.info {
   background-color: rgba(var(--spotlight-info), 1);
 }
 
-.arkyn_button.outline {
-  background-color: rgba(var(--spotlight-outline), 1);
-}
-
-.arkyn_badge.outline.primary {
+.arkynBadge.outline.primary {
   color: rgba(var(--spotlight-primary), 1);
   border-color: rgba(var(--spotlight-primary), 1);
 }
 
-.arkyn_badge.outline.danger {
+.arkynBadge.outline.danger {
   color: rgba(var(--spotlight-danger), 1);
   border-color: rgba(var(--spotlight-danger), 1);
 }
 
-.arkyn_badge.outline.success {
+.arkynBadge.outline.success {
   color: rgba(var(--spotlight-success), 1);
   border-color: rgba(var(--spotlight-success), 1);
 }
 
-.arkyn_badge.outline.warning {
+.arkynBadge.outline.warning {
   color: rgba(var(--spotlight-warning), 1);
   border-color: rgba(var(--spotlight-warning), 1);
 }
 
-.arkyn_badge.outline.info {
+.arkynBadge.outline.info {
   color: rgba(var(--spotlight-info), 1);
   border-color: rgba(var(--spotlight-info), 1);
 }
 
-.arkyn_badge.ghost.primary {
+.arkynBadge.ghost.primary {
   color: rgba(var(--spotlight-primary), 1);
   background-color: rgba(var(--spotlight-primary), 0.2);
 }
 
-.arkyn_badge.ghost.danger {
+.arkynBadge.ghost.danger {
   color: rgba(var(--spotlight-danger), 1);
   background-color: rgba(var(--spotlight-danger), 0.2);
 }
 
-.arkyn_badge.ghost.success {
+.arkynBadge.ghost.success {
   color: rgba(var(--spotlight-success), 1);
   background-color: rgba(var(--spotlight-success), 0.2);
 }
 
-.arkyn_badge.ghost.warning {
+.arkynBadge.ghost.warning {
   color: rgba(var(--spotlight-warning), 1);
   background-color: rgba(var(--spotlight-warning), 0.2);
 }
 
-.arkyn_badge.ghost.info {
+.arkynBadge.ghost.info {
   color: rgba(var(--spotlight-info), 1);
   background-color: rgba(var(--spotlight-info), 0.2);
 }
 
 /* SIZE */
-.arkyn_badge.lg {
+.arkynBadge.lg {
   font-weight: 400;
   font-size: 12px;
   line-height: 12px;
@@ -100,7 +96,7 @@
   height: 24px;
 }
 
-.arkyn_badge.md {
+.arkynBadge.md {
   font-weight: 400;
   font-size: 10px;
   line-height: 10px;

package/src/components/Breadcrumb/BreadcrumbContainer/index.tsx

@@ -3,7 +3,7 @@ import "./styles.css";
 
 function BreadcrumbContainer(args: BreadcrumbContainerProps) {
   const { className: baseClassName = "", ...rest } = args;
-  const className = `arkyn_breadcrumb_container ${baseClassName}`;
+  const className = `arkynBreadcrumbContainer ${baseClassName}`;
 
   return <nav className={className} {...rest} />;
 }

package/src/components/Breadcrumb/BreadcrumbContainer/styles.css

@@ -1,39 +1,7 @@
-.arkyn_breadcrumb_container {
+.arkynBreadcrumbContainer {
   display: flex;
   align-items: center;
   justify-content: start;
-
   flex-wrap: wrap;
   gap: 4px;
 }
-
-.arkyn_breadcrumb_link {
-  user-select: none;
-  text-decoration: none;
-  font-size: 14px;
-  color: var(--text-body);
-}
-
-.arkyn_breadcrumb_link.active {
-  color: var(--text-heading);
-}
-
-.arkyn_breadcrumb_link.inactive:hover {
-  cursor: pointer;
-  color: var(--text-heading);
-}
-
-.arkyn_breadcrumb_link:first-child > svg {
-  display: none;
-}
-
-.arkyn_breadcrumb_link:not(:first-child) {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.arkyn_breadcrumb_link:not(:first-child) > svg {
-  display: unset;
-  color: var(--text-body);
-}

package/src/components/Breadcrumb/BreadcrumbLink/index.tsx

@@ -16,7 +16,7 @@ function BreadcrumbLink(args: BreadcrumbLinkProps) {
   } = args;
 
   const active = pathname === to ? "active" : "inactive";
-  const className = `arkyn_breadcrumb_link ${active} ${baseClassName}`;
+  const className = `arkynBreadcrumbLink ${active} ${baseClassName}`;
 
   if (disabled) {
     return (

package/src/components/Breadcrumb/BreadcrumbLink/styles.css

@@ -1,30 +1,30 @@
-.arkyn_breadcrumb_link {
+.arkynBreadcrumbLink {
   user-select: none;
   text-decoration: none;
   font-size: 14px;
   color: var(--text-body);
 }
 
-.arkyn_breadcrumb_link.active {
+.arkynBreadcrumbLink.active {
   color: var(--text-muted);
 }
 
-.arkyn_breadcrumb_link.inactive:hover {
+.arkynBreadcrumbLink.inactive:hover {
   cursor: pointer;
   color: var(--text-muted);
 }
 
-.arkyn_breadcrumb_link:first-child > svg {
+.arkynBreadcrumbLink:first-child > svg {
   display: none;
 }
 
-.arkyn_breadcrumb_link:not(:first-child) {
+.arkynBreadcrumbLink:not(:first-child) {
   display: flex;
   align-items: center;
   gap: 4px;
 }
 
-.arkyn_breadcrumb_link:not(:first-child) > svg {
+.arkynBreadcrumbLink:not(:first-child) > svg {
   display: unset;
   color: var(--text-body);
 }

package/src/components/Button/index.tsx

@@ -22,16 +22,21 @@ function Button(args: ButtonProps) {
   const iconSizes = { xs: 12, sm: 16, md: 20, lg: 24 };
   const iconSize = iconSizes[size];
 
-  const className = `arkyn_button loading_text_${!!loadingText} ${variant} ${scheme} ${size} loading_${isLoading} ${baseClassName}`;
+  const loadingClass = isLoading ? "loadingTrue" : "loadingFalse";
+  const loadingTextClass = !!loadingText
+    ? "loadingTextTrue"
+    : "loadingTextFalse";
+
+  const className = `arkynButton ${loadingClass} ${variant} ${scheme} ${size} ${loadingTextClass} ${baseClassName}`;
 
   return (
     <button className={className} disabled={disabled || isLoading} {...rest}>
-      <div className="arkyn_button-spinner">
+      <div className="arkynButtonSpinner">
         <Loader2 size={iconSize} strokeWidth={2.5} />
         {loadingText && loadingText}
       </div>
 
-      <div className="arkyn_button-content">
+      <div className="arkynButtonContent">
         {GenerateIcon(iconSize, leftIcon)}
         {children}
         {GenerateIcon(iconSize, rightIcon)}

package/src/components/Button/styles.css

@@ -1,5 +1,5 @@
 /* BASE */
-.arkyn_button {
+.arkynButton {
   background: transparent;
   border: 1px solid transparent;
   outline: 1px solid transparent;
@@ -7,22 +7,22 @@
   transition: 0.15s all ease-out;
 }
 
-.arkyn_button:hover {
+.arkynButton:hover {
   cursor: pointer;
   filter: brightness(0.95);
 }
 
-html.dark .arkyn_button:hover {
+html.dark .arkynButton:hover {
   cursor: pointer;
   filter: brightness(1.2);
 }
 
-.arkyn_button:disabled {
+.arkynButton:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
-.arkyn_button .arkyn_button-content {
+.arkynButton .arkynButtonContent {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -30,102 +30,102 @@ html.dark .arkyn_button:hover {
 }
 
 /* VARIANTS */
-.arkyn_button.solid {
+.arkynButton.solid {
   color: #fff;
 }
 
-.arkyn_button.solid.primary {
+.arkynButton.solid.primary {
   background-color: rgba(var(--spotlight-primary), 1);
 }
 
-.arkyn_button.solid.danger {
+.arkynButton.solid.danger {
   background-color: rgba(var(--spotlight-danger), 1);
 }
 
-.arkyn_button.solid.success {
+.arkynButton.solid.success {
   background-color: rgba(var(--spotlight-success), 1);
 }
 
-.arkyn_button.solid.warning {
+.arkynButton.solid.warning {
   background-color: rgba(var(--spotlight-warning), 1);
 }
 
-.arkyn_button.solid.info {
+.arkynButton.solid.info {
   background-color: rgba(var(--spotlight-info), 1);
 }
 
-.arkyn_button.outline {
+.arkynButton.outline {
   background-color: rgba(var(--input-background), 1);
   border-color: var(--border);
 }
 
-.arkyn_button.outline.primary {
+.arkynButton.outline.primary {
   color: rgba(var(--spotlight-primary), 1);
 }
 
-.arkyn_button.outline.danger {
+.arkynButton.outline.danger {
   color: rgba(var(--spotlight-danger), 1);
 }
 
-.arkyn_button.outline.success {
+.arkynButton.outline.success {
   color: rgba(var(--spotlight-success), 1);
 }
 
-.arkyn_button.outline.warning {
+.arkynButton.outline.warning {
   color: rgba(var(--spotlight-warning), 1);
 }
 
-.arkyn_button.outline.info {
+.arkynButton.outline.info {
   color: rgba(var(--spotlight-info), 1);
 }
 
-.arkyn_button.ghost.primary {
+.arkynButton.ghost.primary {
   color: rgba(var(--spotlight-primary), 1);
   background-color: rgba(var(--spotlight-primary), 0.2);
 }
 
-.arkyn_button.ghost.danger {
+.arkynButton.ghost.danger {
   color: rgba(var(--spotlight-danger), 1);
   background-color: rgba(var(--spotlight-danger), 0.2);
 }
 
-.arkyn_button.ghost.success {
+.arkynButton.ghost.success {
   color: rgba(var(--spotlight-success), 1);
   background-color: rgba(var(--spotlight-success), 0.2);
 }
 
-.arkyn_button.ghost.warning {
+.arkynButton.ghost.warning {
   color: rgba(var(--spotlight-warning), 1);
   background-color: rgba(var(--spotlight-warning), 0.2);
 }
 
-.arkyn_button.ghost.info {
+.arkynButton.ghost.info {
   color: rgba(var(--spotlight-info), 1);
   background-color: rgba(var(--spotlight-info), 0.2);
 }
 
-.arkyn_button.invisible.primary {
+.arkynButton.invisible.primary {
   color: rgba(var(--spotlight-primary), 1);
 }
 
-.arkyn_button.invisible.danger {
+.arkynButton.invisible.danger {
   color: rgba(var(--spotlight-danger), 1);
 }
 
-.arkyn_button.invisible.success {
+.arkynButton.invisible.success {
   color: rgba(var(--spotlight-success), 1);
 }
 
-.arkyn_button.invisible.warning {
+.arkynButton.invisible.warning {
   color: rgba(var(--spotlight-warning), 1);
 }
 
-.arkyn_button.invisible.info {
+.arkynButton.invisible.info {
   color: rgba(var(--spotlight-info), 1);
 }
 
 /* SIZE */
-.arkyn_button.lg {
+.arkynButton.lg {
   font-weight: 600;
   font-size: 14px;
   line-height: 14px;
@@ -135,12 +135,12 @@ html.dark .arkyn_button:hover {
   height: 44px;
 }
 
-.arkyn_button.lg .arkyn_button-content,
-.arkyn_button.lg .arkyn_button-spinner {
+.arkynButton.lg .arkynButtonContent,
+.arkynButton.lg .arkynButtonSpinner {
   gap: 16px;
 }
 
-.arkyn_button.md {
+.arkynButton.md {
   font-weight: 600;
   font-size: 14px;
   line-height: 14px;
@@ -151,12 +151,12 @@ html.dark .arkyn_button:hover {
   height: 40px;
 }
 
-.arkyn_button.md .arkyn_button-content,
-.arkyn_button.md .arkyn_button-spinner {
+.arkynButton.md .arkynButtonContent,
+.arkynButton.md .arkynButtonSpinner {
   gap: 14px;
 }
 
-.arkyn_button.sm {
+.arkynButton.sm {
   font-weight: 600;
   font-size: 12px;
   line-height: 12px;
@@ -166,12 +166,12 @@ html.dark .arkyn_button:hover {
   height: 32px;
 }
 
-.arkyn_button.sm .arkyn_button-content,
-.arkyn_button.sm .arkyn_button-spinner {
+.arkynButton.sm .arkynButtonContent,
+.arkynButton.sm .arkynButtonSpinner {
   gap: 12px;
 }
 
-.arkyn_button.xs {
+.arkynButton.xs {
   font-weight: 600;
   font-size: 10px;
   line-height: 10px;
@@ -181,13 +181,13 @@ html.dark .arkyn_button:hover {
   height: 24px;
 }
 
-.arkyn_button.xs .arkyn_button-content,
-.arkyn_button.xs .arkyn_button-spinner {
+.arkynButton.xs .arkynButtonContent,
+.arkynButton.xs .arkynButtonSpinner {
   gap: 8px;
 }
 
 /* SPIN */
-.arkyn_button .arkyn_button-spinner {
+.arkynButton .arkynButtonSpinner {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -196,27 +196,27 @@ html.dark .arkyn_button:hover {
   opacity: 0;
 }
 
-.arkyn_button .arkyn_button-spinner > svg {
+.arkynButton .arkynButtonSpinner > svg {
   animation: spin 2s linear infinite;
 }
 
-.arkyn_button.loading_text_false .arkyn_button-spinner {
+.arkynButton.loadingTextFalse .arkynButtonSpinner {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }
 
-.arkyn_button.loading_text_true .arkyn_button-spinner {
+.arkynButton.loadingTextTrue .arkynButtonSpinner {
   max-height: 0px;
 }
 
-.arkyn_button.loading_true .arkyn_button-content {
+.arkynButton.loadingTrue .arkynButtonContent {
   opacity: 0;
   max-height: 0px;
 }
 
-.arkyn_button.loading_true .arkyn_button-spinner {
+.arkynButton.loadingTrue .arkynButtonSpinner {
   opacity: 1;
   max-height: unset;
 }

package/src/components/Card/index.tsx

@@ -3,7 +3,7 @@ import "./styles.css";
 
 function Card(props: CardProps) {
   const { className: baseClassName, ...rest } = props;
-  const className = `arkyn_card_container ${baseClassName}`;
+  const className = `arkynCard ${baseClassName}`;
 
   return <div className={className.trim()} {...rest} />;
 }

package/src/components/Card/styles.css

@@ -1,4 +1,4 @@
-.arkyn_card_container {
+.arkynCard {
   display: flex;
 
   padding: 20px;

package/src/components/Checkbox/index.tsx

@@ -25,9 +25,10 @@ function Checkbox(props: CheckboxProps) {
   const currentChecked =
     typeof baseChecked === "boolean" ? baseChecked : isChecked;
 
-  const className = `arkyn_checkbox ${size} ${isError ? "error" : ""} ${
-    currentChecked ? "checked" : ""
-  } ${baseClassName}`;
+  const errorClass = isError ? "errorTrue" : "errorFalse";
+  const currentCheckedClass = currentChecked ? "checkedTrue" : "checkedFalse";
+
+  const className = `arkynCheckbox ${size} ${errorClass} ${currentCheckedClass} ${baseClassName}`;
 
   function handleCheck() {
     const defaultChecked = isChecked;
@@ -37,8 +38,8 @@ function Checkbox(props: CheckboxProps) {
 
   return (
     <button
-      type="button"
       id={id}
+      type="button"
       className={className}
       onClick={handleCheck}
       {...rest}
@@ -49,6 +50,7 @@ function Checkbox(props: CheckboxProps) {
         ref={inputRef}
         value={currentChecked ? value || "checked" : ""}
       />
+
       <Check />
     </button>
   );