@crossangle-org/cs-ui 0.2.6 → 0.2.7

package/dist/components/code-block/cs-code-highlighter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-code-highlighter.js","sources":["../../../src/components/code-block/cs-code-highlighter.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useMemo } from \"react\"\nimport hljs from \"highlight.js\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\n// highlight.js 테마 (atom-one-dark 기반, 배경색 제거)\nimport \"highlight.js/styles/atom-one-dark.css\"\nimport { CsScrollArea } from \"../scroll-area\"\n\n/**\n * CsCodeHighlighter 스타일 시스템 (Design Token Reference)\n *\n * ## Figma Token → Props 매핑\n * | Figma 토큰 패턴 | Props |\n * |----------------|-------|\n * | `code-block/solid/*` | `variant=\"solid\"` (default) |\n * | `code-block/outline/*` | `variant=\"outline\"` |\n *\n * ## CSS Variables (CsCodeBlock과 공유)\n * ```css\n * --code-block-solid-bg | font | radius | padding-x | padding-y\n * --code-block-outline-bg | font | border | border-width | radius | padding-x | padding-y\n * ```\n *\n * ## 코드 색상\n * highlight.js atom-one-dark 테마 사용 (배경색 제거)\n */\nconst csCodeHighlighterVariants = cva(\n  \"typo-productive-code-sm whitespace-pre-wrap text-(--code-block-solid-font)\",\n  {\n    variants: {\n      variant: {\n        solid: \"bg-(--code-block-solid-bg) rounded-(--code-block-solid-radius) px-(--code-block-solid-padding-x) py-(--code-block-solid-padding-y)\",\n        outline: \"bg-(--code-block-outline-bg) border-(--code-block-outline-border) border-(length:--code-block-outline-border-width) rounded-(--code-block-outline-radius) text-(--code-block-outline-font) px-(--code-block-outline-padding-x) py-(--code-block-outline-padding-y)\",\n      },\n    },\n    defaultVariants: {\n      variant: \"solid\",\n    },\n  }\n)\n\n/** CsCodeHighlighter Props */\ntype CsCodeHighlighterProps = {\n  /** 코드 문자열 */\n  children: string\n  /**\n   * 구문 강조 언어 (없으면 자동 감지)\n   * 예: typescript, javascript, json, solidity, python, rust 등\n   */\n  language?: string\n  /** 추가 CSS 클래스 */\n  className?: string\n  /**\n   * 코드 블록 스타일\n   * - `solid`: 채워진 배경 (기본) - 일반 코드 표시\n   * - `outline`: 테두리 스타일 - 강조가 필요한 코드\n   * @default 'solid'\n   */\n  variant?: 'solid' | 'outline'\n} & VariantProps<typeof csCodeHighlighterVariants>\n\n/**\n * CS Design System 코드 하이라이터 컴포넌트\n *\n * 구문 강조가 필요한 코드 표시용. CsCodeBlock과 동일한 스타일 토큰 사용.\n *\n * ## CsCodeBlock vs CsCodeHighlighter\n * | 컴포넌트 | 용도 |\n * |----------|------|\n * | CsCodeBlock | 단순 코드 표시 (구문 강조 없음) |\n * | CsCodeHighlighter | 구문 강조 필요 시 (highlight.js) |\n *\n * @example 기본 (자동 언어 감지)\n * ```tsx\n * <CsCodeHighlighter>\n *   {`const hello = \"world\";`}\n * </CsCodeHighlighter>\n * ```\n *\n * @example 언어 지정\n * ```tsx\n * <CsCodeHighlighter language=\"typescript\">\n *   {`interface User { name: string; }`}\n * </CsCodeHighlighter>\n * ```\n *\n * @example JSON\n * ```tsx\n * <CsCodeHighlighter language=\"json\">\n *   {JSON.stringify({ key: \"value\" }, null, 2)}\n * </CsCodeHighlighter>\n * ```\n *\n * @param variant - solid (default) | outline\n * @param language - 언어 (typescript, json, css 등). 없으면 자동 감지\n *\n * @see CsCodeBlock - 구문 강조 없이 단순 코드 표시 시\n */\nfunction CsCodeHighlighter({\n  children,\n  language,\n  variant = \"solid\",\n  className,\n}: CsCodeHighlighterProps) {\n  const highlightedCode = useMemo(() => {\n    if (!children) return \"\"\n\n    try {\n      if (language) {\n        return hljs.highlight(children, { language, ignoreIllegals: true }).value\n      }\n      return hljs.highlightAuto(children).value\n    } catch {\n      return children\n    }\n  }, [children, language])\n\n  return (\n    <CsScrollArea>\n      <pre\n        data-slot=\"code-highlighter\"\n        className={cn(csCodeHighlighterVariants({ variant }), className)}\n      >\n        <code\n          className=\"hljs\"\n          style={{ backgroundColor: \"transparent\" }}\n          dangerouslySetInnerHTML={{ __html: highlightedCode }}\n        />\n      </pre>\n    </CsScrollArea>\n  )\n}\n\nexport { CsCodeHighlighter, type CsCodeHighlighterProps }\n"],"names":[],"mappings":";;;;;;;;AA+BkC,MAChC,4BAAA;AAAA,EACA;AAAA,EAAA;AAAA,IACY,UACR;AAAA,MAAS,SACA;AAAA,QACP,OAAA;AAAA,QAAS,SAAA;AAAA,MAEb;AAAA,IACA;AAAA,IAAiB,iBACN;AAAA,MAAA,SAAA;AAAA,IACX;AAAA,EAEJ;AA2DA;AAA2B,SACzB,kBAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA,EACF;AACE,GAAA;AACE,QAAI,kBAAkB,QAAA,MAAA;AAEtB,QAAI,CAAA,SAAA,QAAA;AACF,QAAA;AACE,oBAAY;AACd,eAAA,KAAA,UAAA,UAAA,EAAA,UAAA,gBAAA,KAAA,CAAA,EAAA;AAAA,MACA;AACF,aAAQ,KAAA,cAAA,QAAA,EAAA;AAAA,IACN;AACF,aAAA;AAAA,IACF;AAAA,EAEA,GAAA,CAAA,UAAA,QAAA;AAEI,SAAC,oBAAA,cAAA,EAAA,UAAA;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MAEX,wCAAA,EAAA,QAAA,CAAA,GAAA,SAAA;AAAA,MAAA,UAAC;AAAA,QAAA;AAAA,QAAA;AAAA,UAEC,WAAS;AAAA,UACT,OAAA,EAAA,iBAAyB,cAAU;AAAA,UAAgB,yBAAA,EAAA,QAAA,gBAAA;AAAA,QAAA;AAAA,MACrD;AAAA;EAIR,EAAA,CAAA;;"}

