@hanzogui/kitchen-sink 3.0.5

package/tests/AnimationTiming.animated.test.tsx

@@ -0,0 +1,195 @@
+import { expect, test, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * ANIMATION TIMING BUG FIX TESTS
+ *
+ * Tests for two bugs:
+ * 1. Enter/exit timing not respected - enter: '50ms' should actually be 50ms
+ * 2. Duration normalization - duration: 1 should be 1ms, not 1 second
+ *
+ * These tests run across all animation drivers (css, native, reanimated, motion).
+ */
+
+async function getOpacity(page: Page, testId: string): Promise<number> {
+  return page.evaluate((id) => {
+    const el = document.querySelector(`[data-testid="${id}"]`)
+    if (!el) return -1
+    return Number.parseFloat(getComputedStyle(el).opacity)
+  }, testId)
+}
+
+async function elementExists(page: Page, testId: string): Promise<boolean> {
+  return page.evaluate((id) => !!document.querySelector(`[data-testid="${id}"]`), testId)
+}
+
+test.describe('Animation Timing Bug Fixes', () => {
+  // animation timing tests are flaky in CI due to timing variations - add retries
+  test.describe.configure({ retries: 3 })
+
+  test.beforeEach(async ({ page }) => {
+    const driver = (test.info().project?.metadata as any)?.animationDriver
+    test.skip(driver === 'native', 'native driver has element detection issues on web')
+
+    await setupPage(page, {
+      name: 'AnimationComprehensiveCase',
+      type: 'useCase',
+    })
+    // wait for initial render - CI can be slow, allow more time
+    await page.waitForTimeout(1500)
+  })
+
+  test('scenario 50: enter timing (200ms) should be faster than exit timing (1000ms)', async ({
+    page,
+  }) => {
+    // first hide element (exit with 1000ms)
+    expect(await elementExists(page, 'scenario-50-target'), 'Initially visible').toBe(
+      true
+    )
+
+    // trigger exit and measure how long it takes
+    const exitStart = Date.now()
+    await page.getByTestId('scenario-50-trigger').click()
+
+    // wait for exit to complete (element disappears)
+    await page.waitForFunction(
+      (testId) => !document.querySelector(`[data-testid="${testId}"]`),
+      'scenario-50-target',
+      { timeout: 3000 }
+    )
+    const exitDuration = Date.now() - exitStart
+
+    // exit animation is 1000ms - should take at least 800ms (allowing some tolerance)
+    // this verifies it's using the slow exit timing, not fast enter timing
+    expect(
+      exitDuration,
+      `Exit should take ~1000ms (got ${exitDuration}ms)`
+    ).toBeGreaterThan(700)
+
+    // trigger enter and measure how long it takes
+    const enterStart = Date.now()
+    await page.getByTestId('scenario-50-trigger').click()
+
+    // wait for element to appear and reach full opacity
+    await page.waitForFunction(
+      (testId) => {
+        const el = document.querySelector(`[data-testid="${testId}"]`)
+        if (!el) return false
+        const opacity = Number.parseFloat(getComputedStyle(el).opacity)
+        return opacity > 0.9
+      },
+      'scenario-50-target',
+      { timeout: 2000 }
+    )
+    const enterDuration = Date.now() - enterStart
+
+    // enter animation is 200ms - should complete in under 500ms (with overhead)
+    // more importantly, it should be significantly faster than exit
+    expect(
+      enterDuration,
+      `Enter should complete quickly (~200ms), got ${enterDuration}ms`
+    ).toBeLessThan(600)
+
+    // the key assertion: enter should be significantly faster than exit
+    expect(
+      enterDuration,
+      `Enter (${enterDuration}ms) should be faster than exit (${exitDuration}ms)`
+    ).toBeLessThan(exitDuration * 0.8)
+  })
+
+  test('scenario 51: duration: 1 should be 1ms (instant), not 1 second', async ({
+    page,
+  }) => {
+    expect(await elementExists(page, 'scenario-51-target'), 'Initially visible').toBe(
+      true
+    )
+
+    // trigger exit with duration: 1 (should be 1ms = instant)
+    await page.getByTestId('scenario-51-trigger').click()
+
+    // if duration is correctly 1ms, element should be gone almost immediately
+    // wait just 50ms - if it's treating 1 as 1 second, element would still exist
+    await page.waitForTimeout(50)
+
+    // BUG CHECK: element should be gone by now if duration is 1ms
+    // if duration is being treated as 1 second, element would still be visible
+    const stillExists = await elementExists(page, 'scenario-51-target')
+
+    // if element still exists, check opacity - should be near 0 if 1ms animation
+    if (stillExists) {
+      const opacity = await getOpacity(page, 'scenario-51-target')
+      // if duration is 1ms, opacity should be at 0 (animation complete)
+      // if duration is 1s, opacity would be ~0.95 at 50ms
+      expect(
+        opacity,
+        `Opacity should be near 0 at 50ms if duration is 1ms (got ${opacity})`
+      ).toBeLessThan(0.2)
+    }
+
+    // definitely should be gone by 200ms
+    await page.waitForTimeout(200)
+    expect(
+      await elementExists(page, 'scenario-51-target'),
+      'Should be gone by 200ms'
+    ).toBe(false)
+  })
+
+  test('scenario 51: verify animation is fast (not 1 second)', async ({ page }) => {
+    expect(await elementExists(page, 'scenario-51-target'), 'Initially visible').toBe(
+      true
+    )
+
+    const startTime = Date.now()
+
+    // trigger exit
+    await page.getByTestId('scenario-51-trigger').click()
+
+    // wait for element to disappear
+    await page.waitForFunction(
+      (testId) => !document.querySelector(`[data-testid="${testId}"]`),
+      'scenario-51-target',
+      { timeout: 3000 }
+    )
+
+    const exitDuration = Date.now() - startTime
+
+    // BUG CHECK: if duration is 1ms, exit should complete well under 1 second
+    // if duration is 1 second, it would take > 1000ms
+    // CI environments can have 500-800ms+ overhead, so use generous threshold
+    const threshold = process.env.CI ? 2000 : 1000
+    expect(
+      exitDuration,
+      `Exit with duration:1 should complete quickly, not take ${exitDuration}ms`
+    ).toBeLessThan(threshold)
+  })
+
+  test('scenario 52: inline duration override should be in milliseconds', async ({
+    page,
+  }) => {
+    // base is 100ms, override is duration: 50 (should be 50ms)
+    expect(await elementExists(page, 'scenario-52-target'), 'Initially visible').toBe(
+      true
+    )
+
+    const startTime = Date.now()
+
+    // trigger exit
+    await page.getByTestId('scenario-52-trigger').click()
+
+    // wait for exit
+    await page.waitForFunction(
+      (testId) => !document.querySelector(`[data-testid="${testId}"]`),
+      'scenario-52-target',
+      { timeout: 3000 }
+    )
+
+    const exitDuration = Date.now() - startTime
+
+    // animation is 50ms + overhead, CI can add 500-800ms+ overhead
+    const threshold = process.env.CI ? 2000 : 1000
+    expect(
+      exitDuration,
+      `Exit with duration:50 should complete in well under 1s (got ${exitDuration}ms)`
+    ).toBeLessThan(threshold)
+  })
+})

package/tests/AnimationsWithMediaQueries.animated.test.tsx

@@ -0,0 +1,154 @@
+import { expect, test, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Tests for animated properties responding to media query changes.
+ *
+ * This tests the useStyleEmitter path which allows style updates without re-renders.
+ * When media queries change, the animation driver receives new styles and must
+ * update the DOM accordingly.
+ *
+ * Note: The 'native' driver (animations-react-native) doesn't support avoidReRenders/useStyleEmitter,
+ * so these tests are skipped for that driver.
+ */
+
+async function getScale(page: Page, testId: string): Promise<number> {
+  return page.evaluate((id) => {
+    const el = document.querySelector(`[data-testid="${id}"]`)
+    if (!el) return -1
+    const transform = getComputedStyle(el).transform
+    if (transform === 'none') return 1
+    // matrix(a, b, c, d, tx, ty) - scaleX is in the 'a' position
+    const match = transform.match(/matrix\(([^,]+),/)
+    return match ? Number.parseFloat(match[1]) : 1
+  }, testId)
+}
+
+// poll until scale reaches expected value (spring animations may be slow in CI)
+async function waitForScale(
+  page: Page,
+  testId: string,
+  expected: number,
+  tolerance = 0.05,
+  timeoutMs = process.env.CI ? 5000 : 2000
+): Promise<number> {
+  const start = Date.now()
+  let last = -1
+  while (Date.now() - start < timeoutMs) {
+    last = await getScale(page, testId)
+    if (Math.abs(last - expected) <= tolerance) return last
+    await page.waitForTimeout(50)
+  }
+  return last
+}
+
+async function getTranslateX(page: Page, testId: string): Promise<number> {
+  return page.evaluate((id) => {
+    const el = document.querySelector(`[data-testid="${id}"]`)
+    if (!el) return NaN
+    const transform = getComputedStyle(el).transform
+    if (transform === 'none') return 0
+    // matrix(a, b, c, d, tx, ty)
+    const matrixMatch = transform.match(/matrix\(([^)]+)\)/)
+    if (matrixMatch) {
+      const values = matrixMatch[1].split(',').map((v: string) => parseFloat(v.trim()))
+      return values[4] || 0
+    }
+    return 0
+  }, testId)
+}
+
+test.describe('Animations With Media Queries', () => {
+  test.beforeEach(async ({ page }, testInfo) => {
+    // Skip native driver - it doesn't support useStyleEmitter (avoidReRenders)
+    test.skip(
+      testInfo.project.name === 'animated-native',
+      'Native driver does not support avoidReRenders/useStyleEmitter'
+    )
+    await setupPage(page, { name: 'AnimationsWithMediaQueriesCase', type: 'useCase' })
+  })
+
+  test('scale applies at large viewport', async ({ page }) => {
+    await page.setViewportSize({ width: 1200, height: 800 })
+    const scale = await waitForScale(page, 'test-scale', 1)
+    expect(scale, 'scale should be 1 at large viewport').toBeCloseTo(1, 1)
+  })
+
+  test('scale applies at small viewport', async ({ page }) => {
+    await page.setViewportSize({ width: 600, height: 800 })
+    const scale = await waitForScale(page, 'test-scale', 0.75)
+    expect(scale, 'scale should be 0.75 at $sm').toBeCloseTo(0.75, 1)
+  })
+
+  test('scale updates when resizing from large to small', async ({ page }) => {
+    await page.setViewportSize({ width: 1200, height: 800 })
+    let scale = await waitForScale(page, 'test-scale', 1)
+    expect(scale, 'large viewport: scale=1').toBeCloseTo(1, 1)
+
+    await page.setViewportSize({ width: 600, height: 800 })
+    scale = await waitForScale(page, 'test-scale', 0.75)
+    expect(scale, 'small viewport: scale=0.75').toBeCloseTo(0.75, 1)
+  })
+
+  test('scale updates when resizing from small to large', async ({ page }) => {
+    await page.setViewportSize({ width: 600, height: 800 })
+    let scale = await waitForScale(page, 'test-scale', 0.75)
+    expect(scale, 'small viewport: scale=0.75').toBeCloseTo(0.75, 1)
+
+    await page.setViewportSize({ width: 1200, height: 800 })
+    scale = await waitForScale(page, 'test-scale', 1)
+    expect(scale, 'large viewport: scale=1').toBeCloseTo(1, 1)
+  })
+
+  test('scale updates on multiple resize cycles', async ({ page }) => {
+    await page.setViewportSize({ width: 1200, height: 800 })
+    await waitForScale(page, 'test-scale', 1)
+
+    // cycle 1: large -> small -> large
+    await page.setViewportSize({ width: 600, height: 800 })
+    let scale = await waitForScale(page, 'test-scale', 0.75)
+    expect(scale, 'cycle 1 small: scale=0.75').toBeCloseTo(0.75, 1)
+
+    await page.setViewportSize({ width: 1200, height: 800 })
+    scale = await waitForScale(page, 'test-scale', 1)
+    expect(scale, 'cycle 1 large: scale=1').toBeCloseTo(1, 1)
+
+    // cycle 2
+    await page.setViewportSize({ width: 600, height: 800 })
+    scale = await waitForScale(page, 'test-scale', 0.75)
+    expect(scale, 'cycle 2 small: scale=0.75').toBeCloseTo(0.75, 1)
+
+    await page.setViewportSize({ width: 1200, height: 800 })
+    scale = await waitForScale(page, 'test-scale', 1)
+    expect(scale, 'cycle 2 large: scale=1').toBeCloseTo(1, 1)
+
+    // cycle 3
+    await page.setViewportSize({ width: 600, height: 800 })
+    scale = await waitForScale(page, 'test-scale', 0.75)
+    expect(scale, 'cycle 3 small: scale=0.75').toBeCloseTo(0.75, 1)
+  })
+
+  test('translateX updates on resize', async ({ page }) => {
+    await page.setViewportSize({ width: 1200, height: 800 })
+    await page.waitForTimeout(1000)
+
+    let x = await getTranslateX(page, 'test-translate')
+    expect(x, 'large viewport: x=10').toBeCloseTo(10, 0)
+
+    await page.setViewportSize({ width: 600, height: 800 })
+    await page.waitForTimeout(1000)
+
+    x = await getTranslateX(page, 'test-translate')
+    expect(x, 'small viewport: x=50').toBeCloseTo(50, -1) // precision -1 allows ±5
+  })
+
+  test('combined scale + translate updates on resize', async ({ page }) => {
+    await page.setViewportSize({ width: 1200, height: 800 })
+    let scale = await waitForScale(page, 'test-combined', 1)
+    expect(scale, 'large viewport: scale=1').toBeCloseTo(1, 1)
+
+    await page.setViewportSize({ width: 600, height: 800 })
+    scale = await waitForScale(page, 'test-combined', 0.75)
+    expect(scale, 'small viewport: scale=0.75').toBeCloseTo(0.75, 1)
+  })
+})

package/tests/BuildAButton.test.tsx

@@ -0,0 +1,87 @@
+import { getSize, getSpace } from '@hanzogui/get-token'
+import type { SizeTokens } from '@hanzogui/web'
+import {
+  GetProps,
+  View,
+  Text,
+  createStyledContext,
+  styled,
+  useTheme,
+  withStaticProperties,
+} from '@hanzogui/web'
+import { cloneElement, useContext } from 'react'
+
+export const ButtonContext = createStyledContext({
+  size: '$md' as SizeTokens,
+})
+
+export const ButtonFrame = styled(View, {
+  name: 'Button',
+  context: ButtonContext,
+  backgroundColor: '$background',
+  alignItems: 'center',
+  flexDirection: 'row',
+
+  hoverStyle: {
+    backgroundColor: '$backgroundHover',
+  },
+
+  pressStyle: {
+    backgroundColor: '$backgroundPress',
+  },
+
+  variants: {
+    size: {
+      '...size': (name, { tokens }) => {
+        return {
+          height: tokens.size[name],
+          borderRadius: tokens.radius[name],
+          // note the getSpace and getSize helpers will let you shift down/up token sizes
+          // whereas with gap we just multiply by 0.2
+          // this is a stylistic choice, and depends on your design system values
+          gap: tokens.space[name].val * 0.2,
+          paddingHorizontal: getSpace(name, {
+            shift: -1,
+          }),
+        }
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    size: '$true',
+  },
+})
+
+export const ButtonText = styled(Text, {
+  name: 'ButtonText',
+  context: ButtonContext,
+  color: '$color',
+  userSelect: 'none',
+
+  variants: {
+    size: {
+      '...fontSize': (name, { font }) => ({
+        fontSize: font?.size[name],
+      }),
+    },
+  } as const,
+})
+
+const ButtonIcon = (props: { children: any }) => {
+  const { size } = useContext(ButtonContext.context)
+  const smaller = getSize(size, {
+    shift: -2,
+  })
+  const theme = useTheme()
+  return cloneElement(props.children, {
+    size: smaller.val * 0.5,
+    color: theme.color.get(),
+  })
+}
+
+export const Button = withStaticProperties(ButtonFrame, {
+  Props: ButtonContext.Provider,
+  Text: ButtonText,
+  Icon: ButtonIcon,
+})

package/tests/ButtonCircular.test.tsx

@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ButtonCircular', type: 'useCase' })
+})
+
+test(`tag button + circular prop works`, async ({ page }) => {
+  const styles = await page.locator('button#circular').evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  expect(styles.width).toBe(`44px`)
+  expect(styles.height).toBe(styles.width)
+  expect(styles.borderRadius).toBe(`100000px`)
+})

package/tests/ButtonCustom.test.tsx

@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ButtonCustom', type: 'useCase' })
+})
+
+test(`keeps flex direction for styled(Button)`, async ({ page }) => {
+  const styles1 = await getStyles(page.getByTestId('button').first())
+  const styles2 = await getStyles(page.getByTestId('button-styled').first())
+
+  // should match
+  expect(styles1.flexDirection).toBe('row')
+  expect(styles2.flexDirection).toBe('row')
+})

