sh-ui-cli 0.58.6 → 0.58.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/changelog/versions.json +14 -0
- package/data/registry/react/components/calendar/index.tailwind.tsx +1 -1
- package/data/registry/react/components/calendar/styles.css +1 -1
- package/data/registry/react/components/calendar/styles.module.css +1 -1
- package/data/registry/react/components/carousel/index.tailwind.tsx +1 -1
- package/data/registry/react/components/carousel/styles.css +1 -1
- package/data/registry/react/components/carousel/styles.module.css +1 -1
- package/data/registry/react/components/pagination/index.tailwind.tsx +1 -1
- package/data/registry/react/components/pagination/styles.css +1 -1
- package/data/registry/react/components/pagination/styles.module.css +1 -1
- package/data/registry/react/components/rich-text-editor/index.tailwind.tsx +1 -1
- package/data/registry/react/components/rich-text-editor/styles.css +1 -1
- package/data/registry/react/components/rich-text-editor/styles.module.css +1 -1
- package/package.json +1 -1
|
@@ -2,6 +2,20 @@
|
|
|
2
2
|
"$schema": "https://json-schema.org/draft/2020-12/schema",
|
|
3
3
|
"$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
|
|
4
4
|
"versions": [
|
|
5
|
+
{
|
|
6
|
+
"version": "0.58.7",
|
|
7
|
+
"date": "2026-05-06",
|
|
8
|
+
"title": "디자인 디폴트 개편 6라운드 — disabled opacity 토큰 통일",
|
|
9
|
+
"type": "patch",
|
|
10
|
+
"highlights": [
|
|
11
|
+
"**`--opacity-disabled` (0.5) 토큰을 모든 컴포넌트가 사용** — 그동안 calendar(0.3) / carousel(0.4) / pagination(0.45) / rich-text-editor(0.5) 가 각자 다른 disabled opacity 값을 쓰고 있었음. 단일 토큰으로 정렬해 \"disabled 느낌\"이 모든 컴포넌트에서 동일.",
|
|
12
|
+
"**Tailwind variant 의 하드코딩 opacity 클래스 제거** — `disabled:opacity-30` / `disabled:opacity-40` / `disabled:opacity-50` / `aria-disabled:opacity-45` / `data-[disabled]:opacity-45` → `disabled:opacity-[var(--opacity-disabled)]`.",
|
|
13
|
+
"**plain CSS / module / vanilla-extract 동기화** — `:disabled { opacity: 0.X }` 의 0.3/0.4/0.45/0.5 하드코딩 → `var(--opacity-disabled)`.",
|
|
14
|
+
"**outside / inactive 같은 \"비활성이지만 disabled 아님\" 상태는 별도 유지** — calendar 의 day--outside (0.4) 는 disabled 와 다른 시각 의도라 이번 통일에서 제외.",
|
|
15
|
+
"**철학 — \"disabled 느낌\" 은 토큰의 책임**: 사용자가 brand 톤 한 번 결정하면 모든 컴포넌트의 disabled 가 같은 깊이로 fade. 컴포넌트별 미세 조정 X."
|
|
16
|
+
],
|
|
17
|
+
"url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.58.7"
|
|
18
|
+
},
|
|
5
19
|
{
|
|
6
20
|
"version": "0.58.6",
|
|
7
21
|
"date": "2026-05-06",
|
|
@@ -526,7 +526,7 @@ export const CalendarGrid = React.forwardRef<HTMLDivElement, CalendarGridProps>(
|
|
|
526
526
|
<button
|
|
527
527
|
type="button"
|
|
528
528
|
className={cn(
|
|
529
|
-
"flex items-center justify-center w-9 h-9 p-0 border-none rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground text-[0.8125rem] font-[inherit] cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 disabled:opacity-
|
|
529
|
+
"flex items-center justify-center w-9 h-9 p-0 border-none rounded-[calc(var(--radius)-2px)] bg-transparent text-foreground text-[0.8125rem] font-[inherit] cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed motion-reduce:transition-none",
|
|
530
530
|
!current && "text-[var(--foreground-subtle,var(--foreground-muted))] opacity-40",
|
|
531
531
|
isToday && "font-bold underline underline-offset-[0.125rem]",
|
|
532
532
|
selected && "bg-primary text-primary-foreground font-semibold hover:not-disabled:bg-primary-hover hover:not-disabled:text-primary-foreground",
|
|
@@ -205,7 +205,7 @@ export const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttribute
|
|
|
205
205
|
CarouselItem.displayName = "CarouselItem";
|
|
206
206
|
|
|
207
207
|
const navClasses =
|
|
208
|
-
"absolute top-1/2 w-8 h-8 inline-flex items-center justify-center bg-background text-foreground border border-border rounded-full cursor-pointer -translate-y-1/2 z-[1] transition-[opacity,background-color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 disabled:opacity-
|
|
208
|
+
"absolute top-1/2 w-8 h-8 inline-flex items-center justify-center bg-background text-foreground border border-border rounded-full cursor-pointer -translate-y-1/2 z-[1] transition-[opacity,background-color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed motion-reduce:transition-none data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:[top:auto]";
|
|
209
209
|
|
|
210
210
|
export const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
|
|
211
211
|
({ className, onClick, disabled, children, ...props }, ref) => {
|
|
@@ -34,7 +34,7 @@ export const PaginationItem = React.forwardRef<HTMLLIElement, React.LiHTMLAttrib
|
|
|
34
34
|
);
|
|
35
35
|
|
|
36
36
|
const linkBase =
|
|
37
|
-
"inline-flex items-center justify-center gap-1.5 min-w-9 h-9 px-3 rounded-[calc(var(--radius)-2px)] border border-transparent bg-transparent text-foreground no-underline transition-[background-color,border-color,color] duration-[var(--duration-fast)] cursor-pointer select-none hover:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[active]:bg-foreground data-[active]:text-background data-[active]:font-medium data-[active]:hover:opacity-90 aria-disabled:pointer-events-none aria-disabled:opacity-
|
|
37
|
+
"inline-flex items-center justify-center gap-1.5 min-w-9 h-9 px-3 rounded-[calc(var(--radius)-2px)] border border-transparent bg-transparent text-foreground no-underline transition-[background-color,border-color,color] duration-[var(--duration-fast)] cursor-pointer select-none hover:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-2 data-[active]:bg-foreground data-[active]:text-background data-[active]:font-medium data-[active]:hover:opacity-90 aria-disabled:pointer-events-none aria-disabled:opacity-[var(--opacity-disabled)] data-[disabled]:pointer-events-none data-[disabled]:opacity-[var(--opacity-disabled)] data-[size=sm]:min-w-8 data-[size=sm]:h-8 data-[size=sm]:px-2 motion-reduce:transition-none";
|
|
38
38
|
|
|
39
39
|
export interface PaginationLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
40
40
|
isActive?: boolean;
|
|
@@ -157,7 +157,7 @@ function ToolbarButton({ editor, label, icon, isActive, canRun, run, disabled }:
|
|
|
157
157
|
<button
|
|
158
158
|
type="button"
|
|
159
159
|
className={cn(
|
|
160
|
-
"inline-flex items-center justify-center w-7 h-7 p-0 bg-transparent text-foreground-muted border border-transparent rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[color,background-color,border-color] duration-[var(--duration-fast)] hover:not-disabled:text-foreground hover:not-disabled:bg-background hover:not-disabled:border-border focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-1 disabled:opacity-
|
|
160
|
+
"inline-flex items-center justify-center w-7 h-7 p-0 bg-transparent text-foreground-muted border border-transparent rounded-[calc(var(--radius)-2px)] cursor-pointer transition-[color,background-color,border-color] duration-[var(--duration-fast)] hover:not-disabled:text-foreground hover:not-disabled:bg-background hover:not-disabled:border-border focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-ring focus-visible:outline-offset-1 disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed motion-reduce:transition-none",
|
|
161
161
|
isActive && "text-foreground bg-background border-border-strong",
|
|
162
162
|
)}
|
|
163
163
|
aria-label={label}
|