@hanzogui/config 2.0.0

package/src/v3-animations.ts

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

package/src/v3.ts

@@ -0,0 +1,119 @@
+import { tokens, themes as themesIn } from '@hanzogui/themes/v3-themes'
+import { animations } from './v3-animations'
+import type { CreateGuiProps } from '@hanzogui/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 @hanzogui/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 '@hanzogui/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.HANZO_GUI_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 CreateGuiProps

package/src/v4-animations.native.ts

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

package/src/v4-animations.ts

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

package/src/v4-fonts.ts

@@ -0,0 +1,61 @@
+import type { FillInFont, GenericFont } from '@hanzogui/core'
+import { createFont, getVariableValue, isWeb } from '@hanzogui/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

@@ -0,0 +1,40 @@
+// 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

@@ -0,0 +1,47 @@
+import { shorthands } from '@hanzogui/shorthands/v4'
+import { tokens, defaultThemes } from '@hanzogui/themes/v4'
+import type { CreateGuiProps } from '@hanzogui/web'
+import { animations } from './v3-animations'
+import { fonts } from './v4-fonts'
+import { media, mediaQueryDefaultActive } from './v4-media'
+
+export { shorthands } from '@hanzogui/shorthands/v4'
+export { createThemes } from '@hanzogui/theme-builder'
+export { guiThemes, tokens } from '@hanzogui/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 '@hanzogui/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 CreateGuiProps['settings']
+
+export const defaultConfig = {
+  animations,
+  media,
+  shorthands,
+  themes: defaultThemes,
+  tokens,
+  fonts,
+  selectionStyles,
+  settings,
+} satisfies CreateGuiProps

package/src/v5-base.ts

@@ -0,0 +1,80 @@
+import { shorthands } from '@hanzogui/shorthands/v4' // v4 same as v5
+import type { Shorthands } from '@hanzogui/shorthands/v4'
+import { themes, tokens } from '@hanzogui/themes/v5'
+import type { V5Themes, V5Tokens } from '@hanzogui/themes/v5'
+import type { CreateGuiProps } from '@hanzogui/web'
+import { fonts } from './v5-fonts'
+import type { V5Fonts } from './v5-fonts'
+import { media, mediaQueryDefaultActive } from './v5-media'
+import type { V5Media } from './v5-media'
+
+export { shorthands } from '@hanzogui/shorthands/v4'
+export { createThemes } from '@hanzogui/theme-builder'
+export {
+  adjustPalette,
+  adjustPalettes,
+  createV5Theme,
+  defaultChildrenThemes,
+  defaultDarkPalette,
+  defaultLightPalette,
+  hslToString,
+  // helpers
+  interpolateColor,
+  opacify,
+  parseHSL,
+  tokens,
+  type AdjustFn,
+  // types
+  type HSL,
+  type PaletteAdjustments,
+  type V5Theme,
+  type V5ThemeNames,
+  type V5Themes,
+  type V5Tokens,
+} from '@hanzogui/themes/v5'
+export { createSystemFont, fonts } from './v5-fonts'
+export type { V5Fonts } from './v5-fonts'
+export { breakpoints, media, mediaQueryDefaultActive } from './v5-media'
+export type { V5Media } from './v5-media'
+
+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: 'react-native',
+} satisfies CreateGuiProps['settings']
+
+export type V5Settings = typeof settings
+
+export type V5DefaultConfig = {
+  media: V5Media
+  shorthands: Shorthands
+  themes: V5Themes
+  tokens: V5Tokens
+  fonts: V5Fonts
+  selectionStyles: typeof selectionStyles
+  settings: V5Settings
+}
+
+// base config without animations - users must provide their own
+export const defaultConfig: V5DefaultConfig = {
+  media,
+  shorthands,
+  themes,
+  tokens,
+  fonts,
+  selectionStyles,
+  settings,
+}

package/src/v5-css.native.ts

@@ -0,0 +1,2 @@
+// css animations don't work on native, fall back to react-native
+export { animationsReactNative as animations } from './animationsReactNative'

