@seed-design/lynx-react 0.7.1 → 0.8.0

package/src/components/Tabs/Tabs.utils.ts

@@ -36,6 +36,7 @@ export function getTabsOrderedItems<T extends { value: string }>(
 export function getTabsTriggerRects(
   values: string[],
   widths: Record<string, number>,
+  triggerGap = 0,
 ): Record<string, TabsLayoutRect> {
   const rects = Object.create(null) as Record<string, TabsLayoutRect>;
   let left = 0;
@@ -49,12 +50,61 @@ export function getTabsTriggerRects(
       continue;
     }
     if (hasCompletePrefix) rects[value] = { left, width };
-    left += width;
+    left += width + triggerGap;
   }
 
   return rects;
 }
 
+/**
+ * Trigger rectangles begin at the first trigger, so they exclude list-content
+ * padding. Scroll offsets are measured from the scroll content edge.
+ */
+export function getTabsScrollOffset({
+  scrollAlign,
+  currentOffset,
+  viewportWidth,
+  contentWidth,
+  contentInsetStart,
+  contentInsetEnd,
+  triggerRect,
+}: {
+  scrollAlign: "nearest" | "start" | "center" | "end";
+  currentOffset: number;
+  viewportWidth: number;
+  contentWidth: number;
+  contentInsetStart: number;
+  contentInsetEnd: number;
+  triggerRect: TabsLayoutRect;
+}): number {
+  const maxOffset = Math.max(0, contentWidth - viewportWidth);
+  const clampOffset = (offset: number) => Math.min(maxOffset, Math.max(0, offset));
+  const clampedCurrentOffset = clampOffset(currentOffset);
+  if (maxOffset === 0) return clampedCurrentOffset;
+
+  const triggerStart = contentInsetStart + triggerRect.left;
+  const triggerEnd = triggerStart + triggerRect.width;
+  if (scrollAlign === "nearest") {
+    // Visibility is the scroll-view's actual viewport. Insets provide the
+    // additional room only after a clipped trigger needs to move.
+    const visibleStart = clampedCurrentOffset;
+    const visibleEnd = clampedCurrentOffset + viewportWidth;
+
+    if (triggerStart >= visibleStart && triggerEnd <= visibleEnd) return clampedCurrentOffset;
+    return clampOffset(
+      triggerStart < visibleStart
+        ? triggerStart - contentInsetStart
+        : triggerEnd + contentInsetEnd - viewportWidth,
+    );
+  }
+
+  if (scrollAlign === "start") return clampOffset(triggerStart - contentInsetStart);
+  if (scrollAlign === "center") {
+    return clampOffset(triggerStart + triggerRect.width / 2 - viewportWidth / 2);
+  }
+  return clampOffset(triggerEnd + contentInsetEnd - viewportWidth);
+}
+
 export function areTabsTransitionsEnabled(
   values: string[],
   rects: Record<string, TabsLayoutRect>,

package/src/components/Tabs/index.ts

@@ -1,2 +1,18 @@
-export * from "./Tabs";
+export {
+  TabsCarousel,
+  TabsCarouselCamera,
+  TabsContent,
+  TabsIndicator,
+  TabsList,
+  TabsRoot,
+  TabsTrigger,
+  type TabsCarouselCameraProps,
+  type TabsCarouselProps,
+  type TabsContentProps,
+  type TabsIndicatorProps,
+  type TabsListProps,
+  type TabsRootProps,
+  type TabsTriggerProps,
+} from "./Tabs";
+
 export * as Tabs from "./Tabs.namespace";

package/src/components/index.ts

@@ -7,10 +7,17 @@ export * from "./BottomSheet";
 export * from "./Callout";
 export * from "./Checkbox";
 export * from "./Chip";
+export * from "./ChipTabs";
 export * from "./Count";
+export * from "./ContextualFloatingButton";
 export * from "./Divider";
 export * from "./Field";
+export * from "./FloatingActionButton";
 export * from "./Icon";
+export * from "./Dialog";
+export * from "./AlertDialog";
+export * from "./HelpBubble";
+export * from "./IdentityPlaceholder";
 export * from "./InputButton";
 export * from "./KeyboardAvoidingScrollView";
 export * from "./MannerTemp";
@@ -20,15 +27,22 @@ export * from "./NotificationBadge";
 export * from "./PageBanner";
 export * from "./List";
 export * from "./ProgressCircle";
+export * from "./QuantityPicker";
 export * from "./RadioGroup";
 export * from "./ReactionButton";
 export * from "./ScaleFeedback";
 export * from "./SegmentedControl";
+export * from "./Select";
 export * from "./SelectBox";
+export * from "./Skeleton";
+export * from "./Slider";
 export * from "./Stack";
 export * from "./Switch";
+export * from "./ScrollFog";
 export * from "./SwipeableMenuSheet";
 export * from "./Tabs";
 export * from "./TagGroup";
 export * from "./Text";
 export * from "./TextField";
+export * from "./AttachmentInput";
+export * from "./AttachmentDisplay";

package/src/hooks/useControllableState.ts

@@ -1,43 +1 @@
-import { useRef, useState } from "@lynx-js/react";
-import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
-
-export interface UseControllableStateProps<T> {
-  value?: T;
-  defaultValue: T;
-  onChange?: (value: T) => void;
-}
-
-/**
- * Controlled/uncontrolled state pattern for Lynx components.
- *
- * - When `value` is provided, the component is controlled.
- * - When `value` is `undefined`, the component manages its own state
- *   starting from `defaultValue`.
- * - `onChange` fires in both modes.
- */
-export function useControllableState<T>(
-  props: UseControllableStateProps<T>,
-): [T, (value: T) => void] {
-  const { value, defaultValue, onChange } = props;
-  const isControlled = value !== undefined;
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
-  const currentValue = isControlled ? value : uncontrolledValue;
-  const prevValueRef = useRef(currentValue);
-
-  const setValue = useMemoizedFn((nextValue: T) => {
-    if (isControlled) {
-      if (nextValue !== value) {
-        onChange?.(nextValue);
-      }
-      return;
-    }
-
-    setUncontrolledValue(nextValue);
-    if (nextValue !== prevValueRef.current) {
-      onChange?.(nextValue);
-      prevValueRef.current = nextValue;
-    }
-  });
-
-  return [currentValue, setValue];
-}
+export * from "@seed-design/lynx-react-use-controllable-state";

package/src/hooks/usePressTap.test.ts

@@ -60,8 +60,8 @@ describe("usePressTap", () => {
       expect(onTap).toHaveBeenCalledTimes(1);
     });
 
-    it("clears pressed when bindtap fires before touchend", () => {
-      const { result } = renderHook(() => usePressTap({ onTap: vi.fn() }));
+    it("clears pressed on tap without requiring a callback", () => {
+      const { result } = renderHook(() => usePressTap());
 
       act(() => {
         result.current.bindtouchstart(fakeEvent);
@@ -72,19 +72,31 @@ describe("usePressTap", () => {
 
       expect(result.current.pressed).toBe(false);
     });
+  });
 
-    it("can be omitted without error", () => {
-      const { result } = renderHook(() => usePressTap());
+  describe("disabled", () => {
+    it("clears an active press without restoring it when re-enabled", () => {
+      const { result, rerender } = renderHook(({ disabled }) => usePressTap({ disabled }), {
+        initialProps: { disabled: false },
+      });
+
+      act(() => {
+        result.current.bindtouchstart(fakeEvent);
+      });
+      expect(result.current.pressed).toBe(true);
 
-      expect(() => {
-        act(() => {
-          result.current.bindtap(fakeEvent);
-        });
-      }).not.toThrow();
+      rerender({ disabled: true });
+      expect(result.current.pressed).toBe(false);
+
+      rerender({ disabled: false });
+      expect(result.current.pressed).toBe(false);
+
+      act(() => {
+        result.current.bindtouchstart(fakeEvent);
+      });
+      expect(result.current.pressed).toBe(true);
     });
-  });
 
-  describe("disabled", () => {
     it("does not update pressed on bindtouchstart", () => {
       const { result } = renderHook(() => usePressTap({ disabled: true }));
 

package/src/hooks/usePressTap.ts

@@ -1,60 +1 @@
-import { useState } from "@lynx-js/react";
-import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
-import type { BaseTouchEvent, EventHandler, Target } from "@lynx-js/types";
-
-import type { LynxTouchProps } from "../types";
-
-type TouchHandler = EventHandler<BaseTouchEvent<Target>>;
-type PressStateHandler = TouchHandler & (() => void);
-
-export interface UsePressTapOptions {
-  disabled?: boolean;
-  onTap?: TouchHandler;
-  mainThreadOnTap?: LynxTouchProps["main-thread:bindtap"];
-}
-
-export interface UsePressTapReturn {
-  pressed: boolean;
-  bindtap: TouchHandler;
-  bindtouchstart: PressStateHandler;
-  bindtouchend: PressStateHandler;
-  bindtouchcancel: PressStateHandler;
-  "main-thread:bindtap"?: LynxTouchProps["main-thread:bindtap"];
-}
-
-/**
- * Hook that provides press/tap interaction state for Lynx elements.
- *
- * - Tracks `pressed` state via touch events.
- * - When `disabled` is true, the element cannot become active and no tap fires.
- * - If the element becomes disabled during a press, the active state is cleared.
- * - `main-thread:bindtap` is conditionally included (only when enabled and provided).
- */
-export function usePressTap(options: UsePressTapOptions = {}): UsePressTapReturn {
-  const { disabled = false, onTap, mainThreadOnTap } = options;
-  const [pressed, setPressed] = useState(false);
-
-  const press = useMemoizedFn(() => {
-    if (disabled) return;
-    setPressed(true);
-  });
-
-  const reset = useMemoizedFn(() => {
-    setPressed(false);
-  });
-
-  const handleTap = useMemoizedFn((...args: Parameters<TouchHandler>) => {
-    if (disabled) return;
-    setPressed(false);
-    onTap?.(...args);
-  });
-
-  return {
-    pressed,
-    bindtap: handleTap,
-    bindtouchstart: press,
-    bindtouchend: reset,
-    bindtouchcancel: reset,
-    ...(!disabled && mainThreadOnTap ? { "main-thread:bindtap": mainThreadOnTap } : {}),
-  };
-}
+export * from "@seed-design/lynx-react-use-press-tap";

package/src/types.ts

@@ -41,6 +41,7 @@ export interface LynxIconElementProps {
   className?: IntrinsicElements["image"]["className"];
   style?: LynxStyle;
   ref?: LynxMainThreadRef;
+  "disable-default-resize"?: boolean;
   "main-thread:binduiappear"?: IntrinsicElements["image"]["main-thread:binduiappear"];
 }