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

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,291 @@
+import * as React from "react";
+import { cloneElement, isValidElement, type CSSProperties, type ReactElement } from "react";
+import clsx from "clsx";
+import type { MainThread } from "@lynx-js/types";
+
+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 { vars as checkmarkVars } from "@seed-design/lynx-css/vars/component/checkmark";
+
+import { useControllableState } from "../../hooks/use-controllable-state";
+import { useIconColor } from "../../hooks/use-icon-color";
+import { usePressTap } from "../../hooks/use-press-tap";
+import { capitalize, resolveRecipeToken } from "../../utils/resolve-recipe-token";
+import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
+
+/**
+ * @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 범위 밖.
+ */
+
+type CheckboxSize = NonNullable<CheckboxVariantProps["size"]>;
+type CheckboxWeight = NonNullable<CheckboxVariantProps["weight"]>;
+type CheckmarkTone = NonNullable<CheckmarkVariantProps["tone"]>;
+type CheckmarkVariant = NonNullable<CheckmarkVariantProps["variant"]>;
+
+interface CheckboxContextValue {
+  checked: boolean;
+  indeterminate: boolean;
+  disabled: boolean;
+  pressed: boolean;
+  size: CheckboxSize;
+  weight: CheckboxWeight;
+  tone: CheckmarkTone;
+  variant: CheckmarkVariant;
+}
+
+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;
+}
+
+const CheckmarkIconClassContext = React.createContext<string | null>(null);
+
+function useCheckmarkIconClass(consumer: string): string {
+  const ctx = React.useContext(CheckmarkIconClassContext);
+  if (!ctx) {
+    throw new Error(`<${consumer}/> must be rendered inside <CheckboxControl/>.`);
+  }
+  return ctx;
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxRootProps
+  extends CheckboxVariantProps,
+    Omit<CheckmarkVariantProps, "size" | "checked" | "disabled" | "indeterminate"> {
+  children?: React.ReactNode;
+  className?: string;
+  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 weight: CheckboxWeight = checkboxVariantProps.weight ?? "regular";
+  const size: CheckboxSize = checkboxVariantProps.size ?? "medium";
+  const tone: CheckmarkTone = checkmarkVariantProps.tone ?? "brand";
+  const variant: CheckmarkVariant = checkmarkVariantProps.variant ?? "square";
+
+  const [checked, setChecked] = useControllableState({
+    value: checkedProp,
+    defaultValue: defaultChecked,
+    onChange: onCheckedChange,
+  });
+
+  const { pressed, ...pressHandlers } = usePressTap({
+    disabled,
+    onTap: () => setChecked(!checked),
+  });
+
+  const rootClassName = checkbox({ weight, size, disabled }).root;
+
+  const ctx = React.useMemo<CheckboxContextValue>(
+    () => ({ checked, indeterminate, disabled, pressed, size, weight, tone, variant }),
+    [checked, indeterminate, disabled, pressed, size, weight, tone, variant],
+  );
+
+  return (
+    <CheckboxContext.Provider value={ctx}>
+      <view
+        {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+        className={clsx(rootClassName, className)}
+        {...pressHandlers}
+        {...nativeProps}
+      >
+        {children}
+      </view>
+    </CheckboxContext.Provider>
+  );
+});
+CheckboxRoot.displayName = "CheckboxRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxControlProps
+  extends Pick<CheckmarkVariantProps, "tone" | "variant" | "size"> {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const CheckboxControl = React.forwardRef<unknown, CheckboxControlProps>((props, ref) => {
+  const [variantProps, restProps] = checkmark.splitVariantProps(props);
+  const { children, className, ...nativeProps } = restProps;
+  const {
+    checked,
+    indeterminate,
+    disabled,
+    pressed,
+    tone: ctxTone,
+    variant: ctxVariant,
+    size: ctxSize,
+  } = useCheckboxContext("CheckboxControl");
+
+  const tone: CheckmarkTone = variantProps.tone ?? ctxTone;
+  const variant: CheckmarkVariant = variantProps.variant ?? ctxVariant;
+  const size: CheckboxSize = (variantProps.size as CheckboxSize | undefined) ?? ctxSize;
+
+  const classes = React.useMemo(
+    () => checkmark({ variant, tone, size, checked, disabled, indeterminate, pressed }),
+    [variant, tone, size, checked, disabled, indeterminate, pressed],
+  );
+
+  return (
+    <CheckmarkIconClassContext.Provider value={classes.icon}>
+      <view
+        {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+        className={clsx(classes.root, className)}
+        {...nativeProps}
+      >
+        {children}
+      </view>
+    </CheckmarkIconClassContext.Provider>
+  );
+});
+CheckboxControl.displayName = "CheckboxControl";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+type IconElementProps = {
+  className?: string;
+  style?: CSSProperties;
+  ref?: React.Ref<MainThread.Element>;
+};
+
+export interface CheckboxIndicatorProps {
+  /** Icon rendered when neither checked nor indeterminate. Optional. */
+  unchecked?: ReactElement<IconElementProps>;
+  /** Icon rendered when `checked=true` and `indeterminate=false`. */
+  checked: ReactElement<IconElementProps>;
+  /** Icon rendered when `indeterminate=true`. */
+  indeterminate?: ReactElement<IconElementProps>;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function CheckboxIndicator(props: CheckboxIndicatorProps) {
+  const {
+    unchecked,
+    checked: checkedIcon,
+    indeterminate: indeterminateIcon,
+    className,
+    style,
+  } = props;
+  const { checked, indeterminate, disabled, pressed, tone, variant, size } =
+    useCheckboxContext("CheckboxIndicator");
+  const iconClassName = useCheckmarkIconClass("CheckboxIndicator");
+  const { ref: tintRef } = useIconColor([
+    checked,
+    indeterminate,
+    disabled,
+    pressed,
+    tone,
+    variant,
+    size,
+  ]);
+
+  if (process.env.NODE_ENV !== "production" && indeterminate && !indeterminateIcon) {
+    console.warn(
+      "[seed-design] CheckboxIndicator: `indeterminate` prop must be provided when the checkbox is in an indeterminate state.",
+    );
+  }
+
+  const icon = indeterminate ? indeterminateIcon : checked ? checkedIcon : unchecked;
+  if (!icon || !isValidElement<IconElementProps>(icon)) return null;
+
+  // lynx-monochrome-icon 이 `<image style={{ width, height, ...style }}>` 로 자체 default size 를 박으므로
+  // recipe 토큰에서 꺼낸 사이즈를 inline 으로 주입해 덮는다.
+  const iconSize = resolveRecipeToken(checkmarkVars, [
+    `variant${capitalize(variant)}Size${capitalize(size)}`,
+    "enabled",
+    "icon",
+    "size",
+  ]);
+
+  return cloneElement(icon, {
+    className: clsx(iconClassName, icon.props.className, className),
+    style: iconSize
+      ? { width: iconSize, height: iconSize, ...icon.props.style, ...style }
+      : { ...icon.props.style, ...style },
+    ref: tintRef,
+  });
+}
+CheckboxIndicator.displayName = "CheckboxIndicator";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxLabelProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const CheckboxLabel = React.forwardRef<unknown, CheckboxLabelProps>((props, ref) => {
+  const { children, className, ...nativeProps } = props;
+  const { disabled, weight, size } = useCheckboxContext("CheckboxLabel");
+  const labelClassName = checkbox({ weight, size, disabled }).label;
+
+  return (
+    <text
+      {...(ref ? { ref: ref as React.Ref<SVGTextElement> } : {})}
+      className={clsx(labelClassName, className)}
+      {...nativeProps}
+    >
+      {children}
+    </text>
+  );
+});
+CheckboxLabel.displayName = "CheckboxLabel";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface CheckboxGroupProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const CheckboxGroup = React.forwardRef<unknown, CheckboxGroupProps>((props, ref) => {
+  const { children, className, ...nativeProps } = props;
+  const classes = checkboxGroup();
+
+  return (
+    <view
+      {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+      className={clsx(classes, 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/ProgressCircle/ProgressCircle.namespace.ts

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

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -1,3 +1,4 @@
+import type * as React from "@lynx-js/react";
 import {
   createContext,
   runOnMainThread,
@@ -11,8 +12,8 @@ import clsx from "clsx";
 import { progressCircle } from "@seed-design/lynx-css/recipes/progress-circle";
 import type { ProgressCircleVariantProps } from "@seed-design/lynx-css/recipes/progress-circle";
 
-type Tone = "neutral" | "brand" | "staticWhite";
-type Size = "24" | "40";
+type Tone = "neutral" | "brand" | "staticWhite" | "inherit";
+type Size = "14" | "16" | "18" | "24" | "40";
 
 interface ProgressCircleContextValue {
   tone: Tone;
@@ -110,7 +111,7 @@ const TRANSITION_DURATION = 300;
 
 // --- Components ---
 
-export interface RootProps extends ProgressCircleVariantProps {
+export interface ProgressCircleRootProps extends ProgressCircleVariantProps {
   minValue?: number;
   maxValue?: number;
   value?: number;
@@ -118,6 +119,8 @@ export interface RootProps extends ProgressCircleVariantProps {
   className?: string;
 }
 
+export type RootProps = ProgressCircleRootProps;
+
 /**
  * Lynx에서 SVG를 사용할 수 없어 CSS clip-path 기반 pie sector로 구현.
  *
@@ -128,7 +131,7 @@ export interface RootProps extends ProgressCircleVariantProps {
  *
  * Lynx SVG + stroke-dasharray 지원 시 CSS-only 애니메이션으로 전환 예정.
  */
-function Root(props: RootProps) {
+export const ProgressCircleRoot = (props: ProgressCircleRootProps) => {
   const size: Size = (props.size as Size) ?? "40";
   const tone: Tone = (props.tone as Tone) ?? "neutral";
   const numSize = Number(size);
@@ -160,9 +163,9 @@ function Root(props: RootProps) {
       </view>
     </ProgressCircleContext.Provider>
   );
-}
+};
 
-function Range() {
+export const ProgressCircleRange = () => {
   const { numSize, isDeterminate, progress, classes } = useProgressCircleCtx();
 
   if (!isDeterminate) {
@@ -170,7 +173,7 @@ function Range() {
   }
 
   return <DeterminateRange numSize={numSize} progress={progress} classes={classes} />;
-}
+};
 
 type Classes = ReturnType<typeof progressCircle>;
 
@@ -258,7 +261,7 @@ function DeterminateRange({
     return () => {
       runOnMainThread(cancelAnimation)();
     };
-  }, [progress]);
+  }, [progress, numSize]);
 
   return (
     <>
@@ -354,7 +357,7 @@ function IndeterminateRange({ numSize, classes }: { numSize: number; classes: Cl
     return () => {
       runOnMainThread(stopLoop)();
     };
-  }, []);
+  }, [numSize]);
 
   const initialClipPath = 'path("M 0 0 Z")';
 
@@ -403,7 +406,5 @@ function IndeterminateRange({ numSize, classes }: { numSize: number; classes: Cl
   );
 }
 
-export const ProgressCircle = {
-  Root,
-  Range,
-};
+ProgressCircleRoot.displayName = "ProgressCircleRoot";
+ProgressCircleRange.displayName = "ProgressCircleRange";

package/src/components/ProgressCircle/index.ts

@@ -1 +1,9 @@
-export { ProgressCircle, type RootProps as ProgressCircleProps } from "./ProgressCircle";
+export {
+  ProgressCircleRange,
+  ProgressCircleRoot,
+  type ProgressCircleRootProps,
+  type ProgressCircleRootProps as ProgressCircleProps,
+  type RootProps,
+} from "./ProgressCircle";
+
+export * as ProgressCircle from "./ProgressCircle.namespace";

package/src/components/RadioGroup/RadioGroup.namespace.ts

@@ -0,0 +1,12 @@
+export {
+  RadioGroupItem as Item,
+  RadioGroupItemControl as ItemControl,
+  RadioGroupItemIndicator as ItemIndicator,
+  RadioGroupItemLabel as ItemLabel,
+  RadioGroupRoot as Root,
+  type RadioGroupItemControlProps as ItemControlProps,
+  type RadioGroupItemIndicatorProps as ItemIndicatorProps,
+  type RadioGroupItemLabelProps as ItemLabelProps,
+  type RadioGroupItemProps as ItemProps,
+  type RadioGroupRootProps as RootProps,
+} from "./RadioGroup";