@misoto22/folio 0.0.0 → 0.17.0

package/dist/agent/Media.md

@@ -0,0 +1,261 @@
+# Media
+
+Photograph collections, lightboxes, image details and map controls.
+
+- Kind: pattern
+- Group: Website
+- Import: `import { MediaMasthead } from '@misoto22/folio/website'`
+- Version: 0.17.0
+- Docs: https://ui.misoto22.com/components/media/
+
+## When to reach for it
+
+Compose image browsing and map presentation while the host owns images and map lifecycles.
+
+## Best practices
+
+### Do
+
+- Supply localized labels, descriptive links and meaningful image alternatives.
+
+### Don’t
+
+- Do not put service credentials, routing logic or backend models inside presentation components.
+
+## MediaMasthead
+
+The quiet opening to an image collection, before its controls and prints.
+
+### Props
+
+- `eyebrow` — `ReactNode`.
+- `title` (required) — `ReactNode`.
+- `description` — `ReactNode`.
+- `headingLevel` — `1 | 2 | 3 | 4 | 5 | 6` default `1`. The title level when this page composition sits inside another document.
+
+Also accepts: `Omit<HTMLAttributes<HTMLElement>, 'title'>`.
+
+## PhotographFeature
+
+A photograph and an editorial introduction, with the original image ratio.
+
+### Props
+
+- `image` (required) — `ReactNode`.
+- `title` (required) — `ReactNode`.
+- `eyebrow` — `ReactNode`.
+- `description` — `ReactNode`.
+- `caption` — `ReactNode`.
+- `action` — `ReactNode`.
+
+Also accepts: `Omit<HTMLAttributes<HTMLElement>, 'title'>`.
+
+## MediaCollection
+
+Page-level gallery composition; the host owns its filters and collection.
+
+### Props
+
+- `masthead` (required) — `ReactNode`.
+- `controls` — `ReactNode`.
+- `collectionId` — `string`.
+- `footer` — `ReactNode`.
+
+Also accepts: `HTMLAttributes<HTMLDivElement>`.
+
+## MediaGallery
+
+Level mounts keep unlike aspect ratios aligned without cropping the prints.
+
+### Props
+
+- `children` — `ReactNode`.
+- `emptyTitle` — `ReactNode`. Supply localized empty copy when the collection may have no children.
+- `emptyAction` — `ReactNode`.
+
+Also accepts: `HTMLAttributes<HTMLUListElement>`.
+
+## MediaGalleryItem
+
+### Props
+
+- `children` (required) — `ReactElement`. A host link containing its image. The package supplies the print layout.
+- `title` (required) — `ReactNode`.
+- `index` — `ReactNode`.
+- `location` — `ReactNode`.
+- `orientation` — `'portrait' | 'landscape' | 'square'`.
+
+Also accepts: `Omit<HTMLAttributes<HTMLLIElement>, 'title'>`.
+
+## MediaGallerySkeleton
+
+### Props
+
+- `label` (required) — `string`.
+- `count` — `number` default `6`.
+
+## MediaDetailLayout
+
+Portraits share a spread with their notes; landscapes lead a full-width spread.
+
+### Props
+
+- `title` (required) — `ReactNode`.
+- `titleId` (required) — `string`.
+- `headingLevel` — `1 | 2 | 3 | 4 | 5 | 6` default `1`. The title level when this page composition sits inside another document.
+- `category` — `ReactNode`.
+- `notesLabel` (required) — `string`.
+- `orientation` (required) — `'portrait' | 'landscape' | 'square'`.
+- `backLink` (required) — `ReactElement`.
+- `index` — `ReactNode`.
+- `media` (required) — `ReactNode`.
+- `light` — `ReactNode`.
+- `actions` — `ReactNode`.
+- `metadata` — `ReactNode`.
+- `location` — `ReactNode`.
+- `pager` — `ReactNode`.
+- `related` — `ReactNode`.
+
+Also accepts: `Omit<HTMLAttributes<HTMLElement>, 'title'>`.
+
+## MediaMetadata
+
+### Props
+
+- `items` (required) — `DescriptionListItem[]`.
+
+Also accepts: `HTMLAttributes<HTMLDListElement>`.
+
+## MediaPager
+
+### Props
+
+- `label` (required) — `string`.
+- `previous` — `ReactNode`.
+- `next` — `ReactNode`.
+
+Also accepts: `HTMLAttributes<HTMLElement>`.
+
+## MediaPagerItem
+
+### Props
+
+- `link` (required) — `ReactElement`.
+- `direction` (required) — `'previous' | 'next'`.
+- `label` (required) — `ReactNode`.
+- `title` (required) — `ReactNode`.
+- `image` — `ReactNode`.
+
+## MediaThumbnailStrip
+
+### Props
+
+- `heading` (required) — `ReactNode`.
+
+Also accepts: `HTMLAttributes<HTMLElement>`.
+
+## MediaThumbnail
+
+### Props
+
+- `children` (required) — `ReactElement`.
+
+## MediaLightNote
+
+The host supplies observations and formatted labels; this is presentation only.
+
+### Props
+
+- `label` (required) — `ReactNode`.
+- `lines` (required) — `MediaLightNoteLine[]`.
+
+## MediaMapSection
+
+### Props
+
+- `title` (required) — `ReactNode`.
+- `hint` — `ReactNode`.
+- `aliasId` — `string`. An optional legacy anchor, owned and named by the host.
+- `map` (required) — `ReactNode`.
+- `preview` (required) — `ReactNode`.
+
+Also accepts: `Omit<HTMLAttributes<HTMLElement>, 'title'>`.
+
+## MediaMapFrame
+
+### Props
+
+- `label` — `ReactNode`.
+- `hint` — `ReactNode`.
+- `navigation` — `ReactNode`.
+- `compact` — `boolean` default `false`.
+
+Also accepts: `HTMLAttributes<HTMLDivElement>`.
+
+## MediaMapNavigation
+
+### Props
+
+- `zoomInLabel` (required) — `string`.
+- `zoomOutLabel` (required) — `string`.
+- `onZoomIn` (required) — `() => void`.
+- `onZoomOut` (required) — `() => void`.
+
+## MediaMapCanvas
+
+A sized provider container. Map creation, themes and geographic math stay in the host.
+
+Also accepts: `ComponentPropsWithRef<'div'>`.
+
+## MediaMapPreview
+
+### Props
+
+- `title` (required) — `ReactNode`.
+- `image` — `ReactNode`.
+- `action` — `ReactNode`.
+- `place` — `ReactNode`.
+- `coordinates` — `ReactNode`.
+- `children` — `ReactNode`.
+
+## MediaMapAreaList
+
+### Props
+
+- `items` (required) — `MediaMapArea[]`.
+- `value` — `string`.
+- `onValueChange` (required) — `(value: string) => void`.
+
+## MediaMapMarker
+
+A keyboard-operable 44px marker for a host's map-provider portal.
+
+### Props
+
+- `label` (required) — `string`.
+- `active` — `boolean` default `false`.
+
+Also accepts: `Omit<Extract<ButtonProps, { href?: undefined }>, 'children' | 'iconOnly'>`.
+
+## MediaMapPin
+
+### Props
+
+- `active` — `boolean` default `false`.
+
+## MediaMapSkeleton
+
+## MediaLightbox
+
+A print and its controlled, focus-trapped full-screen dialog.
+
+### Props
+
+- `open` (required) — `boolean`.
+- `onOpenChange` (required) — `(open: boolean) => void`.
+- `title` (required) — `string`.
+- `triggerLabel` (required) — `string`.
+- `closeLabel` (required) — `string`.
+- `aspectRatio` (required) — `number`. Intrinsic width divided by height; invalid dimensions use a safe fallback.
+- `media` (required) — `ReactNode`.
+- `expandedMedia` — `ReactNode` default `media`.

