sh-ui-cli 0.42.0 → 0.42.1

package/data/changelog/versions.json

@@ -2,6 +2,18 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.42.1",
+      "date": "2026-04-30",
+      "title": "Calendar range 셀 연결 + 검색 다이얼로그 픽스",
+      "type": "patch",
+      "highlights": [
+        "**Calendar range 시각 픽스** — `mode=\"range\"` 에서 시작/종료 사이 셀이 끊김 없는 한 줄의 띠로 이어지도록 수정. 이전엔 그리드 칼럼(1fr) 안에 가운데 정렬된 2.25rem 버튼에 배경을 직접 칠해 칼럼 사이마다 흰 틈이 보였던 이슈",
+        "각 날짜 셀을 wrapper `<div class=\"sh-ui-calendar__cell\">` 로 감싸고 in-range / range-start / range-end 배경을 cell 에 적용 — 칼럼을 100% 채우므로 인접 셀이 자연스럽게 맞닿고, 진한 pill (selected) 은 그대로 버튼에 올라감",
+        "docs 사이트: 헤더 검색 다이얼로그 버그 픽스 + 디자인 다듬기"
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.42.1"
+    },
     {
       "version": "0.42.0",
       "date": "2026-04-30",

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

@@ -745,33 +745,39 @@ export const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(
             const hidden = !current && !ctx.showOutsideDays;
 
             if (hidden) {
-              return <span key={i} className="sh-ui-calendar__day sh-ui-calendar__day--hidden" aria-hidden />;
+              return <span key={i} className="sh-ui-calendar__cell sh-ui-calendar__cell--hidden" aria-hidden />;
             }
 
             return (
-              <button
+              <div
                 key={i}
-                type="button"
                 className={cx(
-                  "sh-ui-calendar__day",
-                  !current && "sh-ui-calendar__day--outside",
-                  selected && "sh-ui-calendar__day--selected",
-                  isToday && "sh-ui-calendar__day--today",
-                  inRange && "sh-ui-calendar__day--in-range",
-                  isStart && "sh-ui-calendar__day--range-start",
-                  isEnd && "sh-ui-calendar__day--range-end",
+                  "sh-ui-calendar__cell",
+                  inRange && "sh-ui-calendar__cell--in-range",
+                  isStart && "sh-ui-calendar__cell--range-start",
+                  isEnd && "sh-ui-calendar__cell--range-end",
                 )}
-                disabled={dDisabled}
-                tabIndex={-1}
-                onClick={() => { if (!dDisabled) ctx.handleSelect(date); }}
-                onMouseEnter={() => ctx.setHoverDate(date)}
-                onMouseLeave={() => ctx.setHoverDate(undefined)}
-                aria-label={formatIsoDate(date)}
-                aria-selected={selected || inRange || undefined}
-                data-today={isToday || undefined}
               >
-                {date.getDate()}
-              </button>
+                <button
+                  type="button"
+                  className={cx(
+                    "sh-ui-calendar__day",
+                    !current && "sh-ui-calendar__day--outside",
+                    selected && "sh-ui-calendar__day--selected",
+                    isToday && "sh-ui-calendar__day--today",
+                  )}
+                  disabled={dDisabled}
+                  tabIndex={-1}
+                  onClick={() => { if (!dDisabled) ctx.handleSelect(date); }}
+                  onMouseEnter={() => ctx.setHoverDate(date)}
+                  onMouseLeave={() => ctx.setHoverDate(undefined)}
+                  aria-label={formatIsoDate(date)}
+                  aria-selected={selected || inRange || undefined}
+                  data-today={isToday || undefined}
+                >
+                  {date.getDate()}
+                </button>
+              </div>
             );
           })}
         </div>

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

@@ -128,7 +128,36 @@
   border-radius: calc(var(--radius) - 2px);
 }
 
-/* ── Day cell ── */
+/* ── Cell (column slot, range strip carrier) ── */
+
+.sh-ui-calendar__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 2.375rem;
+  min-width: 0;
+}
+
+.sh-ui-calendar__cell--in-range,
+.sh-ui-calendar__cell--range-start,
+.sh-ui-calendar__cell--range-end {
+  background: color-mix(in srgb, var(--primary) 12%, transparent);
+}
+
+.sh-ui-calendar__cell--range-start:not(.sh-ui-calendar__cell--range-end) {
+  border-radius: calc(var(--radius) - 2px) 0 0 calc(var(--radius) - 2px);
+}
+
+.sh-ui-calendar__cell--range-end:not(.sh-ui-calendar__cell--range-start) {
+  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
+}
+
+.sh-ui-calendar__cell--range-start.sh-ui-calendar__cell--range-end {
+  border-radius: calc(var(--radius) - 2px);
+}
+
+/* ── Day button ── */
 
 .sh-ui-calendar__day {
   display: flex;
@@ -136,7 +165,6 @@
   justify-content: center;
   width: 2.25rem;
   height: 2.25rem;
-  margin: 0.0625rem auto;
   padding: 0;
   border: none;
   border-radius: calc(var(--radius) - 2px);
@@ -162,13 +190,6 @@
   opacity: 0.4;
 }
 
-.sh-ui-calendar__day--hidden {
-  visibility: hidden;
-  pointer-events: none;
-  cursor: default;
-  background: transparent;
-}
-
 .sh-ui-calendar__day--today {
   font-weight: var(--weight-bold);
   text-decoration: underline;
@@ -190,38 +211,3 @@
   opacity: 0.3;
   cursor: not-allowed;
 }
-
-/* ── Range ── */
-
-.sh-ui-calendar__day--in-range {
-  background: color-mix(in srgb, var(--primary) 12%, transparent);
-  border-radius: 0;
-}
-
-.sh-ui-calendar__day--in-range:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--primary) 22%, transparent);
-}
-
-.sh-ui-calendar__day--range-start {
-  background: var(--primary);
-  color: var(--primary-foreground);
-  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(--primary);
-  color: var(--primary-foreground);
-  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(--primary-hover);
-  color: var(--primary-foreground);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-ui-cli",
-  "version": "0.42.0",
+  "version": "0.42.1",
   "description": "sh-ui CLI — 프로젝트 스캐폴드(create) + 컴포넌트 추가(add/list/remove) + IDE-내 AI용 MCP 서버",
   "license": "MIT",
   "repository": {