@seed-design/react 0.0.0-alpha-20260324091316

package/src/components/ScrollFog/ScrollFog.tsx

@@ -0,0 +1,90 @@
+import { scrollFog, type ScrollFogVariantProps } from "@seed-design/css/recipes/scroll-fog";
+import clsx from "clsx";
+import { forwardRef, useMemo } from "react";
+import { scrollFog as vars } from "@seed-design/css/vars/component";
+
+type ScrollPlacement = "top" | "bottom" | "left" | "right";
+
+type SizesConfig = {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+};
+
+export interface ScrollFogProps
+  extends ScrollFogVariantProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Placement of fog effect
+   * @default ["top", "bottom"]
+   */
+  placement?: ScrollPlacement[];
+
+  /**
+   * Size of the fog effect in pixels
+   * @default 20
+   */
+  size?: number;
+
+  /**
+   * Size of the fog effect for each direction in pixels
+   */
+  sizes?: SizesConfig;
+}
+
+export const ScrollFog = forwardRef<HTMLDivElement, ScrollFogProps>(
+  (
+    {
+      className,
+      hideScrollBar,
+      placement = ["top", "bottom"],
+      size = vars.base.enabled.root.size,
+      sizes,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const [variantProps, restProps] = scrollFog.splitVariantProps({
+      hideScrollBar,
+      ...props,
+    });
+    const scrollFogClassName = scrollFog(variantProps);
+    const sizePx = typeof size === "number" ? `${size}px` : size;
+
+    const sizeStyle = useMemo(() => {
+      const finalSizes = {
+        top: sizes?.top ? `${sizes.top}px` : sizePx,
+        bottom: sizes?.bottom ? `${sizes.bottom}px` : sizePx,
+        left: sizes?.left ? `${sizes.left}px` : sizePx,
+        right: sizes?.right ? `${sizes.right}px` : sizePx,
+      };
+
+      return {
+        "--scroll-fog-size-top": finalSizes.top,
+        "--scroll-fog-size-bottom": finalSizes.bottom,
+        "--scroll-fog-size-left": finalSizes.left,
+        "--scroll-fog-size-right": finalSizes.right,
+        // placement에 포함된 방향만 1, 나머지는 0
+        "--scrollable-top": placement.includes("top") ? "1" : "0",
+        "--scrollable-bottom": placement.includes("bottom") ? "1" : "0",
+        "--scrollable-left": placement.includes("left") ? "1" : "0",
+        "--scrollable-right": placement.includes("right") ? "1" : "0",
+      } as React.CSSProperties;
+    }, [sizePx, sizes, placement]);
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(scrollFogClassName, className)}
+        style={{
+          ...style,
+          ...sizeStyle,
+        }}
+        {...restProps}
+      />
+    );
+  },
+);
+ScrollFog.displayName = "ScrollFog";

package/src/components/ScrollFog/index.ts

@@ -0,0 +1 @@
+export { ScrollFog, type ScrollFogProps } from "./ScrollFog";

package/src/components/SegmentedControl/SegmentedControl.namespace.ts

@@ -0,0 +1,10 @@
+export {
+  SegmentedControlIndicator as Indicator,
+  SegmentedControlRoot as Root,
+  SegmentedControlItem as Item,
+  SegmentedControlItemHiddenInput as ItemHiddenInput,
+  type SegmentedControlIndicatorProps as IndicatorProps,
+  type SegmentedControlRootProps as RootProps,
+  type SegmentedControlItemProps as ItemProps,
+  type SegmentedControlItemHiddenInputProps as ItemHiddenInputProps,
+} from "./SegmentedControl";

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,39 @@
+import {
+  segmentedControl,
+  type SegmentedControlVariantProps,
+} from "@seed-design/css/recipes/segmented-control";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { SegmentedControl as SegmentedControlPrimitive } from "@seed-design/react-segmented-control";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+
+const { withProvider, withContext } = createSlotRecipeContext(segmentedControl);
+
+export interface SegmentedControlRootProps
+  extends SegmentedControlVariantProps,
+    SegmentedControlPrimitive.RootProps {}
+
+export const SegmentedControlRoot = withProvider<HTMLDivElement, SegmentedControlRootProps>(
+  SegmentedControlPrimitive.Root,
+  "root",
+);
+
+export interface SegmentedControlIndicatorProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const SegmentedControlIndicator = withContext<
+  HTMLDivElement,
+  SegmentedControlIndicatorProps
+>(Primitive.div, "indicator");
+
+export interface SegmentedControlItemProps extends SegmentedControlPrimitive.ItemProps {}
+
+export const SegmentedControlItem = withContext<HTMLLabelElement, SegmentedControlItemProps>(
+  SegmentedControlPrimitive.Item,
+  "item",
+);
+
+export interface SegmentedControlItemHiddenInputProps
+  extends SegmentedControlPrimitive.ItemHiddenInputProps {}
+
+export const SegmentedControlItemHiddenInput = SegmentedControlPrimitive.ItemHiddenInput;

