@arkyn/components 1.3.78 → 1.3.79

package/src/components/Pagination/index.tsx

@@ -33,9 +33,9 @@ function Pagination(props: PaginationProps) {
   }
 
   return (
-    <div className="arkyn_pagination" {...rest}>
+    <div className="arkynPagination" {...rest}>
       <button
-        className="arkyn_pagination-icon_button"
+        className="arkynPaginationIconButton"
         disabled={currentPage <= 1}
         onClick={() => handlePageChange(currentPage - 1)}
       >
@@ -45,14 +45,14 @@ function Pagination(props: PaginationProps) {
       {currentPage > 1 + siblingsCount && (
         <>
           <button
-            className="arkyn_pagination-page_button"
+            className="arkynPaginationPageButton"
             onClick={() => handlePageChange(1)}
           >
             1
           </button>
 
           {currentPage > 2 + siblingsCount && (
-            <button disabled className="arkyn_pagination-spread">
+            <button disabled className="arkynPaginationSpread">
               <Ellipsis />
             </button>
           )}
@@ -63,13 +63,13 @@ function Pagination(props: PaginationProps) {
         <button
           key={index}
           onClick={() => handlePageChange(page)}
-          className="arkyn_pagination-page_button"
+          className="arkynPaginationPageButton"
         >
           {page}
         </button>
       ))}
 
-      <button className="arkyn_pagination-current" disabled>
+      <button className="arkynPaginationCurrent" disabled>
         {currentPage}
       </button>
 
@@ -77,7 +77,7 @@ function Pagination(props: PaginationProps) {
         <button
           key={index}
           onClick={() => handlePageChange(page)}
-          className="arkyn_pagination-page_button"
+          className="arkynPaginationPageButton"
         >
           {page}
         </button>
@@ -86,13 +86,13 @@ function Pagination(props: PaginationProps) {
       {currentPage + siblingsCount < lastPage && (
         <>
           {currentPage + 1 + siblingsCount < lastPage && (
-            <button disabled className="arkyn_pagination-spread">
+            <button disabled className="arkynPaginationSpread">
               <Ellipsis />
             </button>
           )}
 
           <button
-            className="arkyn_pagination-page_button"
+            className="arkynPaginationPageButton"
             onClick={() => handlePageChange(lastPage)}
           >
             {lastPage}
@@ -101,7 +101,7 @@ function Pagination(props: PaginationProps) {
       )}
 
       <button
-        className="arkyn_pagination-icon_button"
+        className="arkynPaginationIconButton"
         disabled={currentPage >= lastPage}
         onClick={() => handlePageChange(currentPage + 1)}
       >

package/src/components/Pagination/styles.css

@@ -1,4 +1,4 @@
-.arkyn_pagination {
+.arkynPagination {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -6,8 +6,8 @@
   gap: 8px;
 }
 
-.arkyn_pagination .arkyn_pagination-icon_button,
-.arkyn_pagination .arkyn_pagination-page_button {
+.arkynPagination .arkynPaginationIconButton,
+.arkynPagination .arkynPaginationPageButton {
   background-color: var(--background-foreground);
   border: none;
 
@@ -24,36 +24,36 @@
   border-radius: var(--rounded-inputs);
 }
 
-.arkyn_pagination .arkyn_pagination-icon_button:hover,
-.arkyn_pagination .arkyn_pagination-page_button:hover {
+.arkynPagination .arkynPaginationIconButton:hover,
+.arkynPagination .arkynPaginationPageButton:hover {
   filter: brightness(0.98);
   cursor: pointer;
 }
 
-html.dark .arkyn_pagination .arkyn_pagination-icon_button:hover,
-html.dark .arkyn_pagination .arkyn_pagination-page_button:hover {
+html.dark .arkynPagination .arkynPaginationIconButton:hover,
+html.dark .arkynPagination .arkynPaginationPageButton:hover {
   filter: brightness(1.2);
 }
 
-.arkyn_pagination .arkyn_pagination-icon_button > svg {
+.arkynPagination .arkynPaginationIconButton > svg {
   color: var(--text-muted);
   height: 20px;
   width: 20px;
 }
 
-.arkyn_pagination .arkyn_pagination-page_button {
+.arkynPagination .arkynPaginationPageButton {
   color: var(--text-body);
   font-size: 14px;
   font-weight: 600;
 }
 
-.arkyn_pagination .arkyn_pagination-icon_button:disabled {
+.arkynPagination .arkynPaginationIconButton:disabled {
   filter: brightness(1);
   cursor: not-allowed;
   opacity: 0.5;
 }
 
-.arkyn_pagination .arkyn_pagination-current {
+.arkynPagination .arkynPaginationCurrent {
   background-color: rgba(var(--spotlight-primary), 1);
   color: #ffffff;
   border: none;
@@ -71,7 +71,7 @@ html.dark .arkyn_pagination .arkyn_pagination-page_button:hover {
   border-radius: var(--rounded-inputs);
 }
 
-.arkyn_pagination .arkyn_pagination-spread {
+.arkynPagination .arkynPaginationSpread {
   background-color: transparent;
   color: var(--text-muted);
   border: none;
@@ -87,7 +87,7 @@ html.dark .arkyn_pagination .arkyn_pagination-page_button:hover {
   justify-content: center;
 }
 
-.arkyn_pagination .arkyn_pagination-spread > svg {
+.arkynPagination .arkynPaginationSpread > svg {
   color: var(--text-muted);
   height: 16px;
   width: 16px;

package/src/components/Popover/index.tsx

@@ -8,7 +8,8 @@ function Popover(props: PopoverProps) {
   const { children, button, closeOnClick, orientation = "bottom-left" } = props;
   const [isOpen, setIsOpen] = useState(false);
 
-  const className = `arkyn_popover ${orientation} ${isOpen ? "show" : ""}`;
+  const visible = isOpen ? "visibleTrue" : "visibleFalse";
+  const className = `arkynPopover ${orientation} ${visible}`;
 
   function handleOpenPopover() {
     if (!isOpen) setIsOpen(true);
@@ -25,16 +26,13 @@ function Popover(props: PopoverProps) {
         animate={{ opacity: isOpen ? 1 : 0 }}
         exit={{ opacity: 0 }}
         onClick={() => closeOnClick && setIsOpen(false)}
-        className="arkyn_popover-content"
+        className="arkynPopoverContent"
       >
         {children}
       </motion.div>
 
       {isOpen && (
-        <div
-          onClick={() => setIsOpen(false)}
-          className="arkyn_popover-overlay"
-        />
+        <div onClick={() => setIsOpen(false)} className="arkynPopoverOverlay" />
       )}
     </div>
   );

package/src/components/Popover/styles.css

@@ -1,16 +1,16 @@
-.arkyn_popover {
+.arkynPopover {
   position: relative;
 }
 
-.arkyn_popover .arkyn_popover-content {
+.arkynPopover .arkynPopoverContent {
   display: none;
 }
 
-.arkyn_popover.show .arkyn_popover-content {
+.arkynPopover.show .arkynPopoverContent {
   display: unset;
 }
 
-.arkyn_popover-content {
+.arkynPopoverContent {
   position: absolute;
   z-index: 3;
 
@@ -19,55 +19,55 @@
   box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
 }
 
-.arkyn_popover.bottom-left .arkyn_popover-content {
+.arkynPopover.bottomLeft .arkynPopoverContent {
   bottom: -5px;
   right: 0;
   transform: translateY(100%);
 }
 
-.arkyn_popover.bottom-right .arkyn_popover-content {
+.arkynPopover.bottomRight .arkynPopoverContent {
   bottom: -5px;
   left: 0;
   transform: translateY(100%);
 }
 
-.arkyn_popover.top-left .arkyn_popover-content {
+.arkynPopover.topLeft .arkynPopoverContent {
   top: -5px;
   right: 0;
   transform: translateY(-100%);
 }
 
-.arkyn_popover.top-right .arkyn_popover-content {
+.arkynPopover.topRight .arkynPopoverContent {
   top: -5px;
   left: 0;
   transform: translateY(-100%);
 }
 
-.arkyn_popover.bottom .arkyn_popover-content {
+.arkynPopover.bottom .arkynPopoverContent {
   top: calc(100% + 5px);
   left: 50%;
   transform: translateX(-50%);
 }
 
-.arkyn_popover.top .arkyn_popover-content {
+.arkynPopover.top .arkynPopoverContent {
   bottom: calc(100% + 5px);
   left: 50%;
   transform: translateX(-50%);
 }
 
-.arkyn_popover.left .arkyn_popover-content {
+.arkynPopover.left .arkynPopoverContent {
   bottom: 50%;
   right: calc(100% + 5px);
   transform: translateY(50%);
 }
 
-.arkyn_popover.right .arkyn_popover-content {
+.arkynPopover.right .arkynPopoverContent {
   bottom: 50%;
   left: calc(100% + 5px);
   transform: translateY(50%);
 }
 
-.arkyn_popover-overlay {
+.arkynPopoverOverlay {
   position: fixed;
   z-index: 1;
   top: 0;

package/src/components/Radio/RadioBox/index.tsx

@@ -11,17 +11,20 @@ function RadioBox(props: RadioBoxProps) {
     size: componentSize,
     disabled,
     children,
+    className: baseClassName = "",
+    ...rest
   } = props;
 
   const { onChange, size: groupSize, value: selectedValue } = useRadioGroup();
   const { error } = useFormController();
 
   const size = componentSize || groupSize;
-  const isChecked = selectedValue === componentValue ? "isChecked" : "";
-  const isErrored = !!error ? "isErrored" : "";
-  const isDisabled = disabled ? "isDisabled" : "";
+  const checkedClass =
+    selectedValue === componentValue ? "checkedTrue" : "checkedFalse";
+  const errorClass = !!error ? "errorTrue" : "errorFalse";
+  const disabledClass = disabled ? "disabledTrue" : "disabledFalse";
 
-  const className = `arkyn_radio_box ${size} ${isChecked} ${isErrored} ${isDisabled}`;
+  const className = `arkynRadioBox ${size} ${checkedClass} ${errorClass} ${disabledClass} ${baseClassName}`;
 
   return (
     <label className={className.trim()}>
@@ -30,6 +33,7 @@ function RadioBox(props: RadioBoxProps) {
         disabled={disabled}
         onClick={() => onChange(componentValue)}
         onFocus={() => onChange(componentValue)}
+        {...rest}
       />
 
       {children}

package/src/components/Radio/RadioBox/styles.css

@@ -1,4 +1,4 @@
-.arkyn_radio_box {
+.arkynRadioBox {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -8,7 +8,7 @@
   line-height: 19.07px;
 }
 
-.arkyn_radio_box > button {
+.arkynRadioBox > button {
   position: relative;
   background-color: rgba(var(--input-background), 1);
 
@@ -16,19 +16,19 @@
   border-radius: 99999px;
 }
 
-.arkyn_radio_box > button:not(:disabled):hover {
+.arkynRadioBox > button:not(:disabled):hover {
   cursor: pointer;
 }
 
-.arkyn_radio_box.isChecked > button {
+.arkynRadioBox.checkedTrue > button {
   border-color: rgba(var(--spotlight-primary), 1);
 }
 
-.arkyn_radio_box.isErrored > button {
+.arkynRadioBox.errorTrue > button {
   border-color: rgba(var(--spotlight-danger), 1);
 }
 
-.arkyn_radio_box.isChecked > button::before {
+.arkynRadioBox.checkedTrue > button::before {
   content: "  ";
   position: absolute;
   top: 50%;
@@ -38,7 +38,7 @@
   background-color: rgba(var(--spotlight-primary), 1);
 }
 
-.arkyn_radio_box.sm > button {
+.arkynRadioBox.sm > button {
   min-height: 20px;
   min-width: 20px;
 
@@ -46,7 +46,7 @@
   max-width: 20px;
 }
 
-.arkyn_radio_box.md > button {
+.arkynRadioBox.md > button {
   min-height: 24px;
   min-width: 24px;
 
@@ -54,7 +54,7 @@
   max-width: 24px;
 }
 
-.arkyn_radio_box.lg > button {
+.arkynRadioBox.lg > button {
   min-height: 24px;
   min-width: 24px;
 
@@ -62,7 +62,7 @@
   max-width: 24px;
 }
 
-.arkyn_radio_box.isChecked.sm > button::before {
+.arkynRadioBox.checkedTrue.sm > button::before {
   min-height: 10px;
   min-width: 10px;
 
@@ -70,7 +70,7 @@
   max-width: 10px;
 }
 
-.arkyn_radio_box.isChecked.md > button::before {
+.arkynRadioBox.checkedTrue.md > button::before {
   min-height: 12px;
   min-width: 12px;
 
@@ -78,7 +78,7 @@
   max-width: 12px;
 }
 
-.arkyn_radio_box.isChecked.lg > button::before {
+.arkynRadioBox.checkedTrue.lg > button::before {
   min-height: 12px;
   min-width: 12px;
 
@@ -86,10 +86,10 @@
   max-width: 12px;
 }
 
-.arkyn_radio_box.isDisabled {
+.arkynRadioBox.disabledTrue {
   opacity: 0.5;
 }
 
-.arkyn_radio_box.isDisabled > button {
+.arkynRadioBox.disabledTrue > button {
   cursor: not-allowed;
 }

package/src/components/Radio/RadioGroup/index.tsx

@@ -18,7 +18,7 @@ function RadioGroup(props: RadioGroupProps) {
     value: forceValue,
     onChange,
     size = "md",
-    className: baseClassName,
+    className: baseClassName = "",
     ...rest
   } = props;
 
@@ -30,7 +30,7 @@ function RadioGroup(props: RadioGroupProps) {
     onChange && onChange(value);
   }
 
-  const className = `arkyn_radio_group ${size} ${baseClassName || ""}`;
+  const className = `arkynRadioGroup ${size} ${baseClassName}`;
 
   return (
     <RadioContext.Provider

package/src/components/Radio/RadioGroup/styles.css

@@ -1,4 +1,4 @@
-.arkyn_radio_group {
+.arkynRadioGroup {
   display: flex;
   align-items: center;
   gap: 32px;

package/src/components/Skeleton/index.tsx

@@ -3,7 +3,7 @@ import "./styles.css";
 
 function Skeleton(props: SkeletonProps) {
   const { className: baseClassName, ...rest } = props;
-  const className = `arkyn_skeleton ${baseClassName}`;
+  const className = `arkynSkeleton ${baseClassName}`;
 
   return <aside className={className.trim()} {...rest} />;
 }

package/src/components/Skeleton/styles.css

@@ -1,4 +1,4 @@
-.arkyn_skeleton {
+.arkynSkeleton {
   width: 100%;
   height: 100%;
   border-radius: 6px;

package/src/components/Table/TableBody/index.tsx

@@ -3,7 +3,7 @@ import "./styles.css";
 
 function TableBody(props: TableBodyProps) {
   const { className: baseClassName, ...rest } = props;
-  const className = `arkyn_table_body ${baseClassName}`;
+  const className = `arkynTableBody ${baseClassName}`;
 
   return <tbody className={className.trim()} {...rest} />;
 }

package/src/components/Table/TableBody/styles.css

@@ -1,8 +1,8 @@
-.arkyn_table_body > tr:nth-child(odd) > td {
+.arkynTableBody > tr:nth-child(odd) > td {
   background-color: var(--card-foreground-primary);
 }
 
-.arkyn_table_body > tr > td {
+.arkynTableBody > tr > td {
   padding-left: 16px;
   height: 64px;
 
@@ -12,32 +12,32 @@
   color: var(--text-body);
 }
 
-.arkyn_table_body > tr > td:first-child {
+.arkynTableBody > tr > td:first-child {
   border-top-left-radius: var(--rounded-cards);
   border-bottom-left-radius: var(--rounded-cards);
 }
 
-.arkyn_table_body > tr > td:last-child {
+.arkynTableBody > tr > td:last-child {
   border-top-right-radius: var(--rounded-cards);
   border-bottom-right-radius: var(--rounded-cards);
 
   padding-right: 16px;
 }
 
-.arkyn_table_body > tr:nth-child(odd):hover > td {
+.arkynTableBody > tr:nth-child(odd):hover > td {
   filter: brightness(0.98);
 }
 
-.arkyn_table_body > tr:nth-child(even):hover > td {
+.arkynTableBody > tr:nth-child(even):hover > td {
   background-color: var(--card-foreground-primary);
   filter: brightness(0.98);
 }
 
-html.dark .arkyn_table_body > tr:nth-child(odd):hover > td {
+html.dark .arkynTableBody > tr:nth-child(odd):hover > td {
   filter: brightness(1.2);
 }
 
-html.dark .arkyn_table_body > tr:nth-child(even):hover > td {
+html.dark .arkynTableBody > tr:nth-child(even):hover > td {
   background-color: var(--card-foreground-primary);
   filter: brightness(1.2);
 }

package/src/components/Table/TableCaption/index.tsx

@@ -3,11 +3,11 @@ import "./styles.css";
 
 function TableCaption(props: TableCaptionProps) {
   const { className: baseClassName, children, ...rest } = props;
-  const className = `arkyn_table_caption ${baseClassName}`;
+  const className = `arkynTableCaption ${baseClassName}`;
 
   return (
     <caption className={className.trim()} {...rest}>
-      <div className="arkyn_table_caption-content">{children}</div>
+      <div className="arkynTableCaptionContent">{children}</div>
     </caption>
   );
 }

package/src/components/Table/TableCaption/styles.css

@@ -1,13 +1,13 @@
-.arkyn_table_caption {
+.arkynTableCaption {
   margin-bottom: 24px;
 }
 
-.arkyn_table_caption-content {
+.arkynTableCaptionContent {
   display: flex;
   align-items: center;
 }
 
-.arkyn_table_caption-content > .right-section {
+.arkynTableCaptionContent > .rightSection {
   display: flex;
   align-items: center;
   justify-content: end;

package/src/components/Table/TableContainer/index.tsx

@@ -3,7 +3,7 @@ import "./styles.css";
 
 function TableContainer(props: TableContainerProps) {
   const { children, className: baseClassName, ...rest } = props;
-  const className = `arkyn_table_container ${baseClassName}`;
+  const className = `arkynTableContainer ${baseClassName}`;
 
   return (
     <div className={className.trim()} {...rest}>

package/src/components/Table/TableContainer/styles.css

@@ -1,4 +1,4 @@
-.arkyn_table_container {
+.arkynTableContainer {
   display: flex;
   flex-direction: column;
 
@@ -9,7 +9,7 @@
   overflow-x: auto;
 }
 
-.arkyn_table_container table {
+.arkynTableContainer table {
   border-collapse: separate;
   border-spacing: 0;
 }

package/src/components/Table/TableFooter/index.tsx

@@ -3,14 +3,14 @@ import "./styles.css";
 
 function TableFooter(props: TableFooterProps) {
   const { className: baseClassName, children, ...rest } = props;
-  const className = `arkyn_table_footer ${baseClassName}`;
+  const className = `arkynTableFooter ${baseClassName}`;
 
   return (
     <tfoot className={className.trim()} {...rest}>
-      <tr className="spacing-row" />
+      <tr className="spacingRow" />
       <tr>
         <th colSpan={100}>
-          <div className="arkyn_table_footer-content">{children}</div>
+          <div className="arkynTableFooterContent">{children}</div>
         </th>
       </tr>
     </tfoot>

package/src/components/Table/TableFooter/styles.css

@@ -1,4 +1,4 @@
-.arkyn_table_footer-content {
+.arkynTableFooterContent {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -8,6 +8,6 @@
   border-top: 1px solid var(--border);
 }
 
-.arkyn_table_footer .spacing-row {
+.arkynTableFooter .spacingRow {
   height: 24px;
 }

package/src/components/Table/TableHeader/index.tsx

@@ -3,12 +3,12 @@ import "./styles.css";
 
 function TableHeader(props: TableHeaderProps) {
   const { className: baseClassName, children, ...rest } = props;
-  const className = `arkyn_table_header ${baseClassName}`;
+  const className = `arkynTableHeader ${baseClassName}`;
 
   return (
     <thead className={className.trim()} {...rest}>
       <tr>{children}</tr>
-      <tr className="spacing-row" />
+      <tr className="spacingRow" />
     </thead>
   );
 }

package/src/components/Table/TableHeader/styles.css

@@ -1,4 +1,4 @@
-.arkyn_table_header th {
+.arkynTableHeader th {
   text-align: left;
   background-color: var(--card-foreground-secondary);
   padding-left: 16px;
@@ -11,18 +11,18 @@
   white-space: nowrap;
 }
 
-.arkyn_table_header th:first-child {
+.arkynTableHeader th:first-child {
   border-top-left-radius: var(--rounded-cards);
   border-bottom-left-radius: var(--rounded-cards);
 }
 
-.arkyn_table_header th:last-child {
+.arkynTableHeader th:last-child {
   border-top-right-radius: var(--rounded-cards);
   border-bottom-right-radius: var(--rounded-cards);
 
   padding-right: 16px;
 }
 
-.arkyn_table_header .spacing-row {
+.arkynTableHeader .spacingRow {
   height: 12px;
 }

package/src/components/Tabs/TabButton/index.tsx

@@ -6,14 +6,14 @@ import "./styles.css";
 
 function TabButton(props: TabButtonProps) {
   const { children, className: baseClassName = "", onClick, ...rest } = props;
-
   const { value, showInitialTab, handleTabClick } = useTabContext();
 
-  const active = value === rest.value && value ? "active" : "";
+  const activeClass =
+    value === rest.value && value ? "activeTrue" : "activeFalse";
   const defaultShowBorderBottomTable =
-    value === rest.value && showInitialTab ? "show_border_bottom" : "";
+    value === rest.value && showInitialTab ? "showBorderBottom" : "";
 
-  const className = `arkyn_tab_button ${defaultShowBorderBottomTable} ${active} ${baseClassName}`;
+  const className = `arkynTabButton ${defaultShowBorderBottomTable} ${activeClass} ${baseClassName}`;
 
   function handleClick(event: MouseEvent<HTMLButtonElement>) {
     handleTabClick(event);