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

package/components/inputs/select/examples.mdx

@@ -1,296 +0,0 @@
-import Select from './index'
-import Badge from '../../badge'
-import { Bell, Globe, Mail, Monitor, Moon, Shield, Sun, User } from 'lucide-react'
-
-# Basics
-
-## Basic
-
-A trigger, a popover, four options. Rows take their place in order, so
-they need no `index`.
-
-<Select defaultValue="banana">
-  <Select.Trigger placeholder="Select a fruit…" />
-  <Select.Content>
-    <Select.Item value="apple">Apple</Select.Item>
-    <Select.Item value="banana">Banana</Select.Item>
-    <Select.Item value="cherry">Cherry</Select.Item>
-    <Select.Item value="mango">Mango</Select.Item>
-  </Select.Content>
-</Select>
-
-## Variants
-
-Bordered is the default; borderless drops the resting border and keeps the
-hover fill, for toolbars and dense headers.
-
-<div className="flex flex-wrap items-center gap-3">
-  <Select>
-    <Select.Trigger variant="bordered" placeholder="Bordered" />
-    <Select.Content>
-      <Select.Item index={0} value="apple">Apple</Select.Item>
-      <Select.Item index={1} value="banana">Banana</Select.Item>
-      <Select.Item index={2} value="cherry">Cherry</Select.Item>
-    </Select.Content>
-  </Select>
-  <Select>
-    <Select.Trigger variant="borderless" placeholder="Borderless" />
-    <Select.Content>
-      <Select.Item index={0} value="apple">Apple</Select.Item>
-      <Select.Item index={1} value="banana">Banana</Select.Item>
-      <Select.Item index={2} value="cherry">Cherry</Select.Item>
-    </Select.Content>
-  </Select>
-</div>
-
-## Groups
-
-Select.Group + Select.Label caption a run of rows, Select.Separator rules
-between them. Indices keep counting across the groups.
-
-<Select>
-  <Select.Trigger placeholder="Settings…" />
-  <Select.Content>
-    <Select.Group>
-      <Select.Label>Account</Select.Label>
-      <Select.Item index={0} value="profile" icon={User}>Profile</Select.Item>
-      <Select.Item index={1} value="email" icon={Mail}>Email</Select.Item>
-    </Select.Group>
-    <Select.Separator />
-    <Select.Group>
-      <Select.Label>Preferences</Select.Label>
-      <Select.Item index={2} value="notifications" icon={Bell}>Notifications</Select.Item>
-      <Select.Item index={3} value="privacy" icon={Shield}>Privacy</Select.Item>
-    </Select.Group>
-  </Select.Content>
-</Select>
-
-## Scrollable List
-
-Past 300px the list scrolls inside a ScrollArea: hover-revealed thumb, a
-fade at both edges, and the overlays scrolling with the rows.
-
-<Select defaultValue="utc+1">
-  <Select.Trigger icon={Globe} placeholder="Select timezone…" />
-  <Select.Content>
-    {[
-      ['utc-8', '(UTC-8) Pacific Time'],
-      ['utc-7', '(UTC-7) Mountain Time'],
-      ['utc-6', '(UTC-6) Central Time'],
-      ['utc-5', '(UTC-5) Eastern Time'],
-      ['utc-4', '(UTC-4) Atlantic Time'],
-      ['utc-3', '(UTC-3) Buenos Aires'],
-      ['utc-1', '(UTC-1) Azores'],
-      ['utc+0', '(UTC+0) London'],
-      ['utc+1', '(UTC+1) Paris'],
-      ['utc+2', '(UTC+2) Helsinki'],
-      ['utc+3', '(UTC+3) Moscow'],
-      ['utc+5:30', '(UTC+5:30) Mumbai'],
-      ['utc+8', '(UTC+8) Singapore'],
-      ['utc+9', '(UTC+9) Tokyo'],
-      ['utc+10', '(UTC+10) Sydney'],
-      ['utc+12', '(UTC+12) Auckland'],
-    ].map(([value, label], i) => (
-      <Select.Item key={value} index={i} value={value}>{label}</Select.Item>
-    ))}
-  </Select.Content>
-</Select>
-
-# Content
-
-## With Icons
-
-A leading icon on the trigger and on every row. Row icons thicken to a 2
-stroke while their row is hovered or checked.
-
-<Select defaultValue="system">
-  <Select.Trigger icon={Monitor} placeholder="Theme" />
-  <Select.Content>
-    <Select.Item index={0} value="system" icon={Monitor}>System</Select.Item>
-    <Select.Item index={1} value="light" icon={Sun}>Light</Select.Item>
-    <Select.Item index={2} value="dark" icon={Moon}>Dark</Select.Item>
-  </Select.Content>
-</Select>
-
-## Value part
-
-`Select.Value` is the trigger's value slot as a part, so a trigger can take it as children, shadcn style. Rows come out of a `map` inside groups, with no `index`.
-
-<Select>
-  <Select.Trigger className="w-56">
-    <Select.Value placeholder="Pick a region…" />
-  </Select.Trigger>
-  <Select.Content>
-    <Select.Group>
-      <Select.Label>Europe</Select.Label>
-      {['Bratislava', 'Prague', 'Vienna'].map(city => (
-        <Select.Item key={city} value={city.toLowerCase()}>{city}</Select.Item>
-      ))}
-    </Select.Group>
-    <Select.Separator />
-    <Select.Group>
-      <Select.Label>America</Select.Label>
-      {['Chicago', 'Toronto'].map(city => (
-        <Select.Item key={city} value={city.toLowerCase()}>{city}</Select.Item>
-      ))}
-    </Select.Group>
-  </Select.Content>
-</Select>
-
-## Node labels
-
-A row's label may be any node; the trigger shows it as the row does. `textValue` is what typeahead matches.
-
-<Select defaultValue="paid">
-  <Select.Trigger className="w-56" />
-  <Select.Content>
-    <Select.Item value="draft" textValue="Draft"><Badge variant="dot" color="gray">Draft</Badge></Select.Item>
-    <Select.Item value="sent" textValue="Sent"><Badge variant="dot" color="blue">Sent</Badge></Select.Item>
-    <Select.Item value="paid" textValue="Paid"><Badge variant="dot" color="green">Paid</Badge></Select.Item>
-  </Select.Content>
-</Select>
-
-# States
-
-## Error State
-
-`error` on the trigger tints its border, sets `aria-invalid`, and prints
-the message underneath.
-
-<Select>
-  <Select.Trigger placeholder="Select a role…" error="Please select a role to continue." />
-  <Select.Content>
-    <Select.Item index={0} value="admin">Admin</Select.Item>
-    <Select.Item index={1} value="editor">Editor</Select.Item>
-    <Select.Item index={2} value="viewer">Viewer</Select.Item>
-  </Select.Content>
-</Select>
-
-## Disabled
-
-`disabled` on the root takes the whole control out; on a single item it
-dims the row and makes it invisible to the hover highlight.
-
-<div className="flex flex-wrap items-center gap-3">
-  <Select disabled>
-    <Select.Trigger placeholder="Disabled" />
-    <Select.Content>
-      <Select.Item index={0} value="a">Option A</Select.Item>
-    </Select.Content>
-  </Select>
-  <Select>
-    <Select.Trigger placeholder="Some disabled…" />
-    <Select.Content>
-      <Select.Item index={0} value="a">Available</Select.Item>
-      <Select.Item index={1} value="b" disabled>Unavailable</Select.Item>
-      <Select.Item index={2} value="c">Available</Select.Item>
-    </Select.Content>
-  </Select>
-</div>
-
-## Open state
-
-`open` with `onOpenChange(open, details)` drives the popup from outside, and `defaultOpen` starts it open. A controlled `open` is followed exactly, so a handler can refuse a close or an open: this select is pinned shut. Uncontrolled, a pick still holds the popup for its 300ms acknowledgment.
-
-<Select open={false} defaultValue="a">
-  <Select.Trigger aria-label="Pinned shut" />
-  <Select.Content>
-    <Select.Item value="a">Never opens</Select.Item>
-  </Select.Content>
-</Select>
-
-```tsx
-const [open, setOpen] = useState(false)
-
-<Select
-  open={open}
-  onOpenChange={(next, details) => {
-    if (!next && details.reason === 'outside-press') return
-    setOpen(next)
-  }}
->
-  …
-</Select>
-```
-
-# Behavior
-
-## Morph
-
-The menu oozes out of its trigger by default. `effect="morph"` with `hideSource` turns the trigger itself into the list and shrinks it back, one continuous surface.
-
-<div className="flex flex-wrap items-start justify-center gap-3">
-  <Select defaultValue="goo">
-    <Select.Trigger placeholder="Goo" />
-    <Select.Content>
-      <Select.Item index={0} value="goo">Goo</Select.Item>
-      <Select.Item index={1} value="neck">Liquid neck</Select.Item>
-      <Select.Item index={2} value="drop">Drop</Select.Item>
-    </Select.Content>
-  </Select>
-  <Select defaultValue="morph">
-    <Select.Trigger placeholder="Morph" />
-    <Select.Content effect="morph" hideSource>
-      <Select.Item index={0} value="morph">Morph</Select.Item>
-      <Select.Item index={1} value="grow">Grow</Select.Item>
-      <Select.Item index={2} value="shrink">Shrink back</Select.Item>
-    </Select.Content>
-  </Select>
-</div>
-
-## Placement
-
-`side`, `align` and `sideOffset` on `Select.Content` place the menu; it still flips when there is no room.
-
-<Select defaultValue="top">
-  <Select.Trigger className="w-40" />
-  <Select.Content side="top" align="end">
-    <Select.Item value="top">Above</Select.Item>
-    <Select.Item value="end">Aligned to the end</Select.Item>
-  </Select.Content>
-</Select>
-
-## Popup options
-
-`alignOffset` shifts the menu along the trigger's edge, `collisionPadding` keeps it off the viewport edge, `finalFocus` decides where focus lands on close, and HTML attributes such as `id`, `aria-label` and `data-*` land on the popup element. Base UI's select popup always focuses the picked row when it opens, so there is no `initialFocus`.
-
-<Select defaultValue="b">
-  <Select.Trigger className="w-40" aria-label="Offset" />
-  <Select.Content alignOffset={16} collisionPadding={16} aria-label="Choices" data-menu="offset">
-    <Select.Item value="a">Option A</Select.Item>
-    <Select.Item value="b">Option B</Select.Item>
-  </Select.Content>
-</Select>
-
-# Composition
-
-## Your own trigger and rows
-
-`render` (or `asChild` with a single child) swaps the trigger's button or a row's `div` for your element, which must forward its ref (a router link does). A custom trigger brings its own look and keeps the select's wiring, and the element replaces the whole field body: with children of its own, the icon, `placeholder` and chevron are not rendered (put a `Select.Value` inside to show the pick), while a childless element still gets the value slot, icon and chevron; either way the `error` border tint is not applied, though the message and `aria-invalid` are; a row keeps the hover, check and keyboard behaviour. Here the trigger is a borderless text button and the rows are elements of your own, marked with `data-kind`.
-
-<Select defaultValue="docs">
-  <Select.Trigger asChild>
-    <button type="button" className="inline-flex items-center gap-2 text-body">
-      <Select.Value />
-    </button>
-  </Select.Trigger>
-  <Select.Content>
-    <Select.Item value="docs" asChild><div data-kind="custom">Docs</div></Select.Item>
-    <Select.Item value="guides" render={<div data-kind="custom" />}>Guides</Select.Item>
-  </Select.Content>
-</Select>
-
-## Wrapper and width
-
-The trigger sits in a flex-column div that holds its `error` text. `wrapperClassName="contents"` removes that box from the layout, and `className="min-w-0"` lifts the field's 160px minimum (128px compact).
-
-<div className="flex items-center gap-3">
-  <Select defaultValue="s">
-    <Select.Trigger className="min-w-0 w-24" wrapperClassName="contents" aria-label="Size" />
-    <Select.Content>
-      <Select.Item value="s">S</Select.Item>
-      <Select.Item value="m">M</Select.Item>
-    </Select.Content>
-  </Select>
-  <span className="text-body text-muted-foreground">sits flush in a flex row</span>
-</div>