@seed-design/lynx-react 0.1.0

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,320 @@
+import * as React from "@lynx-js/react";
+import { isValidElement, type ReactElement } from "@lynx-js/react";
+import clsx from "clsx";
+
+import { radio } from "@seed-design/lynx-css/recipes/radio";
+import type { RadioVariantProps } from "@seed-design/lynx-css/recipes/radio";
+import { radiomark } from "@seed-design/lynx-css/recipes/radiomark";
+import type { RadiomarkVariantProps } from "@seed-design/lynx-css/recipes/radiomark";
+import { radioGroup } from "@seed-design/lynx-css/recipes/radio-group";
+
+import { useControllableState } from "../../hooks/useControllableState";
+import { usePressTap } from "../../hooks/usePressTap";
+import type {
+  LynxIconElementProps,
+  LynxStyledElementProps,
+  LynxTextRef,
+  LynxViewRef,
+} from "../../types";
+import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
+import { InternalIcon } from "../Icon/Icon";
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HiddenInput / name / required / invalid: Lynx에 native form 제출 모델이 없음
+ * - focus / focusVisible: Lynx에 키보드 포커스 개념이 없음
+ * - onChange (raw DOM event): 의미 없음. 선택 이벤트는 onValueChange로만 노출
+ *
+ * Indicator 는 `@karrotmarket/lynx-monochrome-icon` 의 monochrome icon 컴포넌트를
+ * 받는다. 내부에서 `<image tint-color=...>` 로 렌더되므로 `useIconColor` 훅이
+ * recipe 의 `color` 토큰을 `tint-color` 로 동기화한다.
+ */
+
+interface RadioGroupContextValue {
+  value: string | null;
+  setValue: (value: string) => void;
+  disabled: boolean;
+  radioVariantProps: RadioVariantProps;
+  radiomarkVariantProps: RadiomarkVariantProps;
+}
+
+const RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null);
+
+function useRadioGroupContext(consumer: string): RadioGroupContextValue {
+  const ctx = React.useContext(RadioGroupContext);
+  if (!ctx) {
+    throw new Error(`<${consumer}/> must be rendered inside <RadioGroupRoot/>.`);
+  }
+  return ctx;
+}
+
+interface RadioGroupItemContextValue {
+  value: string;
+  checked: boolean;
+  disabled: boolean;
+  pressed: boolean;
+  select: () => void;
+}
+
+const RadioGroupItemContext = React.createContext<RadioGroupItemContextValue | null>(null);
+
+function useRadioGroupItemContext(consumer: string): RadioGroupItemContextValue {
+  const ctx = React.useContext(RadioGroupItemContext);
+  if (!ctx) {
+    throw new Error(`<${consumer}/> must be rendered inside <RadioGroupItem/>.`);
+  }
+  return ctx;
+}
+
+interface RadiomarkControlContextValue {
+  iconClassName: string;
+  radiomarkVariantProps: RadiomarkVariantProps;
+}
+
+const RadiomarkControlContext = React.createContext<RadiomarkControlContextValue | null>(null);
+
+function useRadiomarkControlContext(consumer: string): RadiomarkControlContextValue {
+  const ctx = React.useContext(RadiomarkControlContext);
+  if (!ctx) {
+    throw new Error(`<${consumer}/> must be rendered inside <RadioGroupItemControl/>.`);
+  }
+  return ctx;
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupRootProps
+  extends RadioVariantProps,
+    Omit<RadiomarkVariantProps, "size" | "checked" | "disabled">,
+    LynxStyledElementProps {
+  value?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  onValueChange?: (value: string) => void;
+}
+
+export const RadioGroupRoot = React.forwardRef<unknown, RadioGroupRootProps>((props, ref) => {
+  const {
+    children,
+    className,
+    value: valueProp,
+    defaultValue,
+    disabled = false,
+    onValueChange,
+    ...restProps
+  } = props;
+  const [{ radio: radioVariantProps, radiomark: radiomarkVariantProps }, nativeProps] =
+    splitMultipleVariantsProps(restProps, { radio, radiomark });
+
+  const handleChange = React.useCallback(
+    (next: string | null) => {
+      if (next !== null) onValueChange?.(next);
+    },
+    [onValueChange],
+  );
+
+  const [value, setValueInternal] = useControllableState<string | null>({
+    value: valueProp !== undefined ? valueProp : undefined,
+    defaultValue: defaultValue ?? null,
+    onChange: handleChange,
+  });
+
+  const setValue = React.useCallback(
+    (next: string) => {
+      setValueInternal(next);
+    },
+    [setValueInternal],
+  );
+
+  const rootClassName = radioGroup().root;
+
+  const contextValue = React.useMemo<RadioGroupContextValue>(
+    () => ({
+      value,
+      setValue,
+      disabled,
+      radioVariantProps,
+      radiomarkVariantProps,
+    }),
+    [value, setValue, disabled, radioVariantProps, radiomarkVariantProps],
+  );
+
+  return (
+    <RadioGroupContext.Provider value={contextValue}>
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(rootClassName, className)}
+        {...nativeProps}
+      >
+        {children}
+      </view>
+    </RadioGroupContext.Provider>
+  );
+});
+RadioGroupRoot.displayName = "RadioGroupRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemProps extends LynxStyledElementProps {
+  value: string;
+  disabled?: boolean;
+}
+
+export const RadioGroupItem = React.forwardRef<unknown, RadioGroupItemProps>((props, ref) => {
+  const {
+    value: itemValue,
+    disabled: itemDisabled = false,
+    children,
+    className,
+    ...nativeProps
+  } = props;
+  const groupContext = useRadioGroupContext("RadioGroupItem");
+
+  const disabled = groupContext.disabled || itemDisabled;
+  const checked = groupContext.value === itemValue;
+  const select = React.useCallback(() => {
+    if (checked) return;
+    groupContext.setValue(itemValue);
+  }, [checked, groupContext, itemValue]);
+
+  const { pressed, ...pressHandlers } = usePressTap({
+    disabled,
+    onTap: select,
+  });
+
+  const rootClassName = radio({ ...groupContext.radioVariantProps, disabled }).root;
+
+  const itemContextValue = React.useMemo<RadioGroupItemContextValue>(
+    () => ({
+      value: itemValue,
+      checked,
+      disabled,
+      pressed,
+      select,
+    }),
+    [itemValue, checked, disabled, pressed, select],
+  );
+
+  return (
+    <RadioGroupItemContext.Provider value={itemContextValue}>
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(rootClassName, className)}
+        {...pressHandlers}
+        {...nativeProps}
+      >
+        {children}
+      </view>
+    </RadioGroupItemContext.Provider>
+  );
+});
+RadioGroupItem.displayName = "RadioGroupItem";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemControlProps
+  extends Pick<RadiomarkVariantProps, "tone">,
+    LynxStyledElementProps {}
+
+export const RadioGroupItemControl = React.forwardRef<unknown, RadioGroupItemControlProps>(
+  (props, ref) => {
+    const [variantProps, restProps] = radiomark.splitVariantProps(props);
+    const { children, className, ...nativeProps } = restProps;
+    const groupContext = useRadioGroupContext("RadioGroupItemControl");
+    const itemContext = useRadioGroupItemContext("RadioGroupItemControl");
+    const radiomarkVariantProps: RadiomarkVariantProps = {
+      ...groupContext.radiomarkVariantProps,
+      ...variantProps,
+      checked: itemContext.checked,
+      disabled: itemContext.disabled,
+      pressed: itemContext.pressed,
+    };
+    const classes = radiomark(radiomarkVariantProps);
+
+    return (
+      <RadiomarkControlContext.Provider
+        value={{ iconClassName: classes.icon, radiomarkVariantProps }}
+      >
+        <view
+          {...(ref ? { ref: ref as LynxViewRef } : {})}
+          className={clsx(classes.root, className)}
+          {...nativeProps}
+        >
+          {children}
+        </view>
+      </RadiomarkControlContext.Provider>
+    );
+  },
+);
+RadioGroupItemControl.displayName = "RadioGroupItemControl";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemIndicatorProps
+  extends Pick<LynxStyledElementProps, "className" | "style"> {
+  /** Icon rendered when not checked. Optional — falls back to default `<view>` dot when omitted. */
+  unchecked?: ReactElement<LynxIconElementProps>;
+  /** Icon rendered when the item is checked. Optional — falls back to default `<view>` dot when omitted. */
+  checked?: ReactElement<LynxIconElementProps>;
+}
+
+export function RadioGroupItemIndicator(props: RadioGroupItemIndicatorProps) {
+  const { unchecked, checked: checkedIcon, className, style } = props;
+  const itemContext = useRadioGroupItemContext("RadioGroupItemIndicator");
+  const { iconClassName, radiomarkVariantProps } =
+    useRadiomarkControlContext("RadioGroupItemIndicator");
+
+  const icon = itemContext.checked ? checkedIcon : unchecked;
+
+  // 사용자가 custom icon 을 주지 않으면 default `<view>` 로 동그란 점을 그린다.
+  // radiomark.icon recipe 가 borderRadius/backgroundColor/width/height 를 적용해
+  // 라디오의 inner dot 모양을 재현. 웹 RadioGroup 의 default `<svg><circle/></svg>` 동작과 일치.
+  if (!icon || !isValidElement<LynxIconElementProps>(icon)) {
+    return <view className={clsx(iconClassName, className)} style={style} />;
+  }
+
+  return (
+    <InternalIcon
+      icon={icon}
+      className={clsx(iconClassName, className)}
+      style={style}
+      deps={[
+        itemContext.checked,
+        itemContext.disabled,
+        itemContext.pressed,
+        radiomarkVariantProps.tone,
+        radiomarkVariantProps.size,
+      ]}
+    />
+  );
+}
+RadioGroupItemIndicator.displayName = "RadioGroupItemIndicator";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemLabelProps extends LynxStyledElementProps {}
+
+export const RadioGroupItemLabel = React.forwardRef<unknown, RadioGroupItemLabelProps>(
+  (props, ref) => {
+    const { children, className, ...nativeProps } = props;
+    const itemContext = useRadioGroupItemContext("RadioGroupItemLabel");
+    const groupContext = useRadioGroupContext("RadioGroupItemLabel");
+    const labelClassName = radio({
+      ...groupContext.radioVariantProps,
+      disabled: itemContext.disabled,
+    }).label;
+
+    return (
+      <text
+        {...(ref ? { ref: ref as LynxTextRef } : {})}
+        className={clsx(labelClassName, className)}
+        {...nativeProps}
+      >
+        {children}
+      </text>
+    );
+  },
+);
+RadioGroupItemLabel.displayName = "RadioGroupItemLabel";