package/dist/components/collapsible/cs-collapsible.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+function CsCollapsible({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { "data-slot": "collapsible", ...props });
+}
+function CsCollapsibleTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.CollapsibleTrigger,
+    {
+      "data-slot": "collapsible-trigger",
+      ...props
+    }
+  );
+}
+function CsCollapsibleContent({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.CollapsibleContent,
+    {
+      "data-slot": "collapsible-content",
+      ...props
+    }
+  );
+}
+export {
+  CsCollapsible,
+  CsCollapsibleContent,
+  CsCollapsibleTrigger
+};
+//# sourceMappingURL=cs-collapsible.js.map

package/dist/components/collapsible/cs-collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-collapsible.js","sources":["../../../src/components/collapsible/cs-collapsible.tsx"],"sourcesContent":["\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\n/**\n * CS Design System Collapsible 컴포넌트\n *\n * 스타일 없는 프로그래밍적 토글 컴포넌트. Radix UI 기반.\n * 사이드바 메뉴, 내부 레이아웃 토글 등 **스타일이 필요 없는 열기/닫기**에 사용합니다.\n *\n * **주의: 사용자에게 보이는 접기/펼치기 UI는 CsAccordion을 사용하세요.**\n * 단일 항목이라도 CsAccordion `type=\"single\" collapsible`이 적합합니다.\n * CsCollapsible은 스타일(테두리, chevron, 애니메이션)이 없으므로 UI용으로 쓰면\n * 직접 스타일링해야 합니다.\n *\n * ## 사용 시나리오\n * - 사이드바 메뉴 열기/닫기\n * - 프로그래밍적으로 제어하는 내부 레이아웃 토글\n * - 커스텀 트리거가 완전히 별도로 설계된 경우\n *\n * ## 유사 컴포넌트와의 차이\n * - **CsAccordion**: 스타일 내장 (테두리, chevron, 애니메이션). 사용자 대면 UI용\n * - Collapsible은 프로그래밍적 토글 전용, Accordion은 보이는 UI용\n *\n * ## 컴포넌트 구성\n * | 컴포넌트 | 역할 |\n * |----------|------|\n * | CsCollapsible | Root 컨테이너 |\n * | CsCollapsibleTrigger | 토글 버튼 |\n * | CsCollapsibleContent | 접히는 컨텐츠 |\n *\n * @example 기본 사용\n * ```tsx\n * <CsCollapsible>\n *   <CsCollapsibleTrigger>Toggle</CsCollapsibleTrigger>\n *   <CsCollapsibleContent>\n *     접히는 내용\n *   </CsCollapsibleContent>\n * </CsCollapsible>\n * ```\n *\n * @example 기본 열림 상태\n * ```tsx\n * <CsCollapsible defaultOpen>\n *   <CsCollapsibleTrigger>Toggle</CsCollapsibleTrigger>\n *   <CsCollapsibleContent>내용</CsCollapsibleContent>\n * </CsCollapsible>\n * ```\n *\n * @see {@link https://www.radix-ui.com/primitives/docs/components/collapsible | Radix Collapsible}\n */\nfunction CsCollapsible({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" {...props} />\n}\n\n/** 콘텐츠 토글 트리거 버튼 */\nfunction CsCollapsibleTrigger({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-trigger\"\n      {...props}\n    />\n  )\n}\n\n/** 접히는 콘텐츠 영역 */\nfunction CsCollapsibleContent({\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {\n  return (\n    <CollapsiblePrimitive.CollapsibleContent\n      data-slot=\"collapsible-content\"\n      {...props}\n    />\n  )\n}\n\nexport { CsCollapsible, CsCollapsibleTrigger, CsCollapsibleContent }\n"],"names":[],"mappings":";;;AAmDuB,SAClB,cAAA;AAAA,EACL,GAA2D;AACzD,GAAA;AACF,SAAA,oBAAA,qBAAA,MAAA,EAAA,aAAA,eAAA,GAAA,MAAA,CAAA;AAGA;AAA8B,SACzB,qBAAA;AAAA,EACL,GAAyE;AACvE;AACE,SAAsB;AAAA,IAArB,qBAAA;AAAA,IAAA;AAAA,MAEE,aAAG;AAAA,MAAA,GAAA;AAAA,IACN;AAAA,EAEJ;AAGA;AAA8B,SACzB,qBAAA;AAAA,EACL,GAAyE;AACvE;AACE,SAAsB;AAAA,IAArB,qBAAA;AAAA,IAAA;AAAA,MAEE,aAAG;AAAA,MAAA,GAAA;AAAA,IACN;AAAA,EAEJ;;"}

