@neko-os/ui 0.1.0 → 0.2.0

package/src/components/{structure → modals}/modal/ModalBackdrop.js

@@ -2,7 +2,7 @@ import { pipe } from 'ramda'
 import React from 'react'
 
 import { AnimatedView } from '../../animations/AnimatedView'
-import { SafeAreaView } from '../SafeAreaView'
+import { SafeAreaView } from '../../structure/SafeAreaView'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
 

package/src/components/{structure → modals}/modal/ModalContent.js

@@ -1,6 +1,6 @@
 import { pipe } from 'ramda'
 
-import { View } from '../View'
+import { View } from '../../structure/View'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useThemeComponentModifier } from '../../../modifiers/themeComponent'
 

package/src/components/{structure → modals}/modal/ModalFooter.js

@@ -1,6 +1,6 @@
 import { pipe } from 'ramda'
 
-import { View } from '../View'
+import { View } from '../../structure/View'
 import { moveScale } from '../../../theme/helpers/sizeScale'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useSizeConverter } from '../../../modifiers/sizeConverter'

package/src/components/{structure → modals}/modal/ModalHeader.js

@@ -3,7 +3,7 @@ import { pipe } from 'ramda'
 import { Icon } from '../../presentation/Icon'
 import { Link } from '../../actions/Link'
 import { Text } from '../../text/Text'
-import { View } from '../View'
+import { View } from '../../structure/View'
 import { moveScale } from '../../../theme/helpers/sizeScale'
 import { useDefaultModifier } from '../../../modifiers/default'
 import { useSizeConverter } from '../../../modifiers/sizeConverter'

package/src/components/modals/router/ModalRoute.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react'
+
+import { useModalsRouterContext } from './ModalsRouterContext'
+
+export function ModalRoute({ name, component, type = 'modal', ...containerProps }) {
+  const { registerRoute, unregisterRoute } = useModalsRouterContext()
+
+  useEffect(() => {
+    if (!name || !registerRoute) return
+    registerRoute(name, { component, type, containerProps })
+    return () => unregisterRoute?.(name)
+  }, [name])
+
+  return null
+}

package/src/components/modals/router/ModalsRouter.js

@@ -0,0 +1,120 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+
+import { BottomDrawer } from '../bottomDrawer'
+import { Drawer } from '../drawer'
+import { Modal } from '../modal/Modal'
+import { ModalRouteContext, ModalsRouterContext, ModalsStackContext } from './ModalsRouterContext'
+
+const CONTAINERS = {
+  modal: Modal,
+  drawer: Drawer,
+  bottomDrawer: BottomDrawer,
+}
+
+export function ModalsRouter({ children }) {
+  const [stack, setStack] = useState([])
+  const [renderStack, setRenderStack] = useState([])
+  const [containerOverrides, setContainerOverrides] = useState({})
+  const keyRef = useRef(0)
+  const routesRef = useRef({})
+
+  const registerRoute = useCallback((name, config) => {
+    routesRef.current[name] = config
+  }, [])
+
+  const unregisterRoute = useCallback((name) => {
+    delete routesRef.current[name]
+  }, [])
+
+  const updateContainerProps = useCallback((key, props) => {
+    setContainerOverrides((prev) => ({
+      ...prev,
+      [key]: { ...prev[key], ...props },
+    }))
+  }, [])
+
+  const push = useCallback((path, params) => {
+    const key = ++keyRef.current
+    const entry = { key, path, params }
+    setStack((prev) => [...prev, entry])
+    setRenderStack((prev) => [...prev, { ...entry, open: true }])
+  }, [])
+
+  const closeByKey = useCallback((key) => {
+    setStack((prev) => prev.filter((e) => e.key !== key))
+    setRenderStack((prev) => prev.map((e) => (e.key === key ? { ...e, open: false } : e)))
+    setTimeout(() => {
+      setRenderStack((prev) => prev.filter((e) => e.key !== key))
+    }, 600)
+  }, [])
+
+  const goBack = useCallback(() => {
+    setStack((prev) => {
+      if (prev.length === 0) return prev
+      const last = prev[prev.length - 1]
+      setRenderStack((rs) => rs.map((e) => (e.key === last.key ? { ...e, open: false } : e)))
+      setTimeout(() => {
+        setRenderStack((rs) => rs.filter((e) => e.key !== last.key))
+      }, 600)
+      return prev.slice(0, -1)
+    })
+  }, [])
+
+  const closeAll = useCallback(() => {
+    setStack([])
+    setRenderStack((prev) => {
+      const closing = prev.map((e) => ({ ...e, open: false }))
+      setTimeout(() => {
+        setRenderStack([])
+      }, 600)
+      return closing
+    })
+  }, [])
+
+  // Static — never changes, so consumers like useModalsNavigation
+  // and ModalRoute don't re-render when the stack changes
+  const actionsValue = useMemo(
+    () => ({ push, goBack, closeAll, registerRoute, unregisterRoute }),
+    [push, goBack, closeAll, registerRoute, unregisterRoute]
+  )
+
+  // Dynamic — only useAllModalsParams subscribes to this
+  const stackValue = useMemo(() => ({ stack }), [stack])
+
+  // Nest modals inside each other so each RN Modal presents from
+  // the previous modal's view controller (required for iOS stacking).
+  // Context providers go INSIDE Container children so they survive
+  // the Portal teleport on web (Portal re-mounts content at PortalHandler level).
+  const nestedModals = renderStack.reduceRight((inner, entry) => {
+    const route = routesRef.current[entry.path]
+    if (!route) return inner
+
+    const Container = CONTAINERS[route.type] || Modal
+    const Component = route.component
+
+    const overrides = containerOverrides[entry.key]
+    const updateContainer = (props) => updateContainerProps(entry.key, props)
+
+    return (
+      <Container key={entry.key} open={entry.open} onClose={() => closeByKey(entry.key)} {...route.containerProps} {...overrides}>
+        <ModalsRouterContext.Provider value={actionsValue}>
+          <ModalsStackContext.Provider value={stackValue}>
+            <ModalRouteContext.Provider value={{ params: entry.params, path: entry.path, key: entry.key, updateContainer }}>
+              <Component />
+              {inner}
+            </ModalRouteContext.Provider>
+          </ModalsStackContext.Provider>
+        </ModalsRouterContext.Provider>
+      </Container>
+    )
+  }, null)
+
+  return (
+    <ModalsRouterContext.Provider value={actionsValue}>
+      <ModalsStackContext.Provider value={stackValue}>
+        {children}
+        {nestedModals}
+      </ModalsStackContext.Provider>
+    </ModalsRouterContext.Provider>
+  )
+}

