@neko-os/ui 0.5.3 → 0.6.0

package/src/components/measurements/helpers/length.js

@@ -0,0 +1,112 @@
+const CM_TO_INCH = 0.393701
+const CM_TO_FOOT = 0.0328084
+const CM_PER_M = 100
+const CM_PER_KM = 100000
+const MI_TO_KM = 1.60934
+
+export function cmToIn(cm) {
+  if (!cm) return cm
+  return cm * CM_TO_INCH
+}
+
+export function inToCm(inches) {
+  if (!inches) return inches
+  return inches / CM_TO_INCH
+}
+
+export function cmToFt(cm) {
+  if (!cm) return cm
+  return cm * CM_TO_FOOT
+}
+
+export function ftToCm(feet) {
+  if (!feet) return feet
+  return feet / CM_TO_FOOT
+}
+
+export function cmToFtIn(cm) {
+  if (!cm) return false
+  const totalInches = cmToIn(cm)
+  let feet = Math.floor(totalInches / 12)
+  let inches = Math.round(totalInches % 12)
+  if (inches === 12) {
+    feet += 1
+    inches = 0
+  }
+  return { feet, inches }
+}
+
+export function ftInToCm(value) {
+  if (!value) return false
+  const { feet, inches } = value || {}
+  const totalInches = (feet || 0) * 12 + (inches || 0)
+  return inToCm(totalInches)
+}
+
+export function cmToM(cm) {
+  if (!cm) return cm
+  return cm / CM_PER_M
+}
+
+export function mToCm(m) {
+  if (!m) return m
+  return m * CM_PER_M
+}
+
+export function mToFt(m) {
+  if (!m) return m
+  return cmToFt(m * CM_PER_M)
+}
+
+export function ftToM(ft) {
+  if (!ft) return ft
+  return ftToCm(ft) / CM_PER_M
+}
+
+export function mToFtIn(m) {
+  if (!m) return false
+  return cmToFtIn(m * CM_PER_M)
+}
+
+export function ftInToM(value) {
+  if (!value) return false
+  return ftInToCm(value) / CM_PER_M
+}
+
+export function mToIn(m) {
+  if (!m) return m
+  return cmToIn(m * CM_PER_M)
+}
+
+export function inToM(inches) {
+  if (!inches) return inches
+  return inToCm(inches) / CM_PER_M
+}
+
+export function kmToMi(km) {
+  if (!km) return km
+  return km / MI_TO_KM
+}
+
+export function miToKm(mi) {
+  if (!mi) return mi
+  return mi * MI_TO_KM
+}
+
+export const LENGTH_CONVERTERS = {
+  cm: {
+    'ft+in': { to: cmToFtIn, from: ftInToCm },
+    in: { to: cmToIn, from: inToCm },
+    ft: { to: cmToFt, from: ftToCm },
+  },
+  m: {
+    ft: { to: mToFt, from: ftToM },
+    'ft+in': { to: mToFtIn, from: ftInToM },
+    in: { to: mToIn, from: inToM },
+  },
+  km: {
+    mi: { to: kmToMi, from: miToKm },
+  },
+}
+
+export const LENGTH_IMPERIAL_DEFAULTS = { cm: 'ft+in', m: 'ft', km: 'mi' }

package/src/components/measurements/helpers/weight.js

