@neko-os/ui 0.0.8 → 0.0.10

package/src/i18n/I18n.js

@@ -0,0 +1,97 @@
+export class I18n {
+  constructor(options = {}) {
+    this.language = options.language || 'en'
+    this.fallback = options.fallback || 'en'
+    this.onChangeLanguage = options.onChangeLanguage
+    this.resources = options.resources || {}
+    this.loader = options.loader
+  }
+
+  addResources(lang, ns, data) {
+    if (!this.resources[lang]) this.resources[lang] = {}
+    this.resources[lang][ns] = { ...this.resources[lang][ns], ...data }
+  }
+
+  changeLanguage(lang) {
+    this.language = lang
+    this.onChangeLanguage?.(lang)
+  }
+
+  async tAsync(key, opts = {}) {
+    const { ns = 'common' } = opts
+    if (!this.resources[this.language]?.[ns] && this.loader) {
+      await this._loadNamespace(this.language, ns)
+    }
+    return this.t(key, opts)
+  }
+
+  t(key, opts = {}) {
+    let { ns = 'common', context, ...vars } = opts
+    const count = vars?.count
+    if (key.includes(':')) {
+      const splittedKey = key.split(':')
+      ns = splittedKey[0]
+      key = splittedKey[1]
+    }
+    const langData = this.resources[this.language]?.[ns]
+    let value = this._resolveKey(langData, key, count, context)
+    if (context) console.log(context, value)
+
+    if (!value) {
+      const fallbackData = this.resources[this.fallback]?.[ns]
+      value = this._resolveKey(fallbackData, key, count, context) || key
+    }
+
+    return this._interpolate(value, vars)
+  }
+
+  async _loadNamespace(lang, ns) {
+    if (!this.loader) return
+    const data = await this.loader(lang, ns)
+    this.addResources(lang, ns, data)
+  }
+
+  _resolveKey(nsData, key, count, context) {
+    if (!nsData) return null
+
+    // Support for nested keys like "a.b.c"
+    const parts = key.split('.')
+    const basePath = parts.slice(0, -1)
+    const baseKey = parts[parts.length - 1]
+    const parent = basePath.reduce((acc, part) => (acc ? acc[part] : undefined), nsData) || nsData
+
+    if (!parent) return null
+
+    // Support for context (e.g., gender) - tries key_context
+    if (context) {
+      const contextKey = `${baseKey}_${context}`
+      if (parent[contextKey] != null) {
+        return parent[contextKey]
+      }
+    }
+
+    // Support for pluralization - tries key_one for singular
+    if (typeof count === 'number') {
+      if (count === 0) {
+        const singularKey = `${baseKey}_zero`
+        if (parent[singularKey] != null) {
+          return parent[singularKey]
+        }
+      }
+      if (count === 1) {
+        const singularKey = `${baseKey}_one`
+        if (parent[singularKey] != null) {
+          return parent[singularKey]
+        }
+      }
+    }
+
+    // Return the base key
+    return parent[baseKey]
+  }
+
+  _interpolate(str, vars) {
+    if (typeof str !== 'string') return str
+    return str.replace(/\{\{(.*?)\}\}/g, (_, v) => vars[v.trim()] ?? '')
+  }
+}

package/src/i18n/I18nProvider.js

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { I18n } from './I18n'
+
+const I18nContext = React.createContext()
+
+export function I18nProvider({ children, i18n, config }) {
+  const i18nRef = React.useRef(i18n || new I18n(config))
+  const [v, setVersion] = React.useState(0)
+
+  const forceUpdate = React.useCallback(() => setVersion((v) => v + 1), [])
+
+  const changeLanguage = React.useCallback(
+    (lang) => {
+      i18nRef.current.changeLanguage(lang)
+      forceUpdate()
+    },
+    [forceUpdate]
+  )
+
+  const value = React.useMemo(
+    () => ({
+      t: (...args) => i18nRef.current.t(...args),
+      i18n: i18nRef.current,
+      v,
+      language: i18nRef.current.language,
+      changeLanguage,
+    }),
+    [v, forceUpdate, changeLanguage]
+  )
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>
+}
+
+export function useTranslation(namespace) {
+  const ctx = React.useContext(I18nContext)
+  if (!ctx) throw new Error('useTranslation must be used inside <I18nProvider>')
+  const t = (key, opts = {}) => ctx?.t?.(key, { ns: namespace, ...opts })
+  return { ...ctx, t }
+}

package/src/i18n/index.js

