tharaday 0.7.6 → 0.8.0

package/src/components/Select/Select.types.ts

@@ -8,13 +8,15 @@ export interface SelectOption {
   disabled?: boolean;
 }
 
-export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+type SelectBaseProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & {
   className?: string;
   size?: SelectSize;
   error?: boolean;
   label?: string;
   helperText?: string;
-  options?: SelectOption[];
-  children?: ReactNode;
   fullWidth?: boolean;
-}
+};
+
+export type SelectProps =
+  | (SelectBaseProps & { options: SelectOption[]; children?: never })
+  | (SelectBaseProps & { options?: never; children?: ReactNode });

package/src/components/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,61 @@
+import { render } from '@testing-library/react';
+
+import { Skeleton } from './Skeleton.tsx';
+
+describe('Skeleton', () => {
+  it('renders a div', () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+
+  it('is aria-hidden by default', () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstChild).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('allows overriding aria-hidden', () => {
+    const { container } = render(<Skeleton aria-hidden={false} />);
+    expect(container.firstChild).toHaveAttribute('aria-hidden', 'false');
+  });
+
+  it('applies rectangular variant class by default', () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstChild).toHaveClass('rectangular');
+  });
+
+  it('applies circular variant class', () => {
+    const { container } = render(<Skeleton variant="circular" />);
+    expect(container.firstChild).toHaveClass('circular');
+  });
+
+  it('applies text variant class', () => {
+    const { container } = render(<Skeleton variant="text" />);
+    expect(container.firstChild).toHaveClass('text');
+  });
+
+  it('applies pulse animation class by default', () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstChild).toHaveClass('pulse');
+  });
+
+  it('applies wave animation class', () => {
+    const { container } = render(<Skeleton animation="wave" />);
+    expect(container.firstChild).toHaveClass('wave');
+  });
+
+  it('applies no animation class when animation="none"', () => {
+    const { container } = render(<Skeleton animation="none" />);
+    expect(container.firstChild).not.toHaveClass('pulse');
+    expect(container.firstChild).not.toHaveClass('wave');
+  });
+
+  it('applies custom width as inline style', () => {
+    const { container } = render(<Skeleton width="200px" />);
+    expect((container.firstChild as HTMLElement).style.width).toBe('200px');
+  });
+
+  it('applies custom height as inline style', () => {
+    const { container } = render(<Skeleton height="40px" />);
+    expect((container.firstChild as HTMLElement).style.height).toBe('40px');
+  });
+});

package/src/components/Slider/Slider.test.tsx

@@ -46,4 +46,27 @@ describe('Slider', () => {
     render(<Slider defaultValue={[20, 80]} />);
     expect(screen.getAllByRole('slider')).toHaveLength(2);
   });
+
+  it('renders a number input when showInputs is true', () => {
+    render(<Slider showInputs />);
+    expect(screen.getByRole('spinbutton')).toBeInTheDocument();
+  });
+
+  it('renders two number inputs for dual range with showInputs', () => {
+    render(<Slider defaultValue={[20, 80]} showInputs />);
+    expect(screen.getAllByRole('spinbutton')).toHaveLength(2);
+  });
+
+  it('labels the dual range inputs correctly', () => {
+    render(<Slider defaultValue={[20, 80]} showInputs label="Price" />);
+    expect(screen.getByLabelText('Price minimum input')).toBeInTheDocument();
+    expect(screen.getByLabelText('Price maximum input')).toBeInTheDocument();
+  });
+
+  it('shows aria-valuetext on both range inputs when showValue is true', () => {
+    render(<Slider defaultValue={[10, 90]} showValue />);
+    const [start, end] = screen.getAllByRole('slider');
+    expect(start).toHaveAttribute('aria-valuetext', '10 - 90');
+    expect(end).toHaveAttribute('aria-valuetext', '10 - 90');
+  });
 });

package/src/components/Slider/Slider.tsx

@@ -1,5 +1,7 @@
 import classnames from 'classnames';
