@kennycorrea/ui 1.8.4 → 1.8.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.8.5 — 2026-11-04
+
+Icons on `Select` options.
+
+- **`icon` on `SelectOption`**: an optional `ReactNode` drawn before the label, in the list item and on the trigger once that option is chosen. It is `aria-hidden`, so the option is named by `label` alone, which stays a required `string`. An option without an icon renders exactly as before.
+- **Themes' `Select` is re-exported from primitives as `RadixSelect`**, the same way `DropdownMenu` is. It is aliased, like `RadixSegmentedControl`, because the `Select` atom already uses the name.
+- Tests in `test/Select-icon.test.tsx`. A combobox is never named from its content, so the trigger keeps its field label's name whatever the icon is (a titled SVG included). The tests also check that the icon is hidden and comes before the label text.
+
 ## 1.8.4 — 2026-10-30
 
 A `MentionTextarea` molecule.

package/dist/atoms/Select/Select.d.ts

@@ -1,6 +1,13 @@
+import { type ReactNode } from 'react';
 export interface SelectOption {
     value: string;
+    /** The option's text, and its accessible name — in the list and on the trigger. */
     label: string;
+    /**
+     * Drawn before the label, in the item and on the trigger once chosen. Decorative: it is
+     * hidden from assistive tech, so `label` alone names the option.
+     */
+    icon?: ReactNode;
 }
 export interface SelectProps {
     value?: string;

package/dist/atoms/Select/Select.js

@@ -12,5 +12,5 @@ import { cn } from '../../utils/cn.js';
  */
 export const Select = forwardRef(function Select({ value, onValueChange, options, placeholder, invalid = false, disabled, required, id, name, className, ...props }, ref) {
     const strings = useUiStrings();
-    return (_jsxs(ThemedSelect.Root, { value: value, onValueChange: onValueChange, disabled: disabled, required: required, name: name, children: [_jsx(ThemedSelect.Trigger, { ref: ref, id: id, placeholder: placeholder ?? strings.select, color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('ui-select-trigger w-full', className), ...props }), _jsx(ThemedSelect.Content, { position: "popper", children: options.map((option) => (_jsx(ThemedSelect.Item, { value: option.value, children: option.label }, option.value))) })] }));
+    return (_jsxs(ThemedSelect.Root, { value: value, onValueChange: onValueChange, disabled: disabled, required: required, name: name, children: [_jsx(ThemedSelect.Trigger, { ref: ref, id: id, placeholder: placeholder ?? strings.select, color: invalid ? 'red' : undefined, "aria-invalid": invalid || undefined, className: cn('ui-select-trigger w-full', className), ...props }), _jsx(ThemedSelect.Content, { position: "popper", children: options.map((option) => (_jsx(ThemedSelect.Item, { value: option.value, children: option.icon == null ? (option.label) : (_jsxs("span", { className: "ui-select-option inline-flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0", children: option.icon }), _jsx("span", { children: option.label })] })) }, option.value))) })] }));
 });

package/dist/primitives/index.d.ts

@@ -6,4 +6,4 @@
  * reaches for a `Table` or `Tabs` through this package rather than importing Themes beside it
  * and drifting from the version the atoms were built against.
  */
-export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl as RadixSegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';
+export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl as RadixSegmentedControl, Select as RadixSelect, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';

package/dist/primitives/index.js

@@ -6,4 +6,4 @@
  * reaches for a `Table` or `Tabs` through this package rather than importing Themes beside it
  * and drifting from the version the atoms were built against.
  */
-export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl as RadixSegmentedControl, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';
+export { AccessibleIcon, AlertDialog, AspectRatio, Blockquote, Box, Callout, CheckboxCards, CheckboxGroup, Code, Container, DataList, DropdownMenu, Em, Flex, Grid, Heading, HoverCard, IconButton, Inset, Kbd, Link, Portal, Quote, Radio, RadioCards, RadioGroup, Reset, ScrollArea, Section, SegmentedControl as RadixSegmentedControl, Select as RadixSelect, Slot, Slottable, Strong, Table, TabNav, Tabs, Text, TextField, Theme as ThemeRoot, ThemePanel, VisuallyHidden, } from '@radix-ui/themes';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "description": "A React + TypeScript component library built on Radix Themes: atoms, a Tailwind token bridge and theming.",
   "private": false,
   "type": "module",