@tamagui/config 2.7.7 → 3.0.0-beta.1093.1

package/src/v3.ts

@@ -1,119 +0,0 @@
-import { tokens, themes as themesIn } from '@tamagui/themes/v3-themes'
-import { animations } from './v3-animations'
-import type { CreateTamaguiProps } from '@tamagui/web'
-
-import { fonts } from './fonts'
-import { media, mediaQueryDefaultActive } from './media'
-
-// fix vite - react native uses global which it doesn't provide
-globalThis['global'] ||= globalThis
-
-// v3 shorthands (inlined from deprecated @tamagui/shorthands/v2)
-export const shorthands = {
-  ussel: 'userSelect',
-  cur: 'cursor',
-  pe: 'pointerEvents',
-  col: 'color',
-  ff: 'fontFamily',
-  fos: 'fontSize',
-  fost: 'fontStyle',
-  fow: 'fontWeight',
-  ls: 'letterSpacing',
-  lh: 'lineHeight',
-  ta: 'textAlign',
-  tt: 'textTransform',
-  ww: 'wordWrap',
-  ac: 'alignContent',
-  ai: 'alignItems',
-  als: 'alignSelf',
-  b: 'bottom',
-  bg: 'backgroundColor',
-  bbc: 'borderBottomColor',
-  bblr: 'borderBottomLeftRadius',
-  bbrr: 'borderBottomRightRadius',
-  bbw: 'borderBottomWidth',
-  blc: 'borderLeftColor',
-  blw: 'borderLeftWidth',
-  bc: 'borderColor',
-  br: 'borderRadius',
-  bs: 'borderStyle',
-  brw: 'borderRightWidth',
-  brc: 'borderRightColor',
-  btc: 'borderTopColor',
-  btlr: 'borderTopLeftRadius',
-  btrr: 'borderTopRightRadius',
-  btw: 'borderTopWidth',
-  bw: 'borderWidth',
-  dsp: 'display',
-  f: 'flex',
-  fb: 'flexBasis',
-  fd: 'flexDirection',
-  fg: 'flexGrow',
-  fs: 'flexShrink',
-  fw: 'flexWrap',
-  h: 'height',
-  jc: 'justifyContent',
-  l: 'left',
-  m: 'margin',
-  mah: 'maxHeight',
-  maw: 'maxWidth',
-  mb: 'marginBottom',
-  mih: 'minHeight',
-  miw: 'minWidth',
-  ml: 'marginLeft',
-  mr: 'marginRight',
-  mt: 'marginTop',
-  mx: 'marginHorizontal',
-  my: 'marginVertical',
-  o: 'opacity',
-  ov: 'overflow',
-  p: 'padding',
-  pb: 'paddingBottom',
-  pl: 'paddingLeft',
-  pos: 'position',
-  pr: 'paddingRight',
-  pt: 'paddingTop',
-  px: 'paddingHorizontal',
-  py: 'paddingVertical',
-  r: 'right',
-  shac: 'shadowColor',
-  shar: 'shadowRadius',
-  shof: 'shadowOffset',
-  shop: 'shadowOpacity',
-  t: 'top',
-  w: 'width',
-  zi: 'zIndex',
-} as const
-
-export { animations } from './v3-animations'
-export { tokens, themes } from '@tamagui/themes/v3-themes'
-export { fonts } from './fonts'
-export { media, mediaQueryDefaultActive } from './media'
-
-export const selectionStyles = (theme) =>
-  theme.color5
-    ? {
-        backgroundColor: theme.color5,
-        color: theme.color11,
-      }
-    : null
-
-// tree shake away themes in production
-const themes =
-  process.env.TAMAGUI_OPTIMIZE_THEMES === 'true' ? ({} as typeof themesIn) : themesIn
-
-export const config = {
-  animations,
-  themes,
-  media,
-  shorthands,
-  tokens,
-  fonts,
-  selectionStyles,
-  settings: {
-    mediaQueryDefaultActive,
-    defaultFont: 'body',
-    fastSchemeChange: true,
-    shouldAddPrefersColorThemes: true,
-  },
-} satisfies CreateTamaguiProps

