sh-ui-cli 0.15.0 → 0.21.0

package/data/registry/react/components/date-picker/styles.css

@@ -0,0 +1,279 @@
+/* ��─ Trigger (input-like) ── */
+
+.sh-ui-date-picker__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: var(--control-md);
+  padding: 0 var(--space-3);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  line-height: 1;
+  cursor: pointer;
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
+  -webkit-tap-highlight-color: transparent;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .sh-ui-date-picker__trigger {
+    height: 2.75rem;
+    font-size: var(--text-base);
+  }
+}
+
+.sh-ui-date-picker__trigger:hover:not(:disabled) {
+  border-color: var(--border-strong);
+}
+
+.sh-ui-date-picker__trigger:focus-visible {
+  outline: none;
+  border-color: var(--foreground);
+  box-shadow: 0 0 0 1px var(--foreground);
+}
+
+.sh-ui-date-picker__trigger:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: not-allowed;
+  background: var(--background-subtle);
+}
+
+.sh-ui-date-picker__trigger[aria-invalid="true"] {
+  border-color: var(--danger);
+}
+.sh-ui-date-picker__trigger[aria-invalid="true"]:focus-visible {
+  box-shadow: 0 0 0 1px var(--danger);
+}
+
+.sh-ui-date-picker__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sh-ui-date-picker__placeholder {
+  color: var(--foreground-subtle);
+}
+
+.sh-ui-date-picker__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  color: var(--foreground-muted);
+  margin-left: var(--space-2);
+}
+
+/* ── Positioner / Popup ── */
+
+.sh-ui-date-picker__positioner {
+  z-index: var(--z-popover);
+  outline: none;
+}
+
+.sh-ui-date-picker__popup {
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  outline: none;
+  padding: var(--space-3);
+  transform-origin: var(--transform-origin);
+  transition: opacity 140ms ease, transform 140ms ease;
+}
+
+.sh-ui-date-picker__popup[data-starting-style],
+.sh-ui-date-picker__popup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.96);
+}
+
+/* ── Calendar ���─ */
+
+.sh-ui-calendar {
+  width: 17.5rem;
+  user-select: none;
+}
+
+.sh-ui-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-2);
+}
+
+.sh-ui-calendar__title {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-semibold);
+}
+
+.sh-ui-calendar__nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: var(--foreground-muted);
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast);
+}
+
+.sh-ui-calendar__nav:hover {
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+
+.sh-ui-calendar__nav:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+/* ── Weekdays ── */
+
+.sh-ui-calendar__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: var(--space-1);
+}
+
+.sh-ui-calendar__weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  color: var(--foreground-muted);
+}
+
+/* ── Grid ��─ */
+
+.sh-ui-calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  outline: none;
+}
+
+.sh-ui-calendar__grid:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+  border-radius: calc(var(--radius) - 2px);
+}
+
+/* ── Day cell ── */
+
+.sh-ui-calendar__day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  margin: 0.0625rem auto;
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: var(--foreground);
+  font-size: 0.8125rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast);
+}
+
+.sh-ui-calendar__day:hover:not(:disabled) {
+  background: var(--background-muted);
+}
+
+.sh-ui-calendar__day:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.sh-ui-calendar__day--outside {
+  color: var(--foreground-subtle, var(--foreground-muted));
+  opacity: 0.4;
+}
+
+.sh-ui-calendar__day--today {
+  font-weight: var(--weight-bold);
+  text-decoration: underline;
+  text-underline-offset: 0.125rem;
+}
+
+.sh-ui-calendar__day--selected {
+  background: var(--foreground);
+  color: var(--background);
+  font-weight: var(--weight-semibold);
+}
+
+.sh-ui-calendar__day--selected:hover:not(:disabled) {
+  background: var(--foreground);
+  opacity: 0.9;
+}
+
+/* ── Range ── */
+
+.sh-ui-calendar__day--in-range {
+  background: color-mix(in srgb, var(--foreground) 10%, transparent);
+  border-radius: 0;
+}
+
+.sh-ui-calendar__day--in-range:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--foreground) 18%, transparent);
+}
+
+.sh-ui-calendar__day--range-start {
+  background: var(--foreground);
+  color: var(--background);
+  font-weight: var(--weight-semibold);
+  border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px);
+}
+
+.sh-ui-calendar__day--range-end {
+  background: var(--foreground);
+  color: var(--background);
+  font-weight: var(--weight-semibold);
+  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
+}
+
+.sh-ui-calendar__day--range-start.sh-ui-calendar__day--range-end {
+  border-radius: calc(var(--radius) - 2px);
+}
+
+.sh-ui-calendar__day--range-start:hover:not(:disabled),
+.sh-ui-calendar__day--range-end:hover:not(:disabled) {
+  background: var(--foreground);
+  opacity: 0.9;
+}
+
+/* ── Hint (range picker) ── */
+
+.sh-ui-date-picker__hint {
+  margin: 0 0 var(--space-2);
+  font-size: var(--text-xs);
+  color: var(--foreground-muted);
+  text-align: center;
+}
+
+.sh-ui-calendar__day:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* ── Footer ── */
+
+.sh-ui-date-picker__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  margin-top: var(--space-2);
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--border);
+}

