@slipstream-ui/core 0.3.0 → 0.4.0

package/src/components/password-input/PasswordInput.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { describe, expect, it } from 'vitest';
+import { PasswordInput } from './PasswordInput';
+
+describe('PasswordInput', () => {
+  it('toggles visibility with an accessible pressed button', async () => {
+    const user = userEvent.setup();
+    render(<PasswordInput aria-label="Password" defaultValue="hunter2" />);
+    const input = screen.getByLabelText('Password');
+    expect(input).toHaveAttribute('type', 'password');
+    const toggle = screen.getByRole('button', { name: 'Show password' });
+    expect(toggle).toHaveAttribute('aria-pressed', 'false');
+    await user.click(toggle);
+    expect(input).toHaveAttribute('type', 'text');
+    expect(screen.getByRole('button', { name: 'Hide password' })).toHaveAttribute('aria-pressed', 'true');
+  });
+
+  it('supports custom toggle labels', () => {
+    render(<PasswordInput aria-label="Passphrase" showLabel="Reveal" hideLabel="Conceal" />);
+    expect(screen.getByRole('button', { name: 'Reveal' })).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<PasswordInput aria-label="Password" />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/components/password-input/PasswordInput.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../utils/cn';
+import { Button } from '../button/Button';
+import { Input, type InputProps } from '../input/Input';
+
+export type PasswordInputProps = Omit<InputProps, 'type'> & {
+  /** Accessible labels for the visibility toggle. */
+  showLabel?: string;
+  hideLabel?: string;
+};
+
+/**
+ * Password field with a show/hide toggle. The toggle is a real button with
+ * pressed state, so keyboard and screen-reader users can reveal the value
+ * without losing the focused field.
+ */
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(function PasswordInput(
+  { className, showLabel = 'Show password', hideLabel = 'Hide password', ...props },
+  ref
+) {
+  const [visible, setVisible] = React.useState(false);
+
+  return (
+    <div className={cn('relative flex items-center', className)}>
+      <Input ref={ref} type={visible ? 'text' : 'password'} className="pr-24" {...props} />
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        aria-pressed={visible}
+        aria-label={visible ? hideLabel : showLabel}
+        onClick={() => setVisible((current) => !current)}
+        className="absolute right-1 h-8 px-2 text-xs text-muted-foreground hover:text-foreground"
+      >
+        {visible ? 'Hide' : 'Show'}
+      </Button>
+    </div>
+  );
+});

package/src/components/password-input/index.ts

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

package/src/components/select/Select.test.tsx

@@ -29,7 +29,7 @@ describe('Select', () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
     function Controlled() {
-      const [value, setValue] = useState('default');
+      const [value, setValue] = useState<string | string[]>('default');
       return (
         <Select
           options={options}
@@ -59,3 +59,42 @@ describe('Select', () => {
     expect(await axe(container)).toHaveNoViolations();
   });
 });
+
+
+describe('Select groups, placeholder and multiple', () => {
+  it('renders optgroups with headings', () => {
+    render(
+      <Select
+        label="Plan"
+        placeholder="Choose a plan"
+        groups={[
+          { label: 'Individual', options: [{ value: 'free', label: 'Free' }, { value: 'pro', label: 'Pro' }] },
+          { label: 'Business', options: [{ value: 'team', label: 'Team' }] },
+        ]}
+      />
+    );
+    const groups = screen.getAllByRole('group');
+    expect(groups).toHaveLength(2);
+    expect(groups[0]).toHaveAttribute('label', 'Individual');
+    expect(screen.getByRole('option', { name: 'Choose a plan' })).toBeDisabled();
+  });
+
+  it('supports native multi-select with a string[] contract', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(
+      <Select
+        label="Channels"
+        multiple
+        value={['email']}
+        onChange={onChange}
+        options={[
+          { value: 'email', label: 'Email' },
+          { value: 'slack', label: 'Slack' },
+        ]}
+      />
+    );
+    await user.selectOptions(screen.getByRole('listbox', { name: 'Channels' }), ['slack']);
+    expect(onChange).toHaveBeenLastCalledWith(['email', 'slack']);
+  });
+});

package/src/components/select/Select.tsx

@@ -9,28 +9,49 @@ export type SelectOption = {
   disabled?: boolean;
 };
 
-export type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange' | 'value' | 'defaultValue'> & {
+export type SelectOptionGroup = {
+  label: string;
   options: SelectOption[];
+};
+
+export type SelectProps = Omit<
+  React.SelectHTMLAttributes<HTMLSelectElement>,
+  'onChange' | 'value' | 'defaultValue' | 'multiple'
+> & {
+  /** Flat options. Ignored when `groups` is provided. */
+  options?: SelectOption[];
+  /** Optgroups with a heading per section. */
+  groups?: SelectOptionGroup[];
   label?: string;
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
+  /** Renders a disabled empty option — the native "choose one" affordance. */
+  placeholder?: string;
+  /** Native multi-select: value/onChange switch to string[]. */
+  multiple?: boolean;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onChange?: (value: string | string[]) => void;
 };
 
 /**
  * Accessible select primitive built on the native <select>: full keyboard,
  * screen-reader and mobile platform behavior comes from the platform rather
- * than a re-implemented listbox. Controlled via `value`, or
- * uncontrolled via `defaultValue`.
+ * than a re-implemented listbox. Supports flat options, optgroups,
+ * placeholder rows and native multi-select (string[] contract).
  */
 export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(function Select(
-  { options, label, value, defaultValue, onChange, id, className, ...props },
+  { options, groups, label, placeholder, multiple = false, value, defaultValue, onChange, id, className, ...props },
   ref,
 ) {
   const generatedId = React.useId();
   const selectId = id ?? generatedId;
   const labelId = `${selectId}-label`;
 
+  const renderOption = (option: SelectOption) => (
+    <option key={option.value} value={option.value} disabled={option.disabled}>
+      {option.label}
+    </option>
+  );
+
   return (
     <div className="flex flex-col gap-1.5">
       {label && (
@@ -41,22 +62,39 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(function
       <select
         ref={ref}
         id={selectId}
+        multiple={multiple}
         aria-labelledby={label ? labelId : undefined}
         className={cn(
           'rounded-md border border-input bg-background px-3 py-2 text-sm',
+          multiple && 'min-h-32',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+          'disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
-        value={value}
-        defaultValue={defaultValue}
-        onChange={(event) => onChange?.(event.target.value)}
+        value={value as string | string[] | undefined}
+        defaultValue={defaultValue as string | string[] | undefined}
+        onChange={(event) => {
+          if (!onChange) return;
+          if (multiple) {
+            onChange(Array.from(event.target.selectedOptions, (option) => option.value));
+            return;
+          }
+          onChange(event.target.value);
+        }}
         {...props}
       >
-        {options.map((option) => (
-          <option key={option.value} value={option.value} disabled={option.disabled}>
-            {option.label}
+        {placeholder && (
+          <option value="" disabled>
+            {placeholder}
           </option>
-        ))}
+        )}
+        {groups
+          ? groups.map((group) => (
+              <optgroup key={group.label} label={group.label}>
+                {group.options.map(renderOption)}
+              </optgroup>
+            ))
+          : (options ?? []).map(renderOption)}
       </select>
     </div>
   );

package/src/components/select/index.ts

@@ -1,2 +1,2 @@
 export { Select } from './Select';
-export type { SelectProps, SelectOption } from './Select';
+export type { SelectProps, SelectOption, SelectOptionGroup } from './Select';

package/src/components/select-menu/SelectMenu.test.tsx

@@ -0,0 +1,105 @@
+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 { SelectMenu, type SelectMenuItem } from './SelectMenu';
+
+const items: SelectMenuItem[] = [
+  { value: 'free', label: 'Free', description: '1 project', group: 'Individual' },
+  { value: 'pro', label: 'Pro', description: 'Unlimited', group: 'Individual' },
+  { value: 'team', label: 'Team', description: 'SSO', group: 'Business' },
+  { value: 'enterprise', label: 'Enterprise', disabled: true, group: 'Business' },
+];
+
+describe('SelectMenu', () => {
+  it('opens a listbox with rich rows and groups', async () => {
+    const user = userEvent.setup();
+    render(<SelectMenu aria-label="Plan" items={items} placeholder="Choose a plan" />);
+    const trigger = screen.getByRole('button', { name: 'Plan' });
+    expect(trigger).toHaveAttribute('aria-haspopup', 'listbox');
+    expect(trigger).toHaveAttribute('aria-expanded', 'false');
+    await user.click(trigger);
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    expect(screen.getByText('Individual')).toBeInTheDocument();
+    expect(screen.getByText('Unlimited')).toBeInTheDocument();
+    expect(trigger).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('selects a single value and closes', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<SelectMenu aria-label="Plan" items={items} onValueChange={onValueChange} />);
+    await user.click(screen.getByRole('button'));
+    await user.click(screen.getByRole('option', { name: /Pro/ }));
+    expect(onValueChange).toHaveBeenCalledWith('pro');
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent('Pro');
+  });
+
+  it('supports keyboard navigation and selection', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<SelectMenu aria-label="Plan" items={items} onValueChange={onValueChange} />);
+    const trigger = screen.getByRole('button');
+    trigger.focus();
+    await user.keyboard('{ArrowDown}'); // open
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    await user.keyboard('{ArrowDown}{Enter}');
+    expect(onValueChange).toHaveBeenCalledWith('pro');
+    await user.keyboard('{Escape}');
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  });
+
+  it('toggles values in multiple mode without closing', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<SelectMenu aria-label="Tags" multiple items={items} defaultValue={['free']} onValueChange={onValueChange} />);
+    const trigger = screen.getByRole('button');
+    expect(trigger).toHaveTextContent('Free');
+    await user.click(trigger);
+    await user.click(screen.getByRole('option', { name: /Pro/ }));
+    expect(onValueChange).toHaveBeenLastCalledWith(['free', 'pro']);
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toHaveTextContent('2 selected');
+  });
+
+  it('skips disabled options and exposes aria-disabled', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<SelectMenu aria-label="Plan" items={items} onValueChange={onValueChange} />);
+    await user.click(screen.getByRole('button'));
+    const disabled = screen.getByRole('option', { name: /Enterprise/ });
+    expect(disabled).toHaveAttribute('aria-disabled', 'true');
+    await user.click(disabled);
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
+
+  it('renders custom rows and trigger content', async () => {
+    const user = userEvent.setup();
+    render(
+      <SelectMenu
+        aria-label="Plan"
+        items={items}
+        renderItem={(item) => <strong>★ {item.label}</strong>}
+        renderValue={(selected) => <em>{selected.length ? selected[0].label : 'Pick'}</em>}
+      />
+    );
+    expect(screen.getByRole('button')).toHaveTextContent('Pick');
+    await user.click(screen.getByRole('button'));
+    expect(screen.getByText('★ Free')).toBeInTheDocument();
+  });
+
+  it('submits hidden inputs for forms', () => {
+    const { container } = render(
+      <form aria-label="Form">
+        <SelectMenu aria-label="Plan" items={items} name="plan" value="pro" onValueChange={() => undefined} />
+      </form>
+    );
+    expect(container.querySelector('input[type="hidden"][name="plan"]')).toHaveValue('pro');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<SelectMenu aria-label="Plan" items={items} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});