@hanzogui/kitchen-sink 3.0.5

package/src/usecases/index.ts

@@ -0,0 +1,3 @@
+// default export for TypeScript type checking
+// bundlers will use .native.ts or .web.ts based on platform
+export * from './index.web'

package/src/usecases/index.web.ts

@@ -0,0 +1,177 @@
+// web-only exports - excludes native-only dependencies like:
+// - react-native-keyboard-controller
+// - react-native-actions-sheet
+// - react-native-teleport
+
+export { AnimatedByProp } from './AnimatedByProp'
+export { AnimatePresenceEnterExitCase } from './AnimatePresenceEnterExitCase'
+export { AnimatePresenceExitTest } from './AnimatePresenceExitTest'
+export { AnimationComprehensiveCase } from './AnimationComprehensiveCase'
+export { RawAnimatedValueCase } from './RawAnimatedValueCase'
+export { AnimationsWithMediaQueriesCase } from './AnimationsWithMediaQueriesCase'
+export { ThemeMediaAnimationCase } from './ThemeMediaAnimationCase'
+export { Benchmark } from './Benchmark'
+export { ButtonCircular } from './ButtonCircular'
+export { ButtonCustom } from './ButtonCustom'
+export { ButtonIconColor } from './ButtonIconColor'
+export { ButtonInverse } from './ButtonInverse'
+export { ButtonUnstyled } from './ButtonUnstyled'
+export { CheckboxDisabledOnPress } from './CheckboxDisabledOnPress'
+export { ClickDuringEnterCase } from './ClickDuringEnterCase'
+export { CodeExamplesInput } from './CodeExamplesInput'
+export { ColorTokenFallback } from './ColorTokenFallback'
+export { CompilerExtraction } from './CompilerExtraction'
+export { ComplexVariants } from './ComplexVariants'
+export { CrashAdaptSheet } from './CrashAdaptSheet'
+export { CustomStyledAnimatedPopover } from './CustomStyledAnimatedPopover'
+export { CustomStyledAnimatedTooltip } from './CustomStyledAnimatedTooltip'
+export { DriverDisableAnimationPropsCase } from './DriverDisableAnimationPropsCase'
+export { DOMNodeAPIs } from './DOMNodeAPIs'
+export { DialogFocusScopeCase } from './DialogFocusScopeCase'
+export { DialogFocusScopeDebug } from './DialogFocusScopeDebug'
+export { DialogNestedCase } from './DialogNestedCase'
+export { DismissLayerStackingCase } from './DismissLayerStackingCase'
+export { DialogOpenControlled } from './DialogOpenControlled'
+export { DialogPointerEventsCase } from './DialogPointerEventsCase'
+export { DialogScopedCase } from './DialogScopedCase'
+export { DialogSheetAdaptCase } from './DialogSheetAdaptCase'
+export { DialogSheetAdaptResizeCase } from './DialogSheetAdaptResizeCase'
+export { Example } from './Example'
+export { ExitCompletionCase } from './ExitCompletionCase'
+export { FocusVisibleButton } from './FocusVisibleButton'
+export { FocusVisibleButtonPointer } from './FocusVisibleButtonPointer'
+export { FocusVisibleButtonWithFocusStyle } from './FocusVisibleButtonWithFocusStyle'
+export { FontTokensInVariants } from './FontTokensInVariants'
+export { FocusWithinCase } from './FocusWithinCase'
+export { FormButtonTypeCase } from './FormButtonTypeCase'
+export { GroupHoverMobile } from './GroupHoverMobile'
+export { GroupPressInVariant } from './GroupPressInVariant'
+export { GroupPseudoVariantOverride } from './GroupPseudoVariantOverride'
+export { GroupPressNative } from './GroupPressNative'
+export { GroupProp } from './GroupProp'
+export { GlobalScopedTriggerIsolationCase } from './GlobalScopedTriggerIsolationCase'
+export { MediaQueryGtMd } from './MediaQueryGtMd'
+export { MediaQueriesV5 } from './MediaQueriesV5'
+export { MenuAboveDialogCase } from './MenuAboveDialogCase'
+export { MenuAnimatePositionCase } from './MenuAnimatePositionCase'
+export { MenuAccessibilityCase } from './MenuAccessibilityCase'
+export { MenuItemFocusCase } from './MenuItemFocusCase'
+export { MenuArrowAnimatePresenceCase } from './MenuArrowAnimatePresenceCase'
+export { MenuAsChildPositionCase } from './MenuAsChildPositionCase'
+export { MenuAutoResizeCase } from './MenuAutoResizeCase'
+export { MenuFocusLeaveCase } from './MenuFocusLeaveCase'
+export { MenuHighlightCase } from './MenuHighlightCase'
+export { MenuMultiTriggerCase } from './MenuMultiTriggerCase'
+export { MenuItemPseudoOverrideCase } from './MenuItemPseudoOverrideCase'
+export { MenuBottomCase } from './MenuBottomCase'
+export { MenuOverflowCase } from './MenuOverflowCase'
+export { MenuSubCase } from './MenuSubCase'
+export { MenuSubNestedPositionCase } from './MenuSubNestedPositionCase'
+export { MenuSubLeftCase } from './MenuSubLeftCase'
+export { MultiDriverAnimation } from './MultiDriverAnimation'
+export { MenuSubStyledCase } from './MenuSubStyledCase'
+export { MenuThemeCase } from './MenuThemeCase'
+export { MenuUnstyledCase } from './MenuUnstyledCase'
+export { GroupUseCases } from './GroupUseCases'
+export { HeightMediaQueryOverrideCase } from './HeightMediaQueryOverrideCase'
+export { InputAutoFocusAfterMenuCase } from './InputAutoFocusAfterMenuCase'
+export { InputAutoFocusStyledCase } from './InputAutoFocusStyledCase'
+export { ThemedListItem } from './ListItem'
+export { NewInputBasic } from './NewInputBasic'
+export { OpacityModifierCase } from './OpacityModifierCase'
+export { OnLayoutCase } from './OnLayoutCase'
+export { OnLayoutScaleCase } from './OnLayoutScaleCase'
+export { OnLayoutStressCase } from './OnLayoutStressCase'
+export { NewInputEvents } from './NewInputEvents'
+export { OverlayStyled } from './OverlayStyled'
+export { ParagraphSpanFontInheritance } from './ParagraphSpanFontInheritance'
+export { PlaceholderTextColor } from './PlaceholderTextColor'
+export { PointerEventsCase } from './PointerEventsCase'
+export { PopoverAndMenuMultiTriggerCase } from './PopoverAndMenuMultiTriggerCase'
+export { PopoverCase, PopoverAnimatePositionCase } from './PopoverCase'
+export {
+  PopoverHoverableDelayCase,
+  PopoverHoverableRestMsCase,
+  PopoverHoverableExitAnimCase,
+  PopoverHoverableSafePolygonCase,
+} from './PopoverHoverableCase'
+export { PopoverHoverableDisableClickCase } from './PopoverHoverableDisableClickCase'
+export { PopoverHoverableScopedCase } from './PopoverHoverableScopedCase'
+export { PopoverHoverableRapidCase } from './PopoverHoverableRapidCase'
+export { PopoverContentStyledPlusAnimations } from './PopoverContentStyledPlusAnimations'
+export { PopoverFocusScopeCase } from './PopoverFocusScopeCase'
+export { PopoverScopedCase } from './PopoverScopedCase'
+export { PopoverTriggerIsolationCase } from './PopoverTriggerIsolationCase'
+export { PressStyleNative } from './PressStyleNative'
+export { PseudoStyleMerge } from './PseudoStyleMerge'
+export { PseudoTransitionCase } from './PseudoTransitionCase'
+export { RemoveScrollCase } from './RemoveScrollCase'
+export { RenderPropCase } from './RenderPropCase'
+export { ScrollViewRefCase } from './ScrollViewRefCase'
+export { SecondPage } from './SecondPage'
+export { SelectAndroidOnPress } from './SelectAndroidOnPress'
+export { SelectFocusScopeCase } from './SelectFocusScopeCase'
+export { SelectRemount } from './SelectRemount'
+export { Shadows } from './Shadows'
+export { ShorthandVariables } from './ShorthandVariables'
+export { SheetAnimationCase } from './SheetAnimationCase'
+export { SheetOnAnimationCompleteCase } from './SheetOnAnimationCompleteCase'
+export { SheetDragCase } from './SheetDragCase'
+export { SheetDragResistCase } from './SheetDragResistCase.web'
+export { SheetScrollableDrag } from './SheetScrollableDrag'
+export { SheetScrollLockCase } from './SheetScrollLockCase'
+export { SheetSnapPointsFitCase } from './SheetSnapPointsFitCase'
+export { SlowThemeReRender } from './SlowThemeReRender'
+export { SpinnerCustomColors } from './SpinnerCustomColors'
+export { StackZIndex } from './StackZIndex'
+export { StyledAnchor } from './StyledAnchor'
+export { StyledHtmlCase } from './StyledHtmlCase'
+export { StyledButtonAnimationAuto } from './StyledButtonAnimationAuto'
+export { StyledButtonTheme } from './StyledButtonTheme'
+export { StyledButtonVariantPseudo } from './StyledButtonVariantPseudo'
+export { StyledButtonVariantPseudoMerge } from './StyledButtonVariantPseudoMerge'
+export { StyledCheckboxTheme } from './StyledCheckboxTheme'
+export { StyledContextColor } from './StyledContextColor'
+export { StyledContextTokens } from './StyledContextTokens'
+export { StyledHOCNamed } from './StyledHOCNamed'
+export { StyledIconColor } from './StyledIconColor'
+export { StyledInputFocusStyle } from './StyledInputFocusStyle'
+export { StyledInputOnFocus } from './StyledInputOnFocus'
+export { StyledMediaQueryMerge } from './StyledMediaQueryMerge'
+export { StyledOverridePsuedo } from './StyledOverridePsuedo'
+export { StyledRNW } from './StyledRNW'
+export { StyledStyleableInputOnFocus } from './StyledStyleableInputOnFocus'
+export { StyledStyleableInputVariant } from './StyledStyleableInputVariant'
+export { StyledStyledStyleableInputOnFocus } from './StyledStyledStyleableInputOnFocus'
+export { StyledVariantTextColor } from './StyledVariantTextColor'
+export { StyledViewOnFocus } from './StyledViewOnFocus'
+export { StressPage } from './StressPage'
+export { StylePlatform } from './StylePlatform'
+export { StyleProp } from './StyleProp'
+export { TextNestedInheritance } from './TextNestedInheritance'
+export { TabHoverAnimationCase } from './TabHoverAnimationCase'
+export { ThemeChange } from './ThemeChange'
+export { ThemeConditionalName } from './ThemeConditionalName'
+export { ThemeChangeBasic } from './ThemeChangeBasic'
+export { ThemeComponentResolution } from './ThemeComponentResolution'
+export { ThemeMutation } from './ThemeMutation'
+export { ThemeNested } from './ThemeNested'
+export { ThemeReset } from './ThemeReset'
+export { ThemeShallowCase } from './ThemeShallowCase'
+export { ToastCase } from './ToastCase'
+export { ToggleGroupActiveProps } from './ToggleGroupActiveProps'
+export { ToggleGroupXGroupCase } from './ToggleGroupXGroupCase'
+export { TooltipAnimationCase } from './TooltipAnimationCase'
+export { TooltipCase } from './TooltipCase'
+export { TooltipGlobalPatternCase } from './TooltipGlobalPatternCase'
+export { TooltipGroupCase } from './TooltipGroupCase'
+export { TooltipPositionJumpCase } from './TooltipPositionJumpCase'
+export { TooltipTriggerInlineCase } from './TooltipTriggerInlineCase'
+export { TooltipMultiTriggerCase } from './TooltipMultiTriggerCase'
+export { TransformMediaQueryMerge } from './TransformMediaQueryMerge'
+export { UseCases } from './UseCases'
+export { UseTheme } from './UseTheme'
+export { V5ThemeBuilderOutput } from './V5ThemeBuilderOutput'
+export { VariantFontFamily } from './VariantFontFamily'
+export { VariantsOrder } from './VariantsOrder'
+export { ZIndex } from './ZIndex'