package/src/v4-animations.native.ts

@@ -1 +0,0 @@
-export { animationsReactNative as animations } from './animationsReactNative'

package/src/v4-animations.ts

@@ -1 +0,0 @@
-export { animationsCSS as animations } from './animationsCSS'

package/src/v4-fonts.ts

@@ -1,61 +0,0 @@
-import type { FillInFont, GenericFont } from '@tamagui/core'
-import { createFont, getVariableValue, isWeb } from '@tamagui/core'
-
-export const createSystemFont = <A extends GenericFont>({
-  font = {},
-  sizeLineHeight = (size) => size + 10,
-  sizeSize = (size) => size * 1,
-}: {
-  font?: Partial<A>
-  sizeLineHeight?: (fontSize: number) => number
-  sizeSize?: (size: number) => number
-} = {}): FillInFont<A, keyof typeof defaultSizes> => {
-  // merge to allow individual overrides
-  const size = Object.fromEntries(
-    Object.entries({
-      ...defaultSizes,
-      ...font.size,
-    }).map(([k, v]) => [k, sizeSize(+v)])
-  )
-  return createFont({
-    family: isWeb
-      ? '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
-      : 'System',
-    lineHeight: Object.fromEntries(
-      Object.entries(size).map(([k, v]) => [k, sizeLineHeight(getVariableValue(v))])
-    ),
-    weight: {
-      4: '300',
-    },
-    letterSpacing: {
-      4: 0,
-    },
-    ...(font as any),
-    size,
-  })
-}
-
-const defaultSizes = {
-  1: 11,
-  2: 12,
-  3: 13,
-  4: 14,
-  true: 14,
-  5: 16,
-  6: 18,
-  7: 20,
-  8: 23,
-  9: 30,
-  10: 46,
-  11: 55,
-  12: 62,
-  13: 72,
-  14: 92,
-  15: 114,
-  16: 134,
-} as const
-
-export const fonts = {
-  body: createSystemFont(),
-  heading: createSystemFont({ sizeSize: (n) => n * 1.4 }),
-}

package/src/v4-media.ts

@@ -1,40 +0,0 @@
-// note order is important!
-// earlier defined = less important
-
-export const breakpoints = {
-  '2xl': 1536,
-  xl: 1280,
-  lg: 1024,
-  md: 768,
-  sm: 640,
-  xs: 460,
-  '2xs': 340,
-}
-
-export const media = {
-  maxXs: { maxWidth: breakpoints.xs },
-  max2xs: { maxWidth: breakpoints['2xs'] },
-  maxSm: { maxWidth: breakpoints.sm },
-  maxMd: { maxWidth: breakpoints.md },
-  maxLg: { maxWidth: breakpoints.lg },
-  maxXl: { maxWidth: breakpoints.xl },
-  max2Xl: { maxWidth: breakpoints['2xl'] },
-  // for site
-  '2xl': { minWidth: breakpoints['2xl'] },
-  xl: { minWidth: breakpoints.xl },
-  lg: { minWidth: breakpoints.lg },
-  md: { minWidth: breakpoints.md },
-  sm: { minWidth: breakpoints.sm },
-  xs: { minWidth: breakpoints.xs },
-  '2xs': { minWidth: breakpoints['2xs'] },
-} as const
-
-export const mediaQueryDefaultActive = {
-  '2xl': false,
-  xl: false,
-  lg: false,
-  md: false,
-  sm: false,
-  xs: true,
-  '2xs': true,
-}

package/src/v4.ts

