@helpwave/hightide-native 0.7.0 → 0.9.1

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.7.0",
+  "version": "0.9.1",
   "type": "module",
   "files": [
     "src"
@@ -47,8 +47,8 @@
   },
   "dependencies": {
     "lucide-react-native": "0.561.0",
-    "@helpwave/hightide-utils": "0.1.1",
-    "@helpwave/hightide-design": "0.7.0"
+    "@helpwave/hightide-design": "0.7.2",
+    "@helpwave/hightide-utils": "0.1.3"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=2.0.0",
@@ -76,11 +76,9 @@
     "url": "https://github.com/helpwave/hightide/issues"
   },
   "scripts": {
-    "clean": "pnpm run barrel -- --clean && rm -rf node_modules",
-    "init": "pnpm run barrel",
-    "barrel": "node node_modules/@helpwave/hightide-utils/scripts/barrel.js",
-    "barrel:check": "node node_modules/@helpwave/hightide-utils/scripts/barrel.js --check",
-    "build": "pnpm run barrel",
+    "clean": "rm -rf node_modules",
+    "init": "node -e \"process.exit(0)\"",
+    "build": "node -e \"process.exit(0)\"",
     "lint": "eslint .",
     "test": "node -e \"process.exit(0)\""
   }

package/src/components/chat/ChatAttachmentMessageBubble.tsx