package/src/components/modals/router/ModalsRouterContext.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+// Static context — actions that never change (push, goBack, etc.)
+const ModalsRouterContext = React.createContext(null)
+export const useModalsRouterContext = () => React.useContext(ModalsRouterContext) || {}
+export { ModalsRouterContext }
+
+// Dynamic context — stack data that changes on push/goBack
+const ModalsStackContext = React.createContext(null)
+export const useModalsStackContext = () => React.useContext(ModalsStackContext) || {}
+export { ModalsStackContext }
+
+// Per-entry context — params for each rendered modal
+const ModalRouteContext = React.createContext(null)
+export const useModalRouteContext = () => React.useContext(ModalRouteContext) || {}
+export { ModalRouteContext }

package/src/components/modals/router/index.js

@@ -0,0 +1,6 @@
+export { ModalsRouter } from './ModalsRouter'
+export { ModalRoute } from './ModalRoute'
+export { useModalsNavigation } from './useModalsNavigation'
+export { useModalParams } from './useModalParams'
+export { useAllModalsParams } from './useAllModalsParams'
+export { useUpdateModalContainer } from './useUpdateModalContainer'

package/src/components/modals/router/useAllModalsParams.js

@@ -0,0 +1,6 @@
+import { useModalsStackContext } from './ModalsRouterContext'
+
+export function useAllModalsParams() {
+  const { stack } = useModalsStackContext()
+  return (stack || []).map(({ path, params, key }) => ({ path, params, key }))
+}

package/src/components/modals/router/useModalParams.js

@@ -0,0 +1,6 @@
+import { useModalRouteContext } from './ModalsRouterContext'
+
+export function useModalParams() {
+  const { params } = useModalRouteContext()
+  return params || {}
+}

package/src/components/modals/router/useModalsNavigation.js

@@ -0,0 +1,6 @@
+import { useModalsRouterContext } from './ModalsRouterContext'
+
+export function useModalsNavigation() {
+  const { push, goBack, closeAll } = useModalsRouterContext()
+  return { push, goBack, closeAll }
+}

package/src/components/modals/router/useUpdateModalContainer.js

@@ -0,0 +1,6 @@
+import { useModalRouteContext } from './ModalsRouterContext'
+
+export function useUpdateModalContainer() {
+  const { updateContainer } = useModalRouteContext()
+  return updateContainer
+}

package/src/components/sections/SectionItemDropdown.js

