@uniai-fe/uds-primitives 0.0.18 → 0.0.20

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

@@ -1,209 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
-import clsx from "clsx";
-import { forwardRef } from "react";
-import type {
-  NoticeDialogSectionProps,
-  NoticeDialogTitleProps,
-  NoticeDialogDescriptionProps,
-  NoticeDialogContentProps,
-  NoticeDialogOverlayProps,
-} from "../types";
-
-/**
- * NoticeDialogRoot; 공통 Dialog 상태 제어 루트
- * @component
- * @param {NoticeDialogRootProps} props
- * @param {boolean} [props.open] 제어형 open 상태.
- * @param {boolean} [props.defaultOpen] 비제어 초기 open 상태.
- * @param {(open: boolean) => void} [props.onOpenChange] open 변경 콜백.
- */
-const NoticeDialogRoot = DialogPrimitive.Root;
-const NoticeDialogTrigger = DialogPrimitive.Trigger;
-const NoticeDialogPortal = DialogPrimitive.Portal;
-const NoticeDialogClose = DialogPrimitive.Close;
-
-/**
- * NoticeDialogOverlay; dim 영역
- * @component
- * @param {NoticeDialogOverlayProps} props
- * @param {string} [props.className] overlay className.
- */
-const NoticeDialogOverlay = forwardRef<
-  HTMLDivElement,
-  NoticeDialogOverlayProps
->(({ className, ...props }, forwardedRef) => (
-  <DialogPrimitive.Overlay
-    {...props}
-    ref={forwardedRef}
-    className={clsx("dialog-overlay notice-dialog-overlay", className)}
-    data-variant="notice"
-  />
-));
-
-NoticeDialogOverlay.displayName = "NoticeDialogOverlay";
-
-/**
- * NoticeDialogContent; 콘텐츠 패널
- * @component
- * @param {NoticeDialogContentProps} props
- * @param {string} [props.className] content className.
- * @param {React.ReactNode} [props.children] panel 내용.
- */
-const NoticeDialogContent = forwardRef<
-  HTMLDivElement,
-  NoticeDialogContentProps
->(({ className, children, ...props }, forwardedRef) => (
-  <DialogPrimitive.Content
-    {...props}
-    ref={forwardedRef}
-    className={clsx("dialog-content notice-dialog-content", className)}
-    data-variant="notice"
-  >
-    {children}
-  </DialogPrimitive.Content>
-));
-
-NoticeDialogContent.displayName = "NoticeDialogContent";
-
-/**
- * NoticeDialogTitle; Dialog 제목
- * @component
- * @param {NoticeDialogTitleProps} props
- * @param {string} [props.className] title className.
- * @param {boolean} [props.visuallyHidden=false] 제목을 시각적으로 숨길지 여부.
- * @param {React.ReactNode} [props.children] 제목 텍스트.
- */
-const NoticeDialogTitle = forwardRef<
-  HTMLHeadingElement,
-  NoticeDialogTitleProps
->(({ className, visuallyHidden = false, children, ...props }, forwardedRef) => {
-  const titleNode = (
-    <DialogPrimitive.Title
-      {...props}
-      ref={forwardedRef}
-      className={clsx("dialog-title notice-dialog-title", className)}
-      data-variant="notice"
-    >
-      {children}
-    </DialogPrimitive.Title>
-  );
-
-  if (visuallyHidden) {
-    return <VisuallyHidden asChild>{titleNode}</VisuallyHidden>;
-  }
-
-  return titleNode;
-});
-
-NoticeDialogTitle.displayName = "NoticeDialogTitle";
-
-/**
- * NoticeDialogDescription; Dialog 설명
- * @component
- * @param {NoticeDialogDescriptionProps} props
- * @param {string} [props.className] description className.
- * @param {boolean} [props.visuallyHidden=false] 설명을 시각적으로 숨길지 여부.
- * @param {React.ReactNode} [props.children] 설명 텍스트.
- */
-const NoticeDialogDescription = forwardRef<
-  HTMLParagraphElement,
-  NoticeDialogDescriptionProps
->(({ className, visuallyHidden = false, children, ...props }, forwardedRef) => {
-  const descriptionNode = (
-    <DialogPrimitive.Description
-      {...props}
-      ref={forwardedRef}
-      className={clsx(
-        "dialog-description notice-dialog-description",
-        className,
-      )}
-      data-variant="notice"
-    >
-      {children}
-    </DialogPrimitive.Description>
-  );
-
-  if (visuallyHidden) {
-    return <VisuallyHidden asChild>{descriptionNode}</VisuallyHidden>;
-  }
-
-  return descriptionNode;
-});
-
-NoticeDialogDescription.displayName = "NoticeDialogDescription";
-
-/**
- * NoticeDialogHeader; 헤더 레이아웃
- * @component
- * @param {NoticeDialogSectionProps} props
- * @param {string} [props.className] 섹션 className.
- * @param {React.HTMLAttributes<HTMLDivElement>["children"]} [props.children] 헤더 콘텐츠.
- */
-const NoticeDialogHeader = forwardRef<HTMLDivElement, NoticeDialogSectionProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <div
-      {...props}
-      ref={forwardedRef}
-      className={clsx("dialog-section notice-dialog-header", className)}
-      data-section="header"
-    />
-  ),
-);
-
-NoticeDialogHeader.displayName = "NoticeDialogHeader";
-
-/**
- * NoticeDialogBody; 본문 영역
- * @component
- * @param {NoticeDialogSectionProps} props
- * @param {string} [props.className] 섹션 className.
- * @param {React.ReactNode} [props.children] 본문 콘텐츠.
- */
-const NoticeDialogBody = forwardRef<HTMLDivElement, NoticeDialogSectionProps>(
-  ({ className, ...props }, forwardedRef) => (
-    <div
-      {...props}
-      ref={forwardedRef}
-      className={clsx("dialog-section notice-dialog-body", className)}
-      data-section="body"
-    />
-  ),
-);
-
-NoticeDialogBody.displayName = "NoticeDialogBody";
-
-/**
- * NoticeDialogActions; 버튼 영역
- * @component
- * @param {NoticeDialogSectionProps} props
- * @param {string} [props.className] 섹션 className.
- * @param {React.ReactNode} [props.children] 버튼 콘텐츠.
- */
-const NoticeDialogActions = forwardRef<
-  HTMLDivElement,
-  NoticeDialogSectionProps
->(({ className, ...props }, forwardedRef) => (
-  <div
-    {...props}
-    ref={forwardedRef}
-    className={clsx("dialog-section notice-dialog-actions", className)}
-    data-section="actions"
-  />
-));
-
-NoticeDialogActions.displayName = "NoticeDialogActions";
-
-export {
-  NoticeDialogRoot,
-  NoticeDialogTrigger,
-  NoticeDialogPortal,
-  NoticeDialogOverlay,
-  NoticeDialogContent,
-  NoticeDialogTitle,
-  NoticeDialogDescription,
-  NoticeDialogHeader,
-  NoticeDialogBody,
-  NoticeDialogActions,
-  NoticeDialogClose,
-};

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

