@alexgorbatchev/shadcn 0.0.49 → 0.0.50

package/dist/index.d.ts

@@ -67,7 +67,8 @@ export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./component
 export { Spinner } from "./components/Spinner.js";
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableColumnGroup, TableColumn, } from "./components/Table.js";
 export type { TableTextAlign, TableVisibility } from "./components/Table.js";
-export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./components/NativeSelect.js";
+export { OptionSelect } from "./components/OptionSelect.js";
+export type { OptionSelectOption, OptionSelectProps } from "./components/OptionSelect.js";
 export { Kbd, KbdGroup } from "./components/Kbd.js";
 export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, } from "./components/Item.js";
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "./components/Pagination.js";
@@ -119,6 +120,8 @@ export { WeatherForecast } from "./components/WeatherForecast.js";
 export type { WeatherForecastDay, WeatherForecastProps } from "./components/WeatherForecast.js";
 export { PageHeader } from "./components/PageHeader.js";
 export type { PageHeaderProps } from "./components/PageHeader.js";
+export { PageIntro } from "./components/PageIntro.js";
+export type { PageIntroHighlight, PageIntroProps } from "./components/PageIntro.js";
 export { WorkspaceSwitcher } from "./components/WorkspaceSwitcher.js";
 export type { WorkspaceSwitcherProps } from "./components/WorkspaceSwitcher.js";
 export { AccountMenu } from "./components/AccountMenu.js";

package/dist/index.js

