@seed-design/lynx-react 0.2.0-alpha.2 → 0.2.0

package/src/utils/styled.ts

@@ -0,0 +1,442 @@
+import type { CSSProperties } from "@lynx-js/types";
+import type {
+  Dimension,
+  FontSize,
+  FontWeight,
+  LineHeight,
+  Radius,
+  ScopedColorBanner,
+  ScopedColorBg,
+  ScopedColorFg,
+  ScopedColorPalette,
+  ScopedColorStroke,
+  SpacingX,
+  SpacingY,
+} from "@seed-design/lynx-css/vars";
+import { vars } from "@seed-design/lynx-css/vars";
+
+import { useSafeArea } from "../hooks/useSafeArea";
+
+export function handleColor(color: string | undefined) {
+  if (!color) {
+    return undefined;
+  }
+  const [type, value] = color.split(".");
+  // @ts-expect-error token category is derived from the public string contract.
+  return vars.$color[type]?.[value] ?? color;
+}
+
+export function handleDimension(dimension: number | string | undefined): string | undefined {
+  if (dimension == null) {
+    return undefined;
+  }
+
+  if (typeof dimension === "number") {
+    return `${dimension}px`;
+  }
+
+  if (dimension === "full") {
+    return "100%";
+  }
+
+  const [type, value] = dimension.split(".");
+
+  // @ts-expect-error token category is derived from the public string contract.
+  return vars.$dimension[dimension] ?? vars.$dimension[type]?.[value] ?? dimension;
+}
+
+export function resolveFlexValue(
+  value: number | string | boolean | undefined,
+): number | string | undefined {
+  if (value === true) return 1;
+  if (value === false) return 0;
+  return value;
+}
+
+function handleBorderWidth(width: 0 | 1 | (string & {}) | undefined) {
+  if (width == null) {
+    return undefined;
+  }
+
+  if (typeof width === "number") {
+    return `${width}px`;
+  }
+
+  return width;
+}
+
+export function handlePaddingWithSafeArea(
+  padding: string | 0 | undefined,
+  safeAreaInset: string,
+): string | undefined {
+  if (padding === "safeArea") {
+    return safeAreaInset;
+  }
+
+  return handleDimension(padding);
+}
+
+export function handleRadius(radius: string | 0 | undefined) {
+  if (radius == null) {
+    return undefined;
+  }
+  // @ts-expect-error token category is derived from the public string contract.
+  return vars.$radius[radius] ?? radius;
+}
+
+function handleDisplay(display: string | undefined) {
+  if (!display) {
+    return undefined;
+  }
+
+  return (
+    {
+      flex: "flex",
+      none: "none",
+    }[display] ?? display
+  );
+}
+
+function handleFlexDirection(flexDirection: string | undefined) {
+  if (!flexDirection) {
+    return undefined;
+  }
+
+  return (
+    {
+      row: "row",
+      column: "column",
+      rowReverse: "row-reverse",
+      columnReverse: "column-reverse",
+    }[flexDirection] ?? flexDirection
+  );
+}
+
+function handleJustifyContent(justifyContent: string | undefined) {
+  if (!justifyContent) {
+    return undefined;
+  }
+
+  return (
+    {
+      flexStart: "flex-start",
+      flexEnd: "flex-end",
+      center: "center",
+      spaceBetween: "space-between",
+      spaceAround: "space-around",
+    }[justifyContent] ?? justifyContent
+  );
+}
+
+function handleAlignItems(alignItems: string | undefined) {
+  if (!alignItems) {
+    return undefined;
+  }
+
+  return (
+    {
+      flexStart: "flex-start",
+      flexEnd: "flex-end",
+      center: "center",
+      stretch: "stretch",
+    }[alignItems] ?? alignItems
+  );
+}
+
+export function handleFontWeight(fontWeight: string | undefined) {
+  if (!fontWeight) {
+    return undefined;
+  }
+  // @ts-expect-error token category is derived from the public string contract.
+  return vars.$fontWeight[fontWeight] ?? fontWeight;
+}
+
+export function handleFontSize(size: string | undefined) {
+  if (!size) {
+    return undefined;
+  }
+  // @ts-expect-error token category is derived from the public string contract.
+  return vars.$fontSize[size] ?? size;
+}
+
+export function handleLineHeight(lineHeight: string | undefined) {
+  if (!lineHeight) {
+    return undefined;
+  }
+  // @ts-expect-error token category is derived from the public string contract.
+  return vars.$lineHeight[lineHeight] ?? lineHeight;
+}
+
+export interface StyleProps {
+  bg?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+  background?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+  color?: ScopedColorFg | ScopedColorPalette | (string & {});
+  borderColor?: ScopedColorStroke | ScopedColorPalette | (string & {});
+  borderWidth?: 0 | 1 | (string & {});
+  borderTopWidth?: 0 | 1 | (string & {});
+  borderRightWidth?: 0 | 1 | (string & {});
+  borderBottomWidth?: 0 | 1 | (string & {});
+  borderLeftWidth?: 0 | 1 | (string & {});
+  borderRadius?: Radius | 0 | (string & {});
+  borderTopLeftRadius?: Radius | 0 | (string & {});
+  borderTopRightRadius?: Radius | 0 | (string & {});
+  borderBottomRightRadius?: Radius | 0 | (string & {});
+  borderBottomLeftRadius?: Radius | 0 | (string & {});
+  width?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+  minWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+  maxWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+  height?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+  minHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+  maxHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+  top?: 0 | (string & {});
+  left?: 0 | (string & {});
+  right?: 0 | (string & {});
+  bottom?: 0 | (string & {});
+  padding?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  p?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingX?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  px?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingY?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  py?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingTop?:
+    | Dimension
+    | `spacingX.${SpacingX}`
+    | `spacingY.${SpacingY}`
+    | 0
+    | "safeArea"
+    | (string & {});
+  pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+  paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingBottom?:
+    | Dimension
+    | `spacingX.${SpacingX}`
+    | `spacingY.${SpacingY}`
+    | 0
+    | "safeArea"
+    | (string & {});
+  pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+  paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  display?: "flex" | "none" | (string & {});
+  position?: "relative" | "absolute" | "fixed" | (string & {});
+  overflowX?: "visible" | "hidden" | (string & {});
+  overflowY?: "visible" | "hidden" | (string & {});
+  zIndex?: CSSProperties["zIndex"];
+  flexGrow?: CSSProperties["flexGrow"] | boolean;
+  flexShrink?: CSSProperties["flexShrink"] | boolean;
+  flexDirection?: "row" | "column" | "rowReverse" | "columnReverse" | (string & {});
+  flexWrap?: "nowrap" | "wrap" | boolean;
+  justifyContent?:
+    | "flexStart"
+    | "flexEnd"
+    | "center"
+    | "spaceBetween"
+    | "spaceAround"
+    | (string & {});
+  justifySelf?: CSSProperties["justifySelf"];
+  alignItems?: "flexStart" | "flexEnd" | "center" | "stretch" | (string & {});
+  alignContent?: "flexStart" | "flexEnd" | "center" | "stretch" | (string & {});
+  alignSelf?: "flexStart" | "flexEnd" | "center" | "stretch" | (string & {});
+  gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+}
+
+interface UseStyleProps extends StyleProps {
+  style?: CSSProperties;
+}
+
+export function useStyleProps<T extends UseStyleProps>(
+  props: T,
+): {
+  style: CSSProperties;
+  restProps: Omit<T, keyof UseStyleProps>;
+} {
+  const {
+    background,
+    bg,
+    color,
+    borderColor,
+    borderWidth,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderBottomLeftRadius,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    bottom,
+    left,
+    right,
+    top,
+    display,
+    position,
+    overflowX,
+    overflowY,
+    zIndex,
+    flexGrow,
+    flexShrink,
+    flexDirection,
+    flexWrap,
+    justifyContent,
+    justifySelf,
+    alignItems,
+    alignContent,
+    alignSelf,
+    gap,
+    style,
+    ...restProps
+  } = props;
+  const { safeAreaInsetTop, safeAreaInsetBottom } = useSafeArea();
+
+  const backgroundValue = handleColor(background ?? bg);
+  const paddingValue = handleDimension(padding ?? p);
+  const paddingXValue = handleDimension(paddingX ?? px) ?? paddingValue;
+  const paddingYValue = handleDimension(paddingY ?? py) ?? paddingValue;
+  const paddingTopValue =
+    handlePaddingWithSafeArea(paddingTop ?? pt, safeAreaInsetTop) ?? paddingYValue;
+  const paddingRightValue = handleDimension(paddingRight ?? pr) ?? paddingXValue;
+  const paddingBottomValue =
+    handlePaddingWithSafeArea(paddingBottom ?? pb, safeAreaInsetBottom) ?? paddingYValue;
+  const paddingLeftValue = handleDimension(paddingLeft ?? pl) ?? paddingXValue;
+  const hasBorderStyle =
+    borderColor != null ||
+    borderWidth != null ||
+    borderTopWidth != null ||
+    borderRightWidth != null ||
+    borderBottomWidth != null ||
+    borderLeftWidth != null;
+
+  return {
+    style: {
+      background: backgroundValue,
+      color: handleColor(color),
+      borderStyle: hasBorderStyle ? "solid" : undefined,
+      borderColor: handleColor(borderColor),
+      borderWidth: handleBorderWidth(borderWidth),
+      borderTopWidth: handleBorderWidth(borderTopWidth),
+      borderRightWidth: handleBorderWidth(borderRightWidth),
+      borderBottomWidth: handleBorderWidth(borderBottomWidth),
+      borderLeftWidth: handleBorderWidth(borderLeftWidth),
+      borderRadius: handleRadius(borderRadius),
+      borderTopLeftRadius: handleRadius(borderTopLeftRadius),
+      borderTopRightRadius: handleRadius(borderTopRightRadius),
+      borderBottomRightRadius: handleRadius(borderBottomRightRadius),
+      borderBottomLeftRadius: handleRadius(borderBottomLeftRadius),
+      width: handleDimension(width),
+      minWidth: handleDimension(minWidth),
+      maxWidth: handleDimension(maxWidth),
+      height: handleDimension(height),
+      minHeight: handleDimension(minHeight),
+      maxHeight: handleDimension(maxHeight),
+      paddingTop: paddingTopValue,
+      paddingRight: paddingRightValue,
+      paddingBottom: paddingBottomValue,
+      paddingLeft: paddingLeftValue,
+      top: handleDimension(top),
+      left: handleDimension(left),
+      right: handleDimension(right),
+      bottom: handleDimension(bottom),
+      gap: handleDimension(gap),
+      display: handleDisplay(display),
+      position,
+      overflowX,
+      overflowY,
+      zIndex,
+      flexGrow: resolveFlexValue(flexGrow),
+      flexShrink: resolveFlexValue(flexShrink),
+      flexDirection: handleFlexDirection(flexDirection),
+      flexWrap: flexWrap === true ? "wrap" : flexWrap === false ? "nowrap" : flexWrap,
+      justifyContent: handleJustifyContent(justifyContent),
+      justifySelf,
+      alignItems: handleAlignItems(alignItems),
+      alignContent: handleAlignItems(alignContent),
+      alignSelf: handleAlignItems(alignSelf),
+      ...style,
+    } as CSSProperties,
+    restProps,
+  };
+}
+
+export type TextStyle =
+  | "screenTitle"
+  | "articleBody"
+  | "articleNote"
+  | "t1Regular"
+  | "t1Medium"
+  | "t1Bold"
+  | "t2Regular"
+  | "t2Medium"
+  | "t2Bold"
+  | "t3Regular"
+  | "t3Medium"
+  | "t3Bold"
+  | "t4Regular"
+  | "t4Medium"
+  | "t4Bold"
+  | "t5Regular"
+  | "t5Medium"
+  | "t5Bold"
+  | "t6Regular"
+  | "t6Medium"
+  | "t6Bold"
+  | "t7Regular"
+  | "t7Medium"
+  | "t7Bold"
+  | "t8Bold"
+  | "t9Bold"
+  | "t10Bold"
+  | "t1StaticRegular"
+  | "t1StaticMedium"
+  | "t1StaticBold"
+  | "t2StaticRegular"
+  | "t2StaticMedium"
+  | "t2StaticBold"
+  | "t3StaticRegular"
+  | "t3StaticMedium"
+  | "t3StaticBold"
+  | "t4StaticRegular"
+  | "t4StaticMedium"
+  | "t4StaticBold"
+  | "t5StaticRegular"
+  | "t5StaticMedium"
+  | "t5StaticBold"
+  | "t6StaticRegular"
+  | "t6StaticMedium"
+  | "t6StaticBold"
+  | "t7StaticRegular"
+  | "t7StaticMedium"
+  | "t7StaticBold"
+  | "t8StaticBold"
+  | "t9StaticBold"
+  | "t10StaticBold";
+
+export interface TextStyleProps {
+  color?: ScopedColorFg | ScopedColorPalette | (string & {});
+  fontSize?: FontSize | (string & {});
+  lineHeight?: LineHeight | (string & {});
+  fontWeight?: FontWeight;
+  textStyle?: TextStyle;
+  align?: "left" | "center" | "right";
+}

