🏹 技術調査 - Ark UI

アプリケーション層(開発者コード)
        ↓
フレームワーク固有パッケージ層(@ark-ui/react, @ark-ui/vue, @ark-ui/solid, @ark-ui/svelte)
        ↓
フレームワークアダプター層(React hooks / Solid signals / Vue composables / Svelte stores)
        ↓
状態機械層(@zag-js — フレームワーク非依存のインタラクションロジック)

pnpm add @ark-ui/react
# または npm install / yarn add / bun add

pnpm add @ark-ui/vue
pnpm add @ark-ui/solid
pnpm add @ark-ui/svelte

pnpm list @ark-ui/react

{
  "compilerOptions": {
    "strict": true,
    "jsx": "react-jsx",
    "moduleResolution": "bundler",
    "esModuleInterop": true
  }
}

import type { Select } from '@ark-ui/react/select'
type MyProps = Select.RootProps

[data-scope='select'][data-part='trigger'] {
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
}

[data-scope='select'][data-part='trigger'][data-state='open'] {
  border-color: #0070f3;
}

Root                  ← 状態管理・コンテキスト提供
├── Label             ← アクセシビリティラベル
├── Control           ← 入力エリアのラッパー
│   ├── Trigger       ← ドロップダウン開閉ボタン
│   ├── ClearTrigger  ← 選択解除ボタン
│   └── Indicator     ← 開閉状態アイコン
├── Positioner        ← フローティング要素の位置決め
│   └── Content       ← ドロップダウン内容
│       └── Item      ← 選択肢
│           ├── ItemText
│           └── ItemIndicator
└── HiddenSelect      ← フォーム送信用ネイティブ要素(Select のみ)

import { createListCollection } from '@ark-ui/react/select'

const frameworks = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte' },
  ],
})

// カスタム型の場合
const collection = createListCollection({
  items: products,
  itemToValue: (item) => item.id,
  itemToString: (item) => item.name,
})

import { Portal } from '@ark-ui/react/portal'
import { Select, createListCollection } from '@ark-ui/react/select'

const frameworks = createListCollection({
  items: [
    { label: 'React', value: 'react' },
    { label: 'Vue', value: 'vue' },
    { label: 'Solid', value: 'solid' },
  ],
})

