@neko-os/ui 0.4.0 → 0.5.0

package/src/components/inputs/DateInput.js

@@ -48,6 +48,7 @@ export function DateInput({
   type = 'day',
   format,
   startsOpen,
+  allowClear,
   useBottomDrawer = { native: true, sm: true, md: true },
   ...props
 }) {
@@ -91,7 +92,7 @@ export function DateInput({
       trigger="click"
       startsOpen={startsOpen}
       placement={placement || 'bottomLeft'}
-      snapPoints={[350]}
+      snapPoints={[450]}
       useBottomDrawer={useBottomDrawer}
       bottomDrawerProps={{ contentProps: { padding: 'md' } }}
       watch={[value?.format?.('YYYYMMDD')]}
@@ -103,6 +104,8 @@ export function DateInput({
               handleChange(v)
               onClose()
             }}
+            width={useBottomDrawer ? '100%' : 275}
+            allowClear={allowClear}
             {...validations}
             type={type}
           />

package/src/components/inputs/InputWrapper.js

@@ -65,8 +65,7 @@ export function InputWrapper({
     <View
       className="neko-input-wrapper"
       height={multiline ? undefined : size}
-      minHeight={multiline ? size : undefined}
-      paddingV={multiline ? 'sm' : undefined}
+      minHeight={multiline ? 1.5 * size : undefined}
       onPress={handlePress}
       borderColor={borderColor}
       onMouseEnter={() => setHover(true)}

package/src/components/inputs/TextInput.js

@@ -1,9 +1,11 @@
 import { AbsTextInput } from '../../abstractions/TextInput'
 import { InputWrapper } from './InputWrapper'
 import { useColors } from '../../theme/ThemeHandler'
+import { useSpaces } from '../../theme'
 
 export function TextInput({ onChange, multiline, rows, ...props }) {
   const colors = useColors()
+  const spaces = useSpaces()
 
   const STYLE = {
     width: '100%',
@@ -11,10 +13,9 @@ export function TextInput({ onChange, multiline, rows, ...props }) {
     background: 'transparent',
     outline: 'none',
     color: colors.text,
-    // fontFamily: 'inherit',
-    // fontSize: 'inherit',
-    // lineHeight: 'inherit',
-    ...(multiline ? { resize: 'none' } : { height: '100%' }),
+    flex: 1,
+    height: '100%',
+    ...(multiline ? { paddingTop: spaces.sm, resize: 'none', flex: 1, textAlignVertical: 'top' } : {}),
   }
 
   return (

package/src/components/inputs/datePicker/DayPicker.js

@@ -2,8 +2,10 @@ import React from 'react'
 import dayjs from 'dayjs'
 
 import { CalendarNav } from '../../calendar/CalendarNav'
+import { ClearLink } from '../../actions/ClearLink'
 import { Col } from '../../structure/Col'
 import { Grid } from '../../structure/Row'
+import { InfiniteCarousel } from '../../carousel/InfiniteCarousel'
 import { Link } from '../../actions/Link'
 import { Text } from '../../text/Text'
 import { View } from '../../structure/View'
@@ -11,33 +13,27 @@ import { WeekDaysBar } from '../../calendar/WeekDaysBar'
 import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
 import { useCalendarDays } from '../../calendar/_helpers/calendarDays'
 
-export function DayPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
-  if (!!value) value = dayjs(value)
-  const [localValue, setLocalValue] = React.useState(value)
-  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value || undefined).startOf('month'))
-  value = value === undefined ? localValue : value
-
-  React.useEffect(() => {
-    setLocalValue(value)
-    if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
-  }, [value?.day?.(), value?.month?.(), value?.year?.()])
+function toMonthValue(date) {
+  return date.year() * 12 + date.month()
+}
 
-  const handleChange = (v) => {
-    setLocalValue(v)
-    onChange?.(v)
-  }
+function fromMonthValue(v) {
+  return dayjs()
+    .year(Math.floor(v / 12))
+    .month(v % 12)
+    .startOf('month')
+}
 
-  const { cells } = useCalendarDays(currentMonth)
+function MonthDays({ month, selectedValue, onSelect, min, max, onCheckDisabled }) {
+  const { cells } = useCalendarDays(month)
 
   return (
-    <View className="neko-day-picker" width={275} {...props}>
-      <CalendarNav value={currentMonth} onChange={setCurrentMonth} />
+    <View>
       <WeekDaysBar />
-
       <Grid className="neko-day-picker-days" colSpan={24 / 7} gap="sm">
         {cells.map((day, i) => {
-          const dateVal = currentMonth.date(day)
-          const isActive = !!value && !!day && dateVal.isSame(value, 'day')
+          const dateVal = month.date(day)
+          const isActive = !!selectedValue && !!day && dateVal.isSame(selectedValue, 'day')
           const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
 
           return (
@@ -47,7 +43,7 @@ export function DayPicker({ value, onChange, min, max, onCheckDisabled, ...props
                 fullW
                 center
                 br="md"
-                onPress={() => !!day && handleChange(dateVal)}
+                onPress={() => !!day && onSelect(dateVal)}
                 bg={isActive && 'primary'}
                 disabled={disabled}
               >
@@ -62,3 +58,49 @@ export function DayPicker({ value, onChange, min, max, onCheckDisabled, ...props
     </View>
   )
 }
+
+export function DayPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
+  if (!!value) value = dayjs(value)
+  const [localValue, setLocalValue] = React.useState(value)
+  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value || undefined).startOf('month'))
+  value = value === undefined ? localValue : value
+
+  React.useEffect(() => {
+    setLocalValue(value)
+    if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
+  }, [value?.day?.(), value?.month?.(), value?.year?.()])
+
+  const handleChange = (v) => {
+    setLocalValue(v)
+    onChange?.(v)
+  }
+
+  const monthValue = toMonthValue(currentMonth)
+  const minMonth = min ? toMonthValue(dayjs(min).startOf('month')) : undefined
+  const maxMonth = max ? toMonthValue(dayjs(max).startOf('month')) : undefined
+
+  const renderSlide = (v) => (
+    <MonthDays
+      month={fromMonthValue(v)}
+      selectedValue={value}
+      onSelect={handleChange}
+      min={min}
+      max={max}
+      onCheckDisabled={onCheckDisabled}
+    />
+  )
+
+  return (
+    <View className="neko-day-picker" width={275} maxW={350} {...props}>
+      <CalendarNav value={currentMonth} onChange={setCurrentMonth} />
+      <InfiniteCarousel
+        value={monthValue}
+        onChange={(v) => setCurrentMonth(fromMonthValue(v))}
+        renderSlide={renderSlide}
+        min={minMonth}
+        max={maxMonth}
+      />
+      <ClearLink hide={!allowClear} value={value} onChange={onChange} />
+    </View>
+  )
+}

package/src/components/inputs/datePicker/MonthPicker.js

@@ -2,9 +2,11 @@ import React from 'react'
 import dayjs from 'dayjs'
 
 import { CalendarNav } from '../../calendar/CalendarNav'
+import { ClearLink } from '../../actions/ClearLink'
 import { Col } from '../../structure/Col'
 import { Divider } from '../../helpers'
 import { Grid } from '../../structure/Row'
+import { InfiniteCarousel } from '../../carousel/InfiniteCarousel'
 import { Link } from '../../actions/Link'
 import { Text } from '../../text/Text'
 import { View } from '../../structure/View'
@@ -12,7 +14,38 @@ import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
 
 const months = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
 
-export function MonthPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
+function MonthGrid({ year, selectedValue, onSelect, min, max, onCheckDisabled }) {
+  const yearDate = dayjs().year(year).startOf('year')
+
+  return (
+    <Grid colSpan={8} gap="xs">
+      {months.map((month) => {
+        const dateVal = yearDate.month(month)
+        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'week')
+        const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
+
+        return (
+          <Col key={month}>
+            <Link
+              fullW
+              br="md"
+              padding="sm"
+              onPress={() => onSelect(dateVal)}
+              bg={isActive && 'primary'}
+              disabled={disabled}
+            >
+              <Text text2={!isActive} strong={isActive} center>
+                {dateVal.format('MMM')}
+              </Text>
+            </Link>
+          </Col>
+        )
+      })}
+    </Grid>
+  )
+}
+
+export function MonthPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
   const [currentYear, setCurrentYear] = React.useState(() => dayjs(value || undefined).startOf('year'))
   value = value === undefined ? localValue : value
@@ -28,35 +61,26 @@ export function MonthPicker({ value, onChange, min, max, onCheckDisabled, ...pro
     onChange?.(newValue)
   }
 
+  const yearValue = currentYear.year()
+  const minYear = min ? dayjs(min).year() : undefined
+  const maxYear = max ? dayjs(max).year() : undefined
+
+  const renderSlide = (v) => (
+    <MonthGrid year={v} selectedValue={value} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
+  )
+
   return (
     <View className="neko-day-picker" width={275} {...props}>
       <CalendarNav value={currentYear} onChange={setCurrentYear} level="year" />
       <Divider />
-
-      <Grid colSpan={8} gap="xs">
-        {months.map((month) => {
-          const dateVal = currentYear.month(month)
-          const isActive = !!value && dateVal.isSame(value, 'week')
-          const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
-
-          return (
-            <Col key={month}>
-              <Link
-                fullW
-                br="md"
-                padding="sm"
-                onPress={() => handleChange(dateVal)}
-                bg={isActive && 'primary'}
-                disabled={disabled}
-              >
-                <Text text2={!isActive} strong={isActive} center>
-                  {dateVal.format('MMM')}
-                </Text>
-              </Link>
-            </Col>
-          )
-        })}
-      </Grid>
+      <InfiniteCarousel
+        value={yearValue}
+        onChange={(v) => setCurrentYear(dayjs().year(v).startOf('year'))}
+        renderSlide={renderSlide}
+        min={minYear}
+        max={maxYear}
+      />
+      <ClearLink hide={!allowClear} value={value} onChange={onChange} />
     </View>
   )
 }

package/src/components/inputs/datePicker/QuarterPicker.js

@@ -3,9 +3,11 @@ import dayjs from 'dayjs'
 import quarterOfYear from 'dayjs/esm/plugin/quarterOfYear'
 
 import { CalendarNav } from '../../calendar/CalendarNav'
+import { ClearLink } from '../../actions/ClearLink'
 import { Col } from '../../structure/Col'
 import { Divider } from '../../helpers'
 import { Grid } from '../../structure/Row'
+import { InfiniteCarousel } from '../../carousel/InfiniteCarousel'
 import { Link } from '../../actions/Link'
 import { Text } from '../../text/Text'
 import { View } from '../../structure/View'
@@ -15,7 +17,38 @@ dayjs.extend(quarterOfYear)
 
 const quarters = [1, 2, 3, 4]
 
-export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
+function QuarterGrid({ year, selectedValue, onSelect, min, max, onCheckDisabled }) {
+  const yearDate = dayjs().year(year).startOf('year')
+
+  return (
+    <Grid colSpan={6} gap="xs">
+      {quarters.map((quarter) => {
+        const dateVal = yearDate.quarter(quarter)
+        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'week')
+        const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
+
+        return (
+          <Col key={quarter}>
+            <Link
+              fullW
+              br="md"
+              padding="sm"
+              onPress={() => onSelect(dateVal)}
+              bg={isActive && 'primary'}
+              disabled={disabled}
+            >
+              <Text text2={!isActive} strong={isActive} center>
+                Q{dateVal.quarter()}
+              </Text>
+            </Link>
+          </Col>
+        )
+      })}
+    </Grid>
+  )
+}
+
+export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
   const [currentYear, setCurrentYear] = React.useState(() => dayjs(value || undefined).startOf('year'))
   value = value === undefined ? localValue : value
@@ -31,35 +64,26 @@ export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, ...p
     onChange?.(newValue)
   }
 
+  const yearValue = currentYear.year()
+  const minYear = min ? dayjs(min).year() : undefined
+  const maxYear = max ? dayjs(max).year() : undefined
+
+  const renderSlide = (v) => (
+    <QuarterGrid year={v} selectedValue={value} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
+  )
+
   return (
     <View className="neko-day-picker" width={275} {...props}>
       <CalendarNav value={currentYear} onChange={setCurrentYear} level="year" />
       <Divider />
-
-      <Grid colSpan={6} gap="xs">
-        {quarters.map((quarter) => {
-          const dateVal = currentYear.quarter(quarter)
-          const isActive = !!value && dateVal.isSame(value, 'week')
-          const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
-
-          return (
-            <Col key={quarter}>
-              <Link
-                fullW
-                br="md"
-                padding="sm"
-                onPress={() => handleChange(dateVal)}
-                bg={isActive && 'primary'}
-                disabled={disabled}
-              >
-                <Text text2={!isActive} strong={isActive} center>
-                  Q{dateVal.quarter()}
-                </Text>
-              </Link>
-            </Col>
-          )
-        })}
-      </Grid>
+      <InfiniteCarousel
+        value={yearValue}
+        onChange={(v) => setCurrentYear(dayjs().year(v).startOf('year'))}
+        renderSlide={renderSlide}
+        min={minYear}
+        max={maxYear}
+      />
+      <ClearLink hide={!allowClear} value={value} onChange={onChange} />
     </View>
   )
 }

package/src/components/inputs/datePicker/WeekPicker.js

@@ -3,7 +3,9 @@ import React from 'react'
 import dayjs from 'dayjs'
 
 import { CalendarNav } from '../../calendar/CalendarNav'
+import { ClearLink } from '../../actions/ClearLink'
 import { Col } from '../../structure/Col'
+import { InfiniteCarousel } from '../../carousel/InfiniteCarousel'
 import { Link } from '../../actions/Link'
 import { Row } from '../../structure/Row'
 import { Text } from '../../text/Text'
@@ -12,35 +14,29 @@ import { WeekDaysBar } from '../../calendar/WeekDaysBar'
 import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
 import { useCalendarDays } from '../../calendar/_helpers/calendarDays'
 
-export function WeekPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
-  const [localValue, setLocalValue] = React.useState(value)
-  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value || undefined).startOf('month'))
-  value = value === undefined ? localValue : value
-
-  React.useEffect(() => {
-    setLocalValue(value)
-    if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
-  }, [value?.day?.(), value?.month?.(), value?.year?.()])
+function toMonthValue(date) {
+  return date.year() * 12 + date.month()
+}
 
-  const handleChange = (v) => {
-    const newValue = v.startOf('week')
-    setLocalValue(newValue)
-    onChange?.(newValue)
-  }
+function fromMonthValue(v) {
+  return dayjs()
+    .year(Math.floor(v / 12))
+    .month(v % 12)
+    .startOf('month')
+}
 
-  const { cells } = useCalendarDays(currentMonth)
+function MonthWeeks({ month, selectedValue, onSelect, min, max, onCheckDisabled }) {
+  const { cells } = useCalendarDays(month)
   const weeks = splitEvery(7, cells)
 
   return (
-    <View className="neko-day-picker" width={275} {...props}>
-      <CalendarNav value={currentMonth} onChange={setCurrentMonth} />
+    <View>
       <WeekDaysBar />
-
       <View colSpan={24 / 7} gap="sm">
         {weeks.map((week, wi) => {
           const firstDay = week.find(identity)
-          const dateVal = currentMonth.date(firstDay)
-          const isActive = !!value && !!firstDay && dateVal.isSame(value, 'week')
+          const dateVal = month.date(firstDay)
+          const isActive = !!selectedValue && !!firstDay && dateVal.isSame(selectedValue, 'week')
           const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
 
           return (
@@ -48,13 +44,13 @@ export function WeekPicker({ value, onChange, min, max, onCheckDisabled, ...prop
               key={firstDay ? dateVal.format('YYYYMMDD') : wi}
               fullW
               br="md"
-              onPress={() => !!firstDay && handleChange(dateVal)}
+              onPress={() => !!firstDay && onSelect(dateVal)}
               bg={isActive && 'primary'}
               disabled={disabled}
             >
               <Row colSpan={24 / 7} gap="sm">
                 {week.map((day, i) => {
-                  const dateVal = currentMonth.date(day)
+                  const dateVal = month.date(day)
 
                   return (
                     <Col key={day ? dateVal.format('YYYYMMDD') : i} className="day-cell" center ratio={1}>
@@ -72,3 +68,42 @@ export function WeekPicker({ value, onChange, min, max, onCheckDisabled, ...prop
     </View>
   )
 }
+
+export function WeekPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
+  const [localValue, setLocalValue] = React.useState(value)
+  const [currentMonth, setCurrentMonth] = React.useState(() => dayjs(value || undefined).startOf('month'))
+  value = value === undefined ? localValue : value
+
+  React.useEffect(() => {
+    setLocalValue(value)
+    if (value?.isValid?.()) setCurrentMonth(value.startOf('month'))
+  }, [value?.day?.(), value?.month?.(), value?.year?.()])
+
+  const handleChange = (v) => {
+    const newValue = v.startOf('week')
+    setLocalValue(newValue)
+    onChange?.(newValue)
+  }
+
+  const monthValue = toMonthValue(currentMonth)
+  const minMonth = min ? toMonthValue(dayjs(min).startOf('month')) : undefined
+  const maxMonth = max ? toMonthValue(dayjs(max).startOf('month')) : undefined
+
+  const renderSlide = (v) => (
+    <MonthWeeks month={fromMonthValue(v)} selectedValue={value} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
+  )
+
+  return (
+    <View className="neko-day-picker" width={275} {...props}>
+      <CalendarNav value={currentMonth} onChange={setCurrentMonth} />
+      <InfiniteCarousel
+        value={monthValue}
+        onChange={(v) => setCurrentMonth(fromMonthValue(v))}
+        renderSlide={renderSlide}
+        min={minMonth}
+        max={maxMonth}
+      />
+      <ClearLink hide={!allowClear} value={value} onChange={onChange} />
+    </View>
+  )
+}

package/src/components/inputs/datePicker/YearPicker.js

@@ -3,29 +3,65 @@ import React from 'react'
 import dayjs from 'dayjs'
 
 import { CalendarNav } from '../../calendar/CalendarNav'
+import { ClearLink } from '../../actions/ClearLink'
 import { Col } from '../../structure/Col'
 import { Divider } from '../../helpers'
 import { Grid } from '../../structure/Row'
+import { InfiniteCarousel } from '../../carousel/InfiniteCarousel'
 import { Link } from '../../actions/Link'
 import { Text } from '../../text/Text'
 import { View } from '../../structure/View'
 import { isDateDisabled } from '../../calendar/_helpers/dateDisabled'
 
-function getDecade(value) {
-  const year = dayjs(value || undefined).year()
-  const decadeStartYear = Math.floor(year / 10) * 10
-  return dayjs().year(decadeStartYear).startOf('year')
+function getDecadeIndex(value) {
+  return Math.floor(dayjs(value || undefined).year() / 10)
 }
 
-export function YearPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
+function decadeFromIndex(i) {
+  return dayjs().year(i * 10).startOf('year')
+}
+
+function DecadeGrid({ decadeIndex, selectedValue, onSelect, min, max, onCheckDisabled }) {
+  const decadeStart = decadeFromIndex(decadeIndex)
+  const years = range(decadeStart.year(), decadeStart.year() + 10)
+
+  return (
+    <Grid colSpan={12} gap="xs">
+      {years.map((year) => {
+        const dateVal = decadeStart.year(year)
+        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'week')
+        const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
+
+        return (
+          <Col key={year}>
+            <Link
+              fullW
+              br="md"
+              padding="sm"
+              onPress={() => onSelect(dateVal)}
+              bg={isActive && 'primary'}
+              disabled={disabled}
+            >
+              <Text text2={!isActive} strong={isActive} center>
+                {dateVal.year()}
+              </Text>
+            </Link>
+          </Col>
+        )
+      })}
+    </Grid>
+  )
+}
+
+export function YearPicker({ value, onChange, min, max, onCheckDisabled, allowClear, ...props }) {
   const [localValue, setLocalValue] = React.useState(value)
-  const [currentDecade, setCurrentDecade] = React.useState(() => getDecade(value))
+  const [currentDecade, setCurrentDecade] = React.useState(() => getDecadeIndex(value))
 
   value = value === undefined ? localValue : value
 
   React.useEffect(() => {
     setLocalValue(value)
-    if (value?.isValid?.()) setCurrentDecade(getDecade(value))
+    if (value?.isValid?.()) setCurrentDecade(getDecadeIndex(value))
   }, [value?.year?.()])
 
   const handleChange = (v) => {
@@ -34,37 +70,25 @@ export function YearPicker({ value, onChange, min, max, onCheckDisabled, ...prop
     onChange?.(newValue)
   }
 
-  const years = range(currentDecade.year(), currentDecade.year() + 10)
+  const minDecade = min ? getDecadeIndex(min) : undefined
+  const maxDecade = max ? getDecadeIndex(max) : undefined
+
+  const renderSlide = (v) => (
+    <DecadeGrid decadeIndex={v} selectedValue={value} onSelect={handleChange} min={min} max={max} onCheckDisabled={onCheckDisabled} />
+  )
 
   return (
     <View className="neko-day-picker" width={275} {...props}>
-      <CalendarNav value={currentDecade} onChange={setCurrentDecade} level="decade" />
+      <CalendarNav value={decadeFromIndex(currentDecade)} onChange={(v) => setCurrentDecade(getDecadeIndex(v))} level="decade" />
       <Divider />
-
-      <Grid colSpan={12} gap="xs">
-        {years.map((year) => {
-          const dateVal = currentDecade.year(year)
-          const isActive = !!value && dateVal.isSame(value, 'week')
-          const disabled = isDateDisabled(dateVal, { min, max, onCheckDisabled })
-
-          return (
-            <Col key={year}>
-              <Link
-                fullW
-                br="md"
-                padding="sm"
-                onPress={() => handleChange(dateVal)}
-                bg={isActive && 'primary'}
-                disabled={disabled}
-              >
-                <Text text2={!isActive} strong={isActive} center>
-                  {dateVal.year()}
-                </Text>
-              </Link>
-            </Col>
-          )
-        })}
-      </Grid>
+      <InfiniteCarousel
+        value={currentDecade}
+        onChange={setCurrentDecade}
+        renderSlide={renderSlide}
+        min={minDecade}
+        max={maxDecade}
+      />
+      <ClearLink hide={!allowClear} value={value} onChange={onChange} />
     </View>
   )
 }

package/src/components/keyboard/KeyboardDismissButton.js

@@ -0,0 +1,3 @@
+export function KeyboardDismissButton() {
+  return false
+}

package/src/components/keyboard/KeyboardDismissButton.native.js

@@ -0,0 +1,38 @@
+import { Keyboard } from 'react-native'
+import Animated, { useAnimatedKeyboard, useAnimatedStyle, KeyboardState, withTiming } from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+
+import { Button } from '../actions'
+
+const STATIC_STYLE = { position: 'absolute', right: 5, zIndex: 1000 }
+
+export function KeyboardDismissButton() {
+  const keyboard = useAnimatedKeyboard()
+  const { bottom: bottomInset } = useSafeAreaInsets()
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const isVisible = keyboard.height.value > 0
+    return {
+      bottom: keyboard.height.value - bottomInset + 10,
+      opacity: keyboard.state.value === KeyboardState.CLOSING ? withTiming(0, { duration: 150 }) : isVisible ? 1 : 0,
+      pointerEvents: isVisible ? 'auto' : 'none',
+    }
+  })
+
+  return (
+    <Animated.View style={[STATIC_STYLE, animatedStyle]}>
+      <Button
+        icon="arrow-down-box-line"
+        onPress={Keyboard.dismiss}
+        ratio={1}
+        shadow
+        overlayBG
+        sm
+        opacity={0.85}
+        iconProps={{ size: 'md' }}
+        border
+        borderColor="divider"
+      />
+    </Animated.View>
+  )
+}