@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/components/inputs/combobox/examples.mdx

@@ -1,366 +0,0 @@
-import Combobox from './index'
-import RemoteDemo from './remote-demo'
-import Badge from '../../badge'
-import Field from '../field'
-import { Clock, Globe, Lock, Mail, Search, Star, Users } from 'lucide-react'
-
-# Basics
-
-## Basic
-
-Items are data on the root, `Combobox.List` renders a row per match. Type,
-then press Enter to pick the highlighted row.
-
-<Combobox items={[{ value: 'next', label: 'Next.js' }, { value: 'sveltekit', label: 'SvelteKit' }, { value: 'nuxt', label: 'Nuxt' }, { value: 'remix', label: 'Remix' }, { value: 'astro', label: 'Astro' }]}>
-  <Combobox.Input placeholder="Select a framework…" />
-  <Combobox.Content>
-    <Combobox.Empty>No framework found.</Combobox.Empty>
-    <Combobox.List>
-      {(item) => (
-        <Combobox.Item key={item.value} value={item.value}>
-          {item.label}
-        </Combobox.Item>
-      )}
-    </Combobox.List>
-  </Combobox.Content>
-</Combobox>
-
-## Variants
-
-`bordered` is framed at rest; `borderless` is invisible until hovered or
-focused — the same field ladder as InputGroup.
-
-<div className="flex flex-wrap items-center gap-3">
-  {['bordered', 'borderless'].map((variant) => (
-    <Combobox key={variant} items={[{ value: 'next', label: 'Next.js' }, { value: 'nuxt', label: 'Nuxt' }, { value: 'remix', label: 'Remix' }, { value: 'astro', label: 'Astro' }]}>
-      <Combobox.Input variant={variant} placeholder={variant === 'bordered' ? 'Bordered' : 'Borderless'} />
-      <Combobox.Content>
-        <Combobox.Empty>No framework found.</Combobox.Empty>
-        <Combobox.List>
-          {(item) => (
-            <Combobox.Item key={item.value} value={item.value}>
-              {item.label}
-            </Combobox.Item>
-          )}
-        </Combobox.List>
-      </Combobox.Content>
-    </Combobox>
-  ))}
-</div>
-
-## With icons
-
-An object item carries anything the rows need — here a lucide component the
-function child hands to `Combobox.Item`.
-
-<Combobox items={[{ value: 'shared', label: 'Shared with me', icon: Users }, { value: 'starred', label: 'Starred', icon: Star }, { value: 'recent', label: 'Recent', icon: Clock }, { value: 'private', label: 'Private', icon: Lock }, { value: 'inbox', label: 'Inbox', icon: Mail }]}>
-  <Combobox.Input icon={Search} placeholder="Jump to view…" />
-  <Combobox.Content>
-    <Combobox.Empty>No view matches.</Combobox.Empty>
-    <Combobox.List>
-      {(item) => (
-        <Combobox.Item key={item.value} value={item.value} icon={item.icon}>
-          {item.label}
-        </Combobox.Item>
-      )}
-    </Combobox.List>
-  </Combobox.Content>
-</Combobox>
-
-## Long list
-
-String items are their own value and label. The list scrolls past 300px.
-
-<Combobox items={['(UTC−10) Honolulu', '(UTC−8) Los Angeles', '(UTC−7) Denver', '(UTC−6) Mexico City', '(UTC−5) New York', '(UTC−3) São Paulo', '(UTC−1) Azores', '(UTC+0) London', '(UTC+1) Paris', '(UTC+2) Cairo', '(UTC+3) Moscow', '(UTC+4) Dubai', '(UTC+5:30) Mumbai', '(UTC+7) Bangkok', '(UTC+8) Singapore', '(UTC+9) Tokyo', '(UTC+10) Sydney', '(UTC+12) Auckland']}>
-  <Combobox.Input icon={Globe} placeholder="Search timezones…" className="w-[280px]" />
-  <Combobox.Content>
-    <Combobox.Empty>No timezone matches.</Combobox.Empty>
-    <Combobox.List>
-      {(item) => (
-        <Combobox.Item key={item} value={item}>
-          {item}
-        </Combobox.Item>
-      )}
-    </Combobox.List>
-  </Combobox.Content>
-</Combobox>
-
-# Selection
-
-## Multiple selection
-
-`multiple` plus `Combobox.Chips`: 1 chip per pick, touching picks share one
-background. Press Backspace in an empty field to drop the last chip.
-
-<Combobox multiple defaultValue={['next', 'astro']} items={[{ value: 'next', label: 'Next.js' }, { value: 'sveltekit', label: 'SvelteKit' }, { value: 'nuxt', label: 'Nuxt' }, { value: 'remix', label: 'Remix' }, { value: 'astro', label: 'Astro' }]}>
-  <Combobox.Chips placeholder="Add frameworks…" className="w-[360px] max-w-full" />
-  <Combobox.Content>
-    <Combobox.Empty>No framework found.</Combobox.Empty>
-    <Combobox.List>
-      {(item) => (
-        <Combobox.Item key={item.value} value={item.value}>
-          {item.label}
-        </Combobox.Item>
-      )}
-    </Combobox.List>
-  </Combobox.Content>
-</Combobox>
-
-## Create from the query
-
-A last row creates what was typed whenever no label matches it exactly.
-`creatable` keeps the new items here; `onCreate` hands the query to a list
-you own instead. Type a component that is not there, then press Enter.
-
-<Combobox multiple creatable defaultValue={['button', 'combobox']} items={[{ value: 'accordion', label: 'Accordion' }, { value: 'badge', label: 'Badge' }, { value: 'button', label: 'Button' }, { value: 'card', label: 'Card' }, { value: 'combobox', label: 'Combobox' }, { value: 'dialog', label: 'Dialog' }, { value: 'switch', label: 'Switch' }]}>
-  <Combobox.Chips placeholder="Add components…" className="w-[360px] max-w-full" />
-  <Combobox.Content>
-    <Combobox.Empty>No component found.</Combobox.Empty>
-    <Combobox.List>
-      {(item) => (
-        <Combobox.Item key={item.value} value={item.value}>
-          {item.label}
-        </Combobox.Item>
-      )}
-    </Combobox.List>
-  </Combobox.Content>
-</Combobox>
-
-## Hide picked rows
-
-`hideSelected` takes a pick out of the list, so it reads as what is left to
-add. Remove a chip to bring its row back.
-
-<Combobox multiple hideSelected defaultValue={['button']} items={[{ value: 'accordion', label: 'Accordion' }, { value: 'badge', label: 'Badge' }, { value: 'button', label: 'Button' }, { value: 'card', label: 'Card' }]}>
-  <Combobox.Chips placeholder="Add components…" className="w-[360px] max-w-full" />
-  <Combobox.Content>
-    <Combobox.Empty allSelected="Every component is added.">No component found.</Combobox.Empty>
-    <Combobox.List>
-      {(item) => (
-        <Combobox.Item key={item.value} value={item.value}>
-          {item.label}
-        </Combobox.Item>
-      )}
-    </Combobox.List>
-  </Combobox.Content>
-</Combobox>
-
-## Remote items
-
-For items that come from a server: own the query with `inputValue` and `onInputValueChange`, pass `filter={null}` so the list shows exactly what you hand it, and set `loading` while a page is on its way. The chevron blurs into a spinner and a status row sits under the list; `footer` on `Combobox.Content` pins a "Load more" under it. `onInputValueChange` also gets Base UI's change details: `reason` is `"input-change"` for typing and `"item-press"` when a pick rewrites the field, so a pick doesn't have to start another search.
-
-<RemoteDemo />
-
-# Content
-
-## Node labels
-
-An object item's `label` may be any node; its `textValue` is what filters, fills the field and names its chip.
-
-<div className="w-72 max-w-full">
-  <Combobox
-    multiple
-    defaultValue={['paid']}
-    items={[
-      { value: 'draft', textValue: 'Draft', label: <Badge variant="dot" color="gray">Draft</Badge> },
-      { value: 'sent', textValue: 'Sent', label: <Badge variant="dot" color="blue">Sent</Badge> },
-      { value: 'paid', textValue: 'Paid', label: <Badge variant="dot" color="green">Paid</Badge> },
-      { value: 'overdue', textValue: 'Overdue', label: <Badge variant="dot" color="red">Overdue</Badge> },
-    ]}
-  >
-    <Combobox.Chips placeholder="Filter by status…" />
-    <Combobox.Content>
-      <Combobox.Empty>No status found.</Combobox.Empty>
-      <Combobox.List>
-        {(item) => (
-          <Combobox.Item key={item.value} value={item.value}>
-            {item.label}
-          </Combobox.Item>
-        )}
-      </Combobox.List>
-    </Combobox.Content>
-  </Combobox>
-</div>
-
-## Translated labels
-
-`labels` on the root holds the words the buttons announce: `open`, `clear`, `remove` (a function of the chip's text) and the default `placeholder`. Here in Slovak, for a screen reader.
-
-<div className="w-80 max-w-full">
-  <Combobox
-    multiple
-    defaultValue={['Bratislava']}
-    labels={{ open: 'Otvoriť', clear: 'Vymazať', remove: (label) => `Odstrániť ${label}`, placeholder: 'Hľadať…' }}
-    items={['Bratislava', 'Košice', 'Žilina', 'Nitra']}
-  >
-    <Combobox.Chips clearable aria-label="Mesto" />
-    <Combobox.Content>
-      <Combobox.Empty>Nič sa nenašlo.</Combobox.Empty>
-      <Combobox.List>
-        {(item) => (
-          <Combobox.Item key={item} value={item}>
-            {item}
-          </Combobox.Item>
-        )}
-      </Combobox.List>
-    </Combobox.Content>
-  </Combobox>
-</div>
-
-# States
-
-## Error & disabled
-
-`error` tints the field's ring and prints the message under it; `disabled`
-fades the whole thing and stops the popup opening.
-
-<div className="flex flex-wrap items-start gap-3">
-  <Combobox items={[{ value: 'next', label: 'Next.js' }, { value: 'nuxt', label: 'Nuxt' }, { value: 'astro', label: 'Astro' }]}>
-    <Combobox.Input placeholder="Select a framework…" error="Pick a framework to continue." />
-    <Combobox.Content>
-      <Combobox.Empty>No framework found.</Combobox.Empty>
-      <Combobox.List>
-        {(item) => (
-          <Combobox.Item key={item.value} value={item.value}>
-            {item.label}
-          </Combobox.Item>
-        )}
-      </Combobox.List>
-    </Combobox.Content>
-  </Combobox>
-  <Combobox disabled items={[{ value: 'next', label: 'Next.js' }]}>
-    <Combobox.Input placeholder="Disabled" />
-    <Combobox.Content>
-      <Combobox.List>
-        {(item) => (
-          <Combobox.Item key={item.value} value={item.value}>
-            {item.label}
-          </Combobox.Item>
-        )}
-      </Combobox.List>
-    </Combobox.Content>
-  </Combobox>
-</div>
-
-## Read only
-
-`readOnly` shows the picks and takes no input: the popup stays shut, and the clear and chip ✕ go.
-
-<div className="flex w-72 max-w-full flex-col gap-2">
-  <Combobox readOnly defaultValue="sveltekit" items={[{ value: 'next', label: 'Next.js' }, { value: 'sveltekit', label: 'SvelteKit' }]}>
-    <Combobox.Input clearable />
-    <Combobox.Content>
-      <Combobox.List>
-        {(item) => (
-          <Combobox.Item key={item.value} value={item.value}>
-            {item.label}
-          </Combobox.Item>
-        )}
-      </Combobox.List>
-    </Combobox.Content>
-  </Combobox>
-  <Combobox readOnly multiple defaultValue={['Apples', 'Pears']} items={['Apples', 'Pears', 'Plums']}>
-    <Combobox.Chips />
-    <Combobox.Content>
-      <Combobox.List>
-        {(item) => (
-          <Combobox.Item key={item} value={item}>
-            {item}
-          </Combobox.Item>
-        )}
-      </Combobox.List>
-    </Combobox.Content>
-  </Combobox>
-</div>
-
-# Composition
-
-## In a Field
-
-A Combobox inside a Field takes its invalid state, like Input does: the box turns destructive and the field sets `aria-invalid`. `invalid` does the same without a Field.
-
-<div className="flex flex-wrap items-start gap-3">
-  <Field invalid className="w-72 max-w-full">
-    <Field.Label>Framework</Field.Label>
-    <Combobox items={['Next.js', 'Nuxt', 'Astro']}>
-      <Combobox.Input placeholder="Select a framework…" />
-      <Combobox.Content>
-        <Combobox.Empty>No framework found.</Combobox.Empty>
-        <Combobox.List>
-          {(item) => (
-            <Combobox.Item key={item} value={item}>
-              {item}
-            </Combobox.Item>
-          )}
-        </Combobox.List>
-      </Combobox.Content>
-    </Combobox>
-    <Field.Error>Pick a framework to continue.</Field.Error>
-  </Field>
-  <Combobox items={['Next.js', 'Nuxt', 'Astro']}>
-    <Combobox.Input invalid aria-label="Framework, invalid" placeholder="Invalid, no message" />
-    <Combobox.Content>
-      <Combobox.Empty>No framework found.</Combobox.Empty>
-      <Combobox.List>
-        {(item) => (
-          <Combobox.Item key={item} value={item}>
-            {item}
-          </Combobox.Item>
-        )}
-      </Combobox.List>
-    </Combobox.Content>
-  </Combobox>
-</div>
-
-## Hidden trigger
-
-`hideTrigger` drops the chevron button, for a field that opens by typing or the arrow keys. It leaves the clear ✕ alone.
-
-<div className="w-72 max-w-full">
-  <Combobox items={['Next.js', 'Nuxt', 'Astro']}>
-    <Combobox.Input hideTrigger clearable aria-label="Framework" placeholder="Type to search…" />
-    <Combobox.Content>
-      <Combobox.Empty>No framework found.</Combobox.Empty>
-      <Combobox.List>
-        {(item) => (
-          <Combobox.Item key={item} value={item}>
-            {item}
-          </Combobox.Item>
-        )}
-      </Combobox.List>
-    </Combobox.Content>
-  </Combobox>
-</div>
-
-## Morph
-
-The list oozes out of the field by default, whatever opened it: typing, a press or ArrowDown. `effect="morph"` grows it straight out of the field's own box, with no neck.
-
-<div className="flex flex-wrap items-start justify-center gap-3">
-  <Combobox items={['Goo', 'Liquid neck', 'Drop']}>
-    <Combobox.Input placeholder="Goo" />
-    <Combobox.Content>
-      <Combobox.Empty>No match.</Combobox.Empty>
-      <Combobox.List>
-        {(item) => (
-          <Combobox.Item key={item} value={item}>
-            {item}
-          </Combobox.Item>
-        )}
-      </Combobox.List>
-    </Combobox.Content>
-  </Combobox>
-  <Combobox items={['Morph', 'Grow', 'Shrink back']}>
-    <Combobox.Input placeholder="Morph" />
-    <Combobox.Content effect="morph">
-      <Combobox.Empty>No match.</Combobox.Empty>
-      <Combobox.List>
-        {(item) => (
-          <Combobox.Item key={item} value={item}>
-            {item}
-          </Combobox.Item>
-        )}
-      </Combobox.List>
-    </Combobox.Content>
-  </Combobox>
-</div>