@@ -0,0 +1,68 @@
+import { pipe } from 'ramda'
+
+import { IconLabel } from '../presentation'
+import { Link } from '../actions'
+import { Menu } from '../actions/menu/Menu'
+import { Popover } from '../structure/popover/Popover'
+import { ScrollView } from '../list'
+import { SectionItem } from './SectionItem'
+import { useColorConverter } from '../../modifiers/colorConverter'
+import { useDefaultModifier } from '../../modifiers/default'
+import { useResponsiveValue } from '../../responsive'
+import { useThemeComponentModifier } from '../../modifiers/themeComponent'
+
+const DEFAULT_PROPS = {
+  paddingV: 'sm',
+  minH: 'md',
+  icon: 'arrow-down-s-fill',
+}
+
+export function SectionItemDropdown({ children, value, valueLabel, items, onChange, ...rootProps }) {
+  const [{ color }, formattedProps] = pipe(
+    useColorConverter(),
+    useThemeComponentModifier('SectionItemDropdown'),
+    useDefaultModifier(DEFAULT_PROPS)
+  )([{}, rootProps])
+
+  let { icon, iconLabelProps, trigger = 'click', placement, popoverProps, useBottomDrawer, ...props } = formattedProps
+
+  useBottomDrawer = useResponsiveValue(useBottomDrawer || { native: true, sm: true, md: true })
+
+  return (
+    <Popover
+      useParentMinWidth
+      placement={placement || 'bottomRight'}
+      trigger={trigger}
+      padding={0}
+      contentProps={{ padding: 0 }}
+      useBottomDrawer={useBottomDrawer}
+      {...popoverProps}
+      renderContent={({ onClose }) => {
+        const handleChange = (...params) => {
+          if (onChange) onChange(...params)
+          onClose()
+        }
+        return (
+          <ScrollView>
+            <Menu
+              vertical
+              items={items}
+              onChange={handleChange}
+              linkPaddingH={useBottomDrawer ? 'md' : 'sm'}
+              linkMinHeight={useBottomDrawer ? 'xl' : 'md'}
+              withDivider={useBottomDrawer}
+            />
+          </ScrollView>
+        )
+      }}
+    >
+      <Link className="neko-section-item-dropdown">
+        <SectionItem color={color} {...props}>
+          {children || (
+            <IconLabel gap={2} invert color={color} {...iconLabelProps} label={valueLabel || value} icon={icon} />
+          )}
+        </SectionItem>
+      </Link>
+    </Popover>
+  )
+}

package/src/components/sections/index.js

@@ -1,3 +1,4 @@
 export * from './Section'
 export * from './SectionItem'
+export * from './SectionItemDropdown'
 export * from './SectionItemLink'

package/src/components/structure/index.js

@@ -7,9 +7,6 @@ export * from './SafeAreaView'
 export * from './Card'
 export * from './Row'
 export * from './Col'
-export * from './modal'
-export * from './drawer'
-export * from './bottomDrawer'
 export * from './popover/Popover'
 export * from './Segment'
 export * from './TopBar'

package/src/components/structure/popover/Popover.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { BottomDrawer } from '../bottomDrawer'
+import { BottomDrawer } from '../../modals/bottomDrawer'
 import { PopoverContent } from './PopoverContent'
 import { useRegisterOverlay } from '../overlay/OverlayHandler'
 import { useResponsiveValue } from '../../../responsive'

package/src/components/structure/popover/Popover.native.js

@@ -1,7 +1,7 @@
 import { Modal, TouchableWithoutFeedback } from 'react-native'
 import React from 'react'
 
-import { BottomDrawer } from '../bottomDrawer'
+import { BottomDrawer } from '../../modals/bottomDrawer'
 import { PopoverContent } from './PopoverContent'
 import { View } from '../View'
 import { calculatePosition } from '../overlay/calculatePosition'

package/src/components/structure/popover/Popover_BU.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { BottomDrawer } from '../bottomDrawer'
+import { BottomDrawer } from '../../modals/bottomDrawer'
 import { PopoverContent } from './PopoverContent'
 import { useRegisterOverlay } from '../overlay/OverlayHandler'
 import { useResponsiveValue } from '../../../responsive'

package/src/components/theme/ThemePickerDrawer.js

@@ -1,13 +1,12 @@
-import { BottomDrawer } from '../structure'
-import { ScrollView } from '../list/ScrollView'
+import { BottomDrawer, DrawerScrollView } from '../modals/bottomDrawer'
 import { ThemePicker } from './ThemePicker'
 
 export function ThemePickerDrawer({ open, onClose, onChange }) {
   return (
     <BottomDrawer open={open} onClose={onClose} maxWidth={550} snapPoints={['50%', '85%']}>
-      <ScrollView padding="md">
+      <DrawerScrollView padding="md">
         <ThemePicker onChange={onChange} />
-      </ScrollView>
+      </DrawerScrollView>
     </BottomDrawer>
   )
 }

package/src/theme/default/blackTheme.js

