@conscience-technology/ctds 0.0.0-stage → 0.1.1

package/assets/components/SidebarSplit/SidebarSplit.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import {
+  forwardRef,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+
+import { IconButton } from "../IconButton";
+import { Icon } from "../Icon";
+import { MenuItem } from "../MenuItem";
+import styles from "./SidebarSplit.module.css";
+
+/* Rail 항목 하나. rail에 icon-only 버튼으로 표시되고,
+   활성화되면 오른쪽 panel에 panel 콘텐츠가 노출된다. */
+export interface SidebarSplitSection {
+  id: string;
+  /** rail의 icon-only 버튼 아이콘. Icon 인스턴스. */
+  icon: ReactNode;
+  /** rail 버튼 aria-label + panel 헤더 타이틀. */
+  label: string;
+  /** panel 콘텐츠 (검색 인풋, 섹션, 서브 메뉴 등). */
+  panel: ReactNode;
+}
+
+export interface SidebarSplitProps extends HTMLAttributes<HTMLElement> {
+  /** rail 상단 로고 심볼. */
+  brand?: ReactNode;
+  /** rail 하단 footer 액션(설정/프로필 등). */
+  railFooter?: ReactNode;
+  /** rail에 나열될 섹션 목록. */
+  sections: SidebarSplitSection[];
+  /** panel 하단 고정 영역(프로필/설정 등). 모든 섹션에서 공통. */
+  panelFooter?: ReactNode;
+  /** controlled 활성 섹션 id. */
+  activeId?: string;
+  defaultActiveId?: string;
+  onActiveChange?: (id: string) => void;
+  /** controlled: panel 접힘 여부. false면 panel 숨김, rail만 노출. */
+  panelOpen?: boolean;
+  defaultPanelOpen?: boolean;
+  onPanelOpenChange?: (open: boolean) => void;
+}
+
+const SidebarSplit = forwardRef<HTMLElement, SidebarSplitProps>(function SidebarSplit(
+  {
+    brand,
+    railFooter,
+    sections,
+    panelFooter,
+    activeId: activeIdProp,
+    defaultActiveId,
+    onActiveChange,
+    panelOpen: panelOpenProp,
+    defaultPanelOpen = true,
+    onPanelOpenChange,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const [activeIdState, setActiveIdState] = useState<string>(
+    defaultActiveId ?? sections[0]?.id ?? "",
+  );
+  const activeId = activeIdProp ?? activeIdState;
+
+  const [panelOpenState, setPanelOpenState] = useState<boolean>(defaultPanelOpen);
+  const panelOpen = panelOpenProp ?? panelOpenState;
+
+  const setActive = (id: string) => {
+    setActiveIdState(id);
+    onActiveChange?.(id);
+  };
+  const setPanelOpen = (v: boolean) => {
+    setPanelOpenState(v);
+    onPanelOpenChange?.(v);
+  };
+
+  const active = sections.find((s) => s.id === activeId);
+
+  const rootClass = [styles.root, className ?? ""].filter(Boolean).join(" ");
+
+  return (
+    <nav
+      ref={ref}
+      className={rootClass}
+      data-panel-open={panelOpen || undefined}
+      aria-label="Sidebar"
+      {...rest}
+    >
+      {/* Rail ─────────────────────────────────────── */}
+      <div className={styles.rail}>
+        {brand && <div className={styles.railBrand}>{brand}</div>}
+
+        <div className={styles.railItems} role="tablist" aria-orientation="vertical">
+          {sections.map((s) => (
+            <IconButton
+              key={s.id}
+              variant={s.id === activeId ? "secondary" : "ghost"}
+              size="lg"
+              icon={s.icon}
+              aria-label={s.label}
+              aria-selected={s.id === activeId}
+              role="tab"
+              onClick={() => {
+                setActive(s.id);
+                if (!panelOpen) setPanelOpen(true);
+              }}
+            />
+          ))}
+        </div>
+
+        {railFooter && <div className={styles.railFooter}>{railFooter}</div>}
+      </div>
+
+      {/* Panel ──────────────────────────────────────
+          3영역: Header(sticky top) · Body(scroll) · Footer(sticky bottom). */}
+      {panelOpen && active && (
+        <div className={styles.panel} role="tabpanel" aria-label={active.label}>
+          <div className={styles.panelHeader}>
+            <div className={styles.panelTitle}>{active.label}</div>
+            <IconButton
+              variant="ghost"
+              size="sm"
+              icon={<Icon name="caret-left" />}
+              aria-label="사이드바 접기"
+              onClick={() => setPanelOpen(false)}
+            />
+          </div>
+          <div className={styles.panelBody}>{active.panel}</div>
+          {panelFooter && <div className={styles.panelFooter}>{panelFooter}</div>}
+        </div>
+      )}
+    </nav>
+  );
+});
+
+/* Panel 내부에서 쓰이는 sub-nav 조각들 ─────────────── */
+
+function PanelSection({
+  title,
+  children,
+  className,
+  ...rest
+}: HTMLAttributes<HTMLDivElement> & { title?: string }) {
+  return (
+    <div
+      className={[styles.section, className ?? ""].filter(Boolean).join(" ")}
+      role="group"
+      aria-label={title}
+      {...rest}
+    >
+      {title && (
+        <MenuItem variant="section" size="sm">
+          {title}
+        </MenuItem>
+      )}
+      <div className={styles.sectionItems}>{children}</div>
+    </div>
+  );
+}
+
+/* Panel 안에서 쓰는 MenuItem wrapper. Sidebar.Item과 동일한 shape. */
+export interface PanelItemProps {
+  icon?: ReactNode;
+  label: string;
+  active?: boolean;
+  trailing?: ReactNode;
+  shortcut?: string;
+  hasSubmenu?: boolean;
+  disabled?: boolean;
+  asChild?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  children?: ReactNode;
+}
+
+const PanelItem = forwardRef<HTMLDivElement, PanelItemProps>(function PanelItem(
+  {
+    icon,
+    label,
+    active,
+    trailing,
+    shortcut,
+    hasSubmenu,
+    disabled,
+    asChild,
+    onClick,
+    children,
+  },
+  ref,
+) {
+  return (
+    <MenuItem
+      ref={ref}
+      size="md"
+      active={active}
+      disabled={disabled}
+      asChild={asChild}
+      leadingActions={icon ? [icon] : []}
+      trailingActions={trailing ? [trailing] : []}
+      shortcut={shortcut}
+      hasSubmenu={hasSubmenu}
+      onClick={onClick}
+      aria-label={label}
+    >
+      {children ?? label}
+    </MenuItem>
+  );
+});
+
+/* Compound export ──────────────────────────────────── */
+type SidebarSplitComponent = typeof SidebarSplit & {
+  Section: typeof PanelSection;
+  Item: typeof PanelItem;
+};
+
+const _SidebarSplit = SidebarSplit as SidebarSplitComponent;
+_SidebarSplit.Section = PanelSection;
+_SidebarSplit.Item = PanelItem;
+
+export { _SidebarSplit as SidebarSplit };

package/assets/components/SidebarSplit/index.ts

@@ -0,0 +1,6 @@
+export { SidebarSplit } from "./SidebarSplit";
+export type {
+  SidebarSplitProps,
+  SidebarSplitSection,
+  PanelItemProps,
+} from "./SidebarSplit";

package/assets/components/Slider/Slider.module.css

@@ -0,0 +1,120 @@
+/* Slider — 미니멀 스펙: 트랙 + 채워진 부분 + 썸.
+   native input[type=range]를 커스텀 스타일링. 값 라벨·마크·range는 없음.
+
+   축 반응:
+   ─ Density → --control-h-* (썸 크기), --space-scale (트랙 두께)
+   ─ Shape   → 트랙·썸 radius
+   ─ Motion  → hover·drag 상태 전환 duration/easing
+   ─ Palette → 채워진 트랙 --primary
+*/
+
+.root {
+  --_track-h: var(--space-1);
+  --_thumb: var(--control-h-md);
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  /* 썸 높이만큼 hit area 확보 */
+  height: var(--_thumb);
+  --_track-fg: var(--primary);
+  --_track-bg: var(--bg-muted);
+}
+
+/* Sizes ─ Button/Tabs와 동일한 control-h 스케일 */
+.size_sm { --_thumb: var(--control-h-sm); --_track-h: var(--space-0_5); }
+.size_md { --_thumb: var(--control-h-md); --_track-h: var(--space-1); }
+.size_lg { --_thumb: var(--control-h-lg); --_track-h: var(--space-1_5); }
+
+/* Focus ring — 썸에만 */
+.root:focus { outline: none; }
+
+/* WebKit / Blink ──────────────────────────────────────────── */
+.root::-webkit-slider-runnable-track {
+  height: var(--_track-h);
+  border-radius: var(--radius-full);
+  background:
+    linear-gradient(
+      to right,
+      var(--_track-fg) 0%,
+      var(--_track-fg) var(--slider-pct, 0%),
+      var(--_track-bg) var(--slider-pct, 0%),
+      var(--_track-bg) 100%
+    );
+  border: var(--hairline) solid var(--border);
+  transition: background var(--duration-fast) var(--ease-out);
+}
+.root::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: var(--_thumb);
+  height: var(--_thumb);
+  border-radius: var(--radius-full);
+  background: var(--bg);
+  border: var(--hairline) solid var(--border-strong);
+  box-shadow: var(--shadow-xs);
+  /* 트랙 중앙 정렬: (track-h - thumb) / 2, border 두께 보정 */
+  margin-top: calc((var(--_track-h) - var(--_thumb)) / 2 - var(--hairline));
+  transition:
+    box-shadow var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out),
+    border-color var(--duration-fast) var(--ease-out);
+  cursor: grab;
+}
+.root:hover:not(:disabled)::-webkit-slider-thumb {
+  border-color: var(--primary);
+}
+.root:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--ring-shadow);
+  border-color: var(--primary);
+}
+.root:active:not(:disabled)::-webkit-slider-thumb {
+  cursor: grabbing;
+  transform: scale(1.05);
+}
+
+/* Firefox ─────────────────────────────────────────────────── */
+.root::-moz-range-track {
+  height: var(--_track-h);
+  border-radius: var(--radius-full);
+  background: var(--_track-bg);
+  border: var(--hairline) solid var(--border);
+}
+.root::-moz-range-progress {
+  height: var(--_track-h);
+  border-radius: var(--radius-full);
+  background: var(--_track-fg);
+}
+.root::-moz-range-thumb {
+  width: var(--_thumb);
+  height: var(--_thumb);
+  border-radius: var(--radius-full);
+  background: var(--bg);
+  border: var(--hairline) solid var(--border-strong);
+  box-shadow: var(--shadow-xs);
+  transition:
+    box-shadow var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out),
+    border-color var(--duration-fast) var(--ease-out);
+  cursor: grab;
+}
+.root:hover:not(:disabled)::-moz-range-thumb {
+  border-color: var(--primary);
+}
+.root:focus-visible::-moz-range-thumb {
+  box-shadow: var(--ring-shadow);
+  border-color: var(--primary);
+}
+.root:active:not(:disabled)::-moz-range-thumb {
+  cursor: grabbing;
+  transform: scale(1.05);
+}
+
+/* Disabled */
+.root:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/assets/components/Slider/Slider.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  type CSSProperties,
+  type InputHTMLAttributes,
+} from "react";
+
+import styles from "./Slider.module.css";
+
+export type SliderSize = "sm" | "md" | "lg";
+
+export type SliderProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type" | "size" | "value" | "defaultValue"
+> & {
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  size?: SliderSize;
+  onValueChange?: (value: number) => void;
+};
+
+const Slider = forwardRef<HTMLInputElement, SliderProps>(
+  (
+    {
+      className,
+      value,
+      defaultValue,
+      min = 0,
+      max = 100,
+      step = 1,
+      size = "md",
+      onValueChange,
+      onChange,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
+    const current = value ?? defaultValue ?? min;
+    const denom = max - min || 1;
+    const pct = useMemo(
+      () => Math.max(0, Math.min(100, ((current - min) / denom) * 100)),
+      [current, min, denom],
+    );
+
+    const handleChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange?.(e);
+        if (!e.defaultPrevented) onValueChange?.(Number(e.target.value));
+      },
+      [onChange, onValueChange],
+    );
+
+    const cls = [styles.root, styles[`size_${size}`], className ?? ""]
+      .filter(Boolean)
+      .join(" ");
+
+    const mergedStyle: CSSProperties = {
+      ...style,
+      ["--slider-pct" as string]: `${pct}%`,
+    };
+
+    return (
+      <input
+        ref={ref}
+        type="range"
+        className={cls}
+        value={value}
+        defaultValue={value === undefined ? defaultValue : undefined}
+        min={min}
+        max={max}
+        step={step}
+        onChange={handleChange}
+        style={mergedStyle}
+        {...rest}
+      />
+    );
+  },
+);
+Slider.displayName = "Slider";
+
+export { Slider };

