@uniai-fe/uds-primitives 0.0.1

package/src/components/chip/styles/index.scss

@@ -0,0 +1,140 @@
+@use "@uniai-fe/uds-foundation/css";
+
+/* Chip 기본 토큰 래핑 */
+:where(.radix-themes, .theme-root, :root) {
+  --theme-chip-height: var(--theme-size-small-3, 32px);
+  --theme-chip-padding-inline: var(--spacing-padding-5, 12px);
+  --theme-chip-radius: var(--theme-radius-medium-3, 8px);
+  --theme-chip-rounded-radius: var(--theme-radius-large-2, 16px);
+  --theme-chip-font-family: var(--font-body-medium-family, "Pretendard");
+  --theme-chip-font-size: var(--font-body-xsmall-size, 13px);
+  --theme-chip-font-weight: var(--font-body-xsmall-weight, 400);
+}
+
+.chip {
+  --chip-gap: var(--spacing-gap-1, 4px);
+  --chip-bg: transparent;
+  --chip-border-color: transparent;
+  --chip-label-color: var(--color-label-standard, #3d3f43);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--chip-gap);
+  height: var(--theme-chip-height);
+  padding-inline: var(--theme-chip-padding-inline);
+  padding-block: 0;
+  border-radius: var(--theme-chip-radius);
+  border: 1px solid var(--chip-border-color);
+  background-color: var(--chip-bg);
+  color: var(--chip-label-color);
+  font-family: var(--theme-chip-font-family);
+  font-size: var(--theme-chip-font-size);
+  font-weight: var(--theme-chip-font-weight);
+  line-height: 1;
+  letter-spacing: 0.2px;
+  box-sizing: border-box;
+  margin: 0;
+  width: fit-content;
+  transition:
+    background-color 0.16s ease,
+    color 0.16s ease,
+    border-color 0.16s ease,
+    opacity 0.16s ease;
+}
+
+button.chip {
+  appearance: none;
+  cursor: pointer;
+}
+
+figure.chip {
+  margin: 0;
+}
+
+.chip:focus-visible {
+  outline: 2px solid var(--color-primary-default, #1a6aff);
+  outline-offset: 2px;
+}
+
+.chip:where([data-kind="filter"]),
+.chip:where([data-kind="filter-rounded"]) {
+  --chip-bg: var(--color-bg-surface-standard, #f2f2f3);
+  --chip-label-color: var(--color-label-neutral, #797e86);
+  --chip-border-color: transparent;
+}
+
+.chip:where([data-kind="filter"][data-selected="true"]),
+.chip:where([data-kind="filter-rounded"][data-selected="true"]) {
+  --chip-bg: var(--color-bg-surface-heavy, #313235);
+  --chip-label-color: var(--color-common-100, #ffffff);
+}
+
+.chip:where([data-kind="filter-rounded"]) {
+  border-radius: var(--theme-chip-rounded-radius);
+}
+
+.chip:where([data-kind="assist"]) {
+  --chip-bg: var(--color-bg-surface-static-neutral, #f2f2f2);
+  --chip-label-color: var(--color-label-strong, #18191b);
+  --chip-gap: var(--spacing-gap-2, 8px);
+  --chip-border-color: transparent;
+}
+
+.chip:where([data-kind="assist"][data-selected="true"]) {
+  --chip-label-color: var(--color-primary-default, #1a6aff);
+}
+
+.chip:where([data-kind="input"]) {
+  --chip-gap: var(--spacing-gap-1, 4px);
+  --chip-bg: var(--color-common-100, #ffffff);
+  --chip-label-color: var(--color-label-standard, #3d3f43);
+  --chip-border-color: var(--color-border-standard-assistive, #e4e5e7);
+  padding-inline-start: var(--spacing-padding-4, 8px);
+  padding-inline-end: var(--spacing-padding-2, 4px);
+}
+
+.chip:where([data-kind="input"][data-selected="true"]) {
+  --chip-border-color: var(--color-border-standard-blue, #ccdeff);
+}
+
+.chip-leading {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  flex-shrink: 0;
+}
+
+.chip-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-1, 4px);
+  color: inherit;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.chip-remove-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  background: transparent;
+  color: var(--color-label-neutral, #797e86);
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.16s ease;
+}
+
+.chip-remove-button:hover,
+.chip-remove-button:focus-visible {
+  color: var(--color-label-strong, #18191b);
+}
+
+.chip-remove-button svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/src/components/chip/types/index.ts

@@ -0,0 +1,52 @@
+import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react";
+
+export const CHIP_KINDS = [
+  "filter",
+  "filter-rounded",
+  "assist",
+  "input",
+] as const;
+
+export type ChipKind = (typeof CHIP_KINDS)[number];
+export type InteractiveChipKind = Exclude<ChipKind, "input">;
+
+type ButtonProps = Omit<ComponentPropsWithoutRef<"button">, "children">;
+type FigureProps = Omit<ComponentPropsWithoutRef<"figure">, "children">;
+
+export interface ChipCommonProps {
+  /**
+   * 표시할 라벨.
+   */
+  children?: ReactNode;
+  /**
+   * 선택 상태. filter 계열에서 외부 상태로 제어한다.
+   */
+  selected?: boolean;
+  /**
+   * assist kind 전용 leading slot.
+   */
+  leading?: ReactNode;
+  /**
+   * input kind 전용 제거 버튼 aria-label.
+   */
+  removeButtonLabel?: string;
+}
+
+export interface ChipInteractiveProps extends ChipCommonProps, ButtonProps {
+  kind?: InteractiveChipKind;
+}
+
+export interface ChipInputProps extends ChipCommonProps, FigureProps {
+  kind: "input";
+  onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+
+export type ChipProps = ChipInteractiveProps | ChipInputProps;
+
+export interface ChipClassNameOptions {
+  kind: ChipKind;
+  selected?: boolean;
+  hasLeading?: boolean;
+  removable?: boolean;
+  className?: string;
+}

package/src/components/chip/utils/index.ts

@@ -0,0 +1,36 @@
+import clsx from "clsx";
+import type { ChipClassNameOptions } from "../types";
+
+const CHIP_CLASSNAME = "chip";
+const CHIP_LEADING_CLASSNAME = "chip-leading";
+const CHIP_LABEL_CLASSNAME = "chip-label";
+const CHIP_REMOVE_BUTTON_CLASSNAME = "chip-remove-button";
+
+/**
+ * Chip은 kind/selected/slot 여부에 따른 modifier class가 많아 helper로 묶는다.
+ */
+const composeChipClassName = ({
+  kind,
+  selected,
+  hasLeading,
+  removable,
+  className,
+}: ChipClassNameOptions) =>
+  clsx(
+    CHIP_CLASSNAME,
+    `${CHIP_CLASSNAME}--kind-${kind}`,
+    {
+      [`${CHIP_CLASSNAME}--selected`]: Boolean(selected),
+      [`${CHIP_CLASSNAME}--has-leading`]: Boolean(hasLeading),
+      [`${CHIP_CLASSNAME}--removable`]: Boolean(removable),
+    },
+    className,
+  );
+
+export {
+  CHIP_CLASSNAME,
+  CHIP_LABEL_CLASSNAME,
+  CHIP_LEADING_CLASSNAME,
+  CHIP_REMOVE_BUTTON_CLASSNAME,
+  composeChipClassName,
+};

package/src/components/dialog/hooks/index.ts

@@ -0,0 +1,4 @@
+/**
+ * TODO(dialog): 접근성/상태 계산 hook을 정의한다.
+ */
+export {};

package/src/components/dialog/index.scss

@@ -0,0 +1 @@
+@use "./styles/index.scss";

package/src/components/dialog/index.tsx

@@ -0,0 +1,3 @@
+import "./index.scss";
+
+export * from "./markup";

package/src/components/dialog/markup/confirm-dialog.tsx

@@ -0,0 +1,316 @@
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import clsx from "clsx";
+import { createContext, forwardRef, useContext, useState } from "react";
+import type {
+  ConfirmDialogActionProps,
+  ConfirmDialogCancelProps,
+  ConfirmDialogContentProps,
+  ConfirmDialogDescriptionProps,
+  ConfirmDialogOverlayProps,
+  ConfirmDialogSectionProps,
+  ConfirmDialogTitleProps,
+  ConfirmDialogRootProps,
+} from "../types";
+import type { PointerEvent } from "react";
+
+type ConfirmDialogInternalContextValue = {
+  requestClose: () => void;
+};
+
+const ConfirmDialogInternalContext = createContext<
+  ConfirmDialogInternalContextValue | undefined
+>(undefined);
+
+const useConfirmDialogInternalContext = () => {
+  const context = useContext(ConfirmDialogInternalContext);
+  if (!context) {
+    throw new Error(
+      "ConfirmDialog components must be used within ConfirmDialogRoot",
+    );
+  }
+  return context;
+};
+
+/**
+ * ConfirmDialogRoot; AlertDialog 루트
+ * @component
+ * @param {ConfirmDialogRootProps} props
+ */
+const ConfirmDialogRoot = ({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  children,
+  ...restProps
+}: ConfirmDialogRootProps) => {
+  const isControlled = openProp !== undefined;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(
+    defaultOpen ?? false,
+  );
+  const resolvedOpen = isControlled ? openProp : uncontrolledOpen;
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!isControlled) {
+      setUncontrolledOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  };
+
+  return (
+    <ConfirmDialogInternalContext.Provider
+      value={{
+        requestClose: () => handleOpenChange(false),
+      }}
+    >
+      <AlertDialogPrimitive.Root
+        {...restProps}
+        open={resolvedOpen}
+        onOpenChange={handleOpenChange}
+      >
+        {children}
+      </AlertDialogPrimitive.Root>
+    </ConfirmDialogInternalContext.Provider>
+  );
+};
+const ConfirmDialogTrigger = AlertDialogPrimitive.Trigger;
+const ConfirmDialogPortal = AlertDialogPrimitive.Portal;
+
+/**
+ * ConfirmDialogOverlay; 취소 성격의 바깥 dim
+ * @component
+ * @param {ConfirmDialogOverlayProps} props
+ */
+const ConfirmDialogOverlay = forwardRef<
+  HTMLDivElement,
+  ConfirmDialogOverlayProps
+>(
+  (
+    { className, disableOutsideClose = false, onPointerDown, ...props },
+    forwardedRef,
+  ) => {
+    const { requestClose } = useConfirmDialogInternalContext();
+
+    const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
+      onPointerDown?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      if (disableOutsideClose) {
+        return;
+      }
+      requestClose();
+    };
+
+    return (
+      <AlertDialogPrimitive.Overlay
+        {...props}
+        ref={forwardedRef}
+        className={clsx("dialog-overlay confirm-dialog-overlay", className)}
+        data-variant="confirm"
+        onPointerDown={handlePointerDown}
+      />
+    );
+  },
+);
+
+ConfirmDialogOverlay.displayName = "ConfirmDialogOverlay";
+
+/**
+ * ConfirmDialogContent; AlertDialog 패널
+ * @component
+ * @param {ConfirmDialogContentProps} props
+ */
+const ConfirmDialogContent = forwardRef<
+  HTMLDivElement,
+  ConfirmDialogContentProps
+>(({ className, children, ...props }, forwardedRef) => (
+  <AlertDialogPrimitive.Content
+    {...props}
+    ref={forwardedRef}
+    className={clsx("dialog-content confirm-dialog-content", className)}
+    data-variant="confirm"
+  >
+    {children}
+  </AlertDialogPrimitive.Content>
+));
+
+ConfirmDialogContent.displayName = "ConfirmDialogContent";
+
+/**
+ * ConfirmDialogTitle; AlertDialog 제목
+ * @component
+ * @param {ConfirmDialogTitleProps} props
+ */
+const ConfirmDialogTitle = forwardRef<
+  HTMLHeadingElement,
+  ConfirmDialogTitleProps
+>(({ className, visuallyHidden = false, children, ...props }, forwardedRef) => {
+  const titleNode = (
+    <AlertDialogPrimitive.Title
+      {...props}
+      ref={forwardedRef}
+      className={clsx("dialog-title confirm-dialog-title", className)}
+      data-variant="confirm"
+    >
+      {children}
+    </AlertDialogPrimitive.Title>
+  );
+
+  if (visuallyHidden) {
+    return <VisuallyHidden asChild>{titleNode}</VisuallyHidden>;
+  }
+
+  return titleNode;
+});
+
+ConfirmDialogTitle.displayName = "ConfirmDialogTitle";
+
+/**
+ * ConfirmDialogDescription; AlertDialog 설명
+ * @component
+ * @param {ConfirmDialogDescriptionProps} props
+ */
+const ConfirmDialogDescription = forwardRef<
+  HTMLParagraphElement,
+  ConfirmDialogDescriptionProps
+>(({ className, visuallyHidden = false, children, ...props }, forwardedRef) => {
+  const descriptionNode = (
+    <AlertDialogPrimitive.Description
+      {...props}
+      ref={forwardedRef}
+      className={clsx(
+        "dialog-description confirm-dialog-description",
+        className,
+      )}
+      data-variant="confirm"
+    >
+      {children}
+    </AlertDialogPrimitive.Description>
+  );
+
+  if (visuallyHidden) {
+    return <VisuallyHidden asChild>{descriptionNode}</VisuallyHidden>;
+  }
+
+  return descriptionNode;
+});
+
+ConfirmDialogDescription.displayName = "ConfirmDialogDescription";
+
+/**
+ * ConfirmDialogHeader; 헤더 영역
+ * @component
+ * @param {ConfirmDialogSectionProps} props
+ */
+const ConfirmDialogHeader = forwardRef<
+  HTMLDivElement,
+  ConfirmDialogSectionProps
+>(({ className, ...props }, forwardedRef) => (
+  <div
+    {...props}
+    ref={forwardedRef}
+    className={clsx("dialog-section confirm-dialog-header", className)}
+    data-section="header"
+  />
+));
+
+ConfirmDialogHeader.displayName = "ConfirmDialogHeader";
+
+/**
+ * ConfirmDialogBody; 본문 영역
+ * @component
+ * @param {ConfirmDialogSectionProps} props
+ */
+const ConfirmDialogBody = forwardRef<HTMLDivElement, ConfirmDialogSectionProps>(
+  ({ className, ...props }, forwardedRef) => (
+    <div
+      {...props}
+      ref={forwardedRef}
+      className={clsx("dialog-section confirm-dialog-body", className)}
+      data-section="body"
+    />
+  ),
+);
+
+ConfirmDialogBody.displayName = "ConfirmDialogBody";
+
+/**
+ * ConfirmDialogActions; 버튼 영역
+ * @component
+ * @param {ConfirmDialogSectionProps} props
+ */
+const ConfirmDialogActions = forwardRef<
+  HTMLDivElement,
+  ConfirmDialogSectionProps
+>(({ className, ...props }, forwardedRef) => (
+  <div
+    {...props}
+    ref={forwardedRef}
+    className={clsx("dialog-section confirm-dialog-actions", className)}
+    data-section="actions"
+  />
+));
+
+ConfirmDialogActions.displayName = "ConfirmDialogActions";
+
+/**
+ * ConfirmDialogCancelButton; AlertDialog Cancel wrapper
+ * @component
+ * @param {ConfirmDialogCancelProps} props
+ */
+const ConfirmDialogCancel = forwardRef<
+  HTMLButtonElement,
+  ConfirmDialogCancelProps
+>(({ className, asChild, ...props }, forwardedRef) => (
+  <AlertDialogPrimitive.Cancel
+    {...props}
+    asChild={asChild}
+    ref={forwardedRef}
+    className={clsx(
+      !asChild && "dialog-button confirm-dialog-cancel",
+      className,
+    )}
+    data-native-element={asChild ? undefined : "true"}
+  />
+));
+
+ConfirmDialogCancel.displayName = "ConfirmDialogCancel";
+
+/**
+ * ConfirmDialogActionButton; AlertDialog Action wrapper
+ * @component
+ * @param {ConfirmDialogActionProps} props
+ */
+const ConfirmDialogAction = forwardRef<
+  HTMLButtonElement,
+  ConfirmDialogActionProps
+>(({ className, asChild, ...props }, forwardedRef) => (
+  <AlertDialogPrimitive.Action
+    {...props}
+    asChild={asChild}
+    ref={forwardedRef}
+    className={clsx(
+      !asChild && "dialog-button confirm-dialog-action",
+      className,
+    )}
+    data-native-element={asChild ? undefined : "true"}
+  />
+));
+
+ConfirmDialogAction.displayName = "ConfirmDialogAction";
+
+export {
+  ConfirmDialogRoot,
+  ConfirmDialogTrigger,
+  ConfirmDialogPortal,
+  ConfirmDialogOverlay,
+  ConfirmDialogContent,
+  ConfirmDialogTitle,
+  ConfirmDialogDescription,
+  ConfirmDialogHeader,
+  ConfirmDialogBody,
+  ConfirmDialogActions,
+  ConfirmDialogCancel,
+  ConfirmDialogAction,
+};

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

@@ -0,0 +1,4 @@
+"use client";
+
+export * from "./notice-dialog";
+export * from "./confirm-dialog";