@@ -7,30 +7,41 @@ export const DEFAULT_BLACK_THEME = mergeDeepRight(BASE_THEME, {
 
   colors: {
     primary: '#818DF9',
-    text: '#FFFFFF',
-    text2: '#E0E0E0',
-    text3: '#B0B0B0',
-    text4: '#8A8A8A',
 
-    mainBG: '#0f0f0f',
-    overlayBG: '#000000',
+    text: '#F2F2F2',
+    text2: '#CFCFCF',
+    text3: '#A6A6A6',
+    text4: '#737373',
+
+    mainBG: '#0A0A0A',
+    overlayBG: '#141414',
     backdrop: '#1f1f1f',
-    shadow: 'rgba(216, 210, 203, 0.1)',
+    shadow: 'rgba(0, 0, 0, 0.7)',
     transparent: 'rgba(0, 0, 0, 0)',
-    divider: '#383E44',
-
-    blue: '#4DA3FF',
-    yellow: '#FFD93B',
-    green: '#4CAF50',
-    purple: '#9B59B6',
-    orange: '#FF7F50',
-    cyan: '#00BCD4',
-    red: '#E74C3C',
-    navy: '#34495E',
+    divider: '#262626',
+
+    blue: '#3A7BFF',
+    yellow: '#FFC857',
+    green: '#2ECC71',
+    purple: '#9B5DE5',
+    orange: '#FF8C42',
+    cyan: '#00C2D1',
+    red: '#FF4D4F',
+    navy: '#1F2A44',
     indigo: '#5C6BC0',
-    gray: '#9E9E9E',
-    brown: '#8D6E63',
-    lylac: '#B39DDB',
-    pink: '#F48FB1',
+    gray: '#8E8E93',
+    brown: '#8B5E3C',
+    lylac: '#C77DFF',
+    pink: '#FF6FAE',
   },
+
+  // components: {
+  // Card: {
+  // border: true,
+  // },
+
+  // Section: {
+  // border: true,
+  // },
+  // },
 })

package/src/theme/default/cyberpunkTheme.js

@@ -5,40 +5,32 @@ export const CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
   label: 'Cyberpunk',
 
   colors: {
-    primary: '#FCEE09',
-    text: '#FFFFFF',
-    text2: '#B3B3B3',
-    text3: '#8C8C8C',
-    text4: '#666666',
+    primary: '#FF4FD8',
 
-    mainBG: '#14141F',
-    overlayBG: '#14141F',
-    backdrop: '#0A0A0F',
-    shadow: 'rgba(39, 45, 52, 0.6)',
-    divider: 'rgba(255,255,255, 0.2)',
-
-    blue: '#00E5FF',
-    yellow: '#FFD600',
-    green: '#00FF9D',
-    purple: '#D500F9',
-    orange: '#FF9100',
-    cyan: '#00B8D4',
-    red: '#FF1744',
-    navy: '#1E2A38',
-    indigo: '#651FFF',
-    gray: '#757575',
-    brown: '#6D4C41',
-    lylac: '#B388FF',
-    pink: '#FF80AB',
-  },
+    text: '#F5EFFF',
+    text2: '#D6C8FF',
+    text3: '#A78BFA',
+    text4: '#7C6BB3',
 
-  components: {
-    Card: {
-      border: true,
-    },
+    mainBG: '#0A0614',
+    overlayBG: '#140A26',
+    backdrop: '#0A0A0F',
+    shadow: 'rgba(0, 0, 0, 0.7)',
+    transparent: 'rgba(0, 0, 0, 0)',
+    divider: '#24123A',
 
-    Section: {
-      border: true,
-    },
+    blue: '#00B3FF',
+    yellow: '#FFD166',
+    green: '#00F5A0',
+    purple: '#9D4EDD',
+    orange: '#FF7A18',
+    cyan: '#00E5FF',
+    red: '#FF3D6E',
+    navy: '#1B1B3A',
+    indigo: '#5A67FF',
+    gray: '#8E8EAA',
+    brown: '#8B5CF6',
+    lylac: '#C77DFF',
+    pink: '#FF4FD8',
   },
 })

package/src/theme/default/hackerTheme.js

@@ -7,30 +7,37 @@ export const DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
 
   colors: {
     primary: '#00FF41',
-    text: '#00FF41',
-    text2: '#00CC33',
-    text3: '#009926',
-    text4: '#00661A',
+
+    // text: '#00FF41',
+    // text2: '#00CC33',
+    // text3: '#009926',
+    // text4: '#00661A',
+
+    text: '#D2FFE9',
+    text2: '#A6F5D0',
+    text3: '#6EE7B7',
+    text4: '#3FAF85',
 
     mainBG: '#000000',
     overlayBG: '#0A0A0A',
     backdrop: '#000000',
     shadow: 'rgba(0, 255, 65, 0.2)',
+    transparent: 'rgba(0, 0, 0, 0)',
     divider: 'rgba(0,255,65, 0.3)',
 
-    blue: '#0087BD',
-    yellow: '#AEBF00',
+    blue: '#00B3FF',
+    yellow: '#E6FF3F',
     green: '#00FF41',
-    purple: '#7A1FA2',
-    orange: '#FF6D00',
-    cyan: '#00BFA5',
-    red: '#D50000',
-    navy: '#003366',
-    indigo: '#303F9F',
-    gray: '#4A4A4A',
-    brown: '#5D4037',
-    lylac: '#8E24AA',
-    pink: '#C51162',
+    purple: '#9B5DE5',
+    orange: '#FF9F1C',
+    cyan: '#00FFE0',
+    red: '#FF3B3B',
+    navy: '#001F2F',
+    indigo: '#4B6BFF',
+    gray: '#2E2E2E',
+    brown: '#5C4033',
+    lylac: '#C084FC',
+    pink: '#FF4FD8',
   },
 
   radius: {

package/src/theme/default/paperTheme.js

@@ -41,5 +41,9 @@ export const DEFAULT_PAPER_THEME = mergeDeepRight(BASE_THEME, {
     Section: {
       border: true,
     },
+
+    TopBar: {
+      borderB: true,
+    },
   },
 })

