@slipstream-ui/core 0.3.0 → 0.4.0

package/src/components/autocomplete/Autocomplete.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import { describe, expect, it, vi } from 'vitest';
 import { Autocomplete } from './Autocomplete';
@@ -75,3 +76,55 @@ describe('Autocomplete', () => {
     expect(await axe(container)).toHaveNoViolations();
   });
 });
+
+
+describe('Autocomplete options, groups, async and clear', () => {
+  it('renders grouped headings and descriptions', async () => {
+    const user = userEvent.setup();
+    render(
+      <Autocomplete
+        aria-label="Search"
+        options={[
+          { value: 'ada', label: 'Ada Lovelace', group: 'People', description: 'Mathematician' },
+          { value: 'alan', label: 'Alan Turing', group: 'People' },
+          { value: 'rust', label: 'Rust', group: 'Languages' },
+        ]}
+      />
+    );
+    await user.click(screen.getByRole('combobox', { name: 'Search' }));
+    expect(screen.getByText('People')).toBeInTheDocument();
+    expect(screen.getByText('Languages')).toBeInTheDocument();
+    expect(screen.getByText('Mathematician')).toBeInTheDocument();
+  });
+
+  it('uses a custom row renderer', async () => {
+    const user = userEvent.setup();
+    render(
+      <Autocomplete
+        aria-label="Search"
+        options={[{ value: 'x', label: 'Custom row' }]}
+        renderOption={(option) => <span>★ {option.label}</span>}
+      />
+    );
+    await user.click(screen.getByRole('combobox', { name: 'Search' }));
+    expect(screen.getByText('★ Custom row')).toBeInTheDocument();
+  });
+
+  it('loads options asynchronously with a loading row', async () => {
+    const user = userEvent.setup();
+    const loadOptions = vi.fn(async () => [{ value: 'remote', label: 'Remote result' }]);
+    render(<Autocomplete aria-label="Search" loadOptions={loadOptions} debounceMs={1} />);
+    await user.click(screen.getByRole('combobox', { name: 'Search' }));
+    expect(await screen.findByText('Remote result')).toBeInTheDocument();
+    expect(loadOptions).toHaveBeenCalled();
+  });
+
+  it('clears the field with the clear button', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<Autocomplete aria-label="Search" clearable defaultValue="draft" onValueChange={onValueChange} />);
+    await user.click(screen.getByRole('button', { name: 'Clear input' }));
+    expect(onValueChange).toHaveBeenCalledWith('');
+    expect(screen.getByRole('combobox', { name: 'Search' })).toHaveValue('');
+  });
+});

package/src/components/autocomplete/Autocomplete.tsx

@@ -6,6 +6,16 @@ import { cn } from '../../utils/cn';
 import { Input } from '../input/Input';
 import { useCombobox } from '../search/use-combobox';
 
+export type AutocompleteOption = {
+  value: string;
+  /** Display label; defaults to the value. */
+  label?: string;
+  /** Section heading the option renders under. */
+  group?: string;
+  /** Muted supporting line under the label. */
+  description?: string;
+};
+
 export type AutocompleteProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   'value' | 'defaultValue' | 'onChange' | 'children' | 'size'
@@ -14,28 +24,56 @@ export type AutocompleteProps = Omit<
   value?: string;
   /** Initial text when uncontrolled. */
   defaultValue?: string;
-  /** Fires on every keystroke AND on suggestion selection (like a native input's onChange). */
+  /** Fires on every keystroke AND on suggestion selection. */
   onValueChange?: (value: string) => void;