package/lib/components/ActionButton/index.js

@@ -1 +0,0 @@
-export { ActionButton } from "./ActionButton";

package/lib/components/BottomSheet/index.js

@@ -1,2 +0,0 @@
-export { BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, } from "./BottomSheet";
-export * as BottomSheet from "./BottomSheet.namespace";

package/lib/components/Checkbox/index.js

@@ -1,2 +0,0 @@
-export { CheckboxRoot, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxGroup, } from "./Checkbox";
-export * as Checkbox from "./Checkbox.namespace";

package/lib/components/ProgressCircle/index.js

@@ -1,2 +0,0 @@
-export { ProgressCircleRange, ProgressCircleRoot, } from "./ProgressCircle";
-export * as ProgressCircle from "./ProgressCircle.namespace";

package/lib/components/RadioGroup/index.js

@@ -1,2 +0,0 @@
-export { RadioGroupRoot, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, } from "./RadioGroup";
-export * as RadioGroup from "./RadioGroup.namespace";

package/lib/components/Switch/index.js

@@ -1,2 +0,0 @@
-export { SwitchRoot, SwitchControl, SwitchThumb, SwitchLabel, } from "./Switch";
-export * as Switch from "./Switch.namespace";

package/lib/components/TagGroup/index.js

@@ -1,2 +0,0 @@
-export { TagGroupRoot, TagGroupItem, TagGroupItemLabel, } from "./TagGroup";
-export * as TagGroup from "./TagGroup.namespace";