package/dist/components/date-picker/cs-date-picker.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CsCalendar } from "../calendar/cs-calendar.js";
+import { cn } from "../../lib/utils.js";
+import { CsPopover, CsPopoverTrigger, CsPopoverContent } from "../popover/cs-popover.js";
+function CsDatePicker({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxs(CsPopover, { children: [
+    /* @__PURE__ */ jsx(
+      CsPopoverTrigger,
+      {
+        className: cn(
+          "typo-body-sm rounded-(--calendar-date-picker-radius) px-(--calendar-date-picker-padding-x) py-(--calendar-date-picker-padding-y)",
+          "[&_svg]:size-(--calendar-date-picker-icon-size) border-(length:--calendar-date-picker-border-width) border-(--calendar-date-picker-border)",
+          "bg-(--calendar-date-picker-bg) text-(--calendar-date-picker-font) [&_svg]:text-(--calendar-date-picker-icon)",
+          className
+        ),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(CsPopoverContent, { className: "p-0 border-none shadow-none!", children: /* @__PURE__ */ jsx(CsCalendar, { ...props }) })
+  ] });
+}
+export {
+  CsDatePicker
+};
+//# sourceMappingURL=cs-date-picker.js.map

package/dist/components/date-picker/cs-date-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-date-picker.js","sources":["../../../src/components/date-picker/cs-date-picker.tsx"],"sourcesContent":["import React, { PropsWithChildren } from 'react'\nimport { CsPopover, CsPopoverContent, CsPopoverTrigger } from '../popover'\nimport { CsCalendar, CsCalendarProps } from '../calendar/cs-calendar'\nimport { cn } from '../../lib/utils'\n\n/**\n * CsDatePicker 스타일 시스템 (Design Token Reference)\n *\n * CsPopover + CsCalendar의 조합 컴포넌트입니다.\n *\n * ## Figma Token → Props 매핑\n * | Figma 토큰 패턴 | 적용 |\n * |----------------|------|\n * | `calendar/date-picker/*` | 트리거 버튼 스타일 |\n * | `calendar/container/*` | 캘린더 컨테이너 (CsCalendar 참조) |\n * | `calendar/days/*` | 날짜 셀 스타일 (CsCalendar 참조) |\n *\n * ## CSS Variables\n * ```css\n * --calendar-date-picker-bg | font | icon | icon-size\n * --calendar-date-picker-radius | padding-x | padding-y\n * --calendar-date-picker-border | border-width\n * ```\n *\n * ## 컴포넌트 구조\n * ```\n * CsDatePicker\n * ├── CsPopover\n * │   ├── CsPopoverTrigger (children 렌더링)\n * │   └── CsPopoverContent\n * │       └── CsCalendar\n * ```\n *\n * @see CsCalendar - 캘린더 단독 사용\n * @see CsPopover - 팝오버 단독 사용\n */\n\n/**\n * CsDatePicker Props\n *\n * CsCalendarProps를 상속받아 모든 캘린더 옵션 사용 가능.\n * children은 트리거 버튼 내용으로 렌더링.\n */\ntype CsDatePickerProps = PropsWithChildren<CsCalendarProps>\n\n/**\n * CS Design System 날짜 선택기\n *\n * 사용자가 날짜 또는 기간을 선택할 수 있는 컴포넌트.\n * 버튼 클릭 시 캘린더 팝오버가 표시되며, 예약, 일정, 필터 등에 사용됩니다.\n * CsPopover + CsCalendar의 조합입니다.\n *\n * ## 사용 시나리오\n * - 예약/일정 선택: 호텔 체크인/체크아웃, 미팅 날짜\n * - 기간 필터: 검색 기간, 통계 기간 설정\n * - 생년월일 입력: 회원가입, 프로필 수정\n * - 마감일 설정: 작업 완료일, 이벤트 종료일\n * - 과거/미래 제한: `disabled` prop으로 선택 가능 날짜 제한\n *\n * ## 유사 컴포넌트와의 차이\n * - **CsCalendar**: 캘린더만 단독으로 표시 (항상 보이는 캘린더)\n * - DatePicker는 버튼 + 팝오버 조합, Calendar는 캘린더만\n *\n * @example 단일 날짜 선택\n * ```tsx\n * <CsDatePicker mode=\"single\" selected={date} onSelect={setDate}>\n *   {date ? format(date, \"PPP\") : \"날짜 선택\"}\n * </CsDatePicker>\n * ```\n *\n * @example 범위 선택\n * ```tsx\n * <CsDatePicker mode=\"range\" selected={range} onSelect={setRange}>\n *   {range?.from && range?.to\n *     ? `${format(range.from, \"PP\")} - ${format(range.to, \"PP\")}`\n *     : \"기간 선택\"}\n * </CsDatePicker>\n * ```\n *\n * @example 아이콘 포함\n * ```tsx\n * <CsDatePicker mode=\"single\" selected={date} onSelect={setDate}>\n *   <CalendarIcon className=\"mr-2\" />\n *   {date ? format(date, \"PPP\") : \"날짜 선택\"}\n * </CsDatePicker>\n * ```\n *\n * @example 특정 날짜 비활성화\n * ```tsx\n * <CsDatePicker\n *   mode=\"single\"\n *   selected={date}\n *   onSelect={setDate}\n *   disabled={{ before: new Date() }}\n * >\n *   날짜 선택\n * </CsDatePicker>\n * ```\n */\nfunction CsDatePicker({ children, className, ...props }: PropsWithChildren<CsCalendarProps>) {\n  return (\n    <CsPopover>\n      <CsPopoverTrigger\n        className={cn(\n          'typo-body-sm rounded-(--calendar-date-picker-radius) px-(--calendar-date-picker-padding-x) py-(--calendar-date-picker-padding-y)',\n          '[&_svg]:size-(--calendar-date-picker-icon-size) border-(length:--calendar-date-picker-border-width) border-(--calendar-date-picker-border)',\n          'bg-(--calendar-date-picker-bg) text-(--calendar-date-picker-font) [&_svg]:text-(--calendar-date-picker-icon)',\n          className\n        )}\n      >\n        {children}\n      </CsPopoverTrigger>\n      <CsPopoverContent className='p-0 border-none shadow-none!'>\n        <CsCalendar {...props} />\n      </CsPopoverContent>\n    </CsPopover>\n  )\n}\n\nexport { CsDatePicker, type CsDatePickerProps }"],"names":[],"mappings":";;;;AAmGA,SAAS,aAAa,EAAE,UAAU,WAAW,GAAG,SAA6C;AAC3F,8BACG,WAAA,EACC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGD;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,oBAAC,oBAAiB,WAAU,gCAC1B,8BAAC,YAAA,EAAY,GAAG,OAAO,EAAA,CACzB;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/dialog/cs-dialog.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+function CsDialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function CsDialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function CsDialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function CsDialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function CsDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-(--dialog-common-bg-overlay)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsDialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(CsDialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(CsDialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      SheetPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-(--dialog-common-bg) data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-(2*var(--dialog-common-padding-x)))] translate-x-[-50%] translate-y-[-50%] gap-(--dialog-common-gap) rounded-(--dialog-common-radius) border-(--dialog-common-border) border-(length:--dialog-common-border-width) px-(--dialog-common-padding-x) py-(--dialog-common-padding-y) duration-200",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(CsDialogClose, { className: "absolute top-4 right-4", children: [
+            /* @__PURE__ */ jsx(XIcon, {}),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function CsDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-(--dialog-container-header-gap) max-mobile:text-center text-left", className),
+      ...props
+    }
+  );
+}
+function CsDialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-(--dialog-container-footer-gap) max-mobile:flex-row max-mobile:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("typo-heading-sm text-(--dialog-container-header-title)", className),
+      ...props
+    }
+  );
+}
+function CsDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("typo-body-sm text-(--dialog-container-header-description)", className),
+      ...props
+    }
+  );
+}
+export {
+  CsDialog,
+  CsDialogClose,
+  CsDialogContent,
+  CsDialogDescription,
+  CsDialogFooter,
+  CsDialogHeader,
+  CsDialogOverlay,
+  CsDialogPortal,
+  CsDialogTitle,
+  CsDialogTrigger
+};
+//# sourceMappingURL=cs-dialog.js.map