@@ -0,0 +1,56 @@
+const KG_TO_LB = 2.20462
+const OZ_PER_LB = 16
+const G_PER_KG = 1000
+
+export function kgToLbs(kg) {
+  if (!kg) return kg
+  return kg * KG_TO_LB
+}
+
+export function lbsToKg(lbs) {
+  if (!lbs) return lbs
+  return lbs / KG_TO_LB
+}
+
+export function kgToOz(kg) {
+  if (!kg) return kg
+  return kg * KG_TO_LB * OZ_PER_LB
+}
+
+export function ozToKg(oz) {
+  if (!oz) return oz
+  return oz / (KG_TO_LB * OZ_PER_LB)
+}
+
+export function gToOz(g) {
+  if (!g) return g
+  return kgToOz(g / G_PER_KG)
+}
+
+export function ozToG(oz) {
+  if (!oz) return oz
+  return ozToKg(oz) * G_PER_KG
+}
+
+export function gToLbs(g) {
+  if (!g) return g
+  return kgToLbs(g / G_PER_KG)
+}
+
+export function lbsToG(lbs) {
+  if (!lbs) return lbs
+  return lbsToKg(lbs) * G_PER_KG
+}
+
+export const WEIGHT_CONVERTERS = {
+  kg: {
+    lbs: { to: kgToLbs, from: lbsToKg },
+    oz: { to: kgToOz, from: ozToKg },
+  },
+  g: {
+    oz: { to: gToOz, from: ozToG },
+    lbs: { to: gToLbs, from: lbsToG },
+  },
+}
+
+export const WEIGHT_IMPERIAL_DEFAULTS = { kg: 'lbs', g: 'oz' }

package/src/components/measurements/index.js

@@ -0,0 +1,9 @@
+export * from './helpers'
+export * from './MeasurementHandler'
+export * from './useLengthFormatter'
+export * from './useWeightFormatter'
+export * from './LengthText'
+export * from './WeightText'
+export * from './FeetInchesInput'
+export * from './LengthInput'
+export * from './WeightInput'

package/src/components/measurements/useLengthFormatter.js

@@ -0,0 +1,35 @@
+import { LENGTH_CONVERTERS, LENGTH_IMPERIAL_DEFAULTS } from './helpers/length'
+import { fixedDecimals } from '../../helpers/numbers'
+import { useIsImperial } from './MeasurementHandler'
+
+export function useLengthFormatter({
+  measurementSystem,
+  metricPrecision = 'cm',
+  imperialPrecision,
+  withoutSuffix,
+} = {}) {
+  const isImperial = useIsImperial(measurementSystem)
+  const impPrec = imperialPrecision || LENGTH_IMPERIAL_DEFAULTS[metricPrecision] || 'ft+in'
+
+  return (value) => {
+    if (!value && value !== 0) return null
+
+    if (isImperial) {
+      const converter = LENGTH_CONVERTERS[metricPrecision]?.[impPrec]
+      if (!converter) return `${fixedDecimals(value)} ${metricPrecision}`
+
+      const converted = converter.to(value)
+
+      if (impPrec === 'ft+in') {
+        const v = typeof converted === 'object' ? converted : { feet: 0, inches: 0 }
+        return `${v.feet}'${v.inches}"`
+      }
+
+      if (withoutSuffix) return fixedDecimals(converted)
+      return `${fixedDecimals(converted)} ${impPrec}`
+    }
+
+    if (withoutSuffix) return fixedDecimals(value)
+    return `${fixedDecimals(value)} ${metricPrecision}`
+  }
+}

package/src/components/measurements/useLocalInputValue.js

@@ -0,0 +1,32 @@
+import React from 'react'
+
+// Local display state for measurement inputs.
+// Resyncs when the unit changes or the value is changed externally,
+// without clobbering what the user is typing (their own onChange echoes back).
+export function useLocalInputValue({ value, formattedValue, suffix, onChange, converter }) {
+  const [localValue, setLocalValue] = React.useState(formattedValue)
+  const [prevSuffix, setPrevSuffix] = React.useState(suffix)
+  const lastEmitted = React.useRef(value)
+
+  if (suffix !== prevSuffix) {
+    setPrevSuffix(suffix)
+    setLocalValue(formattedValue)
+    lastEmitted.current = value
+  } else if (value !== lastEmitted.current) {
+    lastEmitted.current = value
+    setLocalValue(formattedValue)
+  }
+
+  function handleChange(newValue) {
+    setLocalValue(newValue)
+    if (!newValue && newValue !== 0) {
+      lastEmitted.current = newValue
+      return onChange(newValue)
+    }
+    const converted = converter ? converter.from(newValue) : newValue
+    lastEmitted.current = converted
+    onChange(converted)
+  }
+
+  return [localValue, handleChange]
+}