package/src/v5-css.ts

@@ -0,0 +1,31 @@
+import { createAnimations } from '@hanzogui/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-fonts.ts

@@ -0,0 +1,112 @@
+import type { FillInFont, GenericFont } from '@hanzogui/core'
+import { createFont, getVariableValue } from '@hanzogui/core'
+
+const isWeb = process.env.HANZO_GUI_TARGET === 'web'
+const isNative = process.env.HANZO_GUI_TARGET === 'native'
+
+// web sizes
+const webSizes = {
+  1: 12,
+  2: 13,
+  3: 14,
+  4: 15,
+  true: 15,
+  5: 16,
+  6: 18,
+  7: 22,
+  8: 26,
+  9: 30,
+  10: 40,
+  11: 46,
+  12: 52,
+  13: 60,
+  14: 70,
+  15: 85,
+  16: 100,
+} as const
+
+// native sizes aligned with iOS HIG (SF Pro)
+// 4/true = body (17pt), 3 = subheadline (15pt), 2 = caption (12pt)
+const nativeSizes = {
+  1: 11,
+  2: 12,
+  3: 15,
+  4: 17,
+  true: 17,
+  5: 20,
+  6: 22,
+  7: 24,
+  8: 28,
+  9: 32,
+  10: 40,
+  11: 46,
+  12: 52,
+  13: 60,
+  14: 70,
+  15: 85,
+  16: 100,
+} as const
+
+const defaultSizes = isNative ? nativeSizes : webSizes
+
+// line height: native per iOS HIG (size + 5), web 150% tapering to ~142% for large sizes
+const defaultLineHeight = (size: number) => {
+  if (isNative) return Math.round(size + 5)
+  // taper from 1.5 at small sizes to ~1.42 at 40px
+  const ratio = 1.5 - Math.max(0, (size - 20) * 0.004)
+  return Math.round(size * ratio)
+}
+
+export const createSystemFont = <A extends GenericFont>({
+  font = {},
+  sizeLineHeight = defaultLineHeight,
+  sizeSize = (size) => Math.round(size),
+}: {
+  font?: Partial<A>
+  sizeLineHeight?: (fontSize: number) => number
+  sizeSize?: (size: number) => number
+} = {}): FillInFont<A, keyof typeof webSizes> => {
+  // merge to allow individual overrides
+  const size = Object.fromEntries(
+    Object.entries({
+      ...defaultSizes,
+      ...font.size,
+    }).map(([k, v]) => [k, sizeSize(+v)])
+  )
+  return createFont({
+    family: isWeb
+      ? '"Geist Sans", "Geist", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+      : 'Geist',
+    lineHeight: Object.fromEntries(
+      Object.entries(size).map(([k, v]) => [k, sizeLineHeight(getVariableValue(v))])
+    ),
+    weight: {
+      1: '400',
+    },
+    letterSpacing: {
+      4: 0,
+    },
+    ...(font as any),
+    size,
+  })
+}
+
+// heading line height: native ~120%, web original
+const headingLineHeight = (size: number) =>
+  Math.round(isNative ? size * 1.2 : size * 1.12 + 5)
+
+export const fonts = {
+  body: createSystemFont(),
+  heading: createSystemFont({
+    font: {
+      weight: {
+        0: '600',
+        6: '700',
+        9: '800',
+      },
+    },
+    sizeLineHeight: headingLineHeight,
+  }),
+}
+
+export type V5Fonts = typeof fonts

package/src/v5-media.ts

@@ -0,0 +1,107 @@
+// 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.HANZO_GUI_TARGET === 'native' ? 1 : 0.02
+
+export const media = {
+  // always true on native
+  touchable:
+    process.env.HANZO_GUI_TARGET === 'native'
+      ? ({ minWidth: 0 } as never)
+      : { pointer: 'coarse' },
+
+  // always false on native (can't hover on touch)
+  hoverable:
+    process.env.HANZO_GUI_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.HANZO_GUI_TARGET === 'native',
+  hoverable: process.env.HANZO_GUI_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,
+}