package/dist/components/dialog/cs-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-dialog.js","sources":["../../../src/components/dialog/cs-dialog.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\n\n/**\n * CsDialog 스타일 시스템 (Design Token Reference)\n *\n * ## Figma Token → 컴포넌트 매핑\n * | Figma 토큰 패턴 | 컴포넌트 |\n * |----------------|---------|\n * | `dialog/common/*` | `CsDialogContent`, `CsDialogOverlay` |\n * | `dialog/container/header-*` | `CsDialogHeader`, `CsDialogTitle`, `CsDialogDescription` |\n * | `dialog/container/footer-*` | `CsDialogFooter` |\n *\n * ## State 매핑\n * | UI 상태 | data 속성 | 적용 |\n * |---------|----------|------|\n * | 열림 | `data-state=\"open\"` | fade-in, zoom-in 애니메이션 |\n * | 닫힘 | `data-state=\"closed\"` | fade-out, zoom-out 애니메이션 |\n *\n * ## CSS Variables\n * ```css\n * --dialog-common-bg | bg-overlay | gap | radius | border | border-width | padding-x | padding-y\n * --dialog-container-header-gap | header-title | header-description | footer-gap\n * ```\n *\n * ## 서브 컴포넌트 구조\n * ```\n * CsDialog (Root)\n * ├── CsDialogTrigger\n * └── CsDialogContent\n *     ├── CsDialogHeader\n *     │   ├── CsDialogTitle\n *     │   └── CsDialogDescription\n *     ├── <본문 콘텐츠>\n *     └── CsDialogFooter\n * ```\n *\n * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog | Radix Dialog}\n * @see CsAlertDialog - 확인/취소 다이얼로그 (동일 토큰 사용)\n */\n\n/**\n * CsDialogContent Props\n */\ntype CsDialogContentProps = React.ComponentProps<typeof DialogPrimitive.Content> & {\n  /**\n   * 우측 상단 닫기(X) 버튼 표시 여부\n   * @default true\n   */\n  showCloseButton?: boolean\n}\n\n/**\n * CS Design System 모달 다이얼로그\n *\n * 화면 중앙에 표시되는 모달 창으로, 사용자의 주의가 필요한 정보나 입력을 받을 때 사용됩니다.\n * 복잡한 폼, 상세 정보, 확인 메시지 등에 활용되며, Radix Dialog 기반으로 포커스 트랩, ESC 닫기, 오버레이 클릭 닫기를 지원합니다.\n *\n * ## 사용 시나리오\n * - 복잡한 폼 입력: 여러 필드가 있는 설정, 프로필 편집\n * - 상세 정보 표시: 항목 세부사항, 이미지 확대 보기\n * - 사용자 입력 받기: 코멘트 작성, 이유 입력\n * - 다단계 플로우: 마법사 형태의 순차 입력\n *\n * ## 유사 컴포넌트와의 차이\n * - **CsAlertDialog**: 확인/취소 다이얼로그 (단순 확인 전용, 닫기 버튼 없음)\n * - **CsSheet**: 측면에서 슬라이드되는 패널 (설정, 필터 등)\n * - **CsDrawer**: 하단에서 슬라이드되는 패널 (모바일 메뉴, 옵션)\n * - Dialog는 중앙 모달, Sheet/Drawer는 측면/하단 슬라이드\n *\n * @example 기본 조합\n * ```tsx\n * <CsDialog>\n *   <CsDialogTrigger asChild>\n *     <CsButton>열기</CsButton>\n *   </CsDialogTrigger>\n *   <CsDialogContent>\n *     <CsDialogHeader>\n *       <CsDialogTitle>제목</CsDialogTitle>\n *       <CsDialogDescription>설명</CsDialogDescription>\n *     </CsDialogHeader>\n *     <CsDialogFooter>...</CsDialogFooter>\n *   </CsDialogContent>\n * </CsDialog>\n * ```\n *\n * @example 닫기 버튼 숨기기\n * ```tsx\n * <CsDialogContent showCloseButton={false}>...</CsDialogContent>\n * ```\n *\n * @example 제어 컴포넌트\n * ```tsx\n * <CsDialog open={isOpen} onOpenChange={setIsOpen}>\n *   <CsDialogContent>...</CsDialogContent>\n * </CsDialog>\n * ```\n */\nfunction CsDialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\n/**\n * 다이얼로그 트리거 버튼\n *\n * 클릭 시 다이얼로그 열림. `asChild`로 커스텀 버튼 사용 가능.\n */\nfunction CsDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\n/** 다이얼로그 포탈 - body에 렌더링 */\nfunction CsDialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\n/** 다이얼로그 닫기 버튼 래퍼 */\nfunction CsDialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\n/** 다이얼로그 오버레이 (반투명 배경) */\nfunction CsDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-(--dialog-common-bg-overlay)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * 다이얼로그 콘텐츠 영역\n *\n * 화면 중앙에 표시되는 모달 본체.\n * 자동으로 Portal과 Overlay 포함.\n */\nfunction CsDialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: CsDialogContentProps) {\n  return (\n    <CsDialogPortal data-slot=\"dialog-portal\">\n      <CsDialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-(--dialog-common-bg) data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-(2*var(--dialog-common-padding-x)))] translate-x-[-50%] translate-y-[-50%] gap-(--dialog-common-gap) rounded-(--dialog-common-radius) border-(--dialog-common-border) border-(length:--dialog-common-border-width) px-(--dialog-common-padding-x) py-(--dialog-common-padding-y) duration-200\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <CsDialogClose className=\"absolute top-4 right-4\">\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </CsDialogClose>\n        )}\n      </DialogPrimitive.Content>\n    </CsDialogPortal>\n  )\n}\n\n/**\n * 다이얼로그 헤더 영역\n *\n * Title과 Description을 담는 컨테이너.\n * 모바일에서는 중앙 정렬.\n */\nfunction CsDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-(--dialog-container-header-gap) max-mobile:text-center text-left\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * 다이얼로그 푸터 영역\n *\n * 액션 버튼들을 담는 컨테이너.\n * 모바일에서는 세로 배치, 데스크탑에서는 가로 배치.\n */\nfunction CsDialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-(--dialog-container-footer-gap) max-mobile:flex-row max-mobile:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * 다이얼로그 제목\n *\n * `typo-heading-sm` 타이포그래피 적용.\n * 접근성을 위해 aria-labelledby로 자동 연결.\n */\nfunction CsDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"typo-heading-sm text-(--dialog-container-header-title)\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * 다이얼로그 설명 텍스트\n *\n * `typo-body-sm` 타이포그래피 적용.\n * 접근성을 위해 aria-describedby로 자동 연결.\n */\nfunction CsDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"typo-body-sm text-(--dialog-container-header-description)\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  CsDialog,\n  CsDialogClose,\n  CsDialogContent,\n  CsDialogDescription,\n  CsDialogFooter,\n  CsDialogHeader,\n  CsDialogOverlay,\n  CsDialogPortal,\n  CsDialogTitle,\n  CsDialogTrigger,\n  type CsDialogContentProps,\n}\n"],"names":[],"mappings":";;;;;AAuGkB,SACb,SAAA;AAAA,EACL,GAAsD;AACpD,GAAA;AACF,SAAA,oBAAA,eAAA,MAAA,EAAA,aAAA,UAAA,GAAA,MAAA,CAAA;AAOA;AAAyB,SACpB,gBAAA;AAAA,EACL,GAAyD;AACvD,GAAA;AACF,SAAA,oBAAA,eAAA,SAAA,EAAA,aAAA,kBAAA,GAAA,MAAA,CAAA;AAGA;AAAwB,SACnB,eAAA;AAAA,EACL,GAAwD;AACtD,GAAA;AACF,SAAA,oBAAA,eAAA,QAAA,EAAA,aAAA,iBAAA,GAAA,MAAA,CAAA;AAGA;AAAuB,SAClB,cAAA;AAAA,EACL,GAAuD;AACrD,GAAA;AACF,SAAA,oBAAA,eAAA,OAAA,EAAA,aAAA,gBAAA,GAAA,MAAA,CAAA;AAGA;AAAyB,SACvB,gBAAA;AAAA,EACA;AAAA,EACF,GAAyD;AACvD;AACE,SAAiB;AAAA,IAAhB,eAAA;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MAAA,WACT;AAAA,QACA;AAAA,QACF;AAAA,MACC;AAAA,MAAG,GAAA;AAAA,IACN;AAAA,EAEJ;AAQA;AAAyB,SACvB,gBAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAG;AAAA,EACL,GAAyB;AACvB,GAAA;AAEI,SAAC,qBAAA,gBAAgB,EAAA,aAAA,iBAAA,UAAA;AAAA,IACjB,oBAAA,iBAAA,CAAA,CAAA;AAAA,IAAC;AAAA,MAAA,eAAA;AAAA,MAAA;AAAA,QAEC,aAAW;AAAA,QAAA,WACT;AAAA,UACA;AAAA,UACF;AAAA,QACC;AAAA,QAEA;QAAA,UAAA;AAAA,UACA;AAAA,UAEG,mBAAO,qBAAA,eAAA,EAAA,WAAA,0BAAA,UAAA;AAAA,YACP,oBAAC,OAAA,CAAA,CAAA;AAAA,YACH,oBAAA,QAAA,EAAA,WAAA,WAAA,UAAA,QAAA,CAAA;AAAA,UAAA,EAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA;EAKV,EAAA,CAAA;AAQA;AACE,0BACE,WAAA,GAAA,MAAA,GAAA;AAAA,SAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MACV,WAAG,GAAA,sFAAA,SAAA;AAAA,MAAA,GAAA;AAAA,IACN;AAAA,EAEJ;AAQA;AACE,0BACE,WAAA,GAAA,MAAA,GAAA;AAAA,SAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MAAA,WACT;AAAA,QACA;AAAA,QACF;AAAA,MACC;AAAA,MAAG,GAAA;AAAA,IACN;AAAA,EAEJ;AAQA;AAAuB,SACrB,cAAA;AAAA,EACA;AAAA,EACF,GAAuD;AACrD;AACE,SAAiB;AAAA,IAAhB,eAAA;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MACV,WAAG,GAAA,0DAAA,SAAA;AAAA,MAAA,GAAA;AAAA,IACN;AAAA,EAEJ;AAQA;AAA6B,SAC3B,oBAAA;AAAA,EACA;AAAA,EACF,GAA6D;AAC3D;AACE,SAAiB;AAAA,IAAhB,eAAA;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MACV,WAAG,GAAA,6DAAA,SAAA;AAAA,MAAA,GAAA;AAAA,IACN;AAAA,EAEJ;;"}

