@arkyn/components 1.3.78 → 1.3.79

package/src/components/Checkbox/styles.css

@@ -1,4 +1,4 @@
-.arkyn_checkbox {
+.arkynCheckbox {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -7,60 +7,60 @@
   background-color: rgba(var(--input-background), 1);
 }
 
-.arkyn_checkbox:hover {
+.arkynCheckbox:hover {
   cursor: pointer;
 }
 
-.arkyn_checkbox > svg {
+.arkynCheckbox > svg {
   display: none;
   stroke-width: 3px;
 }
 
 /* SIZE */
-.arkyn_checkbox.sm {
+.arkynCheckbox.sm {
   height: 16px;
   width: 16px;
   border-radius: calc(var(--rounded-inputs) * 0.3333);
 }
 
-.arkyn_checkbox.sm > svg {
+.arkynCheckbox.sm > svg {
   min-height: 12px;
   min-width: 12px;
 }
 
-.arkyn_checkbox.md {
+.arkynCheckbox.md {
   height: 20px;
   width: 20px;
   border-radius: calc(var(--rounded-inputs) * 0.6667);
 }
 
-.arkyn_checkbox.md > svg {
+.arkynCheckbox.md > svg {
   min-height: 14px;
   min-width: 14px;
 }
 
-.arkyn_checkbox.lg {
+.arkynCheckbox.lg {
   height: 24px;
   width: 24px;
   border-radius: var(--rounded-inputs);
 }
 
-.arkyn_checkbox.lg > svg {
+.arkynCheckbox.lg > svg {
   min-height: 14px;
   min-width: 14px;
 }
 
 /* CHECKED */
-.arkyn_checkbox.checked {
+.arkynCheckbox.checkedTrue {
   background-color: rgb(var(--spotlight-primary), 1);
   border-color: rgb(var(--spotlight-primary), 1);
 }
 
-.arkyn_checkbox.checked > svg {
+.arkynCheckbox.checkedTrue > svg {
   display: unset;
   color: #fff;
 }
 
-.arkyn_checkbox.error {
+.arkynCheckbox.errorTrue {
   border-color: rgb(var(--spotlight-danger), 1);
 }

package/src/components/Divider/index.tsx

@@ -8,9 +8,9 @@ function Divider(props: DividerProps) {
     ...rest
   } = props;
 
-  const className = `arkyn_divider ${orientation} ${baseClassName}`;
+  const className = `arkynDivider ${orientation} ${baseClassName}`;
 
-  return <div className={className} {...rest} />;
+  return <div className={className.trim()} {...rest} />;
 }
 
 export { Divider };

package/src/components/Divider/styles.css

@@ -1,16 +1,16 @@
-.arkyn_divider {
+.arkynDivider {
   display: block;
   flex: 1;
   background-color: var(--border);
 }
 
-.arkyn_divider.horizontal {
+.arkynDivider.horizontal {
   width: 100%;
   min-height: 1px;
   max-height: 1px;
 }
 
-.arkyn_divider.vertical {
+.arkynDivider.vertical {
   height: 100%;
   min-width: 1px;
   max-width: 1px;

package/src/components/Drawer/Container/index.tsx

@@ -19,8 +19,8 @@ function DrawerContainer(props: DrawerContainerProps) {
 
   const translateX = orientation === "left" ? "-100%" : "100%";
 
-  const visibled = isVisibled ? "visible" : "";
-  const className = `arkyn_drawer_container ${orientation} ${visibled} ${baseClassName}`;
+  const visibledClass = isVisibled ? "visibleTrue" : "visibleFalse";
+  const className = `arkynDrawerContainer ${orientation} ${visibledClass} ${baseClassName}`;
 
   return (
     <drawerContext.Provider value={{ makeInvisible }}>
@@ -28,7 +28,7 @@ function DrawerContainer(props: DrawerContainerProps) {
         {isVisibled && (
           <aside className={className.trim()} {...rest}>
             <motion.div
-              className="arkyn_drawer_container-overlay"
+              className="arkynDrawerContainerOverlay"
               transition={{ duration: 0.15, ease: "easeOut" }}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
@@ -37,7 +37,7 @@ function DrawerContainer(props: DrawerContainerProps) {
             />
 
             <motion.div
-              className="arkyn_drawer_container-content"
+              className="arkynDrawerContainerContent"
               transition={{ ease: "easeOut", duration: 0.15 }}
               initial={{ transform: `translateX(${translateX})` }}
               animate={{ transform: "translateX(0px)" }}

package/src/components/Drawer/Container/styles.css

@@ -1,4 +1,4 @@
-.arkyn_drawer_container {
+.arkynDrawerContainer {
   position: fixed;
   top: 0;
   left: 0;
@@ -9,7 +9,7 @@
   z-index: 9999;
 }
 
-.arkyn_drawer_container-overlay {
+.arkynDrawerContainerOverlay {
   position: fixed;
   z-index: 9997;
   top: 0;
@@ -19,11 +19,11 @@
   background: rgba(0, 0, 0, 0.5);
 }
 
-.arkyn_drawer_container-overlay:hover {
+.arkynDrawerContainerOverlay:hover {
   cursor: pointer;
 }
 
-.arkyn_drawer_container-content {
+.arkynDrawerContainerContent {
   z-index: 9999;
   position: fixed;
   top: 0;
@@ -32,10 +32,10 @@
   background: var(--card);
 }
 
-.arkyn_drawer_container.left > .arkyn_drawer_container-content {
+.arkynDrawerContainer.left > .arkynDrawerContainerContent {
   left: 0;
 }
 
-.arkyn_drawer_container.right > .arkyn_drawer_container-content {
+.arkynDrawerContainer.right > .arkynDrawerContainerContent {
   right: 0;
 }

package/src/components/Drawer/Header/index.tsx

@@ -15,7 +15,7 @@ function DrawerHeader(props: ModalHeaderProps) {
   } = props;
 
   const { makeInvisible } = useContext(drawerContext);
-  const className = `arkyn_drawer_header ${baseClassName}`;
+  const className = `arkynDrawerHeader ${baseClassName}`;
 
   return (
     <header className={className.trim()} {...rest}>
@@ -23,7 +23,7 @@ function DrawerHeader(props: ModalHeaderProps) {
 
       {showCloseButton && (
         <button
-          className="arkyn_drawer_header-close_button"
+          className="arkynDrawerHeaderCloseButton"
           type="button"
           onClick={makeInvisible}
           aria-label="Close drawer"

package/src/components/Drawer/Header/styles.css

@@ -1,4 +1,4 @@
-.arkyn_drawer_header {
+.arkynDrawerHeader {
   display: flex;
   align-items: center;
 
@@ -14,7 +14,7 @@
   border-bottom: 1px solid var(--border);
 }
 
-.arkyn_drawer_header-close_button {
+.arkynDrawerHeaderCloseButton {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -32,7 +32,7 @@
   transition: all 0.15s ease-out;
 }
 
-.arkyn_drawer_header-close_button:hover {
+.arkynDrawerHeaderCloseButton:hover {
   cursor: pointer;
   filter: brightness(0.9);
 }

package/src/components/Form/FormController/index.tsx

@@ -17,7 +17,7 @@ function FormController(props: FormControllerProps) {
 
   const id = useId();
 
-  const className = `arkyn_form_controller ${baseClassName}`;
+  const className = `arkynFormController ${baseClassName}`;
 
   return (
     <FormControllerContext.Provider value={{ error, id, inputRef }}>

package/src/components/Form/FormController/styles.css

@@ -1,4 +1,4 @@
-.arkyn_form_controller {
+.arkynFormController {
   display: flex;
   flex-direction: column;
   gap: 6px;

package/src/components/Form/FormError/index.tsx

@@ -5,7 +5,7 @@ import "./styles.css";
 
 function FormError(props: FormErrorProps) {
   const { children, className: baseClassName, ...rest } = props;
-  const className = `arkyn_form_error ${baseClassName}`;
+  const className = `arkynFormError ${baseClassName}`;
 
   const { error } = useFormController();
   if (children) {

package/src/components/Form/FormError/styles.css

@@ -1,4 +1,4 @@
-.arkyn_form_error {
+.arkynFormError {
   font-size: 12px;
   line-height: 12px;
   font-weight: 600;

package/src/components/Form/FormLabel/index.tsx

@@ -12,10 +12,10 @@ function FormLabel(props: FormLabelProps) {
 
   const { id } = useFormController();
 
-  const show = showAsterisk ? "show-asterisk" : "";
-  const className = `arkyn_form_label ${show} ${baseClassName}`;
+  const show = showAsterisk ? "asteriskTrue" : "asteriskFalse";
+  const className = `arkynFormLabel ${show} ${baseClassName}`;
 
-  return <label {...rest} className={className.trim()} htmlFor={id} />;
+  return <label className={className.trim()} htmlFor={id} {...rest} />;
 }
 
 export { FormLabel };

package/src/components/Form/FormLabel/styles.css

@@ -1,11 +1,11 @@
-.arkyn_form_label {
+.arkynFormLabel {
   color: var(--text-body);
   font-size: 14px;
   font-weight: 600;
   line-height: 19.07px;
 }
 
-.arkyn_form_label.show-asterisk::before {
+.arkynFormLabel.asteriskTrue::before {
   content: "* ";
   font-size: 12px;
   font-weight: 600;

package/src/components/IconButton/index.tsx

@@ -16,7 +16,8 @@ function IconButton(props: IconButtonProps) {
   } = props;
 
   const iconSize = { xs: 12, sm: 16, md: 20, lg: 24 };
-  const className = `arkyn_icon_button ${variant} ${scheme} ${size} loading_${isLoading} ${baseClassName}`;
+  const loading = isLoading ? "loadingTrue" : "loadingFalse";
+  const className = `arkynIconButton ${variant} ${scheme} ${size} ${loading} ${baseClassName}`;
 
   return (
     <button
@@ -24,11 +25,11 @@ function IconButton(props: IconButtonProps) {
       className={className.trim()}
       {...rest}
     >
-      <div className="arkyn_icon_button-spinner">
+      <div className="arkynIconButtonSpinner">
         <Loader2 size={iconSize[size]} strokeWidth={2.5} />
       </div>
 
-      <div className="arkyn_icon_button-content">
+      <div className="arkynIconButtonContent">
         <Icon size={iconSize[size]} strokeWidth={2.5} />
       </div>
     </button>

package/src/components/IconButton/styles.css

@@ -1,5 +1,5 @@
 /* BASE */
-.arkyn_icon_button {
+.arkynIconButton {
   background: transparent;
   border: 1px solid transparent;
   outline: 1px solid transparent;
@@ -7,149 +7,149 @@
   transition: 0.15s all ease-out;
 }
 
-.arkyn_icon_button:hover {
+.arkynIconButton:hover {
   cursor: pointer;
   filter: brightness(0.95);
 }
 
-html.dark .arkyn_icon_button:hover {
+html.dark .arkynIconButton:hover {
   cursor: pointer;
   filter: brightness(1.2);
 }
 
-.arkyn_icon_button:disabled {
+.arkynIconButton:disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
-.arkyn_icon_button-content {
+.arkynIconButtonContent {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 /* VARIANTS */
-.arkyn_icon_button.solid {
+.arkynIconButton.solid {
   color: #fff;
 }
 
-.arkyn_icon_button.solid.primary {
+.arkynIconButton.solid.primary {
   background-color: rgba(var(--spotlight-primary), 1);
 }
 
-.arkyn_icon_button.solid.danger {
+.arkynIconButton.solid.danger {
   background-color: rgba(var(--spotlight-danger), 1);
 }
 
-.arkyn_icon_button.solid.success {
+.arkynIconButton.solid.success {
   background-color: rgba(var(--spotlight-success), 1);
 }
 
-.arkyn_icon_button.solid.warning {
+.arkynIconButton.solid.warning {
   background-color: rgba(var(--spotlight-warning), 1);
 }
 
-.arkyn_icon_button.solid.info {
+.arkynIconButton.solid.info {
   background-color: rgba(var(--spotlight-info), 1);
 }
 
-.arkyn_icon_button.outline {
+.arkynIconButton.outline {
   background-color: rgba(var(--input-background), 1);
   border-color: var(--border);
 }
 
-.arkyn_icon_button.outline.primary {
+.arkynIconButton.outline.primary {
   color: rgba(var(--spotlight-primary), 1);
 }
 
-.arkyn_icon_button.outline.danger {
+.arkynIconButton.outline.danger {
   color: rgba(var(--spotlight-danger), 1);
 }
 
-.arkyn_icon_button.outline.success {
+.arkynIconButton.outline.success {
   color: rgba(var(--spotlight-success), 1);
 }
 
-.arkyn_icon_button.outline.warning {
+.arkynIconButton.outline.warning {
   color: rgba(var(--spotlight-warning), 1);
 }
 
-.arkyn_icon_button.outline.info {
+.arkynIconButton.outline.info {
   color: rgba(var(--spotlight-info), 1);
 }
 
-.arkyn_icon_button.ghost.primary {
+.arkynIconButton.ghost.primary {
   color: rgba(var(--spotlight-primary), 1);
   background-color: rgba(var(--spotlight-primary), 0.2);
 }
 
-.arkyn_icon_button.ghost.danger {
+.arkynIconButton.ghost.danger {
   color: rgba(var(--spotlight-danger), 1);
   background-color: rgba(var(--spotlight-danger), 0.2);
 }
 
-.arkyn_icon_button.ghost.success {
+.arkynIconButton.ghost.success {
   color: rgba(var(--spotlight-success), 1);
   background-color: rgba(var(--spotlight-success), 0.2);
 }
 
-.arkyn_icon_button.ghost.warning {
+.arkynIconButton.ghost.warning {
   color: rgba(var(--spotlight-warning), 1);
   background-color: rgba(var(--spotlight-warning), 0.2);
 }
 
-.arkyn_icon_button.ghost.info {
+.arkynIconButton.ghost.info {
   color: rgba(var(--spotlight-info), 1);
   background-color: rgba(var(--spotlight-info), 0.2);
 }
 
-.arkyn_icon_button.invisible.primary {
+.arkynIconButton.invisible.primary {
   color: rgba(var(--spotlight-primary), 1);
 }
 
-.arkyn_icon_button.invisible.danger {
+.arkynIconButton.invisible.danger {
   color: rgba(var(--spotlight-danger), 1);
 }
 
-.arkyn_icon_button.invisible.success {
+.arkynIconButton.invisible.success {
   color: rgba(var(--spotlight-success), 1);
 }
 
-.arkyn_icon_button.invisible.warning {
+.arkynIconButton.invisible.warning {
   color: rgba(var(--spotlight-warning), 1);
 }
 
-.arkyn_icon_button.invisible.info {
+.arkynIconButton.invisible.info {
   color: rgba(var(--spotlight-info), 1);
 }
 
 /* SIZE */
-.arkyn_icon_button.lg {
+.arkynIconButton.lg {
   border-radius: var(--rounded-inputs);
   height: 44px;
   width: 44px;
 }
 
-.arkyn_icon_button.md {
+.arkynIconButton.md {
   border-radius: var(--rounded-inputs);
   height: 40px;
   width: 40px;
 }
 
-.arkyn_icon_button.sm {
+.arkynIconButton.sm {
   border-radius: var(--rounded-inputs);
   height: 32px;
   width: 32px;
 }
 
-.arkyn_icon_button.xs {
+.arkynIconButton.xs {
   border-radius: calc(var(--rounded-inputs) * 0.6667); /* 2/3 */
   height: 24px;
   width: 24px;
 }
 
 /* SPIN */
-.arkyn_icon_button-spinner {
+.arkynIconButtonSpinner {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -161,15 +161,15 @@ html.dark .arkyn_icon_button:hover {
   opacity: 0;
 }
 
-.arkyn_icon_button-spinner > svg {
+.arkynIconButtonSpinner > svg {
   animation: spin 2s linear infinite;
 }
 
-.arkyn_icon_button.loading_true .arkyn_icon_button-spinner {
+.arkynIconButton.loadingTrue .arkynIconButtonSpinner {
   opacity: 1;
 }
 
-.arkyn_icon_button.loading_true .arkyn_icon_button-content {
+.arkynIconButton.loadingTrue .arkynIconButtonContent {
   opacity: 0;
 }
 

package/src/components/Modal/Container/index.tsx

@@ -16,8 +16,8 @@ function ModalContainer(args: ModalContainerProps) {
     ...rest
   } = args;
 
-  const visibled = isVisibled ? "visible" : "";
-  const className = `arkyn_modal_container ${visibled} ${baseClassName}`;
+  const visibleClass = isVisibled ? "visibleTrue" : "visibleFalse";
+  const className = `arkynModalContainer ${visibleClass} ${baseClassName}`;
 
   return (
     <modalContext.Provider value={{ makeInvisible }}>
@@ -25,7 +25,7 @@ function ModalContainer(args: ModalContainerProps) {
         {isVisibled && (
           <aside className={className.trim()} {...rest}>
             <motion.div
-              className="arkyn_modal_container-overlay"
+              className="arkynModalContainerOverlay"
               transition={{ duration: 0.15, ease: "easeOut" }}
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
@@ -34,7 +34,7 @@ function ModalContainer(args: ModalContainerProps) {
             />
 
             <motion.div
-              className="arkyn_modal_container-content"
+              className="arkynModalContainerContent"
               transition={{ duration: 0.15, ease: "easeOut" }}
               initial={{ opacity: 0, scale: 0.75 }}
               animate={{ opacity: 1, scale: 1 }}

package/src/components/Modal/Container/styles.css

@@ -1,4 +1,4 @@
-.arkyn_modal_container {
+.arkynModalContainer {
   position: fixed;
   top: 0;
   left: 0;
@@ -16,7 +16,7 @@
   z-index: 9999;
 }
 
-.arkyn_modal_container-overlay {
+.arkynModalContainerOverlay {
   position: fixed;
   z-index: 9997;
   top: 0;
@@ -26,11 +26,11 @@
   background: rgba(0, 0, 0, 0.5);
 }
 
-.arkyn_modal_container-overlay:hover {
+.arkynModalContainerOverlay:hover {
   cursor: pointer;
 }
 
-.arkyn_modal_container-content {
+.arkynModalContainerContent {
   z-index: 9999;
   border-radius: var(--rounded-cards);
   background: var(--card);

package/src/components/Modal/Footer/index.tsx

@@ -3,7 +3,7 @@ import "./styles.css";
 
 function ModalFooter(args: ModalFooterProps) {
   const { alignment = "right", className: baseClassName, ...rest } = args;
-  const className = `arkyn_modal_footer ${alignment} ${baseClassName}`;
+  const className = `arkynModalFooter ${alignment} ${baseClassName}`;
 
   return <footer className={className.trim()} {...rest} />;
 }

package/src/components/Modal/Footer/styles.css

@@ -1,4 +1,4 @@
-.arkyn_modal_footer {
+.arkynModalFooter {
   display: flex;
   align-items: center;
   gap: 16px;
@@ -6,22 +6,22 @@
   border-top: 1px solid var(--border);
 }
 
-.arkyn_modal_footer.left {
+.arkynModalFooter.left {
   justify-content: flex-start;
 }
 
-.arkyn_modal_footer.right {
+.arkynModalFooter.right {
   justify-content: flex-end;
 }
 
-.arkyn_modal_footer.center {
+.arkynModalFooter.center {
   justify-content: center;
 }
 
-.arkyn_modal_footer.between {
+.arkynModalFooter.between {
   justify-content: space-between;
 }
 
-.arkyn_modal_footer.around {
+.arkynModalFooter.around {
   justify-content: space-around;
 }

package/src/components/Modal/Header/index.tsx

@@ -14,7 +14,7 @@ function ModalHeader(args: ModalHeaderProps) {
   } = args;
 
   const { makeInvisible } = useContext(modalContext);
-  const className = `arkyn_modal_header ${baseClassName}`;
+  const className = `arkynModalHeader ${baseClassName}`;
 
   return (
     <header className={className.trim()} {...rest}>
@@ -25,7 +25,7 @@ function ModalHeader(args: ModalHeaderProps) {
           type="button"
           onClick={makeInvisible}
           aria-label="Close modal button"
-          className="arkyn_modal_header-close_button"
+          className="arkynModalHeaderCloseButton"
         >
           <X size={24} />
         </button>

package/src/components/Modal/Header/styles.css

@@ -1,4 +1,4 @@
-.arkyn_modal_header {
+.arkynModalHeader {
   display: flex;
   align-items: center;
 
@@ -14,7 +14,7 @@
   border-bottom: 1px solid var(--border);
 }
 
-.arkyn_modal_header-close_button {
+.arkynModalHeaderCloseButton {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -32,7 +32,7 @@
   transition: all 0.15s ease-out;
 }
 
-.arkyn_modal_header-close_button:hover {
+.arkynModalHeaderCloseButton:hover {
   cursor: pointer;
   filter: brightness(0.9);
 }