Sort Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

import type { ButtonHTMLAttributes } from "react";

/* DevSnips React — SortButton
 * Sets sort field + direction. Click cycles direction (desc→asc→none→desc).
 * Active sort shown via field label + rotated chevron, not color alone.
 */

export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
export type SortVariant = "outline" | "secondary" | "ghost";
export type SortDirection = "asc" | "desc" | null;

export interface SortButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
  field?: string;
  direction?: SortDirection;
  variant?: SortVariant;
  size?: ButtonSize;
  onToggle?: () => void;
}

function cx(...parts: Array<string | false | null | undefined>): string {
  return parts.filter(Boolean).join(" ");
}

const SIZES: Record<ButtonSize, string> = {
  xs: "h-7 gap-1 px-2 text-xs [&_svg]:size-[14px]",
  sm: "h-8 gap-1.5 px-3 text-xs [&_svg]:size-[14px]",
  md: "h-9 gap-2 px-3.5 text-[13px] [&_svg]:size-4",
  lg: "h-10 gap-2 px-4 text-[13px] [&_svg]:size-[18px]",
  xl: "h-11 gap-2 px-5 text-sm [&_svg]:size-5",
};

const VARIANTS: Record<SortVariant, string> = {
  outline: "border-[var(--ds-color-border-strong)] bg-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)] active:bg-[var(--ds-color-surface-active)]",
  secondary: "border-[var(--ds-color-border)] bg-[var(--ds-color-secondary)] text-[var(--ds-color-secondary-foreground)] hover:bg-[var(--ds-color-surface-active)] active:bg-[var(--ds-color-surface-active)]",
  ghost: "border-transparent bg-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)] active:bg-[var(--ds-color-surface-active)]",
};

export function SortButton({
  field = "Created",
  direction = "desc",
  variant = "outline",
  size = "sm",
  onToggle,
  className,
  type = "button",
  ...rest
}: SortButtonProps) {
  const active = direction !== null;
  const dirLabel = direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "unsorted";
  return (
    <button
      type={type}
      aria-label={`Sort by ${field}, currently ${dirLabel}`}
      className={cx(
        "inline-flex select-none items-center justify-center whitespace-nowrap rounded-[var(--ds-radius-sm)] border font-medium leading-none transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)] disabled:pointer-events-none disabled:opacity-50",
        VARIANTS[variant],
        active && "bg-[var(--ds-color-surface-active)] font-semibold",
        SIZES[size],
        className,
      )}
      onClick={onToggle}
      {...rest}
    >
      <svg className="h-[1em] w-[1em] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M11 5h10" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
        <path d="M11 9h7" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
        <path d="M11 13h4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
        <path d="m3 17 3 3 3-3" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M6 18V4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
      </svg>
      <span>{field}</span>
      <svg
        className={cx("h-[1em] w-[1em] shrink-0 transition-transform duration-150 ease-out motion-reduce:transition-none", direction === "asc" ? "rotate-180" : "rotate-0", !active && "opacity-50")}
        viewBox="0 0 24 24" fill="none" aria-hidden="true"
      >
        <path d="m6 9 6 6 6-6" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </button>
  );
}

export default SortButton;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

/* DevSnips React — JavaScript parity build.
 * Same API, behavior, and classes as code.tsx; TypeScript types removed.
 * Regenerated from code.tsx — edit code.tsx and re-run the generator.
 */

