chore: change data-name to className

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "coding-conventions"]
+	path = coding-conventions
+	url = https://github.com/helpwave/coding-conventions.git

.npmrc

@@ -0,0 +1,2 @@
+public-hoist-pattern[]=*storybook*
+public-hoist-pattern[]=*@storybook*

apps/hightide-native-storybook/src/Internationalization/ExtendTranslations.stories.tsx

@@ -47,7 +47,7 @@ const frenchTranslations = {
 
 const demoSupportedLocales = {
   ...HightideConfigUtils.defaultSupportedLocales,
-  'fr-FR': { localName: 'Français' },
+  'fr-FR': { localeName: 'Français' },
 }
 
 const LocaleSelect = () => {
@@ -60,7 +60,7 @@ const LocaleSelect = () => {
   const options = useMemo(
     () => Object.entries(supportedLocales).map(([id, info]) => ({
       id,
-      label: info.localName,
+      label: info.localeName,
     })),
     [supportedLocales]
   )

apps/hightide-native-storybook/src/Theme/PrimaryColorChange.stories.tsx

@@ -51,13 +51,17 @@ const bluePrimaryDarkTheme = createHightideTheme(createDarkThemeTokens({
 const bluePrimarySupportedThemes = {
   ...HightideConfigUtils.defaultSupportedThemes,
   'blue-primary': {
+    name: 'Blue Primary',
+    isDark: false,
     nameTranslations: {
       'de-DE': 'Blau Primary',
       'en-US': 'Blue Primary',
     },
     theme: bluePrimaryTheme,
   },
   'blue-primary-dark': {
+    name: 'Blue Primary Dark',
+    isDark: true,
     nameTranslations: {
       'de-DE': 'Blau Primary Dunkel',
       'en-US': 'Blue Primary Dark',

apps/hightide-native-storybook/src/Theme/ThemeExtension.stories.tsx

@@ -46,6 +46,8 @@ const oceanTheme = createHightideTheme(createLightThemeTokens({
 const oceanSupportedThemes = {
   ...HightideConfigUtils.defaultSupportedThemes,
   ocean: {
+    name: 'Ocean',
+    isDark: false,
     nameTranslations: {
       'de-DE': 'Ozean',
       'en-US': 'Ocean',

apps/hightide-native-storybook/src/Theme/themeStoryHelpers.tsx

@@ -9,20 +9,30 @@ import {
   ThemedText
 } from '@helpwave/hightide-native/components'
 import { useTheme } from '@helpwave/hightide-native/global-contexts'
+import { useLocalization } from '@helpwave/hightide-utils/context/localization'
+import type { HightideTranslationEntries } from '@helpwave/hightide-utils/i18n'
+import { ThemeUtils } from '@helpwave/hightide-utils/context/theme'
+import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
 export const ThemeSelect = () => {
   const {
     themeMode,
     setTheme,
     supportedThemes,
   } = useTheme()
+  const { locale } = useLocalization()
+  const translation = useHightideTranslation()
 
   const options = useMemo(
     () => Object.entries(supportedThemes).map(([id, info]) => ({
       id,
-      label: info.nameTranslations['en-US'] ?? id,
+      label: ThemeUtils.resolveThemeInformationLabel(
+        info,
+        locale,
+        (key) => translation(key as keyof HightideTranslationEntries)
+      ),
     })),
-    [supportedThemes]
+    [locale, supportedThemes, translation]
   )
 
   return (

packages/hightide-native/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.10.4] - unpublished
+
+### Added
+
+- The hightide-utils `locales` folder is copied into `dist` during the build and exported as `@helpwave/hightide-native/locales/*`
+
+### Changed
+
+- Default locales and theme metadata use `HightideSupportedLocaleInformation` and `HightideSupportedThemeInformation` from hightide-utils. Theme labels use `themeNameLight` / `themeNameDark`
+
 ## [0.10.3] - 2026-10-13
 
 ### Added

packages/hightide-native/package.json

@@ -13,7 +13,8 @@
   "version": "0.10.3",
   "type": "module",
   "files": [
-    "src"
+    "src",
+    "dist"
   ],
   "exports": {
     "./components": "./src/components/index.ts",
@@ -22,12 +23,13 @@
     "./icons": "./src/icons/index.ts",
     "./theme": "./src/theme/index.ts",
     "./types": "./src/types/index.ts",
-    "./utils": "./src/utils/index.ts"
+    "./utils": "./src/utils/index.ts",
+    "./locales/*": "./dist/locales/*"
   },
   "scripts": {
     "clean": "rm -rf node_modules",
     "init": "node -e \"process.exit(0)\"",
-    "build": "tsc --noEmit",
+    "build": "tsc --noEmit && rm -rf dist/locales && mkdir -p dist && cp -R ../hightide-utils/locales dist/locales",
     "dev": "node -e \"process.exit(0)\"",
     "lint": "eslint .",
     "test": "node -e \"process.exit(0)\""

packages/hightide-native/src/components/user-interaction/Checkbox.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import {
   useControlledState,
-  useEventCallbackStabilizer
+  useStableEvent
 } from '@helpwave/hightide-utils/hooks'
 
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
@@ -74,8 +74,8 @@ export const Checkbox = ({
   const interactive = !disabled && !readOnly
   const [isPressed, setIsPressed] = useState(false)
 
-  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
-  const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
+  const onEditCompleteStable = useStableEvent(onEditComplete)
+  const onValueChangeStable = useStableEvent(onValueChange)
 
   const onChangeWrapper = useCallback((nextValue: boolean) => {
     onValueChangeStable(nextValue)

packages/hightide-native/src/components/user-interaction/FileInput/FileInputRoot.tsx

@@ -4,7 +4,7 @@ import { useCallback, useMemo } from 'react'
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
 import {
   useControlledState,
-  useEventCallbackStabilizer
+  useStableEvent
 } from '@helpwave/hightide-utils/hooks'
 
 import type {
@@ -65,10 +65,10 @@ export function FileInputRoot({
     defaultValue: resolveFileInputMaxFiles(maxFiles) === 1 ? false : initialIsOpen,
   })
 
-  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
-  const onCloseStable = useEventCallbackStabilizer(onClose)
-  const onIsOpenChangeStable = useEventCallbackStabilizer(onIsOpenChange)
-  const pickFilesStable = useEventCallbackStabilizer(pickFiles)
+  const onEditCompleteStable = useStableEvent(onEditComplete)
+  const onCloseStable = useStableEvent(onClose)
+  const onIsOpenChangeStable = useStableEvent(onIsOpenChange)
+  const pickFilesStable = useStableEvent(pickFiles)
 
   const commitFiles = useCallback((next: readonly FileInputItem[]) => {
     setFiles(next)

packages/hightide-native/src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import { useCallback, useMemo, useState } from 'react'
 
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
-import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
+import { useStableEvent } from '@helpwave/hightide-utils/hooks'
 
 import { useMultiSelect } from '../../../hooks/useMultiSelect'
 import type {
@@ -96,8 +96,8 @@ export function MultiSelectRoot<T>({
       .filter((id): id is string => id !== undefined)
   }, [compare, idToOptionMap, initialValue])
 
-  const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
-  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
+  const onValueChangeStable = useStableEvent(onValueChange)
+  const onEditCompleteStable = useStableEvent(onEditComplete)
 
   const onValueChangeWrapper = useCallback((ids: string[]) => {
     const values = ids

packages/hightide-native/src/components/user-interaction/Select/SelectRoot.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react'
 import { useCallback, useMemo, useState } from 'react'
 
 import type { ColorPairToken } from '@helpwave/hightide-design/theme-tokens'
-import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
+import { useStableEvent } from '@helpwave/hightide-utils/hooks'
 
 import { useSelect } from '../../../hooks/useSelect'
 import type {
@@ -92,9 +92,9 @@ export function SelectRoot<T>({
     return Object.values(idToOptionMap).find((option) => compare(option.value.value, initialValue))?.value.id ?? null
   }, [compare, idToOptionMap, initialValue])
 
-  const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
-  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
-  const onIsOpenChangeStable = useEventCallbackStabilizer(onIsOpenChange)
+  const onValueChangeStable = useStableEvent(onValueChange)
+  const onEditCompleteStable = useStableEvent(onEditComplete)
+  const onIsOpenChangeStable = useStableEvent(onIsOpenChange)
 
   const onValueChangeWrapper = useCallback((id: string) => {
     const option = idToOptionMap[id]

packages/hightide-native/src/components/user-interaction/Switch.tsx

@@ -14,7 +14,7 @@ import {
 
 import {
   useControlledState,
-  useEventCallbackStabilizer
+  useStableEvent
 } from '@helpwave/hightide-utils/hooks'
 
 import { useDebugContext } from '../../global-contexts/debug'
@@ -80,8 +80,8 @@ export const Switch = ({
   const interactive = !disabled && !readOnly
   const [isPressed, setIsPressed] = useState(false)
 
-  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
-  const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
+  const onEditCompleteStable = useStableEvent(onEditComplete)
+  const onValueChangeStable = useStableEvent(onValueChange)
 
   const onChangeWrapper = useCallback((nextValue: boolean) => {
     onValueChangeStable(nextValue)