@cashdoc/cashdoc-cms-design-system 1.15.2 → 2.0.0

package/dist/src/components/Button/Button.d.ts

@@ -26,7 +26,7 @@ export type ButtonProps = {} & ButtonHTMLAttributes<HTMLButtonElement> & Variant
  *
  * ## Props
  *
- * - `variant`: `default` | `secondary` | `outline` | `ghost` | `link` | `underline`
+ * - `variant`: `default` | `secondary` | `outline` | `ghost` | `warning` | `danger` | `link` | `underline`
  * - `size`: `default` | `sm` | `lg` | `icon`
  * - `type`: 기본값 `"button"` — `<form>` 내부에서 의도치 않은 submit을 방지합니다. submit 버튼이 필요하면 `type="submit"`을 명시하세요.
  *
@@ -74,7 +74,7 @@ export type ButtonProps = {} & ButtonHTMLAttributes<HTMLButtonElement> & Variant
  * ![](https://raw.githubusercontent.com/AlmSmartDoctor/ccds-screenshots/main/screenshots/Forms/Button/For%20Jsdoc.png?raw=true)
  */
 declare const Button: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
-    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "underline" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "warning" | "danger" | "link" | "underline" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLButtonElement>>;
 export { Button };

package/dist/src/components/Button/variants.d.ts

@@ -1,19 +1,21 @@
 /**
  * 버튼 컴포넌트의 스타일 variant를 정의합니다.
  *
- * @variant default - 기본 스타일 (회색 배경)
- * @variant secondary - 보조 스타일 (밝은 회색 배경)
- * @variant outline - 테두리 스타일 (투명 배경)
- * @variant ghost - 고스트 스타일 (투명 배경, hover시 배경)
- * @variant link - 링크 스타일 (밑줄)
- * @variant underline - 밑줄 텍스트 스타일 (배경 없음, 항상 밑줄)
+ * @variant default - 기본 CTA (다크 뉴트럴 배경)
+ * @variant secondary - 보조 액션 (밝은 그레이 배경)
+ * @variant outline - 테두리만 (흰색 배경)
+ * @variant ghost - 투명 배경, hover시 배경
+ * @variant warning - 소프트 위험 액션 (옅은 빨강 배경 + 빨간 텍스트)
+ * @variant danger - 강한 파괴적 액션 (빨간 솔리드 배경 + 흰 텍스트)
+ * @variant link - 링크 텍스트 (블루)
+ * @variant underline - 항상 밑줄 텍스트
  *
- * @size default - 기본 크기 (h-10)
- * @size sm - 작은 크기 (h-8)
- * @size lg - 큰 크기 (h-11)
- * @size icon - 아이콘 크기 (정사각형 10x10)
+ * @size default - 기본 (h-9, 36px)
+ * @size sm - 작은 (h-7, 30px)
+ * @size lg - 큰 (h-11, 44px)
+ * @size icon - 아이콘 정사각형 (36x36)
  */
 export declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "underline" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "warning" | "danger" | "link" | "underline" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/src/components/ContentArea/ContentArea.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const contentAreaVariants: (props?: ({
+    padding?: "sm" | "lg" | "none" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ContentAreaProps = {
+    /**
+     * 내부 padding 크기. 자식 컴포넌트가 자체 padding을 가질 때는 `"none"` 사용.
+     * `ContentArea.Header` / `ContentArea.Body` / `ContentArea.Footer`를 함께
+     * 쓸 경우 항상 `"none"`을 사용하세요.
+     * @default "md"
+     */
+    padding?: VariantProps<typeof contentAreaVariants>["padding"];
+} & ComponentPropsWithoutRef<"div">;
+export type ContentAreaHeaderProps = ComponentPropsWithoutRef<"header">;
+export type ContentAreaBodyProps = ComponentPropsWithoutRef<"div">;
+export type ContentAreaFooterProps = ComponentPropsWithoutRef<"footer">;
+export declare const ContentArea: import('react').ForwardRefExoticComponent<{
+    /**
+     * 내부 padding 크기. 자식 컴포넌트가 자체 padding을 가질 때는 `"none"` 사용.
+     * `ContentArea.Header` / `ContentArea.Body` / `ContentArea.Footer`를 함께
+     * 쓸 경우 항상 `"none"`을 사용하세요.
+     * @default "md"
+     */
+    padding?: VariantProps<typeof contentAreaVariants>["padding"];
+} & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>> & {
+    Header: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Body: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Footer: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+};
+export {};

package/dist/src/components/ContentArea/index.d.ts

@@ -0,0 +1,2 @@
+export { ContentArea } from './ContentArea';
+export type { ContentAreaProps, ContentAreaHeaderProps, ContentAreaBodyProps, ContentAreaFooterProps, } from './ContentArea';

package/dist/src/components/Dropdown/Select.d.ts

@@ -112,4 +112,4 @@ export declare const Select: import('react').ForwardRefExoticComponent<{
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     multiple?: false;
     selectAll?: false;
-}, "searchable" | "clearable" | "multiple" | "selectAll"> & import('react').RefAttributes<HTMLButtonElement>>;
+}, "multiple" | "searchable" | "clearable" | "selectAll"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/src/components/FilterToggleGroup/FilterToggleGroup.d.ts

@@ -2,50 +2,51 @@ import { ReactNode } from 'react';
 
 declare const filterToggleGroupSizeClassMap: {
     readonly sm: {
-        readonly item: "h-16 min-w-20 px-2 py-1.5";
-        readonly caption: "text-[10px]/3";
-        readonly value: "text-xl";
-        readonly label: "text-[10px]/3";
+        readonly item: "min-w-[84px] px-3 py-2";
+        readonly caption: "text-[10px]";
+        readonly value: "text-lg";
+        readonly label: "text-[11px] mt-1";
         readonly icon: "[&>svg]:size-3";
     };
     readonly md: {
-        readonly item: "h-18 min-w-[88px] px-2.5 py-2";
-        readonly caption: "text-[10px]/3";
-        readonly value: "text-2xl";
-        readonly label: "text-[11px]/4";
+        readonly item: "min-w-24 px-3.5 py-2.5";
+        readonly caption: "text-[11px]";
+        readonly value: "text-[22px]";
+        readonly label: "text-[12px] mt-1.5";
         readonly icon: "[&>svg]:size-3.5";
     };
     readonly lg: {
-        readonly item: "h-22 min-w-24 px-3 py-2.5";
-        readonly caption: "text-xs/4";
-        readonly value: "text-3xl";
-        readonly label: "text-xs/4";
+        readonly item: "min-w-28 px-4 py-3";
+        readonly caption: "text-[11px]";
+        readonly value: "text-[26px]";
+        readonly label: "text-[13px] mt-1.5";
         readonly icon: "[&>svg]:size-4";
     };
     readonly xl: {
-        readonly item: "h-24 min-w-28 px-4 py-3";
-        readonly caption: "text-sm/4";
-        readonly value: "text-4xl";
-        readonly label: "text-sm/4";
+        readonly item: "min-w-32 px-[18px] py-3.5";
+        readonly caption: "text-[12px]";
+        readonly value: "text-[32px]";
+        readonly label: "text-[13px] mt-2";
         readonly icon: "[&>svg]:size-5";
     };
     readonly "2xl": {
-        readonly item: "h-28 min-w-32 px-5 py-3.5";
-        readonly caption: "text-sm/5";
-        readonly value: "text-5xl";
-        readonly label: "text-base/5";
+        readonly item: "min-w-36 px-5 py-4";
+        readonly caption: "text-[13px]";
+        readonly value: "text-[40px]";
+        readonly label: "text-[14px] mt-2";
         readonly icon: "[&>svg]:size-6";
     };
 };
-declare const filterToggleGroupIntentTopLineClassMap: {
-    readonly default: "before:bg-cms-gray-600";
-    readonly primary: "before:bg-cms-gray-600";
-    readonly success: "before:bg-cms-green-500";
-    readonly danger: "before:bg-cms-red-500";
-    readonly muted: "before:bg-cms-gray-500";
+/** Intent dot color (replaces the previous top color bar). */
+declare const filterToggleGroupIntentDotClassMap: {
+    readonly default: "bg-cms-gray-400";
+    readonly primary: "bg-cms-primary-200";
+    readonly success: "bg-cms-green-500";
+    readonly danger: "bg-cms-red-500";
+    readonly muted: "bg-cms-gray-400";
 };
 export type FilterToggleGroupSize = keyof typeof filterToggleGroupSizeClassMap;
-export type FilterToggleGroupIntent = keyof typeof filterToggleGroupIntentTopLineClassMap;
+export type FilterToggleGroupIntent = keyof typeof filterToggleGroupIntentDotClassMap;
 export type FilterToggleGroupItem<T extends string | number> = {
     value: T;
     count: number | string;

package/dist/src/components/Layout/Layout.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+export type LayoutRootProps = ComponentPropsWithoutRef<"div">;
+export type LayoutSidebarProps = ComponentPropsWithoutRef<"aside">;
+export type LayoutMainProps = ComponentPropsWithoutRef<"main">;
+export declare const Layout: {
+    Root: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Sidebar: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+    Main: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+};

package/dist/src/components/Layout/index.d.ts

@@ -0,0 +1,2 @@
+export { Layout } from './Layout';
+export type { LayoutRootProps, LayoutSidebarProps, LayoutMainProps, } from './Layout';

package/dist/src/components/Switch/Switch.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 declare const switchVariants: (props?: ({
-    variant?: "default" | "green" | "black" | "blue" | "red" | null | undefined;
+    variant?: "default" | "primary" | "green" | "black" | "blue" | "red" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type SwitchProps = {
     /**
@@ -121,6 +121,6 @@ declare const Switch: React.ForwardRefExoticComponent<{
      */
     uncheckedLabel?: React.ReactNode;
 } & Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "default" | "green" | "black" | "blue" | "red" | null | undefined;
+    variant?: "default" | "primary" | "green" | "black" | "blue" | "red" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 export { Switch };

package/dist/src/components/Tabs/Tabs.d.ts

@@ -0,0 +1,87 @@
+import { ComponentPropsWithoutRef } from 'react';
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+export type TabsProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Root>;
+export type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
+export type TabsTriggerProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>;
+export type TabsContentProps = ComponentPropsWithoutRef<typeof TabsPrimitive.Content>;
+/**
+ * 동일한 영역에 여러 콘텐츠 패널을 전환해 보여주는 탭 컴포넌트입니다.
+ *
+ * Radix UI의 Tabs primitive를 기반으로 구현되어 키보드 내비게이션,
+ * ARIA(`role="tablist"`, `role="tab"`, `role="tabpanel"`), focus management가
+ * 자동으로 처리됩니다.
+ *
+ * ## When (언제 사용해야 하는가)
+ *
+ * **사용해야 하는 경우:**
+ * - **하위 카테고리 전환**: "무료 포인트 / 유료 포인트"처럼 동일 컨텍스트에서
+ *   2~6개의 분류된 데이터를 전환해 보여줄 때
+ * - **단계가 아닌 평행 뷰**: 순서가 없고 상호 배타적인 패널들
+ *
+ * **사용하지 말아야 하는 경우:**
+ * - **순차적 단계**: Wizard/Stepper를 사용하세요.
+ * - **단일 옵션 전환 (on/off)**: `Switch`나 `ToggleButton`을 사용하세요.
+ * - **다중 선택 필터**: `CountFilterChips`나 `FilterToggleGroup`을 사용하세요.
+ * - **7개 이상의 카테고리**: 가독성이 떨어집니다. `Dropdown`이나 `SegmentedControls`의 변형을 검토하세요.
+ *
+ * ## Layout behavior
+ *
+ * - **Underline indicator**: 활성 탭 아래 2px 검은색 indicator가 표시되며,
+ *   `TabsList`의 하단 border와 겹쳐서 그려집니다(`-mb-px`).
+ * - **Full Width List**: `TabsList`는 기본적으로 `inline-flex`로
+ *   내용만큼만 차지합니다. 전체 너비가 필요하면 `className="w-full"`로 확장.
+ *
+ * ## Accessibility
+ *
+ * - 키보드: ←/→ 또는 ↑/↓로 탭 이동, Home/End로 처음/끝, 자동 activation은
+ *   `activationMode="manual"`로 변경 가능.
+ * - ARIA: `role="tablist"`, `role="tab"`, `aria-selected`, `aria-controls`,
+ *   `role="tabpanel"`이 자동 부여됩니다.
+ *
+ * ## Example
+ *
+ * {@tool snippet}
+ * 기본 사용:
+ *
+ * ```tsx
+ * <Tabs defaultValue="paid">
+ *   <TabsList>
+ *     <TabsTrigger value="free">무료 포인트</TabsTrigger>
+ *     <TabsTrigger value="paid">유료 포인트</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="free">무료 포인트 내역</TabsContent>
+ *   <TabsContent value="paid">유료 포인트 내역</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * Controlled 사용:
+ *
+ * ```tsx
+ * const [tab, setTab] = useState("paid");
+ * <Tabs value={tab} onValueChange={setTab}>
+ *   ...
+ * </Tabs>
+ * ```
+ * {@end-tool}
+ */
+export declare const Tabs: import('react').ForwardRefExoticComponent<TabsPrimitive.TabsProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * 탭 트리거(`TabsTrigger`)들을 담는 컨테이너입니다.
+ *
+ * 하단 1px gray separator를 그리며, 각 활성 트리거의 검은 indicator가
+ * separator 위로 오버랩됩니다.
+ */
+export declare const TabsList: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * 탭 라벨 버튼입니다. 활성화 시 검은색 underline indicator가 표시됩니다.
+ *
+ * `value`는 같은 `Tabs` 안의 `TabsContent.value`와 매칭되어야 합니다.
+ */
+export declare const TabsTrigger: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * 탭 콘텐츠 패널입니다.
+ *
+ * `value`가 활성 탭과 일치하면 표시되며, 그 외에는 DOM에서 숨겨집니다
+ * (`forceMount` 사용 시 항상 마운트).
+ */
+export declare const TabsContent: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './Tabs';
+export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps, } from './Tabs';

package/dist/src/components/ToggleButton/variants.d.ts

@@ -1,15 +1,13 @@
 /**
  * ToggleButton(눌림 상태가 유지되는 박스 토글)의 시각 variant를 정의합니다.
  *
- * 시각적으로는 {@link Button}과 유사한 직사각형/패딩 구조이지만,
- * `pressed` 상태에 따라 채워진(filled) ↔ 외곽선(outline) 스타일이
- * 토글되며 상태가 유지됩니다.
+ * v2 family-look: `pressed` 상태는 다크 fill + 좌측 체크 표식으로 표현합니다.
  *
- * @variant default - 회색 톤 (기본). 눌림 상태에서 `cms-gray-850` 배경.
- * @variant primary - 강조 톤. 눌림 상태에서 `cms-primary-400` 배경.
+ * @variant default - 회색 톤 (기본). 눌림 상태에서 `cms-gray-900` 외곽선·체크.
+ * @variant primary - 강조 톤. 눌림 상태에서 `cms-primary-200` (#FFD200) fill.
  *
- * @size sm - h-8, text-[13px], px-3
- * @size md - h-10, text-sm, px-4 (기본)
+ * @size sm - h-7, text-[12px], px-2.5
+ * @size md - h-[34px], text-[13px], px-3.5 (기본)
  */
 export declare const toggleButtonVariants: (props?: ({
     variant?: "default" | "primary" | null | undefined;

package/dist/src/components/index.d.ts

@@ -26,6 +26,9 @@ export * from './Table';
 export * from './ImageUpload';
 export * from './FileUpload';
 export * from './SegmentedControls';
+export * from './Tabs';
 export * from './FilterToggleGroup';
 export * from './CountFilterChips';
 export * from './BarChart';
+export * from './Layout';
+export * from './ContentArea';