@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+import { type ButtonVariant } from './Button';
+import { type PromoBannerBgKey } from './PromoBannerBg/promoBannerBg';
+import './PromoBanner.css';
+/** @public */
+export interface PromoBannerProps {
+    /** 배너 타이틀 */
+    title: ReactNode;
+    /** 타이틀 아래 설명 문구 */
+    description?: ReactNode;
+    /** 우측 액션 버튼 라벨 — 없으면 버튼 미표시 */
+    actionLabel?: string;
+    /** 액션 버튼 클릭 콜백 */
+    onAction?: () => void;
+    /** 배경 선택 — PromoBannerBg 컴포넌트 key. 선택된 배경이 자신의 타이틀/설명 색상과 기본 버튼 variant를 주입한다. */
+    bg?: PromoBannerBgKey;
+    /** @deprecated `bg`로 이름 변경 — 동일 동작. bg가 지정되면 무시된다. */
+    color?: PromoBannerBgKey;
+    /** 크기. `'medium'`(기본) | `'small'`(팝업 등 컴팩트 영역용) */
+    size?: 'medium' | 'small';
+    /** 액션 버튼 variant. 미지정 시 배경(PromoBannerBg*)이 정의한 기본 actionVariant를 사용 */
+    actionVariant?: ButtonVariant;
+    /** 타이틀 색상 override. 미지정 시 배경(PromoBannerBg*)이 주입한 기본값을 그대로 사용 */
+    titleColor?: string;
+    /** 설명 색상 override. 미지정 시 배경(PromoBannerBg*)이 주입한 기본값을 그대로 사용 */
+    descriptionColor?: string;
+    className?: string;
+}
+/** @public */
+export default function PromoBanner({ title, description, actionLabel, onAction, bg, color, size, actionVariant, titleColor, descriptionColor, className, }: PromoBannerProps): import("react").JSX.Element;

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

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import { useLayoutEffect, useRef, useState } from 'react';
+import Button from './Button';
+import { PROMO_BANNER_BG_COMPONENTS } from './PromoBannerBg/promoBannerBg';
+import { getPromoBannerBgTheme } from './PromoBannerBg/PromoBannerBgTheme';
+import { useMediaQuery } from '../hooks';
+import './PromoBanner.css';
+/** @public */
+export default function PromoBanner({ title, description, actionLabel, onAction, bg, color, size = 'medium', actionVariant, titleColor, descriptionColor, className = '', }) {
+    const resolvedBg = bg ?? color ?? 'main';
+    const rootRef = useRef(null);
+    const [resolvedActionVariant, setResolvedActionVariant] = useState('main');
+    // 모바일에서는 라벨을 빼고 화살표만 남긴 원형 버튼으로 — 배너 폭이 좁아 140px 고정폭
+    // 버튼이 제목·설명을 눌러 두 줄로 밀어냈다. 접근성 이름은 라벨 그대로 유지한다.
+    const isMobile = useMediaQuery('(max-width: 767px)');
+    // PromoBannerBg*가 useLayoutEffect(child)에서 --promo-banner-bg-title/description을
+    // 주입한 뒤, 이 useLayoutEffect(parent)에서 override → 항상 마지막에 적용됨.
+    // ⚠️ prop이 undefined일 때는 절대 removeProperty 하지 않는다 — 배경이 주입한 값을
+    // 지워버리기 때문. undefined = "override 안 함"(PassCard의 textColor와 동일 패턴).
+    useLayoutEffect(() => {
+        const el = rootRef.current;
+        if (!el)
+            return;
+        if (titleColor !== undefined)
+            el.style.setProperty('--promo-banner-bg-title', titleColor);
+        if (descriptionColor !== undefined)
+            el.style.setProperty('--promo-banner-bg-description', descriptionColor);
+    }, [titleColor, descriptionColor]);
+    // 배경(Bg)이 자신의 useLayoutEffect에서 레지스트리에 theme을 주입한 뒤 읽는다(PassCard의
+    // logoColor와 동일 패턴) — 배경마다 다른 기본 버튼 variant를 PromoBannerBg* 파일이 직접 갖는다.
+    useLayoutEffect(() => {
+        const el = rootRef.current;
+        if (!el)
+            return;
+        const theme = getPromoBannerBgTheme(el);
+        setResolvedActionVariant(theme?.actionVariant ?? 'main');
+    }, [resolvedBg]);
+    /*
+     * 배경 이름을 클래스로도 붙이고 있었다(promo-banner--main·--naver …). 그런데 그 이름의
+     * CSS 는 하나도 없다 — PromoBanner.css 에 있는 promo-banner-- 변형은 크기(medium/small)
+     * 뿐이고, 배경은 PromoBannerBg* 컴포넌트가 직접 그린 뒤 제목·설명 색을 CSS 변수와
+     * WeakMap 레지스트리로 넘긴다. 즉 아무도 읽지 않는 클래스였다(배경 키 열넷 전부).
+     *
+     * 살아 있는 화면에서 '쓰이는데 정의가 없는 클래스'를 세다가 나왔다. 걷어낸다 —
+     * 겉모습은 그대로고, 배경이 어디서 오는지 헷갈릴 여지가 하나 줄어든다.
+     */
+    const cls = cx('promo-banner', `promo-banner--${size}`, className);
+    const Bg = PROMO_BANNER_BG_COMPONENTS[resolvedBg];
+    return (_jsxs("div", { ref: rootRef, className: cls, role: "note", children: [_jsx(Bg, {}), _jsxs("div", { className: "promo-banner__text", children: [_jsx("span", { className: `promo-banner__title ${size === 'small' ? 'body-2' : 'h2'}`, children: title }), description && _jsx("span", { className: "promo-banner__description body-3", children: description })] }), actionLabel && onAction && (_jsx(Button, { size: 40, variant: actionVariant ?? resolvedActionVariant, shape: "pill", useBorder: true, onClick: onAction, ariaLabel: actionLabel, ...(isMobile
+                    ? { type: 'dot', icon: 'arrow-right' }
+                    : { rightIcon: 'arrow-right', label: actionLabel, minWidth: 140 }) }))] }));
+}

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