-import { useId, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
+
+import { useComponentId } from '../../hooks/useComponentId.ts';
 
 import { Input } from '../Input/Input.tsx';
 import styles from './Slider.module.css';
@@ -59,8 +61,7 @@ export const Slider = ({
   onValueChange,
   ...props
 }: SliderProps) => {
-  const baseId = useId();
-  const componentId = id ?? `ds-slider-${baseId}`;
+  const componentId = useComponentId('slider', id);
   const helperId = helperText ? `${componentId}-help` : undefined;
   const min = toNumber(props.min as number | string | undefined, 0);
   const max = toNumber(props.max as number | string | undefined, 100);
@@ -75,6 +76,17 @@ export const Slider = ({
   const [internalPair, setInternalPair] = useState<[number, number]>(initialPair);
   const resolvedPair = value != null ? normalizeToPair(value, min, max) : internalPair;
   const [startValue, endValue] = resolvedPair;
+
+  const [startInputValue, setStartInputValue] = useState(String(startValue));
+  const [endInputValue, setEndInputValue] = useState(String(endValue));
+
+  useEffect(() => {
+    setStartInputValue(String(startValue));
+  }, [startValue]);
+
+  useEffect(() => {
+    setEndInputValue(String(endValue));
+  }, [endValue]);
   const showValueText = isDual ? `${startValue} - ${endValue}` : String(startValue);
   const rangeSpan = Math.max(max - min, 1);
   const leftPercent = ((startValue - min) / rangeSpan) * 100;
@@ -164,6 +176,7 @@ export const Slider = ({
             className={classnames(styles.inputRoot, styles.inputEnd)}
             aria-describedby={helperId}
             aria-label={label ? `${label} maximum` : 'Slider maximum'}
+            aria-valuetext={showValue ? showValueText : undefined}
             {...props}
             min={min}
             max={max}
@@ -179,11 +192,11 @@ export const Slider = ({
       {showInputs && (
         <div className={classnames(styles.inputsRow, !isDual && styles.singleInputRow)}>
           <Input
-            key={`slider-start-${startValue}-${endValue}`}
             type="number"
             inputMode="decimal"
             size={size}
-            defaultValue={startValue}
+            value={startInputValue}
+            onChange={(event) => setStartInputValue(event.target.value)}
             min={min}
             max={isDual ? endValue : max}
             step={step}
@@ -203,11 +216,11 @@ export const Slider = ({
           {isDual && <span className={styles.separator}>-</span>}
           {isDual && (
             <Input
-              key={`slider-end-${startValue}-${endValue}`}
               type="number"
               inputMode="decimal"
               size={size}
-              defaultValue={endValue}
+              value={endInputValue}
+              onChange={(event) => setEndInputValue(event.target.value)}
               min={startValue}
               max={max}
               step={step}

package/src/components/Stepper/Stepper.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { useId } from 'react';
+import { useComponentId } from '../../hooks/useComponentId.ts';
 
 import { Step } from './Step.tsx';
 import styles from './Stepper.module.css';
@@ -17,8 +17,7 @@ export const Stepper = ({
   id,
   ...props
 }: StepperProps) => {
-  const baseId = useId();
-  const componentId = id ?? `ds-stepper-${baseId}`;
+  const componentId = useComponentId('stepper', id);
   const currentIndex = resolveCurrentIndex(currentStep, steps);
   const listLabel = ariaLabel ?? 'Progress';
 

package/src/components/Switch/Switch.tsx

@@ -1,12 +1,11 @@
 import classnames from 'classnames';
-import { useId } from 'react';
+import { useComponentId } from '../../hooks/useComponentId.ts';
 
 import styles from './Switch.module.css';
 import type { SwitchProps } from './Switch.types.ts';
 
 export const Switch = ({ label, helperText, className, disabled, id, ...props }: SwitchProps) => {
-  const baseId = useId();
-  const componentId = id ?? `ds-switch-${baseId}`;
+  const componentId = useComponentId('switch', id);
   const helperId = helperText ? `${componentId}-help` : undefined;
 
   return (

package/src/components/Table/Table.module.css

@@ -72,6 +72,14 @@
   text-align: justify;
 }
 
+.caption {
+  caption-side: top;
+  padding: var(--ds-space-3) var(--ds-space-4);
+  font-size: var(--ds-font-size-sm);
+  color: var(--ds-text-2);
+  text-align: left;
+}
+
 .loading {
   opacity: 0.7;
   pointer-events: none;

package/src/components/Table/Table.test.tsx

@@ -63,6 +63,24 @@ describe('Table', () => {
     expect(screen.getByRole('table')).not.toHaveAttribute('aria-busy');
   });
 
+  it('renders a caption when provided', () => {
+    render(
+      <Table caption="User list">
+        <TableBody>
+          <TableRow>
+            <TableCell>Alice</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+    expect(screen.getByText('User list')).toBeInTheDocument();
+  });
+
+  it('does not render a caption element when caption is omitted', () => {
+    render(<BasicTable />);
+    expect(document.querySelector('caption')).not.toBeInTheDocument();
+  });
+
   it('renders a footer', () => {
     render(
       <Table>

package/src/components/Table/Table.tsx

@@ -18,6 +18,7 @@ export const Table = ({
   hoverable,
   dense,
   isLoading,
+  caption,
   ...props
 }: TableProps) => {
   return (
@@ -32,6 +33,7 @@ export const Table = ({
         aria-busy={isLoading || undefined}
         {...props}
       >
+        {caption && <caption className={styles.caption}>{caption}</caption>}
         {children}
       </table>
     </div>

package/src/components/Table/Table.types.ts

@@ -11,6 +11,7 @@ export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
   hoverable?: boolean;
   dense?: boolean;
   isLoading?: boolean;
+  caption?: string;
 }
 
 export type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;

package/src/components/Tabs/Tabs.tsx

@@ -1,5 +1,7 @@
 import classnames from 'classnames';
-import { useId, useState, useRef, type KeyboardEvent } from 'react';
+import { useState, useRef, type KeyboardEvent } from 'react';
+
+import { useComponentId } from '../../hooks/useComponentId.ts';
 
 import styles from './Tabs.module.css';
 import type { TabsProps } from './Tabs.types.ts';
@@ -13,8 +15,7 @@ export const Tabs = ({
   variant = 'line',
   id,
 }: TabsProps) => {
-  const baseId = useId();
-  const componentId = id ?? `ds-tabs-${baseId}`;
+  const componentId = useComponentId('tabs', id);
   const [uncontrolledActiveId, setUncontrolledActiveId] = useState(
     defaultActiveId || (items.length > 0 ? items[0].id : '')
   );

package/src/components/Text/Text.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from '@testing-library/react';
+
+import { Text } from './Text.tsx';
+
+describe('Text', () => {
+  it('renders children', () => {
+    render(<Text>Hello</Text>);
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+
+  it('renders as a <p> by default (body-md variant)', () => {
+    const { container } = render(<Text>Content</Text>);
+    expect(container.querySelector('p')).toBeInTheDocument();
+  });
+
+  it('renders as h1 for variant="h1"', () => {
+    render(<Text variant="h1">Title</Text>);
+    expect(screen.getByRole('heading', { level: 1, name: 'Title' })).toBeInTheDocument();
+  });
+
+  it('renders as h2 for variant="h2"', () => {
+    render(<Text variant="h2">Subtitle</Text>);
+    expect(screen.getByRole('heading', { level: 2, name: 'Subtitle' })).toBeInTheDocument();
+  });
+
+  it('renders as code element for variant="code"', () => {
+    const { container } = render(<Text variant="code">const x = 1</Text>);
+    expect(container.querySelector('code')).toBeInTheDocument();
+  });
+
+  it('renders as a custom element via as prop', () => {
+    const { container } = render(<Text as="span">Span text</Text>);
+    expect(container.querySelector('span')).toBeInTheDocument();
+  });
+
+  it('applies numeric padding as a CSS class', () => {
+    const { container } = render(<Text padding={4}>Text</Text>);
+    expect(container.firstChild).toHaveClass('p-4');
+  });
+
+  it('applies string padding as inline style', () => {
+    const { container } = render(<Text padding="1.5rem">Text</Text>);
+    expect((container.firstChild as HTMLElement).style.padding).toBe('1.5rem');
+  });
+
+  it('applies numeric margin as a CSS class', () => {
+    const { container } = render(<Text margin={2}>Text</Text>);
+    expect(container.firstChild).toHaveClass('margin-2');
+  });
+
+  it('applies noWrap class when noWrap is true', () => {
+    const { container } = render(<Text noWrap>Text</Text>);
+    expect(container.firstChild).toHaveClass('noWrap');
+  });
+
+  it('forwards className', () => {
+    const { container } = render(<Text className="custom">Text</Text>);
+    expect(container.firstChild).toHaveClass('custom');
+  });
+});

package/src/components/Text/Text.tsx

@@ -1,6 +1,7 @@
 import classnames from 'classnames';
-import type { ElementType } from 'react';
+import type { CSSProperties, ElementType } from 'react';
 
+import { getSpacingStyles } from '../Box/helpers/getSpacingStyles.ts';
 import styles from './Text.module.css';
 import type { TextProps, TextVariant } from './Text.types.ts';
 
@@ -27,6 +28,7 @@ export const Text = ({
   color,
   noWrap,
   className,
+  style,
   padding,
   paddingX,
   paddingY,
@@ -45,6 +47,30 @@ export const Text = ({
 }: TextProps) => {
   const Component = as || variantElementMap[variant] || 'span';
 
+  const spacingStyles: CSSProperties = {
+    ...style,
+    ...getSpacingStyles(
+      'padding',
+      padding,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight
+    ),
+    ...getSpacingStyles(
+      'margin',
+      margin,
+      marginX,
+      marginY,
+      marginTop,
+      marginBottom,
+      marginLeft,
+      marginRight
+    ),
+  };
+
   return (
     <Component
       className={classnames(
@@ -54,22 +80,23 @@ export const Text = ({
         weight && styles[weight],
         color && styles[`color-${color}`],
         noWrap && styles.noWrap,
-        padding !== undefined && styles[`p-${padding}`],
-        paddingX !== undefined && styles[`px-${paddingX}`],
-        paddingY !== undefined && styles[`py-${paddingY}`],
-        paddingTop !== undefined && styles[`pt-${paddingTop}`],
-        paddingBottom !== undefined && styles[`pb-${paddingBottom}`],
-        paddingLeft !== undefined && styles[`pl-${paddingLeft}`],
-        paddingRight !== undefined && styles[`pr-${paddingRight}`],
-        margin !== undefined && styles[`margin-${margin}`],
-        marginX !== undefined && styles[`marginX-${marginX}`],
-        marginY !== undefined && styles[`marginY-${marginY}`],
-        marginTop !== undefined && styles[`marginTop-${marginTop}`],
-        marginBottom !== undefined && styles[`marginBottom-${marginBottom}`],
-        marginLeft !== undefined && styles[`marginLeft-${marginLeft}`],
-        marginRight !== undefined && styles[`marginRight-${marginRight}`],
+        typeof padding === 'number' && styles[`p-${padding}`],
+        typeof paddingX === 'number' && styles[`px-${paddingX}`],
+        typeof paddingY === 'number' && styles[`py-${paddingY}`],
+        typeof paddingTop === 'number' && styles[`pt-${paddingTop}`],
+        typeof paddingBottom === 'number' && styles[`pb-${paddingBottom}`],
+        typeof paddingLeft === 'number' && styles[`pl-${paddingLeft}`],
+        typeof paddingRight === 'number' && styles[`pr-${paddingRight}`],
+        typeof margin === 'number' && styles[`margin-${margin}`],
+        typeof marginX === 'number' && styles[`marginX-${marginX}`],
+        typeof marginY === 'number' && styles[`marginY-${marginY}`],
+        typeof marginTop === 'number' && styles[`marginTop-${marginTop}`],
+        typeof marginBottom === 'number' && styles[`marginBottom-${marginBottom}`],
+        typeof marginLeft === 'number' && styles[`marginLeft-${marginLeft}`],
+        typeof marginRight === 'number' && styles[`marginRight-${marginRight}`],
         className
       )}
+      style={spacingStyles}
       {...props}
     >
       {children}

package/src/components/Text/Text.types.ts

@@ -1,7 +1,8 @@
 import type { ReactNode, ElementType, HTMLAttributes } from 'react';
 
-export type BoxPadding = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 14;
-export type BoxMargin = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 14;
+import type { BoxPadding, BoxMargin } from '../Box/Box.types.ts';
+
+export type { BoxPadding, BoxMargin };
 
 export type TextVariant =
   | 'h1'

package/src/components/Textarea/Textarea.tsx

@@ -1,5 +1,5 @@
 import classnames from 'classnames';
-import { useId } from 'react';
+import { useComponentId } from '../../hooks/useComponentId.ts';
 
 import styles from './Textarea.module.css';
 import type { TextareaProps } from './Textarea.types.ts';
@@ -15,8 +15,7 @@ export const Textarea = ({
   rows = 4,
   ...props
 }: TextareaProps) => {
-  const baseId = useId();
-  const componentId = id ?? `ds-textarea-${baseId}`;
+  const componentId = useComponentId('textarea', id);
   const helperId = helperText ? `${componentId}-help` : undefined;
 
   return (

package/src/components/Tooltip/Tooltip.tsx

@@ -2,13 +2,13 @@ import classnames from 'classnames';
 import {
   useState,
   useRef,
-  useId,
   isValidElement,
   cloneElement,
   type KeyboardEvent,
   type ReactElement,
 } from 'react';
 
+import { useComponentId } from '../../hooks/useComponentId.ts';
 import styles from './Tooltip.module.css';
 import type { TooltipProps } from './Tooltip.types.ts';
 
@@ -23,8 +23,7 @@ export const Tooltip = ({
 }: TooltipProps) => {
   const [isVisible, setIsVisible] = useState(false);
   const timeoutRef = useRef<number | null>(null);
-  const baseId = useId();
-  const componentId = id ?? `ds-tooltip-${baseId}`;
+  const componentId = useComponentId('tooltip', id);
   const tooltipId = `${componentId}-content`;
 
   const showTooltip = () => {

package/src/components/Tree/Tree.test.tsx

@@ -113,4 +113,43 @@ describe('Tree', () => {
     render(<Tree data={{ val: null }} />);
     expect(screen.getByText('null')).toBeInTheDocument();
   });
+
+  it('moves focus to first item with Home key', async () => {
+    render(<Tree data={objectData} />);
+    const items = screen.getAllByRole('treeitem');
+    items[2].tabIndex = 0;
+    items[2].focus();
+    await userEvent.keyboard('{Home}');
+    expect(document.activeElement).toBe(items[0]);
+  });
+
+  it('moves focus to last item with End key', async () => {
+    render(<Tree data={objectData} />);
+    const items = screen.getAllByRole('treeitem');
+    items[0].focus();
+    await userEvent.keyboard('{End}');
+    expect(document.activeElement).toBe(items[items.length - 1]);
+  });
+
+  it('sets aria-setsize and aria-posinset on top-level items', () => {
+    render(<Tree data={objectData} />);
+    const items = screen.getAllByRole('treeitem');
+    const topLevel = items.filter((el) => el.getAttribute('aria-level') === '1');
+    topLevel.forEach((item, i) => {
+      expect(item).toHaveAttribute('aria-setsize', String(topLevel.length));
+      expect(item).toHaveAttribute('aria-posinset', String(i + 1));
+    });
+  });
+
+  it('sets aria-level="2" on nested items when expanded', async () => {
+    render(<Tree data={objectData} />);
+    const addressItem = screen
+      .getAllByRole('treeitem')
+      .find((el) => el.textContent?.includes('address'))!;
+    await userEvent.click(addressItem);
+    const nested = screen
+      .getAllByRole('treeitem')
+      .filter((el) => el.getAttribute('aria-level') === '2');
+    expect(nested.length).toBeGreaterThan(0);
+  });
 });

package/src/hooks/useComponentId.ts

@@ -0,0 +1,10 @@
+import { useId } from 'react';
+
+/**
+ * Generates a stable, unique component ID.
+ * Returns the provided id if given, otherwise creates one prefixed with `ds-{prefix}-`.
+ */
+export const useComponentId = (prefix: string, id?: string): string => {
+  const baseId = useId();
+  return id ?? `ds-${prefix}-${baseId}`;
+};