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

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -1,6 +1,7 @@
 import type * as React from "@lynx-js/react";
 import {
   createContext,
+  forwardRef,
   runOnMainThread,
   useContext,
   useEffect,
@@ -11,12 +12,11 @@ import type { MainThread } from "@lynx-js/types";
 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";
+import type { LynxStyledElementProps, LynxViewRef } from "../../types";
 
-type Tone = "neutral" | "brand" | "staticWhite" | "inherit";
-type Size = "14" | "16" | "18" | "24" | "40";
+////////////////////////////////////////////////////////////////////////////////////
 
 interface ProgressCircleContextValue {
-  tone: Tone;
   numSize: number;
   isDeterminate: boolean;
   progress: number;
@@ -25,7 +25,7 @@ interface ProgressCircleContextValue {
 
 const ProgressCircleContext = createContext<ProgressCircleContextValue | null>(null);
 
-function useProgressCircleCtx() {
+function useProgressCircleContext() {
   const ctx = useContext(ProgressCircleContext);
   if (!ctx) {
     throw new Error("ProgressCircle compound components must be used within ProgressCircle.Root");
@@ -33,6 +33,8 @@ function useProgressCircleCtx() {
   return ctx;
 }
 
+////////////////////////////////////////////////////////////////////////////////////
+
 // --- Background-thread-only utilities (for initial render) ---
 
 function computeRingGeometry(numSize: number) {
@@ -55,6 +57,8 @@ function bgPieClipPath(size: number, angleDeg: number): string | undefined {
   return `path("M ${c} ${c} L ${c} ${c - r} A ${r} ${r} 0 ${largeArc} 1 ${endX} ${endY} Z")`;
 }
 
+////////////////////////////////////////////////////////////////////////////////////
+
 // --- Main-thread-only utilities (for animations) ---
 // Compiled into the main thread bundle. Must NOT be called from render code.
 
@@ -104,23 +108,29 @@ function sampleIndeterminate(t: number) {
   return { containerDeg, arcLength };
 }
 
+////////////////////////////////////////////////////////////////////////////////////
+
 // --- Animation constants ---
 
 const INDETERMINATE_DURATION = 1200;
 const TRANSITION_DURATION = 300;
 
+////////////////////////////////////////////////////////////////////////////////////
+
 // --- Components ---
 
-export interface ProgressCircleRootProps extends ProgressCircleVariantProps {
+export interface ProgressCircleRootProps
+  extends ProgressCircleVariantProps,
+    LynxStyledElementProps {
   minValue?: number;
   maxValue?: number;
   value?: number;
-  children?: React.ReactNode;
-  className?: string;
 }
 
 export type RootProps = ProgressCircleRootProps;
 
+////////////////////////////////////////////////////////////////////////////////////
+
 /**
  * Lynx에서 SVG를 사용할 수 없어 CSS clip-path 기반 pie sector로 구현.
  *
@@ -131,42 +141,42 @@ export type RootProps = ProgressCircleRootProps;
  *
  * Lynx SVG + stroke-dasharray 지원 시 CSS-only 애니메이션으로 전환 예정.
  */
-export const ProgressCircleRoot = (props: ProgressCircleRootProps) => {
-  const size: Size = (props.size as Size) ?? "40";
-  const tone: Tone = (props.tone as Tone) ?? "neutral";
+export const ProgressCircleRoot = forwardRef<unknown, ProgressCircleRootProps>((props, ref) => {
+  const [variantProps, otherProps] = progressCircle.splitVariantProps(props);
+  const { children, className, style, minValue, maxValue, value } = otherProps;
+  const size = variantProps.size ?? "40";
+  const tone = variantProps.tone ?? "neutral";
   const numSize = Number(size);
 
-  const isDeterminate =
-    props.minValue !== undefined && props.maxValue !== undefined && props.value !== undefined;
+  const isDeterminate = minValue !== undefined && maxValue !== undefined && value !== undefined;
 
-  const range = (props.maxValue ?? 1) - (props.minValue ?? 0);
-  const progress = isDeterminate
-    ? range === 0
-      ? 0
-      : ((props.value ?? 0) - (props.minValue ?? 0)) / range
-    : 0;
+  const range = (maxValue ?? 1) - (minValue ?? 0);
+  const progress = isDeterminate ? (range === 0 ? 0 : ((value ?? 0) - (minValue ?? 0)) / range) : 0;
 
   const classes = progressCircle({ tone, size });
 
   const ctx = useMemo(
-    () => ({ tone, numSize, isDeterminate, progress, classes }),
-    [tone, numSize, isDeterminate, progress, classes],
+    () => ({ numSize, isDeterminate, progress, classes }),
+    [numSize, isDeterminate, progress, classes],
   );
 
   return (
     <ProgressCircleContext.Provider value={ctx}>
       <view
-        className={clsx(classes.root, props.className)}
-        style={{ width: `${numSize}px`, height: `${numSize}px` }}
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
+        className={clsx(classes.root, className)}
+        style={{ ...style, width: `${numSize}px`, height: `${numSize}px` }}
       >
-        {props.children}
+        {children}
       </view>
     </ProgressCircleContext.Provider>
   );
-};
+});
+
+////////////////////////////////////////////////////////////////////////////////////
 
 export const ProgressCircleRange = () => {
-  const { numSize, isDeterminate, progress, classes } = useProgressCircleCtx();
+  const { numSize, isDeterminate, progress, classes } = useProgressCircleContext();
 
   if (!isDeterminate) {
     return <IndeterminateRange numSize={numSize} classes={classes} />;
@@ -177,6 +187,8 @@ export const ProgressCircleRange = () => {
 
 type Classes = ReturnType<typeof progressCircle>;
 
+////////////////////////////////////////////////////////////////////////////////////
+
 function DeterminateRange({
   numSize,
   progress,
@@ -300,6 +312,8 @@ function DeterminateRange({
   );
 }
 
+////////////////////////////////////////////////////////////////////////////////////
+
 function IndeterminateRange({ numSize, classes }: { numSize: number; classes: Classes }) {
   const containerRef = useMainThreadRef<MainThread.Element>(null);
   const rangeRef = useMainThreadRef<MainThread.Element>(null);

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,20 +1,23 @@
-import * as React from "react";
-import { cloneElement, isValidElement, type CSSProperties, type ReactElement } from "react";
+import * as React from "@lynx-js/react";
+import { isValidElement, type ReactElement } from "@lynx-js/react";
 import clsx from "clsx";
-import type { MainThread } from "@lynx-js/types";
 
 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 { vars as radiomarkVars } from "@seed-design/lynx-css/vars/component/radiomark";
 
-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 { 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
@@ -29,17 +32,12 @@ import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-
  * recipe 의 `color` 토큰을 `tint-color` 로 동기화한다.
  */
 
-type RadioSize = NonNullable<RadioVariantProps["size"]>;
-type RadioWeight = NonNullable<RadioVariantProps["weight"]>;
-type RadiomarkTone = NonNullable<RadiomarkVariantProps["tone"]>;
-
 interface RadioGroupContextValue {
   value: string | null;
   setValue: (value: string) => void;
   disabled: boolean;
-  size: RadioSize;
-  weight: RadioWeight;
-  tone: RadiomarkTone;
+  radioVariantProps: RadioVariantProps;
+  radiomarkVariantProps: RadiomarkVariantProps;
 }
 
 const RadioGroupContext = React.createContext<RadioGroupContextValue | null>(null);
@@ -57,8 +55,7 @@ interface RadioGroupItemContextValue {
   checked: boolean;
   disabled: boolean;
   pressed: boolean;
-  tone: RadiomarkTone;
-  size: RadioSize;
+  select: () => void;
 }
 
 const RadioGroupItemContext = React.createContext<RadioGroupItemContextValue | null>(null);
@@ -71,10 +68,15 @@ function useRadioGroupItemContext(consumer: string): RadioGroupItemContextValue
   return ctx;
 }
 
-const RadiomarkIconClassContext = React.createContext<string | null>(null);
+interface RadiomarkControlContextValue {
+  iconClassName: string;
+  radiomarkVariantProps: RadiomarkVariantProps;
+}
+
+const RadiomarkControlContext = React.createContext<RadiomarkControlContextValue | null>(null);
 
-function useRadiomarkIconClass(consumer: string): string {
-  const ctx = React.useContext(RadiomarkIconClassContext);
+function useRadiomarkControlContext(consumer: string): RadiomarkControlContextValue {
+  const ctx = React.useContext(RadiomarkControlContext);
   if (!ctx) {
     throw new Error(`<${consumer}/> must be rendered inside <RadioGroupItemControl/>.`);
   }
@@ -85,9 +87,8 @@ function useRadiomarkIconClass(consumer: string): string {
 
 export interface RadioGroupRootProps
   extends RadioVariantProps,
-    Omit<RadiomarkVariantProps, "size" | "checked" | "disabled"> {
-  children?: React.ReactNode;
-  className?: string;
+    Omit<RadiomarkVariantProps, "size" | "checked" | "disabled">,
+    LynxStyledElementProps {
   value?: string;
   defaultValue?: string;
   disabled?: boolean;
@@ -106,9 +107,6 @@ export const RadioGroupRoot = React.forwardRef<unknown, RadioGroupRootProps>((pr
   } = props;
   const [{ radio: radioVariantProps, radiomark: radiomarkVariantProps }, nativeProps] =
     splitMultipleVariantsProps(restProps, { radio, radiomark });
-  const weight: RadioWeight = radioVariantProps.weight ?? "regular";
-  const size: RadioSize = radioVariantProps.size ?? "medium";
-  const tone: RadiomarkTone = radiomarkVariantProps.tone ?? "brand";
 
   const handleChange = React.useCallback(
     (next: string | null) => {
@@ -130,17 +128,23 @@ export const RadioGroupRoot = React.forwardRef<unknown, RadioGroupRootProps>((pr
     [setValueInternal],
   );
 
-  const rootClassName = radioGroup();
+  const rootClassName = radioGroup().root;
 
-  const ctx = React.useMemo<RadioGroupContextValue>(
-    () => ({ value, setValue, disabled, size, weight, tone }),
-    [value, setValue, disabled, size, weight, tone],
+  const contextValue = React.useMemo<RadioGroupContextValue>(
+    () => ({
+      value,
+      setValue,
+      disabled,
+      radioVariantProps,
+      radiomarkVariantProps,
+    }),
+    [value, setValue, disabled, radioVariantProps, radiomarkVariantProps],
   );
 
   return (
-    <RadioGroupContext.Provider value={ctx}>
+    <RadioGroupContext.Provider value={contextValue}>
       <view
-        {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
         className={clsx(rootClassName, className)}
         {...nativeProps}
       >
@@ -153,10 +157,8 @@ RadioGroupRoot.displayName = "RadioGroupRoot";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface RadioGroupItemProps {
+export interface RadioGroupItemProps extends LynxStyledElementProps {
   value: string;
-  children?: React.ReactNode;
-  className?: string;
   disabled?: boolean;
 }
 
@@ -168,44 +170,37 @@ export const RadioGroupItem = React.forwardRef<unknown, RadioGroupItemProps>((pr
     className,
     ...nativeProps
   } = props;
-  const {
-    value: groupValue,
-    setValue,
-    disabled: groupDisabled,
-    size,
-    weight,
-    tone,
-  } = useRadioGroupContext("RadioGroupItem");
+  const groupContext = useRadioGroupContext("RadioGroupItem");
 
-  const disabled = groupDisabled || itemDisabled;
-  const checked = groupValue === itemValue;
+  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: () => {
-      if (checked) return;
-      setValue(itemValue);
-    },
+    onTap: select,
   });
 
-  const rootClassName = radio({ weight, size, disabled }).root;
+  const rootClassName = radio({ ...groupContext.radioVariantProps, disabled }).root;
 
-  const itemCtx = React.useMemo<RadioGroupItemContextValue>(
+  const itemContextValue = React.useMemo<RadioGroupItemContextValue>(
     () => ({
       value: itemValue,
       checked,
       disabled,
       pressed,
-      tone,
-      size,
+      select,
     }),
-    [itemValue, checked, disabled, pressed, tone, size],
+    [itemValue, checked, disabled, pressed, select],
   );
 
   return (
-    <RadioGroupItemContext.Provider value={itemCtx}>
+    <RadioGroupItemContext.Provider value={itemContextValue}>
       <view
-        {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+        {...(ref ? { ref: ref as LynxViewRef } : {})}
         className={clsx(rootClassName, className)}
         {...pressHandlers}
         {...nativeProps}
@@ -219,40 +214,37 @@ RadioGroupItem.displayName = "RadioGroupItem";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface RadioGroupItemControlProps extends Pick<RadiomarkVariantProps, "tone"> {
-  children?: React.ReactNode;
-  className?: string;
-}
+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 {
-      checked,
-      disabled,
-      pressed,
-      tone: ctxTone,
-      size,
-    } = useRadioGroupItemContext("RadioGroupItemControl");
-
-    const tone: RadiomarkTone = variantProps.tone ?? ctxTone;
-
-    const classes = React.useMemo(
-      () => radiomark({ tone, size, checked, disabled, pressed }),
-      [tone, size, checked, disabled, pressed],
-    );
+    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 (
-      <RadiomarkIconClassContext.Provider value={classes.icon}>
+      <RadiomarkControlContext.Provider
+        value={{ iconClassName: classes.icon, radiomarkVariantProps }}
+      >
         <view
-          {...(ref ? { ref: ref as React.Ref<SVGViewElement> } : {})}
+          {...(ref ? { ref: ref as LynxViewRef } : {})}
           className={clsx(classes.root, className)}
           {...nativeProps}
         >
           {children}
         </view>
-      </RadiomarkIconClassContext.Provider>
+      </RadiomarkControlContext.Provider>
     );
   },
 );
@@ -260,73 +252,63 @@ RadioGroupItemControl.displayName = "RadioGroupItemControl";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-type IconElementProps = {
-  className?: string;
-  style?: CSSProperties;
-  ref?: React.Ref<MainThread.Element>;
-};
-
-export interface RadioGroupItemIndicatorProps {
+export interface RadioGroupItemIndicatorProps
+  extends Pick<LynxStyledElementProps, "className" | "style"> {
   /** Icon rendered when not checked. Optional — falls back to default `<view>` dot when omitted. */
-  unchecked?: ReactElement<IconElementProps>;
+  unchecked?: ReactElement<LynxIconElementProps>;
   /** Icon rendered when the item is checked. Optional — falls back to default `<view>` dot when omitted. */
-  checked?: ReactElement<IconElementProps>;
-  className?: string;
-  style?: CSSProperties;
+  checked?: ReactElement<LynxIconElementProps>;
 }
 
 export function RadioGroupItemIndicator(props: RadioGroupItemIndicatorProps) {
   const { unchecked, checked: checkedIcon, className, style } = props;
-  const { checked, disabled, pressed, tone, size } =
-    useRadioGroupItemContext("RadioGroupItemIndicator");
-  const iconClassName = useRadiomarkIconClass("RadioGroupItemIndicator");
-  const { ref: tintRef } = useIconColor([checked, disabled, pressed, tone, size]);
+  const itemContext = useRadioGroupItemContext("RadioGroupItemIndicator");
+  const { iconClassName, radiomarkVariantProps } =
+    useRadiomarkControlContext("RadioGroupItemIndicator");
 
-  const icon = checked ? checkedIcon : unchecked;
+  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<IconElementProps>(icon)) {
+  if (!icon || !isValidElement<LynxIconElementProps>(icon)) {
     return <view className={clsx(iconClassName, className)} style={style} />;
   }
 
-  // lynx-monochrome-icon 이 `<image style={{ width, height, ...style }}>` 로 자체 default size 를 박으므로
-  // recipe 토큰에서 꺼낸 사이즈를 inline 으로 주입해 덮는다.
-  const iconSize = resolveRecipeToken(radiomarkVars, [
-    `size${capitalize(size)}`,
-    disabled ? "disabled" : "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,
-  });
+  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 {
-  children?: React.ReactNode;
-  className?: string;
-}
+export interface RadioGroupItemLabelProps extends LynxStyledElementProps {}
 
 export const RadioGroupItemLabel = React.forwardRef<unknown, RadioGroupItemLabelProps>(
   (props, ref) => {
     const { children, className, ...nativeProps } = props;
-    const { disabled } = useRadioGroupItemContext("RadioGroupItemLabel");
-    const { size, weight } = useRadioGroupContext("RadioGroupItemLabel");
-    const labelClassName = radio({ weight, size, disabled }).label;
+    const itemContext = useRadioGroupItemContext("RadioGroupItemLabel");
+    const groupContext = useRadioGroupContext("RadioGroupItemLabel");
+    const labelClassName = radio({
+      ...groupContext.radioVariantProps,
+      disabled: itemContext.disabled,
+    }).label;
 
     return (
       <text
-        {...(ref ? { ref: ref as React.Ref<SVGTextElement> } : {})}
+        {...(ref ? { ref: ref as LynxTextRef } : {})}
         className={clsx(labelClassName, className)}
         {...nativeProps}
       >

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";