@seed-design/react 0.0.1-alpha-20250210081704

package/src/components/ToggleButton/ToggleButton.namespace.ts

@@ -0,0 +1,12 @@
+export {
+  ToggleButtonLabel as Label,
+  ToggleButtonPrefixIcon as PrefixIcon,
+  ToggleButtonProgressIndicator as ProgressIndicator,
+  ToggleButtonRoot as Root,
+  ToggleButtonSuffixIcon as SuffixIcon,
+  type ToggleButtonLabelProps as LabelProps,
+  type ToggleButtonPrefixIconProps as PrefixIconProps,
+  type ToggleButtonProgressIndicatorProps as ProgressIndicatorProps,
+  type ToggleButtonRootProps as RootProps,
+  type ToggleButtonSuffixIconProps as SuffixIconProps,
+} from "./ToggleButton";

package/src/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,75 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { Toggle as TogglePrimitive, useToggleContext } from "@seed-design/react-toggle";
+import { toggleButton, type ToggleButtonVariantProps } from "@seed-design/recipe/toggleButton";
+import clsx from "clsx";
+import * as React from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { Icon, type IconProps } from "../private/Icon";
+import {
+  PendingButtonProvider,
+  usePendingButton,
+  usePendingButtonContext,
+  type UsePendingButtonProps,
+} from "../private/usePendingButton";
+
+const { ClassNamesProvider, withContext } = createStyleContext(toggleButton);
+const withStateProps = createWithStateProps([usePendingButtonContext, useToggleContext]);
+
+export interface ToggleButtonRootProps
+  extends ToggleButtonVariantProps,
+    UsePendingButtonProps,
+    TogglePrimitive.RootProps {}
+
+export const ToggleButtonRoot = React.forwardRef<HTMLButtonElement, ToggleButtonRootProps>(
+  ({ variant = "brandSolid", size = "small", loading = false, className, ...otherProps }, ref) => {
+    const classNames = toggleButton({ variant, size });
+    const api = usePendingButton({ loading, disabled: otherProps.disabled });
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <PendingButtonProvider value={api}>
+          <TogglePrimitive.Root
+            ref={ref}
+            className={clsx(classNames.root, className)}
+            {...api.stateProps}
+            {...otherProps}
+          />
+        </PendingButtonProvider>
+      </ClassNamesProvider>
+    );
+  },
+);
+ToggleButtonRoot.displayName = "ToggleButton";
+
+export interface ToggleButtonLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const ToggleButtonLabel = withContext<HTMLSpanElement, ToggleButtonLabelProps>(
+  withStateProps(Primitive.span),
+  "label",
+);
+
+export interface ToggleButtonPrefixIconProps extends IconProps {}
+
+export const ToggleButtonPrefixIcon = withContext<SVGSVGElement, ToggleButtonPrefixIconProps>(
+  withStateProps(Icon),
+  "prefixIcon",
+);
+
+export interface ToggleButtonSuffixIconProps extends IconProps {}
+
+export const ToggleButtonSuffixIcon = withContext<SVGSVGElement, ToggleButtonSuffixIconProps>(
+  withStateProps(Icon),
+  "suffixIcon",
+);
+
+export interface ToggleButtonProgressIndicatorProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ToggleButtonProgressIndicator = withContext<
+  HTMLDivElement,
+  ToggleButtonProgressIndicatorProps
+>(withStateProps(Primitive.div), "progressIndicator");

package/src/components/ToggleButton/index.ts

@@ -0,0 +1,14 @@
+export {
+  ToggleButtonLabel,
+  ToggleButtonPrefixIcon,
+  ToggleButtonProgressIndicator,
+  ToggleButtonRoot,
+  ToggleButtonSuffixIcon,
+  type ToggleButtonLabelProps,
+  type ToggleButtonPrefixIconProps,
+  type ToggleButtonProgressIndicatorProps,
+  type ToggleButtonRootProps,
+  type ToggleButtonSuffixIconProps,
+} from "./ToggleButton";
+
+export * as ToggleButton from "./ToggleButton.namespace";