package/data/registry/react/components/dialog/index.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { Dialog as BaseDialog } from "@base-ui-components/react/dialog";
+import "./styles.css";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/**
+ * 모달 다이얼로그 루트. 열림 상태를 가지며 자식으로 Trigger·Content를 둔다.
+ * 주의를 강제하는 흐름(확인/입력)에 사용하고, 단순 안내는 Popover나 Toast를 권장.
+ */
+export const Dialog = BaseDialog.Root;
+
+/** Dialog를 여는 트리거. 보통 Button을 감싸 사용. */
+export const DialogTrigger = BaseDialog.Trigger;
+
+/** 클릭 시 Dialog를 닫는 요소. footer의 취소 버튼 등에 사용. */
+export const DialogClose = BaseDialog.Close;
+
+/** 우상단에 배치되는 X 닫기 버튼. `aria-label="닫기"`가 자동 부여된다. */
+export function DialogCloseX({ className, children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <BaseDialog.Close
+      className={cx("sh-ui-dialog__close", className)}
+      aria-label="닫기"
+      {...props}
+    >
+      {children ?? "×"}
+    </BaseDialog.Close>
+  );
+}
+
+/** Dialog 본문 하단의 액션 버튼 영역. 보통 [취소, 확인] 순서로 배치. */
+export function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cx("sh-ui-dialog__footer", className)} {...props} />;
+}
+
+export interface DialogContentProps
+  extends WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDialog.Popup>> {
+  /**
+   * Portal이 마운트될 DOM 노드. 모달이 다른 stacking context에 갇혀야 할 때 지정한다.
+   * @default document.body
+   */
+  container?: React.ComponentPropsWithoutRef<typeof BaseDialog.Portal>["container"];
+}
+
+/**
+ * Dialog의 실제 콘텐츠. Portal로 body 끝에 마운트되며 backdrop·focus trap·ESC 닫힘 등이 자동 처리된다.
+ * 접근성: 안에 반드시 `DialogTitle`을 두고, 추가 설명은 `DialogDescription`으로 연결할 것.
+ */
+export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
+  function DialogContent({ className, children, container, ...props }, ref) {
+    return (
+      <BaseDialog.Portal container={container}>
+        <BaseDialog.Backdrop className="sh-ui-dialog__backdrop" />
+        <BaseDialog.Popup
+          ref={ref}
+          className={cx("sh-ui-dialog__content", className)}
+          {...props}
+        >
+          {children}
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    );
+  },
+);
+
+/** Dialog의 제목. 접근성을 위해 DialogContent 안에 항상 포함시킬 것. */
+export const DialogTitle = React.forwardRef<
+  HTMLHeadingElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDialog.Title>>
+>(function DialogTitle({ className, ...props }, ref) {
+  return (
+    <BaseDialog.Title
+      ref={ref}
+      className={cx("sh-ui-dialog__title", className)}
+      {...props}
+    />
+  );
+});
+
+/** Dialog의 보조 설명. 제목만으로 맥락이 부족할 때 사용한다. */
+export const DialogDescription = React.forwardRef<
+  HTMLParagraphElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseDialog.Description>>
+>(function DialogDescription({ className, ...props }, ref) {
+  return (
+    <BaseDialog.Description
+      ref={ref}
+      className={cx("sh-ui-dialog__description", className)}
+      {...props}
+    />
+  );
+});

package/data/registry/react/components/dialog/styles.css

@@ -0,0 +1,127 @@
+/* ── Backdrop ── */
+
+.sh-ui-dialog__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-overlay);
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(8px);
+  transition: opacity var(--duration-slow) ease;
+}
+
+.sh-ui-dialog__backdrop[data-starting-style],
+.sh-ui-dialog__backdrop[data-ending-style] {
+  opacity: 0;
+}
+
+/* ── Content (Popup) ── */
+
+.sh-ui-dialog__content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: var(--z-modal);
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 2rem);
+  max-width: 28rem;
+  max-height: calc(100dvh - 4rem);
+  padding: var(--space-6);
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-xl);
+  outline: none;
+  overflow-y: auto;
+  transition:
+    opacity var(--duration-slow) ease,
+    transform var(--duration-slow) ease;
+}
+
+.sh-ui-dialog__content[data-starting-style] {
+  opacity: 0;
+  transform: translate(-50%, calc(-50% + 0.5rem)) scale(0.97);
+}
+
+.sh-ui-dialog__content[data-ending-style] {
+  opacity: 0;
+  transform: translate(-50%, calc(-50% + 0.25rem)) scale(0.98);
+}
+
+.sh-ui-dialog__content:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+/* ── Title ── */
+
+.sh-ui-dialog__title {
+  margin: 0 0 var(--space-1);
+  font-weight: var(--weight-semibold);
+  font-size: var(--text-lg);
+  line-height: 1.4;
+}
+
+/* ── Description ── */
+
+.sh-ui-dialog__description {
+  margin: 0 0 var(--space-5);
+  color: var(--foreground-muted);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+/* ── Footer (액션 버튼 영역) ── */
+
+.sh-ui-dialog__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  padding-top: var(--space-4);
+  border-top: 1px solid var(--border);
+  margin-top: auto;
+}
+
+/* ── Close (× 버튼) ── */
+
+.sh-ui-dialog__close {
+  position: absolute;
+  top: var(--space-3);
+  right: var(--space-3);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: calc(var(--radius) - 2px);
+  background: transparent;
+  color: var(--foreground-muted);
+  font-size: var(--text-lg);
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color var(--duration-fast), color var(--duration-fast);
+}
+.sh-ui-dialog__close:hover {
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+.sh-ui-dialog__close:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-dialog__backdrop,
+  .sh-ui-dialog__content,
+  .sh-ui-dialog__close {
+    transition: none;
+  }
+  .sh-ui-dialog__content[data-starting-style],
+  .sh-ui-dialog__content[data-ending-style] {
+    transform: translate(-50%, -50%);
+  }
+}