-  /** Suggestion labels offered while typing; any value may still be entered free-form. */
-  suggestions: string[];
-  /** Shown when no suggestion matches (optional). */
+  /** Static suggestions (strings or option objects). */
+  options?: Array<string | AutocompleteOption>;
+  /** @deprecated Use `options`. */
+  suggestions?: string[];
+  /** Async source; called with the current query (debounced) when provided. */
+  loadOptions?: (query: string) => Promise<Array<string | AutocompleteOption>>;
+  /** Custom row rendering (receives the normalized option). */
+  renderOption?: (option: NormalizedOption, state: { active: boolean }) => React.ReactNode;
+  /** Show a clear button once there is text. */
+  clearable?: boolean;
+  /** Shown when no option matches. */
   emptyText?: string;
+  /** Shown while async options load. */
+  loadingText?: string;
+  /** Debounce for `loadOptions`, in ms. Default 200. */
+  debounceMs?: number;
+};
+
+type NormalizedOption = {
+  value: string;
+  label: string;
+  group?: string;
+  description?: string;
 };
 
+function normalize(entry: string | AutocompleteOption): NormalizedOption {
+  if (typeof entry === 'string') return { value: entry, label: entry };
+  return { value: entry.value, label: entry.label ?? entry.value, group: entry.group, description: entry.description };
+}
+
 /**
  * Type-ahead input following the HTML autocomplete model: users may enter
- * any value (free text is first-class), while matching suggestions appear
- * in a listbox — Arrow keys highlight, Enter accepts, Escape dismisses.
- * The native `autoComplete` attribute passes through (form autofill hints
- * keep working alongside the custom listbox). The listbox portals with
- * fixed positioning so scrollable containers never clip it.
+ * any value (free text is first-class), while matching options appear in a
+ * portalled listbox (grouped, optional async loading, custom rows).
+ * Arrow keys highlight, Enter accepts, Escape dismisses.
  */
 export function Autocomplete({
   value,
   defaultValue = '',
   onValueChange,
+  options,
   suggestions,
+  loadOptions,
+  renderOption,
+  clearable = false,
   emptyText,
+  loadingText,
+  debounceMs = 200,
   placeholder,
   id,
   name,
@@ -47,31 +85,71 @@ export function Autocomplete({
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const current = value ?? internalValue;
 
+  const [asyncOptions, setAsyncOptions] = React.useState<NormalizedOption[]>([]);
+  const [loading, setLoading] = React.useState(false);
+  const requestId = React.useRef(0);
+
+  const source = React.useMemo<NormalizedOption[]>(() => {
+    const list = options ?? (suggestions ?? []).map(normalize);
+    return list.map(normalize);
+  }, [options, suggestions]);
+
+  // Debounced async source. Guarded by a request id so stale responses
+  // never overwrite newer ones.
+  React.useEffect(() => {
+    if (!loadOptions) return;
+    const id = ++requestId.current;
+    setLoading(true);
+    const timer = setTimeout(async () => {
+      try {
+        const result = await loadOptions(current);
+        if (requestId.current === id) setAsyncOptions(result.map(normalize));
+      } catch {
+        if (requestId.current === id) setAsyncOptions([]);
+      } finally {
+        if (requestId.current === id) setLoading(false);
+      }
+    }, debounceMs);
+    return () => clearTimeout(timer);
+  }, [loadOptions, current, debounceMs]);
+
+  const pool = loadOptions ? asyncOptions : source;
+
   const items = React.useMemo(() => {
     const q = current.trim().toLowerCase();
-    const list = q
-      ? suggestions.filter((suggestion) => suggestion.toLowerCase().includes(q))
-      : suggestions;
-    // Never offer the exact current value back as a suggestion.
-    return list
-      .filter((suggestion) => suggestion !== current)
-      .map((suggestion) => ({ value: suggestion, label: suggestion }));
-  }, [suggestions, current]);
+    return pool
+      .filter((option) => !q || option.label.toLowerCase().includes(q) || option.value.toLowerCase().includes(q))
+      .filter((option) => option.value !== current);
+  }, [pool, current]);
 
   const combobox = useCombobox({
-    items,
+    items: items.map((item) => ({ value: item.value, label: item.label })),
     onSelect: (item) => {
       if (value === undefined) setInternalValue(item.label);
       onValueChange?.(item.label);
     },
   });
 
-  const select = (label: string) => {
-    if (value === undefined) setInternalValue(label);
-    onValueChange?.(label);
+  const select = (option: NormalizedOption) => {
+    if (value === undefined) setInternalValue(option.label);
+    onValueChange?.(option.label);
     combobox.setOpen(false);
   };
 
+  // Render order with group headings derived from the option stream.
+  const grouped = React.useMemo(() => {
+    const out: Array<{ heading?: string; option?: NormalizedOption; index: number }> = [];
+    let lastGroup: string | undefined;
+    items.forEach((option, index) => {
+      if (option.group && option.group !== lastGroup) {
+        out.push({ heading: option.group, index: -1 });
+        lastGroup = option.group;
+      }
+      out.push({ option, index });
+    });
+    return out;
+  }, [items]);
+
   return (
     <div ref={combobox.anchorRef} className={cn('relative w-full', className)}>
       <Input
@@ -80,6 +158,7 @@ export function Autocomplete({
         placeholder={placeholder}
         autoComplete="off"
         value={current}
+        className={clearable && current ? 'pr-9' : undefined}
         onChange={(event) => {
           if (value === undefined) setInternalValue(event.target.value);
           onValueChange?.(event.target.value);
@@ -96,12 +175,27 @@ export function Autocomplete({
         {...inputProps}
         {...combobox.inputProps}
       />
+      {clearable && current && (
+        <button
+          type="button"
+          onClick={() => {
+            if (value === undefined) setInternalValue('');
+            onValueChange?.('');
+            combobox.setOpen(true);
+          }}
+          aria-label="Clear input"
+          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          ✕
+        </button>
+      )}
       {combobox.ready &&
         createPortal(
           <ul
             id={combobox.listboxId}
             role="listbox"
             aria-label="Suggestions"
+            aria-busy={loading || undefined}
             style={{
               position: 'fixed',
               top: combobox.pos!.top,
@@ -111,30 +205,55 @@ export function Autocomplete({
             }}
             className="max-h-60 overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md"
           >
-            {items.length === 0 ? (
+            {loading && items.length === 0 ? (
+              <li role="presentation" className="px-3 py-2 text-sm text-muted-foreground">
+                {loadingText ?? 'Loading…'}
+              </li>
+            ) : items.length === 0 ? (
               <li role="presentation" className="px-3 py-2 text-sm text-muted-foreground">
                 {emptyText ?? 'No suggestions'}
               </li>
             ) : (
-              items.map((item, index) => (
-                <li
-                  key={item.value}
-                  id={combobox.optionId(index)}
-                  role="option"
-                  aria-selected={combobox.activeIndex === index}
-                  onMouseDown={(event) => event.preventDefault()}
-                  onMouseEnter={() => combobox.setActiveIndex(index)}
-                  onClick={() => select(item.label)}
-                  className={cn(
-                    'cursor-pointer rounded-sm px-3 py-1.5 text-sm outline-none',
-                    combobox.activeIndex === index
-                      ? 'bg-accent text-accent-foreground'
-                      : 'hover:bg-accent/60'
-                  )}
-                >
-                  {item.label}
-                </li>
-              ))
+              grouped.map((entry, rowIndex) =>
+                entry.heading ? (
+                  <li
+                    key={`group-${entry.heading}-${rowIndex}`}
+                    role="presentation"
+                    className="px-3 pb-1 pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground"
+                  >
+                    {entry.heading}
+                  </li>
+                ) : (
+                  <li
+                    key={entry.option!.value}
+                    id={combobox.optionId(entry.index)}
+                    role="option"
+                    aria-selected={combobox.activeIndex === entry.index}
+                    onMouseDown={(event) => event.preventDefault()}
+                    onMouseEnter={() => combobox.setActiveIndex(entry.index)}
+                    onClick={() => select(entry.option!)}
+                    className={cn(
+                      'cursor-pointer rounded-sm px-3 py-1.5 text-sm outline-none',
+                      combobox.activeIndex === entry.index
+                        ? 'bg-accent text-accent-foreground'
+                        : 'hover:bg-accent/60'
+                    )}
+                  >
+                    {renderOption ? (
+                      renderOption(entry.option!, { active: combobox.activeIndex === entry.index })
+                    ) : (
+                      <>
+                        <span className="block">{entry.option!.label}</span>
+                        {entry.option!.description && (
+                          <span className="mt-0.5 block text-xs text-muted-foreground">
+                            {entry.option!.description}
+                          </span>
+                        )}
+                      </>
+                    )}
+                  </li>
+                )
+              )
             )}
           </ul>,
           document.body

package/src/components/badge/Badge.test.tsx

@@ -58,3 +58,17 @@ describe('Badge variants and sizing escape hatches', () => {
     expect(container.firstChild).toHaveClass('text-foreground', 'gap-1', 'px-3');
   });
 });
+
+
+describe('Badge asChild', () => {
+  it('renders a link with badge styling', () => {
+    render(
+      <Badge asChild>
+        <a href="/tags/react">React</a>
+      </Badge>
+    );
+    const link = screen.getByRole('link', { name: 'React' });
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveClass('inline-flex', 'bg-primary');
+  });
+});

package/src/components/badge/Badge.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../utils/cn';
 
@@ -19,12 +20,17 @@ const badgeVariants = cva(
   }
 );
 
-export type BadgeProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;
+export type BadgeProps = React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof badgeVariants> & {
+    /** Render the child element (e.g. a router Link) with badge styling. */
+    asChild?: boolean;
+  };
 
 const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
-  ({ className, variant, ...props }, ref) => (
-    <div ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  ({ className, variant, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div';
+    return <Comp ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />;
+  }
 );
 Badge.displayName = 'Badge';
 

package/src/components/button/Button.test.tsx

@@ -101,3 +101,32 @@ describe('Button semantic theme variants', () => {
     );
   });
 });
+
+describe('Button outline color variants', () => {
+  it('renders each colored outline with a semantic border and label', () => {
+    render(
+      <>
+        <Button variant="outline-destructive">Delete</Button>
+        <Button variant="outline-success">Approve</Button>
+        <Button variant="outline-warning">Careful</Button>
+        <Button variant="outline-info">Info</Button>
+      </>
+    );
+    const del = screen.getByRole('button', { name: 'Delete' });
+    expect(del).toHaveClass('border', 'border-destructive/50', 'text-destructive', 'bg-background');
+    expect(del.className).toContain('hover:bg-destructive/10');
+    expect(screen.getByRole('button', { name: 'Approve' })).toHaveClass('border-success/50', 'text-success');
+    expect(screen.getByRole('button', { name: 'Careful' })).toHaveClass('border-warning/50', 'text-warning');
+    expect(screen.getByRole('button', { name: 'Info' })).toHaveClass('border-info/50', 'text-info');
+  });
+
+  it('keeps colored outlines accessible as links via asChild', () => {
+    render(
+      <Button asChild variant="outline-success">
+        <a href="/ship">Ship</a>
+      </Button>
+    );
+    const link = screen.getByRole('link', { name: 'Ship' });
+    expect(link).toHaveClass('border-success/50', 'text-success');
+  });
+});

package/src/components/button/Button.tsx

@@ -16,6 +16,16 @@ const buttonVariants = cva(
         warning: 'bg-warning text-warning-foreground hover:bg-warning/90',
         info: 'bg-info text-info-foreground hover:bg-info/90',
         outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        // Colored outlines: semantic border + label on the page surface, with
+        // a faint tint on hover — mirrors the Alert variant recipe.
+        'outline-destructive':
+          'border border-destructive/50 bg-background text-destructive hover:border-destructive hover:bg-destructive/10',
+        'outline-success':
+          'border border-success/50 bg-background text-success hover:border-success hover:bg-success/10',
+        'outline-warning':
+          'border border-warning/50 bg-background text-warning hover:border-warning hover:bg-warning/10',
+        'outline-info':
+          'border border-info/50 bg-background text-info hover:border-info hover:bg-info/10',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',

package/src/components/button-group/ButtonGroup.test.tsx

@@ -15,13 +15,12 @@ describe('ButtonGroup', () => {
       </ButtonGroup>
     );
     const group = container.querySelector('[data-slot="button-group"]')!;
-    expect(group).toHaveClass('-space-x-px');
+    // The group owns the single outline and clips the outer radius.
+    expect(group).toHaveClass('overflow-hidden', 'rounded-md', 'border', 'border-border');
     expect(group.querySelectorAll('button')).toHaveLength(3);
-    // First/last keep outer corners; middles square off — the join rules
-    // live as descendant tokens on the group's class.
-    expect(group.className).toContain('[&>*:first-child]:rounded-l-md');
-    expect(group.className).toContain('[&>*:last-child]:rounded-r-md');
     expect(group.className).toContain('[&>*]:rounded-none');
+    expect(group.className).toContain('[&>*]:border-0');
+    expect(group).toHaveClass('divide-x', 'divide-border');
   });
 
   it('vertical orientation stacks with collapsed borders', () => {
@@ -32,9 +31,8 @@ describe('ButtonGroup', () => {
       </ButtonGroup>
     );
     const group = container.querySelector('[data-slot="button-group"]')!;
-    expect(group).toHaveClass('-space-y-px');
-    expect(group.className).toContain('[&>*:first-child]:rounded-t-md');
-    expect(group.className).toContain('[&>*:last-child]:rounded-b-md');
+    expect(group).toHaveClass('flex-col');
+    expect(group).toHaveClass('divide-y', 'divide-border');
   });
 
   it('exposes a group role and forwards aria-label', () => {

package/src/components/button-group/ButtonGroup.tsx

@@ -7,11 +7,16 @@ export type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 
 /**
- * Joins buttons into one segmented control: adjacent borders collapse
- * (negative spacing), middle corners square off, and only the outer
- * corners stay rounded — a single outline around the whole group.
- * Use border-bearing variants (default/outline/secondary); ghost
- * buttons have no border and would break the joined outline.
+ * Joins buttons into one segmented control.
+ *
+ * The group owns the outline: a single border, one outer radius (children
+ * are clipped by overflow-hidden), and 1px separators drawn between
+ * segments. Children lose their own borders and radii, so mixed variants
+ * (default/outline/secondary/ghost) still read as one instrument — a
+ * borderless variant no longer leaves the seam misaligned the way
+ * negative-margin border collapsing did.
+ *
+ * Focus rings render inset so they are never clipped at the edges.
  */
 const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
   ({ orientation = 'horizontal', className, ...props }, ref) => (
@@ -20,11 +25,14 @@ const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
       data-slot="button-group"
       role="group"
       className={cn(
-        'inline-flex',
+        'inline-flex overflow-hidden rounded-md border border-border bg-background',
+        '[&>*]:rounded-none [&>*]:border-0',
+        '[&>*:focus-visible]:ring-inset [&>*:focus-visible]:ring-offset-0',
+        // divide-* compiles to `.group > * ~ * { border-left/top }` — higher
+        // specificity than the lead-strip above, so seams stay exact.
         orientation === 'horizontal'
-          ? '-space-x-px [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md'
-          : '-space-y-px [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md',
-        '[&>*]:rounded-none [&>*]:focus-visible:relative [&>*]:focus-visible:z-10',
+          ? 'divide-x divide-border'
+          : 'flex-col divide-y divide-border',
         className
       )}
       {...props}

package/src/components/card/Card.test.tsx

@@ -44,3 +44,17 @@ describe('Card', () => {
     expect(await axe(container)).toHaveNoViolations();
   });
 });
+
+
+describe('Card asChild', () => {
+  it('renders the child element with card styling', () => {
+    render(
+      <Card asChild>
+        <a href="/post">Read post</a>
+      </Card>
+    );
+    const link = screen.getByRole('link', { name: 'Read post' });
+    expect(link.tagName).toBe('A');
+    expect(link).toHaveClass('rounded-xl', 'border-border', 'bg-card');
+  });
+});

package/src/components/card/Card.tsx

@@ -1,17 +1,24 @@
 import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
 import { cn } from '../../utils/cn';
 
-export type CardProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Render the child element (e.g. a router Link) with card styling. */
+  asChild?: boolean;
+};
 
 /** Content container with a subtle border and surface styling. */
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('rounded-xl border border-border bg-card text-card-foreground shadow-sm', className)}
-      {...props}
-    />
-  )
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div';
+    return (
+      <Comp
+        ref={ref}
+        className={cn('rounded-xl border border-border bg-card text-card-foreground shadow-sm', className)}
+        {...props}
+      />
+    );
+  }
 );
 Card.displayName = 'Card';
 

package/src/components/date-picker/DatePicker.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { describe, expect, it, vi } from 'vitest';
+import { DatePicker } from './DatePicker';
+
+describe('DatePicker', () => {
+  it('reports ISO value changes', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<DatePicker aria-label="Start date" onValueChange={onValueChange} />);
+    const input = screen.getByLabelText('Start date');
+    await user.type(input, '2026-11-03');
+    expect(onValueChange).toHaveBeenCalled();
+    expect(input).toHaveAttribute('type', 'date');
+  });
+
+  it('clears the value', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<DatePicker aria-label="Due" clearable defaultValue="2026-11-03" onValueChange={onValueChange} />);
+    await user.click(screen.getByRole('button', { name: 'Clear date' }));
+    expect(onValueChange).toHaveBeenCalledWith('');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<DatePicker aria-label="Date" />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/components/date-picker/DatePicker.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../utils/cn';
+import { Input, type InputProps } from '../input/Input';
+
+export type DatePickerProps = Omit<InputProps, 'type' | 'onChange' | 'value' | 'defaultValue'> & {
+  /** ISO date string (YYYY-MM-DD) — controlled. */
+  value?: string;
+  /** ISO date string — initial value when uncontrolled. */
+  defaultValue?: string;
+  /** Fired with the ISO string ('' when cleared). */
+  onValueChange?: (value: string) => void;
+  /** Show a clear button once a date is selected. */
+  clearable?: boolean;
+};
+
+/**
+ * Native date field with an ISO-string contract. Uses the platform picker
+ * (mobile date wheels, keyboard editing, locale formatting) rather than a
+ * custom calendar, so accessibility and input methods come for free.
+ */
+export const DatePicker = React.forwardRef<HTMLInputElement, DatePickerProps>(function DatePicker(
+  { value, defaultValue, onValueChange, clearable = false, className, ...props },
+  ref
+) {
+  const [internal, setInternal] = React.useState(defaultValue ?? '');
+  const current = value ?? internal;
+
+  const commit = (next: string) => {
+    if (value === undefined) setInternal(next);
+    onValueChange?.(next);
+  };
+
+  return (
+    <div className={cn('relative flex items-center', className)}>
+      <Input
+        ref={ref}
+        type="date"
+        value={current}
+        onChange={(event) => commit(event.target.value)}
+        className={clearable && current ? 'pr-9' : undefined}
+        {...props}
+      />
+      {clearable && current && (
+        <button
+          type="button"
+          onClick={() => commit('')}
+          aria-label="Clear date"
+          className="absolute right-2 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          ✕
+        </button>
+      )}
+    </div>
+  );
+});

package/src/components/date-picker/index.ts

@@ -0,0 +1 @@
+export * from './DatePicker';