package/src/components/SegmentedControl/index.ts

@@ -0,0 +1,12 @@
+export {
+  SegmentedControlIndicator,
+  SegmentedControlRoot,
+  SegmentedControlItem,
+  SegmentedControlItemHiddenInput,
+  type SegmentedControlIndicatorProps,
+  type SegmentedControlRootProps,
+  type SegmentedControlItemProps,
+  type SegmentedControlItemHiddenInputProps,
+} from "./SegmentedControl";
+
+export * as SegmentedControl from "./SegmentedControl.namespace";

package/src/components/SelectBox/CheckSelectBox.namespace.ts

@@ -0,0 +1,24 @@
+export {
+  CheckSelectBoxBody as Body,
+  CheckSelectBoxCheckmarkControl as CheckmarkControl,
+  CheckSelectBoxCheckmarkIcon as CheckmarkIcon,
+  CheckSelectBoxContent as Content,
+  CheckSelectBoxDescription as Description,
+  CheckSelectBoxFooter as Footer,
+  CheckSelectBoxGroup as Group,
+  CheckSelectBoxHiddenInput as HiddenInput,
+  CheckSelectBoxLabel as Label,
+  CheckSelectBoxRoot as Root,
+  CheckSelectBoxTrigger as Trigger,
+  type CheckSelectBoxBodyProps as BodyProps,
+  type CheckSelectBoxCheckmarkControlProps as CheckmarkControlProps,
+  type CheckSelectBoxCheckmarkIconProps as CheckmarkIconProps,
+  type CheckSelectBoxContentProps as ContentProps,
+  type CheckSelectBoxDescriptionProps as DescriptionProps,
+  type CheckSelectBoxFooterProps as FooterProps,
+  type CheckSelectBoxGroupProps as GroupProps,
+  type CheckSelectBoxHiddenInputProps as HiddenInputProps,
+  type CheckSelectBoxLabelProps as LabelProps,
+  type CheckSelectBoxRootProps as RootProps,
+  type CheckSelectBoxTriggerProps as TriggerProps,
+} from "./CheckSelectBox";

package/src/components/SelectBox/CheckSelectBox.tsx