package/src/theme/default/themes.js

@@ -3,22 +3,13 @@ import { DEFAULT_BLACK_THEME } from './blackTheme'
 import { DEFAULT_DARK_THEME } from './darkTheme'
 import { DEFAULT_LIGHT_THEME } from './lightTheme'
 import { DEFAULT_MATRIX_THEME } from './hackerTheme'
-import { DEFAULT_MSDOS_THEME } from './msdosTheme'
 import { DEFAULT_PAPER_THEME } from './paperTheme'
-import { MIDNIGHT_NEON_THEME } from './midnightTheme'
 
 export const DEFAULT_THEMES = {
   light: DEFAULT_LIGHT_THEME,
   dark: DEFAULT_DARK_THEME,
   paper: DEFAULT_PAPER_THEME,
   black: DEFAULT_BLACK_THEME,
-  // pastel: PASTEL_DREAM_THEME,
-  midnight: MIDNIGHT_NEON_THEME,
-  // sunset: SUNSET_GLOW_THEME,
-  // ocean: OCEAN_BREEZE_THEME,
-  // forest: FOREST_MIST_THEME,
   cyberpunk: CYBERPUNK_DARK_THEME,
-  // deepWoods: DEEP_WOODS_DARK_THEME,
   hacker: DEFAULT_MATRIX_THEME,
-  msdos: DEFAULT_MSDOS_THEME,
 }

package/dist/components/structure/bottomDrawer/native/BottomDrawer.js