package/lib/components/index.js

@@ -1,7 +0,0 @@
-export * from "./ActionButton";
-export * from "./BottomSheet";
-export * from "./Checkbox";
-export * from "./ProgressCircle";
-export * from "./RadioGroup";
-export * from "./Switch";
-export * from "./TagGroup";

package/lib/hooks/index.js

@@ -1,3 +0,0 @@
-export * from "./use-controllable-state";
-export * from "./use-icon-color";
-export * from "./use-press-tap";

package/lib/hooks/use-controllable-state.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-controllable-state.d.ts","sourceRoot":"","sources":["../../src/hooks/use-controllable-state.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,yBAAyB,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,YAAY,EAAE,CAAC,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,EACpC,KAAK,EAAE,yBAAyB,CAAC,CAAC,CAAC,GAClC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAkBzB"}

package/lib/hooks/use-controllable-state.js

@@ -1,27 +0,0 @@
-import { useRef, useState } from "@lynx-js/react";
-import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
-/**
- * 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(props) {
-    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) => {
-        if (!isControlled) {
-            setUncontrolledValue(nextValue);
-        }
-        if (nextValue !== prevValueRef.current) {
-            onChange?.(nextValue);
-            prevValueRef.current = nextValue;
-        }
-    });
-    return [currentValue, setValue];
-}

package/lib/hooks/use-icon-color.d.ts

@@ -1,15 +0,0 @@
-import type { MainThread } from "@lynx-js/types";
-import type { DependencyList, RefObject } from "react";
-/**
- * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
- * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
- *
- * ```tsx
- * const { ref } = useIconColor([variant, disabled, loading]);
- * return cloneElement(iconChild, { ref });
- * ```
- */
-export declare function useIconColor(deps: DependencyList): {
-    ref: RefObject<MainThread.Element>;
-};
-//# sourceMappingURL=use-icon-color.d.ts.map

