@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/BulkBar.css

@@ -0,0 +1,75 @@
+.bulk-bar {
+  position: sticky;
+  bottom: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-height: 60px;
+  box-sizing: border-box;
+  padding: 10px 16px;
+  background: var(--color-pureWhite, var(--color-pureWhite));
+  color: var(--color-gray900, #1a1a1a);
+  border-radius: var(--radius-m, 12px);
+  border: 1px solid var(--color-main);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  margin-top: 16px;
+  opacity: 0;
+  transform: translateY(12px);
+  pointer-events: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.bulk-bar--visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+.bulk-bar__count {
+  color: var(--color-gray900, #1a1a1a);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  flex: 1;
+}
+.bulk-bar__count b {
+  color: var(--color-main);
+}
+.bulk-bar__actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+/* content로 선택 항목 칩 목록을 넘길 때 쓰는 래퍼 — 개행되며 바 높이가 함께 늘어난다 */
+.bulk-bar__chips {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs, 8px);
+  min-width: 0;
+}
+.bulk-bar__chips .button {
+  white-space: nowrap;
+}
+
+/* 좁은 화면에선 액션 묶음이 한 줄에 안 들어간다 — 실측(320px, 단어표 편집 화면):
+   `.bulk-bar__actions`가 219px인데 `flex-shrink: 0`이고 바가 `nowrap`이라 오른쪽
+   26px가 잘려 마지막 버튼을 누를 수 없었다. 좁을 때만 줄바꿈해 아래 줄로 내린다.
+   (버튼 자체를 줄이지 않는 이유: 한글 라벨이라 폭을 줄이면 글자가 잘린다.) */
+@media (max-width: 767px) {
+  .bulk-bar {
+    flex-wrap: wrap;
+  }
+  .bulk-bar__actions {
+    flex-wrap: wrap;
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+/* 내용이 두 줄 이상으로 접힌 바 — 액션을 세로로 쌓는다. 칩이 여러 줄인데 버튼이
+   가로로 붙어 있으면 바가 옆으로 길어져 칩 자리를 빼앗는다. */
+.bulk-bar__actions--stacked {
+  flex-direction: column;
+  align-items: stretch;
+}

package/dist/packages/core/src/components/BulkBar.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import './BulkBar.css';
+/** @public */
+export interface BulkAction {
+    label: string;
+    icon?: string;
+    variant?: 'default' | 'danger' | 'main';
+    onClick: () => void;
+}
+export interface BulkBarProps {
+    count: number;
+    actions: BulkAction[];
+    onClear: () => void;
+    clearLabel?: string;
+    /** count > 0 일 때 자동으로 visible */
+    visible?: boolean;
+    /** 기본 "N개 선택됨" 텍스트 대신 표시할 내용 (예: 선택한 항목 이름 나열) */
+    content?: ReactNode;
+    /** 제공하면 액션 버튼 왼쪽에 "count / max" 뱃지를 표시 */
+    max?: number;
+}
+export default function BulkBar({ count, actions, onClear, clearLabel, visible, content, max, }: BulkBarProps): import("react").JSX.Element;

package/dist/packages/core/src/components/BulkBar.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import './BulkBar.css';
+import Button from './Button';
+import Badge from './Badge';
+export default function BulkBar({ count, actions, onClear, clearLabel = '선택 해제', visible, content, max, }) {
+    const { t } = useTranslation();
+    const show = visible !== undefined ? visible : count > 0;
+    /* 내용이 한 줄이면 액션을 가로로, 두 줄 이상이면 세로로 둔다.
+       줄바꿈 여부를 높이 문턱값으로 재면 칩 크기나 글꼴이 바뀔 때마다 틀리므로,
+       자식들이 실제로 같은 줄에 있는지(offsetTop)를 본다. */
+    const contentRef = useRef(null);
+    const [stacked, setStacked] = useState(false);
+    useEffect(() => {
+        const el = contentRef.current;
+        if (!el)
+            return;
+        const check = () => {
+            const row = el.firstElementChild ?? el;
+            const kids = Array.from(row.children);
+            if (kids.length < 2) {
+                setStacked(false);
+                return;
+            }
+            const top = kids[0].offsetTop;
+            setStacked(kids.some(k => k.offsetTop !== top));
+        };
+        check();
+        // ResizeObserver 가 없는 환경(구형 브라우저·SSR·테스트 러너)에서는 생성자 호출이
+        // 그대로 던져 렌더가 통째로 깨진다 — 없으면 첫 측정값 그대로 둔다(WordTable 과 같은 처리).
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const obs = new ResizeObserver(check);
+        obs.observe(el);
+        return () => obs.disconnect();
+    }, [content, count]);
+    return (_jsxs("div", { className: `bulk-bar ${show ? 'bulk-bar--visible' : ''}`, children: [_jsx("span", { ref: contentRef, className: "bulk-bar__count body-2", children: content ?? _jsx("b", { children: t('common.selectedCount', { count }) }) }), max !== undefined && (_jsx(Badge, { size: "small", fill: "soft", variant: "main", label: `${count} / ${max}` })), _jsxs("div", { className: `bulk-bar__actions${stacked ? ' bulk-bar__actions--stacked' : ''}`, children: [_jsx(Button, { size: 40, label: clearLabel, onClick: onClear }), actions.map((a, i) => (_jsx(Button, { size: 40, variant: a.variant ?? 'default', icon: a.icon, label: a.label, onClick: a.onClick }, i)))] })] }));
+}