@seed-design/lynx-react 0.1.0

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,282 @@
+import * as React from "@lynx-js/react";
+import { isValidElement, type ReactElement } from "@lynx-js/react";
+import clsx from "clsx";
+
+import { checkbox } from "@seed-design/lynx-css/recipes/checkbox";
+import type { CheckboxVariantProps } from "@seed-design/lynx-css/recipes/checkbox";
+import { checkmark } from "@seed-design/lynx-css/recipes/checkmark";
+import type { CheckmarkVariantProps } from "@seed-design/lynx-css/recipes/checkmark";
+import { checkboxGroup } from "@seed-design/lynx-css/recipes/checkbox-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 / value / required / invalid: Lynx에 native form 제출 모델이 없음
+ * - focus / focusVisible: Lynx에 키보드 포커스 개념이 없음
+ * - onChange (raw DOM event): 의미 없음. 토글 이벤트는 onCheckedChange로만 노출
+ * - weight="default" | "stronger" 호환 매핑: Lynx 신규 컴포넌트이므로 처음부터 "regular" | "bold" 만 노출
+ *
+ * Indicator 는 `@karrotmarket/lynx-monochrome-icon` 의 monochrome icon 컴포넌트를
+ * 받는다. 내부에서 `<image tint-color=...>` 로 렌더되므로 `useIconColor` 훅이
+ * recipe 의 `color` 토큰을 `tint-color` 로 동기화한다. raw SVG 주입은 Lynx 범위 밖.
+ */
+
+interface CheckboxContextValue {
+  checked: boolean;
+  indeterminate: boolean;
+  disabled: boolean;
+  pressed: boolean;
+  checkboxVariantProps: CheckboxVariantProps;
+  checkmarkVariantProps: CheckmarkVariantProps;
+  toggle: () => void;
+}
+
+const CheckboxContext = React.createContext<CheckboxContextValue | null>(null);
+
+function useCheckboxContext(consumer: string): CheckboxContextValue {
+  const ctx = React.useContext(CheckboxContext);
+  if (!ctx) {
+    throw new Error(`<${consumer}/> must be rendered inside <CheckboxRoot/>.`);
+  }
+  return ctx;
+}
+
+interface CheckmarkControlContextValue {
+  iconClassName: string;
+  checkmarkVariantProps: CheckmarkVariantProps;
+}
+
+const CheckmarkControlContext = React.createContext<CheckmarkControlContextValue | null>(null);
+
+function useCheckmarkControlContext(consumer: string): CheckmarkControlContextValue {
+  const ctx = React.useContext(CheckmarkControlContext);
+  if (!ctx) {
+    throw new Error(`<${consumer}/> must be rendered inside <CheckboxControl/>.`);
+  }
+  return ctx;
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxRootProps
+  extends CheckboxVariantProps,
+    Omit<CheckmarkVariantProps, "size" | "checked" | "disabled" | "indeterminate">,
+    LynxStyledElementProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export const CheckboxRoot = React.forwardRef<unknown, CheckboxRootProps>((props, ref) => {
+  const {
+    children,
+    className,
+    checked: checkedProp,
+    defaultChecked = false,
+    indeterminate = false,
+    disabled = false,
+    onCheckedChange,
+    ...restProps
+  } = props;
+  const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, nativeProps] =
+    splitMultipleVariantsProps(restProps, { checkbox, checkmark });
+
+  const [checked, setChecked] = useControllableState({
+    value: checkedProp,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange,
+  });
+
+  const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
+
+  const { pressed, ...pressHandlers } = usePressTap({
+    disabled,
+    onTap: toggle,
+  });
+
+  const rootClassName = checkbox({ ...checkboxVariantProps, disabled }).root;
+
+  const contextValue = React.useMemo<CheckboxContextValue>(
+    () => ({
+      checked,
+      indeterminate,
+      disabled,
+      pressed,
+      checkboxVariantProps,
+      checkmarkVariantProps,
+      toggle,
+    }),
+    [
+      checked,
+      indeterminate,
+      disabled,
+      pressed,
+      checkboxVariantProps,
+      checkmarkVariantProps,
+      toggle,
+    ],
+  );
+
+  return (
+    <CheckboxContext.Provider value={contextValue}>
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(rootClassName, className)}
+        {...pressHandlers}
+        {...nativeProps}
+      >
+        {children}
+      </view>
+    </CheckboxContext.Provider>
+  );
+});
+CheckboxRoot.displayName = "CheckboxRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxControlProps
+  extends Pick<CheckmarkVariantProps, "tone" | "variant" | "size">,
+    LynxStyledElementProps {}
+
+export const CheckboxControl = React.forwardRef<unknown, CheckboxControlProps>((props, ref) => {
+  const [variantProps, restProps] = checkmark.splitVariantProps(props);
+  const { children, className, ...nativeProps } = restProps;
+  const context = useCheckboxContext("CheckboxControl");
+  const checkmarkVariantProps: CheckmarkVariantProps = {
+    ...context.checkmarkVariantProps,
+    ...variantProps,
+    checked: context.checked,
+    disabled: context.disabled,
+    indeterminate: context.indeterminate,
+    pressed: context.pressed,
+  };
+  const classes = checkmark(checkmarkVariantProps);
+
+  return (
+    <CheckmarkControlContext.Provider
+      value={{ iconClassName: classes.icon, checkmarkVariantProps }}
+    >
+      <view
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(classes.root, className)}
+        {...nativeProps}
+      >
+        {children}
+      </view>
+    </CheckmarkControlContext.Provider>
+  );
+});
+CheckboxControl.displayName = "CheckboxControl";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxIndicatorProps
+  extends Pick<LynxStyledElementProps, "className" | "style"> {
+  /** Icon rendered when neither checked nor indeterminate. Optional. */
+  unchecked?: ReactElement<LynxIconElementProps>;
+  /** Icon rendered when `checked=true` and `indeterminate=false`. */
+  checked: ReactElement<LynxIconElementProps>;
+  /** Icon rendered when `indeterminate=true`. */
+  indeterminate?: ReactElement<LynxIconElementProps>;
+}
+
+export function CheckboxIndicator(props: CheckboxIndicatorProps) {
+  const {
+    unchecked,
+    checked: checkedIcon,
+    indeterminate: indeterminateIcon,
+    className,
+    style,
+  } = props;
+  const context = useCheckboxContext("CheckboxIndicator");
+  const { iconClassName, checkmarkVariantProps } = useCheckmarkControlContext("CheckboxIndicator");
+
+  if (process.env.NODE_ENV !== "production" && context.indeterminate && !indeterminateIcon) {
+    console.warn(
+      "[seed-design] CheckboxIndicator: `indeterminate` prop must be provided when the checkbox is in an indeterminate state.",
+    );
+  }
+
+  const icon = context.indeterminate
+    ? indeterminateIcon
+    : context.checked
+      ? checkedIcon
+      : unchecked;
+  if (!icon || !isValidElement<LynxIconElementProps>(icon)) return null;
+
+  return (
+    <InternalIcon
+      icon={icon}
+      className={clsx(iconClassName, className)}
+      style={style}
+      deps={[
+        context.checked,
+        context.indeterminate,
+        context.disabled,
+        context.pressed,
+        checkmarkVariantProps.tone,
+        checkmarkVariantProps.variant,
+        checkmarkVariantProps.size,
+      ]}
+    />
+  );
+}
+CheckboxIndicator.displayName = "CheckboxIndicator";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxLabelProps extends LynxStyledElementProps {}
+
+export const CheckboxLabel = React.forwardRef<unknown, CheckboxLabelProps>((props, ref) => {
+  const { children, className, ...nativeProps } = props;
+  const context = useCheckboxContext("CheckboxLabel");
+  const labelClassName = checkbox({
+    ...context.checkboxVariantProps,
+    disabled: context.disabled,
+  }).label;
+
+  return (
+    <text
+      {...(ref ? { ref: ref as LynxTextRef } : {})}
+      className={clsx(labelClassName, className)}
+      {...nativeProps}
+    >
+      {children}
+    </text>
+  );
+});
+CheckboxLabel.displayName = "CheckboxLabel";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxGroupProps extends LynxStyledElementProps {}
+
+export const CheckboxGroup = React.forwardRef<unknown, CheckboxGroupProps>((props, ref) => {
+  const { children, className, ...nativeProps } = props;
+  const classes = checkboxGroup();
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      className={clsx(classes.root, className)}
+      {...nativeProps}
+    >
+      {children}
+    </view>
+  );
+});
+CheckboxGroup.displayName = "CheckboxGroup";