package/assets/components/Slider/index.ts

@@ -0,0 +1,2 @@
+export { Slider } from "./Slider";
+export type { SliderProps, SliderSize } from "./Slider";

package/assets/components/SplitButton/SplitButton.module.css

@@ -0,0 +1,190 @@
+/* SplitButton — 붙어있지만 클릭 영역이 분리된 2-part 버튼.
+   구조: <div.root> [ button.main | span.divider | button.menu ]
+
+   설계:
+   - 배경·보더는 root가 담당 → main/menu 사이 시각적 갭 없음
+   - hover 시 각 part의 배경만 얹혀서 절반 강조
+   - divider는 root 위에 얹히는 hairline (currentColor × 알파)
+*/
+
+.root {
+  display: inline-flex;
+  align-items: stretch;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  overflow: hidden;
+  /* Button과 outer 높이를 맞추기 위해 root가 height를 잡고 border를 안쪽으로 포함.
+     size class(sm/md/lg)에서 --split-h를 세팅한다. */
+  box-sizing: border-box;
+  height: var(--split-h);
+  transition:
+    background var(--duration-slow) var(--ease-out),
+    border-color var(--duration-slow) var(--ease-out);
+  /* variant class가 background / border-color / color 설정 */
+}
+.root.fullWidth {
+  display: flex;
+  width: 100%;
+}
+
+/* 공통 part — 배경/보더 없음. 크기와 hover 강조만. */
+.part {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  font-family: var(--font-normal);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lh-tight);
+  letter-spacing: var(--label-tracking);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  background: transparent;
+  color: inherit;
+  border: 0;
+  padding: 0;
+  transition:
+    background var(--duration-slow) var(--ease-out),
+    color var(--duration-slow) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+}
+.part:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-shadow);
+  position: relative;
+  z-index: var(--z-docked);
+}
+/* Press feedback: 반쪽 컨테이너는 제자리, 아이콘·라벨만 미세하게 눌림.
+   - transform은 emphasized 대신 ease-out 계열 사용 (스프링 오버슛이 press엔 뚝딱 느낌)
+   - 진입·해제 모두 base 지속 → 대칭 부드러움
+   - opacity(hover)는 emphasized로 감각적 변화 유지 */
+.part .icon,
+.part .label {
+  transition:
+    transform var(--duration-base) var(--ease-out);
+}
+.part .icon {
+  transition:
+    transform var(--duration-base) var(--ease-out),
+    opacity var(--duration-slow) var(--ease-out);
+}
+.part:active:not(:disabled) .icon,
+.part:active:not(:disabled) .label {
+  transform: translateY(var(--space-0_5));
+}
+/* Hover 시 아이콘 밝기 상승 (0.75 → 1.0). "살아나는" 미세한 반응. */
+.part:hover:not(:disabled) .icon {
+  opacity: 1;
+}
+.part:disabled,
+.part[data-loading="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.main { flex: 1 1 auto; }
+.menu { flex: 0 0 auto; }
+
+/* Sizes — Button과 동일 토큰. root가 --split-h를 잡고 part는 stretch로 채움.
+   (part에 height를 걸면 border 두께가 outer에 더해져 Button보다 2px 커지므로 root에 몰아둔다.) */
+.sm { --split-h: var(--control-h-sm); --btn-icon-size: var(--space-4); }
+.sm .part { font-size: var(--text-xs); gap: var(--space-1_5); }
+.sm .main { padding-inline: var(--space-2); }
+.sm .menu { padding-inline: var(--space-1_5); }
+
+.md { --split-h: var(--control-h-md); --btn-icon-size: var(--space-4); }
+.md .part { font-size: var(--text-sm); gap: var(--space-1); }
+.md .main { padding-inline: var(--space-2); }
+.md .menu { padding-inline: var(--space-1_5); }
+
+.lg { --split-h: var(--control-h-lg); --btn-icon-size: var(--space-4); }
+.lg .part { font-size: var(--text-sm); gap: var(--space-1_5); }
+.lg .main { padding-inline: var(--space-4); }
+.lg .menu { padding-inline: var(--space-2); }
+
+/* Divider — 세로 hairline, 위아래 여백 유지.
+   각 variant가 --split-divider로 색·알파 결정 (아이콘/텍스트와 별개 톤). */
+.divider {
+  align-self: stretch;
+  margin-block: var(--space-2);
+  border-left: 1px solid var(--split-divider, currentColor);
+  pointer-events: none;
+  flex: 0 0 auto;
+  transition: border-color var(--duration-slow) var(--ease-out);
+}
+/* 어느 한쪽이 hover되면 divider를 살짝 옅게 → 하나의 덩어리로 뭉치는 느낌. */
+.root:has(.part:hover:not(:disabled)) .divider {
+  border-color: transparent;
+}
+
+/* Icon / label slots.
+   슬롯을 고정 정사각으로 강제 → SVG viewBox 여백이 라이브러리·아이콘마다
+   달라도 슬롯 밖 레이아웃은 균일. SVG는 슬롯을 100% 채움. */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--btn-icon-size);
+  height: var(--btn-icon-size);
+  opacity: 0.75;
+}
+.icon > svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.label {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Variants ─────────────────────────────────────────────────────
+   root가 배경·보더·기본 색 결정. --split-divider는 divider 전용.
+   part hover는 반투명 오버레이로 절반만 강조. */
+
+/* primary — 채움 브랜드. 텍스트 --bg. divider·hover는 시맨틱 토큰으로. */
+.primary {
+  background: var(--primary);
+  border-color: var(--primary);
+  color: var(--bg);
+  --split-divider: var(--border);
+}
+.primary .part:hover:not(:disabled) {
+  background: var(--primary-hover);
+}
+
+/* inverse — 흑백 반전. hover는 fg-strong으로 통째 갈아엎음. */
+.inverse {
+  background: var(--fg);
+  border-color: var(--fg);
+  color: var(--bg);
+  --split-divider: var(--border);
+}
+.inverse .part:hover:not(:disabled) {
+  background: var(--fg-strong);
+}
+
+/* secondary — primary 8% 표면 + primary 텍스트. hover는 --secondary-bg-hover 시맨틱. */
+.secondary {
+  background: var(--secondary-bg);
+  border-color: transparent;
+  color: var(--secondary-fg);
+  --split-divider: var(--border);
+}
+.secondary .part:hover:not(:disabled) {
+  background: var(--secondary-bg-hover);
+}
+
+/* outline — 경계만 */
+.outline {
+  background: transparent;
+  border-color: var(--border);
+  color: var(--fg);
+  --split-divider: var(--border);
+}
+.outline .part:hover:not(:disabled) {
+  background: var(--hover);
+}
+