@@ -1,4 +0,0 @@
-"use client";
-
-export * from "./NoticeDialog";
-export * from "./ConfirmDialog";

package/src/components/dialog/styles/base.scss

@@ -1,153 +0,0 @@
-@use "@uniai-fe/uds-foundation/css";
-
-:where(.radix-themes, .theme-root, :root) {
-  /* dialog essentials */
-  --dialog-overlay-bg: rgba(5, 6, 12, 0.55);
-  --dialog-panel-width: 360px;
-  --dialog-panel-max-width: calc(100vw - var(--spacing-padding-10) * 2);
-  --dialog-panel-bg: var(--color-bg-surface-static-white);
-  --dialog-panel-radius: var(--theme-radius-large-1);
-  --dialog-panel-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
-  --dialog-border-color: var(--color-border-standard-cool-gray);
-  --dialog-title-color: var(--color-label-strong);
-  --dialog-title-font-size: var(--font-heading-xsmall-size);
-  --dialog-title-line-height: var(--font-heading-xsmall-line-height);
-  --dialog-title-weight: var(--font-heading-xsmall-weight);
-  --dialog-body-color: var(--color-label-standard);
-  --dialog-body-font-size: var(--font-body-small-size);
-  --dialog-body-line-height: var(--font-body-small-line-height);
-  --dialog-description-color: var(--color-label-standard);
-  --dialog-description-font-size: var(--font-body-small-size);
-  --dialog-description-line-height: var(--font-body-small-line-height);
-
-  /* alert(notice) defaults */
-  --notice-dialog-section-padding-x: var(--spacing-padding-8);
-  --notice-dialog-section-padding-y: var(--spacing-padding-10);
-  --notice-dialog-action-height: 52px;
-
-  /* confirm defaults */
-  --confirm-dialog-header-padding-x: var(--spacing-padding-6);
-  --confirm-dialog-header-padding-y: var(--spacing-padding-7);
-  --confirm-dialog-body-padding-x: var(--spacing-padding-6);
-  --confirm-dialog-body-padding-y: var(--spacing-padding-7);
-  --confirm-dialog-footer-padding-x: var(--spacing-padding-6);
-  --confirm-dialog-footer-padding-y: var(--spacing-padding-7);
-  --confirm-dialog-actions-gap: var(--spacing-gap-5);
-}
-
-.dialog-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: var(--dialog-overlay-bg);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  will-change: opacity;
-
-  &[data-state="open"] {
-    opacity: 1;
-  }
-
-  &[data-state="closed"] {
-    opacity: 0;
-    pointer-events: none;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dialog-overlay {
-    transition: none;
-  }
-}
-
-.dialog-content {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: min(var(--dialog-panel-width), var(--dialog-panel-max-width));
-  max-width: var(--dialog-panel-max-width);
-  max-height: calc(100vh - var(--spacing-padding-10) * 2);
-  background-color: var(--dialog-panel-bg);
-  border-radius: var(--dialog-panel-radius);
-  box-shadow: var(--dialog-panel-shadow);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  outline: none;
-  border: none;
-  gap: 0;
-  opacity: 0;
-  transition:
-    opacity 0.2s ease,
-    transform 0.2s ease;
-
-  &[data-state="open"] {
-    opacity: 1;
-    transform: translate(-50%, -50%);
-  }
-
-  &[data-state="closed"] {
-    opacity: 0;
-    transform: translate(-50%, calc(-50% + 12px));
-    pointer-events: none;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dialog-content {
-    transition: none;
-  }
-}
-
-.dialog-section {
-  padding: 0;
-
-  &[data-section="actions"] {
-    flex-shrink: 0;
-  }
-}
-
-.dialog-title {
-  margin: 0;
-  color: var(--dialog-title-color);
-  font-size: var(--dialog-title-font-size);
-  line-height: var(--dialog-title-line-height);
-  font-weight: var(--dialog-title-weight);
-}
-
-.dialog-description {
-  margin: 0;
-  color: var(--dialog-description-color);
-  font-size: var(--dialog-description-font-size);
-  line-height: var(--dialog-description-line-height);
-}
-
-@mixin dialog-action-button-reset {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  border: none;
-  border-radius: 0;
-  margin: 0;
-  padding: 0;
-  font-size: var(--font-body-medium-size);
-  line-height: var(--font-body-medium-line-height);
-  font-weight: var(--font-body-medium-weight);
-  cursor: pointer;
-  background: transparent;
-  color: var(--color-label-strong);
-  transition:
-    background-color 0.15s ease,
-    color 0.15s ease;
-}
-
-.dialog-button {
-  @include dialog-action-button-reset;
-}
-
-.dialog-button[data-native-element="true"] {
-  appearance: none;
-}

package/src/components/dialog/styles/confirm.scss

@@ -1,58 +0,0 @@
-@use "./base" as dialogBase;
-
-.confirm-dialog-header {
-  padding: var(--confirm-dialog-header-padding-y)
-    var(--confirm-dialog-header-padding-x);
-}
-
-.confirm-dialog-body {
-  padding: var(--confirm-dialog-body-padding-y)
-    var(--confirm-dialog-body-padding-x);
-}
-
-.confirm-dialog-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-2);
-  text-align: center;
-}
-
-.confirm-dialog-body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-gap-2);
-  text-align: center;
-}
-
-.confirm-dialog-body p {
-  margin: 0;
-  color: var(--dialog-body-color);
-  font-size: var(--dialog-body-font-size);
-  line-height: 1.5em;
-  font-weight: var(--font-body-small-weight);
-  word-break: keep-all;
-}
-
-.confirm-dialog-description {
-  margin: 0;
-  color: var(--dialog-body-color);
-  font-size: var(--dialog-body-font-size);
-  line-height: 1.5em;
-  font-weight: var(--font-body-small-weight);
-  word-break: keep-all;
-}
-
-.confirm-dialog-actions {
-  display: flex;
-  align-items: stretch;
-  flex-direction: row;
-  padding: var(--confirm-dialog-footer-padding-y)
-    var(--confirm-dialog-footer-padding-x);
-  gap: var(--confirm-dialog-actions-gap);
-  justify-content: center;
-}
-
-.confirm-dialog-actions > * {
-  flex: 1;
-}

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