package/dist/agent/Metric.md

@@ -0,0 +1,70 @@
+# Metric
+
+One reading, on a plate: a label, a figure, and what qualifies it.
+
+- Kind: component
+- Group: Data
+- Import: `import { Metric } from '@misoto22/folio'`
+- Version: 0.17.0
+- Docs: https://ui.misoto22.com/components/metric/
+- Related: big-number, status-dot, sparkline
+
+## When to reach for it
+
+Four across on a console. BigNumber is the same idea at headline scale for the ONE figure a view is about, and needs the charts entry; this is the tile, and needs nothing.
+
+## Anatomy
+
+- **Plate** (required) — An <article> at --radius with a hairline round it and 12px of padding, or whatever asChild is handed. It has no heading and no landmark: a row of four is a row of readings, not four sections.
+- **Label** (required) — label as an eyebrow at --ink-3-aa. Nothing binds it to the figure programmatically, so document order is the whole association.
+- **Tone dot** — A StatusDot beside the label when tone is set, un-pulsed and aria-hidden. Decoration by construction, which is why whatever it means has to be in detail as well.
+- **Figure** (required) — value in the mono face at --fs-item with tabular figures, printed exactly as handed over — no unit, currency or locale is guessed. Tabular because four tiles in a row are read down the column as much as along it.
+- **Detail** — detail under the figure at --ink-2 in the small step. One line: what makes the number a reading rather than a count.
+- **Aside** — aside, last, unwrapped and unstyled: a Sparkline, a denominator, a caveat. Unlike BigNumber’s note slot it carries no margin of its own, so a tight tile stays tight.
+
+## Best practices
+
+### Do
+
+- Put whatever the tone means into detail as well. The dot is aria-hidden by construction, so a tile whose only account of a failure is that it is red says nothing at all to a screen reader, and nothing in greyscale.
+- Format value at the call site. It is printed exactly as handed over, which is what lets a locale, a currency and a unit be decided once by the application rather than guessed four times by four tiles.
+- Give the slotted child no children of its own under asChild. The label and the figure are injected into it, so `<Link href="/jobs" />` is the whole call — a child with content of its own gets that content and the tile both.
+
+### Don’t
+
+- Do not reach for this where there is one figure and a change to report. BigNumber has a delta, a direction stated by the call site and an announced verdict; a tone dot is not any of those, and re-implementing them in aside gets the announcement wrong.
+- Do not write a sentence into detail under asChild. The whole tile is inside one link, so the link’s accessible name is every word in it read in order, and a clause added there is a clause read out every time the link is reached.
+- Do not put a heading inside one. The plate is an <article> with no name, so a heading in it opens a section a screen reader will list — four tiles then read as four sections of the page rather than as one row of figures.
+
+## Accessibility
+
+- The tone dot is aria-hidden without exception, so colour is never the only carrier — the words in detail are.
+- value is taken already formatted. The component does not guess a unit, a currency or a locale.
+- Under asChild the tile becomes the caller’s element, so the link or button is the whole plate rather than a target inside it.
+
+## Metric
+
+One reading, on a plate: a label, a figure, and what qualifies it. Distinct from `BigNumber`, which is the same idea at headline scale for the ONE figure a view is about, and which needs the charts entry. This is the tile that appears four across on a console: smaller, monospaced rather than editorial, and carrying two things `BigNumber` has nowhere for — a status tone, and a free slot under the number that is not a delta. Those two are the whole reason it exists; a dashboard whose tiles have to be a `<div>` because the delta does not apply is a dashboard with two tile designs in it. The figure is monospace and tabular by construction, because four of these in a row are read down the column as much as along it, and proportional digits put the same magnitude at two different widths.
+
+### Props
+
+- `label` (required) — `ReactNode`. What the figure counts.
+- `value` (required) — `ReactNode`. The figure, already formatted — this does not guess a unit or a locale.
+- `detail` — `ReactNode`. One line of context. A figure without it is a number, not a reading.
+- `tone` — `StatusTone`. How the reading stands. Drawn as a dot beside the label, and only ever a SECOND carrier: the dot is `aria-hidden`, so whatever the tone means has to be in `detail` as well or it reaches nobody who cannot see it.
+- `aside` — `ReactNode`. A sparkline, a denominator, a caveat. Sits under the figure.
+- `asChild` — `boolean` default `false`. Render `children` as the tile instead of the `<article>`, keeping these styles — how a linkable tile gets a router's own `Link` without this package importing one. The slotted element must take no children of its own: the label, the figure and everything under them are injected INTO it, which is the point. A whole tile inside one link also means the link's accessible name is every word in it, read in order — "Rows, 63,851, newest yesterday" — so keep `detail` short enough to be heard as part of a link.
+- `children` — `ReactNode`. The element the tile becomes under `asChild`. Ignored without it.
+- `className` — `string`.
+
+Also accepts: `HTMLAttributes<HTMLElement>`.
+
+## Examples
+
+```tsx
+<Metric label="Rows" value="63,851" detail="newest yesterday" tone="success" />
+// A tile that is also a link, with the router's own component.
+<Metric asChild label="Jobs" value="12" detail="3 waiting">
+  <Link href="/jobs" />
+</Metric>
+```