package/dist/components/drawer/cs-drawer.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Drawer } from "vaul";
+import { cn } from "../../lib/utils.js";
+function CsDrawer({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer.Root, { "data-slot": "drawer", ...props });
+}
+function CsDrawerTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function CsDrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function CsDrawerClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer.Close, { "data-slot": "drawer-close", ...props });
+}
+function CsDrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-(--color-bg-overlay-default)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsDrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(CsDrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsx(CsDrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Drawer.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col gap-(--drawer-common-gap)",
+          "bg-(--drawer-common-bg) border-(--drawer-common-border)",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-(--drawer-common-radius) data-[vaul-drawer-direction=top]:border-b-[length:--drawer-common-border-width]",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-(--drawer-common-radius) data-[vaul-drawer-direction=bottom]:border-t-[length:--drawer-common-border-width]",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l-[length:--drawer-common-border-width] data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r-[length:--drawer-common-border-width] data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function CsDrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn(
+        "flex flex-col gap-(--drawer-container-header-gap) px-(--drawer-common-padding-x) py-(--drawer-common-padding-y) group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsDrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-(--drawer-container-footer-gap) px-(--drawer-common-padding-x) py-(--drawer-common-padding-y)", className),
+      ...props
+    }
+  );
+}
+function CsDrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("text-(--drawer-container-header-title) typo-heading-sm", className),
+      ...props
+    }
+  );
+}
+function CsDrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-(--drawer-container-header-description) typo-body-sm", className),
+      ...props
+    }
+  );
+}
+export {
+  CsDrawer,
+  CsDrawerClose,
+  CsDrawerContent,
+  CsDrawerDescription,
+  CsDrawerFooter,
+  CsDrawerHeader,
+  CsDrawerOverlay,
+  CsDrawerPortal,
+  CsDrawerTitle,
+  CsDrawerTrigger
+};
+//# sourceMappingURL=cs-drawer.js.map

