fix: improve active: styles on web

src/styled.tsx

@@ -6,6 +6,7 @@ import { withStyledChildren } from "./with-styled-children";
 import { withStyledProps } from "./with-styled-props";
 import { useTailwind } from "./use-tailwind";
 import { withClassNames } from "./with-class-names";
+import { usePlatform } from "./context/platform";
 
 export interface StyledOptions<P> {
   props?: Array<keyof P & string>;
@@ -41,6 +42,8 @@ export function styled<T>(
     children: componentChildren,
     ...componentProps
   }: StyledProps<T>) {
+    const { platform, preview } = usePlatform();
+
     const { classes, allClasses, isComponent } = withClassNames({
       className,
       twClassName,
@@ -53,6 +56,8 @@ export function styled<T>(
     const { hover, focus, active, ...handlers } = useInteraction({
       className: allClasses,
       isComponent,
+      platform,
+      preview,
       ...componentProps,
     });
 
@@ -70,6 +75,7 @@ export function styled<T>(
       componentProps,
       spreadProps,
       cssProps,
+      preview,
     });
 
     const children = childStyles

src/use-interaction.ts

@@ -12,6 +12,15 @@ export interface Interaction extends PressableProps {
   active: boolean;
   hover: boolean;
   focus: boolean;
+  onMouseDown?: PressableProps["onPressIn"];
+  onMouseUp?: PressableProps["onPressOut"];
+}
+
+export interface UseInteractionOptions extends PressableProps {
+  className?: string;
+  isComponent?: boolean;
+  platform: string;
+  preview: boolean;
 }
 
 export function useInteraction({
@@ -24,9 +33,10 @@ export function useInteraction({
   onHoverOut,
   onPressIn,
   onPressOut,
-  onPress,
   className = "",
-}: PressableProps & { className?: string; isComponent?: boolean } = {}) {
+  preview,
+  platform,
+}: UseInteractionOptions) {
   const [hover, setHover] = useState(false);
   const [focus, setFocus] = useState(false);
   const [active, setActive] = useState(false);
@@ -123,19 +133,6 @@ export function useInteraction({
     [disabled, onPressOut, setActive]
   );
 
-  const handlePress = useCallback(
-    (event: GestureResponderEvent) => {
-      if (disabled) {
-        return;
-      }
-
-      if (onPress) {
-        onPress(event);
-      }
-    },
-    [disabled, onPress, setActive]
-  );
-
   const interaction: Interaction = {
     active,
     hover,
@@ -148,7 +145,6 @@ export function useInteraction({
       onFocus: handleFocus,
       onHoverIn: handleHoverIn,
       onHoverOut: handleHoverOut,
-      onPress: handlePress,
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
     });
@@ -163,9 +159,13 @@ export function useInteraction({
       interaction.onHoverOut = handleHoverOut;
     }
     if (className.includes("active:")) {
-      interaction.onPress = handlePress;
       interaction.onPressIn = handlePressIn;
       interaction.onPressOut = handlePressOut;
+
+      if (platform === "web" && !preview) {
+        interaction.onMouseUp = handlePressOut;
+        interaction.onMouseDown = handlePressIn;
+      }
     }
   }
 

src/with-styled-props.ts

@@ -1,5 +1,4 @@
 import { StyleProp } from "react-native";
-import { usePlatform } from "./context/platform";
 import { AtRuleRecord } from "./types/common";
 import { UseTailwindCallback } from "./use-tailwind";
 
@@ -13,6 +12,7 @@ export interface WithStyledPropsOptions<S, T extends string> {
   tw: UseTailwindCallback<S>;
   spreadProps?: T[];
   cssProps?: T[];
+  preview: boolean;
 }
 
 export type WithStyledProps<S, T extends string> = Record<T, unknown> & {
@@ -28,8 +28,8 @@ export function withStyledProps<S, T extends string>({
   componentProps,
   spreadProps = [],
   cssProps = [],
+  preview,
 }: WithStyledPropsOptions<S, T>): WithStyledProps<S, T> {
-  const { preview } = usePlatform();
   const mainStyles = tw(classes, { flatten: false });
 
   const styledProps: Partial<Record<T, unknown>> = {};