@@ -1 +0,0 @@
-import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/bottomDrawer/native/BottomDrawer.js";var _excluded=["children","render","setRender","open","onClose","snapPoints","useSafeArea","enableOverScroll","enableHandlePanningGesture","enableContentPanningGesture","animationConfig","hideHandle","contentProps"],_excluded2=["open"];import{GestureDetector,Gesture,GestureHandlerRootView}from'react-native-gesture-handler';import{Modal,Dimensions,StyleSheet,BackHandler,Platform}from"react-native-web";import{useSafeAreaInsets}from'react-native-safe-area-context';import Animated,{useSharedValue,useAnimatedStyle,withSpring,runOnJS}from'react-native-reanimated';import React from'react';import{DrawerHandle}from"./DrawerHandle";import{DrawerProvider}from"./DrawerContext";import{Pressable}from"../../../actions/Pressable";import{View}from"../../View";import{normalizeSnapPoints,findClosestSnapPoint}from"./utils";import{useColors}from"../../../../theme/ThemeHandler";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";function InnerContent(_ref){var children=_ref.children,render=_ref.render,setRender=_ref.setRender,open=_ref.open,onClose=_ref.onClose,_ref$snapPoints=_ref.snapPoints,snapPoints=_ref$snapPoints===void 0?['50%']:_ref$snapPoints,_ref$useSafeArea=_ref.useSafeArea,useSafeArea=_ref$useSafeArea===void 0?true:_ref$useSafeArea,_ref$enableOverScroll=_ref.enableOverScroll,enableOverScroll=_ref$enableOverScroll===void 0?true:_ref$enableOverScroll,_ref$enableHandlePann=_ref.enableHandlePanningGesture,enableHandlePanningGesture=_ref$enableHandlePann===void 0?true:_ref$enableHandlePann,_ref$enableContentPan=_ref.enableContentPanningGesture,enableContentPanningGesture=_ref$enableContentPan===void 0?true:_ref$enableContentPan,_ref$animationConfig=_ref.animationConfig,animationConfig=_ref$animationConfig===void 0?{damping:50,stiffness:500,mass:0.3,overshootClamping:true,restDisplacementThreshold:10,restSpeedThreshold:10}:_ref$animationConfig,hideHandle=_ref.hideHandle,contentProps=_ref.contentProps,props=_objectWithoutProperties(_ref,_excluded);var _Dimensions$get=Dimensions.get('window'),SCREEN_HEIGHT=_Dimensions$get.height;var insets=useSafeAreaInsets();var bottomInset=useSafeArea?insets.bottom:0;var colors=useColors();var translateY=useSharedValue(SCREEN_HEIGHT);var snapIndex=useSharedValue(0);var velocityY=useSharedValue(0);var normalizedSnapPoints=React.useMemo(function(){return normalizeSnapPoints(snapPoints,SCREEN_HEIGHT,bottomInset);},[snapPoints,useSafeArea]);var maxSnapPoint=React.useMemo(function(){return Math.max.apply(Math,_toConsumableArray(normalizedSnapPoints));},[normalizedSnapPoints]);var minSnapPoint=React.useMemo(function(){return Math.min.apply(Math,_toConsumableArray(normalizedSnapPoints));},[normalizedSnapPoints]);React.useEffect(function(){if(open){var targetY=SCREEN_HEIGHT-normalizedSnapPoints[0];translateY.value=withSpring(targetY,animationConfig);snapIndex.value=0;}else{translateY.value=withSpring(SCREEN_HEIGHT,animationConfig,function(){runOnJS(setRender)(false);});snapIndex.value=-1;}},[open]);React.useEffect(function(){if(!onClose||!open||Platform.OS!=='android')return;var backHandler=BackHandler.addEventListener('hardwareBackPress',function(){onClose();return true;});return function(){return backHandler.remove();};},[open,onClose]);var handleClose=React.useCallback(function(){onClose==null?void 0:onClose();},[onClose]);if(!onClose)handleClose=false;var snapTo=React.useCallback(function(index){'worklet';var snapPoint=normalizedSnapPoints[index];if(snapPoint!==undefined){translateY.value=withSpring(SCREEN_HEIGHT-snapPoint,animationConfig);snapIndex.value=index;}},[normalizedSnapPoints]);var gestureStartTranslateY=useSharedValue(0);var panRef=React.useRef();var panGesture=React.useMemo(function(){return Gesture.Pan().withRef(panRef).enabled(enableHandlePanningGesture||enableContentPanningGesture).onStart(function(){gestureStartTranslateY.value=translateY.value;}).onUpdate(function(event){var newTranslateY=gestureStartTranslateY.value+event.translationY;var maxPosition=SCREEN_HEIGHT-maxSnapPoint;if(enableOverScroll&&newTranslateY>=maxPosition){translateY.value=newTranslateY;}else{translateY.value=Math.max(maxPosition,Math.min(SCREEN_HEIGHT,newTranslateY));}velocityY.value=event.velocityY;}).onEnd(function(){var currentPosition=SCREEN_HEIGHT-translateY.value;var shouldClose=!!handleClose&&(velocityY.value>1500||velocityY.value>800&&currentPosition<minSnapPoint||currentPosition<minSnapPoint*0.35);if(shouldClose){runOnJS(handleClose)();}else{var closestSnapIndex=findClosestSnapPoint(currentPosition,normalizedSnapPoints,velocityY.value);var targetSnapPoint=normalizedSnapPoints[closestSnapIndex];translateY.value=withSpring(SCREEN_HEIGHT-targetSnapPoint,animationConfig);snapIndex.value=closestSnapIndex;}});},[enableHandlePanningGesture,enableContentPanningGesture,enableOverScroll,maxSnapPoint,minSnapPoint,normalizedSnapPoints,animationConfig,handleClose]);var animatedSheetStyle=useAnimatedStyle(function(){var currentHeight=SCREEN_HEIGHT-translateY.value;return{transform:[{translateY:translateY.value}],maxHeight:currentHeight};});var contextValue=React.useMemo(function(){return{translateY:translateY,snapIndex:snapIndex,maxSnapPoint:maxSnapPoint,snapTo:snapTo,animationConfig:animationConfig,panRef:panRef,normalizedSnapPoints:normalizedSnapPoints,SCREEN_HEIGHT:SCREEN_HEIGHT,minSnapPoint:minSnapPoint,handleClose:handleClose,velocityY:velocityY};},[maxSnapPoint,normalizedSnapPoints,SCREEN_HEIGHT,minSnapPoint,handleClose]);return _jsxs(GestureHandlerRootView,{style:{flex:1},children:[_jsx(Pressable,{absoluteFill:true,bg:"backdrop_op70",onPress:function onPress(){if(!handleClose)return;runOnJS(handleClose)();}}),_jsx(DrawerProvider,{value:contextValue,children:_jsx(GestureDetector,{gesture:panGesture,children:_jsx(Animated.View,{style:[styles.container,{height:SCREEN_HEIGHT},animatedSheetStyle],pointerEvents:"box-none",children:_jsxs(View,Object.assign({flex:true,bg:"overlayBG",shadow:true,paddingB:useSafeArea&&bottomInset,borderRadiusT:"xxxl",marginL:"auto",marginR:"auto",fullW:true},props,{children:[_jsx(DrawerHandle,{hide:hideHandle}),_jsx(View,Object.assign({flex:true},contentProps,{children:children}))]}))})})})]});}var styles=StyleSheet.create({container:{position:'absolute',left:0,right:0,top:0}});export function BottomDrawer(_ref2){var open=_ref2.open,props=_objectWithoutProperties(_ref2,_excluded2);var _React$useState=React.useState(open),_React$useState2=_slicedToArray(_React$useState,2),render=_React$useState2[0],setRender=_React$useState2[1];React.useEffect(function(){if(open){setRender(true);}},[open]);return _jsx(Modal,{visible:render,transparent:true,statusBarTranslucent:true,navigationBarTranslucent:true,animationType:"none",children:_jsx(InnerContent,Object.assign({},props,{open:open,render:render,setRender:setRender}))});}

package/dist/components/structure/bottomDrawer/native/DrawerContext.js