@@ -1,47 +0,0 @@
-import { shorthands } from '@tamagui/shorthands/v4'
-import { tokens, defaultThemes } from '@tamagui/themes/v4'
-import type { CreateTamaguiProps } from '@tamagui/web'
-import { animations } from './v3-animations'
-import { fonts } from './v4-fonts'
-import { media, mediaQueryDefaultActive } from './v4-media'
-
-export { shorthands } from '@tamagui/shorthands/v4'
-export { createThemes } from '@tamagui/theme-builder'
-export { tamaguiThemes, tokens } from '@tamagui/themes/v4'
-export { animations } from './v4-animations'
-export { createSystemFont, fonts } from './v4-fonts'
-export { breakpoints, media, mediaQueryDefaultActive } from './v4-media'
-export { defaultThemes as themes } from '@tamagui/themes/v4'
-
-// Configuration:
-
-export const selectionStyles = (theme) =>
-  theme.color5
-    ? {
-        backgroundColor: theme.color5,
-        color: theme.color11,
-      }
-    : null
-
-export const settings = {
-  mediaQueryDefaultActive,
-  defaultFont: 'body',
-  fastSchemeChange: true,
-  shouldAddPrefersColorThemes: true,
-  allowedStyleValues: 'somewhat-strict-web',
-  addThemeClassName: 'html',
-  onlyAllowShorthands: true,
-  styleCompat: 'legacy',
-  defaultPosition: 'relative',
-} satisfies CreateTamaguiProps['settings']
-
-export const defaultConfig = {
-  animations,
-  media,
-  shorthands,
-  themes: defaultThemes,
-  tokens,
-  fonts,
-  selectionStyles,
-  settings,
-} satisfies CreateTamaguiProps

package/src/v5-css.ts

@@ -1,31 +0,0 @@
-import { createAnimations } from '@tamagui/animations-css'
-
-const easeOut = 'cubic-bezier(0.25, 0.1, 0.25, 1)'
-const bouncy = 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
-
-export const animationsCSS = createAnimations({
-  '0ms': '0ms linear',
-  '50ms': '50ms linear',
-  '75ms': '75ms linear',
-  '100ms': '100ms ease-out',
-  '200ms': '200ms ease-out',
-  '250ms': '250ms ease-out',
-  '300ms': '300ms ease-out',
-  '400ms': '400ms ease-out',
-  '500ms': '500ms ease-out',
-  superBouncy: `300ms cubic-bezier(0.175, 0.885, 0.32, 1.5)`,
-  bouncy: `350ms ${bouncy}`,
-  superLazy: `600ms ${easeOut}`,
-  lazy: `500ms ${easeOut}`,
-  medium: `300ms ${easeOut}`,
-  slowest: `800ms ${easeOut}`,
-  slow: `450ms ${easeOut}`,
-  quick: `150ms ${easeOut}`,
-  quickLessBouncy: `180ms ${easeOut}`,
-  quicker: `120ms ${easeOut}`,
-  quickerLessBouncy: `100ms ${easeOut}`,
-  quickest: `80ms ${easeOut}`,
-  quickestLessBouncy: `60ms ${easeOut}`,
-})
-
-export const animations = animationsCSS

package/src/v5-media.ts

