tharaday 0.7.3 → 0.7.5

package/src/components/Dropdown/Dropdown.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useId, useState, useRef, useEffect, type KeyboardEvent } from 'react';
 
 import styles from './Dropdown.module.css';
@@ -154,7 +154,7 @@ export const Dropdown = ({
 
   return (
     <div
-      className={clsx(
+      className={classnames(
         styles.wrapper,
         styles[size],
         fullWidth && styles.fullWidth,
@@ -173,7 +173,7 @@ export const Dropdown = ({
           id={componentId}
           ref={triggerRef}
           type="button"
-          className={clsx(styles.trigger, isOpen && styles.isOpen)}
+          className={classnames(styles.trigger, isOpen && styles.isOpen)}
           onClick={toggleDropdown}
           onKeyDown={handleKeyDown}
           disabled={disabled}
@@ -222,7 +222,7 @@ export const Dropdown = ({
                   id={`${componentId}-opt-${index}`}
                   role="option"
                   aria-selected={isSelected}
-                  className={clsx(
+                  className={classnames(
                     styles.option,
                     isSelected && styles.optionSelected,
                     isFocused && styles.optionFocused,
@@ -242,7 +242,7 @@ export const Dropdown = ({
         )}
       </div>
       {helperText && (
-        <span id={helperId} className={clsx(styles.helperText, error && styles.errorText)}>
+        <span id={helperId} className={classnames(styles.helperText, error && styles.errorText)}>
           {helperText}
         </span>
       )}

package/src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 
 import styles from './Header.module.css';
 import type { HeaderProps } from './Header.types.ts';
@@ -19,13 +19,13 @@ export const Header = ({
   const buttonProps = { size: 'sm', intent: 'info' } as ButtonProps;
 
   return (
-    <header id={id} className={clsx(styles.root, className)}>
+    <header id={id} className={classnames(styles.root, className)}>
       <div className={styles.container} style={{ maxWidth }}>
-        <div className={clsx(styles.sideContainer, styles.leftSide)}>
+        <div className={classnames(styles.sideContainer, styles.leftSide)}>
           {logo}
           {title ? <h1 className={styles.title}>{title}</h1> : null}
         </div>
-        <div className={clsx(styles.sideContainer, styles.rightSide)}>
+        <div className={classnames(styles.sideContainer, styles.rightSide)}>
           {user ? (
             <div className={styles.actions}>
               <span className={styles.welcome}>

package/src/components/Input/Input.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useId } from 'react';
 
 import styles from './Input.module.css';
@@ -19,7 +19,7 @@ export const Input = ({
   const helperId = helperText ? `${componentId}-help` : undefined;
 
   return (
-    <div className={clsx(styles.wrapper, fullWidth && styles.fullWidth, className)}>
+    <div className={classnames(styles.wrapper, fullWidth && styles.fullWidth, className)}>
       {label && (
         <label htmlFor={componentId} className={styles.label}>
           {label}
@@ -27,13 +27,13 @@ export const Input = ({
       )}
       <input
         id={componentId}
-        className={clsx(styles.inputRoot, styles[size], error && styles.error)}
+        className={classnames(styles.inputRoot, styles[size], error && styles.error)}
         aria-describedby={helperId}
         aria-invalid={error || undefined}
         {...props}
       />
       {helperText && (
-        <span id={helperId} className={clsx(styles.helperText, error && styles.errorText)}>
+        <span id={helperId} className={classnames(styles.helperText, error && styles.errorText)}>
           {helperText}
         </span>
       )}

package/src/components/List/List.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import type { CSSProperties } from 'react';
 
 import styles from './List.module.css';
@@ -57,7 +57,7 @@ export const List = ({
 
   return (
     <Component
-      className={clsx(
+      className={classnames(
         styles.root,
         styles[variant],
         typeof spacing === 'number' && styles[`gap-${spacing}`],

package/src/components/List/ListItem.tsx

@@ -1,10 +1,10 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import type { ListItemProps } from './ListItem.types';
 import styles from './ListItem.module.css';
 
 export const ListItem = ({ children, icon, className, ...props }: ListItemProps) => {
   return (
-    <li className={clsx(styles.item, className)} {...props}>
+    <li className={classnames(styles.item, className)} {...props}>
       {icon && <span className={styles.iconWrapper}>{icon}</span>}
       <div className={styles.content}>{children}</div>
     </li>

package/src/components/Loader/Loader.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 
 import styles from './Loader.module.css';
 import type { LoaderProps } from './Loader.types.ts';
@@ -7,7 +7,7 @@ export const Loader = ({ id, size = 'md', intent = 'neutral', className }: Loade
   return (
     <div
       id={id}
-      className={clsx(styles.loader, styles[size], styles[intent], className)}
+      className={classnames(styles.loader, styles[size], styles[intent], className)}
       role="status"
       aria-label="Loading"
     />

package/src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useEffect, useRef, useId } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -86,7 +86,7 @@ export const Modal = ({
     <div className={styles.overlay} onClick={() => !isLoading && onClose()}>
       <div
         id={componentId}
-        className={clsx(styles.modal, styles[size], isLoading && styles.loading, className)}
+        className={classnames(styles.modal, styles[size], isLoading && styles.loading, className)}
         onClick={(e) => e.stopPropagation()}
         role="dialog"
         aria-modal="true"

package/src/components/NavBar/NavBar.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 
 import styles from './NavBar.module.css';
 import type { NavBarProps } from './NavBar.types.ts';
@@ -18,7 +18,7 @@ export const NavBar = ({
   maxWidth,
 }: NavBarProps) => {
   return (
-    <nav id={id} className={clsx(styles.root, className)}>
+    <nav id={id} className={classnames(styles.root, className)}>
       <div className={styles.container} style={{ maxWidth }}>
         {logo && <div className={styles.leftSection}>{logo}</div>}
 
@@ -28,7 +28,7 @@ export const NavBar = ({
               <li key={item.id} className={styles.navItem}>
                 <button
                   type="button"
-                  className={clsx(
+                  className={classnames(
                     styles.navLink,
                     activeId === item.id && styles.active,
                     item.disabled && styles.disabled

package/src/components/Notification/Notification.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 
 import styles from './Notification.module.css';
 import type { NotificationProps } from './Notification.types.ts';
@@ -13,7 +13,7 @@ export const Notification = ({
   ...props
 }: NotificationProps) => {
   return (
-    <div className={clsx(styles.root, styles[intent], className)} role="alert" {...props}>
+    <div className={classnames(styles.root, styles[intent], className)} role="alert" {...props}>
       <div className={styles.content}>
         {title && <div className={styles.title}>{title}</div>}
         <div className={styles.message}>{children}</div>

package/src/components/Pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useId, useMemo, useState } from 'react';
 
 import styles from './Pagination.module.css';
@@ -147,7 +147,7 @@ export const Pagination = ({
   }
 
   return (
-    <nav id={componentId} aria-label={ariaLabel} className={clsx(styles.root, className)}>
+    <nav id={componentId} aria-label={ariaLabel} className={classnames(styles.root, className)}>
       <ul className={styles.list}>
         {showFirstLast && (
           <li className={styles.item}>

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useId } from 'react';
 
 import styles from './ProgressBar.module.css';
@@ -22,7 +22,10 @@ export const ProgressBar = ({
   const labelId = label ? `${componentId}-label` : undefined;
 
   return (
-    <div id={componentId} className={clsx(styles.wrapper, styles[size], styles[intent], className)}>
+    <div
+      id={componentId}
+      className={classnames(styles.wrapper, styles[size], styles[intent], className)}
+    >
       {(label || showLabel) && (
         <div className={styles.labelWrapper}>
           {label && (

package/src/components/RadioButton/RadioButton.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useId } from 'react';
 
 import styles from './RadioButton.module.css';
@@ -18,13 +18,13 @@ export const RadioButton = ({
   const helperId = helperText ? `${componentId}-help` : undefined;
 
   return (
-    <div className={clsx(styles.wrapper, className)}>
-      <label htmlFor={componentId} className={clsx(styles.label, styles[size])}>
+    <div className={classnames(styles.wrapper, className)}>
+      <label htmlFor={componentId} className={classnames(styles.label, styles[size])}>
         <div className={styles.inputWrapper}>
           <input
             type="radio"
             id={componentId}
-            className={clsx(styles.radioRoot, styles[size], error && styles.error)}
+            className={classnames(styles.radioRoot, styles[size], error && styles.error)}
             aria-describedby={helperId}
             aria-invalid={error || undefined}
             {...props}
@@ -34,7 +34,7 @@ export const RadioButton = ({
         {label && <span className={styles.labelText}>{label}</span>}
       </label>
       {helperText && (
-        <span id={helperId} className={clsx(styles.helperText, error && styles.errorText)}>
+        <span id={helperId} className={classnames(styles.helperText, error && styles.errorText)}>
           {helperText}
         </span>
       )}

package/src/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useId } from 'react';
 
 import styles from './Select.module.css';
@@ -21,7 +21,7 @@ export const Select = ({
   const helperId = helperText ? `${componentId}-help` : undefined;
 
   return (
-    <div className={clsx(styles.wrapper, fullWidth && styles.fullWidth, className)}>
+    <div className={classnames(styles.wrapper, fullWidth && styles.fullWidth, className)}>
       {label && (
         <label htmlFor={componentId} className={styles.label}>
           {label}
@@ -29,7 +29,7 @@ export const Select = ({
       )}
       <select
         id={componentId}
-        className={clsx(styles.selectRoot, styles[size], error && styles.error)}
+        className={classnames(styles.selectRoot, styles[size], error && styles.error)}
         aria-describedby={helperId}
         aria-invalid={error || undefined}
         {...props}
@@ -43,7 +43,7 @@ export const Select = ({
           : children}
       </select>
       {helperText && (
-        <span id={helperId} className={clsx(styles.helperText, error && styles.errorText)}>
+        <span id={helperId} className={classnames(styles.helperText, error && styles.errorText)}>
           {helperText}
         </span>
       )}

package/src/components/Skeleton/Skeleton.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 
 import styles from './Skeleton.module.css';
 import type { SkeletonProps } from './Skeleton.types.ts';
@@ -16,7 +16,7 @@ export const Skeleton = ({
 }: SkeletonProps) => {
   return (
     <Box
-      className={clsx(
+      className={classnames(
         styles.root,
         styles[variant],
         animation !== 'none' && styles[animation],

package/src/components/Slider/Slider.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useId, useMemo, useState } from 'react';
 
 import { Input } from '../Input/Input.tsx';
@@ -118,7 +118,7 @@ export const Slider = ({
   };
 
   return (
-    <div className={clsx(styles.wrapper, fullWidth && styles.fullWidth, className)}>
+    <div className={classnames(styles.wrapper, fullWidth && styles.fullWidth, className)}>
       {(label || showValue) && (
         <div className={styles.header}>
           {label && (
@@ -129,7 +129,9 @@ export const Slider = ({
           {showValue && <span className={styles.value}>{showValueText}</span>}
         </div>
       )}
-      <div className={clsx(styles.sliderRoot, styles[size], props.disabled && styles.disabled)}>
+      <div
+        className={classnames(styles.sliderRoot, styles[size], props.disabled && styles.disabled)}
+      >
         <div className={styles.track} />
         <div
           className={styles.activeTrack}
@@ -141,7 +143,7 @@ export const Slider = ({
         <input
           id={componentId}
           type="range"
-          className={clsx(styles.inputRoot, isDual && styles.inputStart)}
+          className={classnames(styles.inputRoot, isDual && styles.inputStart)}
           aria-describedby={helperId}
           aria-label={!label ? (isDual ? 'Slider minimum' : 'Slider') : undefined}
           aria-valuetext={showValue ? showValueText : undefined}
@@ -159,7 +161,7 @@ export const Slider = ({
           <input
             id={`${componentId}-end`}
             type="range"
-            className={clsx(styles.inputRoot, styles.inputEnd)}
+            className={classnames(styles.inputRoot, styles.inputEnd)}
             aria-describedby={helperId}
             aria-label={label ? `${label} maximum` : 'Slider maximum'}
             {...props}
@@ -175,7 +177,7 @@ export const Slider = ({
         )}
       </div>
       {showInputs && (
-        <div className={clsx(styles.inputsRow, !isDual && styles.singleInputRow)}>
+        <div className={classnames(styles.inputsRow, !isDual && styles.singleInputRow)}>
           <Input
             key={`slider-start-${startValue}-${endValue}`}
             type="number"

package/src/components/Stepper/Step.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import type { ElementType, KeyboardEvent } from 'react';
 
 import styles from './Step.module.css';
@@ -32,11 +32,13 @@ export const Step = ({
   };
 
   return (
-    <li className={clsx(styles.step, styles[status], isDisabled && styles.disabled, className)}>
+    <li
+      className={classnames(styles.step, styles[status], isDisabled && styles.disabled, className)}
+    >
       <StepContent
         id={id}
         type={isInteractive ? 'button' : undefined}
-        className={clsx(styles.stepRow, isInteractive && styles.interactive)}
+        className={classnames(styles.stepRow, isInteractive && styles.interactive)}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         aria-current={status === 'current' ? 'step' : undefined}
@@ -54,7 +56,7 @@ export const Step = ({
       </StepContent>
       {!isLast && (
         <span
-          className={clsx(styles.connector, styles[`connector-${status}`])}
+          className={classnames(styles.connector, styles[`connector-${status}`])}
           aria-hidden="true"
         />
       )}

package/src/components/Stepper/Stepper.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useId } from 'react';
 
 import { Step } from './Step.tsx';
@@ -25,7 +25,7 @@ export const Stepper = ({
   return (
     <ol
       id={componentId}
-      className={clsx(styles.root, styles[orientation], styles[size], className)}
+      className={classnames(styles.root, styles[orientation], styles[size], className)}
       aria-label={listLabel}
       data-orientation={orientation}
       {...props}

package/src/components/Switch/Switch.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useId } from 'react';
 
 import styles from './Switch.module.css';
@@ -10,8 +10,11 @@ export const Switch = ({ label, helperText, className, disabled, id, ...props }:
   const helperId = helperText ? `${componentId}-help` : undefined;
 
   return (
-    <div className={clsx(styles.wrapper, className)}>
-      <label htmlFor={componentId} className={clsx(styles.container, disabled && styles.disabled)}>
+    <div className={classnames(styles.wrapper, className)}>
+      <label
+        htmlFor={componentId}
+        className={classnames(styles.container, disabled && styles.disabled)}
+      >
         <input
           type="checkbox"
           id={componentId}

package/src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 
 import styles from './Table.module.css';
 import type {
@@ -21,9 +21,9 @@ export const Table = ({
   ...props
 }: TableProps) => {
   return (
-    <div className={clsx(styles.wrapper, isLoading && styles.loading, className)}>
+    <div className={classnames(styles.wrapper, isLoading && styles.loading, className)}>
       <table
-        className={clsx(
+        className={classnames(
           styles.table,
           striped && styles.striped,
           hoverable && styles.hoverable,
@@ -39,37 +39,37 @@ export const Table = ({
 };
 
 export const TableHeader = ({ children, className, ...props }: TableHeaderProps) => (
-  <thead className={clsx(styles.thead, className)} {...props}>
+  <thead className={classnames(styles.thead, className)} {...props}>
     {children}
   </thead>
 );
 
 export const TableBody = ({ children, className, ...props }: TableBodyProps) => (
-  <tbody className={clsx(styles.tbody, className)} {...props}>
+  <tbody className={classnames(styles.tbody, className)} {...props}>
     {children}
   </tbody>
 );
 
 export const TableFooter = ({ children, className, ...props }: TableFooterProps) => (
-  <tfoot className={clsx(styles.tfoot, className)} {...props}>
+  <tfoot className={classnames(styles.tfoot, className)} {...props}>
     {children}
   </tfoot>
 );
 
 export const TableRow = ({ children, className, ...props }: TableRowProps) => (
-  <tr className={clsx(styles.tr, className)} {...props}>
+  <tr className={classnames(styles.tr, className)} {...props}>
     {children}
   </tr>
 );
 
 export const TableHead = ({ children, className, align, ...props }: TableHeadProps) => (
-  <th className={clsx(styles.th, align && styles[`align-${align}`], className)} {...props}>
+  <th className={classnames(styles.th, align && styles[`align-${align}`], className)} {...props}>
     {children}
   </th>
 );
 
 export const TableCell = ({ children, className, align, ...props }: TableCellProps) => (
-  <td className={clsx(styles.td, align && styles[`align-${align}`], className)} {...props}>
+  <td className={classnames(styles.td, align && styles[`align-${align}`], className)} {...props}>
     {children}
   </td>
 );

package/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useId, useState, useRef, type KeyboardEvent } from 'react';
 
 import styles from './Tabs.module.css';
@@ -64,11 +64,11 @@ export const Tabs = ({
   const activeTab = items.find((item) => item.id === activeId);
 
   return (
-    <div id={componentId} className={clsx(styles.root, className)}>
+    <div id={componentId} className={classnames(styles.root, className)}>
       <div
         role="tablist"
         ref={tabListRef}
-        className={clsx(styles.tabList, variant === 'pill' && styles.pillList)}
+        className={classnames(styles.tabList, variant === 'pill' && styles.pillList)}
         onKeyDown={handleKeyDown}
       >
         {items.map((item) => {
@@ -86,7 +86,7 @@ export const Tabs = ({
               tabIndex={tabIndex}
               disabled={isDisabled}
               data-id={item.id}
-              className={clsx(
+              className={classnames(
                 styles.tabItem,
                 variant === 'pill' && styles.pillItem,
                 isSelected && styles.active,

package/src/components/Text/Text.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import type { ElementType } from 'react';
 
 import styles from './Text.module.css';
@@ -47,7 +47,7 @@ export const Text = ({
 
   return (
     <Component
-      className={clsx(
+      className={classnames(
         styles.root,
         styles[variant],
         align && styles[align],

package/src/components/Textarea/Textarea.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useId } from 'react';
 
 import styles from './Textarea.module.css';
@@ -20,7 +20,7 @@ export const Textarea = ({
   const helperId = helperText ? `${componentId}-help` : undefined;
 
   return (
-    <div className={clsx(styles.wrapper, fullWidth && styles.fullWidth, className)}>
+    <div className={classnames(styles.wrapper, fullWidth && styles.fullWidth, className)}>
       {label && (
         <label htmlFor={componentId} className={styles.label}>
           {label}
@@ -29,13 +29,13 @@ export const Textarea = ({
       <textarea
         id={componentId}
         rows={rows}
-        className={clsx(styles.textareaRoot, styles[size], error && styles.error)}
+        className={classnames(styles.textareaRoot, styles[size], error && styles.error)}
         aria-describedby={helperId}
         aria-invalid={error || undefined}
         {...props}
       />
       {helperText && (
-        <span id={helperId} className={clsx(styles.helperText, error && styles.errorText)}>
+        <span id={helperId} className={classnames(styles.helperText, error && styles.errorText)}>
           {helperText}
         </span>
       )}

package/src/components/Tooltip/Tooltip.module.css

@@ -20,8 +20,8 @@
 }
 
 .dark {
-  background-color: var(--neutral-900);
-  color: var(--neutral-0);
+  background-color: var(--ds-p-neutral-900);
+  color: var(--ds-p-neutral-0);
 }
 
 .light {
@@ -75,7 +75,7 @@
 }
 
 .top.dark::after {
-  border-color: var(--neutral-900) transparent transparent transparent;
+  border-color: var(--ds-p-neutral-900) transparent transparent transparent;
 }
 
 .top.light::after {
@@ -89,7 +89,7 @@
 }
 
 .bottom.dark::after {
-  border-color: transparent transparent var(--neutral-900) transparent;
+  border-color: transparent transparent var(--ds-p-neutral-900) transparent;
 }
 
 .bottom.light::after {
@@ -103,7 +103,7 @@
 }
 
 .left.dark::after {
-  border-color: transparent transparent transparent var(--neutral-900);
+  border-color: transparent transparent transparent var(--ds-p-neutral-900);
 }
 
 .left.light::after {
@@ -117,7 +117,7 @@
 }
 
 .right.dark::after {
-  border-color: transparent var(--neutral-900) transparent transparent;
+  border-color: transparent var(--ds-p-neutral-900) transparent transparent;
 }
 
 .right.light::after {

package/src/components/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import {
   useState,
   useRef,
@@ -60,7 +60,7 @@ export const Tooltip = ({
   return (
     <div
       id={componentId}
-      className={clsx(styles.root, className)}
+      className={classnames(styles.root, className)}
       onMouseEnter={showTooltip}
       onMouseLeave={hideTooltip}
       onFocus={showTooltip}
@@ -69,7 +69,7 @@ export const Tooltip = ({
     >
       <div className={styles.trigger}>{trigger}</div>
       <div
-        className={clsx(
+        className={classnames(
           styles.tooltip,
           styles[position],
           styles[variant],

package/src/components/Tree/Tree.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classnames from 'classnames';
 import { useEffect, useRef } from 'react';
 import type { KeyboardEvent } from 'react';
 import type { TreeProps } from './Tree.types';
@@ -70,7 +70,7 @@ export const Tree = ({
     <div
       ref={treeRef}
       role="tree"
-      className={clsx(styles.root, className)}
+      className={classnames(styles.root, className)}
       onKeyDown={handleKeyDown}
       {...props}
     >