@hanzogui/web 8.3.0 → 8.3.2

package/src/helpers/getThemeCSSRules.ts

@@ -1,10 +1,10 @@
 import { simpleHash } from '@hanzogui/helpers'
-import { getSetting } from '../config'
-import { THEME_CLASSNAME_PREFIX } from '../constants/constants'
-import { variableToString } from '../createVariable'
-import type { CreateGuiProps, ThemeParsed, Variable } from '../types'
-import { getOrCreateVariable, getOrCreateMutatedVariable } from './registerCSSVariable'
-import { sortString } from './sortString'
+import { getSetting } from '../config.ts'
+import { THEME_CLASSNAME_PREFIX } from '../constants/constants.ts'
+import { variableToString } from '../createVariable.ts'
+import type { CreateGuiProps, ThemeParsed, Variable } from '../types.tsx'
+import { getOrCreateVariable, getOrCreateMutatedVariable } from './registerCSSVariable.ts'
+import { sortString } from './sortString.ts'
 
 const darkLight = ['dark', 'light']
 const lightDark = ['light', 'dark']

package/src/helpers/getTokenForKey.ts

@@ -1,14 +1,14 @@
 import { tokenCategories } from '@hanzogui/helpers'
-import { getConfig } from '../config'
-import { isVariable } from '../createVariable'
+import { getConfig } from '../config.ts'
+import { isVariable } from '../createVariable.ts'
 import type {
   GetStyleState,
   ResolveVariableAs,
   SplitStyleProps,
   Variable,
-} from '../types'
-import { getFontsForLanguage } from './getVariantExtras'
-import { normalizeColor } from './normalizeColor'
+} from '../types.tsx'
+import { getFontsForLanguage } from './getVariantExtras.tsx'
+import { normalizeColor } from './normalizeColor.ts'
 
 const fontShorthand = {
   fontSize: 'size',

package/src/helpers/getVariantExtras.tsx

@@ -1,6 +1,6 @@
-import { getSetting } from '../config'
-import { getVariableValue } from '../createVariable'
-import type { GenericFonts, GetStyleState, LanguageContextType } from '../types'
+import { getSetting } from '../config.ts'
+import { getVariableValue } from '../createVariable.ts'
+import type { GenericFonts, GetStyleState, LanguageContextType } from '../types.tsx'
 
 const cache = new WeakMap<GetStyleState, { props: GetStyleState['props']; value: any }>()
 

package/src/helpers/insertStyleRule.tsx

@@ -1,12 +1,12 @@
 import { StyleObjectIdentifier, StyleObjectRules } from '@hanzogui/helpers'
-import { createVariable } from '../createVariable'
+import { createVariable } from '../createVariable.ts'
 import type {
   DedupedTheme,
   DedupedThemes,
   RulesToInsert,
   ThemeParsed,
   TokensParsed,
-} from '../types'
+} from '../types.tsx'
 
 // only cache hanzogui styles
 // TODO merge totalSelectorsInserted and allSelectors?

package/src/helpers/isGuiComponent.tsx