package/src/components/Checkbox/index.ts

@@ -0,0 +1,14 @@
+export {
+  CheckboxRoot,
+  CheckboxControl,
+  CheckboxIndicator,
+  CheckboxLabel,
+  CheckboxGroup,
+  type CheckboxRootProps,
+  type CheckboxControlProps,
+  type CheckboxIndicatorProps,
+  type CheckboxLabelProps,
+  type CheckboxGroupProps,
+} from "./Checkbox";
+
+export * as Checkbox from "./Checkbox.namespace";

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,265 @@
+import { useMainThreadRef } from "@lynx-js/react";
+import type { CSSProperties, MainThread } from "@lynx-js/types";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import {
+  cloneElement,
+  isValidElement,
+  type DependencyList,
+  type ReactElement,
+} from "@lynx-js/react";
+
+import { useIconColor } from "../../hooks/useIconColor";
+import type { LynxIconElementProps, LynxStyledElementProps, LynxViewRef } from "../../types";
+import { handleColor, handleDimension, type StyleProps } from "../../utils/styled";
+
+export type IconSlotName = "icon" | "prefixIcon" | "suffixIcon";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+interface IconSlotContextValue {
+  classNames?: Partial<Record<IconSlotName, string>>;
+  deps?: DependencyList;
+}
+
+const IconSlotContext = React.createContext<IconSlotContextValue | null>(null);
+
+interface IconRequiredContextValue {
+  register: () => void;
+  unregister: () => void;
+}
+
+const IconRequiredContext = React.createContext<IconRequiredContextValue | null>(null);
+
+export function IconRequired({
+  children,
+  enabled,
+}: {
+  children: React.ReactNode;
+  enabled: boolean;
+}) {
+  const registeredCountRef = React.useRef(0);
+  const parentContext = React.useContext(IconRequiredContext);
+
+  const register = React.useCallback(() => {
+    registeredCountRef.current += 1;
+
+    if (process.env.NODE_ENV !== "production" && registeredCountRef.current > 1) {
+      throw new Error(
+        "Icon-only Component must render only one <Icon /> under children. Check if you are rendering multiple <Icon />.",
+      );
+    }
+  }, []);
+
+  const unregister = React.useCallback(() => {
+    registeredCountRef.current = Math.max(0, registeredCountRef.current - 1);
+  }, []);
+
+  React.useLayoutEffect(() => {
+    if (!enabled) return;
+
+    if (process.env.NODE_ENV !== "production") {
+      if (parentContext) {
+        throw new Error(
+          "Icon-only Component must not be nested within another Icon-Only. Check if you are using Icon-Only inside another Icon-Only.",
+        );
+      }
+      if (registeredCountRef.current === 0) {
+        throw new Error(
+          "Icon-only Component must render <Icon /> as a child. Check if you are using raw icon element instead of <Icon icon={} />.",
+        );
+      }
+    }
+  }, [enabled, parentContext]);
+
+  const value = React.useMemo<IconRequiredContextValue | null>(() => {
+    if (!enabled) return parentContext ?? null;
+    return { register, unregister };
+  }, [enabled, parentContext, register, unregister]);
+
+  return <IconRequiredContext.Provider value={value}>{children}</IconRequiredContext.Provider>;
+}
+
+export function IconSlotProvider({
+  value,
+  children,
+}: {
+  value: IconSlotContextValue;
+  children: React.ReactNode;
+}) {
+  return <IconSlotContext.Provider value={value}>{children}</IconSlotContext.Provider>;
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+const iconSlotMarker = Symbol.for("@seed-design/lynx-react/icon-slot");
+
+interface IconSlotComponent {
+  [iconSlotMarker]?: IconSlotName;
+}
+
+export function getIconSlotName(node: React.ReactNode): IconSlotName | null {
+  if (!isValidElement(node)) return null;
+
+  return ((node.type as IconSlotComponent)[iconSlotMarker] ?? null) as IconSlotName | null;
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface IconProps extends LynxStyledElementProps {
+  icon: ReactElement<LynxIconElementProps>;
+  size?: StyleProps["height"] | number;
+  color?: StyleProps["color"];
+}
+
+export interface PrefixIconProps extends IconProps {}
+
+export interface SuffixIconProps extends IconProps {}
+
+interface IconSlotBaseProps extends IconProps {
+  slot: IconSlotName | null;
+  baseClassName?: string;
+}
+
+function mergeWrapperStyle({
+  size,
+  color,
+  style,
+}: Pick<IconProps, "size" | "color" | "style">): CSSProperties | undefined {
+  const dimension = handleDimension(size);
+  const resolvedColor = handleColor(color);
+
+  if (dimension == null && resolvedColor == null) return style;
+
+  return {
+    ...(dimension != null ? { width: dimension, height: dimension } : {}),
+    ...(resolvedColor != null ? { color: resolvedColor } : {}),
+    ...style,
+  };
+}
+
+function getStyleColor(style: CSSProperties | undefined): CSSProperties["color"] {
+  return style?.color;
+}
+
+const IconSlotBase = React.forwardRef<unknown, IconSlotBaseProps>((props, ref) => {
+  const {
+    icon,
+    slot,
+    baseClassName,
+    className,
+    style,
+    size,
+    color,
+    children: _children,
+    ...nativeProps
+  } = props;
+  const context = React.useContext(IconSlotContext);
+  const iconRequiredContext = React.useContext(IconRequiredContext);
+  const sourceRef = useMainThreadRef<MainThread.Element>(null);
+  const slotClassName = slot != null ? context?.classNames?.[slot] : undefined;
+  const styleColor = getStyleColor(style);
+  const iconColor = useIconColor(
+    [baseClassName, slotClassName, className, size, color, styleColor, ...(context?.deps ?? [])],
+    { sourceRef },
+  );
+  const hasValidIcon = isValidElement<LynxIconElementProps>(icon);
+
+  React.useLayoutEffect(() => {
+    if (slot !== "icon" || !hasValidIcon) return;
+
+    iconRequiredContext?.register();
+    return () => {
+      iconRequiredContext?.unregister();
+    };
+  }, [hasValidIcon, iconRequiredContext, slot]);
+
+  if (!hasValidIcon) return null;
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...nativeProps}
+      main-thread:ref={sourceRef}
+      className={clsx(baseClassName, slotClassName, className)}
+      style={mergeWrapperStyle({ size, color, style })}
+    >
+      {cloneElement(icon, {
+        ...iconColor,
+        className: icon.props.className,
+        style: {
+          ...icon.props.style,
+          width: "100%",
+          height: "100%",
+        },
+      })}
+    </view>
+  );
+});
+IconSlotBase.displayName = "IconSlotBase";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+function createIconComponent<Props extends IconProps>(
+  displayName: string,
+  slot: IconSlotName,
+  baseClassName: string,
+) {
+  const Component = React.forwardRef<unknown, Props>((props, ref) => {
+    return <IconSlotBase ref={ref} slot={slot} baseClassName={baseClassName} {...props} />;
+  });
+
+  Component.displayName = displayName;
+  (Component as IconSlotComponent)[iconSlotMarker] = slot;
+
+  return Component;
+}
+
+export const Icon = createIconComponent<IconProps>("Icon", "icon", "seed-icon");
+export const PrefixIcon = createIconComponent<PrefixIconProps>(
+  "PrefixIcon",
+  "prefixIcon",
+  "seed-prefix-icon",
+);
+export const SuffixIcon = createIconComponent<SuffixIconProps>(
+  "SuffixIcon",
+  "suffixIcon",
+  "seed-suffix-icon",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface InternalIconProps extends LynxStyledElementProps {
+  icon: ReactElement<LynxIconElementProps>;
+  deps?: DependencyList;
+}
+
+export const InternalIcon = React.forwardRef<unknown, InternalIconProps>((props, ref) => {
+  const { icon, deps = [], className, style, children: _children, ...nativeProps } = props;
+  const sourceRef = useMainThreadRef<MainThread.Element>(null);
+  const styleColor = getStyleColor(style);
+  const iconColor = useIconColor([className, styleColor, ...(deps ?? [])], { sourceRef });
+
+  if (!isValidElement<LynxIconElementProps>(icon)) return null;
+
+  return (
+    <view
+      {...(ref ? { ref: ref as LynxViewRef } : {})}
+      {...nativeProps}
+      main-thread:ref={sourceRef}
+      className={className}
+      style={style}
+    >
+      {cloneElement(icon, {
+        ...iconColor,
+        className: icon.props.className,
+        style: {
+          ...icon.props.style,
+          width: "100%",
+          height: "100%",
+        },
+      })}
+    </view>
+  );
+});
+InternalIcon.displayName = "InternalIcon";

package/src/components/Icon/index.ts

@@ -0,0 +1,8 @@
+export {
+  Icon,
+  PrefixIcon,
+  SuffixIcon,
+  type IconProps,
+  type PrefixIconProps,
+  type SuffixIconProps,
+} from "./Icon";

package/src/components/ProgressCircle/ProgressCircle.namespace.ts

@@ -0,0 +1,5 @@
+export {
+  ProgressCircleRange as Range,
+  ProgressCircleRoot as Root,
+  type ProgressCircleRootProps as RootProps,
+} from "./ProgressCircle";