@cashdoc/cashdoc-cms-design-system 1.15.3 → 2.0.1

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" | "warning" | "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,20 +1,21 @@
 /**
  * 버튼 컴포넌트의 스타일 variant를 정의합니다.
  *
- * @variant default - 기본 스타일 (회색 배경)
- * @variant secondary - 보조 스타일 (밝은 회색 배경)
- * @variant outline - 테두리 스타일 (투명 배경)
- * @variant ghost - 고스트 스타일 (투명 배경, hover시 배경)
- * @variant warning - 경고/위험 액션 (옅은 분홍 배경 + 빨간 테두리/텍스트)
- * @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" | "warning" | "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/TextInput/TextInput.d.ts

@@ -14,7 +14,9 @@ export type TextInputProps = {
     showCharCount?: boolean;
     labelLayout?: "vertical" | "horizontal";
     labelWidth?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps<typeof textInputVariants>;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & VariantProps<typeof textInputVariants>;
 /**
  * 사용자로부터 텍스트, 이메일, 숫자 등의 단일 라인 데이터를 입력받는 필드입니다.
  *
@@ -83,6 +85,28 @@ export type TextInputProps = {
  * ```
  * {@end-tool}
  *
+ * {@tool snippet}
+ * 좌/우 affix(검색 아이콘, 단위 등):
+ *
+ * `prefix`/`suffix`는 `ReactNode`를 받아 input 내부에 absolute로 배치되며,
+ * 존재 시 input padding이 자동으로 보정됩니다(`pl-9` / `pr-9`). 기본적으로 장식용
+ * (`pointer-events-none`) 이므로, 인터랙티브하게 쓰려면 자식 요소에
+ * `pointer-events-auto`를 직접 지정하세요.
+ *
+ * ```tsx
+ * <TextInput
+ *   prefix={<SearchIcon size={16} />}
+ *   placeholder="병원명 · 대행사명 검색"
+ * />
+ *
+ * <TextInput
+ *   suffix={<span className="text-sm text-cms-gray-500">원</span>}
+ *   placeholder="0"
+ *   type="number"
+ * />
+ * ```
+ * {@end-tool}
+ *
  * See also:
  *
  * - {@link TextArea}, 여러 줄 텍스트 입력을 위한 컴포넌트
@@ -102,7 +126,9 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     showCharCount?: boolean;
     labelLayout?: "vertical" | "horizontal";
     labelWidth?: string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & VariantProps<(props?: ({
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> & VariantProps<(props?: ({
     variant?: "default" | "error" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLInputElement>>;

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

@@ -30,3 +30,5 @@ export * from './Tabs';
 export * from './FilterToggleGroup';
 export * from './CountFilterChips';
 export * from './BarChart';
+export * from './Layout';
+export * from './ContentArea';