package/tests/AnimatePresenceEnterExit.animated.test.tsx

@@ -0,0 +1,176 @@
+import { expect, test, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+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 parseFloat(getComputedStyle(el).opacity)
+  }, testId)
+}
+
+async function elementExists(page: Page, testId: string): Promise<boolean> {
+  return page.evaluate((id) => !!document.querySelector(`[data-testid="${id}"]`), testId)
+}
+
+async function waitForOpacity(
+  page: Page,
+  testId: string,
+  target: number,
+  timeout = 3000
+) {
+  const tolerance = target === 1 ? 0.02 : 0.01
+  const start = Date.now()
+  while (Date.now() - start < timeout) {
+    const opacity = await getOpacity(page, testId)
+    if (Math.abs(opacity - target) < tolerance) return opacity
+    await page.waitForTimeout(50)
+  }
+  return getOpacity(page, testId)
+}
+
+async function waitForRemoval(page: Page, testId: string, timeout = 3000) {
+  const start = Date.now()
+  while (Date.now() - start < timeout) {
+    if (!(await elementExists(page, testId))) return true
+    await page.waitForTimeout(50)
+  }
+  return false
+}
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'AnimatePresenceEnterExitCase', type: 'useCase' })
+  await page.waitForTimeout(500)
+})
+
+test('scenario 01: enter animation should animate opacity from 0 to 1', async ({
+  page,
+}) => {
+  expect(await elementExists(page, 'enter-exit-01-target')).toBe(false)
+
+  await page.getByTestId('enter-exit-01-trigger').click()
+
+  // check intermediate opacity during animation
+  await page.waitForTimeout(50)
+  const midOpacity = await getOpacity(page, 'enter-exit-01-target')
+  expect(midOpacity).toBeGreaterThanOrEqual(0)
+  expect(midOpacity).toBeLessThan(1)
+
+  // wait for animation to settle near 1
+  const finalOpacity = await waitForOpacity(page, 'enter-exit-01-target', 1)
+  expect(finalOpacity).toBeGreaterThan(0.98)
+})
+
+test('scenario 01: exit animation should animate opacity from 1 to 0', async ({
+  page,
+}) => {
+  await page.getByTestId('enter-exit-01-trigger').click()
+  const enterOpacity = await waitForOpacity(page, 'enter-exit-01-target', 1)
+  expect(enterOpacity).toBeGreaterThan(0.98)
+
+  await page.getByTestId('enter-exit-01-trigger').click()
+
+  // during exit, element should still exist but opacity should be less than 1
+  await page.waitForTimeout(50)
+  const midOpacity = await getOpacity(page, 'enter-exit-01-target')
+  expect(await elementExists(page, 'enter-exit-01-target')).toBe(true)
+  expect(midOpacity).toBeLessThan(1)
+  expect(midOpacity).toBeGreaterThanOrEqual(0)
+
+  // wait for exit to complete - element should be removed
+  expect(await waitForRemoval(page, 'enter-exit-01-target')).toBe(true)
+})
+
+test('scenario 02: circle badge enter animation', async ({ page }) => {
+  expect(await elementExists(page, 'enter-exit-02-target')).toBe(false)
+
+  await page.getByTestId('enter-exit-02-increment').click()
+
+  await page.waitForTimeout(50)
+  const midOpacity = await getOpacity(page, 'enter-exit-02-target')
+  expect(midOpacity).toBeGreaterThanOrEqual(0)
+  expect(midOpacity).toBeLessThan(1)
+
+  const finalOpacity = await waitForOpacity(page, 'enter-exit-02-target', 1)
+  expect(finalOpacity).toBeGreaterThan(0.98)
+})
+
+test('scenario 03: initial=false enter animation', async ({ page }) => {
+  expect(await elementExists(page, 'enter-exit-03-target')).toBe(false)
+
+  await page.getByTestId('enter-exit-03-increment').click()
+
+  await page.waitForTimeout(50)
+  const midOpacity = await getOpacity(page, 'enter-exit-03-target')
+  expect(midOpacity).toBeGreaterThanOrEqual(0)
+  expect(midOpacity).toBeLessThan(1)
+
+  const finalOpacity = await waitForOpacity(page, 'enter-exit-03-target', 1)
+  expect(finalOpacity).toBeGreaterThan(0.98)
+})
+
+test('scenario 03: initial=false enter has intermediate frames', async ({ page }) => {
+  await page.evaluate(() => {
+    ;(window as any).__opacityFrames03 = []
+    ;(window as any).__rafRunning03 = true
+    const track = () => {
+      if (!(window as any).__rafRunning03) return
+      const el = document.querySelector('[data-testid="enter-exit-03-target"]')
+      if (el) {
+        ;(window as any).__opacityFrames03.push(parseFloat(getComputedStyle(el).opacity))
+      }
+      requestAnimationFrame(track)
+    }
+    requestAnimationFrame(track)
+  })
+
+  await page.getByTestId('enter-exit-03-increment').click()
+  await page.waitForTimeout(500)
+
+  await page.evaluate(() => {
+    ;(window as any).__rafRunning03 = false
+  })
+
+  const frames: number[] = await page.evaluate(() => (window as any).__opacityFrames03)
+
+  expect(frames.length).toBeGreaterThan(3)
+
+  const intermediateFrames = frames.filter((f) => f > 0.05 && f < 0.95)
+  expect(
+    intermediateFrames.length,
+    `expected intermediate opacity frames, got: ${JSON.stringify(frames.slice(0, 20))}`
+  ).toBeGreaterThan(0)
+
+  // final frame should be near 1 (spring may not land exactly on 1)
+  expect(frames[frames.length - 1]).toBeGreaterThan(0.95)
+})
+
+test('scenario 03: initial=false exit animation', async ({ page }) => {
+  await page.getByTestId('enter-exit-03-increment').click()
+  const enterOpacity = await waitForOpacity(page, 'enter-exit-03-target', 1)
+  expect(enterOpacity).toBeGreaterThan(0.98)
+
+  await page.getByTestId('enter-exit-03-clear').click()
+
+  await page.waitForTimeout(50)
+  const midOpacity = await getOpacity(page, 'enter-exit-03-target')
+  expect(await elementExists(page, 'enter-exit-03-target')).toBe(true)
+  expect(midOpacity).toBeLessThan(1)
+
+  expect(await waitForRemoval(page, 'enter-exit-03-target')).toBe(true)
+})
+
+test('scenario 02: circle badge exit animation', async ({ page }) => {
+  await page.getByTestId('enter-exit-02-increment').click()
+  const enterOpacity = await waitForOpacity(page, 'enter-exit-02-target', 1)
+  expect(enterOpacity).toBeGreaterThan(0.98)
+
+  await page.getByTestId('enter-exit-02-clear').click()
+
+  await page.waitForTimeout(50)
+  const midOpacity = await getOpacity(page, 'enter-exit-02-target')
+  expect(await elementExists(page, 'enter-exit-02-target')).toBe(true)
+  expect(midOpacity).toBeLessThan(1)
+
+  expect(await waitForRemoval(page, 'enter-exit-02-target')).toBe(true)
+})