package/dist/components/drawer/cs-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-drawer.js","sources":["../../../src/components/drawer/cs-drawer.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"../../lib/utils\"\n\n/**\n * CsDrawer 스타일 시스템 (Design Token Reference)\n *\n * ## Figma Token → Props 매핑\n * | Figma 토큰 패턴 | 컴포넌트 |\n * |----------------|---------|\n * | `drawer/common/*` | `CsDrawerContent` (컨테이너) |\n * | `drawer/container/header-*` | `CsDrawerHeader`, `CsDrawerTitle`, `CsDrawerDescription` |\n * | `drawer/container/footer-*` | `CsDrawerFooter` |\n *\n * ## State 매핑\n * | UI 상태 | 조건 | 스타일 변화 |\n * |---------|------|------------|\n * | 열림 | open | animate-in, fade-in |\n * | 닫힘 | closed | animate-out, fade-out |\n *\n * ## CSS Variables\n * ```css\n * --drawer-common-bg | border | radius | gap | padding-x | padding-y\n * --drawer-container-header-gap | header-title | header-description | footer-gap\n * ```\n *\n * ## 서브 컴포넌트 구조\n * ```\n * CsDrawer (Root)\n * ├── CsDrawerTrigger\n * └── CsDrawerContent\n *     ├── CsDrawerHeader\n *     │   ├── CsDrawerTitle\n *     │   └── CsDrawerDescription\n *     └── CsDrawerFooter\n * ```\n *\n * @see {@link https://vaul.emilkowal.ski | Vaul}\n */\n\n/**\n * CsDrawer Props\n */\ntype CsDrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root> & {\n  /**\n   * 드로어 열기 방향\n   * - `bottom`: 하단에서 올라옴 (기본, 모바일 최적화)\n   * - `top`: 상단에서 내려옴\n   * - `left`: 좌측에서 슬라이드\n   * - `right`: 우측에서 슬라이드\n   * @default 'bottom'\n   */\n  direction?: 'top' | 'bottom' | 'left' | 'right'\n  /**\n   * 열림/닫힘 상태\n   * controlled 모드에서 사용\n   */\n  open?: boolean\n  /**\n   * 상태 변경 핸들러\n   */\n  onOpenChange?: (open: boolean) => void\n}\n\n/**\n * CS Design System 드로어 컴포넌트\n *\n * 화면 하단에서 위로 슬라이드되어 나타나는 모바일 친화적 패널.\n * 모바일 메뉴, 간단한 옵션 선택, 빠른 액션 등에 사용됩니다.\n * Vaul 기반으로 direction prop으로 열리는 방향을 지정할 수 있습니다.\n *\n * ## 사용 시나리오\n * - 모바일 메뉴: 하단에서 올라오는 네비게이션 (direction=\"bottom\", 기본값)\n * - 공유 옵션: 소셜 미디어 공유 버튼 목록\n * - 빠른 액션: 항목에 대한 간단한 작업 선택\n * - 필터/정렬: 간단한 옵션 선택 (3-5개 이하)\n *\n * ## 유사 컴포넌트와의 차이\n * - **CsSheet**: 측면 슬라이드 패널 (설정 메뉴, 필터)\n * - **CsDialog**: 화면 중앙 모달 (복잡한 폼, 정보 표시)\n * - Drawer는 하단 슬라이드(모바일), Sheet는 측면 슬라이드\n *\n * @example 기본 조합 (하단)\n * ```tsx\n * <CsDrawer>\n *   <CsDrawerTrigger asChild>\n *     <CsButton>열기</CsButton>\n *   </CsDrawerTrigger>\n *   <CsDrawerContent>\n *     <CsDrawerHeader>\n *       <CsDrawerTitle>제목</CsDrawerTitle>\n *       <CsDrawerDescription>설명</CsDrawerDescription>\n *     </CsDrawerHeader>\n *     <CsDrawerFooter>...</CsDrawerFooter>\n *   </CsDrawerContent>\n * </CsDrawer>\n * ```\n *\n * @example 방향 지정\n * ```tsx\n * <CsDrawer direction=\"right\">...</CsDrawer>\n * <CsDrawer direction=\"left\">...</CsDrawer>\n * <CsDrawer direction=\"top\">...</CsDrawer>\n * ```\n */\nfunction CsDrawer({\n  ...props\n}: CsDrawerProps) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\n/** 드로어 열기 트리거 */\nfunction CsDrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\n/** 드로어 포털 */\nfunction CsDrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\n/** 드로어 닫기 버튼 */\nfunction CsDrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\n/** 드로어 배경 오버레이 */\nfunction CsDrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-(--color-bg-overlay-default)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** 드로어 콘텐츠 영역 - direction에 따라 스타일 자동 적용 */\nfunction CsDrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <CsDrawerPortal data-slot=\"drawer-portal\">\n      <CsDrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col gap-(--drawer-common-gap)\",\n          \"bg-(--drawer-common-bg) border-(--drawer-common-border)\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-(--drawer-common-radius) data-[vaul-drawer-direction=top]:border-b-[length:--drawer-common-border-width]\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-(--drawer-common-radius) data-[vaul-drawer-direction=bottom]:border-t-[length:--drawer-common-border-width]\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l-[length:--drawer-common-border-width] data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r-[length:--drawer-common-border-width] data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </CsDrawerPortal>\n  )\n}\n\n/** 드로어 헤더 - 제목, 설명 영역 */\nfunction CsDrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-(--drawer-container-header-gap) px-(--drawer-common-padding-x) py-(--drawer-common-padding-y) group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** 드로어 푸터 - 액션 버튼 영역 */\nfunction CsDrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-(--drawer-container-footer-gap) px-(--drawer-common-padding-x) py-(--drawer-common-padding-y)\", className)}\n      {...props}\n    />\n  )\n}\n\n/** 드로어 제목 */\nfunction CsDrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-(--drawer-container-header-title) typo-heading-sm\", className)}\n      {...props}\n    />\n  )\n}\n\n/** 드로어 설명 */\nfunction CsDrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-(--drawer-container-header-description) typo-body-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  CsDrawer,\n  CsDrawerPortal,\n  CsDrawerOverlay,\n  CsDrawerTrigger,\n  CsDrawerClose,\n  CsDrawerContent,\n  CsDrawerHeader,\n  CsDrawerFooter,\n  CsDrawerTitle,\n  CsDrawerDescription,\n  type CsDrawerProps,\n}\n"],"names":[],"mappings":";;;;AA4GkB,SACb,SAAA;AAAA,EACL,GAAkB;AAChB,GAAA;AACF,SAAA,oBAAA,OAAA,MAAA,EAAA,aAAA,UAAA,GAAA,MAAA,CAAA;AAGA;AAAyB,SACpB,gBAAA;AAAA,EACL,GAAyD;AACvD,GAAA;AACF,SAAA,oBAAA,OAAA,SAAA,EAAA,aAAA,kBAAA,GAAA,MAAA,CAAA;AAGA;AAAwB,SACnB,eAAA;AAAA,EACL,GAAwD;AACtD,GAAA;AACF,SAAA,oBAAA,OAAA,QAAA,EAAA,aAAA,iBAAA,GAAA,MAAA,CAAA;AAGA;AAAuB,SAClB,cAAA;AAAA,EACL,GAAuD;AACrD,GAAA;AACF,SAAA,oBAAA,OAAA,OAAA,EAAA,aAAA,gBAAA,GAAA,MAAA,CAAA;AAGA;AAAyB,SACvB,gBAAA;AAAA,EACA;AAAA,EACF,GAAyD;AACvD;AACE,SAAiB;AAAA,IAAhB,OAAA;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MAAA,WACT;AAAA,QACA;AAAA,QACF;AAAA,MACC;AAAA,MAAG,GAAA;AAAA,IACN;AAAA,EAEJ;AAGA;AAAyB,SACvB,gBAAA;AAAA,EACA;AAAA,EACA;AAAA,EACF,GAAyD;AACvD,GAAA;AAEI,SAAC,qBAAA,gBAAgB,EAAA,aAAA,iBAAA,UAAA;AAAA,IACjB,oBAAA,iBAAA,CAAA,CAAA;AAAA,IAAiB;AAAA,MAAhB,OAAA;AAAA,MAAA;AAAA,QAEC,aAAW;AAAA,QAAA,WACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACF;AAAA,QACC;AAAA,QAED;QAAA,UAAA;AAAA,UACC,oBAAA,OAAA,EAAA,WAAA,kIAAA,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA;EAIT,EAAA,CAAA;AAGA;AACE,0BACE,WAAA,GAAA,MAAA,GAAA;AAAA,SAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MAAA,WACT;AAAA,QACA;AAAA,QACF;AAAA,MACC;AAAA,MAAG,GAAA;AAAA,IACN;AAAA,EAEJ;AAGA;AACE,0BACE,WAAA,GAAA,MAAA,GAAA;AAAA,SAAC;AAAA,IAAA;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MACV,WAAG,GAAA,2HAAA,SAAA;AAAA,MAAA,GAAA;AAAA,IACN;AAAA,EAEJ;AAGA;AAAuB,SACrB,cAAA;AAAA,EACA;AAAA,EACF,GAAuD;AACrD;AACE,SAAiB;AAAA,IAAhB,OAAA;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MACV,WAAG,GAAA,0DAAA,SAAA;AAAA,MAAA,GAAA;AAAA,IACN;AAAA,EAEJ;AAGA;AAA6B,SAC3B,oBAAA;AAAA,EACA;AAAA,EACF,GAA6D;AAC3D;AACE,SAAiB;AAAA,IAAhB,OAAA;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MACV,WAAG,GAAA,6DAAA,SAAA;AAAA,MAAA,GAAA;AAAA,IACN;AAAA,EAEJ;;"}