@@ -0,0 +1,2 @@
+export * from './I18nProvider'
+export * from './I18n'

package/src/index.css

@@ -62,6 +62,10 @@ button {
   opacity: 0.95;
 }
 
+/* ::placeholder { */
+/* color: rgba(127, 127, 127, 0.4); */
+/* } */
+
 @keyframes wave-effect {
   0% {
     opacity: 1;

package/src/index.js

@@ -2,6 +2,7 @@ export * from './helpers'
 export * from './components'
 export * from './theme'
 export * from './responsive'
+export * from './i18n'
 export * from './NekoUI'
 
 export const version = 41

package/src/modifiers/animations/fadeEffect.web.js

@@ -0,0 +1,3 @@
+import { useFadeEffect as useFadeEffectNative } from './fadeEffect.native'
+
+export const useFadeEffect = useFadeEffectNative

package/src/modifiers/animations/scrollEffect.web.js

@@ -0,0 +1,3 @@
+import { useScrollEffect as useScrollEffectNative } from './scrollEffect.native'
+
+export const useScrollEffect = useScrollEffectNative

package/src/modifiers/animations/slideEffect.web.js

@@ -0,0 +1,3 @@
+import { useSlideEffect as useSlideEffectNative } from './slideEffect.native'
+
+export const useSlideEffect = useSlideEffectNative

package/src/modifiers/fullColor.js

@@ -3,7 +3,7 @@ import tinycolor from 'tinycolor2'
 import { getContrastColor } from '../theme/helpers/contrastColor'
 import { useGetColor } from '../theme/ThemeHandler'
 
-export function useFullColorModifier([{ color, ...values }, { outline, fill, ...props }]) {
+export function useFullColorModifier([{ color, ...values }, { outline, contrastTolerance, fill, ...props }]) {
   const getColor = useGetColor()
 
   let bg = color
@@ -15,7 +15,7 @@ export function useFullColorModifier([{ color, ...values }, { outline, fill, ...
     bg = 'transparent'
     fontColor = color
   } else {
-    fontColor = getContrastColor(bgObj, [getColor('text'), getColor('overlayBG')])
+    fontColor = getContrastColor(bgObj, [getColor('overlayBG'), getColor('text')], contrastTolerance)
   }
 
   return [

package/src/modifiers/overflow.js

@@ -1,12 +1,17 @@
 import { clearProps } from './_helpers'
 
 export function useOverflowModifier([values, props]) {
-  let { hiddenOverflow, scroll, scrollY, scrollX, overflow, overflowY, overflowX, ...restProps } = props
+  let { hiddenOverflow, scroll, noScroll, scrollY, scrollX, overflow, overflowY, overflowX, ...restProps } = props
 
   if (hiddenOverflow) overflow = 'hidden'
   if (scroll) overflow = 'scroll'
   if (scrollY) overflowY = 'scroll'
   if (scrollX) overflowX = 'scroll'
+  if (noScroll) {
+    if (overflow === 'scroll') overflow = undefined
+    if (overflowY === 'scroll') overflowY = undefined
+    if (overflowX === 'scroll') overflowX = undefined
+  }
 
   const style = clearProps({ overflow, overflowY, overflowX })
 

package/src/modifiers/position.js

@@ -1,7 +1,9 @@
 import { Platform } from '../abstractions/Platform'
 import { clearProps } from './_helpers'
+import { useGetSpace } from '../theme'
 
 export function usePositionModifier([values, props]) {
+  const getSpace = useGetSpace()
   let {
     position,
     absolute,
@@ -24,6 +26,11 @@ export function usePositionModifier([values, props]) {
   if (fixed || fixedFill) position = 'fixed'
   if (sticky) position = 'sticky'
 
+  top = getSpace(top)
+  bottom = getSpace(bottom)
+  right = getSpace(right)
+  left = getSpace(left)
+
   if (absoluteFill || fixedFill) {
     top = 0
     bottom = 0

package/src/theme/ThemeHandler.js

@@ -53,10 +53,26 @@ export function useMergeThemeComponent(name, props) {
   return mergeDeepRight(themeProps, props)
 }
 
-export function ThemeHandler({ breakpoints, themes, initTheme, children }) {
+export function ThemeHandler({ breakpoints, themes, initTheme, onChangeTheme, children }) {
+  const [themePickerOpen, setThemePickerOpen] = React.useState(false)
+  const openThemePicker = () => setThemePickerOpen(true)
   const [activeThemeKey, setActiveThemeKey] = React.useState(initTheme || 'light')
+  const toggleTheme = () => setActiveThemeKey(activeThemeKey === 'light' ? 'dark' : 'light')
   const theme = useFormattedTheme(themes, activeThemeKey)
-  const value = { theme, themes, activeThemeKey, setActiveThemeKey, breakpoints: breakpoints || DEFAULT_BREAKPOINTS }
+
+  const value = {
+    theme,
+    themes,
+    activeThemeKey,
+    setActiveThemeKey,
+    toggleTheme,
+    themePickerOpen,
+    setThemePickerOpen,
+    onChangeTheme,
+    openThemePicker,
+    toggleTheme,
+    breakpoints: breakpoints || DEFAULT_BREAKPOINTS,
+  }
 
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
 }

package/src/theme/default/base.js

@@ -37,36 +37,40 @@ export const BASE_THEME = {
 
   // Buttons, inputs, etc.
   elementHeights: {
+    xxxs: 10,
+    xxs: 15,
     xs: 20,
     sm: 30,
     md: 35,
-    lg: 50,
-    xl: 60,
+    lg: 40,
+    xl: 50,
+    xxl: 60,
+    xxxl: 70,
   },
 
   texts: {
     h1: {
-      fontSize: 32,
+      fontSize: 35,
       strong: true,
     },
     h2: {
-      fontSize: 26,
+      fontSize: 28,
       strong: true,
     },
     h3: {
-      fontSize: 22,
+      fontSize: 26,
       strong: true,
     },
     h4: {
-      fontSize: 18,
+      fontSize: 22,
       strong: true,
     },
     h5: {
-      fontSize: 16,
+      fontSize: 18,
       strong: true,
     },
     h6: {
-      fontSize: 14,
+      fontSize: 16,
       strong: true,
     },
     p: { fontSize: 14 },

package/src/theme/default/blackTheme.js

@@ -1,7 +1,10 @@
 import { mergeDeepRight } from 'ramda'
+
 import { BASE_THEME } from './base'
 
 export const DEFAULT_BLACK_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Pitch Black',
+
   colors: {
     primary: '#818DF9',
     text: '#FFFFFF',
@@ -9,7 +12,7 @@ export const DEFAULT_BLACK_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#B0B0B0',
     text4: '#8A8A8A',
 
-    bg: '#0f0f0f',
+    mainBG: '#0f0f0f',
     overlayBG: '#000000',
     backdrop: '#1f1f1f',
     shadow: 'rgba(216, 210, 203, 0.1)',

package/src/theme/default/cyberpunkTheme.js

@@ -2,6 +2,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Cyberpunk',
+
   colors: {
     primary: '#FCEE09',
     text: '#FFFFFF',
@@ -9,7 +11,7 @@ export const CYBERPUNK_DARK_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#8C8C8C',
     text4: '#666666',
 
-    bg: '#0A0A0F',
+    mainBG: '#14141F',
     overlayBG: '#14141F',
     backdrop: '#0A0A0F',
     shadow: 'rgba(39, 45, 52, 0.6)',

package/src/theme/default/darkTheme.js

@@ -2,6 +2,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const DEFAULT_DARK_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Dark',
+
   colors: {
     primary: '#818DF9',
     text: '#FFFFFF',
@@ -9,7 +11,7 @@ export const DEFAULT_DARK_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#B0B0B0',
     text4: '#8A8A8A',
 
-    bg: '#383E44',
+    mainBG: '#383E44',
     overlayBG: '#272D34',
     backdrop: '#383E44',
     shadow: 'rgba(216, 210, 203, 0.1)',

package/src/theme/default/deepWoodsTheme.js

@@ -2,14 +2,16 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const DEEP_WOODS_DARK_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Deep Woods',
+
   colors: {
     primary: '#4CAF50',
-    text: '#F0F8F2',
+    text: '#C8E6C9',
     text2: '#C8E6C9',
     text3: '#A5D6A7',
     text4: '#81C784',
 
-    bg: '#0D1B14',
+    mainBG: '#0D1B14',
     overlayBG: '#16281F',
     backdrop: '#0D1B14',
     shadow: 'rgba(39, 45, 52, 0.6)',

package/src/theme/default/forestTheme.js

@@ -2,6 +2,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const FOREST_MIST_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Forest Mist',
+
   colors: {
     primary: '#4CAF50',
     text: '#0B2414',
@@ -9,7 +11,7 @@ export const FOREST_MIST_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#1B5E20',
     text4: '#388E3C',
 
-    bg: '#E9F5EC',
+    mainBG: '#E9F5EC',
     overlayBG: '#FFFFFF',
     backdrop: '#E9F5EC',
     shadow: 'rgba(39, 45, 52, 0.15)',

package/src/theme/default/hackerTheme.js

@@ -3,6 +3,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Hacker',
+
   colors: {
     primary: '#00FF41',
     text: '#00FF41',
@@ -10,7 +12,7 @@ export const DEFAULT_MATRIX_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#009926',
     text4: '#00661A',
 
-    bg: '#000000',
+    mainBG: '#000000',
     overlayBG: '#0A0A0A',
     backdrop: '#000000',
     shadow: 'rgba(0, 255, 65, 0.2)',

package/src/theme/default/lightTheme.js

@@ -2,6 +2,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const DEFAULT_LIGHT_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Light',
+
   colors: {
     primary: '#818DF9',
     text: '#272D34',
@@ -9,7 +11,7 @@ export const DEFAULT_LIGHT_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#6E7680',
     text4: '#9AA1AC',
 
-    bg: '#F4F5FE',
+    mainBG: '#F4F5FE',
     overlayBG: '#FFFFFF',
     backdrop: '#383E44',
     shadow: 'rgba(39, 45, 52, 0.15)',

package/src/theme/default/midnightTheme.js

@@ -2,6 +2,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const MIDNIGHT_NEON_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Midnight',
+
   colors: {
     primary: '#FF00FF',
     text: '#F0F0F0',
@@ -9,7 +11,7 @@ export const MIDNIGHT_NEON_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#A3A3A3',
     text4: '#7A7A7A',
 
-    bg: '#0D0D0D',
+    mainBG: '#0D0D0D',
     overlayBG: '#1A1A1A',
     backdrop: '#0D0D0D',
     shadow: 'rgba(39, 45, 52, 0.6)',

package/src/theme/default/msdosTheme.js

@@ -3,14 +3,16 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const DEFAULT_MSDOS_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'MSDOS',
+
   colors: {
     primary: '#FFFF00',
     text: '#FFFFFF',
-    text2: '#FFD700',
-    text3: '#CCCCCC',
-    text4: '#999999',
+    text2: '#E0E0E0',
+    text3: '#B0B0B0',
+    text4: '#8A8A8A',
 
-    bg: '#0000AA',
+    mainBG: '#0000AA',
     overlayBG: '#000088',
     backdrop: '#0000AA',
     shadow: 'rgba(0, 0, 0, 0.6)',
@@ -31,6 +33,18 @@ export const DEFAULT_MSDOS_THEME = mergeDeepRight(BASE_THEME, {
     pink: '#FF69B4',
   },
 
+  radius: {
+    xxxs: 1,
+    xxs: 2,
+    xs: 3,
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 10,
+    xxl: 12,
+    xxxl: 14,
+  },
+
   components: {
     Card: {
       border: 1,

package/src/theme/default/oceanTheme.js

@@ -2,14 +2,16 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const OCEAN_BREEZE_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Ocean Breeze',
+
   colors: {
     primary: '#2B90D9',
-    text: '#04364A',
+    text: '#065277',
     text2: '#065A82',
     text3: '#0B84B4',
     text4: '#3ABEFF',
 
-    bg: '#E6F7FF',
+    mainBG: '#E6F7FF',
     overlayBG: '#FFFFFF',
     backdrop: '#04364A',
     shadow: 'rgba(39, 45, 52, 0.15)',

package/src/theme/default/paperTheme.js

@@ -0,0 +1,35 @@
+import { mergeDeepRight } from 'ramda'
+
+import { BASE_THEME } from './base'
+
+export const DEFAULT_PAPER_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Paper',
+
+  colors: {
+    primary: '#5A5A5A',
+    text: '#000000',
+    text2: '#333333',
+    text3: '#555555',
+    text4: '#777777',
+
+    mainBG: '#F8F1E3',
+    overlayBG: '#F8F1E3',
+    backdrop: '#383E44',
+    shadow: 'rgba(0, 0, 0, 0.04)',
+    divider: '#E3D9C9',
+
+    blue: '#6B8EAE',
+    yellow: '#EADCA6',
+    green: '#88A288',
+    purple: '#A391B8',
+    orange: '#D9A066',
+    cyan: '#9CC9C2',
+    red: '#B85C5C',
+    navy: '#4A4A4A',
+    indigo: '#70788C',
+    gray: '#B8B8B8',
+    brown: '#8B7355',
+    lylac: '#C7B7D4',
+    pink: '#E4A1B2',
+  },
+})

package/src/theme/default/pastelTheme.js

@@ -2,6 +2,8 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const PASTEL_DREAM_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Pastel Dream',
+
   colors: {
     primary: '#FFB6C1',
     text: '#4B4453',
@@ -9,7 +11,7 @@ export const PASTEL_DREAM_THEME = mergeDeepRight(BASE_THEME, {
     text3: '#A093A6',
     text4: '#C9BBCF',
 
-    bg: '#FFF7FA',
+    mainBG: '#FFF7FA',
     overlayBG: '#FFFFFF',
     backdrop: '#4B4453',
     shadow: 'rgba(39, 45, 52, 0.15)',

package/src/theme/default/sunsetTheme.js

@@ -3,15 +3,17 @@ import { mergeDeepRight } from 'ramda'
 import { BASE_THEME } from './base'
 
 export const SUNSET_GLOW_THEME = mergeDeepRight(BASE_THEME, {
+  label: 'Sunset',
+
   colors: {
     primary: '#FF6B6B',
-    text: '#331E0A',
+    text: '#4B372E',
     text2: '#5C4033',
     text3: '#8C5A43',
     text4: '#B97A57',
 
-    bg: '#FFF5E6',
-    overlayBG: '#FFFFFF',
+    mainBG: '#FFF5E6',
+    overlayBG: '#FFFAF1',
     backdrop: '#331E0A',
     shadow: 'rgba(39, 45, 52, 0.15)',
     divider: '#f0f0f0',

package/src/theme/default/themes.js

@@ -1,27 +1,24 @@
 import { CYBERPUNK_DARK_THEME } from './cyberpunkTheme'
-import { DEEP_WOODS_DARK_THEME } from './deepWoodsTheme'
 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 { FOREST_MIST_THEME } from './forestTheme'
+import { DEFAULT_PAPER_THEME } from './paperTheme'
 import { MIDNIGHT_NEON_THEME } from './midnightTheme'
-import { OCEAN_BREEZE_THEME } from './oceanTheme'
-import { PASTEL_DREAM_THEME } from './pastelTheme'
-import { SUNSET_GLOW_THEME } from './sunsetTheme'
 
 export const DEFAULT_THEMES = {
   light: DEFAULT_LIGHT_THEME,
   dark: DEFAULT_DARK_THEME,
+  paper: DEFAULT_PAPER_THEME,
   black: DEFAULT_BLACK_THEME,
-  pastel: PASTEL_DREAM_THEME,
+  // pastel: PASTEL_DREAM_THEME,
   midnight: MIDNIGHT_NEON_THEME,
-  sunset: SUNSET_GLOW_THEME,
-  ocean: OCEAN_BREEZE_THEME,
-  forest: FOREST_MIST_THEME,
+  // sunset: SUNSET_GLOW_THEME,
+  // ocean: OCEAN_BREEZE_THEME,
+  // forest: FOREST_MIST_THEME,
   cyberpunk: CYBERPUNK_DARK_THEME,
-  deepWoods: DEEP_WOODS_DARK_THEME,
+  // deepWoods: DEEP_WOODS_DARK_THEME,
   hacker: DEFAULT_MATRIX_THEME,
   msdos: DEFAULT_MSDOS_THEME,
 }

package/src/theme/format/formatTheme.js

@@ -1,5 +1,6 @@
-import { mergeDeepRight, pipe } from 'ramda'
+import { mergeDeepRight, mergeDeepLeft, pipe } from 'ramda'
 import React from 'react'
+import tinycolor from 'tinycolor2'
 
 import { DEFAULT_LIGHT_THEME } from '../default/lightTheme'
 import { DEFAULT_THEMES } from '../default/themes'
@@ -15,8 +16,13 @@ export function formatTheme(themes, key) {
   const theme = themes[key] || DEFAULT_THEMES[key] || DEFAULT_LIGHT_THEME
   const baseDefaultTheme = DEFAULT_THEMES[theme.base] || DEFAULT_THEMES[key] || DEFAULT_LIGHT_THEME
 
-  return pipe(
+  const formattedTheme = pipe(
     mergeDeepRight(baseDefaultTheme), //
-    applyColorVariantsOnTheme
+    applyColorVariantsOnTheme,
+    mergeDeepLeft(themes._all || {}) //
   )({ ...theme })
+
+  const isDark = tinycolor(formattedTheme?.colors?.overlayBG || formattedTheme?.colors?.bg).isDark()
+
+  return { ...formattedTheme, isDark, isLight: !isDark }
 }