package/tests/AnimatedByProp.animated.test.tsx

@@ -0,0 +1,138 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Tests for the animatedBy prop.
+ *
+ * The key test: animatedBy="default" should work the same as not setting it,
+ * meaning the animation driver is properly looked up and applied.
+ *
+ * If the lookup is broken (returns null), the element with animatedBy="default"
+ * won't animate, while the one without animatedBy will still animate via context.
+ */
+
+const TOLERANCE = 0.05
+
+test.describe('animatedBy prop', () => {
+  // Skip native driver - it doesn't work on web
+  test.beforeEach(async ({ page }, testInfo) => {
+    test.skip(
+      testInfo.project.name === 'animated-native',
+      'Native driver not supported on web'
+    )
+
+    await setupPage(page, {
+      name: 'AnimatedByProp',
+      type: 'useCase',
+    })
+    await page.waitForTimeout(500)
+  })
+
+  test('animatedBy="default" element animates properly', async ({ page }) => {
+    const START = 0.5,
+      END = 1
+    const explicitElement = page.getByTestId('explicit-default')
+
+    // Initial state
+    const initialOpacity = await explicitElement.evaluate((el) =>
+      Number(getComputedStyle(el).opacity)
+    )
+    expect(initialOpacity).toBeCloseTo(START, 1)
+
+    // Trigger animation and poll for intermediate values via rAF
+    // this avoids brittle single-point-in-time snapshots that miss on slow CI
+    const samples: number[] = await page.evaluate((testId) => {
+      return new Promise<number[]>((resolve) => {
+        const el = document.querySelector(`[data-testid="${testId}"]`)!
+        const vals: number[] = []
+        const start = performance.now()
+        function tick() {
+          vals.push(Number(getComputedStyle(el).opacity))
+          if (performance.now() - start < 600) requestAnimationFrame(tick)
+          else resolve(vals)
+        }
+        ;(document.querySelector('[data-testid="toggle-trigger"]') as HTMLElement).click()
+        requestAnimationFrame(tick)
+      })
+    }, 'explicit-default')
+
+    const finalOpacity = samples[samples.length - 1]
+    expect(
+      finalOpacity,
+      `Should reach end state (${END}), got ${finalOpacity.toFixed(2)}`
+    ).toBeCloseTo(END, 1)
+
+    // verify animation driver is working: must have intermediate values (not instant snap)
+    const intermediates = samples.filter(
+      (v) => Math.abs(v - START) > TOLERANCE && Math.abs(v - END) > TOLERANCE
+    )
+    expect(
+      intermediates.length,
+      `Should have multiple intermediate frames (got ${intermediates.length}). ` +
+        `Samples: [${samples
+          .slice(0, 8)
+          .map((s) => s.toFixed(2))
+          .join(', ')}...]`
+    ).toBeGreaterThanOrEqual(2)
+
+    // verify first few samples haven't already jumped to end (animation has real duration)
+    const earlyEnd = samples.slice(0, 3).every((v) => Math.abs(v - END) < TOLERANCE)
+    expect(earlyEnd, 'Animation should not complete in first 3 frames').toBe(false)
+  })
+
+  test('context default (no animatedBy) also animates', async ({ page }) => {
+    const START = 0.5,
+      END = 1
+
+    const initialOpacity = await page
+      .getByTestId('context-driver')
+      .evaluate((el) => Number(getComputedStyle(el).opacity))
+    expect(initialOpacity).toBeCloseTo(START, 1)
+
+    // poll via rAF to capture intermediate values reliably
+    const samples: number[] = await page.evaluate((testId) => {
+      return new Promise<number[]>((resolve) => {
+        const el = document.querySelector(`[data-testid="${testId}"]`)!
+        const vals: number[] = []
+        const start = performance.now()
+        function tick() {
+          vals.push(Number(getComputedStyle(el).opacity))
+          if (performance.now() - start < 600) requestAnimationFrame(tick)
+          else resolve(vals)
+        }
+        ;(document.querySelector('[data-testid="toggle-trigger"]') as HTMLElement).click()
+        requestAnimationFrame(tick)
+      })
+    }, 'context-driver')
+
+    const finalOpacity = samples[samples.length - 1]
+    expect(finalOpacity, 'End opacity').toBeCloseTo(END, 1)
+
+    // verify real animation duration: multiple intermediate frames, not instant
+    const intermediates = samples.filter(
+      (v) => Math.abs(v - START) > TOLERANCE && Math.abs(v - END) > TOLERANCE
+    )
+    expect(
+      intermediates.length,
+      `Context default should have multiple intermediate frames`
+    ).toBeGreaterThanOrEqual(2)
+  })
+
+  test('both elements animate in sync', async ({ page }) => {
+    const explicitElement = page.getByTestId('explicit-default')
+    const contextElement = page.getByTestId('context-driver')
+
+    // Trigger animation
+    await page.getByTestId('toggle-trigger').click()
+    await page.waitForTimeout(500)
+
+    // Both should reach end state
+    const [explicitFinal, contextFinal] = await Promise.all([
+      explicitElement.evaluate((el) => Number(getComputedStyle(el).opacity)),
+      contextElement.evaluate((el) => Number(getComputedStyle(el).opacity)),
+    ])
+
+    expect(explicitFinal, 'animatedBy="default" end state').toBeCloseTo(1, 1)
+    expect(contextFinal, 'context default end state').toBeCloseTo(1, 1)
+  })
+})