package/src/components/measurements/useWeightFormatter.js

@@ -0,0 +1,29 @@
+import { WEIGHT_CONVERTERS, WEIGHT_IMPERIAL_DEFAULTS } from './helpers/weight'
+import { fixedDecimals } from '../../helpers/numbers'
+import { useIsImperial } from './MeasurementHandler'
+
+export function useWeightFormatter({
+  measurementSystem,
+  metricPrecision = 'kg',
+  imperialPrecision,
+  withoutSuffix,
+} = {}) {
+  const isImperial = useIsImperial(measurementSystem)
+  const impPrec = imperialPrecision || WEIGHT_IMPERIAL_DEFAULTS[metricPrecision] || 'lbs'
+
+  return (value) => {
+    if (!value && value !== 0) return null
+
+    if (isImperial) {
+      const converter = WEIGHT_CONVERTERS[metricPrecision]?.[impPrec]
+      if (!converter) return `${fixedDecimals(value)} ${metricPrecision}`
+
+      const converted = converter.to(value)
+      if (withoutSuffix) return fixedDecimals(converted)
+      return `${fixedDecimals(converted)} ${impPrec}`
+    }
+
+    if (withoutSuffix) return fixedDecimals(value)
+    return `${fixedDecimals(value)} ${metricPrecision}`
+  }
+}

package/src/components/presentation/Avatar.js

@@ -54,7 +54,7 @@ export function Avatar(rootProps) {
     useOverflowModifier
   )([{}, rootProps])
 