export const BasicSelect = () => (
  <Select.Root collection={frameworks}>
    <Select.Label>Framework</Select.Label>
    <Select.Control>
      <Select.Trigger>
        <Select.ValueText placeholder="Select framework" />
      </Select.Trigger>
      <Select.ClearTrigger>✕</Select.ClearTrigger>
      <Select.Indicator>▼</Select.Indicator>
    </Select.Control>
    <Portal>
      <Select.Positioner>
        <Select.Content>
          <Select.ItemGroup>
            {frameworks.items.map((item) => (
              <Select.Item key={item.value} item={item}>
                <Select.ItemText>{item.label}</Select.ItemText>
                <Select.ItemIndicator>✓</Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.ItemGroup>
        </Select.Content>
      </Select.Positioner>
    </Portal>
    <Select.HiddenSelect />
  </Select.Root>
)

// Uncontrolled
<Select.Root collection={frameworks} defaultValue={['react']}>
  {/* ... */}
</Select.Root>

// Controlled
const [value, setValue] = useState<string[]>(['react'])

<Select.Root
  collection={frameworks}
  value={value}
  onValueChange={(details) => setValue(details.value)}
>
  {/* ... */}
</Select.Root>

import { Portal } from '@ark-ui/react/portal'

<Portal>
  <Select.Positioner>
    <Select.Content>{/* ... */}</Select.Content>
  </Select.Positioner>
</Portal>

import { Dialog } from '@ark-ui/react/dialog'
import { Portal } from '@ark-ui/react/portal'

export const BasicDialog = () => (
  <Dialog.Root>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Portal>
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Title>Welcome Back</Dialog.Title>
          <Dialog.Description>Sign in to continue.</Dialog.Description>
          <Dialog.CloseTrigger>✕</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Portal>
  </Dialog.Root>
)

import { Combobox, useListCollection } from '@ark-ui/react/combobox'
import { useFilter } from '@ark-ui/react/locale'
import { Portal } from '@ark-ui/react/portal'

const initialItems = ['React', 'Solid', 'Vue', 'Svelte']

export const BasicCombobox = () => {
  const { contains } = useFilter({ sensitivity: 'base' })
  const { collection, filter } = useListCollection({ initialItems, filter: contains })

  return (
    <Combobox.Root
      collection={collection}
      onInputValueChange={(details) => filter(details.inputValue)}
    >
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input placeholder="Search..." />
        <Combobox.Trigger>▼</Combobox.Trigger>
        <Combobox.ClearTrigger>✕</Combobox.ClearTrigger>
      </Combobox.Control>
      <Portal>
        <Combobox.Positioner>
          <Combobox.Content>
            {collection.items.map((item) => (
              <Combobox.Item key={item} item={item}>
                <Combobox.ItemText>{item}</Combobox.ItemText>
                <Combobox.ItemIndicator>✓</Combobox.ItemIndicator>
              </Combobox.Item>
            ))}
          </Combobox.Content>
        </Combobox.Positioner>
      </Portal>
    </Combobox.Root>
  )
}

import { Accordion } from '@ark-ui/react/accordion'

const items = [
  { value: 'a', title: 'Panel A', content: 'Content A' },
  { value: 'b', title: 'Panel B', content: 'Content B' },
]

export const BasicAccordion = () => (
  <Accordion.Root defaultValue={['a']} collapsible multiple>
    {items.map((item) => (
      <Accordion.Item key={item.value} value={item.value}>
        <Accordion.ItemTrigger>
          {item.title}
          <Accordion.ItemIndicator>▼</Accordion.ItemIndicator>
        </Accordion.ItemTrigger>
        <Accordion.ItemContent>{item.content}</Accordion.ItemContent>
      </Accordion.Item>
    ))}
  </Accordion.Root>
)

import { Tabs } from '@ark-ui/react/tabs'

export const BasicTabs = () => (
  <Tabs.Root defaultValue="account">
    <Tabs.List>
      <Tabs.Trigger value="account">Account</Tabs.Trigger>
      <Tabs.Trigger value="password">Password</Tabs.Trigger>
      <Tabs.Trigger value="billing">Billing</Tabs.Trigger>
      <Tabs.Indicator />
    </Tabs.List>
    <Tabs.Content value="account">Account settings</Tabs.Content>
    <Tabs.Content value="password">Change password</Tabs.Content>
    <Tabs.Content value="billing">Billing info</Tabs.Content>
  </Tabs.Root>
)

import { Menu } from '@ark-ui/react/menu'
import { Portal } from '@ark-ui/react/portal'

export const BasicMenu = () => (
  <Menu.Root>
    <Menu.Trigger>Open menu</Menu.Trigger>
    <Portal>
      <Menu.Positioner>
        <Menu.Content>
          <Menu.ItemGroup>
            <Menu.ItemGroupLabel>Actions</Menu.ItemGroupLabel>
            <Menu.Item value="edit">Edit</Menu.Item>
            <Menu.Item value="delete">Delete</Menu.Item>
          </Menu.ItemGroup>
          <Menu.Separator />
          <Menu.Item value="settings">Settings</Menu.Item>
        </Menu.Content>
      </Menu.Positioner>
    </Portal>
  </Menu.Root>
)

import { DatePicker } from '@ark-ui/react/date-picker'
import { Portal } from '@ark-ui/react/portal'

export const BasicDatePicker = () => (
  <DatePicker.Root>
    <DatePicker.Label>Date</DatePicker.Label>
    <DatePicker.Control>
      <DatePicker.Input />
      <DatePicker.Trigger>📅</DatePicker.Trigger>
      <DatePicker.ClearTrigger>✕</DatePicker.ClearTrigger>
    </DatePicker.Control>
    <Portal>
      <DatePicker.Positioner>
        <DatePicker.Content>
          <DatePicker.View view="day">
            <DatePicker.ViewControl>
              <DatePicker.PrevTrigger>‹</DatePicker.PrevTrigger>
              <DatePicker.ViewTrigger>
                <DatePicker.RangeText />
              </DatePicker.ViewTrigger>
              <DatePicker.NextTrigger>›</DatePicker.NextTrigger>
            </DatePicker.ViewControl>
            <DatePicker.Table>{/* TableHead / TableBody */}</DatePicker.Table>
          </DatePicker.View>
        </DatePicker.Content>
      </DatePicker.Positioner>
    </Portal>
  </DatePicker.Root>
)

import { TreeView, createTreeCollection } from '@ark-ui/react/tree-view'

interface Node { id: string; name: string; children?: Node[] }

const collection = createTreeCollection<Node>({
  nodeToValue: (node) => node.id,
  nodeToString: (node) => node.name,
  rootNode: {
    id: 'ROOT',
    name: '',
    children: [
      { id: 'src', name: 'src', children: [{ id: 'src/index.ts', name: 'index.ts' }] },
      { id: 'package.json', name: 'package.json' },
    ],
  },
})

import { Field } from '@ark-ui/react/field'

export const BasicField = () => (
  <Field.Root invalid={false} required>
    <Field.Label>Username</Field.Label>
    <Field.Input />
    <Field.HelperText>Enter your username</Field.HelperText>
    <Field.ErrorText>Username is required</Field.ErrorText>
  </Field.Root>
)

import { Popover } from '@ark-ui/react/popover'

export const AsChildExample = () => (
  <Popover.Root>
    <Popover.Trigger asChild>
      <button className="my-custom-button">Open</button>
    </Popover.Trigger>
    <Popover.Positioner>
      <Popover.Content>
        <Popover.Title>Subscription</Popover.Title>
      </Popover.Content>
    </Popover.Positioner>
  </Popover.Root>
)

// Menu.Item をリンクに
<Menu.Item asChild>
  <a href="https://ark-ui.com">Documentation</a>
</Menu.Item>

// サブパスインポート(tree-shaking に有利)
import { Select, createListCollection } from '@ark-ui/react/select'
import { Dialog } from '@ark-ui/react/dialog'
import { Portal } from '@ark-ui/react/portal'

// Vue
import { Slider } from '@ark-ui/vue/slider'
// Solid
import { Slider } from '@ark-ui/solid/slider'
// Svelte
import { Slider } from '@ark-ui/svelte/slider'

// OK
import { selectAnatomy } from '@ark-ui/react/anatomy'

// components/ui/select.tsx
'use client'
export { Select } from '@ark-ui/react/select'

// NG: import { Switch } from '@ark-ui/react'
import { Switch } from '@ark-ui/react/switch'

// select.recipe.ts
import { sva } from '@/styled-system/css'
import { selectAnatomy } from '@ark-ui/react/anatomy'

export const selectRecipe = sva({
  slots: selectAnatomy.keys(),
  base: {
    trigger: { border: '1px solid', borderRadius: 'md' },
    content: { bg: 'white', shadow: 'md' },
  },
  variants: {
    size: {
      sm: { trigger: { px: '2', py: '1', fontSize: 'sm' } },
      md: { trigger: { px: '4', py: '2', fontSize: 'md' } },
    },
  },
  defaultVariants: { size: 'md' },
})

<Select.Trigger className="border rounded px-4 py-2 data-[state=open]:ring-2" />

'use client'
import { Select as ArkSelect } from '@ark-ui/react/select'

type SelectRootProps = ArkSelect.RootProps & { size?: 'sm' | 'md' | 'lg' }
export const SelectRoot = ({ size = 'md', ...props }: SelectRootProps) => (
  <ArkSelect.Root data-size={size} {...props} />
)

<Controller
  name="country"
  control={control}
  render={({ field }) => (
    <Select.Root
      collection={countryCollection}
      value={field.value ? [field.value] : []}
      onValueChange={({ value }) => field.onChange(value[0])}
    >
      {/* ... */}
      <Select.HiddenSelect />
    </Select.Root>
  )}
/>

import { LocaleProvider } from '@ark-ui/react/locale'

<LocaleProvider locale="ar-EG">
  <App />
</LocaleProvider>

const user = userEvent.setup()
await user.click(screen.getByRole('button'))
expect(await screen.findByRole('listbox')).toBeInTheDocument()