package/lib/hooks/use-icon-color.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-icon-color.d.ts","sourceRoot":"","sources":["../../src/hooks/use-icon-color.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AA4BvD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,cAAc,GAAG;IAClD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;CACpC,CASA"}

package/lib/hooks/use-icon-color.js

@@ -1,37 +0,0 @@
-import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
-// Lynx `<image>` 의 `tint-color` attribute 는 concrete color(hex/rgb) 만 받는다. CSS
-// `color: var(--seed-color-...)` 를 slot 에 걸면 `getComputedStyleProperty("color")` 가
-// resolved hex 를 돌려주므로 main-thread 에서 한번 읽어 `tint-color` 로 mirror 한다.
-function syncTintColor(ref) {
-    "main thread";
-    const el = ref.current;
-    if (!el)
-        return;
-    let color;
-    if (typeof el.getComputedStyleProperty === "function") {
-        color = el.getComputedStyleProperty("color");
-    }
-    else if (typeof el.getComputedCssProperty === "function") {
-        color = el.getComputedCssProperty("color");
-    }
-    if (color) {
-        el.setAttribute("tint-color", color);
-    }
-}
-/**
- * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
- * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
- *
- * ```tsx
- * const { ref } = useIconColor([variant, disabled, loading]);
- * return cloneElement(iconChild, { ref });
- * ```
- */
-export function useIconColor(deps) {
-    const ref = useMainThreadRef(null);
-    // deps 는 caller 가 책임.
-    useEffect(() => {
-        runOnMainThread(syncTintColor)(ref);
-    }, deps);
-    return { ref };
-}