-  let { initials, name, icon, src, invert, textProps, iconProps, iconSize, ...props } = formattedProps
+  let { initials, name, icon, src, invert, textProps, iconProps, iconSize, imageProps, ...props } = formattedProps
   initials = initials || getInitials(name)
 
   let content = (
@@ -69,7 +69,7 @@ export function Avatar(rootProps) {
       iconProps={{ size: iconSize, ...iconProps }}
     />
   )
-  if (!!src) content = <Image br={0} src={src} width={sizeCode} height={sizeCode} />
+  if (!!src) content = <Image br={0} src={src} width={sizeCode} height={sizeCode} {...imageProps} />
 
   return (
     <AbsView className="neko-avatar" {...props}>

package/src/components/routing/ReturnButton.js

@@ -0,0 +1,20 @@
+import { Button } from '../actions'
+
+// Plain ReactJS (Vite/Next/CRA): react-router goBack via navigate(-1). require() in try/catch so a
+// web app without react-router-dom degrades gracefully instead of failing the module load.
+let useNavigate
+try {
+  useNavigate = require('react-router-dom').useNavigate
+} catch {
+  useNavigate = () => () => console.warn('ReturnButton: react-router-dom not installed.')
+}
+
+// A back/close Button. Defaults to a left-arrow icon that calls navigate(-1). `close` swaps to a
+// close icon; `icon` overrides the icon name; `onPress` overrides goBack. Extra props pass to the
+// Button (label, outline, size, color, etc.).
+export function ReturnButton({ icon, close, onPress, ...props }) {
+  const navigate = useNavigate()
+  const name = icon || (close ? 'close-line' : 'arrow-left-s-line')
+
+  return <Button icon={name} onPress={onPress || (() => navigate(-1))} {...props} />
+}

package/src/components/routing/ReturnButton.native.js

@@ -0,0 +1,20 @@
+import { Button } from '../actions'
+
+// react-navigation goBack. require() in try/catch so a native app without react-navigation degrades
+// gracefully instead of failing the module load.
+let useNavigation
+try {
+  useNavigation = require('@react-navigation/native').useNavigation
+} catch {
+  useNavigation = () => ({ goBack: () => console.warn('ReturnButton: @react-navigation/native not installed.') })
+}
+
+// A back/close Button. Defaults to a left-arrow icon that calls navigation.goBack(). `close` swaps to
+// a close icon; `icon` overrides the icon name; `onPress` overrides goBack. Extra props pass to the
+// Button (label, outline, size, color, etc.).
+export function ReturnButton({ icon, close, onPress, ...props }) {
+  const navigation = useNavigation()
+  const name = icon || (close ? 'close-line' : 'arrow-left-s-line')
+
+  return <Button icon={name} onPress={onPress || (() => navigation.goBack())} {...props} />
+}

package/src/components/routing/ReturnButton.web.js

@@ -0,0 +1,2 @@
+// react-native-web apps use react-navigation (like native), so reuse the native implementation.
+export { ReturnButton } from './ReturnButton.native'

package/src/components/routing/ReturnLink.js

@@ -0,0 +1,25 @@
+import { Icon } from '../presentation'
+import { Link } from '../actions'
+
+// Plain ReactJS (Vite/Next/CRA): react-router goBack via navigate(-1). require() in try/catch so a
+// web app without react-router-dom degrades gracefully instead of failing the module load.
+let useNavigate
+try {
+  useNavigate = require('react-router-dom').useNavigate
+} catch {
+  useNavigate = () => () => console.warn('ReturnLink: react-router-dom not installed.')
+}
+
+// A back/close Link: a Link wrapping an Icon. Defaults to a left-arrow that calls navigate(-1).
+// `close` swaps to a close icon; `icon` overrides the icon name entirely; `onPress` overrides goBack.
+// Extra props pass to the Icon (size, color, etc.).
+export function ReturnLink({ icon, close, onPress, ...props }) {
+  const navigate = useNavigate()
+  const name = icon || (close ? 'close-line' : 'arrow-left-s-line')
+
+  return (
+    <Link onPress={onPress || (() => navigate(-1))}>
+      <Icon name={name} {...props} />
+    </Link>
+  )
+}

package/src/components/routing/ReturnLink.native.js

@@ -0,0 +1,25 @@
+import { Icon } from '../presentation'
+import { Link } from '../actions'
+
+// react-navigation goBack. require() in try/catch so a native app without react-navigation degrades
+// gracefully instead of failing the module load.
+let useNavigation
+try {
+  useNavigation = require('@react-navigation/native').useNavigation
+} catch {
+  useNavigation = () => ({ goBack: () => console.warn('ReturnLink: @react-navigation/native not installed.') })
+}
+
+// A back/close Link: a Link wrapping an Icon. Defaults to a left-arrow that calls navigation.goBack().
+// `close` swaps to a close icon; `icon` overrides the icon name entirely; `onPress` overrides goBack.
+// Extra props pass to the Icon (size, color, etc.).
+export function ReturnLink({ icon, close, onPress, ...props }) {
+  const navigation = useNavigation()
+  const name = icon || (close ? 'close-line' : 'arrow-left-s-line')
+
+  return (
+    <Link onPress={onPress || (() => navigation.goBack())}>
+      <Icon name={name} {...props} />
+    </Link>
+  )
+}

package/src/components/routing/ReturnLink.web.js

@@ -0,0 +1,2 @@
+// react-native-web apps use react-navigation (like native), so reuse the native implementation.
+export { ReturnLink } from './ReturnLink.native'

package/src/components/routing/RoutedStepsContent.js

@@ -0,0 +1,21 @@
+import { ActiveStepContent } from '../steps'
+import { View } from '../structure'
+
+// Plain ReactJS (Vite/Next/CRA) fallback — no react-navigation. Renders the active step in place,
+// driven by StepsHandler's activeIndex, so a wizard built with these pieces still works on plain web
+// (just without native stack transitions). React Native / RNW use the .native variant.
+let warned = false
+
+// eslint-disable-next-line no-unused-vars -- absorb the native-only screenOptions so it doesn't leak onto View
+export function RoutedStepsContent({ screenOptions, ...props }) {
+  if (!warned) {
+    warned = true
+    console.warn('RoutedStepsContent is native-only (react-navigation). Rendering steps in place on plain web.')
+  }
+
+  return (
+    <View flex {...props}>
+      <ActiveStepContent />
+    </View>
+  )
+}

package/src/components/routing/RoutedStepsContent.native.js

@@ -0,0 +1,94 @@
+import React from 'react'
+
+import { View } from '../structure'
+import { useSteps } from '../steps'
+
+// Native-only deps. require() inside try/catch keeps web bundlers from pulling react-navigation into
+// the plain ReactJS build (which uses RoutedStepsContent.js instead).
+let NavigationContainer
+let NavigationIndependentTree
+let StackActions
+let createNativeStackNavigator
+let available = true
+try {
+  const nav = require('@react-navigation/native')
+  NavigationContainer = nav.NavigationContainer
+  NavigationIndependentTree = nav.NavigationIndependentTree
+  StackActions = nav.StackActions
+  createNativeStackNavigator = require('@react-navigation/native-stack').createNativeStackNavigator
+} catch {
+  available = false
+}
+
+let warned = false
+
+// Renders a step's content exactly like ActiveStepContent — raw, no wrapper. Any scroll/padding is
+// the consumer's call inside their own render/renderContent.
+const stepContent = (item) => {
+  const Content = item.render || item.renderContent || item.Content
+  return Content ? <Content /> : null
+}
+
+// The swapping content region — the routed equivalent of ActiveStepContent. Drop it inside any
+// StepsHandler, alongside whatever fixed chrome you want. It adds NO state of its own: StepsHandler
+// stays the single source of truth. This component just renders a self-contained native stack
+// (independent from the host NavigationContainer) and keeps it in sync with activeIndex both ways.
+export function RoutedStepsContent({ screenOptions, ...props }) {
+  const { items, activeIndex, moveToIndex } = useSteps()
+  const navRef = React.useRef(null)
+  const Stack = React.useRef(available ? createNativeStackNavigator() : null).current
+
+  // StepsHandler -> stack: when activeIndex changes (Next/Back buttons, StepsMenu, custom controls),
+  // drive the stack to the matching screen. Compare against the current TOP route (getCurrentRoute)
+  // and be explicit about direction: push forward, pop back. Using navigate() here is wrong — it can
+  // push a duplicate instead of popping. If the route already matches (e.g. a native gesture back
+  // already moved us), this is a no-op.
+  React.useEffect(() => {
+    const ref = navRef.current
+    if (!ref?.isReady?.()) return
+    const current = Number(ref.getCurrentRoute?.()?.name) || 0
+    if (activeIndex === current) return
+    ref.dispatch(
+      activeIndex > current ? StackActions.push(String(activeIndex)) : StackActions.popTo(String(activeIndex))
+    )
+  }, [activeIndex])
+
+  if (!available) {
+    if (!warned) {
+      warned = true
+      console.warn(
+        'RoutedStepsContent requires @react-navigation/native and @react-navigation/native-stack; neither is installed.'
+      )
+    }
+    return null
+  }
+
+  // stack -> StepsHandler: native gesture / hardware back changes the route without going through
+  // moveToIndex. Push that index back into StepsHandler (backward never validates, matching Steps).
+  const handleStateChange = () => {
+    const index = Number(navRef.current?.getCurrentRoute?.()?.name) || 0
+    if (index !== activeIndex) moveToIndex(index)
+  }
+
+  const navigator = (
+    <Stack.Navigator screenOptions={{ headerShown: false, ...screenOptions }}>
+      {items.map((item, index) => (
+        <Stack.Screen key={index} name={String(index)} options={{ title: item.label }}>
+          {() => stepContent(item)}
+        </Stack.Screen>
+      ))}
+    </Stack.Navigator>
+  )
+
+  // Self-contained: its own navigation world, independent of the host app's NavigationContainer, so
+  // it never touches the host back stack (react-navigation v7+).
+  return (
+    <View flex {...props}>
+      <NavigationIndependentTree>
+        <NavigationContainer ref={navRef} onStateChange={handleStateChange}>
+          {navigator}
+        </NavigationContainer>
+      </NavigationIndependentTree>
+    </View>
+  )
+}

package/src/components/routing/RoutedStepsContent.web.js

@@ -0,0 +1,3 @@
+// react-native-web: react-navigation runs fine here, and babel aliases react-native ->
+// react-native-web, so the native implementation is correct for RNW too.
+export { RoutedStepsContent } from './RoutedStepsContent.native'

package/src/components/routing/index.js

@@ -0,0 +1,3 @@
+export * from './RoutedStepsContent'
+export * from './ReturnLink'
+export * from './ReturnButton'

package/src/components/state/StatePresenter.js

@@ -24,7 +24,7 @@ export function StatePresenter({
   if (error) {
     return (
       <View flex center {...props}>
-        <Result type="error" title={errorTitle} description={errorDescription || error.message} />
+        <Result type="error" title={errorTitle} description={errorDescription || (typeof error === 'string' ? error : error.message)} />
       </View>
     )
   }

package/src/components/steps/StepsHandler.js

@@ -8,6 +8,7 @@ export function StepsHandler({ children, items, onSubmit, onValidateStep, onStep
   const [maxIndexReleased, setMaxIndexReleased] = React.useState(0)
   const [loading, setLoading] = React.useState(false)
   const activeStep = items[activeIndex]
+  const isFirstStep = activeIndex === 0
   const isLastStep = activeIndex === items.length - 1
 
   const moveToIndex = async (index) => {
@@ -44,6 +45,7 @@ export function StepsHandler({ children, items, onSubmit, onValidateStep, onStep
     activeStep,
     maxIndexReleased,
     loading,
+    isFirstStep,
     isLastStep,
     moveToNextStep,
     moveToPrevStep,

package/src/components/structure/TopBar.js

@@ -4,14 +4,24 @@ import { Text } from '../text'
 import { View } from './View'
 import { useDefaultModifier } from '../../modifiers/default'
 import { useResponsiveConverter } from '../../modifiers/responsiveConverter'
-import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
 const DEFAULT_PROPS = {
   borderB: 'overlayDivider',
+  titleProps: {
+    center: true,
+    size: 'h6',
+    numberOfLines: 1,
+  },
+  subtitleProps: {
+    center: true,
+    size: 'xs',
+    numberOfLines: 1,
+  },
 }
 
-export function TopBar({ right, left, WrapperView, children, ...rootProps }) {
+export function TopBar({ title, subtitle, right, left, WrapperView, children, ...rootProps }) {
   const { top: safeTop } = useSafeAreaInsets()
 
   const [_, props] = pipe(
@@ -19,7 +29,7 @@ export function TopBar({ right, left, WrapperView, children, ...rootProps }) {
     useDefaultModifier(DEFAULT_PROPS),
     useResponsiveConverter([])
   )([{}, rootProps])
-  let { useSafeArea = true, title, subtitle } = props
+  let { useSafeArea = true, titleProps, subtitleProps } = props
 
   const hasContent = !!title || !!subtitle || !!children || !!right || !!left
 
@@ -34,17 +44,9 @@ export function TopBar({ right, left, WrapperView, children, ...rootProps }) {
           </View>
 
           <View center flex={3}>
-            {children || (
-              <Text center h6 numberOfLines={1}>
-                {title}
-              </Text>
-            )}
-
-            {subtitle && (
-              <Text center xs numberOfLines={1}>
-                {subtitle}
-              </Text>
-            )}
+            {children || <Text {...titleProps}>{title}</Text>}
+
+            {subtitle && <Text {...subtitleProps}>{subtitle}</Text>}
           </View>
 
           <View flex={1} toRight>

package/src/components/theme/ThemePickerDrawer.js

@@ -3,7 +3,7 @@ import { ThemePicker } from './ThemePicker'
 
 export function ThemePickerDrawer({ open, onClose, onChange }) {
   return (
-    <BottomDrawer open={open} onClose={onClose} maxWidth={550} snapPoints={['50%', '85%']}>
+    <BottomDrawer open={open} onClose={onClose} maxWidth={550} snapPoints={['60%', '85%']} useSafeArea={false}>
       <DrawerScrollView padding="md">
         <ThemePicker onChange={onChange} />
       </DrawerScrollView>