package/dist/agent/Metrics.md

@@ -0,0 +1,114 @@
+# Metrics
+
+Metric panels, accessible data tables and chart arrangements.
+
+- Kind: pattern
+- Group: Website
+- Import: `import { MetricsRange } from '@misoto22/folio/website'`
+- Version: 0.17.0
+- Docs: https://ui.misoto22.com/components/metrics/
+
+## When to reach for it
+
+Arrange measurements and externally rendered charts without importing chart engines.
+
+## Best practices
+
+### Do
+
+- Supply localized labels, descriptive links and meaningful image alternatives.
+
+### Don’t
+
+- Do not put service credentials, routing logic or backend models inside presentation components.
+
+## MetricsRange
+
+A controlled range selector. Selection represents the data the host successfully loaded.
+
+### Props
+
+- `label` (required) — `string`.
+- `value` (required) — `string`.
+- `options` (required) — `{ value: string; label: string }[]`.
+- `onChange` (required) — `(value: string) => void`.
+
+## MetricsSection
+
+A dashboard section without a dependency on a chart engine or a domain response.
+
+### Props
+
+- `title` — `ReactNode`.
+- `caption` — `ReactNode`.
+- `action` — `ReactNode`.
+- `children` (required) — `ReactNode`.
+
+Also accepts: `Omit<HTMLAttributes<HTMLElement>, 'title'>`.
+
+## MetricsPanel
+
+A labeled panel. Children may use the separately imported charts entry.
+
+### Props
+
+- `title` (required) — `string`.
+- `caption` — `string`.
+- `children` (required) — `ReactNode`.
+
+Also accepts: `Omit<HTMLAttributes<HTMLElement>, 'title'>`.
+
+## MetricsPanelGrid
+
+Responsive grids share their dividers and minimum panel width.
+
+### Props
+
+- `columns` — `2 | 4` default `2`.
+
+Also accepts: `HTMLAttributes<HTMLDivElement>`.
+
+## MetricsEmptyState
+
+An empty time series retains its plot space and tells the reader what will appear once the first observation arrives.
+
+### Props
+
+- `title` (required) — `ReactNode`.
+- `description` (required) — `ReactNode`.
+
+## MetricsList
+
+Already-formatted metric rows, with a named value relation and an explicit empty state.
+
+### Props
+
+- `label` (required) — `string`.
+- `items` (required) — `{ id: string; label: ReactNode; value: ReactNode; icon?: ReactNode }[]`.
+- `empty` (required) — `string`.
+
+## MetricValue
+
+A supplied number with its units on the supporting type step.
+
+### Props
+
+- `segments` (required) — `{ text: string; unit?: boolean }[]`.
+
+## MetricDelta
+
+Neutral direction marks never assume an increase is good or a decrease is an error.
+
+### Props
+
+- `direction` (required) — `'up' | 'down' | 'steady'`.
+- `children` (required) — `ReactNode`.
+
+## LiveCount
+
+Unknown live counts remain absent; a measured zero is a real reading.
+
+### Props
+
+- `value` (required) — `number | null`.
+- `label` (required) — `string`.

