sh-ui-cli 0.82.0 → 0.82.1
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.
|
@@ -2,6 +2,18 @@
|
|
|
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.82.1",
|
|
7
|
+
"date": "2026-05-13",
|
|
8
|
+
"title": "Sidebar / Header tailwind 변종의 결합 data 셀렉터 → Tailwind v4 호환 체이닝 수정",
|
|
9
|
+
"type": "patch",
|
|
10
|
+
"highlights": [
|
|
11
|
+
"**Sidebar tailwind 변종의 결합 data 셀렉터가 Tailwind v4 에서 미emit 되던 결함 수정** — `data-[state=collapsed][data-collapsible=offcanvas]:w-0` 류 형식이 Tailwind v4 파서에서 해석 안 되어 `<SidebarTrigger>` 클릭으로 `data-state` 가 토글돼도 width 가 그대로 유지되어 시각적으로 안 닫히던 결함. v4 호환 syntax (variant 체이닝) `data-[state=collapsed]:data-[collapsible=offcanvas]:w-0` 로 일괄 변환. offcanvas (w-0/border-r-0/border-l-0/overflow-hidden) + icon collapsible (w-[var(--sidebar-width-icon)]) 5개 selector 모두 적용.",
|
|
12
|
+
"**Header tailwind 변종의 동일 안티패턴 수정** — `data-[sticky-hide][data-hidden]:-translate-y-full` → `data-[sticky-hide]:data-[hidden]:-translate-y-full`. sticky-hide 모드의 스크롤-숨김 transform 이 적용 안 되던 결함 해소.",
|
|
13
|
+
"plain CSS / module CSS 변종은 영향 없음 — 처음부터 CSS attribute selector(`.sh-ui-sidebar[data-state=\"collapsed\"][data-collapsible=\"offcanvas\"]`) 라 정상 동작."
|
|
14
|
+
],
|
|
15
|
+
"url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.82.1"
|
|
16
|
+
},
|
|
5
17
|
{
|
|
6
18
|
"version": "0.82.0",
|
|
7
19
|
"date": "2026-05-13",
|
|
@@ -150,7 +150,7 @@ export const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header
|
|
|
150
150
|
<header
|
|
151
151
|
ref={setRefs}
|
|
152
152
|
className={cn(
|
|
153
|
-
"relative flex items-center gap-[var(--space-4)] h-[var(--control-md)] px-[var(--space-3)] border-b border-border transition-[transform,background-color] duration-[var(--duration-base)] [--sh-ui-header-hover-bg:var(--background-muted)] [--sh-ui-header-blur-opacity:85%] [--sh-ui-header-blur-radius:16px] motion-reduce:transition-none max-md:gap-[var(--space-2)] data-[sticky-hide]
|
|
153
|
+
"relative flex items-center gap-[var(--space-4)] h-[var(--control-md)] px-[var(--space-3)] border-b border-border transition-[transform,background-color] duration-[var(--duration-base)] [--sh-ui-header-hover-bg:var(--background-muted)] [--sh-ui-header-blur-opacity:85%] [--sh-ui-header-blur-radius:16px] motion-reduce:transition-none max-md:gap-[var(--space-2)] data-[sticky-hide]:data-[hidden]:-translate-y-full",
|
|
154
154
|
variantClasses[variant],
|
|
155
155
|
className,
|
|
156
156
|
)}
|
|
@@ -149,7 +149,7 @@ export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
149
149
|
}
|
|
150
150
|
|
|
151
151
|
const sidebarRoot =
|
|
152
|
-
"flex flex-col w-[var(--sidebar-width)] shrink-0 bg-[var(--sidebar-bg)] text-[var(--sidebar-fg)] border-r border-[var(--sidebar-border)] transition-[width] duration-[var(--duration-slow)] relative z-[5] data-[side=right]:border-r-0 data-[side=right]:border-l data-[side=right]:order-1 data-[state=collapsed]
|
|
152
|
+
"flex flex-col w-[var(--sidebar-width)] shrink-0 bg-[var(--sidebar-bg)] text-[var(--sidebar-fg)] border-r border-[var(--sidebar-border)] transition-[width] duration-[var(--duration-slow)] relative z-[5] data-[side=right]:border-r-0 data-[side=right]:border-l data-[side=right]:order-1 data-[state=collapsed]:data-[collapsible=offcanvas]:w-0 data-[state=collapsed]:data-[collapsible=offcanvas]:border-r-0 data-[state=collapsed]:data-[collapsible=offcanvas]:border-l-0 data-[state=collapsed]:data-[collapsible=offcanvas]:overflow-hidden data-[state=collapsed]:data-[collapsible=icon]:w-[var(--sidebar-width-icon)] data-[variant=floating]:border-none data-[variant=floating]:p-[var(--space-2)] data-[variant=floating]:bg-transparent data-[variant=inset]:bg-transparent data-[variant=inset]:border-none motion-reduce:transition-none";
|
|
153
153
|
|
|
154
154
|
export function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }: SidebarProps) {
|
|
155
155
|
const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
|