package/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -0,0 +1,13 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { visuallyHidden } from "@seed-design/recipe/visuallyHidden";
+import type * as React from "react";
+import { createStyleContext } from "../../utils/createStyleContext";
+
+const { withProvider } = createStyleContext(visuallyHidden);
+
+export interface VisuallyHiddenProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const VisuallyHidden = withProvider<HTMLDivElement, VisuallyHiddenProps>(
+  Primitive.div,
+  "root",
+);

package/src/components/VisuallyHidden/index.tsx

@@ -0,0 +1 @@
+export { VisuallyHidden, type VisuallyHiddenProps } from "./VisuallyHidden";

package/src/components/index.ts

@@ -0,0 +1,37 @@
+export * from "./ActionButton";
+export * from "./ActionChip";
+export * from "./ActionSheet";
+export * from "./Avatar";
+export * from "./Badge";
+export * from "./BottomSheet";
+export * from "./Box";
+export * from "./Callout";
+export * from "./Celcius";
+export * from "./Checkbox";
+export * from "./ChipTabs";
+export * from "./Columns";
+export * from "./ControlChip";
+export * from "./Dialog";
+export * from "./ExtendedActionSheet";
+export * from "./ExtendedFab";
+export * from "./Fab";
+export * from "./Flex";
+export * from "./HelpBubble";
+export * from "./Inline";
+export * from "./InlineBanner";
+export * from "./MannerTempBadge";
+export * from "./ProgressCircle";
+export * from "./PullToRefresh";
+export * from "./ReactionButton";
+export * from "./SegmentedControl";
+export * from "./SelectBox";
+export * from "./Skeleton";
+export * from "./Snackbar";
+export * from "./Stack";
+export * from "./Switch";
+export * from "./Tabs";
+export * from "./Text";
+export * from "./TextButton";
+export * from "./TextField";
+export * from "./ToggleButton";
+export * from "./VisuallyHidden";

package/src/components/private/Icon.tsx

@@ -0,0 +1,15 @@
+import { Primitive } from "@seed-design/react-primitive";
+import { forwardRef } from "react";
+
+export interface IconProps {
+  svg: React.ReactNode;
+}
+
+export const Icon = forwardRef<SVGSVGElement, IconProps>(({ svg, ...otherProps }, ref) => {
+  return (
+    // biome-ignore lint/a11y/noSvgWithoutTitle: SVG is used as a child of a button element, so it is not required to have a title
+    <Primitive.svg ref={ref} aria-hidden asChild {...otherProps}>
+      {svg}
+    </Primitive.svg>
+  );
+});

package/src/components/private/useDismissible.tsx