package/dist/agent/Music.md

@@ -0,0 +1,86 @@
+# Music
+
+Featured recordings, track rows and playlist collections.
+
+- Kind: pattern
+- Group: Website
+- Import: `import { MediaListRow } from '@misoto22/folio/website'`
+- Version: 0.17.0
+- Docs: https://ui.misoto22.com/components/music/
+
+## When to reach for it
+
+Present supplied listening data and playback controls without choosing a music service.
+
+## Best practices
+
+### Do
+
+- Supply localized labels, descriptive links and meaningful image alternatives.
+
+### Don’t
+
+- Do not put service credentials, routing logic or backend models inside presentation components.
+
+## MediaListRow
+
+A ranked recording or artist, controlled by the host's one media player.
+
+### Props
+
+- `index` (required) — `number`.
+- `artwork` — `ReactNode`.
+- `title` (required) — `ReactNode`.
+- `description` — `ReactNode`.
+- `trailing` — `ReactNode`.
+- `preview` (required) — `MediaPreviewAction`.
+- `active` — `boolean` default `false`.
+- `artworkShape` — `'square' | 'circle'` default `'square'`.
+
+Also accepts: `Omit<HTMLAttributes<HTMLDivElement>, 'title'>`.
+
+## MusicFeature
+
+The same media feature geometry for playing, recent and unavailable recordings.
+
+### Props
+
+- `label` (required) — `string`.
+- `title` (required) — `ReactNode`.
+- `description` — `ReactNode`.
+- `artwork` — `ReactNode`.
+- `artworkFallback` (required) — `string`.
+- `live` — `boolean` default `false`.
+- `notice` — `string`.
+- `action` — `ReactNode`.
+- `progress` — `{ label: string; value: number; max: number; currentLabel: string; endLabel: string }`.
+
+Also accepts: `Omit<HTMLAttributes<HTMLElement>, 'title'>`.
+
+## MediaCollectionCard
+
+A playlist, album or other media collection with one explicit preview action.
+
+### Props
+
+- `title` (required) — `ReactNode`.
+- `artwork` — `ReactNode`.
+- `tag` — `string | null`.
+- `description` — `string | null`.
+- `metadata` — `ReactNode`.
+- `preview` (required) — `MediaPreviewAction`.
+
+Also accepts: `Omit<HTMLAttributes<HTMLElement>, 'title'>`.
+
+## MusicSection
+
+A media list's heading, caption and collection layout.
+
+### Props
+
+- `title` (required) — `string`.
+- `caption` — `string`.
+- `children` (required) — `ReactNode`.
+- `layout` — `'list' | 'collections'` default `'list'`.
+
+Also accepts: `HTMLAttributes<HTMLElement>`.