@@ -1,107 +0,0 @@
-// note order is important!
-// earlier defined = less important
-
-export const breakpoints = {
-  // for container queries its really helpful to have small sizes
-  100: 100,
-  200: 200,
-
-  xxxs: 260,
-  xxs: 340,
-  xs: 460,
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-  xxl: 1536,
-}
-
-const mediaQueryForceNonOverlap = process.env.TAMAGUI_TARGET === 'native' ? 1 : 0.02
-
-export const media = {
-  // always true on native
-  touchable:
-    process.env.TAMAGUI_TARGET === 'native'
-      ? ({ minWidth: 0 } as never)
-      : { pointer: 'coarse' },
-
-  // always false on native (can't hover on touch)
-  hoverable:
-    process.env.TAMAGUI_TARGET === 'native'
-      ? ({ maxWidth: 0 } as never)
-      : { hover: 'hover' },
-
-  // Max-width queries (desktop-first, ordered large-to-small so smaller wins)
-  'max-xxl': { maxWidth: breakpoints.xxl - mediaQueryForceNonOverlap },
-  'max-xl': { maxWidth: breakpoints.xl - mediaQueryForceNonOverlap },
-  'max-lg': { maxWidth: breakpoints.lg - mediaQueryForceNonOverlap },
-  'max-md': { maxWidth: breakpoints.md - mediaQueryForceNonOverlap },
-  'max-sm': { maxWidth: breakpoints.sm - mediaQueryForceNonOverlap },
-  'max-xs': { maxWidth: breakpoints.xs - mediaQueryForceNonOverlap },
-  'max-xxs': { maxWidth: breakpoints.xxs - mediaQueryForceNonOverlap },
-  'max-xxxs': { maxWidth: breakpoints.xxxs - mediaQueryForceNonOverlap },
-
-  // for container queries its really helpful to have small sizes
-  'max-200': { maxWidth: breakpoints['200'] - mediaQueryForceNonOverlap },
-  'max-100': { maxWidth: breakpoints['100'] - mediaQueryForceNonOverlap },
-
-  // Min-width queries (mobile-first)
-  // non-max wins over max though tbh it could go either way
-  xxxs: { minWidth: breakpoints.xxxs },
-  xxs: { minWidth: breakpoints.xxs },
-  xs: { minWidth: breakpoints.xs },
-  sm: { minWidth: breakpoints.sm },
-  md: { minWidth: breakpoints.md },
-  lg: { minWidth: breakpoints.lg },
-  xl: { minWidth: breakpoints.xl },
-  xxl: { minWidth: breakpoints.xxl },
-
-  // Height-based queries LAST so they override width queries when both match
-  // (later in object = higher CSS specificity)
-  // max-height ordered large-to-small so smaller wins (like max-width)
-  'max-height-lg': { maxHeight: breakpoints.lg - mediaQueryForceNonOverlap },
-  'max-height-md': { maxHeight: breakpoints.md - mediaQueryForceNonOverlap },
-  'max-height-sm': { maxHeight: breakpoints.sm - mediaQueryForceNonOverlap },
-  'max-height-xs': { maxHeight: breakpoints.xs - mediaQueryForceNonOverlap },
-  'max-height-xxs': { maxHeight: breakpoints.xxs - mediaQueryForceNonOverlap },
-  'max-height-xxxs': { maxHeight: breakpoints.xxxs - mediaQueryForceNonOverlap },
-
-  'max-height-200': { maxHeight: breakpoints['200'] - mediaQueryForceNonOverlap },
-  'max-height-100': { maxHeight: breakpoints['100'] - mediaQueryForceNonOverlap },
-
-  'height-sm': { minHeight: breakpoints.sm },
-  'height-md': { minHeight: breakpoints.md },
-  'height-lg': { minHeight: breakpoints.lg },
-} as const
-
-export type V5Media = typeof media
-
-export const mediaQueryDefaultActive = {
-  touchable: process.env.TAMAGUI_TARGET === 'native',
-  hoverable: process.env.TAMAGUI_TARGET !== 'native',
-  // Max queries
-  'max-xxl': true,
-  'max-xl': true,
-  'max-lg': true,
-  'max-md': true,
-  'max-sm': true,
-  'max-xs': true,
-  'max-xxs': false,
-  'max-xxxs': false,
-  // Min queries
-  xxxs: true,
-  xxs: true,
-  xs: true,
-  sm: false,
-  md: false,
-  lg: false,
-  xl: false,
-  xxl: false,
-  // Height queries (default: iPhone non-max ~844pt)
-  'max-height-sm': false,
-  'max-height-md': false,
-  'max-height-lg': true,
-  'height-sm': true,
-  'height-md': true,
-  'height-lg': false,
-}

package/src/v5-motion.ts