@@ -0,0 +1,8 @@
+/* 모든 PromoBannerBg* 컴포넌트 공통 — 부모(position: relative)를 절대위치로 가득 채운다.
+   부모의 border-radius/overflow:hidden을 그대로 물려받도록 border-radius: inherit. */
+.promo-banner-bg {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDark.css

@@ -0,0 +1,3 @@
+.promo-banner-bg-dark {
+  background: var(--color-lightBlack);
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDark.d.ts

@@ -0,0 +1,11 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgDark.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgDarkTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — 짙은 무채색(lightBlack) 평면. 다른 배경들과 대비되는 절제된 톤이 필요할 때
+ * 쓴다. 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgDark(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDark.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgDark.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgDarkTheme = {
+    title: 'var(--color-white)',
+    description: 'var(--color-lightGray)',
+    actionVariant: 'main',
+};
+/**
+ * 배너 배경 — 짙은 무채색(lightBlack) 평면. 다른 배경들과 대비되는 절제된 톤이 필요할 때
+ * 쓴다. 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgDark() {
+    const ref = useParentBgTheme(promoBannerBgDarkTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return _jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-dark", "aria-hidden": "true" });
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDeep.css

@@ -0,0 +1,3 @@
+.promo-banner-bg-deep {
+  background: linear-gradient(135deg, var(--color-darkMain), var(--color-darkSub));
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDeep.d.ts

@@ -0,0 +1,10 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgDeep.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgDeepTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — 짙은 브랜드 컬러(darkMain→darkSub) 그라디언트. 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgDeep(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDeep.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgDeep.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgDeepTheme = {
+    title: '#ffffff',
+    description: 'rgba(255, 255, 255, 0.85)',
+    actionVariant: 'main',
+};
+/**
+ * 배너 배경 — 짙은 브랜드 컬러(darkMain→darkSub) 그라디언트. 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgDeep() {
+    const ref = useParentBgTheme(promoBannerBgDeepTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return _jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-deep", "aria-hidden": "true" });
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDiagonal.css

@@ -0,0 +1,10 @@
+.promo-banner-bg-diagonal {
+  background-color: var(--color-lightMain);
+  background-image: repeating-linear-gradient(
+    45deg,
+    var(--color-main-a10) 0px,
+    var(--color-main-a10) 10px,
+    transparent 10px,
+    transparent 20px
+  );
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDiagonal.d.ts

@@ -0,0 +1,10 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgDiagonal.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgDiagonalTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — 옅은 바탕 위 대각선 줄무늬 패턴(main). 어두운(dark) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgDiagonal(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDiagonal.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgDiagonal.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgDiagonalTheme = {
+    title: 'var(--color-darkMain)',
+    description: 'var(--color-gray)',
+    actionVariant: 'main',
+};
+/**
+ * 배너 배경 — 옅은 바탕 위 대각선 줄무늬 패턴(main). 어두운(dark) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgDiagonal() {
+    const ref = useParentBgTheme(promoBannerBgDiagonalTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return _jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-diagonal", "aria-hidden": "true" });
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDots.css

@@ -0,0 +1,5 @@
+.promo-banner-bg-dots {
+  background-color: var(--color-lightSub);
+  background-image: radial-gradient(var(--color-sub-a10) 2px, transparent 2px);
+  background-size: 14px 14px;
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDots.d.ts

@@ -0,0 +1,10 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgDots.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgDotsTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — 옅은 바탕 위 도트 패턴(sub). 어두운(dark) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgDots(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgDots.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgDots.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgDotsTheme = {
+    title: 'var(--color-darkSub)',
+    description: 'var(--color-gray)',
+    actionVariant: 'main',
+};
+/**
+ * 배너 배경 — 옅은 바탕 위 도트 패턴(sub). 어두운(dark) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgDots() {
+    const ref = useParentBgTheme(promoBannerBgDotsTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return _jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-dots", "aria-hidden": "true" });
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgInstagram.css

@@ -0,0 +1,3 @@
+.promo-banner-bg-instagram {
+  background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgInstagram.d.ts

@@ -0,0 +1,11 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgInstagram.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgInstagramTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — 인스타그램 안내 배너 전용. 인스타그램 특유의 옐로우→핑크→퍼플 그라디언트.
+ * 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgInstagram(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgInstagram.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgInstagram.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgInstagramTheme = {
+    title: '#ffffff',
+    description: 'rgba(255, 255, 255, 0.85)',
+    actionVariant: 'transparent-white',
+};
+/**
+ * 배너 배경 — 인스타그램 안내 배너 전용. 인스타그램 특유의 옐로우→핑크→퍼플 그라디언트.
+ * 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgInstagram() {
+    const ref = useParentBgTheme(promoBannerBgInstagramTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return _jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-instagram", "aria-hidden": "true" });
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgMain.css

@@ -0,0 +1,3 @@
+.promo-banner-bg-main {
+  background: linear-gradient(45deg, var(--color-main), var(--color-sub));
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgMain.d.ts

@@ -0,0 +1,12 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgMain.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgMainTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — 브랜드 컬러(main→sub) 45도 그라디언트. 밝은(light) 텍스트와 함께 쓴다.
+ * 부모(예: PromoBanner)가 `position: relative`면 이 컴포넌트가 `position: absolute; inset: 0`로
+ * 배경을 채우고, 부모에 title/description 텍스트 색상(CSS var)을 주입한다.
+ * @public
+ */
+export default function PromoBannerBgMain(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgMain.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgMain.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgMainTheme = {
+    title: '#ffffff',
+    description: 'rgba(255, 255, 255, 0.85)',
+    actionVariant: 'default',
+};
+/**
+ * 배너 배경 — 브랜드 컬러(main→sub) 45도 그라디언트. 밝은(light) 텍스트와 함께 쓴다.
+ * 부모(예: PromoBanner)가 `position: relative`면 이 컴포넌트가 `position: absolute; inset: 0`로
+ * 배경을 채우고, 부모에 title/description 텍스트 색상(CSS var)을 주입한다.
+ * @public
+ */
+export default function PromoBannerBgMain() {
+    const ref = useParentBgTheme(promoBannerBgMainTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return _jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-main", "aria-hidden": "true" });
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgNaver.css

@@ -0,0 +1,3 @@
+.promo-banner-bg-naver {
+  background: linear-gradient(90deg, #03c75a 0%, var(--color-main) 100%);
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgNaver.d.ts

@@ -0,0 +1,11 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgNaver.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgNaverTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — 네이버 블로그 안내 배너 전용. 네이버 브랜드 그린 그라디언트.
+ * 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgNaver(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgNaver.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgNaver.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgNaverTheme = {
+    title: '#ffffff',
+    description: 'rgba(255, 255, 255, 0.85)',
+    actionVariant: 'sub',
+};
+/**
+ * 배너 배경 — 네이버 블로그 안내 배너 전용. 네이버 브랜드 그린 그라디언트.
+ * 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgNaver() {
+    const ref = useParentBgTheme(promoBannerBgNaverTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return _jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-naver", "aria-hidden": "true" });
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgOutline.css

@@ -0,0 +1,16 @@
+.promo-banner-bg-outline {
+  background: var(--color-white);
+  border: 1px solid var(--color-whiteLine);
+  box-sizing: border-box;
+}
+
+.promo-banner-bg-outline__dot {
+  position: absolute;
+  right: -40px;
+  bottom: -40px;
+  width: 140px;
+  height: 140px;
+  border-radius: 50%;
+  background: linear-gradient(45deg, var(--color-main), var(--color-sub));
+  opacity: 0.12;
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgOutline.d.ts

@@ -0,0 +1,11 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgOutline.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgOutlineTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — 흰 바탕 + 테두리 + 우하단 브랜드 컬러 원형 포인트. 미니멀한 톤이 필요할 때
+ * 쓴다. 어두운(dark) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgOutline(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgOutline.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgOutline.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgOutlineTheme = {
+    title: 'var(--color-black)',
+    description: 'var(--color-gray)',
+    actionVariant: 'main',
+};
+/**
+ * 배너 배경 — 흰 바탕 + 테두리 + 우하단 브랜드 컬러 원형 포인트. 미니멀한 톤이 필요할 때
+ * 쓴다. 어두운(dark) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgOutline() {
+    const ref = useParentBgTheme(promoBannerBgOutlineTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return (_jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-outline", "aria-hidden": "true", children: _jsx("span", { className: "promo-banner-bg-outline__dot" }) }));
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgRadial.css

@@ -0,0 +1,3 @@
+.promo-banner-bg-radial {
+  background: radial-gradient(circle at 15% 20%, var(--color-main) 0%, var(--color-sub) 100%);
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgRadial.d.ts

@@ -0,0 +1,10 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgRadial.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgRadialTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — 좌상단에서 퍼지는 방사형(main→sub) 그라디언트. 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgRadial(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgRadial.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgRadial.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgRadialTheme = {
+    title: '#ffffff',
+    description: 'rgba(255, 255, 255, 0.85)',
+    actionVariant: 'main',
+};
+/**
+ * 배너 배경 — 좌상단에서 퍼지는 방사형(main→sub) 그라디언트. 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgRadial() {
+    const ref = useParentBgTheme(promoBannerBgRadialTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return _jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-radial", "aria-hidden": "true" });
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSoft.css

@@ -0,0 +1,3 @@
+.promo-banner-bg-soft {
+  background: var(--color-main-a10);
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSoft.d.ts

@@ -0,0 +1,12 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgSoft.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgSoftTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — 옅은 브랜드 컬러(main-a10) 평면 배경. 어두운(dark) 텍스트와 함께 쓴다.
+ * 부모(예: PromoBanner)가 `position: relative`면 이 컴포넌트가 `position: absolute; inset: 0`로
+ * 배경을 채우고, 부모에 title/description 텍스트 색상(CSS var)을 주입한다.
+ * @public
+ */
+export default function PromoBannerBgSoft(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSoft.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgSoft.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgSoftTheme = {
+    title: 'var(--color-main)',
+    description: 'var(--color-gray)',
+    actionVariant: 'main',
+};
+/**
+ * 배너 배경 — 옅은 브랜드 컬러(main-a10) 평면 배경. 어두운(dark) 텍스트와 함께 쓴다.
+ * 부모(예: PromoBanner)가 `position: relative`면 이 컴포넌트가 `position: absolute; inset: 0`로
+ * 배경을 채우고, 부모에 title/description 텍스트 색상(CSS var)을 주입한다.
+ * @public
+ */
+export default function PromoBannerBgSoft() {
+    const ref = useParentBgTheme(promoBannerBgSoftTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return _jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-soft", "aria-hidden": "true" });
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSoftSub.css

@@ -0,0 +1,3 @@
+.promo-banner-bg-soft-sub {
+  background: var(--color-sub-a10);
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSoftSub.d.ts

@@ -0,0 +1,10 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgSoftSub.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgSoftSubTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — 옅은 sub 컬러(sub-a10) 평면. 어두운(dark) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgSoftSub(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSoftSub.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgSoftSub.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgSoftSubTheme = {
+    title: 'var(--color-darkSub)',
+    description: 'var(--color-gray)',
+    actionVariant: 'main',
+};
+/**
+ * 배너 배경 — 옅은 sub 컬러(sub-a10) 평면. 어두운(dark) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgSoftSub() {
+    const ref = useParentBgTheme(promoBannerBgSoftSubTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return _jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-soft-sub", "aria-hidden": "true" });
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSub.css

@@ -0,0 +1,3 @@
+.promo-banner-bg-sub {
+  background: var(--color-sub);
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSub.d.ts

@@ -0,0 +1,10 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgSub.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgSubTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — sub 컬러 평면. 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgSub(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSub.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgSub.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgSubTheme = {
+    title: '#ffffff',
+    description: 'rgba(255, 255, 255, 0.85)',
+    actionVariant: 'main',
+};
+/**
+ * 배너 배경 — sub 컬러 평면. 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgSub() {
+    const ref = useParentBgTheme(promoBannerBgSubTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return _jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-sub", "aria-hidden": "true" });
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSuccess.css

@@ -0,0 +1,3 @@
+.promo-banner-bg-success {
+  background: var(--color-success);
+}

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSuccess.d.ts

@@ -0,0 +1,11 @@
+import './PromoBannerBg.css';
+import './PromoBannerBgSuccess.css';
+import { type PromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export declare const promoBannerBgSuccessTheme: PromoBannerBgTheme;
+/**
+ * 배너 배경 — 성공/완료 톤(success) 평면. 달성·완료 관련 공지에 어울린다.
+ * 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgSuccess(): import("react").JSX.Element;

package/dist/packages/core/src/components/PromoBannerBg/PromoBannerBgSuccess.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParentBgTheme } from '../../hooks/useParentBgTheme';
+import './PromoBannerBg.css';
+import './PromoBannerBgSuccess.css';
+import { injectPromoBannerBgTheme, clearPromoBannerBgTheme } from './PromoBannerBgTheme';
+/** @public */
+export const promoBannerBgSuccessTheme = {
+    title: '#ffffff',
+    description: 'rgba(255, 255, 255, 0.85)',
+    actionVariant: 'main',
+};
+/**
+ * 배너 배경 — 성공/완료 톤(success) 평면. 달성·완료 관련 공지에 어울린다.
+ * 밝은(light) 텍스트와 함께 쓴다.
+ * @public
+ */
+export default function PromoBannerBgSuccess() {
+    const ref = useParentBgTheme(promoBannerBgSuccessTheme, injectPromoBannerBgTheme, clearPromoBannerBgTheme);
+    return _jsx("div", { ref: ref, className: "promo-banner-bg promo-banner-bg-success", "aria-hidden": "true" });
+}