tharaday 0.8.3 → 0.8.5

package/src/components/Textarea/Textarea.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import { useComponentId } from '../../hooks/useComponentId.ts';
 
+import { useComponentId } from '../../hooks/useComponentId.ts';
 import styles from './Textarea.module.css';
 import type { TextareaProps } from './Textarea.types.ts';
 

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Tooltip } from './Tooltip.tsx';
 import { Button } from '../Button/Button.tsx';
+import { Tooltip } from './Tooltip.tsx';
 
 const meta: Meta<typeof Tooltip> = {
   title: 'Components/Tooltip',

package/src/components/Tooltip/Tooltip.tsx

@@ -1,11 +1,11 @@
 import classnames from 'classnames';
 import {
-  useState,
-  useRef,
-  isValidElement,
   cloneElement,
+  isValidElement,
   type KeyboardEvent,
   type ReactElement,
+  useRef,
+  useState,
 } from 'react';
 
 import { useComponentId } from '../../hooks/useComponentId.ts';
@@ -48,6 +48,7 @@ export const Tooltip = ({
   const trigger = isValidElement(children)
     ? (() => {
         const child = children as ReactElement<{ 'aria-describedby'?: string }>;
+
         return cloneElement(child, {
           'aria-describedby': [child.props['aria-describedby'], tooltipId]
             .filter(Boolean)

package/src/components/Tree/Tree.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+
 import { Tree } from './Tree';
 
 const meta = {

package/src/components/Tree/Tree.tsx

@@ -1,8 +1,9 @@
 import classnames from 'classnames';
-import { useEffect, useRef } from 'react';
 import type { KeyboardEvent } from 'react';
-import type { TreeProps } from './Tree.types';
+import { useEffect, useRef } from 'react';
+
 import styles from './Tree.module.css';
+import type { TreeProps } from './Tree.types';
 import { TreeItem } from './TreeItem';
 
 export const Tree = ({

package/src/components/Tree/TreeItem.tsx

@@ -1,8 +1,9 @@
 import classnames from 'classnames';
-import { useRef, useState } from 'react';
 import type { FocusEvent, KeyboardEvent, MouseEvent } from 'react';
-import type { TreeItemProps } from './TreeItem.types';
+import { useRef, useState } from 'react';
+
 import styles from './TreeItem.module.css';
+import type { TreeItemProps } from './TreeItem.types';
 
 function focusTreeItem(item: HTMLElement) {
   const tree = item.closest('[role="tree"]');
@@ -43,6 +44,7 @@ export const TreeItem = ({
     if (Array.isArray(data)) {
       return (data as unknown[]).map((v, i) => ({ key: String(i), value: v }));
     }
+
     return Object.entries(data as Record<string, unknown>).map(([k, v]) => ({ key: k, value: v }));
   };
 
@@ -155,6 +157,7 @@ export const TreeItem = ({
     if (!Array.isArray(data) && Object.keys(data as object).length === 0) {
       return <span className={styles.empty}>{'{}'}</span>;
     }
+
     return null;
   };
 

package/src/hooks/useClickOutside.test.tsx

@@ -12,6 +12,7 @@ interface Props {
 const TestComponent = ({ onClose, enabled }: Props) => {
   const ref = useRef<HTMLDivElement>(null);
   useClickOutside(ref, onClose, enabled);
+
   return (
     <div data-testid="container">
       <div ref={ref} data-testid="inside">

package/src/hooks/useClickOutside.ts

@@ -1,4 +1,4 @@
-import { useEffect, type RefObject } from 'react';
+import { type RefObject, useEffect } from 'react';
 
 /**
  * Calls onClose when the user clicks outside the referenced element
@@ -27,6 +27,7 @@ export const useClickOutside = <T extends HTMLElement>(
 
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('keydown', handleKeyDown);
+
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('keydown', handleKeyDown);

package/src/hooks/useComponentId.ts

@@ -6,5 +6,6 @@ import { useId } from 'react';
  */
 export const useComponentId = (prefix: string, id?: string): string => {
   const baseId = useId();
+
   return id ?? `ds-${prefix}-${baseId}`;
 };

package/src/hooks/useFocusTrap.test.tsx

@@ -14,6 +14,7 @@ const TestComponent = ({ isOpen, onClose, isLoading }: Props) => {
   if (!isOpen) {
     return <button data-testid="trigger">Open</button>;
   }
+
   return (
     <>
       <button data-testid="trigger">Open</button>
@@ -30,6 +31,7 @@ describe('useFocusTrap', () => {
   beforeEach(() => {
     vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
       cb(0);
+
       return 0;
     });
   });

package/src/hooks/useFocusTrap.ts

@@ -36,6 +36,7 @@ export const useFocusTrap = <T extends HTMLElement>({
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape' && !isLoading) {
         onCloseRef.current();
+
         return;
       }
 

package/src/index.ts

@@ -3,109 +3,107 @@ import './styles/ds.css';
 
 // components
 export { Accordion } from './components/Accordion/Accordion.tsx';
-export type { AccordionProps, AccordionItem } from './components/Accordion/Accordion.types.ts';
+export type { AccordionItem, AccordionProps } from './components/Accordion/Accordion.types.ts';
 export { Avatar } from './components/Avatar/Avatar.tsx';
 export type { AvatarProps, AvatarSize } from './components/Avatar/Avatar.types.ts';
 export { Badge } from './components/Badge/Badge.tsx';
 export type {
+  BadgeIntent,
   BadgeProps,
   BadgeSize,
-  BadgeIntent,
   BadgeVariant,
 } from './components/Badge/Badge.types.ts';
 export { Box } from './components/Box/Box.tsx';
 export type {
-  BoxProps,
-  BoxPadding,
-  BoxGap,
+  BoxAlignItems,
   BoxDisplay,
   BoxFlexDirection,
-  BoxAlignItems,
+  BoxGap,
   BoxJustifyContent,
+  BoxPadding,
+  BoxProps,
 } from './components/Box/Box.types.ts';
-export { Breadcrumbs, BreadcrumbItem } from './components/Breadcrumbs/Breadcrumbs.tsx';
+export { BreadcrumbItem, Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.tsx';
 export type {
-  BreadcrumbsProps,
   BreadcrumbItemProps,
+  BreadcrumbsProps,
 } from './components/Breadcrumbs/Breadcrumbs.types.ts';
 export { Button } from './components/Button/Button.tsx';
 export type {
+  ButtonIntent,
   ButtonProps,
   ButtonSize,
   ButtonVariant,
-  ButtonIntent,
 } from './components/Button/Button.types.ts';
 export { Card, CardContent, CardFooter, CardHeader } from './components/Card/Card.tsx';
 export type {
-  CardProps,
   CardContentProps,
   CardFooterProps,
   CardHeaderProps,
+  CardProps,
 } from './components/Card/Card.types.ts';
 export { Checkbox } from './components/Checkbox/Checkbox.tsx';
 export type { CheckboxProps } from './components/Checkbox/Checkbox.types.ts';
 export { DatePicker } from './components/DatePicker/DatePicker.tsx';
 export type { DatePickerProps } from './components/DatePicker/DatePicker.types.ts';
+export { Divider } from './components/Divider/Divider.tsx';
+export type { DividerOrientation, DividerProps } from './components/Divider/Divider.types.ts';
+export { Drawer } from './components/Drawer/Drawer.tsx';
+export type { DrawerPlacement, DrawerProps, DrawerSize } from './components/Drawer/Drawer.types.ts';
 export { Dropdown } from './components/Dropdown/Dropdown.tsx';
 export type {
-  DropdownProps,
   DropdownOption,
+  DropdownProps,
   DropdownSize,
 } from './components/Dropdown/Dropdown.types.ts';
-export { Divider } from './components/Divider/Divider.tsx';
-export type { DividerProps, DividerOrientation } from './components/Divider/Divider.types.ts';
-export { Drawer } from './components/Drawer/Drawer.tsx';
-export type { DrawerProps, DrawerPlacement, DrawerSize } from './components/Drawer/Drawer.types.ts';
 export { EmptyState } from './components/EmptyState/EmptyState.tsx';
 export type { EmptyStateProps, EmptyStateSize } from './components/EmptyState/EmptyState.types.ts';
 export { Header } from './components/Header/Header.tsx';
 export type { HeaderProps } from './components/Header/Header.types.ts';
-export { NavBar } from './components/NavBar/NavBar.tsx';
-export type { NavBarProps, NavBarItem } from './components/NavBar/NavBar.types.ts';
 export { Input } from './components/Input/Input.tsx';
 export type { InputProps } from './components/Input/Input.types.ts';
-export { Loader } from './components/Loader/Loader.tsx';
-export type { LoaderProps, LoaderSize } from './components/Loader/Loader.types.ts';
 export { List } from './components/List/List.tsx';
-export { ListItem } from './components/List/ListItem.tsx';
 export type { ListProps, ListVariant } from './components/List/List.types.ts';
+export { ListItem } from './components/List/ListItem.tsx';
 export type { ListItemProps } from './components/List/ListItem.types.ts';
+export { Loader } from './components/Loader/Loader.tsx';
+export type { LoaderProps, LoaderSize } from './components/Loader/Loader.types.ts';
 export { Modal } from './components/Modal/Modal.tsx';
 export type { ModalProps } from './components/Modal/Modal.types.ts';
+export { NavBar } from './components/NavBar/NavBar.tsx';
+export type { NavBarItem, NavBarProps } from './components/NavBar/NavBar.types.ts';
 export { Notification } from './components/Notification/Notification.tsx';
 export type { NotificationProps } from './components/Notification/Notification.types.ts';
 export { Pagination } from './components/Pagination/Pagination.tsx';
 export type {
-  PaginationProps,
   PaginationLabels,
+  PaginationProps,
 } from './components/Pagination/Pagination.types.ts';
 export { Popover } from './components/Popover/Popover.tsx';
-export type { PopoverProps, PopoverPlacement } from './components/Popover/Popover.types.ts';
+export type { PopoverPlacement, PopoverProps } from './components/Popover/Popover.types.ts';
 export { ProgressBar } from './components/ProgressBar/ProgressBar.tsx';
 export type {
+  ProgressBarIntent,
   ProgressBarProps,
   ProgressBarSize,
-  ProgressBarIntent,
 } from './components/ProgressBar/ProgressBar.types.ts';
-export { Slider } from './components/Slider/Slider.tsx';
-export type { SliderProps, SliderSize, SliderValue } from './components/Slider/Slider.types.ts';
 export { RadioButton } from './components/RadioButton/RadioButton.tsx';
 export type { RadioButtonProps } from './components/RadioButton/RadioButton.types.ts';
+export { Select } from './components/Select/Select.tsx';
+export type { SelectOption, SelectProps, SelectSize } from './components/Select/Select.types.ts';
 export { Skeleton } from './components/Skeleton/Skeleton.tsx';
 export type { SkeletonProps } from './components/Skeleton/Skeleton.types.ts';
+export { Slider } from './components/Slider/Slider.tsx';
+export type { SliderProps, SliderSize, SliderValue } from './components/Slider/Slider.types.ts';
+export type { StepOptions, StepperStatus } from './components/Stepper/Step.types.ts';
 export { Stepper } from './components/Stepper/Stepper.tsx';
 export type {
-  StepperProps,
   StepperOrientation,
+  StepperProps,
   StepperSize,
 } from './components/Stepper/Stepper.types.ts';
-export type { StepOptions, StepperStatus } from './components/Stepper/Step.types.ts';
-export { Select } from './components/Select/Select.tsx';
-export type { SelectProps, SelectOption, SelectSize } from './components/Select/Select.types.ts';
 export { Switch } from './components/Switch/Switch.tsx';
 export type { SwitchProps } from './components/Switch/Switch.types.ts';
-export { Tag } from './components/Tag/Tag.tsx';
-export type { TagProps, TagIntent, TagSize } from './components/Tag/Tag.types.ts';
 export {
   Table,
   TableBody,
@@ -116,31 +114,33 @@ export {
   TableRow,
 } from './components/Table/Table.tsx';
 export type {
-  TableProps,
   TableBodyProps,
   TableCellProps,
   TableFooterProps,
+  TableHeaderProps,
   TableHeadProps,
+  TableProps,
   TableRowProps,
-  TableHeaderProps,
 } from './components/Table/Table.types.ts';
 export { Tabs } from './components/Tabs/Tabs.tsx';
-export type { TabsProps, TabItem } from './components/Tabs/Tabs.types.ts';
+export type { TabItem, TabsProps } from './components/Tabs/Tabs.types.ts';
+export { Tag } from './components/Tag/Tag.tsx';
+export type { TagIntent, TagProps, TagSize } from './components/Tag/Tag.types.ts';
 export { Text } from './components/Text/Text.tsx';
 export type {
-  TextProps,
+  FontWeight,
   TextAlign,
   TextColor,
+  TextProps,
   TextVariant,
-  FontWeight,
 } from './components/Text/Text.types.ts';
 export { Textarea } from './components/Textarea/Textarea.tsx';
 export type { TextareaProps, TextareaSize } from './components/Textarea/Textarea.types.ts';
 export { Tooltip } from './components/Tooltip/Tooltip.tsx';
-export type { TooltipProps, TooltipPosition } from './components/Tooltip/Tooltip.types.ts';
+export type { TooltipPosition, TooltipProps } from './components/Tooltip/Tooltip.types.ts';
 export { Tree } from './components/Tree/Tree.tsx';
-export { TreeItem } from './components/Tree/TreeItem.tsx';
 export type { TreeProps } from './components/Tree/Tree.types.ts';
+export { TreeItem } from './components/Tree/TreeItem.tsx';
 export type { TreeItemProps } from './components/Tree/TreeItem.types.ts';
 
 // layouts

package/src/layouts/AppLayout/AppLayout.stories.tsx

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
-import { AppLayout } from './AppLayout.tsx';
 import { Box } from '../../components/Box/Box.tsx';
 import { Button } from '../../components/Button/Button.tsx';
-import { Card, CardHeader, CardContent } from '../../components/Card/Card.tsx';
+import { Card, CardContent, CardHeader } from '../../components/Card/Card.tsx';
 import { Header } from '../../components/Header/Header.tsx';
 import { NavBar } from '../../components/NavBar/NavBar.tsx';
 import { Text } from '../../components/Text/Text.tsx';
+import { AppLayout } from './AppLayout.tsx';
 
 const meta = {
   title: 'Layouts/AppLayout',

package/src/layouts/AppLayout/AppLayout.tsx

@@ -1,8 +1,8 @@
 import classnames from 'classnames';
 
+import { Box } from '../../components/Box/Box.tsx';
 import styles from './AppLayout.module.css';
 import type { AppLayoutProps } from './AppLayout.types.ts';
-import { Box } from '../../components/Box/Box.tsx';
 
 export const AppLayout = ({
   header,

package/src/layouts/AuthLayout/AuthLayout.stories.tsx

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { AuthLayout } from './AuthLayout.tsx';
 import { Box } from '../../components/Box/Box.tsx';
 import { Button } from '../../components/Button/Button.tsx';
 import { Input } from '../../components/Input/Input.tsx';
 import { Text } from '../../components/Text/Text.tsx';
+import { AuthLayout } from './AuthLayout.tsx';
 
 const meta = {
   title: 'Layouts/Auth',

package/src/layouts/AuthLayout/AuthLayout.tsx

@@ -1,9 +1,9 @@
 import classnames from 'classnames';
 
-import styles from './AuthLayout.module.css';
-import type { AuthLayoutProps } from './AuthLayout.types.tsx';
 import { Box } from '../../components/Box/Box.tsx';
 import { Text } from '../../components/Text/Text.tsx';
+import styles from './AuthLayout.module.css';
+import type { AuthLayoutProps } from './AuthLayout.types.tsx';
 
 export const AuthLayout = ({ logo, title, description, children, className }: AuthLayoutProps) => {
   return (

package/src/layouts/AuthLayout/AuthLayout.types.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 export interface AuthLayoutProps {
   className?: string;
   logo?: ReactNode;
-  title?: string;
-  description?: string;
+  title?: ReactNode;
+  description?: ReactNode;
   children: ReactNode;
 }

package/src/layouts/DashboardLayout/DashboardLayout.stories.tsx

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
-import { DashboardLayout } from './DashboardLayout.tsx';
 import { Badge } from '../../components/Badge/Badge.tsx';
 import type { BadgeIntent } from '../../components/Badge/Badge.types.ts';
 import { Box } from '../../components/Box/Box.tsx';
-import { Breadcrumbs, BreadcrumbItem } from '../../components/Breadcrumbs/Breadcrumbs.tsx';
+import { BreadcrumbItem, Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs.tsx';
 import { Button } from '../../components/Button/Button.tsx';
-import { Card, CardHeader, CardContent } from '../../components/Card/Card.tsx';
+import { Card, CardContent, CardHeader } from '../../components/Card/Card.tsx';
 import { Header } from '../../components/Header/Header.tsx';
 import { Text } from '../../components/Text/Text.tsx';
+import { DashboardLayout } from './DashboardLayout.tsx';
 
 const meta = {
   title: 'Layouts/Dashboard',

package/src/layouts/SettingsLayout/SettingsLayout.stories.tsx

@@ -1,16 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
 
-import { SettingsLayout } from './SettingsLayout.tsx';
 import { Box } from '../../components/Box/Box.tsx';
-import { Breadcrumbs, BreadcrumbItem } from '../../components/Breadcrumbs/Breadcrumbs.tsx';
+import { BreadcrumbItem, Breadcrumbs } from '../../components/Breadcrumbs/Breadcrumbs.tsx';
 import { Button } from '../../components/Button/Button.tsx';
-import { Card, CardHeader, CardContent, CardFooter } from '../../components/Card/Card.tsx';
+import { Card, CardContent, CardFooter, CardHeader } from '../../components/Card/Card.tsx';
 import { Header } from '../../components/Header/Header.tsx';
 import { Input } from '../../components/Input/Input.tsx';
 import { Notification } from '../../components/Notification/Notification.tsx';
 import { Text } from '../../components/Text/Text.tsx';
 import { Textarea } from '../../components/Textarea/Textarea.tsx';
+import { SettingsLayout } from './SettingsLayout.tsx';
 
 const meta = {
   title: 'Layouts/Settings',

package/src/styles/themes.browser.test.ts

@@ -10,6 +10,7 @@ function resolveColorToken(token: string): string {
   document.body.appendChild(el);
   const color = getComputedStyle(el).backgroundColor;
   el.remove();
+
   return color;
 }
 

package/vite.config.ts

@@ -1,8 +1,7 @@
+import { resolve } from 'path';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
-import { resolve } from 'path';
-
 export default defineConfig({
   plugins: [
     dts({