@@ -1,109 +0,0 @@
-import { createAnimations } from '@tamagui/animations-motion'
-
-export const animationsMotion = createAnimations({
-  '0ms': {
-    duration: 0,
-  },
-  '50ms': {
-    duration: 50,
-  },
-  '75ms': {
-    duration: 75,
-  },
-  '100ms': {
-    duration: 100,
-  },
-  '200ms': {
-    duration: 200,
-  },
-  '250ms': {
-    duration: 250,
-  },
-  '300ms': {
-    duration: 300,
-  },
-  '400ms': {
-    duration: 400,
-  },
-  '500ms': {
-    duration: 500,
-  },
-  superLazy: {
-    type: 'spring',
-    damping: 15,
-    mass: 2,
-    stiffness: 20,
-  },
-  lazy: {
-    type: 'spring',
-    damping: 11,
-    mass: 0.25,
-    stiffness: 12,
-  },
-  slowest: {
-    type: 'spring',
-    damping: 9,
-    stiffness: 7.5,
-  },
-  slow: {
-    type: 'spring',
-    damping: 27,
-    stiffness: 45,
-  },
-  medium: {
-    damping: 12,
-    stiffness: 100,
-    mass: 0.85,
-  },
-  superBouncy: {
-    type: 'spring',
-    damping: 3,
-    mass: 0.7,
-    stiffness: 135,
-  },
-  bouncy: {
-    type: 'spring',
-    damping: 5.4,
-    mass: 0.9,
-    stiffness: 90,
-  },
-  quick: {
-    type: 'spring',
-    damping: 17,
-    mass: 0.5,
-    stiffness: 410,
-  },
-  quickLessBouncy: {
-    type: 'spring',
-    damping: 40,
-    mass: 1,
-    stiffness: 400,
-    velocity: 5,
-  },
-  quicker: {
-    type: 'spring',
-    damping: 20,
-    mass: 0.35,
-    stiffness: 450,
-  },
-  quickerLessBouncy: {
-    type: 'spring',
-    damping: 26,
-    mass: 0.5,
-    stiffness: 500,
-  },
-  quickest: {
-    type: 'spring',
-    damping: 22,
-    mass: 0.3,
-    stiffness: 550,
-  },
-  quickestLessBouncy: {
-    type: 'spring',
-    damping: 28,
-    mass: 0.4,
-    stiffness: 600,
-  },
-})
-
-export const animations = animationsMotion

package/src/v5-reanimated.ts

@@ -1,105 +0,0 @@
-import { createAnimations } from '@tamagui/animations-reanimated'
-
-export const animationsReanimated = createAnimations({
-  '0ms': {
-    type: 'timing',
-    duration: 0,
-  },
-  '50ms': {
-    type: 'timing',
-    duration: 50,
-  },
-  '75ms': {
-    type: 'timing',
-    duration: 75,
-  },
-  '100ms': {
-    type: 'timing',
-    duration: 100,
-  },
-  '200ms': {
-    type: 'timing',
-    duration: 200,
-  },
-  '250ms': {
-    type: 'timing',
-    duration: 250,
-  },
-  '300ms': {
-    type: 'timing',
-    duration: 300,
-  },
-  '400ms': {
-    type: 'timing',
-    duration: 400,
-  },
-  '500ms': {
-    type: 'timing',
-    duration: 500,
-  },
-  superBouncy: {
-    damping: 5,
-    mass: 0.7,
-    stiffness: 180,
-  },
-  bouncy: {
-    damping: 9,
-    mass: 0.9,
-    stiffness: 120,
-  },
-  superLazy: {
-    damping: 25,
-    mass: 2,
-    stiffness: 25,
-  },
-  medium: {
-    damping: 16,
-    stiffness: 90,
-    mass: 0.8,
-  },
-  lazy: {
-    damping: 18,
-    mass: 0.2,
-    stiffness: 10,
-  },
-  slowest: {
-    damping: 15,
-    stiffness: 10,
-  },
-  slow: {
-    damping: 45,
-    stiffness: 60,
-  },
-  quick: {
-    damping: 25,
-    mass: 1,
-    stiffness: 550,
-  },
-  quickLessBouncy: {
-    damping: 40,
-    mass: 2,
-    stiffness: 400,
-  },
-  quicker: {
-    damping: 16,
-    mass: 0.6,
-    stiffness: 700,
-  },
-  quickerLessBouncy: {
-    damping: 27,
-    mass: 0.45,
-    stiffness: 750,
-  },
-  quickest: {
-    damping: 15,
-    mass: 0.6,
-    stiffness: 400,
-  },
-  quickestLessBouncy: {
-    damping: 24,
-    mass: 0.35,
-    stiffness: 750,
-  },
-})
-
-export const animations = animationsReanimated