function cx(...parts) {
  return parts.filter(Boolean).join(" ");
}
const SIZES = {
  xs: "h-7 gap-1 px-2 text-xs [&_svg]:size-[14px]",
  sm: "h-8 gap-1.5 px-3 text-xs [&_svg]:size-[14px]",
  md: "h-9 gap-2 px-3.5 text-[13px] [&_svg]:size-4",
  lg: "h-10 gap-2 px-4 text-[13px] [&_svg]:size-[18px]",
  xl: "h-11 gap-2 px-5 text-sm [&_svg]:size-5"
};
const VARIANTS = {
  outline: "border-[var(--ds-color-border-strong)] bg-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)] active:bg-[var(--ds-color-surface-active)]",
  secondary: "border-[var(--ds-color-border)] bg-[var(--ds-color-secondary)] text-[var(--ds-color-secondary-foreground)] hover:bg-[var(--ds-color-surface-active)] active:bg-[var(--ds-color-surface-active)]",
  ghost: "border-transparent bg-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)] active:bg-[var(--ds-color-surface-active)]"
};
export function SortButton({
  field = "Created",
  direction = "desc",
  variant = "outline",
  size = "sm",
  onToggle,
  className,
  type = "button",
  ...rest
}) {
  const active = direction !== null;
  const dirLabel = direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "unsorted";
  return <button
    type={type}
    aria-label={`Sort by ${field}, currently ${dirLabel}`}
    className={cx(
      "inline-flex select-none items-center justify-center whitespace-nowrap rounded-[var(--ds-radius-sm)] border font-medium leading-none transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)] disabled:pointer-events-none disabled:opacity-50",
      VARIANTS[variant],
      active && "bg-[var(--ds-color-surface-active)] font-semibold",
      SIZES[size],
      className
    )}
    onClick={onToggle}
    {...rest}
  >
      <svg className="h-[1em] w-[1em] shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M11 5h10" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
        <path d="M11 9h7" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
        <path d="M11 13h4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
        <path d="m3 17 3 3 3-3" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
        <path d="M6 18V4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" />
      </svg>
      <span>{field}</span>
      <svg
    className={cx("h-[1em] w-[1em] shrink-0 transition-transform duration-150 ease-out motion-reduce:transition-none", direction === "asc" ? "rotate-180" : "rotate-0", !active && "opacity-50")}
    viewBox="0 0 24 24"
    fill="none"
    aria-hidden="true"
  >
        <path d="m6 9 6 6 6-6" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </button>;
}

export default SortButton;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# Sort Button

Sets the sort field and direction. Clicking toggles direction (desc → asc → none → desc). The active sort is shown via the field label + a rotated chevron, not color alone. `aria-label` conveys the current state.

## Installation

This component requires **React** and **Tailwind CSS**. Drop `code.tsx` (or `code.jsx` for JavaScript projects) into your project. Tailwind utility classes are included directly in the component, so no separate CSS file is required.

The component consumes the DevSnips semantic design tokens through Tailwind arbitrary values (for example `bg-[var(--ds-color-primary)]`). Define the `--ds-*` tokens once in your theme — see [React/DESIGN_TOKENS.md](../../../DESIGN_TOKENS.md) for the full token spec.

## Usage

```tsx
<SortButton field="Created" direction={dir} onToggle={cycle} />
```

## JavaScript

A `code.jsx` build is provided for projects that ship plain JSX. It exposes the same API and behavior as `code.tsx` — only the TypeScript types are removed.

## Props

| Prop | Type | Default |
|---|---|---|
| `field` | `string` | `"Created"` |
| `direction` | `asc \| desc \| null` | `desc` |
| `variant` | `outline \| secondary \| ghost` | `outline` |
| `size` | `ButtonSize` | `sm` |
| `onToggle` | `() => void` | — (cycle direction on click) |

Plus all native `ButtonHTMLAttributes<HTMLButtonElement>`.

## Variants

outline (default) · secondary · ghost.

## Sizes

xs (28px) · sm (32px) · **md (36px, default)** · lg (40px) · xl (44px). Horizontal padding scales 8 → 20px; icons scale 14 → 20px. Default is `sm` for table toolbars.

## States

default · hover · focus-visible · active-sort (`surface-active`, chevron rotated by direction) · disabled (reduced opacity).

## Accessibility

Renders a native `<button>`. Focus-visible ring uses `color.focus-ring`. Loading sets `aria-busy` and disables to prevent double-submit. Disabled never removes the affordance (reduced opacity, not hidden). Meets the 44px touch target at lg/xl. `aria-label` conveys the field and current direction ("Sort by Created, currently descending"). Direction is shown by chevron rotation + opacity, not color alone.

## Styling

Tailwind classes are included directly in the component and consume the DevSnips semantic design tokens (`--ds-*`) via arbitrary values. The button themes with the surface automatically in light and dark mode. No component-specific CSS file is needed.

## Design Tokens

See [React/DESIGN_TOKENS.md](../../../DESIGN_TOKENS.md) for the authoritative token specification. This button uses the semantic color, radius, and motion tokens; define them once in your project theme and every button in the family stays in sync.

## Notes

Cycle on click: desc → asc → none → desc. When `direction` is null, show no chevron emphasis.