@@ -1,3 +0,0 @@
-@use "./base";
-@use "./notice";
-@use "./confirm";

package/src/components/dialog/styles/notice.scss

@@ -1,65 +0,0 @@
-@use "./base" as dialogBase;
-
-.notice-dialog-header,
-.notice-dialog-body {
-  padding: var(--notice-dialog-section-padding-y)
-    var(--notice-dialog-section-padding-x);
-}
-
-.notice-dialog-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-3);
-  text-align: center;
-}
-
-.notice-dialog-body {
-  text-align: center;
-}
-
-.notice-dialog-body p {
-  margin: 0 0 var(--spacing-gap-2);
-  color: var(--dialog-body-color);
-  font-size: var(--dialog-body-font-size);
-  line-height: 1.5em;
-  font-weight: var(--font-body-small-weight);
-  word-break: keep-all;
-}
-
-.notice-dialog-body p:last-child {
-  margin-bottom: 0;
-}
-
-.notice-dialog-actions {
-  border-top: 1px solid var(--dialog-border-color);
-  display: flex;
-  align-items: stretch;
-  flex-direction: row;
-  padding: 0;
-  gap: 0;
-  justify-content: center;
-  overflow: hidden;
-  --button-min-height: var(--notice-dialog-action-height);
-  --button-padding-inline: 0;
-  --button-padding-block: 0;
-  --button-border-radius: 0;
-}
-
-.notice-dialog-actions > * {
-  flex: 1;
-}
-
-.notice-dialog-actions .button {
-  @include dialogBase.dialog-action-button-reset;
-  background-color: var(--color-common-100);
-  color: var(--color-primary-default);
-
-  &:hover {
-    background-color: var(--color-bg-surface-static-cool-gray);
-  }
-}
-
-.notice-dialog-actions .button:not(:first-child),
-.notice-dialog-actions [data-native-element="true"]:not(:first-child) {
-  border-left: 1px solid var(--dialog-border-color);
-}

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