@@ -0,0 +1,86 @@
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { buttonProps, elementProps, mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import * as React from "react";
+
+export interface UseDismissibleProps {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onDismiss?: () => void;
+}
+
+export type UseDismissibleReturn = ReturnType<typeof useDismissible>;
+
+export function useDismissible(props: UseDismissibleProps) {
+  const [open = true, setOpen] = useControllableState({
+    prop: props.open,
+    defaultProp: props.defaultOpen,
+    onChange: (open) => {
+      if (!open) {
+        props.onDismiss?.();
+      }
+    },
+  });
+
+  const dismiss = React.useCallback(() => setOpen(false), [setOpen]);
+
+  return {
+    open,
+    dismiss,
+
+    rootProps: elementProps({}),
+
+    dismissButtonProps: buttonProps({
+      onClick: (e) => {
+        if (e.defaultPrevented) return;
+
+        dismiss();
+      },
+    }),
+  };
+}
+
+const DismissibleContext = React.createContext<ReturnType<typeof useDismissible> | null>(null);
+
+export const DismissibleProvider = DismissibleContext.Provider;
+
+export const useDismissibleContext = () => {
+  const context = React.useContext(DismissibleContext);
+  if (context === null) {
+    throw new Error("useDismissibleContext should be used within DismissibleProvider");
+  }
+
+  return context;
+};
+
+export interface DismissibleRootProps
+  extends PrimitiveProps,
+    UseDismissibleProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const DismissibleRoot = React.forwardRef<HTMLDivElement, DismissibleRootProps>(
+  ({ defaultOpen, open, onDismiss, ...otherProps }, ref) => {
+    const api = useDismissible({ defaultOpen, open, onDismiss });
+
+    if (!api.open) return null;
+
+    return (
+      <DismissibleProvider value={api}>
+        <Primitive.div ref={ref} {...otherProps} />
+      </DismissibleProvider>
+    );
+  },
+);
+
+export interface DismissibleDismissButtonProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+export const DismissibleDismissButton = React.forwardRef<
+  HTMLButtonElement,
+  DismissibleDismissButtonProps
+>((props, ref) => {
+  const { dismissButtonProps } = useDismissibleContext();
+
+  return <Primitive.button ref={ref} {...mergeProps(dismissButtonProps, props)} />;
+});

package/src/components/private/usePendingButton.tsx

@@ -0,0 +1,45 @@
+import { elementProps } from "@seed-design/dom-utils";
+import * as React from "react";
+
+export interface UsePendingButtonProps {
+  /**
+   * 버튼에 등록된 비동기 작업이 진행 중임을 사용자에게 알립니다.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * 버튼의 비활성화 여부를 나타냅니다.
+   * @default false
+   */
+  disabled?: boolean;
+}
+
+export type UsePendingButtonReturn = ReturnType<typeof usePendingButton>;
+
+export function usePendingButton(props: UsePendingButtonProps) {
+  const { loading, disabled } = props;
+  const stateProps = elementProps({
+    "data-loading": loading ? "" : undefined,
+    "data-disabled": disabled ? "" : undefined,
+  });
+
+  return {
+    loading,
+    disabled,
+    stateProps,
+  };
+}
+
+const PendingButtonContext = React.createContext<ReturnType<typeof usePendingButton> | null>(null);
+
+export const PendingButtonProvider = PendingButtonContext.Provider;
+
+export const usePendingButtonContext = () => {
+  const context = React.useContext(PendingButtonContext);
+  if (context === null) {
+    throw new Error("usePendingButtonContext should be used within UsePendingButtonProvider");
+  }
+
+  return context;
+};

package/src/index.tsx

@@ -0,0 +1 @@
+export * from "./components";

package/src/primitive.ts

@@ -0,0 +1,11 @@
+export * from "@seed-design/react-avatar";
+export * from "@seed-design/react-checkbox";
+export * from "@seed-design/react-dialog";
+export * from "@seed-design/react-popover";
+export * from "@seed-design/react-progress";
+export * from "@seed-design/react-pull-to-refresh";
+export * from "@seed-design/react-radio-group";
+export * from "@seed-design/react-snackbar";
+export * from "@seed-design/react-switch";
+export * from "@seed-design/react-tabs";
+export * from "@seed-design/react-toggle";

package/src/utils/createStyleContext.tsx

@@ -0,0 +1,125 @@
+import clsx from "clsx";
+import { createContext, forwardRef, useContext } from "react";
+
+type Recipe<
+  Props extends Record<string, string | boolean | undefined>,
+  Classnames extends Record<string, string>,
+> = ((props?: Props) => Classnames) & {
+  splitVariantProps: <T extends Props>(props: T) => [Props, Omit<T, keyof Props>];
+};
+
+export function createStyleContext<
+  Props extends Record<string, string | boolean | undefined>,
+  Classnames extends Record<string, string>,
+>(recipe: Recipe<Props, Classnames>) {
+  const ClassNamesContext = createContext<Classnames | null>(null);
+  const PropsContext = createContext<Props | null>(null);
+
+  const ClassNamesProvider = ({
+    children,
+    value,
+  }: { children: React.ReactNode; value: Classnames }) => {
+    return <ClassNamesContext.Provider value={value}>{children}</ClassNamesContext.Provider>;
+  };
+
+  const PropsProvider = ({ children, value }: { children: React.ReactNode; value: Props }) => {
+    return <PropsContext.Provider value={value}>{children}</PropsContext.Provider>;
+  };
+
+  function useClassNames() {
+    const context = useContext(ClassNamesContext);
+    if (context === null) {
+      throw new Error(
+        "useClassNames must be used within a ClassNamesProvider. Did you forget to wrap your component in a ClassNamesProvider?",
+      );
+    }
+
+    return context;
+  }
+
+  function useProps() {
+    return useContext(PropsContext);
+  }
+
+  const withRootProvider = <P,>(
+    Component: React.ElementType<any>,
+    options?: {
+      defaultProps?: Partial<P>;
+    },
+  ): React.ForwardRefExoticComponent<React.PropsWithoutRef<P>> => {
+    const { defaultProps } = options ?? {};
+
+    const StyledComponent = (innerProps: any) => {
+      const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps } as Props &
+        React.HTMLAttributes<HTMLElement>;
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps); // TODO: should we memoize this?
+
+      return (
+        <ClassNamesProvider value={classNames}>
+          <Component {...otherProps} />
+        </ClassNamesProvider>
+      );
+    };
+
+    // @ts-ignore
+    StyledComponent.displayName = Component.displayName || Component.name;
+
+    return StyledComponent as any;
+  };
+
+  const withProvider = <T, P>(
+    Component: React.ElementType<any>,
+    slot: keyof Classnames,
+    options?: {
+      defaultProps?: Partial<P>;
+    },
+  ): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>> => {
+    const { defaultProps } = options ?? {};
+
+    const StyledComponent = forwardRef<any, any>((innerProps, ref) => {
+      const props = { ...(defaultProps ?? {}), ...useProps(), ...innerProps } as Props &
+        React.HTMLAttributes<HTMLElement>;
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const classNames = recipe(variantProps); // TODO: should we memoize this?
+      const className = classNames[slot as keyof typeof classNames];
+
+      return (
+        <ClassNamesProvider value={classNames}>
+          <Component ref={ref} {...otherProps} className={clsx(className, props.className)} />
+        </ClassNamesProvider>
+      );
+    });
+
+    // @ts-ignore
+    StyledComponent.displayName = Component.displayName || Component.name;
+
+    return StyledComponent as any;
+  };
+
+  const withContext = <T, P>(
+    Component: React.ElementType<any>,
+    slot?: keyof Classnames,
+  ): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>> => {
+    const StyledComponent = forwardRef<any, React.HTMLAttributes<HTMLElement>>((props, ref) => {
+      const classNames = useClassNames();
+      const className = classNames?.[slot as keyof typeof classNames];
+
+      return <Component ref={ref} {...props} className={clsx(className, props.className)} />;
+    });
+
+    // @ts-ignore
+    StyledComponent.displayName = Component.displayName || Component.name;
+    return StyledComponent as any;
+  };
+
+  return {
+    ClassNamesProvider,
+    PropsProvider,
+    useClassNames,
+    useProps,
+    withRootProvider,
+    withProvider,
+    withContext,
+  };
+}

package/src/utils/createWithStateProps.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from "react";
+
+type AtLeastOne<T> = [T, ...T[]];
+
+export function createWithStateProps(
+  useContexts: AtLeastOne<
+    (prop?: { strict?: boolean }) => { stateProps: React.HTMLAttributes<HTMLElement> } | null
+  >,
+  options?: { strict?: boolean },
+) {
+  const strict = options?.strict ?? true;
+
+  return function withStateProps<P, R>(Component: React.ComponentType<P & React.RefAttributes<R>>) {
+    const Node = forwardRef<R, P>((props, ref) => {
+      const stateProps = {};
+      for (const useContext of useContexts) {
+        Object.assign(stateProps, useContext({ strict })?.stateProps);
+      }
+
+      // @ts-ignore
+      return <Component ref={ref} {...stateProps} {...props} />;
+    });
+
+    Node.displayName = Component.displayName || Component.name;
+
+    return Node;
+  };
+}

package/src/vars.ts

@@ -0,0 +1 @@
+export * from "@seed-design/vars";