Move useHighlightAnimation to ui package

apps/store/src/components/Combobox/Combobox.tsx

@@ -1,8 +1,15 @@
 import clsx from 'clsx'
 import { useCombobox } from 'downshift'
 import { useState, useMemo, useDeferredValue, useId } from 'react'
-import { ChevronIcon, CrossIconSmall, Text, xStack, theme, WarningTriangleIcon } from 'ui'
-import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
+import {
+  ChevronIcon,
+  CrossIconSmall,
+  Text,
+  xStack,
+  theme,
+  WarningTriangleIcon,
+  useHighlightAnimation,
+} from 'ui'
 import {
   wrapper,
   wrapperExpanded,

apps/store/src/components/DebugDialog/CopyToClipboard.tsx

@@ -2,8 +2,7 @@
 
 import styled from '@emotion/styled'
 import { useEffect, useState } from 'react'
-import { Text, theme } from 'ui'
-import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
+import { Text, theme, useHighlightAnimation } from 'ui'
 
 export const CopyToClipboard = (props: { label: string; children: string }) => {
   const { highlight, animationProps } = useHighlightAnimation<HTMLButtonElement>()

apps/store/src/components/InputDay/InputDay.tsx

@@ -4,13 +4,12 @@ import { sv } from 'date-fns/locale'
 import { useTranslation } from 'next-i18next'
 import { type CSSProperties, startTransition, useId, useState } from 'react'
 import { useInput, DayPicker, type SelectSingleEventHandler } from 'react-day-picker'
-import { ChevronIcon, Text, LockIcon, theme } from 'ui'
+import { ChevronIcon, Text, LockIcon, theme, useHighlightAnimation } from 'ui'
 import { LoadingDots } from '@/components/LoadingDots/LoadingDots'
 import { convertToDate } from '@/utils/date'
 import { Language } from '@/utils/l10n/types'
 import { useCurrentLocale } from '@/utils/l10n/useCurrentLocale'
 import { useFormatter } from '@/utils/useFormatter'
-import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
 import { trigger, label, iconWrapper, chevronIcon, popoverContent, dayPicker } from './InputDay.css'
 
 import 'react-day-picker/dist/style.css'

apps/store/src/components/InputRadio/InputRadio.tsx

@@ -9,9 +9,8 @@ import {
   type ComponentProps,
   type ComponentPropsWithoutRef,
 } from 'react'
-import { Text } from 'ui'
+import { Text, useHighlightAnimation } from 'ui'
 import { RadioIndicatorIcon } from '@/features/priceCalculator/RadioIndicatorIcon'
-import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
 import { horizontalRadioGroup, card, item, paddedItem, radioButton } from './InputRadio.css'
 
 type Option = { label: string; value: string; autoFocus?: boolean }

apps/store/src/components/InputSelect/InputSelect.tsx

@@ -3,8 +3,14 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import { clsx } from 'clsx'
 import { type ChangeEventHandler, useId } from 'react'
-import { ChevronIcon, InputBase, type InputBaseProps, type UIColorKeys, getColor } from 'ui'
-import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
+import {
+  ChevronIcon,
+  InputBase,
+  type InputBaseProps,
+  type UIColorKeys,
+  getColor,
+  useHighlightAnimation,
+} from 'ui'
 import {
   chevronIcon,
   inputLabel,

apps/store/src/components/RadioOptionList/RadioOptionList.tsx

@@ -2,9 +2,8 @@ import styled from '@emotion/styled'
 import * as RadioGroup from '@radix-ui/react-radio-group'
 import type { MouseEventHandler } from 'react'
 import { type ComponentProps } from 'react'
-import { Text, theme } from 'ui'
+import { Text, theme, useHighlightAnimation } from 'ui'
 import { Pillow } from '@/components/Pillow/Pillow'
-import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
 
 type RootProps = RadioGroup.RadioGroupProps
 

apps/store/src/components/StepperInput/StepperInput.tsx

@@ -8,8 +8,7 @@ import {
   useState,
   useId,
 } from 'react'
-import { MinusIcon, PlusIcon, xStack, yStack } from 'ui'
-import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
+import { MinusIcon, PlusIcon, useHighlightAnimation, xStack, yStack } from 'ui'
 import { outerWrapper, select, inputLabel, stepButton } from './StepperInput.css'
 
 export type StepperInputProps = {

apps/store/src/components/TextField/TextField.tsx

@@ -4,8 +4,15 @@ import clsx from 'clsx'
 import type { ChangeEventHandler, InputHTMLAttributes, MouseEventHandler, ReactNode } from 'react'
 import { useId, useRef, useState } from 'react'
 import { sprinkles } from 'ui/src/theme/sprinkles.css'
-import { LockIcon, Text, WarningTriangleIcon, theme, yStack, CrossIcon } from 'ui'
-import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
+import {
+  LockIcon,
+  Text,
+  WarningTriangleIcon,
+  theme,
+  yStack,
+  CrossIcon,
+  useHighlightAnimation,
+} from 'ui'
 import {
   deleteButton,
   input,

apps/store/src/components/ToggleCard/ToggleCard.tsx

@@ -1,9 +1,8 @@
 import type { ReactNode } from 'react'
 import { useId } from 'react'
-import { Space } from 'ui'
+import { Space, useHighlightAnimation } from 'ui'
 import { SpaceFlex } from '@/components/SpaceFlex/SpaceFlex'
 import { Switch, type SwitchProps } from '@/components/Switch'
-import { useHighlightAnimation } from '@/utils/useHighlightAnimation'
 import { wrapper, checkboxHeader, labelText } from './ToggleCard.css'
 
 type Props = SwitchProps & {

packages/ui/src/index.ts

@@ -22,6 +22,7 @@ export * from './components/Tabs/Tabs'
 export { responsiveVariants } from './utils/responsiveVariants/responsiveVariants'
 export * from './utils/responsiveVariants/repsonsiveVariants.types'
 export { visuallyHidden } from './utils/visuallyHidden.css'
+export { useHighlightAnimation } from './utils/useHighlightAnimation'
 
 export * from './icons'
 

apps/store/src/utils/useHighlightAnimation.ts → packages/ui/src/utils/useHighlightAnimation.ts

@@ -1,12 +1,25 @@
 'use client'
 
 import { type KeyboardEvent, useCallback, useRef, useState, useEffect } from 'react'
-import { theme } from 'ui'
+import { theme } from '../theme/theme'
 
 const SIGNAL_GREEN_FILL_HSLA = theme.colors.signalGreenFill
   .replace('hsl', 'hsla')
   .replace(')', ', 0.99)')
 
+const EXCLUDE_SET = new Set([
+  'Tab',
+  'Enter',
+  'ArrowDown',
+  'ArrowUp',
+  'ArrowRight',
+  'ArrowLeft',
+  'Shift',
+  'Alt',
+  'Meta',
+  'Control',
+])
+
 export function useHighlightAnimation<Element extends HTMLElement>() {
   const ref = useRef<Element | null>(null)
   const [backgroundColor, setBackgroundColor] = useState<string>(theme.colors.translucent1)
@@ -44,16 +57,3 @@ export function useHighlightAnimation<Element extends HTMLElement>() {
 
   return { highlight, animationProps: { ref } } as const
 }
-
-const EXCLUDE_SET = new Set([
-  'Tab',
-  'Enter',
-  'ArrowDown',
-  'ArrowUp',
-  'ArrowRight',
-  'ArrowLeft',
-  'Shift',
-  'Alt',
-  'Meta',
-  'Control',
-])