package/lib/hooks/use-press-tap.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-press-tap.d.ts","sourceRoot":"","sources":["../../src/hooks/use-press-tap.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACzC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CA0B/E"}

package/lib/hooks/use-press-tap.js

@@ -1,35 +0,0 @@
-import { useState } from "@lynx-js/react";
-import { useMemoizedFn } from "@lynx-js/lynx-ui-common";
-/**
- * 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 = {}) {
-    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(() => {
-        if (disabled)
-            return;
-        onTap?.();
-    });
-    return {
-        pressed,
-        bindtap: handleTap,
-        bindtouchstart: press,
-        bindtouchend: reset,
-        bindtouchcancel: reset,
-        ...(!disabled && mainThreadOnTap ? { "main-thread:bindtap": mainThreadOnTap } : {}),
-    };
-}

package/lib/utils/index.js

@@ -1,4 +0,0 @@
-export * from "./create-slot-recipe-context";
-export * from "./get-seed-class-name";
-export * from "./resolve-recipe-token";
-export * from "./split-multiple-variants-props";

package/src/components/ActionButton/__tests__/ActionButton.test.tsx

@@ -1,35 +0,0 @@
-import "@testing-library/jest-dom";
-import { getQueriesForElement, render } from "@lynx-js/react/testing-library";
-import { describe, expect, it } from "vitest";
-
-import { ActionButton } from "../ActionButton";
-
-function getRenderedQueries() {
-  return getQueriesForElement(getRenderedRoot());
-}
-
-function getRenderedRoot() {
-  const root = elementTree.root;
-
-  if (!root) {
-    throw new Error("Expected Lynx render root to exist.");
-  }
-
-  return root;
-}
-
-describe("ActionButton", () => {
-  it("keeps the original label in the text slot while loading", () => {
-    render(<ActionButton loading>Submit</ActionButton>);
-
-    const { getByText } = getRenderedQueries();
-    const label = getByText("Submit");
-    const root = getRenderedRoot();
-
-    expect(label).toHaveClass("seed-action-button__text");
-    expect(label).toHaveClass("seed-action-button__text--size_medium-layout_withText");
-    expect(root.querySelector(".seed-action-button__content")).toBeInTheDocument();
-    expect(root.querySelector(".seed-action-button__loadingIndicator")).toBeInTheDocument();
-    expect(root.querySelector(".seed-progress-circle__root")).toBeInTheDocument();
-  });
-});