@@ -1,4 +1,4 @@
-import type { StaticConfig } from '../types'
+import type { StaticConfig } from '../types.tsx'
 
 export function isGuiComponent<A>(
   comp: A,

package/src/helpers/isGuiElement.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import type { StaticConfig } from '../types'
-import { isGuiComponent } from './isGuiComponent'
+import type { StaticConfig } from '../types.tsx'
+import { isGuiComponent } from './isGuiComponent.tsx'
 
 export const isGuiElement = (
   child: any,

package/src/helpers/log.ts

@@ -1,4 +1,4 @@
-import { _disableMediaTouch } from '../hooks/useMedia'
+import { _disableMediaTouch } from '../hooks/useMedia.tsx'
 
 export function log(...args: any[]) {
   if (process.env.NODE_ENV === 'production') return

package/src/helpers/matchMedia.native.ts

@@ -1,4 +1,4 @@
-import type { MatchMedia, MediaQueryList } from '../types'
+import type { MatchMedia, MediaQueryList } from '../types.tsx'
 
 let matchMediaImpl: MatchMedia = matchMediaFallback
 

package/src/helpers/matchMedia.ts

@@ -1,4 +1,4 @@
-import type { MatchMedia, MediaQueryList } from '../types'
+import type { MatchMedia, MediaQueryList } from '../types.tsx'
 
 export const matchMedia =
   (typeof window !== 'undefined' && window.matchMedia) || matchMediaFallback

package/src/helpers/mediaObjectToString.ts

@@ -1,4 +1,4 @@
-import type { MediaQueryObject } from '../types'
+import type { MediaQueryObject } from '../types.tsx'
 
 function camelToHyphen(str: string) {
   return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()

package/src/helpers/mediaState.ts

@@ -1,4 +1,4 @@
-import type { MediaQueries, MediaQueryState } from '../types'
+import type { MediaQueries, MediaQueryState } from '../types.tsx'
 
 export let mediaState: MediaQueryState =
   // development only safeguard

package/src/helpers/mergeProps.ts

@@ -15,7 +15,7 @@
  *
  */
 
-import { pseudoDescriptors } from './pseudoDescriptors'
+import { pseudoDescriptors } from './pseudoDescriptors.ts'
 
 export type GenericProps = Record<string, any>
 

package/src/helpers/mergeRenderElementProps.ts

@@ -1,4 +1,4 @@
-import { mergeSlotStyleProps } from './mergeSlotStyleProps'
+import { mergeSlotStyleProps } from './mergeSlotStyleProps.ts'
 
 /**
  * Merges props from a render element with viewProps from Gui.

package/src/helpers/mergeVariants.ts

@@ -1,4 +1,4 @@
-import type { GenericVariantDefinitions } from '../types'
+import type { GenericVariantDefinitions } from '../types.tsx'
 
 // deep merge variants
 // except for functions which override any parents

package/src/helpers/normalizeShadow.native.ts

@@ -1,5 +1,5 @@
-import { defaultOffset } from './defaultOffset'
-import { getRgba, normalizeColor } from './normalizeColor'
+import { defaultOffset } from './defaultOffset.ts'
+import { getRgba, normalizeColor } from './normalizeColor.ts'
 
 export function normalizeShadow({
   shadowColor,

package/src/helpers/normalizeShadow.ts

@@ -1,4 +1,4 @@
-import { defaultOffset } from './defaultOffset'
+import { defaultOffset } from './defaultOffset.ts'
 
 export function normalizeShadow({
   shadowColor,

package/src/helpers/normalizeStyle.ts

@@ -1,9 +1,9 @@
-import { expandStyle } from './expandStyle'
-import { fixStyles } from './expandStyles'
-import { isObj } from './isObj'
-import { normalizeValueWithProperty } from './normalizeValueWithProperty'
-import { pseudoDescriptors } from './pseudoDescriptors'
-import { styleOriginalValues } from './styleOriginalValues'
+import { expandStyle } from './expandStyle.ts'
+import { fixStyles } from './expandStyles.ts'
+import { isObj } from './isObj.ts'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty.ts'
+import { pseudoDescriptors } from './pseudoDescriptors.ts'
+import { styleOriginalValues } from './styleOriginalValues.ts'
 
 /**
  * This is what you want to run before Object.assign() a style onto another.

package/src/helpers/parseBorderShorthand.native.ts

@@ -1,4 +1,4 @@
-import type { PropMappedValue } from '../types'
+import type { PropMappedValue } from '../types.tsx'
 
 // border style keywords
 const borderStyles = new Set([

package/src/helpers/parseBorderShorthand.ts

@@ -1,4 +1,4 @@
-import type { PropMappedValue } from '../types'
+import type { PropMappedValue } from '../types.tsx'
 
 // no-op on web - border shorthand is passed through as CSS
 export function parseBorderShorthand(_value: string): PropMappedValue | undefined {

package/src/helpers/parseOutlineShorthand.native.ts

@@ -1,4 +1,4 @@
-import type { PropMappedValue } from '../types'
+import type { PropMappedValue } from '../types.tsx'
 
 // outline style keywords
 const outlineStyles = new Set([

package/src/helpers/parseOutlineShorthand.ts

@@ -1,4 +1,4 @@
-import type { PropMappedValue } from '../types'
+import type { PropMappedValue } from '../types.tsx'
 
 // no-op on web - outline shorthand is passed through as CSS
 export function parseOutlineShorthand(_value: string): PropMappedValue | undefined {

package/src/helpers/platformResolveValue.native.ts

@@ -1,6 +1,6 @@
-import type { GetStyleState, SplitStyleProps } from '../types'
-import { getTokenForKey } from './getTokenForKey'
-import { parseNativeStyle } from './parseNativeStyle'
+import type { GetStyleState, SplitStyleProps } from '../types.tsx'
+import { getTokenForKey } from './getTokenForKey.ts'
+import { parseNativeStyle } from './parseNativeStyle.ts'
 
 // includes the optional `/NN` opacity-modifier suffix ($color9/50) so
 // getTokenForKey receives it and can apply the alpha — without it the token

package/src/helpers/platformResolveValue.ts

@@ -1,5 +1,5 @@
-import type { GetStyleState, SplitStyleProps } from '../types'
-import { getTokenForKey } from './getTokenForKey'
+import type { GetStyleState, SplitStyleProps } from '../types.tsx'
+import { getTokenForKey } from './getTokenForKey.ts'
 
 // includes the optional `/NN` opacity-modifier suffix ($color9/50) so
 // getTokenForKey receives it and can apply the alpha — without it the token

package/src/helpers/propMapper.ts

@@ -1,5 +1,5 @@
 import { isAndroid } from '@hanzogui/constants'
-import { getVariableValue, isVariable } from '../createVariable'
+import { getVariableValue, isVariable } from '../createVariable.ts'
 import type {
   GetStyleState,
   PropMapper,
@@ -8,25 +8,25 @@ import type {
   GuiInternalConfig,
   Variable,
   VariantSpreadFunction,
-} from '../types'
-import { expandStyle } from './expandStyle'
+} from '../types.tsx'
+import { expandStyle } from './expandStyle.ts'
 import {
   getLastFontFamilyToken,
   getTokenForKey,
   resolveVariableValue,
   setLastFontFamilyToken,
-} from './getTokenForKey'
-import { getFontsForLanguage, getVariantExtras } from './getVariantExtras'
-import { isObj } from './isObj'
-import { normalizeStyle } from './normalizeStyle'
-import { parseNativeStyle } from './parseNativeStyle'
-import { pseudoDescriptors } from './pseudoDescriptors'
-import { resolveCompoundTokens } from './resolveCompoundTokens'
-import { isRemValue, resolveRem } from './resolveRem'
-import { skipProps } from './skipProps'
-import { styleOriginalValues } from './styleOriginalValues'
-
-export { getTokenForKey } from './getTokenForKey'
+} from './getTokenForKey.ts'
+import { getFontsForLanguage, getVariantExtras } from './getVariantExtras.tsx'
+import { isObj } from './isObj.ts'
+import { normalizeStyle } from './normalizeStyle.ts'
+import { parseNativeStyle } from './parseNativeStyle.ts'
+import { pseudoDescriptors } from './pseudoDescriptors.ts'
+import { resolveCompoundTokens } from './resolveCompoundTokens.ts'
+import { isRemValue, resolveRem } from './resolveRem.ts'
+import { skipProps } from './skipProps.ts'
+import { styleOriginalValues } from './styleOriginalValues.ts'
+
+export { getTokenForKey } from './getTokenForKey.ts'
 
 export const propMapper: PropMapper = (key, value, styleState, disabled, map) => {
   if (disabled) {

package/src/helpers/proxyThemeToParents.ts

@@ -1,4 +1,4 @@
-import type { DedupedThemes, ThemeParsed } from '../types'
+import type { DedupedThemes, ThemeParsed } from '../types.tsx'
 
 const themesRaw: Record<string, ThemeParsed> = {}
 

package/src/helpers/pseudoTransitions.ts

@@ -1,4 +1,4 @@
-import type { TransitionProp, PseudoTransitions, GuiComponentState } from '../types'
+import type { TransitionProp, PseudoTransitions, GuiComponentState } from '../types.tsx'
 
 /**
  * Pseudo state for tracking enter/exit transitions

package/src/helpers/registerCSSVariable.ts

@@ -1,5 +1,5 @@
-import { createCSSVariable, getVariableValue } from '../createVariable'
-import type { Variable, VariableVal } from '../types'
+import { createCSSVariable, getVariableValue } from '../createVariable.ts'
+import type { Variable, VariableVal } from '../types.tsx'
 
 export const registerCSSVariable = (v: Variable | VariableVal) => {
   if (!process.env.GUI_DID_OUTPUT_CSS) {

package/src/helpers/resolveAnimationDriver.ts

@@ -1,4 +1,4 @@
-import type { AnimationDriver } from '../types'
+import type { AnimationDriver } from '../types.tsx'
 
 /**
  * Resolves a value that might be an AnimationDriver or a multi-driver config object

package/src/helpers/resolveCompoundTokens.ts

@@ -1,5 +1,5 @@
-import type { GetStyleState, SplitStyleProps } from '../types'
-import { platformResolveValue } from './platformResolveValue'
+import type { GetStyleState, SplitStyleProps } from '../types.tsx'
+import { platformResolveValue } from './platformResolveValue.ts'
 
 const compoundKeys: Record<string, boolean> = {
   boxShadow: true,

package/src/helpers/resolveRem.native.ts

@@ -1,5 +1,5 @@
 import { PixelRatio } from 'react-native'
-import { getConfig } from '../config'
+import { getConfig } from '../config.ts'
 
 const remRegex = /(-?[\d.]+)rem/g
 

package/src/helpers/setElementProps.tsx

@@ -1,4 +1,4 @@
-import { hooks } from '../setupHooks'
+import { hooks } from '../setupHooks.ts'
 
 export const setElementProps = (node) => {
   hooks.setElementProps?.(node)

package/src/helpers/skipProps.ts

@@ -1,5 +1,5 @@
-import { nativeOnlyProps } from './nativeOnlyProps'
-import { webPropsToSkip } from './webPropsToSkip'
+import { nativeOnlyProps } from './nativeOnlyProps.ts'
+import { webPropsToSkip } from './webPropsToSkip.ts'
 
 /**
  * These are props that dont pass down below Gui styled components

package/src/helpers/subscribeToContextGroup.tsx

@@ -1,6 +1,6 @@
 import { mergeIfNotShallowEqual } from '@hanzogui/is-equal-shallow'
-import { getMediaState } from '../hooks/useMedia'
-import type { ComponentSetStateShallow, DisposeFn, AllGroupContexts } from '../types'
+import { getMediaState } from '../hooks/useMedia.tsx'
+import type { ComponentSetStateShallow, DisposeFn, AllGroupContexts } from '../types.tsx'
 
 type SubscribeToContextGroupProps = {
   setStateShallow: ComponentSetStateShallow

package/src/helpers/themeable.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import type { StaticConfig, ThemeableProps, ThemeProps } from '../types'
-import { Theme } from '../views/Theme'
-import { getDefaultProps } from './getDefaultProps'
+import type { StaticConfig, ThemeableProps, ThemeProps } from '../types.tsx'
+import { Theme } from '../views/Theme.tsx'
+import { getDefaultProps } from './getDefaultProps.ts'
 
 export function themeable<ComponentType extends (props: any) => any>(
   Component: ComponentType,

package/src/helpers/themes.ts

@@ -1,4 +1,4 @@
-import { createVariable, isVariable } from '../createVariable'
+import { createVariable, isVariable } from '../createVariable.ts'
 
 // mutates, freeze after
 // shared by createGui so extracted here

package/src/helpers/transformsToString.ts

@@ -1,4 +1,4 @@
-import { normalizeValueWithProperty } from './normalizeValueWithProperty'
+import { normalizeValueWithProperty } from './normalizeValueWithProperty.ts'
 
 export function transformsToString(transforms: object[]) {
   return transforms

package/src/helpers/useRenderElement.tsx

@@ -1,8 +1,8 @@
 import type React from 'react'
 import { cloneElement, createElement, isValidElement } from 'react'
 import { composeRefs } from '@hanzogui/compose-refs'
-import type { GuiComponentState } from '../types'
-import { mergeSlotStyleProps } from './mergeSlotStyleProps'
+import type { GuiComponentState } from '../types.tsx'
+import { mergeSlotStyleProps } from './mergeSlotStyleProps.ts'
 
 export type RenderProp<Props = Record<string, any>> =
   | string

package/src/helpers/wrapStyleTags.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 import { StyleObjectIdentifier, StyleObjectRules } from '@hanzogui/helpers'
-import type { StyleObject } from '../types'
+import type { StyleObject } from '../types.tsx'
 
 // turns out this is pretty slow, creating a bunch of extra tags...
 

package/src/hooks/doesRootSchemeMatchSystem.native.ts

@@ -1,5 +1,5 @@
 import { Appearance } from 'react-native'
-import { getRootThemeState } from './useThemeState'
+import { getRootThemeState } from './useThemeState.ts'
 
 export function doesRootSchemeMatchSystem() {
   // only used on native for now

package/src/hooks/getThemeProxied.ts

@@ -1,8 +1,8 @@
 import { supportsDynamicColorIOS } from '@hanzogui/constants'
 import type { MutableRefObject } from 'react'
-import { getConfig, getSetting } from '../config'
-import { getVariable } from '../createVariable'
-import { getDynamicVal } from '../helpers/getDynamicVal'
+import { getConfig, getSetting } from '../config.ts'
+import { getVariable } from '../createVariable.ts'
+import { getDynamicVal } from '../helpers/getDynamicVal.ts'
 import type {
   ThemeParsed,
   ThemeState,
@@ -11,8 +11,8 @@ import type {
   Variable,
   VariableVal,
   VariableValGeneric,
-} from '../types'
-import { doesRootSchemeMatchSystem } from './doesRootSchemeMatchSystem'
+} from '../types.tsx'
+import { doesRootSchemeMatchSystem } from './doesRootSchemeMatchSystem.ts'
 
 export type ThemeProxied = {
   [Key in keyof ThemeParsed | keyof Tokens['color']]: ThemeGettable<

package/src/hooks/useComponentState.ts

@@ -2,14 +2,14 @@ import { getPlatformDriver, isServer, isWeb } from '@hanzogui/constants'
 import { mergeIfNotShallowEqual } from '@hanzogui/is-equal-shallow'
 import { useDidFinishSSR, useIsClientOnly } from '@hanzogui/use-did-finish-ssr'
 import { useRef, useState } from 'react'
-import { getSetting } from '../config'
+import { getSetting } from '../config.ts'
 import {
   defaultComponentState,
   defaultComponentStateMounted,
   defaultComponentStateShouldEnter,
-} from '../defaultComponentState'
-import { isObj } from '../helpers/isObj'
-import { log } from '../helpers/log'
+} from '../defaultComponentState.tsx'
+import { isObj } from '../helpers/isObj.ts'
+import { log } from '../helpers/log.ts'
 import type {
   ComponentContextI,
   StaticConfig,
@@ -18,8 +18,8 @@ import type {
   GuiInternalConfig,
   TextProps,
   UseAnimationHook,
-} from '../types'
-import type { ViewProps } from '../views/View'
+} from '../types.tsx'
+import type { ViewProps } from '../views/View.tsx'
 
 export const useComponentState = (
   props: ViewProps | TextProps | Record<string, any>,

package/src/hooks/useDisableSSR.tsx

@@ -1,5 +1,5 @@
-import { getSetting } from '../config'
-import type { ComponentContextI } from '../types'
+import { getSetting } from '../config.ts'
+import type { ComponentContextI } from '../types.tsx'
 
 export function getDisableSSR(componentContext?: ComponentContextI) {
   return componentContext?.disableSSR ?? getSetting('disableSSR')

package/src/hooks/useMedia.tsx

@@ -1,15 +1,15 @@
 import { isServer, isWeb } from '@hanzogui/constants'
 import { useEffect, useReducer, useRef } from 'react'
-import { getSetting } from '../config'
-import { resetMediaStyleCache } from '../helpers/createMediaStyle'
-import { matchMedia } from '../helpers/matchMedia'
-import { mediaObjectToString } from '../helpers/mediaObjectToString'
+import { getSetting } from '../config.ts'
+import { resetMediaStyleCache } from '../helpers/createMediaStyle.ts'
+import { matchMedia } from '../helpers/matchMedia.ts'
+import { mediaObjectToString } from '../helpers/mediaObjectToString.ts'
 import {
   getMedia,
   mediaKeys,
   mediaQueryConfig,
   setMediaState,
-} from '../helpers/mediaState'
+} from '../helpers/mediaState.ts'
 import type {
   ComponentContextI,
   DebugProp,
@@ -19,8 +19,8 @@ import type {
   GuiInternalConfig,
   UseMediaState,
   WidthHeight,
-} from '../types'
-import { defaultMediaImportance } from '../helpers/pseudoDescriptors'
+} from '../types.tsx'
+import { defaultMediaImportance } from '../helpers/pseudoDescriptors.ts'
 
 const mediaKeyRegex = /\$(platform|theme|group)-/
 

package/src/hooks/useProps.tsx

@@ -1,17 +1,22 @@
 import { useIsomorphicLayoutEffect } from '@hanzogui/constants'
 import React from 'react'
-import { getConfig } from '../config'
-import { ComponentContext } from '../contexts/ComponentContext'
-import { GroupContext } from '../contexts/GroupContext'
-import { useSplitStyles } from '../helpers/getSplitStyles'
-import { subscribeToContextGroup } from '../helpers/subscribeToContextGroup'
-import type { SplitStyleProps, StaticConfig, ThemeParsed, UseMediaState } from '../types'
-import type { ViewProps, ViewStyle } from '../views/View'
-import { View } from '../views/View'
-import { useComponentState } from './useComponentState'
-import { mediaState } from '../helpers/mediaState'
-import { useMedia } from './useMedia'
-import { useThemeWithState } from './useTheme'
+import { getConfig } from '../config.ts'
+import { ComponentContext } from '../contexts/ComponentContext.tsx'
+import { GroupContext } from '../contexts/GroupContext.tsx'
+import { useSplitStyles } from '../helpers/getSplitStyles.tsx'
+import { subscribeToContextGroup } from '../helpers/subscribeToContextGroup.tsx'
+import type {
+  SplitStyleProps,
+  StaticConfig,
+  ThemeParsed,
+  UseMediaState,
+} from '../types.tsx'
+import type { ViewProps, ViewStyle } from '../views/View.tsx'
+import { View } from '../views/View.tsx'
+import { useComponentState } from './useComponentState.ts'
+import { mediaState } from '../helpers/mediaState.ts'
+import { useMedia } from './useMedia.tsx'
+import { useThemeWithState } from './useTheme.tsx'
 
 type UsePropsOptions = Pick<
   SplitStyleProps,

package/src/hooks/useTheme.tsx

@@ -1,7 +1,7 @@
 import { useRef, type MutableRefObject } from 'react'
-import type { ThemeParsed, ThemeState, UseThemeWithStateProps } from '../types'
-import { getThemeProxied, type ThemeProxied } from './getThemeProxied'
-import { useThemeState } from './useThemeState'
+import type { ThemeParsed, ThemeState, UseThemeWithStateProps } from '../types.tsx'
+import { getThemeProxied, type ThemeProxied } from './getThemeProxied.ts'
+import { useThemeState } from './useThemeState.ts'
 
 const EMPTY = {}
 

package/src/hooks/useThemeName.tsx

@@ -1,5 +1,5 @@
-import type { ThemeName } from '../types'
-import { useThemeState } from './useThemeState'
+import type { ThemeName } from '../types.tsx'
+import { useThemeState } from './useThemeState.ts'
 
 // can probably simplify this way down
 const forceUpdateState = { forceClassName: true, deopt: true, needsUpdate: () => true }

package/src/hooks/useThemeState.ts

@@ -8,14 +8,14 @@ import {
   useRef,
   type MutableRefObject,
 } from 'react'
-import { getConfig, getSetting } from '../config'
-import { MISSING_THEME_MESSAGE } from '../constants/constants'
+import { getConfig, getSetting } from '../config.ts'
+import { MISSING_THEME_MESSAGE } from '../constants/constants.ts'
 import type {
   ThemeParsed,
   ThemeProps,
   ThemeState,
   UseThemeWithStateProps,
-} from '../types'
+} from '../types.tsx'
 
 type ID = string