@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/Sidebar/Sidebar.module.css

@@ -0,0 +1,242 @@
+/* Root ─────────────────────────────────────────────────
+   세 영역 구조: Header(상단 고정, flex:0) · Body(flex:1, 세로 스크롤) · Footer(하단 고정, flex:0).
+   padding-inline은 두지 않음 — Body가 스크롤 컨테이너라, root에 좌우 padding을 두면
+   스크롤바가 padding 안쪽에 생겨 "오른쪽 끝에 붙지 않는" 꼴이 됨.
+   좌우 여백은 Header/Section/Footer가 각자 담당(two-layer padding rule). */
+.root {
+  display: flex;
+  flex-direction: column;
+  width: var(--sidebar-w);
+  /* 호스트가 어떤 방식으로 높이를 주든(flex stretch · grid cell stretch ·
+     명시적 height · min-height만) 그 공간을 꽉 받는다.
+     - align-self: stretch는 flex/grid 부모에서 cross-axis를 자동으로 받고,
+     - min-height: 0은 자식(Body)의 긴 콘텐츠가 root를 밀어 올리지 못하게 막아서
+       Body의 flex:1 + overflow:auto가 올바르게 스크롤 컨테이너가 되게 한다.
+     height:100%는 쓰지 않는다 — 부모가 min-height만 가진 경우(데모 showcase)
+     percent-height가 auto로 떨어져 Body가 0px로 붕괴한다. */
+  align-self: stretch;
+  min-height: 0;
+  /* padding-block을 root에 두면 Footer 없는 구성에서 Body(flex:1) 아래로
+     그 패딩만큼 빈 공간이 남는다. 상/하 숨돌림은 Header/Body/Footer가
+     각자 담당(Header padding-block, Body padding-top, Footer padding-block). */
+  transition:
+    width var(--duration-base) var(--ease-out),
+    padding var(--duration-base) var(--ease-out);
+}
+
+.root[data-collapsed] {
+  width: var(--sidebar-w-collapsed);
+}
+
+/* Header / Footer ──────────────────────────────────── */
+.header,
+.footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: var(--control-h-md);
+  flex: 0 0 auto;
+  padding-inline: var(--space-4);
+}
+
+.root[data-collapsed] .header,
+.root[data-collapsed] .footer {
+  padding-inline: var(--space-2);
+}
+
+.header {
+  padding-top: var(--space-3);
+  padding-bottom: var(--space-1);
+}
+
+/* Body — 세로 스크롤 영역.
+   여러 개를 두면 각각 독립 스크롤 트랙. flex:1로 남은 공간을 균등 분배.
+   상단 fade mask로 Header와 자연스럽게 이어짐 — 하단은 Footer border로 끊음.
+   padding-bottom으로 Footer 바로 위에 숨돌릴 여백 — scroll 끝에서 마지막 항목이 border에 치이지 않도록. */
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  flex: 1 1 0;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* 'none': 스크롤 체인 차단 + 바운스/러버밴드 자체도 억제.
+     스크롤이 생길 콘텐츠면 자기 영역에서만 스크롤, 콘텐츠가 짧으면 바운스 없음. */
+  overscroll-behavior-y: none;
+  padding-top: var(--space-3);
+  /* 상단 fade mask — Header와 자연스럽게 이어지도록 스크롤 시작부가 흐려짐.
+     하단은 Footer border가 받으므로 fade 불필요.
+     #000은 색이 아니라 CSS mask의 "불투명 마커"라 테마 색 토큰으로 치환 불가. */
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--space-3), /* lint-hardcoded: ignore */
+    #000 100% /* lint-hardcoded: ignore */
+  );
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    #000 var(--space-3), /* lint-hardcoded: ignore */
+    #000 100% /* lint-hardcoded: ignore */
+  );
+  /* padding-bottom은 두지 않음 — Footer가 있으면 Footer 자체 padding이 받고,
+     없으면 콘텐츠가 사이드바 끝까지 자연스럽게 흐르게. */
+}
+
+/* Brand ───────────────────────────────────────────────
+   symbol은 항상, wordmark는 expanded일 때만 렌더.
+   상한선 토큰으로 max-height 강제 — 사용처가 그 안에서 자유롭게 크기 지정.
+   자식 svg/img/text 어떤 형태든 잘리지 않고 상한만 존중. */
+.brand {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-height: var(--control-h-md);
+  padding-inline: var(--space-2);
+}
+
+.brandSymbol {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  max-height: var(--sidebar-brand-symbol-max);
+}
+
+.brandSymbol > * {
+  max-height: 100%;
+  width: auto;
+  height: auto;
+}
+
+.brandWordmark {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  max-height: var(--sidebar-brand-wordmark-max);
+  font-family: var(--font-normal);
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.brandWordmark > * {
+  max-height: 100%;
+  width: auto;
+  height: auto;
+}
+
+.footer {
+  margin-top: auto;
+  padding: var(--space-2) 0;
+  border-top: var(--hairline) solid var(--border);
+}
+
+/* Profile ──────────────────────────────────────────────
+   Footer 내부 사용자 식별 영역. Avatar(lg)+2줄 텍스트.
+   좌우 음수 margin으로 footer padding-inline(--space-4) 상쇄 → hover 영역이
+   사이드바 좌/우 끝까지 꽉 참. 안쪽 콘텐츠는 padding-inline으로 복원. */
+.profile {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  margin-inline: calc(var(--space-4) * -1);
+  padding: var(--space-2) var(--space-4);
+  border-radius: 0;
+  min-width: 0;
+  width: auto;
+  cursor: pointer;
+  transition: var(--transition-colors);
+}
+
+.profile:hover {
+  background: var(--hover);
+}
+
+.profile:focus-visible {
+  outline: none;
+  background: var(--hover);
+}
+
+.profile[data-collapsed] {
+  justify-content: center;
+  gap: 0;
+  /* collapsed root padding(--space-2)에 맞춰 margin도 축소. */
+  margin-inline: calc(var(--space-2) * -1);
+  padding-inline: var(--space-2);
+}
+
+.profileBody {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.profileName {
+  font-family: var(--label-font);
+  font-size: var(--label-sm-size);
+  letter-spacing: var(--label-tracking);
+  line-height: var(--lh-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--fg);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.profileSub {
+  font-family: var(--label-font);
+  font-size: var(--text-xs);
+  line-height: var(--lh-xs);
+  font-weight: var(--font-weight-regular);
+  color: var(--fg-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.profileTrailing {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+/* Section ────────────────────────────────────────────
+   스크롤 트랙(.body) 안쪽의 "items" 레이어. 좌우 padding은 여기가 담당.
+   .body 자체에 두면 스크롤바가 padding 안쪽으로 밀려 좌/우 끝에 안 붙음. */
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  padding-inline: var(--space-4);
+}
+
+.root[data-collapsed] .section {
+  padding-inline: var(--space-2);
+}
+
+.sectionItems {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0_5);
+}
+
+/* Separator ──────────────────────────────────────────
+   스크롤 트랙(.body) 바로 아래 자식. section의 padding-inline과 폭 맞추기 위해
+   같은 inline padding을 margin으로 복제 — 라인은 아이템과 좌/우 정렬. */
+.separator {
+  height: var(--hairline);
+  margin: var(--space-1) var(--space-4);
+  background: var(--border);
+}
+
+.root[data-collapsed] .separator {
+  margin: var(--space-1) var(--space-2);
+}
+

package/assets/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+
+import { Avatar, type AvatarProps } from "../Avatar";
+import { MenuItem, type MenuItemAction } from "../MenuItem";
+import styles from "./Sidebar.module.css";
+
+/* Context — collapsed 상태를 하위 Item/Section에 흘려보냄. */
+interface SidebarCtx {
+  collapsed: boolean;
+}
+const SidebarContext = createContext<SidebarCtx>({ collapsed: false });
+const useSidebar = () => useContext(SidebarContext);
+
+/* Root ─────────────────────────────────────────────── */
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+  /** true면 icon-only 축소 상태. label 숨기고 폭 축소. */
+  collapsed?: boolean;
+}
+
+const SidebarRoot = forwardRef<HTMLElement, SidebarProps>(function SidebarRoot(
+  { collapsed = false, className, children, ...rest },
+  ref,
+) {
+  const rootClass = [styles.root, className ?? ""].filter(Boolean).join(" ");
+  return (
+    <SidebarContext.Provider value={{ collapsed }}>
+      <nav
+        ref={ref}
+        className={rootClass}
+        data-collapsed={collapsed || undefined}
+        aria-label="Sidebar"
+        {...rest}
+      >
+        {children}
+      </nav>
+    </SidebarContext.Provider>
+  );
+});
+
+/* Header ───────────────────────────────────────────── */
+function SidebarHeader({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={[styles.header, className ?? ""].filter(Boolean).join(" ")} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+/* Body ─────────────────────────────────────────────────
+   Header와 Footer 사이의 세로 스크롤 영역.
+   여러 개를 두면 각각 독립적인 스크롤 트랙이 됨. */
+function SidebarBody({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={[styles.body, className ?? ""].filter(Boolean).join(" ")} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+/* Brand ────────────────────────────────────────────────
+   Home 링크 자리. symbol(항상 표시) + wordmark(expanded 시에만).
+   wordmark는 ReactNode(로고 SVG) 또는 string(텍스트 워드마크) 아무거나.
+   크기는 상한선(--sidebar-brand-symbol-max, --sidebar-brand-wordmark-max)까지
+   사용처가 자유롭게 조절 — symbol/wordmark 안에서 own width/height 지정. */
+export interface SidebarBrandProps extends HTMLAttributes<HTMLDivElement> {
+  symbol: ReactNode;
+  wordmark?: ReactNode;
+}
+
+function SidebarBrand({ symbol, wordmark, className, ...rest }: SidebarBrandProps) {
+  const { collapsed } = useSidebar();
+  return (
+    <div className={[styles.brand, className ?? ""].filter(Boolean).join(" ")} {...rest}>
+      <div className={styles.brandSymbol}>{symbol}</div>
+      {!collapsed && wordmark && (
+        <div className={styles.brandWordmark}>{wordmark}</div>
+      )}
+    </div>
+  );
+}
+
+/* Footer ───────────────────────────────────────────── */
+function SidebarFooter({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={[styles.footer, className ?? ""].filter(Boolean).join(" ")} {...rest}>
+      {children}
+    </div>
+  );
+}
+
+/* Profile ──────────────────────────────────────────────
+   사이드바 하단 사용자 식별 영역.
+   Avatar(size=md) + name(1행) + sub(1행) 조합.
+   collapsed일 땐 Avatar만 노출(aria-label로 접근성 유지).
+   사이즈·간격·폰트는 MenuItem md 리듬에 맞춰 통일 — 인라인 스타일로 조립 금지. */
+export interface SidebarProfileProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  name: string;
+  sub?: ReactNode;
+  /** Avatar에 그대로 패스스루. src/initials/icon/status 등 자유롭게. */
+  avatar?: Omit<AvatarProps, "size" | "name" | "alt">;
+  /** 오른쪽 끝 보조 UI(IconButton 등). collapsed일 땐 숨김. */
+  trailing?: ReactNode;
+}
+
+function SidebarProfile({
+  name,
+  sub,
+  avatar,
+  trailing,
+  className,
+  ...rest
+}: SidebarProfileProps) {
+  const { collapsed } = useSidebar();
+  return (
+    <div
+      className={[styles.profile, className ?? ""].filter(Boolean).join(" ")}
+      data-collapsed={collapsed || undefined}
+      title={collapsed ? name : undefined}
+      {...rest}
+    >
+      <Avatar size="md" name={name} alt={name} {...avatar} />
+      {!collapsed && (
+        <div className={styles.profileBody}>
+          <span className={styles.profileName}>{name}</span>
+          {sub && <span className={styles.profileSub}>{sub}</span>}
+        </div>
+      )}
+      {!collapsed && trailing && (
+        <div className={styles.profileTrailing}>{trailing}</div>
+      )}
+    </div>
+  );
+}
+
+/* Section ──────────────────────────────────────────── */
+export interface SidebarSectionProps extends HTMLAttributes<HTMLDivElement> {
+  /** 섹션 제목. collapsed일 땐 숨김. */
+  title?: string;
+}
+
+function SidebarSection({ title, className, children, ...rest }: SidebarSectionProps) {
+  const { collapsed } = useSidebar();
+  return (
+    <div
+      className={[styles.section, className ?? ""].filter(Boolean).join(" ")}
+      role="group"
+      aria-label={title}
+      {...rest}
+    >
+      {title && !collapsed && (
+        <MenuItem variant="section" size="sm">
+          {title}
+        </MenuItem>
+      )}
+      <div className={styles.sectionItems}>{children}</div>
+    </div>
+  );
+}
+
+/* Separator ────────────────────────────────────────── */
+function SidebarSeparator({ className, ...rest }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      role="separator"
+      className={[styles.separator, className ?? ""].filter(Boolean).join(" ")}
+      {...rest}
+    />
+  );
+}
+
+/* Item ─────────────────────────────────────────────── */
+export interface SidebarItemProps {
+  /** 왼쪽 아이콘. Icon 컴포넌트 인스턴스. */
+  icon?: ReactNode;
+  /** 항목 라벨. collapsed일 땐 aria-label로만 남고 시각적으로 숨김. */
+  label: string;
+  /** 현재 라우트/선택. MenuItem의 active와 동일. */
+  active?: boolean;
+  /** 오른쪽 배지/카운트/보조 UI. collapsed일 땐 숨김. */
+  trailing?: ReactNode;
+  /** 오른쪽 끝 단축키 힌트. collapsed일 땐 숨김. */
+  shortcut?: string;
+  /** 서브메뉴 화살표. */
+  hasSubmenu?: boolean;
+  /** 비활성. */
+  disabled?: boolean;
+  /** Radix Slot 위임 — <Link>, <a> 등 감싸기용. */
+  asChild?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  children?: ReactNode;
+}
+
+const SidebarItem = forwardRef<HTMLDivElement, SidebarItemProps>(function SidebarItem(
+  {
+    icon,
+    label,
+    active,
+    trailing,
+    shortcut,
+    hasSubmenu,
+    disabled,
+    asChild,
+    onClick,
+    children,
+  },
+  ref,
+) {
+  const { collapsed } = useSidebar();
+
+  const leadingActions: MenuItemAction[] = icon ? [icon] : [];
+  const trailingActions: MenuItemAction[] = trailing ? [trailing] : [];
+
+  return (
+    <MenuItem
+      ref={ref}
+      size="md"
+      active={active}
+      disabled={disabled}
+      asChild={asChild}
+      collapsed={collapsed}
+      leadingActions={leadingActions}
+      trailingActions={trailingActions}
+      shortcut={shortcut}
+      hasSubmenu={hasSubmenu}
+      onClick={onClick}
+      aria-label={collapsed ? label : undefined}
+      title={collapsed ? label : undefined}
+    >
+      {children ?? label}
+    </MenuItem>
+  );
+});
+
+/* Compound export ──────────────────────────────────── */
+type SidebarComponent = typeof SidebarRoot & {
+  Header: typeof SidebarHeader;
+  Body: typeof SidebarBody;
+  Brand: typeof SidebarBrand;
+  Footer: typeof SidebarFooter;
+  Profile: typeof SidebarProfile;
+  Section: typeof SidebarSection;
+  Separator: typeof SidebarSeparator;
+  Item: typeof SidebarItem;
+};
+
+const Sidebar = SidebarRoot as SidebarComponent;
+Sidebar.Header = SidebarHeader;
+Sidebar.Body = SidebarBody;
+Sidebar.Brand = SidebarBrand;
+Sidebar.Footer = SidebarFooter;
+Sidebar.Profile = SidebarProfile;
+Sidebar.Section = SidebarSection;
+Sidebar.Separator = SidebarSeparator;
+Sidebar.Item = SidebarItem;
+
+export { Sidebar };

package/assets/components/Sidebar/index.ts

@@ -0,0 +1,7 @@
+export { Sidebar } from "./Sidebar";
+export type {
+  SidebarProps,
+  SidebarSectionProps,
+  SidebarItemProps,
+  SidebarBrandProps,
+} from "./Sidebar";

package/assets/components/SidebarSplit/SidebarSplit.module.css

@@ -0,0 +1,126 @@
+/* Root ─────────────────────────────────────────────────
+   rail · panel 모두 세로 전체를 차지하고,
+   내부에서 Header(sticky top) · Body(scroll) · Footer(sticky bottom) 3영역으로 나뉨. */
+.root {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  height: 100%;
+  min-height: 0;
+}
+
+/* Rail (좁은 좌측) ──────────────────────────────────────
+   3영역: Brand(top) · Items(scroll) · Footer(bottom). */
+.rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1);
+  width: calc(var(--control-h-lg) + var(--space-3) * 2);
+  padding-block: var(--space-3);
+  padding-inline: var(--space-2);
+  height: 100%;
+  min-height: 0;
+  border-right: var(--hairline) solid var(--border);
+}
+
+.railBrand {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--control-h-lg);
+  max-height: var(--sidebar-brand-symbol-max);
+  padding-bottom: var(--space-3);
+  flex: 0 0 auto;
+}
+
+.railBrand > * {
+  max-height: 100%;
+  width: auto;
+  height: auto;
+}
+
+.railItems {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  flex: 1 1 0;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  width: 100%;
+  align-items: center;
+}
+
+.railFooter {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  align-items: center;
+  padding-top: var(--space-3);
+  flex: 0 0 auto;
+}
+
+/* Panel (넓은 우측) ────────────────────────────────────
+   3영역: Header(sticky top) · Body(scroll) · Footer(sticky bottom). */
+.panel {
+  display: flex;
+  flex-direction: column;
+  width: var(--sidebar-w);
+  height: 100%;
+  min-height: 0;
+  padding: var(--space-3);
+  gap: var(--space-3);
+}
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: 0 var(--space-1);
+  flex: 0 0 auto;
+}
+
+.panelTitle {
+  font-family: var(--font-normal);
+  font-size: var(--text-xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--fg);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.panelBody {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  min-height: 0;
+  flex: 1 1 0;
+}
+
+.panelFooter {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding-top: var(--space-2);
+  border-top: var(--hairline) solid var(--border);
+  flex: 0 0 auto;
+}
+
+/* Section ──────────────────────────────────────────── */
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.sectionItems {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0_5);
+}