@@ -191,7 +191,7 @@ export const ChatAttachmentMessageBubble = ({
   downloadLabel = 'Download',
   onDownload,
   timestamp,
-  messageStatus,
+  status,
   style,
   bodyStyle,
   bodyTextStyle,
@@ -273,7 +273,7 @@ export const ChatAttachmentMessageBubble = ({
       {...props}
       direction={direction}
       timestamp={timestamp}
-      messageStatus={messageStatus}
+      status={status}
       style={resolvedContainerStyle}
       bodyStyle={resolvedBodyStyle}
       bodyTextStyle={resolvedBodyTextStyle}

package/src/components/chat/ChatMessageBubble.tsx

@@ -39,7 +39,7 @@ export type { ChatMessageDirection, ChatMessageStatus }
 export type ChatMessageBubbleProps = Omit<ViewProps, 'children' | 'style'> & {
   direction: ChatMessageDirection,
   timestamp?: Date,
-  messageStatus?: ChatMessageStatus,
+  status?: ChatMessageStatus,
   children?: ReactNode,
   style?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleContainerStyle>,
   bodyStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleBodyStyle>,
@@ -49,16 +49,17 @@ export type ChatMessageBubbleProps = Omit<ViewProps, 'children' | 'style'> & {
   metaDataTextStyle?: StyleOverwrite<ChatMessageBubbleState, ChatMessageBubbleMetaDataTextStyle>,
 }
 
-const resolveMessageStatusIcon = (messageStatus: ChatMessageStatus): IconComponent => (
-  messageStatus === 'sent'
+const resolveMessageStatusIcon = (status: ChatMessageStatus): IconComponent => (
+  status === 'sending'
     ? HightideIconRegistry.Clock
-    : HightideIconRegistry.CheckCheck
+    : status === 'sent' ? HightideIconRegistry.Check
+      : HightideIconRegistry.CheckCheck
 )
 
 export const ChatMessageBubble = ({
   direction,
   timestamp,
-  messageStatus,
+  status,
   children,
   style,
   bodyStyle,
@@ -86,14 +87,14 @@ export const ChatMessageBubble = ({
       : DateUtils.formatAbsolute(timestamp, locale, 'time', { timeZone, is24HourFormat })
   ), [timestamp, locale, timeZone, is24HourFormat])
   const messageStatusIcon = useMemo(
-    () => (messageStatus === undefined ? undefined : resolveMessageStatusIcon(messageStatus)),
-    [messageStatus]
+    () => (status === undefined ? undefined : resolveMessageStatusIcon(status)),
+    [status]
   )
   const messageStatusIconColor = useMemo(() => (
-    messageStatus === 'read'
+    status === 'read'
       ? theme.colors.primary.color
       : resolvedMetaDataIcon.color
-  ), [messageStatus, resolvedMetaDataIcon.color, theme.colors.primary.color])
+  ), [status, resolvedMetaDataIcon.color, theme.colors.primary.color])
 
   return (
     <View {...props} style={resolvedContainerStyle}>

package/src/components/user-interaction/Button.tsx

@@ -2,7 +2,8 @@ import { forwardRef, useMemo, useState } from 'react'
 import {
   Pressable,
   View,
-  type PressableProps
+  type PressableProps,
+  type TextProps
 } from 'react-native'
 
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
@@ -43,6 +44,7 @@ export type ButtonProps = Omit<PressableProps, 'children' | 'style'> & {
   style?: StyleOverwrite<ButtonState, ButtonStyle>,
   stateLayerStyle?: StyleOverwrite<ButtonState, ButtonStyle>,
   textStyle?: StyleOverwrite<ButtonState, ButtonTextStyle>,
+  textProps?: Omit<TextProps, 'style'>,
   iconStyle?: StyleOverwrite<ButtonState, IconStyle>,
 }
 
@@ -57,6 +59,7 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
   style,
   stateLayerStyle,
   textStyle,
+  textProps,
   iconStyle,
   hitSlop: providedHitSlop,
   onLayout: providedOnLayout,
@@ -120,7 +123,7 @@ export const Button = forwardRef<React.ComponentRef<typeof Pressable>, ButtonPro
         {leadingIcon !== undefined && (
           <ThemedIcon icon={leadingIcon} />
         )}
-        <ThemedText>{children}</ThemedText>
+        <ThemedText numberOfLines={1} ellipsizeMode="tail" {...textProps}>{children}</ThemedText>
         {trailingIcon !== undefined && (
           <ThemedIcon icon={trailingIcon} />
         )}

package/src/components/user-interaction/MultiSelect/MultiSelect.tsx

@@ -1,40 +1,17 @@
-import type { ReactNode } from 'react'
-import { View, type StyleProp, type ViewStyle } from 'react-native'
-
-import type { MultiSelectRootProps } from './MultiSelectRoot'
+import { MultiSelectComponent } from './MultiSelectComponent'
+import { MultiSelectContext } from './MultiSelectContext'
+import { MultiSelectMenu } from './MultiSelectMenu'
+import { MultiSelectOption } from './MultiSelectOption'
 import { MultiSelectRoot } from './MultiSelectRoot'
-import type { MultiSelectOptionType } from './MultiSelectContext'
-import { MultiSelectMenu, type MultiSelectMenuProps } from './MultiSelectMenu'
-import { MultiSelectTrigger, type MultiSelectTriggerProps } from './MultiSelectTrigger'
+import { MultiSelectTrigger } from './MultiSelectTrigger'
 
-export type MultiSelectProps<T = string> = Omit<MultiSelectRootProps<T>, 'children'> & {
-  children?: ReactNode,
-  placeholder?: MultiSelectTriggerProps<T>['placeholder'],
-  selectedDisplay?: (options: ReadonlyArray<MultiSelectOptionType<T>>) => ReactNode,
-  triggerProps?: MultiSelectTriggerProps<T>,
-  menuProps?: Omit<MultiSelectMenuProps, 'children'>,
-  style?: StyleProp<ViewStyle>,
-}
+const MultiSelect = Object.assign(MultiSelectComponent, {
+  Root: MultiSelectRoot,
+  Trigger: MultiSelectTrigger,
+  Option: MultiSelectOption,
+  Menu: MultiSelectMenu,
+  Context: MultiSelectContext,
+  Provider: MultiSelectContext.Provider,
+})
 
-export const MultiSelect = <T,>({
-  children,
-  placeholder,
-  selectedDisplay,
-  triggerProps,
-  menuProps,
-  style,
-  ...props
-}: MultiSelectProps<T>) => {
-  return (
-    <MultiSelectRoot<T> {...props}>
-      <View style={[{ width: '100%' }, style]}>
-        <MultiSelectTrigger<T>
-          placeholder={placeholder}
-          selectedDisplay={selectedDisplay}
-          {...triggerProps}
-        />
-        <MultiSelectMenu {...menuProps}>{children}</MultiSelectMenu>
-      </View>
-    </MultiSelectRoot>
-  )
-}
+export { MultiSelect }

package/src/components/user-interaction/MultiSelect/MultiSelectComponent.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+
+import type { MultiSelectRootProps } from './MultiSelectRoot'
+import { MultiSelectRoot } from './MultiSelectRoot'
+import type { MultiSelectOptionType } from './MultiSelectContext'
+import { MultiSelectMenu, type MultiSelectMenuProps } from './MultiSelectMenu'
+import { MultiSelectTrigger, type MultiSelectTriggerProps } from './MultiSelectTrigger'
+
+export type MultiSelectProps<T = string> = Omit<MultiSelectRootProps<T>, 'children'> & {
+  children?: ReactNode,
+  placeholder?: MultiSelectTriggerProps<T>['placeholder'],
+  selectedDisplay?: (options: ReadonlyArray<MultiSelectOptionType<T>>) => ReactNode,
+  triggerProps?: MultiSelectTriggerProps<T>,
+  menuProps?: Omit<MultiSelectMenuProps, 'children'>,
+  style?: StyleProp<ViewStyle>,
+}
+
+export const MultiSelectComponent = <T,>({
+  children,
+  placeholder,
+  selectedDisplay,
+  triggerProps,
+  menuProps,
+  style,
+  ...props
+}: MultiSelectProps<T>) => {
+  return (
+    <MultiSelectRoot<T> {...props}>
+      <View style={[{ width: '100%' }, style]}>
+        <MultiSelectTrigger<T>
+          placeholder={placeholder}
+          selectedDisplay={selectedDisplay}
+          {...triggerProps}
+        />
+        <MultiSelectMenu {...menuProps}>{children}</MultiSelectMenu>
+      </View>
+    </MultiSelectRoot>
+  )
+}

package/src/components/user-interaction/MultiSelect/MultiSelectContext.tsx

@@ -6,10 +6,14 @@ import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import type { UseMultiSelectFirstHighlightBehavior } from '../../../hooks/useMultiSelect'
 import type { FormFieldInteractionStates } from '../../../types/formField'
 
-export type MultiSelectOptionType<T = string> = {
-  id: string,
+export type MultiSelectOptionIdentity<T> = {
   value: T,
-  label?: string,
+  id: string,
+}
+
+export type MultiSelectOptionType<T = string> = {
+  value: MultiSelectOptionIdentity<T>,
+  label: string,
   display?: ReactNode,
   disabled?: boolean,
 }

package/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx

@@ -9,19 +9,36 @@ import type { IconStyle } from '../../../icons'
 import type { MultiSelectOptionState } from '../../../theme/types/components/multiSelect'
 import { ListActionItem } from '../../list/ListActionItem'
 import { ThemedIcon } from '../../visualization-and-display/ThemedIcon'
+import type { MultiSelectOptionIdentity } from './MultiSelectContext'
 import { useMultiSelectContext } from './MultiSelectContext'
 
-export type MultiSelectOptionProps<T = string> = {
-  id: string,
-  value: T,
-  label: string,
+export type MultiSelectOptionProps<T = string> = (
+  T extends string
+    ? {
+        valueId?: undefined,
+        value: T,
+        label?: string,
+      }
+    : {
+        valueId: string,
+        value: T,
+        label: string,
+      }
+) & {
   disabled?: boolean,
   children?: ReactNode,
 }
 
+const toIdentity = <T,>(value: T, valueId: string | undefined): MultiSelectOptionIdentity<T> => {
+  if (valueId === undefined) {
+    return { value, id: value as string }
+  }
+  return { value, id: valueId }
+}
+
 export const MultiSelectOption = <T,>({
-  id,
   value,
+  valueId,
   label,
   disabled = false,
   children,
@@ -29,20 +46,22 @@ export const MultiSelectOption = <T,>({
   const { theme } = useTheme()
   const context = useMultiSelectContext<T>()
   const { registerOption } = context
-  const display = children ?? label
+  const identity = useMemo(() => toIdentity<T>(value, valueId), [value, valueId])
+  const resolvedLabel: string = valueId === undefined ? (label ?? (value as string)) : label
+  const display = children ?? resolvedLabel
+  const optionId = identity.id
 
   useEffect(() => {
     return registerOption({
-      id,
-      value,
-      label,
+      value: identity,
+      label: resolvedLabel,
       display,
       disabled,
     })
-  }, [disabled, display, id, label, registerOption, value])
+  }, [disabled, display, identity, registerOption, resolvedLabel])
 
-  const isSelected = context.selectedIds.includes(id)
-  const isVisible = context.visibleOptionIds.includes(id)
+  const isSelected = context.selectedIds.includes(optionId)
+  const isVisible = context.visibleOptionIds.includes(optionId)
   const optionColor = isSelected
     ? (context.config.color ?? theme.colors.primary)
     : undefined
@@ -50,9 +69,9 @@ export const MultiSelectOption = <T,>({
   const optionState = useMemo((): MultiSelectOptionState => ({
     color: context.config.color,
     isSelected,
-    isHighlighted: context.highlightedId === id,
+    isHighlighted: context.highlightedId === optionId,
     isDisabled: disabled,
-  }), [context.config.color, context.highlightedId, disabled, id, isSelected])
+  }), [context.config.color, context.highlightedId, disabled, optionId, isSelected])
 
   const multiSelectTheme = theme.components.multiSelect
   const resolvedCheckboxStyle = useMemoizedTheme(multiSelectTheme.checkbox, optionState)
@@ -67,11 +86,11 @@ export const MultiSelectOption = <T,>({
 
   return (
     <ListActionItem
-      title={children ? undefined : label}
+      title={children ? undefined : resolvedLabel}
       content={children}
       color={optionColor}
       disabled={disabled}
-      onPress={() => context.toggleSelection(id)}
+      onPress={() => context.toggleSelection(optionId)}
       leading={(
         <View style={resolvedCheckboxStyle}>
           <ThemedIcon

package/src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx

@@ -34,7 +34,7 @@ const mergeOptionMaps = <T,>(
 ): Record<string, MultiSelectOptionType<T>> => {
   const merged = { ...snapshots }
   for (const option of live) {
-    merged[option.id] = option
+    merged[option.value.id] = option
   }
   return merged
 }
@@ -59,14 +59,14 @@ export function MultiSelectRoot<T>({
   const [optionSnapshots, setOptionSnapshots] = useState<Record<string, MultiSelectOptionType<T>>>({})
 
   const registerOption = useCallback((item: MultiSelectOptionType<T>) => {
-    setOptionSnapshots((previous) => ({ ...previous, [item.id]: item }))
+    setOptionSnapshots((previous) => ({ ...previous, [item.value.id]: item }))
     setOptions((previous) => {
-      const next = previous.filter((option) => option.id !== item.id)
+      const next = previous.filter((option) => option.value.id !== item.value.id)
       next.push(item)
       return next
     })
     return () => {
-      setOptions((previous) => previous.filter((option) => option.id !== item.id))
+      setOptions((previous) => previous.filter((option) => option.value.id !== item.value.id))
     }
   }, [])
 
@@ -82,7 +82,7 @@ export function MultiSelectRoot<T>({
     }
     const known = Object.values(idToOptionMap)
     return value
-      .map((item) => known.find((option) => compare(option.value, item))?.id)
+      .map((item) => known.find((option) => compare(option.value.value, item))?.value.id)
       .filter((id): id is string => id !== undefined)
   }, [compare, idToOptionMap, value])
 
@@ -92,7 +92,7 @@ export function MultiSelectRoot<T>({
     }
     const known = Object.values(idToOptionMap)
     return initialValue
-      .map((item) => known.find((option) => compare(option.value, item))?.id)
+      .map((item) => known.find((option) => compare(option.value.value, item))?.value.id)
       .filter((id): id is string => id !== undefined)
   }, [compare, idToOptionMap, initialValue])
 
@@ -101,21 +101,21 @@ export function MultiSelectRoot<T>({
 
   const onValueChangeWrapper = useCallback((ids: string[]) => {
     const values = ids
-      .map((id) => idToOptionMap[id]?.value)
+      .map((id) => idToOptionMap[id]?.value.value)
       .filter((item): item is T => item != null)
     onValueChangeStable(values)
   }, [idToOptionMap, onValueChangeStable])
 
   const onEditCompleteWrapper = useCallback((ids: string[]) => {
     const values = ids
-      .map((id) => idToOptionMap[id]?.value)
+      .map((id) => idToOptionMap[id]?.value.value)
       .filter((item): item is T => item != null)
     onEditCompleteStable(values)
   }, [idToOptionMap, onEditCompleteStable])
 
   const hookOptions = useMemo(
     () => options.map((option) => ({
-      id: option.id,
+      id: option.value.id,
       label: option.label,
       disabled: option.disabled,
     })),
@@ -135,7 +135,7 @@ export function MultiSelectRoot<T>({
   const knownOptionCount = Math.max(options.length, Object.keys(optionSnapshots).length)
   const selectedValues = useMemo(
     () => state.value
-      .map((id) => idToOptionMap[id]?.value)
+      .map((id) => idToOptionMap[id]?.value.value)
       .filter((item): item is T => item != null),
     [idToOptionMap, state.value]
   )

package/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx

@@ -78,8 +78,8 @@ export const MultiSelectTrigger = <T,>({
       ) : selectedOptions.length > 0 ? (
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>
           {selectedOptions.map((option) => (
-            <Chip key={option.id} size="md" color={context.config.color} variant="tonal">
-              <ThemedText>{option.label ?? String(option.value)}</ThemedText>
+            <Chip key={option.value.id} size="md" color={context.config.color} variant="tonal">
+              <ThemedText>{option.label ?? String(option.value.value)}</ThemedText>
               {!context.readOnly && (
                 <View
                   style={{
@@ -94,7 +94,7 @@ export const MultiSelectTrigger = <T,>({
                     color={theme.colors.negative}
                     variant="foreground"
                     disabled={!interactive}
-                    onPress={() => context.toggleSelection(option.id, false)}
+                    onPress={() => context.toggleSelection(option.value.id, false)}
                     style={{
                       position: 'absolute',
                       left: '50%',

package/src/components/user-interaction/MultiSelect/index.ts

@@ -1,6 +1,2 @@
-export * from './MultiSelect'
-export * from './MultiSelectContext'
-export * from './MultiSelectMenu'
-export * from './MultiSelectOption'
-export * from './MultiSelectRoot'
-export * from './MultiSelectTrigger'
+export { MultiSelect } from './MultiSelect'
+export type { MultiSelectProps } from './MultiSelectComponent'

package/src/components/user-interaction/Select/Select.tsx

@@ -1,40 +1,17 @@
-import type { ReactNode } from 'react'
-import { View, type StyleProp, type ViewStyle } from 'react-native'
-
-import type { SelectRootProps } from './SelectRoot'
+import { SelectComponent } from './SelectComponent'
+import { SelectContext } from './SelectContext'
+import { SelectMenu } from './SelectMenu'
+import { SelectOption } from './SelectOption'
 import { SelectRoot } from './SelectRoot'
-import type { SelectOptionType } from './SelectContext'
-import { SelectMenu, type SelectMenuProps } from './SelectMenu'
-import { SelectTrigger, type SelectTriggerProps } from './SelectTrigger'
+import { SelectTrigger } from './SelectTrigger'
 
-export type SelectProps<T = string> = Omit<SelectRootProps<T>, 'children'> & {
-  children?: ReactNode,
-  placeholder?: SelectTriggerProps<T>['placeholder'],
-  selectedDisplay?: (option: SelectOptionType<T> | null) => ReactNode,
-  triggerProps?: SelectTriggerProps<T>,
-  menuProps?: Omit<SelectMenuProps, 'children'>,
-  style?: StyleProp<ViewStyle>,
-}
+const Select = Object.assign(SelectComponent, {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Option: SelectOption,
+  Menu: SelectMenu,
+  Context: SelectContext,
+  Provider: SelectContext.Provider,
+})
 
-export const Select = <T,>({
-  children,
-  placeholder,
-  selectedDisplay,
-  triggerProps,
-  menuProps,
-  style,
-  ...props
-}: SelectProps<T>) => {
-  return (
-    <SelectRoot<T> {...props}>
-      <View style={style}>
-        <SelectTrigger<T>
-          placeholder={placeholder}
-          selectedDisplay={selectedDisplay}
-          {...triggerProps}
-        />
-        <SelectMenu {...menuProps}>{children}</SelectMenu>
-      </View>
-    </SelectRoot>
-  )
-}
+export { Select }

package/src/components/user-interaction/Select/SelectComponent.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+
+import type { SelectRootProps } from './SelectRoot'
+import { SelectRoot } from './SelectRoot'
+import type { SelectOptionType } from './SelectContext'
+import { SelectMenu, type SelectMenuProps } from './SelectMenu'
+import { SelectTrigger, type SelectTriggerProps } from './SelectTrigger'
+
+export type SelectProps<T = string> = Omit<SelectRootProps<T>, 'children'> & {
+  children?: ReactNode,
+  placeholder?: SelectTriggerProps<T>['placeholder'],
+  selectedDisplay?: (option: SelectOptionType<T> | null) => ReactNode,
+  triggerProps?: SelectTriggerProps<T>,
+  menuProps?: Omit<SelectMenuProps, 'children'>,
+  style?: StyleProp<ViewStyle>,
+}
+
+export const SelectComponent = <T,>({
+  children,
+  placeholder,
+  selectedDisplay,
+  triggerProps,
+  menuProps,
+  style,
+  ...props
+}: SelectProps<T>) => {
+  return (
+    <SelectRoot<T> {...props}>
+      <View style={style}>
+        <SelectTrigger<T>
+          placeholder={placeholder}
+          selectedDisplay={selectedDisplay}
+          {...triggerProps}
+        />
+        <SelectMenu {...menuProps}>{children}</SelectMenu>
+      </View>
+    </SelectRoot>
+  )
+}

package/src/components/user-interaction/Select/SelectContext.tsx

@@ -6,10 +6,14 @@ import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import type { UseSelectFirstHighlightBehavior } from '../../../hooks/useSelect'
 import type { FormFieldInteractionStates } from '../../../types/formField'
 
-export type SelectOptionType<T = string> = {
-  id: string,
+export type SelectOptionIdentity<T> = {
   value: T,
-  label?: string,
+  id: string,
+}
+
+export type SelectOptionType<T = string> = {
+  value: SelectOptionIdentity<T>,
+  label: string,
   display?: ReactNode,
   disabled?: boolean,
 }

package/src/components/user-interaction/Select/SelectOption.tsx

@@ -8,19 +8,36 @@ import type { IconStyle } from '../../../icons'
 import type { MultiSelectOptionState } from '../../../theme/types/components/multiSelect'
 import { ListActionItem } from '../../list/ListActionItem'
 import { ThemedIcon } from '../../visualization-and-display/ThemedIcon'
+import type { SelectOptionIdentity } from './SelectContext'
 import { useSelectContext } from './SelectContext'
 
-export type SelectOptionProps<T = string> = {
-  id: string,
-  value: T,
-  label: string,
+export type SelectOptionProps<T = string> = (
+  T extends string
+    ? {
+        valueId?: undefined,
+        value: T,
+        label?: string,
+      }
+    : {
+        valueId: string,
+        value: T,
+        label: string,
+      }
+) & {
   disabled?: boolean,
   children?: ReactNode,
 }
 
+const toIdentity = <T,>(value: T, valueId: string | undefined): SelectOptionIdentity<T> => {
+  if (valueId === undefined) {
+    return { value, id: value as string }
+  }
+  return { value, id: valueId }
+}
+
 export const SelectOption = <T,>({
-  id,
   value,
+  valueId,
   label,
   disabled = false,
   children,
@@ -28,26 +45,28 @@ export const SelectOption = <T,>({
   const { theme } = useTheme()
   const context = useSelectContext<T>()
   const { registerOption } = context
-  const display = children ?? label
+  const identity = useMemo(() => toIdentity<T>(value, valueId), [value, valueId])
+  const resolvedLabel: string = valueId === undefined ? (label ?? (value as string)) : label
+  const display = children ?? resolvedLabel
+  const optionId = identity.id
 
   useEffect(() => {
     return registerOption({
-      id,
-      value,
-      label,
+      value: identity,
+      label: resolvedLabel,
       display,
       disabled,
     })
-  }, [disabled, display, id, label, registerOption, value])
+  }, [disabled, display, identity, registerOption, resolvedLabel])
 
-  const isSelected = context.selectedId === id
-  const isVisible = context.visibleOptionIds.includes(id)
+  const isSelected = context.selectedId === optionId
+  const isVisible = context.visibleOptionIds.includes(optionId)
 
   const optionState = useMemo((): MultiSelectOptionState => ({
     isSelected,
-    isHighlighted: context.highlightedId === id,
+    isHighlighted: context.highlightedId === optionId,
     isDisabled: disabled,
-  }), [context.highlightedId, disabled, id, isSelected])
+  }), [context.highlightedId, disabled, optionId, isSelected])
 
   const checkIcon = useMemoizedTheme<MultiSelectOptionState, IconStyle>(
     theme.components.listItem.action.icon,
@@ -60,10 +79,10 @@ export const SelectOption = <T,>({
 
   return (
     <ListActionItem
-      title={children ? undefined : label}
+      title={children ? undefined : resolvedLabel}
       content={children}
       disabled={disabled}
-      onPress={() => context.toggleSelection(id)}
+      onPress={() => context.toggleSelection(optionId)}
       leading={(
         <ThemedIcon
           icon={HightideIconRegistry.Check}

package/src/components/user-interaction/Select/SelectRoot.tsx

@@ -35,7 +35,7 @@ const mergeOptionMaps = <T,>(
 ): Record<string, SelectOptionType<T>> => {
   const merged = { ...snapshots }
   for (const option of live) {
-    merged[option.id] = option
+    merged[option.value.id] = option
   }
   return merged
 }
@@ -61,14 +61,14 @@ export function SelectRoot<T>({
   const [optionSnapshots, setOptionSnapshots] = useState<Record<string, SelectOptionType<T>>>({})
 
   const registerOption = useCallback((item: SelectOptionType<T>) => {
-    setOptionSnapshots((previous) => ({ ...previous, [item.id]: item }))
+    setOptionSnapshots((previous) => ({ ...previous, [item.value.id]: item }))
     setOptions((previous) => {
-      const next = previous.filter((option) => option.value !== item.value)
+      const next = previous.filter((option) => option.value.id !== item.value.id)
       next.push(item)
       return next
     })
     return () => {
-      setOptions((previous) => previous.filter((option) => option.id !== item.id))
+      setOptions((previous) => previous.filter((option) => option.value.id !== item.value.id))
     }
   }, [])
 
@@ -82,14 +82,14 @@ export function SelectRoot<T>({
     if (value === undefined) {
       return undefined
     }
-    return Object.values(idToOptionMap).find((option) => compare(option.value, value))?.id ?? null
+    return Object.values(idToOptionMap).find((option) => compare(option.value.value, value))?.value.id ?? null
   }, [compare, idToOptionMap, value])
 
   const mappedInitialValueId = useMemo(() => {
     if (initialValue === undefined) {
       return undefined
     }
-    return Object.values(idToOptionMap).find((option) => compare(option.value, initialValue))?.id ?? null
+    return Object.values(idToOptionMap).find((option) => compare(option.value.value, initialValue))?.value.id ?? null
   }, [compare, idToOptionMap, initialValue])
 
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
@@ -101,7 +101,7 @@ export function SelectRoot<T>({
     if (option === undefined) {
       return
     }
-    onValueChangeStable(option.value)
+    onValueChangeStable(option.value.value)
   }, [idToOptionMap, onValueChangeStable])
 
   const onEditCompleteWrapper = useCallback((id: string) => {
@@ -109,12 +109,12 @@ export function SelectRoot<T>({
     if (option === undefined) {
       return
     }
-    onEditCompleteStable(option.value)
+    onEditCompleteStable(option.value.value)
   }, [idToOptionMap, onEditCompleteStable])
 
   const hookOptions = useMemo(
     () => options.map((option) => ({
-      id: option.id,
+      id: option.value.id,
       label: option.label,
       disabled: option.disabled,
     })),

package/src/components/user-interaction/Select/index.ts

@@ -1,6 +1,2 @@
-export * from './Select'
-export * from './SelectContext'
-export * from './SelectMenu'
-export * from './SelectOption'
-export * from './SelectRoot'
-export * from './SelectTrigger'
+export { Select } from './Select'
+export type { SelectProps } from './SelectComponent'