package/tests/ButtonIconColor.test.tsx

@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ButtonIconColor', type: 'useCase' })
+})
+
+test(`button icon receives color from theme`, async ({ page }) => {
+  const button = page.getByTestId('button-themed')
+  const path = button.locator('svg path').first()
+  const stroke = await path.evaluate((el) => getComputedStyle(el).stroke)
+  expect(stroke).toBeTruthy()
+  expect(stroke).not.toBe('none')
+})
+
+test(`listitem icon receives color from theme`, async ({ page }) => {
+  const listitem = page.getByTestId('listitem-themed')
+  const path = listitem.locator('svg path').first()
+  const stroke = await path.evaluate((el) => getComputedStyle(el).stroke)
+  expect(stroke).toBeTruthy()
+  expect(stroke).not.toBe('none')
+})

package/tests/ButtonUnstyled.test.tsx

@@ -0,0 +1,56 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles, whilePressed } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ButtonUnstyled', type: 'useCase' })
+})
+
+function expectEmptyStyles(styles: any) {
+  expect(styles.backgroundColor).toBe(`rgba(0, 0, 0, 0)`)
+  expect(styles.padding).toBe(`0px`)
+  expect(styles.borderWidth).toBe(`0px`)
+}
+
+test(`unstyled prop works when used with styled()`, async ({ page }) => {
+  const button = page.locator('#unstyled-inline')
+  const styles = await getStyles(button)
+
+  expectEmptyStyles(styles)
+
+  await whilePressed(button, async () => {
+    const pressStyles = await getStyles(button)
+    expectEmptyStyles(pressStyles)
+  })
+})
+
+test(`unstyled prop works when used with styled() + merges when its own variant unstyled is also set`, async ({
+  page,
+}) => {
+  const button = page.locator('#unstyled-merged')
+  const styles = await getStyles(button)
+
+  expect(styles.backgroundColor).toBe(`rgba(0, 0, 0, 0)`)
+  expect(styles.borderLeftWidth).toBe('2px')
+  expect(styles.borderColor).toBe('rgb(0, 128, 0)')
+
+  await whilePressed(button, async () => {
+    const pressStyles = await getStyles(button)
+    expect(styles.backgroundColor).toBe(`rgba(0, 0, 0, 0)`)
+    expect(pressStyles.borderLeftWidth).toBe('2px')
+    expect(pressStyles.borderColor).toBe('rgb(0, 128, 0)')
+  })
+})
+
+test(`unstyled prop works when used inline`, async ({ page }) => {
+  const button = page.locator('#unstyled-styled')
+  const styles = await getStyles(button)
+
+  expectEmptyStyles(styles)
+
+  await whilePressed(button, async () => {
+    const pressStyles = await getStyles(button)
+    expectEmptyStyles(pressStyles)
+  })
+})