@@ -30,16 +30,6 @@ import {
   AlertDialogDescription2,
   AlertDialogAction2,
   AlertDialogCancel2,
-  Select2,
-  SelectGroup2,
-  SelectValue2,
-  SelectTrigger2,
-  SelectContent2,
-  SelectLabel2,
-  SelectItem2,
-  SelectSeparator2,
-  SelectScrollUpButton2,
-  SelectScrollDownButton2,
   DensityProvider2,
   collectLayoutViolations2,
   LayoutGuard2,
@@ -169,6 +159,7 @@ import {
   WeatherSummary2,
   WeatherForecast2,
   PageHeader2,
+  PageIntro2,
   WorkspaceSwitcher2,
   AccountMenu2,
   StatCard2,
@@ -180,7 +171,7 @@ import {
   StatusTracker2,
   DashboardLayout2,
   BillingUsage2
-} from "./chunk-jhvy8jay.js";
+} from "./chunk-f43963xy.js";
 import {
   Tabs2,
   tabsListVariants2,
@@ -195,7 +186,7 @@ import {
   useDropTarget2,
   DropTarget2,
   Kanban2
-} from "./chunk-62ggz655.js";
+} from "./chunk-zs4h45d8.js";
 import {
   Toolbar2,
   ToolbarButton2,
@@ -229,11 +220,6 @@ import {
   NumberFieldScrubArea2,
   NumberFieldScrubAreaCursor2
 } from "./chunk-31wptjv4.js";
-import {
-  NativeSelect2,
-  NativeSelectOption2,
-  NativeSelectOptGroup2
-} from "./chunk-sp4g23m0.js";
 import {
   Slider2
 } from "./chunk-7cq1s2ey.js";
@@ -408,6 +394,19 @@ import {
   PopoverTitle2,
   PopoverDescription2
 } from "./chunk-bf8kbj33.js";
+import {
+  Select2,
+  SelectGroup2,
+  SelectValue2,
+  SelectTrigger2,
+  SelectContent2,
+  SelectLabel2,
+  SelectItem2,
+  SelectSeparator2,
+  SelectScrollUpButton2,
+  SelectScrollDownButton2,
+  OptionSelect2
+} from "./chunk-xfryhw7e.js";
 import {
   Dialog2,
   DialogTrigger2,
@@ -707,9 +706,6 @@ export {
   MeterLabel2 as MeterLabel,
   MeterTrack2 as MeterTrack,
   MeterValue2 as MeterValue,
-  NativeSelect2 as NativeSelect,
-  NativeSelectOptGroup2 as NativeSelectOptGroup,
-  NativeSelectOption2 as NativeSelectOption,
   NavigationMenu2 as NavigationMenu,
   NavigationMenuContent2 as NavigationMenuContent,
   NavigationMenuIndicator2 as NavigationMenuIndicator,
@@ -725,7 +721,9 @@ export {
   NumberFieldInput2 as NumberFieldInput,
   NumberFieldScrubArea2 as NumberFieldScrubArea,
   NumberFieldScrubAreaCursor2 as NumberFieldScrubAreaCursor,
+  OptionSelect2 as OptionSelect,
   PageHeader2 as PageHeader,
+  PageIntro2 as PageIntro,
   PageMessage2 as PageMessage,
   Pagination2 as Pagination,
   PaginationContent2 as PaginationContent,

package/dist/prototype.js

@@ -2051,7 +2051,7 @@ var program = new Command;
 // package.json
 var package_default = {
   name: "@alexgorbatchev/shadcn",
-  version: "0.0.49",
+  version: "0.0.50",
   description: "Sharp, monospace React components with compact and comfortable densities.",
   license: "MIT",
   repository: {

package/llms/components/data-display/Table.md

@@ -8,7 +8,7 @@ Source: src/components/stories/data-display/Table.stories.tsx
 ## Public imports
 
 ```tsx
-import { Dialog, DialogContent, DialogTitle, DialogDescription, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, Table, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFooter, TableHead, TableHeader, TableRow, Button, DirectionProvider, Checkbox, Input, Field, FieldGroup, FieldLabel, NativeSelect, NativeSelectOption } from "@alexgorbatchev/shadcn";
+import { Dialog, DialogContent, DialogTitle, DialogDescription, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, Table, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableFooter, TableHead, TableHeader, TableRow, Button, DirectionProvider, Checkbox, Input, Field, FieldGroup, FieldLabel, OptionSelect } from "@alexgorbatchev/shadcn";
 ```
 
 ## Supporting imports

package/llms/components/forms/OptionSelect.md

@@ -0,0 +1,100 @@
+# OptionSelect
+
+Story: @alexgorbatchev/shadcn/components/forms/OptionSelect
+Source: src/components/stories/forms/OptionSelect.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/forms/OptionSelect.stories.tsx)
+
+## Public imports
+
+```tsx
+import { Button, OptionSelect } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { useState } from "react";
+```
+
+## Default component
+
+```tsx
+OptionSelect
+```
+
+## Default args
+
+```tsx
+{ options, defaultValue: "bun", "aria-label": "Runtime", onValueChange }
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Default
+
+```tsx
+{}
+```
+
+### EmptyStringIsAnOption
+
+```tsx
+{
+    args: { defaultValue: "" }
+}
+```
+
+### Placeholder
+
+```tsx
+{
+    args: { defaultValue: undefined, options: options.slice(1), placeholder: "Pick a runtime" }
+}
+```
+
+### Disabled
+
+```tsx
+{
+    args: { disabled: true }
+}
+```
+
+### Controlled
+
+```tsx
+{
+    render: () => <ControlledExample />
+}
+```
+
+### SubmitsWithAForm
+
+```tsx
+{
+    render: (args) => (<form onSubmit={(event) => {
+            event.preventDefault();
+            onSubmit(new FormData(event.currentTarget).get("runtime"));
+        }}>
+      <OptionSelect {...args} name="runtime"/>
+      <Button type="submit">Save</Button>
+    </form>),
+    args: { defaultValue: "" }
+}
+```
+
+### FullWidth
+
+```tsx
+{
+    args: { width: "full" },
+    decorators: [
+        (Story) => (<div className="w-96">
+        <Story />
+      </div>),
+    ]
+}
+```

package/llms/components/layout/PageIntro.md

@@ -0,0 +1,102 @@
+# PageIntro
+
+Story: @alexgorbatchev/shadcn/components/layout/PageIntro
+Source: src/components/stories/layout/PageIntro.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/layout/PageIntro.stories.tsx)
+
+## Public imports
+
+```tsx
+import { PageIntro, Button } from "@alexgorbatchev/shadcn";
+```
+
+## Supporting imports
+
+```tsx
+import { BookmarkIcon, CalendarIcon, HeartIcon, SparklesIcon } from "lucide-react";
+```
+
+## Default component
+
+```tsx
+PageIntro
+```
+
+## Default args
+
+```tsx
+{
+    icon: <BookmarkIcon />,
+    title: "Projects",
+    description: "Everything your team is working on, in one place you will actually want to open.",
+    actions: <Button onClick={action}>New project</Button>,
+    highlights,
+}
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### Default
+
+```tsx
+{}
+```
+
+### WithoutHighlights
+
+```tsx
+{
+    args: { highlights: undefined }
+}
+```
+
+### EmptyHighlights
+
+```tsx
+{
+    args: { highlights: [] }
+}
+```
+
+### WithEyebrow
+
+```tsx
+{
+    args: { eyebrow: "WEEKEND CREW", actions: undefined }
+}
+```
+
+### TextOnly
+
+```tsx
+{
+    args: { icon: undefined, actions: undefined, highlights: undefined }
+}
+```
+
+### Narrow
+
+```tsx
+{
+    decorators: [
+        (Story) => (<div className="w-80 max-w-full">
+        <Story />
+      </div>),
+    ]
+}
+```
+
+### Wide
+
+```tsx
+{
+    decorators: [
+        (Story) => (<div className="w-5xl max-w-full">
+        <Story />
+      </div>),
+    ]
+}
+```

package/llms/components/navigation/ContextMenu.md

@@ -8,7 +8,7 @@ Source: src/components/stories/navigation/ContextMenu.stories.tsx
 ## Public imports
 
 ```tsx
-import { Button, DirectionProvider, Toggle, NativeSelect, NativeSelectOption, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "@alexgorbatchev/shadcn";
+import { Button, DirectionProvider, Toggle, OptionSelect, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "@alexgorbatchev/shadcn";
 ```
 
 ## Supporting imports
@@ -44,10 +44,10 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
           Show details
         </Toggle>
-        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
-          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
-          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
-        </NativeSelect>
+        <OptionSelect aria-label="Sort projects" value={sort} onValueChange={setSort} options={[
+                { value: "name", label: "Sort by name" },
+                { value: "date", label: "Sort by date" },
+            ]}/>
         <ContextMenu {...args}>
           <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
           <ContextMenuContent aria-label="Project actions">
@@ -99,10 +99,10 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
           Show details
         </Toggle>
-        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
-          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
-          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
-        </NativeSelect>
+        <OptionSelect aria-label="Sort projects" value={sort} onValueChange={setSort} options={[
+                { value: "name", label: "Sort by name" },
+                { value: "date", label: "Sort by date" },
+            ]}/>
         <ContextMenu {...args}>
           <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
           <ContextMenuContent aria-label="Project actions">
@@ -155,10 +155,10 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
           Show details
         </Toggle>
-        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
-          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
-          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
-        </NativeSelect>
+        <OptionSelect aria-label="Sort projects" value={sort} onValueChange={setSort} options={[
+                { value: "name", label: "Sort by name" },
+                { value: "date", label: "Sort by date" },
+            ]}/>
         <ContextMenu {...args}>
           <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
           <ContextMenuContent aria-label="Project actions">
@@ -220,10 +220,10 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
           Show details
         </Toggle>
-        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
-          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
-          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
-        </NativeSelect>
+        <OptionSelect aria-label="Sort projects" value={sort} onValueChange={setSort} options={[
+                { value: "name", label: "Sort by name" },
+                { value: "date", label: "Sort by date" },
+            ]}/>
         <ContextMenu>
           <ContextMenuTrigger className={args.triggerClassName}>Right click for callbacks</ContextMenuTrigger>
           <ContextMenuContent aria-label="Callback actions" className={args.contentClassName}>
@@ -276,10 +276,10 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
           Show details
         </Toggle>
-        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
-          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
-          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
-        </NativeSelect>
+        <OptionSelect aria-label="Sort projects" value={sort} onValueChange={setSort} options={[
+                { value: "name", label: "Sort by name" },
+                { value: "date", label: "Sort by date" },
+            ]}/>
         <ContextMenu {...args}>
           <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
           <ContextMenuContent aria-label="Project actions">
@@ -339,10 +339,10 @@ Storybook CSF excerpts. Default args and render apply unless overridden. Local h
         <Toggle aria-label="Show details" pressed={checked} onPressedChange={setChecked}>
           Show details
         </Toggle>
-        <NativeSelect aria-label="Sort projects" value={sort} onChange={(event) => setSort(event.currentTarget.value)}>
-          <NativeSelectOption value="name">Sort by name</NativeSelectOption>
-          <NativeSelectOption value="date">Sort by date</NativeSelectOption>
-        </NativeSelect>
+        <OptionSelect aria-label="Sort projects" value={sort} onValueChange={setSort} options={[
+                { value: "name", label: "Sort by name" },
+                { value: "date", label: "Sort by date" },
+            ]}/>
         <ContextMenu {...args}>
           <ContextMenuTrigger className="border border-border p-panel">Right click the project</ContextMenuTrigger>
           <ContextMenuContent aria-label="Project actions">

package/llms/setup.md

@@ -261,9 +261,9 @@ The npm package includes the same index at `llms.txt` in its root and its linked
 | Area                     | Components                                                                                                                                                                                    |
 | :----------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Actions and status       | Alert, Badge, Button, ButtonGroup, ButtonLink, Sonner, Toast, Toggle, ToggleGroup                                                                                                             |
-| Forms and selections     | AuthForm, Calendar, Checkbox, Combobox, Command, EmailCodeAuthForm, Field, Input, InputGroup, InputOTP, Label, NativeSelect, Questionnaire, RadioGroup, Select, Slider, Switch, Textarea      |
+| Forms and selections     | AuthForm, Calendar, Checkbox, Combobox, Command, EmailCodeAuthForm, Field, Input, InputGroup, InputOTP, Label, OptionSelect, Questionnaire, RadioGroup, Select, Slider, Switch, Textarea      |
 | Structure and navigation | Accordion, AspectRatio, Avatar, Breadcrumb, Card, Carousel, Chart, Collapsible, Empty, Item, Kbd, Menubar, NavigationMenu, Pagination, Resizable, ScrollArea, Separator, Sidebar, Table, Tabs |
-| Layout and typography    | AppShell, Container, Grid, GridItem, Heading, PageHeader, Stack, Text                                                                                                                         |
+| Layout and typography    | AppShell, Container, Grid, GridItem, Heading, PageHeader, PageIntro, Stack, Text                                                                                                              |
 | Data display             | WeatherForecast, WeatherSummary                                                                                                                                                               |
 | Overlays                 | AlertDialog, ContextMenu, Dialog, Drawer, DropdownMenu, HoverCard, Popover, Sheet, Tooltip                                                                                                    |
 | Loading                  | Progress, Skeleton, Spinner                                                                                                                                                                   |

package/llms.txt

@@ -396,8 +396,8 @@ Generated from the public package exports and Storybook sources.
 - [InputGroup](./llms/components/forms/InputGroup.md)
 - [InputOTP](./llms/components/forms/InputOTP.md)
 - [Label](./llms/components/forms/Label.md)
-- [NativeSelect](./llms/components/forms/NativeSelect.md)
 - [NumberField](./llms/components/forms/NumberField.md)
+- [OptionSelect](./llms/components/forms/OptionSelect.md)
 - [Questionnaire](./llms/components/forms/Questionnaire.md)
 - [RadioGroup](./llms/components/forms/RadioGroup.md)
 - [RichTextEditor](./llms/components/forms/RichTextEditor.md)
@@ -422,6 +422,7 @@ Generated from the public package exports and Storybook sources.
 - [DashboardLayout](./llms/components/layout/DashboardLayout.md)
 - [Grid](./llms/components/layout/Grid.md): Grid lays out equal columns without consumer classes. `columns` is 1–6 or 12, or a viewport breakpoint map such as `{ base: 1, md: 2, xl: 4 }`. `minColumnWidth` (xs 8rem, sm 12rem, md 16rem, lg 22rem) instead fits as many columns as the grid's own width allows, which suits card grids inside panes of any size. `gap` defaults to the density-aware `panel` token. GridItem `span` (1–6 or `full`, optionally per breakpoint) widens a cell; `full` always spans every column. Both accept `render` for semantic elements such as `<ul />` and `<li />`.
 - [PageHeader](./llms/components/layout/PageHeader.md)
+- [PageIntro](./llms/components/layout/PageIntro.md)
 - [Resizable](./llms/components/layout/Resizable.md)
 - [ScrollArea](./llms/components/layout/ScrollArea.md)
 - [Separator](./llms/components/layout/Separator.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.49",
+  "version": "0.0.50",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {

package/templates/prototype/src/components/Workbench.tsx

@@ -5,8 +5,7 @@ import {
   Field,
   FieldGroup,
   FieldLabel,
-  NativeSelect,
-  NativeSelectOption,
+  OptionSelect,
   ThemeProvider,
 } from "@alexgorbatchev/shadcn";
 import type { PrototypeDefinition, Scenario } from "../types";
@@ -50,60 +49,71 @@ export function Workbench(): ReactElement {
                 <div className="grid grid-cols-2 items-end gap-4 md:grid-cols-4 xl:grid-cols-7">
                   <Field>
                     <FieldLabel htmlFor="prototype">Prototype</FieldLabel>
-                    <NativeSelect id="prototype" value={selected} onChange={(event) => setSelected(event.target.value)}>
-                      {prototypes.map((prototype) => (
-                        <NativeSelectOption key={prototype.id} value={prototype.id}>
-                          {prototype.title}
-                        </NativeSelectOption>
-                      ))}
-                    </NativeSelect>
+                    <OptionSelect
+                      id="prototype"
+                      width="full"
+                      value={selected}
+                      onValueChange={setSelected}
+                      options={prototypes.map((prototype) => ({ value: prototype.id, label: prototype.title }))}
+                    />
                   </Field>
                   <Field>
                     <FieldLabel htmlFor="scenario">Scenario</FieldLabel>
-                    <NativeSelect
+                    <OptionSelect
                       id="scenario"
+                      width="full"
                       value={scenario}
-                      onChange={(event) => {
-                        const value = event.target.value;
+                      onValueChange={(value) => {
                         if (value === "populated" || value === "empty" || value === "loading" || value === "error")
                           setScenario(value);
                       }}
-                    >
-                      <NativeSelectOption value="populated">Populated</NativeSelectOption>
-                      <NativeSelectOption value="empty">Empty</NativeSelectOption>
-                      <NativeSelectOption value="loading">Loading</NativeSelectOption>
-                      <NativeSelectOption value="error">Error</NativeSelectOption>
-                    </NativeSelect>
+                      options={[
+                        { value: "populated", label: "Populated" },
+                        { value: "empty", label: "Empty" },
+                        { value: "loading", label: "Loading" },
+                        { value: "error", label: "Error" },
+                      ]}
+                    />
                   </Field>
                   <Field>
                     <FieldLabel htmlFor="theme">Theme</FieldLabel>
-                    <NativeSelect
+                    <OptionSelect
                       id="theme"
+                      width="full"
                       value={theme}
-                      onChange={(event) => setTheme(event.target.value === "light" ? "light" : "dark")}
-                    >
-                      <NativeSelectOption value="dark">Dark</NativeSelectOption>
-                      <NativeSelectOption value="light">Light</NativeSelectOption>
-                    </NativeSelect>
+                      onValueChange={(value) => setTheme(value === "light" ? "light" : "dark")}
+                      options={[
+                        { value: "dark", label: "Dark" },
+                        { value: "light", label: "Light" },
+                      ]}
+                    />
                   </Field>
                   <Field>
                     <FieldLabel htmlFor="density">Density</FieldLabel>
-                    <NativeSelect
+                    <OptionSelect
                       id="density"
+                      width="full"
                       value={density}
-                      onChange={(event) => setDensity(event.target.value === "compact" ? "compact" : "comfortable")}
-                    >
-                      <NativeSelectOption value="comfortable">Comfortable</NativeSelectOption>
-                      <NativeSelectOption value="compact">Compact</NativeSelectOption>
-                    </NativeSelect>
+                      onValueChange={(value) => setDensity(value === "compact" ? "compact" : "comfortable")}
+                      options={[
+                        { value: "comfortable", label: "Comfortable" },
+                        { value: "compact", label: "Compact" },
+                      ]}
+                    />
                   </Field>
                   <Field>
                     <FieldLabel htmlFor="viewport">Viewport</FieldLabel>
-                    <NativeSelect id="viewport" value={viewport} onChange={(event) => setViewport(event.target.value)}>
-                      <NativeSelectOption value="responsive">Responsive</NativeSelectOption>
-                      <NativeSelectOption value="390">Mobile · 390px</NativeSelectOption>
-                      <NativeSelectOption value="1280">Desktop · 1280px</NativeSelectOption>
-                    </NativeSelect>
+                    <OptionSelect
+                      id="viewport"
+                      width="full"
+                      value={viewport}
+                      onValueChange={setViewport}
+                      options={[
+                        { value: "responsive", label: "Responsive" },
+                        { value: "390", label: "Mobile · 390px" },
+                        { value: "1280", label: "Desktop · 1280px" },
+                      ]}
+                    />
                   </Field>
                   <Button onClick={() => setRevision((value) => value + 1)}>Reset data</Button>
                   <a className="text-sm underline" href={`?${canvasParameters}`} target="_blank" rel="noreferrer">

package/templates/prototype/src/prototypes/dashboard/components/Dashboard.tsx

@@ -11,8 +11,7 @@ import {
   FieldGroup,
   FieldLabel,
   Grid,
-  NativeSelect,
-  NativeSelectOption,
+  OptionSelect,
   PageHeader,
   StatCard,
   Table,
@@ -36,11 +35,13 @@ export function Dashboard({ scenario }: PrototypeProps): ReactElement {
         <FieldGroup>
           <Field>
             <FieldLabel htmlFor="team">Team</FieldLabel>
-            <NativeSelect id="team" value={team} onChange={(event) => setTeam(event.target.value)}>
-              <NativeSelectOption>All teams</NativeSelectOption>
-              <NativeSelectOption>Product</NativeSelectOption>
-              <NativeSelectOption>Engineering</NativeSelectOption>
-            </NativeSelect>
+            <OptionSelect
+              id="team"
+              width="full"
+              value={team}
+              onValueChange={setTeam}
+              options={["All teams", "Product", "Engineering"].map((value) => ({ value, label: value }))}
+            />
           </Field>
         </FieldGroup>
         <Grid columns={{ base: 1, sm: 2 }} gap="panel">