package/src/components/RadioGroup/index.ts

@@ -0,0 +1,14 @@
+export {
+  RadioGroupRoot,
+  RadioGroupItem,
+  RadioGroupItemControl,
+  RadioGroupItemIndicator,
+  RadioGroupItemLabel,
+  type RadioGroupRootProps,
+  type RadioGroupItemProps,
+  type RadioGroupItemControlProps,
+  type RadioGroupItemIndicatorProps,
+  type RadioGroupItemLabelProps,
+} from "./RadioGroup";
+
+export * as RadioGroup from "./RadioGroup.namespace";

package/src/components/Stack/Stack.tsx

@@ -0,0 +1,97 @@
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+
+import type { LynxPressableProps, LynxStyledElementProps, LynxViewRef } from "../../types";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
+
+type StackStyleProps =
+  | "display"
+  | "flexDirection"
+  | "alignItems"
+  | "justifyContent"
+  | "flexWrap"
+  | "flexGrow"
+  | "flexShrink";
+
+interface StackBaseProps extends StyleProps, LynxStyledElementProps, LynxPressableProps {
+  bindtouchstart?: () => void;
+  bindtouchend?: () => void;
+  bindtouchcancel?: () => void;
+}
+
+/**
+ * @platform Lynx
+ *
+ * `VStack`과 `HStack`은 native `<view>`를 직접 렌더링하고 stack 방향에 필요한
+ * 최소 flex style만 적용합니다. 앱 코드에서 성능에 민감한 반복 레이아웃을 만들
+ * 때는 native `<view>`/`<text>`와 Tailwind utility className을 우선 고려하세요.
+ * 패키지 컴포넌트 내부에서는 `Box`를 합성하지 않고 native tag와 recipe className을
+ * 사용해 primitive 컴포넌트 비용이 누적되지 않도록 합니다.
+ */
+export interface StackProps extends Omit<StackBaseProps, StackStyleProps> {
+  align?: StackBaseProps["alignItems"];
+  justify?: StackBaseProps["justifyContent"];
+  wrap?: StackBaseProps["flexWrap"];
+  grow?: StackBaseProps["flexGrow"];
+  shrink?: StackBaseProps["flexShrink"];
+}
+
+export interface VStackProps extends StackProps {}
+
+export interface HStackProps extends StackProps {}
+
+function getStackProps(props: StackProps) {
+  const { align, justify, wrap, grow, shrink, ...restProps } = props;
+
+  return {
+    alignItems: align,
+    justifyContent: justify,
+    flexWrap: wrap,
+    flexGrow: grow,
+    flexShrink: shrink,
+    ...restProps,
+  };
+}
+
+function useStackStyleProps(props: StackProps, flexDirection: "column" | "row") {
+  return useStyleProps({
+    display: "flex",
+    flexDirection,
+    ...getStackProps(props),
+  });
+}
+
+function renderStackView(
+  stackStyleProps: ReturnType<typeof useStackStyleProps>,
+  ref: React.ForwardedRef<unknown>,
+) {
+  const { style, restProps } = stackStyleProps;
+  const { children, className, ...nativeProps } = restProps;
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...nativeProps}
+      className={clsx(className)}
+      style={style}
+    >
+      {children}
+    </view>
+  );
+}
+
+export const VStack = React.forwardRef<unknown, VStackProps>((props, ref) => {
+  const stackStyleProps = useStackStyleProps(props, "column");
+
+  return renderStackView(stackStyleProps, ref);
+});
+
+VStack.displayName = "VStack";
+
+export const HStack = React.forwardRef<unknown, HStackProps>((props, ref) => {
+  const stackStyleProps = useStackStyleProps(props, "row");
+
+  return renderStackView(stackStyleProps, ref);
+});
+
+HStack.displayName = "HStack";