package/dist/agent/NativeSelect.md

@@ -0,0 +1,62 @@
+# NativeSelect
+
+The platform’s own picker, restyled where it can be.
+
+- Kind: component
+- Group: Forms
+- Import: `import { NativeSelect } from '@misoto22/folio'`
+- Version: 0.17.0
+- Docs: https://ui.misoto22.com/components/native-select/
+- Related: select, field
+
+## When to reach for it
+
+The escape hatch, not the default. Reach for it where the platform genuinely wins: a very long list on a phone, a form that must work without JavaScript, a page counting its last kilobyte.
+
+## Anatomy
+
+- **Wrapper** (required) — A relative <div> around the pair, and the element className lands on. It is the only control in this group where className does not go to the field itself, because the chevron is pinned to this box: a width set anywhere else strands the arrow at the far edge of the row.
+- **Control box** (required) — The <select> on CONTROL_BASE, appearance-none so the platform’s own arrow is gone, with pe-9 of end padding so the longest option clears the drawn one. It fills the wrapper, so the wrapper’s width is the field’s width.
+- **Chevron** (required) — A pointer-events-none icon pinned to the wrapper’s end edge. It is ours, not the platform’s, so it does not flip or move when the picker opens.
+- **Option list** — children, drawn by the operating system on open. <option> and <optgroup> are the only things in it, and neither takes these tokens.
+
+## Best practices
+
+### Do
+
+- Give it an explicit empty first option, or a defaultValue. A <select> nobody touches has its first option selected, so an untouched form submits the top of the list as though someone chose it.
+- Group with <optgroup>: it is the one piece of structure the OS picker actually renders, and there is no styled equivalent to fall back on the way SelectLabel gives Select one.
+- Set the width with className. It lands on the wrapper the chevron is pinned to and the select fills it, so the arrow travels with the edge of the field rather than staying where the row ends.
+
+### Don’t
+
+- multiple and size do not survive the styling: appearance-none plus a chevron pinned to the middle of the wrapper turns a list box into a scrolling column with an arrow drawn across it. Use checkboxes, or a multiple Combobox.
+- Do not use the first option as the label. “Select a country” is announced as a choosable value and it is the value an untouched form submits — put the name in a Field and give that option value="" and disabled.
+- Do not send the control’s own ink or border through className: it dresses the wrapper, and the <select> inside keeps CONTROL_BASE whatever the box around it says.
+
+## Accessibility
+
+- Typeahead and the mobile wheel come free, from the browser.
+- What it cannot do is look like the rest of the system once open — the option list is drawn by the operating system and carries none of these tokens.
+
+## Keyboard
+
+- Space / ↓ — Opens the platform picker.
+- a–z — Typeahead, from the browser’s own implementation.
+
+## NativeSelect
+
+A native `<select>`, restyled. The escape hatch, not the default — `Select` is the styled one. Reach for this where the platform's own picker is genuinely better: a very long list on a phone, a form that must work without JavaScript, a page where the last kilobyte matters. The browser gives typeahead and the mobile wheel for free, and those are real. What it cannot do is look like the rest of the system once open. The option list is drawn by the operating system, so it carries none of these tokens — which is exactly why it stopped being the default. `className` sizes the WRAPPER, not the `<select>` inside it. This is the one control here that renders two elements, and the chevron is pinned to the wrapper's end edge: a width on the select alone narrowed the box and left the arrow floating at the far side of the row. The select fills whatever the wrapper is.
+
+### Props
+
+- `invalid` — `boolean`. Paints the resting border with `--danger` and reflects `aria-invalid`.
+- `ref` — `Ref<HTMLSelectElement>`.
+
+Also accepts: `SelectHTMLAttributes<HTMLSelectElement>`.
+
+## Examples
+
+```tsx
+<NativeSelect defaultValue="au"><option value="au">Australia</option></NativeSelect>
+```