@@ -1,113 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-import type * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import type * as DialogPrimitive from "@radix-ui/react-dialog";
-
-/**
- * NoticeDialog Root props. Radix Dialog Root 계약을 그대로 사용한다.
- */
-type NoticeDialogRootProps = ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Root
->;
-/**
- * NoticeDialog Overlay props. className/data attr만 확장한다.
- */
-type NoticeDialogOverlayProps = ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Overlay
->;
-/**
- * NoticeDialog Content props.
- */
-type NoticeDialogContentProps = ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Content
->;
-/**
- * NoticeDialog section(div) props.
- */
-type NoticeDialogSectionProps = ComponentPropsWithoutRef<"div">;
-/**
- * NoticeDialog Title props. visuallyHidden 옵션으로 시각적 숨김 지원.
- */
-type NoticeDialogTitleProps = ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Title
-> & {
-  visuallyHidden?: boolean;
-};
-/**
- * NoticeDialog Description props. visuallyHidden 옵션 포함.
- */
-type NoticeDialogDescriptionProps = ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Description
-> & {
-  visuallyHidden?: boolean;
-};
-
-/**
- * ConfirmDialog Root props. Radix AlertDialog Root 계약.
- */
-type ConfirmDialogRootProps = ComponentPropsWithoutRef<
-  typeof AlertDialogPrimitive.Root
->;
-/**
- * ConfirmDialog Overlay props. disableOutsideClose 확장 포함.
- * @property {boolean} [disableOutsideClose=false] dim 클릭 시 닫힘 방지 여부.
- */
-type ConfirmDialogOverlayProps = ComponentPropsWithoutRef<
-  typeof AlertDialogPrimitive.Overlay
-> & {
-  disableOutsideClose?: boolean;
-};
-/**
- * ConfirmDialog Content props.
- */
-type ConfirmDialogContentProps = ComponentPropsWithoutRef<
-  typeof AlertDialogPrimitive.Content
->;
-/**
- * ConfirmDialog section props.
- */
-type ConfirmDialogSectionProps = ComponentPropsWithoutRef<"div">;
-/**
- * ConfirmDialog Title props. visuallyHidden 옵션 포함.
- */
-type ConfirmDialogTitleProps = ComponentPropsWithoutRef<
-  typeof AlertDialogPrimitive.Title
-> & {
-  visuallyHidden?: boolean;
-};
-/**
- * ConfirmDialog Description props. visuallyHidden 옵션 포함.
- */
-type ConfirmDialogDescriptionProps = ComponentPropsWithoutRef<
-  typeof AlertDialogPrimitive.Description
-> & {
-  visuallyHidden?: boolean;
-};
-/**
- * ConfirmDialog Action button props.
- */
-type ConfirmDialogActionProps = ComponentPropsWithoutRef<
-  typeof AlertDialogPrimitive.Action
->;
-/**
- * ConfirmDialog Cancel button props.
- */
-type ConfirmDialogCancelProps = ComponentPropsWithoutRef<
-  typeof AlertDialogPrimitive.Cancel
->;
-
-export type {
-  NoticeDialogRootProps,
-  NoticeDialogOverlayProps,
-  NoticeDialogContentProps,
-  NoticeDialogSectionProps,
-  NoticeDialogTitleProps,
-  NoticeDialogDescriptionProps,
-  ConfirmDialogRootProps,
-  ConfirmDialogOverlayProps,
-  ConfirmDialogContentProps,
-  ConfirmDialogSectionProps,
-  ConfirmDialogTitleProps,
-  ConfirmDialogDescriptionProps,
-  ConfirmDialogActionProps,
-  ConfirmDialogCancelProps,
-};

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

@@ -1,4 +0,0 @@
-/**
- * TODO(dialog): 토큰 매핑과 클래스명 유틸을 구현한다.
- */
-export {};