sh-ui-cli 0.45.3 → 0.47.0

package/data/registry/react/components/calendar/styles.module.css

@@ -0,0 +1,213 @@
+/* ── Calendar root ── */
+
+.calendar {
+  display: inline-flex;
+  gap: var(--space-4);
+  user-select: none;
+}
+
+.calendar--multi {
+  flex-wrap: wrap;
+}
+
+.calendar__month {
+  width: 17.5rem;
+}
+
+/* ── Header (compound) ── */
+
+.calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-1);
+  margin-bottom: var(--space-2);
+}
+
+.calendar__title {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex: 1 1 auto;
+  justify-content: center;
+}
+
+/* ── Nav buttons ── */
+
+.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;
+  flex-shrink: 0;
+  transition: background-color var(--duration-fast), color var(--duration-fast);
+}
+
+.calendar__nav:hover:not(:disabled) {
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+
+.calendar__nav:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.calendar__nav--placeholder {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* ── Select (year / month dropdown) ── */
+/* sh-ui Select 의 trigger 를 캘린더 헤더용으로 컴팩트하게 오버라이드 */
+
+.calendar__select-trigger.select__trigger {
+  min-width: 0;
+  height: 1.75rem;
+  gap: var(--space-1);
+  padding: 0 var(--space-2);
+  background: transparent;
+  border-color: transparent;
+  font-weight: var(--weight-semibold);
+  font-size: var(--text-sm);
+  color: var(--foreground);
+}
+
+.calendar__select-trigger.select__trigger:hover:not(:disabled) {
+  background: var(--background-muted);
+  border-color: transparent;
+}
+
+.calendar__select-trigger.select__trigger[data-popup-open] {
+  background: var(--background-muted);
+  border-color: transparent;
+}
+
+/* popover 안의 캘린더에서도 dropdown 이 위로 올라오도록 z-index 보강.
+ * (Select 의 기본 z-dropdown=200 < z-popover=500 이므로 :has 로 캘린더 select 만 선택해 z-popover 로 끌어올림.) */
+.select__positioner:has(.calendar__select-popup) {
+  z-index: var(--z-popover);
+}
+
+/* ── Weekdays ── */
+
+.calendar__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: var(--space-1);
+}
+
+.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 ── */
+
+.calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  outline: none;
+}
+
+.calendar__grid:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+  border-radius: calc(var(--radius) - 2px);
+}
+
+/* ── Cell (column slot, range strip carrier) ── */
+
+.calendar__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 2.375rem;
+  min-width: 0;
+}
+
+.calendar__cell--in-range,
+.calendar__cell--range-start,
+.calendar__cell--range-end {
+  background: color-mix(in srgb, var(--primary) 12%, transparent);
+}
+
+.calendar__cell--range-start:not(.calendar__cell--range-end) {
+  border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px);
+}
+
+.calendar__cell--range-end:not(.calendar__cell--range-start) {
+  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
+}
+
+.calendar__cell--range-start.calendar__cell--range-end {
+  border-radius: calc(var(--radius) - 2px);
+}
+
+/* ── Day button ── */
+
+.calendar__day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  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);
+}
+
+.calendar__day:hover:not(:disabled) {
+  background: var(--background-muted);
+}
+
+.calendar__day:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+
+.calendar__day--outside {
+  color: var(--foreground-subtle, var(--foreground-muted));
+  opacity: 0.4;
+}
+
+.calendar__day--today {
+  font-weight: var(--weight-bold);
+  text-decoration: underline;
+  text-underline-offset: 0.125rem;
+}
+
+.calendar__day--selected {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  font-weight: var(--weight-semibold);
+}
+
+.calendar__day--selected:hover:not(:disabled) {
+  background: var(--primary-hover);
+  color: var(--primary-foreground);
+}
+
+.calendar__day:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}

package/data/registry/react/components/card/index.module.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { cn } from "@SH_UI_UTILS@";
+import styles from "./styles.module.css";
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const Card = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(styles.card, className)} {...props} />
+  ),
+);
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-header"
+      className={cn(styles.header, className)}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(styles.title, className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(styles.description, className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+/**
+ * 헤더 우측에 배치되는 슬롯. CardHeader 내부에서 grid 2번째 컬럼을 차지.
+ * CardHeader가 `:has(.action)`으로 감지해 레이아웃을 전환한다.
+ */
+export const CardAction = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(styles.action, className)} {...props} />
+  ),
+);
+CardAction.displayName = "CardAction";
+
+export const CardContent = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(styles.content, className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(styles.footer, className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";

package/data/registry/react/components/card/styles.module.css

@@ -0,0 +1,73 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  padding: var(--space-6) 0;
+  background: var(--background);
+  color: var(--foreground);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+
+/* 헤더: 기본은 타이틀/설명 세로 스택. action 있으면 2열 그리드로 전환. */
+.header {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-auto-rows: auto;
+  row-gap: 0.375rem;
+  padding: 0 var(--space-6);
+}
+
+.header:has(.action) {
+  grid-template-columns: 1fr auto;
+}
+
+.title {
+  font-size: var(--text-base);
+  font-weight: var(--weight-semibold);
+  line-height: 1.25;
+  letter-spacing: -0.01em;
+}
+
+.description {
+  font-size: var(--text-sm);
+  line-height: 1.5;
+  color: var(--foreground-muted);
+}
+
+.action {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  align-self: start;
+  justify-self: end;
+}
+
+.content {
+  padding: 0 var(--space-6);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+}
+
+.footer {
+  padding: 0 var(--space-6);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+/* 모바일: 패딩 축소 */
+@media (max-width: 640px) {
+  .card {
+    gap: var(--space-4);
+    padding: var(--space-4) 0;
+  }
+  .header,
+  .content,
+  .footer {
+    padding-left: var(--space-4);
+    padding-right: var(--space-4);
+  }
+  .footer {
+    flex-wrap: wrap;
+  }
+}