@@ -1 +0,0 @@
-var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/bottomDrawer/native/DrawerContext.js";import React from'react';import{jsx as _jsx}from"react/jsx-runtime";var DrawerContext=React.createContext(null);export function DrawerProvider(_ref){var children=_ref.children,value=_ref.value;return _jsx(DrawerContext.Provider,{value:value,children:children});}export function useDrawerContext(){var context=React.useContext(DrawerContext);if(!context){throw new Error('useDrawerContext must be used within a DrawerProvider');}return context;}

package/dist/components/structure/bottomDrawer/native/DrawerHandle.js

@@ -1 +0,0 @@
-var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/bottomDrawer/native/DrawerHandle.js";import{Divider}from"../../../helpers/Separator";import{View}from"../../View";import{jsx as _jsx}from"react/jsx-runtime";export function DrawerHandle(_ref){var hide=_ref.hide;if(!!hide)return false;return _jsx(View,{center:true,padding:"sm",children:_jsx(Divider,{maxWidth:35,line:4,color:"text4_op30",height:4})});}

package/dist/components/structure/bottomDrawer/native/createDrawerScrollComponent.js

@@ -1 +0,0 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/bottomDrawer/native/createDrawerScrollComponent.js";var _excluded=["ref","onScroll"];import{Gesture,GestureDetector}from'react-native-gesture-handler';import Animated,{useSharedValue,useAnimatedScrollHandler,useAnimatedRef,scrollTo,withSpring,runOnJS}from'react-native-reanimated';import React from'react';import{findClosestSnapPoint,clamp}from"./utils";import{useDrawerContext}from"./DrawerContext";import{jsx as _jsx}from"react/jsx-runtime";export function createDrawerScrollComponent(Component){var AnimatedComponent=Animated.createAnimatedComponent(Component);function DrawerScrollComponent(_ref){var ref=_ref.ref,_onScroll=_ref.onScroll,props=_objectWithoutProperties(_ref,_excluded);var _useDrawerContext=useDrawerContext(),translateY=_useDrawerContext.translateY,panRef=_useDrawerContext.panRef,normalizedSnapPoints=_useDrawerContext.normalizedSnapPoints,SCREEN_HEIGHT=_useDrawerContext.SCREEN_HEIGHT,maxSnapPoint=_useDrawerContext.maxSnapPoint,minSnapPoint=_useDrawerContext.minSnapPoint,handleClose=_useDrawerContext.handleClose,animationConfig=_useDrawerContext.animationConfig,snapIndex=_useDrawerContext.snapIndex;var scrollRef=useAnimatedRef();var scrollOffset=useSharedValue(0);var prevTranslationY=useSharedValue(0);var drawerMoved=useSharedValue(false);React.useImperativeHandle(ref,function(){return scrollRef.current;});var maxPosition=SCREEN_HEIGHT-maxSnapPoint;var panGesture=React.useMemo(function(){return Gesture.Pan().activeOffsetY([-10,10]).blocksExternalGesture(panRef).onStart(function(){prevTranslationY.value=0;drawerMoved.value=false;}).onUpdate(function(event){var delta=event.translationY-prevTranslationY.value;prevTranslationY.value=event.translationY;var currentY=translateY.value;var atMaxSnap=currentY<=maxPosition+1;var atScrollTop=scrollOffset.value<=0;if(drawerMoved.value){var newY=clamp(currentY+delta,maxPosition,SCREEN_HEIGHT);translateY.value=newY;scrollTo(scrollRef,0,0,false);if(newY<=maxPosition+1&&delta<0){drawerMoved.value=false;}}else if(!atMaxSnap){drawerMoved.value=true;var _newY=clamp(currentY+delta,maxPosition,SCREEN_HEIGHT);translateY.value=_newY;scrollTo(scrollRef,0,0,false);}else if(atScrollTop&&delta>0){drawerMoved.value=true;var _newY2=clamp(currentY+delta,maxPosition,SCREEN_HEIGHT);translateY.value=_newY2;scrollTo(scrollRef,0,0,false);}}).onEnd(function(event){if(!drawerMoved.value)return;var currentPosition=SCREEN_HEIGHT-translateY.value;var velocity=event.velocityY;var shouldClose=!!handleClose&&(velocity>1500||velocity>800&&currentPosition<minSnapPoint||currentPosition<minSnapPoint*0.35);if(shouldClose){runOnJS(handleClose)();}else{var closestSnapIndex=findClosestSnapPoint(currentPosition,normalizedSnapPoints,velocity);var targetSnapPoint=normalizedSnapPoints[closestSnapIndex];translateY.value=withSpring(SCREEN_HEIGHT-targetSnapPoint,animationConfig);snapIndex.value=closestSnapIndex;}});},[panRef,maxPosition,normalizedSnapPoints,minSnapPoint,handleClose,animationConfig]);var nativeGesture=React.useMemo(function(){return Gesture.Native();},[]);var composedGesture=React.useMemo(function(){return Gesture.Simultaneous(panGesture,nativeGesture);},[panGesture,nativeGesture]);var animatedScrollHandler=useAnimatedScrollHandler({onScroll:function onScroll(event){scrollOffset.value=event.contentOffset.y;if(_onScroll){runOnJS(_onScroll)(event);}}});return _jsx(GestureDetector,{gesture:composedGesture,children:_jsx(AnimatedComponent,Object.assign({ref:scrollRef,style:{flex:1},onScroll:animatedScrollHandler,scrollEventThrottle:16,bounces:false,overScrollMode:"never"},props))});}return DrawerScrollComponent;}