package/src/components/Stack/index.ts

@@ -0,0 +1 @@
+export { HStack, type HStackProps, type StackProps, VStack, type VStackProps } from "./Stack";

package/src/components/Switch/Switch.namespace.ts

@@ -0,0 +1,10 @@
+export {
+  SwitchControl as Control,
+  SwitchLabel as Label,
+  SwitchRoot as Root,
+  SwitchThumb as Thumb,
+  type SwitchControlProps as ControlProps,
+  type SwitchLabelProps as LabelProps,
+  type SwitchRootProps as RootProps,
+  type SwitchThumbProps as ThumbProps,
+} from "./Switch";

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,200 @@
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+
+import { switchStyle } from "@seed-design/lynx-css/recipes/switch";
+import type { SwitchVariantProps } from "@seed-design/lynx-css/recipes/switch";
+import { switchmark } from "@seed-design/lynx-css/recipes/switchmark";
+import type { SwitchmarkVariantProps } from "@seed-design/lynx-css/recipes/switchmark";
+
+import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
+import { useControllableState } from "../../hooks/useControllableState";
+import { usePressTap } from "../../hooks/usePressTap";
+import type { LynxStyledElementProps, LynxTextRef, LynxViewRef } from "../../types";
+
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HiddenInput / name / value / required / invalid: Lynx에 native form 제출 모델이 없음
+ * - focus / focusVisible: Lynx에 키보드 포커스 개념이 없음
+ * - onChange (raw DOM event): 의미 없음. 토글 이벤트는 onCheckedChange로만 노출
+ *
+ * 추후 rootage 토큰 확장 시 추가 예정:
+ * - pressed boolean variant: switchmark rootage spec 에 pressed 상태가 추가되면
+ *   switchmark recipe 와 Switch 컴포넌트에 boolean variant 로 노출.
+ */
+
+interface SwitchContextValue {
+  checked: boolean;
+  disabled: boolean;
+  switchVariantProps: SwitchVariantProps;
+  switchmarkVariantProps: SwitchmarkVariantProps;
+  toggle: () => void;
+}
+
+const SwitchContext = React.createContext<SwitchContextValue | null>(null);
+
+function useSwitchContext(consumer: string): SwitchContextValue {
+  const ctx = React.useContext(SwitchContext);
+  if (!ctx) {
+    throw new Error(`<${consumer}/> must be rendered inside <SwitchRoot/>.`);
+  }
+  return ctx;
+}
+
+interface SwitchmarkControlContextValue {
+  thumbClassName: string;
+  switchmarkVariantProps: SwitchmarkVariantProps;
+}
+
+const SwitchmarkControlContext = React.createContext<SwitchmarkControlContextValue | null>(null);
+
+function useSwitchmarkControlContext(consumer: string): SwitchmarkControlContextValue {
+  const ctx = React.useContext(SwitchmarkControlContext);
+  if (!ctx) {
+    throw new Error(`<${consumer}/> must be rendered inside <SwitchControl/>.`);
+  }
+  return ctx;
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwitchRootProps
+  extends SwitchVariantProps,
+    Omit<SwitchmarkVariantProps, "size">,
+    LynxStyledElementProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  disabled?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export const SwitchRoot = React.forwardRef<unknown, SwitchRootProps>((props, ref) => {
+  const {
+    children,
+    className,
+    checked: checkedProp,
+    defaultChecked = false,
+    disabled = false,
+    onCheckedChange,
+    ...restProps
+  } = props;
+  const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, nativeProps] =
+    splitMultipleVariantsProps(restProps, { switch: switchStyle, switchmark });
+
+  const [checked, setChecked] = useControllableState({
+    value: checkedProp,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange,
+  });
+
+  const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
+
+  const { pressed: _pressed, ...pressHandlers } = usePressTap({
+    disabled,
+    onTap: toggle,
+  });
+
+  const rootClassName = switchStyle({ ...switchVariantProps, disabled }).root;
+
+  const contextValue = React.useMemo<SwitchContextValue>(
+    () => ({
+      checked,
+      disabled,
+      switchVariantProps,
+      switchmarkVariantProps,
+      toggle,
+    }),
+    [checked, disabled, switchVariantProps, switchmarkVariantProps, toggle],
+  );
+
+  return (
+    <SwitchContext.Provider value={contextValue}>
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(rootClassName, className)}
+        {...pressHandlers}
+        {...nativeProps}
+      >
+        {children}
+      </view>
+    </SwitchContext.Provider>
+  );
+});
+SwitchRoot.displayName = "SwitchRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwitchControlProps
+  extends Pick<SwitchmarkVariantProps, "tone" | "size">,
+    LynxStyledElementProps {}
+
+export const SwitchControl = React.forwardRef<unknown, SwitchControlProps>((props, ref) => {
+  const [variantProps, restProps] = switchmark.splitVariantProps(props);
+  const { children, className, ...nativeProps } = restProps;
+  const context = useSwitchContext("SwitchControl");
+  const switchmarkVariantProps: SwitchmarkVariantProps = {
+    ...context.switchmarkVariantProps,
+    ...variantProps,
+    checked: context.checked,
+    disabled: context.disabled,
+  };
+  const classes = switchmark(switchmarkVariantProps);
+
+  return (
+    <SwitchmarkControlContext.Provider
+      value={{ thumbClassName: classes.thumb, switchmarkVariantProps }}
+    >
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(classes.root, className)}
+        {...nativeProps}
+      >
+        {children}
+      </view>
+    </SwitchmarkControlContext.Provider>
+  );
+});
+SwitchControl.displayName = "SwitchControl";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwitchThumbProps extends Pick<LynxStyledElementProps, "className" | "style"> {}
+
+export const SwitchThumb = React.forwardRef<unknown, SwitchThumbProps>((props, ref) => {
+  const { className, ...nativeProps } = props;
+  const { thumbClassName } = useSwitchmarkControlContext("SwitchThumb");
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      className={clsx(thumbClassName, className)}
+      {...nativeProps}
+    />
+  );
+});
+SwitchThumb.displayName = "SwitchThumb";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SwitchLabelProps extends LynxStyledElementProps {}
+
+export const SwitchLabel = React.forwardRef<unknown, SwitchLabelProps>((props, ref) => {
+  const { children, className, ...nativeProps } = props;
+  const context = useSwitchContext("SwitchLabel");
+  const labelClassName = switchStyle({
+    ...context.switchVariantProps,
+    disabled: context.disabled,
+  }).label;
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      className={clsx(labelClassName, className)}
+      {...nativeProps}
+    >
+      {children}
+    </text>
+  );
+});
+SwitchLabel.displayName = "SwitchLabel";

package/src/components/Switch/index.ts

@@ -0,0 +1,12 @@
+export {
+  SwitchRoot,
+  SwitchControl,
+  SwitchThumb,
+  SwitchLabel,
+  type SwitchRootProps,
+  type SwitchControlProps,
+  type SwitchThumbProps,
+  type SwitchLabelProps,
+} from "./Switch";
+
+export * as Switch from "./Switch.namespace";

package/src/components/TagGroup/TagGroup.namespace.ts

@@ -0,0 +1,8 @@
+export {
+  TagGroupItem as Item,
+  TagGroupItemLabel as ItemLabel,
+  TagGroupRoot as Root,
+  type TagGroupItemLabelProps as ItemLabelProps,
+  type TagGroupItemProps as ItemProps,
+  type TagGroupRootProps as RootProps,
+} from "./TagGroup";