@neko-os/ui 0.4.0 → 0.5.1

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,39 @@ dayjs.extend(quarterOfYear)
 
 const quarters = [1, 2, 3, 4]
 
-export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, ...props }) {
+const QuarterGrid = React.memo(function QuarterGrid({ year, selectedKey, onSelect, min, max, onCheckDisabled }) {
+  const yearDate = dayjs().year(year).startOf('year')
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
+
+  return (
+    <Grid colSpan={6} gap="xs">
+      {quarters.map((quarter) => {
+        const dateVal = yearDate.quarter(quarter)
+        const isActive = !!selectedValue && dateVal.isSame(selectedValue, 'quarter')
+        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
@@ -25,41 +59,36 @@ export function QuarterPicker({ value, onChange, min, max, onCheckDisabled, ...p
     if (value?.isValid?.()) setCurrentYear(value.startOf('year'))
   }, [value?.quarter?.(), value?.year?.()])
 
-  const handleChange = (v) => {
-    const newValue = v.startOf('quarter')
-    setLocalValue(newValue)
-    onChange?.(newValue)
-  }
+  const handleChange = React.useCallback(
+    (v) => {
+      const newValue = v.startOf('quarter')
+      setLocalValue(newValue)
+      onChange?.(newValue)
+    },
+    [onChange]
+  )
+
+  const yearValue = currentYear.year()
+  const minYear = min ? dayjs(min).year() : undefined
+  const maxYear = max ? dayjs(max).year() : undefined
+  const selectedKey = value?.valueOf?.()
+
+  const renderSlide = (v) => (
+    <QuarterGrid year={v} selectedKey={selectedKey} 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,31 @@ 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)
+const MonthWeeks = React.memo(function MonthWeeks({ monthValue, selectedKey, onSelect, min, max, onCheckDisabled }) {
+  const month = fromMonthValue(monthValue)
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
+  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 +46,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}>
@@ -71,4 +69,47 @@ export function WeekPicker({ value, onChange, min, max, onCheckDisabled, ...prop
       </View>
     </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 = React.useCallback(
+    (v) => {
+      const newValue = v.startOf('week')
+      setLocalValue(newValue)
+      onChange?.(newValue)
+    },
+    [onChange]
+  )
+
+  const monthValue = toMonthValue(currentMonth)
+  const minMonth = min ? toMonthValue(dayjs(min).startOf('month')) : undefined
+  const maxMonth = max ? toMonthValue(dayjs(max).startOf('month')) : undefined
+  const selectedKey = value?.valueOf?.()
+
+  const renderSlide = (v) => (
+    <MonthWeeks monthValue={v} selectedKey={selectedKey} 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,68 +3,97 @@ 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')
+}
+
+const DecadeGrid = React.memo(function DecadeGrid({ decadeIndex, selectedKey, onSelect, min, max, onCheckDisabled }) {
+  const decadeStart = decadeFromIndex(decadeIndex)
+  const selectedValue = selectedKey ? dayjs(selectedKey) : null
+  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, 'year')
+        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) => {
-    const newValue = v.startOf('year')
-    setLocalValue(newValue)
-    onChange?.(newValue)
-  }
+  const handleChange = React.useCallback(
+    (v) => {
+      const newValue = v.startOf('year')
+      setLocalValue(newValue)
+      onChange?.(newValue)
+    },
+    [onChange]
+  )
+
+  const minDecade = min ? getDecadeIndex(min) : undefined
+  const maxDecade = max ? getDecadeIndex(max) : undefined
+  const selectedKey = value?.valueOf?.()
 
-  const years = range(currentDecade.year(), currentDecade.year() + 10)
+  const renderSlide = (v) => (
+    <DecadeGrid decadeIndex={v} selectedKey={selectedKey} 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>
+  )
+}

package/src/components/keyboard/index.js

@@ -0,0 +1 @@
+export * from './KeyboardDismissButton'

package/src/components/modals/bottomDrawer/native/BottomDrawer.js

@@ -4,6 +4,8 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
+  useAnimatedKeyboard,
+  KeyboardState,
   withSpring,
   runOnJS,
 } from 'react-native-reanimated'
@@ -27,6 +29,7 @@ function InnerContent({
   enableOverScroll = true,
   enableHandlePanningGesture = true,
   enableContentPanningGesture = true,
+  keyboardBehavior = 'interactive',
   animationConfig = {
     damping: 50,
     stiffness: 500,
@@ -44,6 +47,7 @@ function InnerContent({
   const bottomInset = useSafeArea ? insets.bottom : 0
 
   const colors = useColors()
+  const keyboard = useAnimatedKeyboard()
 
   const translateY = useSharedValue(SCREEN_HEIGHT)
   const snapIndex = useSharedValue(0)
@@ -122,11 +126,9 @@ function InnerContent({
         const currentPosition = SCREEN_HEIGHT - translateY.value
         const shouldClose =
           !!handleClose &&
-          (
-            velocityY.value > 1500 ||
+          (velocityY.value > 1500 ||
             (velocityY.value > 800 && currentPosition < minSnapPoint) ||
-            currentPosition < minSnapPoint * 0.35
-          )
+            currentPosition < minSnapPoint * 0.35)
 
         if (shouldClose) {
           runOnJS(handleClose)()
@@ -148,10 +150,28 @@ function InnerContent({
     handleClose,
   ])
 
+  const topInset = insets.top
   const animatedSheetStyle = useAnimatedStyle(() => {
-    const currentHeight = SCREEN_HEIGHT - translateY.value
+    let kbShift = 0
+
+    const kbVisible = keyboard.state.value === KeyboardState.OPEN || keyboard.state.value === KeyboardState.OPENING
+    if (keyboardBehavior !== 'none' && kbVisible) {
+      const kbHeight = keyboard.height.value
+
+      if (keyboardBehavior === 'interactive') {
+        // Shift up by keyboard height, but don't go above safe area
+        const maxShift = Math.max(0, translateY.value - topInset)
+        kbShift = Math.min(kbHeight, maxShift)
+      } else if (keyboardBehavior === 'extend') {
+        // Snap to fill available space above keyboard
+        kbShift = Math.max(0, translateY.value - topInset)
+      }
+    }
+
+    const adjustedY = translateY.value - kbShift
+    const currentHeight = SCREEN_HEIGHT - adjustedY
     return {
-      transform: [{ translateY: translateY.value }],
+      transform: [{ translateY: adjustedY }],
       maxHeight: currentHeight,
     }
   })
@@ -200,6 +220,7 @@ function InnerContent({
               marginR="auto"
               fullW
               {...props}
+              minH={minSnapPoint}
             >
               <DrawerHandle hide={hideHandle} />
               <View flex {...contentProps}>

package/src/components/presentation/LabelValue.js

@@ -18,7 +18,7 @@ const DEFAULT_PROPS = ([{ sizeCode, color }, { vertical, spread }]) => {
     labelProps: {
       size: moveScale(sizeCode, !vertical ? 0 : -2),
       moveIconSizeScale: !vertical ? -1 : -2,
-      color: color || 'text3',
+      color: color || 'text2',
     },
     valueProps: {
       size: sizeCode,

package/src/components/presentation/Result.js

@@ -2,6 +2,7 @@ import { Divider } from '../helpers/Separator'
 import { Icon } from './Icon'
 import { Text } from '../text/Text'
 import { View } from '../structure/View'
+import { useResponsiveValue } from '../../responsive'
 
 export const RESULT_TYPES = {
   error: {
@@ -23,6 +24,12 @@ export const RESULT_TYPES = {
     icon: 'information-2-fill',
     color: 'blue',
   },
+
+  empty: {
+    icon: 'inbox-line',
+    color: 'text4',
+    opacity: 0.7,
+  },
 }
 
 export function Result({
@@ -41,12 +48,13 @@ export function Result({
   const typeProps = RESULT_TYPES[type] || {}
   icon = icon || typeProps.icon
   iconColor = iconColor || typeProps.color || 'primary'
+  const size = useResponsiveValue({ lgu: 'h4', df: 'h5' })
 
   return (
-    <View className="neko-result" center padding="lg" {...props}>
+    <View className="neko-result" center padding="lg" opacity={typeProps.opacity} {...props}>
       {!!icon && <Icon name={icon} color={iconColor} size={42} primary {...iconProps} />}
       {!!icon && <Divider height={10} />}
-      <Text h4 center {...textProps} {...titleProps}>
+      <Text size={size} center color="text2" {...textProps} {...titleProps}>
         {title}
       </Text>
       {!!description && (

package/src/components/structure/KeyboardAvoidingView.js

@@ -1,6 +1,7 @@
 import { pipe } from 'ramda'
 
 import { AbsKeyboardAvoidingView } from '../../abstractions/KeyboardAvoidingView'
+import { AbsKeyboardDismissView } from '../../abstractions/KeyboardDismissView'
 import { Platform } from '../../abstractions/Platform'
 import { useSafeAreaInsets } from '../../abstractions/helpers/useSafeAreaInsets'
 import { useAnimationModifier } from '../../modifiers/animation'
@@ -19,7 +20,7 @@ import { useSizeModifier } from '../../modifiers/size'
 import { useStateModifier } from '../../modifiers/state'
 import { useThemeComponentModifier } from '../../modifiers/themeComponent'
 
-export function KeyboardAvoidingView({ children, keyboardVerticalOffset = 0, ...rootProps }) {
+export function KeyboardAvoidingView({ children, keyboardVerticalOffset = 0, dismissOnTap = true, ...rootProps }) {
   const { bottom } = useSafeAreaInsets()
 
   const [_, props] = pipe(
@@ -46,7 +47,13 @@ export function KeyboardAvoidingView({ children, keyboardVerticalOffset = 0, ...
       keyboardVerticalOffset={keyboardVerticalOffset + bottom}
       {...props}
     >
-      {children}
+      {dismissOnTap ? (
+        <AbsKeyboardDismissView style={{ flex: 1 }}>
+          {children}
+        </AbsKeyboardDismissView>
+      ) : (
+        children
+      )}
     </AbsKeyboardAvoidingView>
   )
 }

package/src/components/theme/ThemePicker.js

@@ -1,25 +1,20 @@
-import { mapObjIndexed, mergeDeepRight, values, pipe, filter } from 'ramda'
+import { mapObjIndexed, values, pipe, reject, propEq } from 'ramda'
 
-import { DEFAULT_THEMES, useThemeHandler } from '../../theme'
+import { useAllThemes, useThemeHandler } from '../../theme'
 import { IconLabel } from '../presentation'
 import { Link } from '../actions'
 import { Picker } from '../inputs'
 import { ThemeThumb } from './ThemeThumb'
 
-export function ThemePicker({ onChange, onlyKeys, hideKeys }) {
-  const { activeThemeKey, themes, onChangeTheme } = useThemeHandler()
+export function ThemePicker({ onChange }) {
+  const { activeThemeKey, onChangeTheme } = useThemeHandler()
+  const allThemes = useAllThemes()
 
-  let options = pipe(
-    mergeDeepRight(DEFAULT_THEMES),
+  const options = pipe(
     mapObjIndexed((obj, key) => ({ ...obj, value: key, key })),
     values,
-    filter((item) => {
-      if (item.value === '_all') return false
-      if (onlyKeys && onlyKeys.includes(item.value)) return true
-      if (hideKeys && hideKeys.includes(item.value)) return false
-      return true
-    })
-  )(themes)
+    reject(propEq('_all', 'value'))
+  )(allThemes)
 
   return (
     <Picker

package/src/components/theme/ThemeThumb.js

@@ -4,7 +4,7 @@ import { useResponsiveValue } from '../../responsive'
 import { useThemeHandler } from '../../theme'
 
 export function ThemeThumb({ value }) {
-  const { themes } = useThemeHandler()
+  const { rawThemesParam: themes } = useThemeHandler()
   const { colors, label } = useFormattedTheme(themes, value)
   const isMobile = useResponsiveValue({ smd: true, df: false })
 

package/src/index.js

@@ -4,5 +4,6 @@ export * from './theme'
 export * from './responsive'
 export * from './i18n'
 export * from './NekoUI'
+export * from './abstractions'
 
 export const version = 41