package/dist/components/structure/bottomDrawer/web/BottomDrawer.js

@@ -1 +0,0 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";var _excluded=["snapPoints","contentProps"];var _this=this,_jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/bottomDrawer/web/BottomDrawer.js";import{Drawer}from"../../drawer";import{jsx as _jsx}from"react/jsx-runtime";export var BottomDrawer=function BottomDrawer(_ref){var snapPoints=_ref.snapPoints,contentProps=_ref.contentProps,props=_objectWithoutProperties(_ref,_excluded);return _jsx(Drawer,Object.assign({height:(snapPoints==null?void 0:snapPoints[0])||400,contentProps:Object.assign({padding:0},contentProps)},props));};

package/dist/components/structure/drawer/Drawer.js

@@ -1 +0,0 @@
-var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/drawer/Drawer.js";import{Modal}from"../modal/Modal";import{jsx as _jsx}from"react/jsx-runtime";export function Drawer(props){return _jsx(Modal,Object.assign({position:"bottom"},props));}

package/dist/components/structure/modal/Modal.js

@@ -1 +0,0 @@
-import _objectWithoutProperties from"@babel/runtime/helpers/objectWithoutProperties";import _defineProperty from"@babel/runtime/helpers/defineProperty";import _objectDestructuringEmpty from"@babel/runtime/helpers/objectDestructuringEmpty";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";var _jsxFileName="/Users/christianstorch/Apps/nekoapps/libs/neko-ui/src/components/structure/modal/Modal.js";var _excluded=["open","onClose","title","width","children","header","footer","noLayout","disableOutsideClick"],_excluded2=["contentProps","headerProps","footerProps","position"];import{pipe}from'ramda';import{AnimatedView}from"../../animations/AnimatedView";import{ModalBackdrop}from"./ModalBackdrop";import{ModalContent}from"./ModalContent";import{ModalFooter}from"./ModalFooter";import{ModalHeader}from"./ModalHeader";import{Portal}from"../../helpers/Portal";import{useDefaultModifier}from"../../../modifiers/default";import{useThemeComponentModifier}from"../../../modifiers/themeComponent";import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";var DEFAULT_PROPS=function DEFAULT_PROPS(_ref){var _ref2=_slicedToArray(_ref,2);_objectDestructuringEmpty(_ref2[0]);var position=_ref2[1].position;var radiusKey='br';var height=undefined;if(position==='bottom'){radiusKey='borderRadiusT';height='95%';}else if(position==='top'){radiusKey='borderRadiusB';height='95%';}else if(position==='right'){radiusKey='borderRadiusL';height='100%';}else if(position==='left'){radiusKey='borderRadiusR';height='100%';}return _defineProperty(_defineProperty(_defineProperty(_defineProperty({maxWidth:'100%',maxHeight:!position&&'95%',height:height,scale:!position,fade:!!position,slide:position&&{from:position}},radiusKey,'xl'),"bg",'overlayBG'),"overflow",'hidden'),"shadow",true);};export function Modal(_ref4){var open=_ref4.open,onClose=_ref4.onClose,title=_ref4.title,_ref4$width=_ref4.width,width=_ref4$width===void 0?500:_ref4$width,children=_ref4.children,header=_ref4.header,footer=_ref4.footer,noLayout=_ref4.noLayout,disableOutsideClick=_ref4.disableOutsideClick,rootProps=_objectWithoutProperties(_ref4,_excluded);var _pipe=pipe(useThemeComponentModifier('Modal'),useDefaultModifier(DEFAULT_PROPS))([{},rootProps]),_pipe2=_slicedToArray(_pipe,2);_objectDestructuringEmpty(_pipe2[0]);var formattedProps=_pipe2[1];var contentProps=formattedProps.contentProps,headerProps=formattedProps.headerProps,footerProps=formattedProps.footerProps,position=formattedProps.position,props=_objectWithoutProperties(formattedProps,_excluded2);var content=children;if(!noLayout){content=_jsxs(_Fragment,{children:[_jsx(ModalHeader,Object.assign({title:title,onClose:onClose},headerProps,{children:header})),_jsx(ModalContent,Object.assign({},contentProps,{children:children})),_jsx(ModalFooter,Object.assign({},footerProps,{children:footer}))]});}return _jsx(Portal,{children:_jsx(ModalBackdrop,{open:open,onClose:!disableOutsideClick&&onClose,position:position,children:_jsx(AnimatedView,Object.assign({className:"neko-modal",open:open,width:width},props,{onPress:function onPress(e){return e.stopPropagation();},children:content}))})});}