@arkyn/components 1.3.78 → 1.3.80

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);

package/src/components/Tabs/TabButton/styles.css

@@ -1,4 +1,4 @@
-.arkyn_tab_button {
+.arkynTabButton {
   position: relative;
 
   display: flex;
@@ -18,7 +18,7 @@
   transition: all 0.3s ease-in-out;
 }
 
-.arkyn_tab_button.show_border_bottom::after {
+.arkynTabButton.showBorderBottom::after {
   content: "";
   position: absolute;
   bottom: -1px;
@@ -29,10 +29,10 @@
   background-color: rgba(var(--spotlight-primary), 1);
 }
 
-.arkyn_tab_button:hover {
+.arkynTabButton:hover {
   cursor: pointer;
 }
 
-.arkyn_tab_button.active {
+.arkynTabButton.activeTrue {
   color: rgba(var(--spotlight-primary), 1);
 }

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

@@ -38,7 +38,7 @@ function TabContainer(props: TabContainerProps) {
   const [showInitialTab, setShowInitialTab] = useState(true);
 
   const reference = useRef<HTMLElement>(null);
-  const className = `arkyn_tab_container ${baseClassName || ""}`;
+  const className = `arkynTabContainer ${baseClassName || ""}`;
 
   const [activeLineStyle, setActiveLineStyle] = useState({
     width: "0px",
@@ -90,7 +90,7 @@ function TabContainer(props: TabContainerProps) {
       <TabContext.Provider value={{ handleTabClick, showInitialTab, value }}>
         {children}
       </TabContext.Provider>
-      <div className="active-line" style={activeLineStyle} />
+      <div className="activeLine" style={activeLineStyle} />
     </nav>
   );
 }

package/src/components/Tabs/TabContainer/styles.css

@@ -1,4 +1,4 @@
-.arkyn_tab_container {
+.arkynTabContainer {
   position: relative;
 
   display: flex;
@@ -10,7 +10,7 @@
   border-bottom: 1px solid var(--border);
 }
 
-.arkyn_tab_container .active-line {
+.arkynTabContainer .activeLine {
   position: absolute;
   height: 1px;
 

package/src/components/Textarea/index.tsx

@@ -25,11 +25,11 @@ function Textarea(props: TextareaProps) {
   const ref = inputRef || baseRef;
   const isError = props.isError || !!error;
 
-  const errored = isError ? "errored" : "";
-  const opacity = disabled || readOnly ? "opacity" : "";
-  const focused = isFocused ? "focused" : "";
+  const errorClass = isError ? "errorTrue" : "errorFalse";
+  const opacityClass = disabled || readOnly ? "opacityTrue" : "opacityFalse";
+  const focusedClass = isFocused ? "focusedTrue" : "focusedFalse";
 
-  const className = `arkyn_textarea ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
+  const className = `arkynTextarea ${variant} ${size} ${opacityClass} ${errorClass} ${focusedClass} ${baseClassName}`;
 
   function handleSectionClick() {
     if (disabled || !ref?.current) return;

package/src/components/Textarea/styles.css

@@ -1,5 +1,5 @@
 /* BASE */
-.arkyn_textarea {
+.arkynTextarea {
   flex: 1;
   position: relative;
   display: flex;
@@ -13,11 +13,11 @@
   outline: 1px solid transparent;
 }
 
-.arkyn_textarea:hover {
+.arkynTextarea:hover {
   cursor: text;
 }
 
-.arkyn_textarea textarea {
+.arkynTextarea textarea {
   border: none;
   outline: none;
   background: transparent;
@@ -25,68 +25,68 @@
   resize: none;
 }
 
-.arkyn_textarea textarea {
+.arkynTextarea textarea {
   color: var(--text-heading);
 }
 
-.arkyn_textarea textarea::placeholder {
+.arkynTextarea textarea::placeholder {
   color: var(--text-muted);
 }
 
-.arkyn_textarea.opacity {
+.arkynTextarea.opacityTrue {
   opacity: 0.5;
 }
 
 /* VARIANTS */
-.arkyn_textarea.solid {
+.arkynTextarea.solid {
   border-color: var(--border);
   background-color: rgba(var(--input-background), 1);
 }
 
-.arkyn_textarea.solid.errored {
+.arkynTextarea.solid.errored {
   border-color: rgba(var(--spotlight-danger), 1);
   outline-color: rgba(var(--spotlight-danger), 1);
 }
 
-.arkyn_textarea:not(.opacity).solid.focused {
+.arkynTextarea:not(.opacityTrue).solid.focusedTrue {
   border-color: rgba(var(--spotlight-primary), 1);
   outline-color: rgba(var(--spotlight-primary), 1);
 }
 
-.arkyn_textarea.outline {
+.arkynTextarea.outline {
   border-color: var(--border);
 }
 
-.arkyn_textarea.outline.errored {
+.arkynTextarea.outline.errorTrue {
   border-color: rgba(var(--spotlight-danger), 1);
   outline-color: rgba(var(--spotlight-danger), 1);
 }
 
-.arkyn_textarea:not(.opacity).outline.focused {
+.arkynTextarea:not(.opacityTrue).outline.focusedTrue {
   border-color: rgba(var(--spotlight-primary), 1);
   outline-color: rgba(var(--spotlight-primary), 1);
 }
 
 /* SIZE */
-.arkyn_textarea.md textarea {
+.arkynTextarea.md textarea {
   font-size: 14px;
   line-height: 14px;
   font-weight: 400;
 }
 
-.arkyn_textarea.md textarea::placeholder {
+.arkynTextarea.md textarea::placeholder {
   font-weight: 400;
   font-size: 14px;
   line-height: 14px;
 }
 
-.arkyn_textarea.lg textarea {
+.arkynTextarea.lg textarea {
   line-height: 16px;
   font-size: 16px;
   font-weight: 400;
 }
 
-.arkyn_textarea.lg textarea::placeholder {
+.arkynTextarea.lg textarea::placeholder {
   font-weight: 400;
   font-size: 16px;
   line-height: 16px;

package/src/components/Toast/index.tsx

@@ -6,7 +6,7 @@ import "./styles.css";
 function Toast(props: ToastProps) {
   const { message, title, type, size = "lg" } = props;
 
-  const className = `arkyn_toast ${type} ${size}`;
+  const className = `arkynToast ${type} ${size}`;
 
   function Icon() {
     switch (type) {

package/src/components/Toast/styles.css

@@ -1,4 +1,4 @@
-.arkyn_toast {
+.arkynToast {
   display: flex;
   align-items: start;
 
@@ -10,7 +10,7 @@
   border-radius: var(--rounded-cards);
 }
 
-.arkyn_toast > div {
+.arkynToast > div {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -20,7 +20,7 @@
   overflow: hidden;
 }
 
-.arkyn_toast > div > .bg {
+.arkynToast > div > .bg {
   content: " ";
   left: 0px;
   right: 0px;
@@ -30,15 +30,15 @@
   z-index: 1;
 }
 
-.arkyn_toast > div > svg {
+.arkynToast > div > svg {
   z-index: 2;
 }
 
-.arkyn_toast > div circle {
+.arkynToast > div circle {
   display: none;
 }
 
-.arkyn_toast > p {
+.arkynToast > p {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -47,105 +47,105 @@
   overflow: hidden;
 }
 
-.arkyn_toast > p > strong {
+.arkynToast > p > strong {
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 /* Schemas */
-.arkyn_toast.info {
+.arkynToast.info {
   background-color: rgba(var(--toast-info), 1);
   color: #ffffff;
 }
 
-.arkyn_toast.info > div > .bg {
+.arkynToast.info > div > .bg {
   background-color: rgba(var(--toast-info), 1);
   filter: brightness(0.8);
 }
 
-.arkyn_toast.warning {
+.arkynToast.warning {
   background-color: rgba(var(--toast-warning), 1);
   color: #ffffff;
 }
 
-.arkyn_toast.warning > div > .bg {
+.arkynToast.warning > div > .bg {
   background-color: rgba(var(--toast-warning), 1);
   filter: brightness(0.8);
 }
 
-.arkyn_toast.danger {
+.arkynToast.danger {
   background-color: rgba(var(--toast-danger), 1);
   color: #ffffff;
 }
 
-.arkyn_toast.danger > div > .bg {
+.arkynToast.danger > div > .bg {
   background-color: rgba(var(--toast-danger), 1);
   filter: brightness(0.8);
 }
 
-.arkyn_toast.success {
+.arkynToast.success {
   background-color: rgba(var(--toast-success), 1);
   color: #ffffff;
 }
 
-.arkyn_toast.success > div > .bg {
+.arkynToast.success > div > .bg {
   background-color: rgba(var(--toast-success), 1);
   filter: brightness(0.8);
 }
 
 /* Sizes */
-.arkyn_toast.md {
+.arkynToast.md {
   min-width: 260px;
 }
 
-.arkyn_toast.md > div {
+.arkynToast.md > div {
   min-height: 20px;
   max-height: 20px;
   min-width: 20px;
   max-width: 20px;
 }
 
-.arkyn_toast.md > div > svg {
+.arkynToast.md > div > svg {
   min-height: 26px;
   min-width: 26px;
 }
 
-.arkyn_toast.md > p > strong {
+.arkynToast.md > p > strong {
   font-weight: 600;
   font-size: 14px;
   line-height: 16px;
 }
 
-.arkyn_toast.md > p > span {
+.arkynToast.md > p > span {
   font-weight: 400;
   font-size: 12px;
   line-height: 14px;
 }
 
-.arkyn_toast.lg {
+.arkynToast.lg {
   min-width: 260px;
 }
 
-.arkyn_toast.lg > div {
+.arkynToast.lg > div {
   min-height: 24px;
   max-height: 24px;
   min-width: 24px;
   max-width: 24px;
 }
 
-.arkyn_toast.lg > div > svg {
+.arkynToast.lg > div > svg {
   min-height: 30px;
   min-width: 30px;
 }
 
-.arkyn_toast.lg > p > strong {
+.arkynToast.lg > p > strong {
   font-weight: 600;
   font-size: 15px;
   line-height: 17px;
 }
 
-.arkyn_toast.lg > p > span {
+.arkynToast.lg > p > span {
   font-weight: 400;
   font-size: 14px;
   line-height: 16px;

package/src/components/Tooltip/index.tsx

@@ -7,16 +7,16 @@ function Tooltip(props: TooltipProps) {
     size = "lg",
     children,
     orientation = "top",
-    className: baseClassName,
+    className: baseClassName = "",
     ...rest
   } = props;
 
-  const className = `arkyn_tooltip ${size} ${orientation} ${baseClassName}`;
+  const className = `arkynTooltip ${size} ${orientation} ${baseClassName}`;
 
   return (
     <div className={className.trim()} {...rest}>
       {children}
-      <div className="arkyn_tooltip-text">{text}</div>
+      <div className="arkynTooltipText">{text}</div>
     </div>
   );
 }

package/src/components/Tooltip/styles.css

@@ -1,9 +1,9 @@
-.arkyn_tooltip {
+.arkynTooltip {
   position: relative;
   display: block;
 }
 
-.arkyn_tooltip-text {
+.arkynTooltipText {
   visibility: hidden;
 
   opacity: 0;
@@ -25,30 +25,30 @@
   z-index: 9999;
 }
 
-.arkyn_tooltip.lg .arkyn_tooltip-text {
+.arkynTooltip.lg .arkynTooltipText {
   font-size: 14px;
   line-height: 14px;
   padding: 8px 12px;
 }
 
-.arkyn_tooltip.md .arkyn_tooltip-text {
+.arkynTooltip.md .arkynTooltipText {
   font-size: 12px;
   line-height: 12px;
   padding: 8px 12px;
 }
 
-.arkyn_tooltip:hover .arkyn_tooltip-text {
+.arkynTooltip:hover .arkynTooltipText {
   opacity: 1;
   visibility: visible;
 }
 
-.arkyn_tooltip.top .arkyn_tooltip-text {
+.arkynTooltip.top .arkynTooltipText {
   bottom: calc(100% + 10px);
   left: 50%;
   transform: translateX(-50%);
 }
 
-.arkyn_tooltip.top .arkyn_tooltip-text::before {
+.arkynTooltip.top .arkynTooltipText::before {
   content: "";
   top: 100%;
   border-style: solid;
@@ -60,13 +60,13 @@
   transform: translateX(-50%);
 }
 
-.arkyn_tooltip.left .arkyn_tooltip-text {
+.arkynTooltip.left .arkynTooltipText {
   top: 50%;
   right: calc(100% + 10px);
   transform: translateY(-50%);
 }
 
-.arkyn_tooltip.left .arkyn_tooltip-text::before {
+.arkynTooltip.left .arkynTooltipText::before {
   content: "";
   top: 50%;
   border-style: solid;
@@ -77,13 +77,13 @@
   transform: translateY(-50%);
 }
 
-.arkyn_tooltip.right .arkyn_tooltip-text {
+.arkynTooltip.right .arkynTooltipText {
   top: 50%;
   left: calc(100% + 10px);
   transform: translateY(-50%);
 }
 
-.arkyn_tooltip.right .arkyn_tooltip-text::before {
+.arkynTooltip.right .arkynTooltipText::before {
   content: "";
   border-style: solid;
   border-color: transparent var(--tooltip-background);
@@ -94,13 +94,13 @@
   position: absolute;
 }
 
-.arkyn_tooltip.bottom .arkyn_tooltip-text {
+.arkynTooltip.bottom .arkynTooltipText {
   top: calc(100% + 10px);
   left: 50%;
   transform: translateX(-50%);
 }
 
-.arkyn_tooltip.bottom .arkyn_tooltip-text::before {
+.arkynTooltip.bottom .arkynTooltipText::before {
   content: "";
   border-style: solid;
   border-color: var(--tooltip-background) transparent;