package/dist/components/dropdown-menu/cs-dropdown-menu.js

@@ -0,0 +1,247 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon, CircleIcon, ChevronRightIcon } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const csDropdownMenuItemCommonClassName = [
+  "flex cursor-default items-center gap-(--dropdown-item-icon-gap) outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "rounded-(--dropdown-item-common-radius) px-(--dropdown-item-common-padding-x) py-(--dropdown-item-common-padding-y) h-(--dropdown-item-common-height) bg-(--dropdown-item-common-bg)",
+  "typo-body-sm text-(--dropdown-item-simple-default-font) hover:text-(--dropdown-item-simple-hover-font) hover:bg-(--dropdown-item-simple-hover-bg) data-[state=checked]:text-(--dropdown-item-simple-active-font) data-[disabled]:text-(--dropdown-item-simple-disabled-font)",
+  "[&_svg:not([class*='size-'])]:size-(--dropdown-item-icon-icon-size) [&_svg]:text-(--dropdown-item-icon-default-icon) data-[state=checked]:[&_svg]:text-(--dropdown-item-simple-active-icon) data-[disabled]:[&_svg]:text-(--dropdown-item-icon-disabled-icon)"
+].join(" ");
+function CsDropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function CsDropdownMenuPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function CsDropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function CsDropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
+        "rounded-(--dropdown-container-radius) gap-(--dropdown-container-gap) px-(--dropdown-container-padding-x) py-(--dropdown-container-padding-y) bg-(--dropdown-container-bg) border-(--dropdown-container-border) border-(length:--dropdown-container-border-width) boxshadow-sm",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function CsDropdownMenuGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function CsDropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        csDropdownMenuItemCommonClassName,
+        "relative data-disabled:pointer-events-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsDropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.CheckboxItem,
+    {
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        csDropdownMenuItemCommonClassName,
+        "data-disabled:pointer-events-none",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        checked ? /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }) : /* @__PURE__ */ jsx("div", { className: "size-(--dropdown-item-icon-icon-size)" }),
+        children
+      ]
+    }
+  );
+}
+function CsDropdownMenuRadioGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.RadioGroup,
+    {
+      "data-slot": "dropdown-menu-radio-group",
+      ...props
+    }
+  );
+}
+function CsDropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.RadioItem,
+    {
+      "data-slot": "dropdown-menu-radio-item",
+      className: cn(
+        csDropdownMenuItemCommonClassName,
+        "group data-disabled:pointer-events-none",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-current" }) }),
+        /* @__PURE__ */ jsx("div", { className: "size-(--dropdown-item-icon-icon-size) group-data-[state=checked]:hidden" }),
+        children
+      ]
+    }
+  );
+}
+function CsDropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        csDropdownMenuItemCommonClassName,
+        "typo-productive-label-md text-(--dropdown-item-header-font)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsDropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-(--dropdown-item-common-border) w-full h-(--dropdown-item-common-border-width)", className),
+      ...props
+    }
+  );
+}
+function CsDropdownMenuShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn(
+        "text-(--dropdown-item-icon-default-icon) ml-auto typo-body-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsDropdownMenuSub({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function CsDropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  icon,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "relative flex cursor-default select-none items-center rounded-(--dropdown-item-common-radius) py-(--dropdown-item-common-padding-y) pl-8 pr-2 outline-none transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 focus:bg-(--dropdown-item-simple-hover-bg) focus:text-(--dropdown-item-simple-hover-font)",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        icon ?? /* @__PURE__ */ jsx(ChevronRightIcon, {})
+      ]
+    }
+  );
+}
+function CsDropdownMenuSubContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    {
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "z-50 min-w-32 overflow-hidden text-popover-foreground boxshadow-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-dropdown-menu-content-transform-origin) rounded-(--dropdown-container-radius) border-(--dropdown-container-border) p-(--dropdown-container-padding-x) shadow-lg bg-(--dropdown-container-bg)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  CsDropdownMenu,
+  CsDropdownMenuCheckboxItem,
+  CsDropdownMenuContent,
+  CsDropdownMenuGroup,
+  CsDropdownMenuItem,
+  CsDropdownMenuLabel,
+  CsDropdownMenuPortal,
+  CsDropdownMenuRadioGroup,
+  CsDropdownMenuRadioItem,
+  CsDropdownMenuSeparator,
+  CsDropdownMenuShortcut,
+  CsDropdownMenuSub,
+  CsDropdownMenuSubContent,
+  CsDropdownMenuSubTrigger,
+  CsDropdownMenuTrigger,
+  csDropdownMenuItemCommonClassName
+};
+//# sourceMappingURL=cs-dropdown-menu.js.map