@uniai-fe/uds-primitives 0.0.1

package/src/components/button/markup/Button.tsx

@@ -0,0 +1,175 @@
+import { Button as RadixButton } from "@radix-ui/themes";
+import { forwardRef } from "react";
+import type { ComponentProps } from "react";
+import type { ButtonProps } from "../types";
+import { composeButtonClassName } from "../utils";
+
+const BUTTON_INTENT_COLOR: Record<
+  NonNullable<ButtonProps["intent"]>,
+  NonNullable<ComponentProps<typeof RadixButton>["color"]>
+> = {
+  primary: "blue",
+  secondary: "sky",
+  teritary: "gray",
+};
+
+const BUTTON_VARIANT_MAP: Record<
+  NonNullable<ButtonProps["variant"]>,
+  NonNullable<ComponentProps<typeof RadixButton>["variant"]>
+> = {
+  solid: "solid",
+  outlined: "outline",
+  "text-button": "ghost",
+};
+
+const BUTTON_SIZE_MAP: Record<
+  NonNullable<ButtonProps["size"]>,
+  NonNullable<ComponentProps<typeof RadixButton>["size"]>
+> = {
+  xlarge: "4",
+  large: "3",
+  medium: "2",
+  small: "1",
+};
+
+/**
+ * 버튼 컴포넌트; Radix Theme 기반 범용 버튼
+ * @component
+ * @param {ButtonProps} props
+ * @param {ButtonVariant} [props.variant] solid / outlined / text-button
+ * @param {ButtonIntent} [props.intent] primary / secondary / teritary
+ * @param {ButtonSize} [props.size] small / medium / large / xlarge
+ * @param {ButtonShape} [props.shape] default / round
+ * @param {ButtonState} [props.state] default / readonly / disabled
+ * @param {boolean} [props.block] true면 width:100%
+ * @param {boolean} [props.loading] 로딩 상태 표시
+ * @param {ButtonIconSlot} [props.iconSlot] none / left / right
+ * @param {React.ReactNode} [props.icon] iconSlot에 표시할 아이콘
+ * @param {React.ReactElement} [props.prefix] 라벨 앞 slot
+ * @param {React.ReactElement} [props.suffix] 라벨 뒤 slot
+ * @param {React.ReactNode} [props.children] 버튼 라벨
+ *
+ * @example
+ * ```tsx
+ * <Button variant="solid" intent="primary" icon={<Icon />} iconSlot="left">
+ *   저장
+ * </Button>
+ * ```
+ */
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      icon,
+      prefix,
+      suffix,
+      iconSlot = "none",
+      variant = "solid",
+      intent = "primary",
+      size = "medium",
+      shape = "default",
+      state: stateProp = "default",
+      block = false,
+      loading = false,
+      className,
+      "data-simulated-state": simulatedState,
+      disabled: disabledProp,
+      type: typeProp,
+      ...restProps
+    },
+    forwardedRef,
+  ) => {
+    const normalizedChildren =
+      children === null || children === undefined ? null : typeof children ===
+          "string" || typeof children === "number" ? (
+        <span className="button-label" data-slot="label">
+          {children}
+        </span>
+      ) : (
+        children
+      );
+    const resolvedState = disabledProp ? "disabled" : stateProp;
+    const isReadonly = resolvedState === "readonly";
+    const isDisabled = resolvedState === "disabled" || isReadonly;
+    const isIconOnly =
+      Boolean(icon) &&
+      iconSlot !== "none" &&
+      !normalizedChildren &&
+      !prefix &&
+      !suffix;
+    const combinedClassName = composeButtonClassName({
+      variant,
+      intent,
+      size,
+      shape,
+      block,
+      loading,
+      iconSlot,
+      iconOnly: isIconOnly,
+      state: resolvedState,
+      className,
+    });
+    const content = (
+      <>
+        {prefix ? (
+          <span className="button-prefix" data-slot="prefix">
+            {prefix}
+          </span>
+        ) : null}
+        {iconSlot === "left" && icon ? (
+          <span className="button-icon" data-slot="left">
+            {icon}
+          </span>
+        ) : null}
+        {normalizedChildren}
+        {iconSlot === "right" && icon ? (
+          <span className="button-icon" data-slot="right">
+            {icon}
+          </span>
+        ) : null}
+        {suffix ? (
+          <span className="button-suffix" data-slot="suffix">
+            {suffix}
+          </span>
+        ) : null}
+      </>
+    );
+
+    return (
+      <RadixButton
+        {...restProps}
+        ref={forwardedRef}
+        variant={BUTTON_VARIANT_MAP[variant]}
+        color={BUTTON_INTENT_COLOR[intent]}
+        size={BUTTON_SIZE_MAP[size]}
+        radius={shape === "round" ? "full" : "medium"}
+        highContrast={false}
+        loading={loading}
+        disabled={isDisabled}
+        aria-busy={loading || undefined}
+        aria-disabled={isReadonly ? true : undefined}
+        type={typeProp ?? "button"}
+        className={combinedClassName}
+        data-variant={variant}
+        data-intent={intent}
+        data-size={size}
+        data-shape={shape}
+        data-state={resolvedState}
+        data-block={block ? "true" : undefined}
+        data-disabled={isDisabled ? "true" : undefined}
+        data-loading={loading ? "true" : undefined}
+        data-icon-slot={iconSlot}
+        data-icon-only={isIconOnly ? "true" : undefined}
+        data-prefix={prefix ? "true" : undefined}
+        data-suffix={suffix ? "true" : undefined}
+        data-simulated-state={simulatedState}
+      >
+        {content}
+      </RadixButton>
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+export { Button };

package/src/components/button/markup/index.tsx

@@ -0,0 +1 @@
+export { Button } from "./Button";