@@ -0,0 +1,265 @@
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { selectBox, type SelectBoxVariantProps } from "@seed-design/css/recipes/select-box";
+import {
+  selectBoxCheckmark,
+  type SelectBoxCheckmarkVariantProps,
+} from "@seed-design/css/recipes/selectBoxCheckmark";
+import {
+  selectBoxGroup,
+  type SelectBoxGroupVariantProps,
+} from "@seed-design/css/recipes/select-box-group";
+import { Checkbox as CheckboxPrimitive, useCheckboxContext } from "@seed-design/react-checkbox";
+import {
+  Collapsible,
+  CollapsibleProvider,
+  useCollapsible,
+  useCollapsibleContext,
+} from "@seed-design/react-collapsible";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useState,
+  type PropsWithChildren,
+} from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { InternalIcon, type InternalIconProps } from "../private/Icon";
+
+const { PropsProvider, ClassNamesProvider, withContext, useProps, useClassNames } =
+  createSlotRecipeContext(selectBox);
+
+const withStateProps = createWithStateProps([useCheckboxContext]);
+
+const FooterContext = createContext<{
+  isFooterRendered: boolean;
+  footerRef: (node: HTMLDivElement | null) => void;
+  footerVisibility: Exclude<NonNullable<CheckSelectBoxRootProps["footerVisibility"]>, "always">;
+} | null>(null);
+export interface CheckSelectBoxGroupProps
+  extends SelectBoxGroupVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Number of columns in the grid layout. When bigger than 1, child `CheckSelectBoxRoot` will have a default layout of "vertical".
+   * @default 1
+   */
+  columns?: number;
+}
+
+export const CheckSelectBoxGroup = forwardRef<HTMLDivElement, CheckSelectBoxGroupProps>(
+  ({ columns = 1, className, style, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBoxGroup.splitVariantProps(props);
+    const recipeClassName = selectBoxGroup(variantProps);
+    const layout = columns === 1 ? "horizontal" : "vertical";
+
+    return (
+      <PropsProvider value={{ layout }}>
+        <Primitive.div
+          ref={ref}
+          data-columns={columns}
+          className={clsx(recipeClassName, className)}
+          style={
+            {
+              ...style,
+              "--seed-select-box-group--columns": columns,
+            } as React.CSSProperties
+          }
+          {...otherProps}
+        />
+      </PropsProvider>
+    );
+  },
+);
+
+function FooterVisibilityProvider({
+  children,
+  footerVisibility,
+}: PropsWithChildren<{
+  footerVisibility: Exclude<NonNullable<CheckSelectBoxRootProps["footerVisibility"]>, "always">;
+}>) {
+  const { checked } = useCheckboxContext();
+
+  const collapsible = useCollapsible({
+    open: {
+      "when-selected": checked,
+      "when-not-selected": !checked,
+    }[footerVisibility],
+  });
+
+  const [isFooterRendered, setIsFooterRendered] = useState(false);
+  const footerRef = useCallback((node: HTMLDivElement | null) => {
+    setIsFooterRendered(!!node);
+  }, []);
+
+  return (
+    <CollapsibleProvider value={collapsible}>
+      <FooterContext.Provider value={{ isFooterRendered, footerRef, footerVisibility }}>
+        {children}
+      </FooterContext.Provider>
+    </CollapsibleProvider>
+  );
+}
+
+export interface CheckSelectBoxRootProps
+  extends SelectBoxVariantProps,
+    CheckboxPrimitive.RootProps {
+  /**
+   * Controls when the footer is visible.
+   * @default "when-selected"
+   */
+  footerVisibility?: "when-selected" | "when-not-selected" | "always";
+}
+
+export const CheckSelectBoxRoot = forwardRef<HTMLLabelElement, CheckSelectBoxRootProps>(
+  ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBox.splitVariantProps(props);
+    const classNames = selectBox({
+      ...useProps(),
+      ...variantProps,
+    });
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <CheckboxPrimitive.Root
+          ref={ref}
+          className={clsx(classNames.root, className)}
+          {...otherProps}
+        >
+          {footerVisibility === "always" ? (
+            children
+          ) : (
+            <FooterVisibilityProvider footerVisibility={footerVisibility}>
+              {children}
+            </FooterVisibilityProvider>
+          )}
+        </CheckboxPrimitive.Root>
+      </ClassNamesProvider>
+    );
+  },
+);
+
+export interface CheckSelectBoxTriggerProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CheckSelectBoxTrigger = withContext<HTMLDivElement, CheckSelectBoxTriggerProps>(
+  withStateProps(Primitive.div),
+  "trigger",
+);
+
+export interface CheckSelectBoxContentProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CheckSelectBoxContent = withContext<HTMLDivElement, CheckSelectBoxContentProps>(
+  withStateProps(Primitive.div),
+  "content",
+);
+
+export interface CheckSelectBoxBodyProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CheckSelectBoxBody = withContext<HTMLDivElement, CheckSelectBoxBodyProps>(
+  withStateProps(Primitive.div),
+  "body",
+);
+
+export interface CheckSelectBoxLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CheckSelectBoxLabel = withContext<HTMLDivElement, CheckSelectBoxLabelProps>(
+  withStateProps(Primitive.div),
+  "label",
+);
+
+export interface CheckSelectBoxDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CheckSelectBoxDescription = withContext<
+  HTMLDivElement,
+  CheckSelectBoxDescriptionProps
+>(withStateProps(Primitive.div), "description");
+
+const { withProvider: withCheckmarkProvider, withContext: withCheckmarkContext } =
+  createSlotRecipeContext(selectBoxCheckmark);
+const withCheckmarkStateProps = createWithStateProps([useCheckboxContext]);
+
+export interface CheckSelectBoxCheckmarkControlProps
+  extends SelectBoxCheckmarkVariantProps,
+    CheckboxPrimitive.ControlProps {}
+
+export const CheckSelectBoxCheckmarkControl = withCheckmarkProvider<
+  HTMLDivElement,
+  CheckSelectBoxCheckmarkControlProps
+>(CheckboxPrimitive.Control, "root");
+
+export interface CheckSelectBoxCheckmarkIconProps extends InternalIconProps {}
+
+export const CheckSelectBoxCheckmarkIcon = withCheckmarkContext<
+  SVGSVGElement,
+  CheckSelectBoxCheckmarkIconProps
+>(withCheckmarkStateProps(InternalIcon), "icon");
+
+export interface CheckSelectBoxHiddenInputProps extends CheckboxPrimitive.HiddenInputProps {}
+
+export const CheckSelectBoxHiddenInput = forwardRef<
+  HTMLInputElement,
+  CheckSelectBoxHiddenInputProps
+>((props, ref) => {
+  // when footerVisibility !== "when-selected", this context is automatically unavailable since it's not wrapped in CollapsibleProvider
+  const collapsibleContext = useCollapsibleContext({ strict: false });
+  const footerContext = useContext(FooterContext);
+
+  const triggerAriaProps = footerContext?.isFooterRendered
+    ? collapsibleContext?.triggerAriaProps
+    : undefined;
+
+  return <CheckboxPrimitive.HiddenInput ref={ref} {...triggerAriaProps} {...props} />;
+});
+CheckSelectBoxHiddenInput.displayName = "CheckSelectBoxHiddenInput";
+
+export interface CheckSelectBoxFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CheckSelectBoxFooter = forwardRef<HTMLDivElement, CheckSelectBoxFooterProps>(
+  ({ className, children, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { stateProps } = useCheckboxContext();
+    const collapsibleContext = useCollapsibleContext({ strict: false });
+    const footerContext = useContext(FooterContext);
+    const composedRef = composeRefs(ref, footerContext?.footerRef ?? null);
+
+    if (collapsibleContext) {
+      return (
+        <Collapsible.Content
+          ref={composedRef}
+          className={clsx(classNames.footer, className)}
+          {...stateProps}
+          {...props}
+        >
+          {children}
+        </Collapsible.Content>
+      );
+    }
+
+    return (
+      <Primitive.div
+        ref={composedRef}
+        className={clsx(classNames.footer, className)}
+        {...stateProps}
+        {...props}
+      >
+        {children}
+      </Primitive.div>
+    );
+  },
+);
+CheckSelectBoxFooter.displayName = "CheckSelectBoxFooter";

package/src/components/SelectBox/RadioSelectBox.namespace.ts

@@ -0,0 +1,20 @@
+export {
+  RadioSelectBoxBody as Body,
+  RadioSelectBoxContent as Content,
+  RadioSelectBoxDescription as Description,
+  RadioSelectBoxFooter as Footer,
+  RadioSelectBoxGroup as Group,
+  RadioSelectBoxHiddenInput as HiddenInput,
+  RadioSelectBoxItem as Item,
+  RadioSelectBoxLabel as Label,
+  RadioSelectBoxTrigger as Trigger,
+  type RadioSelectBoxBodyProps as BodyProps,
+  type RadioSelectBoxContentProps as ContentProps,
+  type RadioSelectBoxDescriptionProps as DescriptionProps,
+  type RadioSelectBoxFooterProps as FooterProps,
+  type RadioSelectBoxGroupProps as GroupProps,
+  type RadioSelectBoxHiddenInputProps as HiddenInputProps,
+  type RadioSelectBoxItemProps as ItemProps,
+  type RadioSelectBoxLabelProps as LabelProps,
+  type RadioSelectBoxTriggerProps as TriggerProps,
+} from "./RadioSelectBox";