package/dist/agent/NavItem.md

@@ -0,0 +1,56 @@
+# NavItem
+
+A row in a sidebar.
+
+- Kind: component
+- Group: Navigation
+- Import: `import { NavItem } from '@misoto22/folio'`
+- Version: 0.17.0
+- Docs: https://ui.misoto22.com/components/nav-item/
+- Related: app-shell
+
+## Anatomy
+
+- **Row** (required) — An <a href> at --control-h-sm with the --radius corner — or, under asChild, the router link you handed it, which receives the classes and aria-current and becomes the row itself.
+- **Icon** — An optional Remix Icon component at 18px, aria-hidden, ahead of the label. It is rendered by the native branch only: a slotted row takes its icon inside the child, because Slot accepts exactly one.
+- **Label** (required) — children, and the row’s whole accessible name — the icon contributes nothing to it.
+- **Active ground** — What active turns on, in one move: a --stone fill, medium weight, and aria-current="page". Three signals, so the current row survives monochrome and low contrast.
+
+## Best practices
+
+### Do
+
+- Repeat href on the slotted child: asChild forwards the classes and aria-current and nothing else, so a <Link> that does not carry its own href is a row that navigates nowhere.
+- Put the icon inside the child in asChild mode — the icon prop is silently dropped there, which is how a whole sidebar renders as a column of unlabelled-looking rows.
+- Derive active from the router’s current path rather than from the last click: it is what writes aria-current="page", so a sidebar tracking its own clicks tells a reader they are on the row they pressed instead of the page they are on.
+
+### Don’t
+
+- Do not mark a parent row active to show which section contains the page: active means aria-current="page", and two of them is a reader told they are in two places at once.
+- Do not tighten the row further: it is --control-h-sm, which is 36px comfortable and 30px under data-density="compact", and a py class below that leaves a column of targets a thumb has to aim at.
+
+## Accessibility
+
+- aria-current="page" and not only a colour: the active row is also carried by weight and a filled ground.
+
+## NavItem
+
+A row in a sidebar. `aria-current="page"` and not only a colour: the active row has to be identifiable to a reader who cannot see that it is darker. In this system it is also carried by weight and by a filled ground, so it survives monochrome printing and low contrast. Framework-agnostic. `asChild` is how a Next or React Router app gets client-side navigation without this package importing either.
+
+### Props
+
+- `href` (required) — `string`.
+- `icon` — `RemixiconComponentType`. Optional leading icon (a `@remixicon/react` component, rendered at 18px).
+- `active` — `boolean` default `false`. Marks the current route. Also sets `aria-current="page"`.
+- `asChild` — `boolean` default `false`. Hand the styling to a router's own `Link` instead of a native `<a>`. The slotted child receives the classes and `aria-current`, and becomes the row — so `icon` is not rendered in this mode; put it inside the child.
+- `children` (required) — `ReactNode`.
+- `className` — `string`.
+
+Also accepts: `Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'>`.
+
+## Examples
+
+```tsx
+<NavItem href="/components/button" icon={Square} active>Button</NavItem>
+<NavItem asChild href="/work"><Link href="/work">Work</Link></NavItem>
+```