@crossangle-org/cs-ui 0.2.5 → 0.2.7

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

@@ -0,0 +1,124 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+function CsPagination({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      role: "navigation",
+      "aria-label": "pagination",
+      "data-slot": "pagination",
+      className: cn("mx-auto flex w-full justify-center", className),
+      ...props
+    }
+  );
+}
+function CsPaginationContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "pagination-content",
+      className: cn("flex flex-row items-center gap-(--pagination-common-gap)", className),
+      ...props
+    }
+  );
+}
+function CsPaginationItem({ ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function CsPaginationLink({
+  className,
+  isActive,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "aria-current": isActive ? "page" : void 0,
+      "data-slot": "pagination-link",
+      "data-active": isActive,
+      className: cn(
+        "typo-body-sm transition-colors cursor-pointer flex items-center justify-center h-(--pagination-common-item-size) min-w-(--pagination-common-item-size) rounded-(--pagination-common-radius) text-(--pagination-link-default-font) [&_svg]:size-(--pagination-common-icon-size)",
+        "hover:bg-(--pagination-link-hover-bg) hover:text-(--pagination-link-hover-font) aria-disabled:cursor-not-allowed aria-disabled:opacity-(--opacity-state-disabled)",
+        isActive && "typo-body-sm-bold bg-(--pagination-item-active-bg) text-(--pagination-item-active-font) border-(length:--pagination-item-active-border-width) border-(--pagination-item-active-border) hover:bg-(--pagination-item-active-hover-bg) hover:text-(--pagination-item-active-hover-font) hover:border-(length:--pagination-item-active-hover-border-width) hover:border-(--pagination-item-active-hover-border)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsPaginationPrevious({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CsPaginationLink,
+    {
+      "aria-label": "Go to previous page",
+      className: cn(
+        "gap-(--pagination-common-gap) max-mobile:px-(--pagination-common-padding-sm) pr-(--pagination-common-padding-md) pl-(--pagination-common-padding-sm) text-(--pagination-link-default-font) [&_svg]:text-(--pagination-link-default-icon) [&_svg]:transition-colors",
+        "hover:bg-(--pagination-link-hover-bg) hover:text-(--pagination-link-hover-font) hover:[&_svg]:text-(--pagination-link-hover-icon)",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "max-mobile:hidden block", children: "Previous" })
+      ] })
+    }
+  );
+}
+function CsPaginationNext({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    CsPaginationLink,
+    {
+      "aria-label": "Go to next page",
+      className: cn(
+        "gap-(--pagination-common-gap) max-mobile:px-(--pagination-common-padding-sm) pl-(--pagination-common-padding-md) pr-(--pagination-common-padding-sm) text-(--pagination-link-default-font) [&_svg]:text-(--pagination-link-default-icon) [&_svg]:transition-colors",
+        "hover:bg-(--pagination-link-hover-bg) hover:text-(--pagination-link-hover-font) hover:[&_svg]:text-(--pagination-link-hover-icon)",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "max-mobile:hidden block", children: "Next" }),
+        /* @__PURE__ */ jsx(ChevronRightIcon, {})
+      ] })
+    }
+  );
+}
+function CsPaginationEllipsis({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "pagination-ellipsis",
+      className: cn("flex size-(--pagination-common-item-size) items-center justify-center text-(--pagination-item-ellipsis-font)", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-(--pagination-common-icon-size)" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+      ]
+    }
+  );
+}
+export {
+  CsPagination,
+  CsPaginationContent,
+  CsPaginationEllipsis,
+  CsPaginationItem,
+  CsPaginationLink,
+  CsPaginationNext,
+  CsPaginationPrevious
+};
+//# sourceMappingURL=cs-pagination.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cs-pagination.js","sources":["../../../src/components/pagination/cs-pagination.tsx"],"sourcesContent":["import * as React from \"react\"\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  MoreHorizontalIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { CsButton, csButtonVariants } from \"../button\"\n\n/**\n * CsPagination 스타일 시스템 (Design Token Reference)\n *\n * ## Figma Token → Props 매핑\n * | Figma 토큰 패턴 | 컴포넌트 |\n * |----------------|---------|\n * | `pagination/common/*` | 공통 스타일 (gap, size, radius) |\n * | `pagination/link/*` | `CsPaginationLink`, `CsPaginationPrevious`, `CsPaginationNext` |\n * | `pagination/item/active-*` | `CsPaginationLink` (`isActive={true}`) |\n * | `pagination/item/ellipsis-*` | `CsPaginationEllipsis` |\n *\n * ## State 매핑\n * | UI 상태 | Props | 스타일 변화 |\n * |---------|-------|------------|\n * | 기본 | - | link-default-* |\n * | 활성 | `isActive` | item-active-* |\n * | hover | - | hover-* |\n * | 비활성 | `aria-disabled` | opacity 감소 |\n *\n * ## CSS Variables\n * ```css\n * --pagination-common-gap | item-size | radius | icon-size | padding-sm | padding-md\n * --pagination-link-default-font | icon | hover-bg | hover-font | hover-icon\n * --pagination-item-active-bg | font | border | border-width | hover-*\n * --pagination-item-ellipsis-font\n * ```\n *\n * ## 서브 컴포넌트 구조\n * ```\n * CsPagination (nav)\n * └── CsPaginationContent (ul)\n *     └── CsPaginationItem (li)\n *         ├── CsPaginationPrevious\n *         ├── CsPaginationLink\n *         ├── CsPaginationEllipsis\n *         └── CsPaginationNext\n * ```\n */\n\n/**\n * CS Design System 페이지네이션 컴포넌트\n *\n * 많은 콘텐츠를 여러 페이지로 나누어 표시할 때 페이지 간 이동을 제공하는 컴포넌트.\n * 리스트, 검색 결과, 테이블 등에 사용되며, 여러 서브 컴포넌트를 조합하여 구성합니다.\n *\n * ## 사용 시나리오\n * - 검색 결과: 많은 검색 결과를 페이지로 분할\n * - 리스트 페이징: 제품 목록, 게시글 목록 등\n * - 테이블 페이징: 큰 데이터 테이블의 페이지 이동\n * - 갤러리: 이미지/비디오 페이지 네비게이션\n *\n * @example 기본 조합\n * ```tsx\n * <CsPagination>\n *   <CsPaginationContent>\n *     <CsPaginationItem>\n *       <CsPaginationPrevious href=\"#\" />\n *     </CsPaginationItem>\n *     <CsPaginationItem>\n *       <CsPaginationLink href=\"#\" isActive>1</CsPaginationLink>\n *     </CsPaginationItem>\n *     <CsPaginationItem>\n *       <CsPaginationLink href=\"#\">2</CsPaginationLink>\n *     </CsPaginationItem>\n *     <CsPaginationItem>\n *       <CsPaginationEllipsis />\n *     </CsPaginationItem>\n *     <CsPaginationItem>\n *       <CsPaginationNext href=\"#\" />\n *     </CsPaginationItem>\n *   </CsPaginationContent>\n * </CsPagination>\n * ```\n */\n/** 페이지네이션 루트 컴포넌트 */\nfunction CsPagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  )\n}\n\n/** 페이지네이션 항목 컨테이너 */\nfunction CsPaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-(--pagination-common-gap)\", className)}\n      {...props}\n    />\n  )\n}\n\n/** 페이지네이션 개별 항목 래퍼 */\nfunction CsPaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\n/**\n * CsPaginationLink Props\n */\ntype CsPaginationLinkProps = React.ComponentProps<\"a\"> & {\n  /**\n   * 현재 페이지 여부\n   * true면 활성 스타일 적용\n   */\n  isActive?: boolean\n}\n\n/** 페이지 번호 링크 */\nfunction CsPaginationLink({\n  className,\n  isActive,\n  ...props\n}: CsPaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        \"typo-body-sm transition-colors cursor-pointer flex items-center justify-center h-(--pagination-common-item-size) min-w-(--pagination-common-item-size) rounded-(--pagination-common-radius) text-(--pagination-link-default-font) [&_svg]:size-(--pagination-common-icon-size)\",\n        \"hover:bg-(--pagination-link-hover-bg) hover:text-(--pagination-link-hover-font) aria-disabled:cursor-not-allowed aria-disabled:opacity-(--opacity-state-disabled)\",\n        isActive && \"typo-body-sm-bold bg-(--pagination-item-active-bg) text-(--pagination-item-active-font) border-(length:--pagination-item-active-border-width) border-(--pagination-item-active-border) hover:bg-(--pagination-item-active-hover-bg) hover:text-(--pagination-item-active-hover-font) hover:border-(length:--pagination-item-active-hover-border-width) hover:border-(--pagination-item-active-hover-border)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** 이전 페이지 버튼 */\nfunction CsPaginationPrevious({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CsPaginationLink>) {\n  return (\n    <CsPaginationLink\n      aria-label=\"Go to previous page\"\n      className={cn(\n        \"gap-(--pagination-common-gap) max-mobile:px-(--pagination-common-padding-sm) pr-(--pagination-common-padding-md) pl-(--pagination-common-padding-sm) text-(--pagination-link-default-font) [&_svg]:text-(--pagination-link-default-icon) [&_svg]:transition-colors\", \n        \"hover:bg-(--pagination-link-hover-bg) hover:text-(--pagination-link-hover-font) hover:[&_svg]:text-(--pagination-link-hover-icon)\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <ChevronLeftIcon />\n          <span className=\"max-mobile:hidden block\">Previous</span>\n        </>\n      )}\n    </CsPaginationLink>\n  )\n}\n\n/** 다음 페이지 버튼 */\nfunction CsPaginationNext({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CsPaginationLink>) {\n  return (\n    <CsPaginationLink\n      aria-label=\"Go to next page\"\n      className={cn(\n        \"gap-(--pagination-common-gap) max-mobile:px-(--pagination-common-padding-sm) pl-(--pagination-common-padding-md) pr-(--pagination-common-padding-sm) text-(--pagination-link-default-font) [&_svg]:text-(--pagination-link-default-icon) [&_svg]:transition-colors\", \n        \"hover:bg-(--pagination-link-hover-bg) hover:text-(--pagination-link-hover-font) hover:[&_svg]:text-(--pagination-link-hover-icon)\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <span className=\"max-mobile:hidden block\">Next</span>\n          <ChevronRightIcon />\n        </>\n      )}\n    </CsPaginationLink>\n  )\n}\n\n/** 생략 표시 (...) */\nfunction CsPaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-(--pagination-common-item-size) items-center justify-center text-(--pagination-item-ellipsis-font)\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-(--pagination-common-icon-size)\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  CsPagination,\n  CsPaginationContent,\n  CsPaginationLink,\n  CsPaginationItem,\n  CsPaginationPrevious,\n  CsPaginationNext,\n  CsPaginationEllipsis,\n  type CsPaginationLinkProps,\n}\n"],"names":[],"mappings":";;;AAqFA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAGA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,4DAA4D,SAAS;AAAA,MAClF,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAGA,SAAS,iBAAiB,EAAE,GAAG,SAAqC;AAClE,SAAO,oBAAC,MAAA,EAAG,aAAU,mBAAmB,GAAG,OAAO;AACpD;AAcA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,gBAAc,WAAW,SAAS;AAAA,MAClC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAGA,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkD;AAChD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,sBACC,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,iBAAA,EAAgB;AAAA,QACjB,oBAAC,QAAA,EAAK,WAAU,2BAA0B,UAAA,WAAA,CAAQ;AAAA,MAAA,EAAA,CACpD;AAAA,IAAA;AAAA,EAAA;AAIR;AAGA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkD;AAChD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEH,sBACC,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,2BAA0B,UAAA,QAAI;AAAA,4BAC7C,kBAAA,CAAA,CAAiB;AAAA,MAAA,EAAA,CACpB;AAAA,IAAA;AAAA,EAAA;AAIR;AAGA,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,gHAAgH,SAAS;AAAA,MACtI,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,oBAAA,EAAmB,WAAU,uCAAA,CAAuC;AAAA,QACrE,oBAAC,QAAA,EAAK,WAAU,WAAU,UAAA,aAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C;"}

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

@@ -0,0 +1,60 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const csPopoverVariants = cva(
+  "z-50 w-72 flex flex-col gap-(--popover-common-gap) rounded-(--popover-common-radius) px-(--popover-common-padding-x) py-(--popover-common-padding-y) text-popover-foreground outline-none 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",
+  {
+    variants: {
+      variant: {
+        solid: "bg-(--popover-solid-bg) boxshadow-md border-0",
+        outline: "bg-(--popover-outline-bg) border border-(--popover-outline-border) border-(length:--popover-outline-border-width)"
+      }
+    },
+    defaultVariants: {
+      variant: "solid"
+    }
+  }
+);
+function CsPopover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function CsPopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function CsPopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(csPopoverVariants({ variant, className })),
+      ...props
+    }
+  ) });
+}
+function CsPopoverAnchor({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+export {
+  CsPopover,
+  CsPopoverAnchor,
+  CsPopoverContent,
+  CsPopoverTrigger,
+  csPopoverVariants
+};
+//# sourceMappingURL=cs-popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cs-popover.js","sources":["../../../src/components/popover/cs-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\n/**\n * CsPopover 스타일 시스템 (Design Token Reference)\n *\n * ## Figma Token → Props 매핑\n * | Figma 토큰 패턴 | Props |\n * |----------------|-------|\n * | `popover/solid/*` | `variant=\"solid\"` (기본) |\n * | `popover/outline/*` | `variant=\"outline\"` |\n *\n * ## CSS Variables\n * ```css\n * --popover-common-gap | radius | padding-x | padding-y\n * --popover-solid-bg\n * --popover-outline-bg | border | border-width\n * ```\n */\nconst csPopoverVariants = cva(\n  \"z-50 w-72 flex flex-col gap-(--popover-common-gap) rounded-(--popover-common-radius) px-(--popover-common-padding-x) py-(--popover-common-padding-y) text-popover-foreground outline-none 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\",\n  {\n    variants: {\n      variant: {\n        solid: \"bg-(--popover-solid-bg) boxshadow-md border-0\",\n        outline:\n          \"bg-(--popover-outline-bg) border border-(--popover-outline-border) border-(length:--popover-outline-border-width)\",\n      },\n    },\n    defaultVariants: {\n      variant: \"solid\",\n    },\n  }\n)\n\n/**\n * CsPopoverContent Props\n */\ntype CsPopoverContentProps = React.ComponentProps<typeof PopoverPrimitive.Content> &\n  VariantProps<typeof csPopoverVariants> & {\n  /**\n   * 팝오버 스타일\n   * - `solid`: 그림자 배경 (기본) - 일반 드롭다운, 메뉴\n   * - `outline`: 테두리 스타일 - 폼, 설정 패널\n   * @default 'solid'\n   */\n  variant?: 'solid' | 'outline'\n  /**\n   * 트리거 대비 정렬 위치\n   * @default 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n  /**\n   * 트리거와의 간격 (px)\n   * @default 4\n   */\n  sideOffset?: number\n}\n\n/**\n * CS Design System 팝오버 컴포넌트\n *\n * 트리거 요소 클릭 시 추가 정보나 간단한 폼을 표시하는 플로팅 컨테이너.\n * 짧은 설명, 옵션 선택, 간단한 설정 등에 사용되며, 포커스 관리와 외부 클릭 닫기를 자동 지원합니다.\n * Radix UI 기반입니다.\n *\n * ## 사용 시나리오\n * - 추가 설명: 버튼이나 아이콘 클릭 시 더 많은 정보 표시\n * - 간단한 폼: 이름 변경, 코멘트 입력 등 1-2개 필드\n * - 옵션 선택: 간단한 설정 토글, 라디오 선택\n * - 컨텍스트 정보: 항목에 대한 추가 세부사항\n *\n * ## 유사 컴포넌트와의 차이\n * - **CsTooltip**: 짧은 힌트 텍스트만 (호버 시 표시, 상호작용 불가)\n * - **CsDropdownMenu**: 액션 메뉴 (명령 실행, 선택이 아님)\n * - Popover는 클릭 + 입력 가능, Tooltip은 호버 + 읽기만\n *\n * @example 기본 조합\n * ```tsx\n * <CsPopover>\n *   <CsPopoverTrigger asChild>\n *     <CsButton>열기</CsButton>\n *   </CsPopoverTrigger>\n *   <CsPopoverContent>팝오버 내용</CsPopoverContent>\n * </CsPopover>\n * ```\n *\n * @example outline 스타일\n * ```tsx\n * <CsPopover>\n *   <CsPopoverTrigger asChild>\n *     <CsButton variant=\"outline\">설정</CsButton>\n *   </CsPopoverTrigger>\n *   <CsPopoverContent variant=\"outline\">\n *     <CsLabel>옵션</CsLabel>\n *     <CsSwitch />\n *   </CsPopoverContent>\n * </CsPopover>\n * ```\n *\n * @see {@link https://www.radix-ui.com/primitives/docs/components/popover | Radix Popover}\n */\nfunction CsPopover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\n/**\n * 팝오버 트리거\n * asChild로 자식 요소를 트리거로 사용 권장\n */\nfunction CsPopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\n/**\n * 팝오버 콘텐츠 영역\n * 진입/퇴장 애니메이션 자동 적용\n */\nfunction CsPopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  variant,\n  ...props\n}: CsPopoverContentProps) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(csPopoverVariants({ variant, className }))}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\n/**\n * 팝오버 앵커\n * 가상 앵커 위치 지정용\n */\nfunction CsPopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nexport { CsPopover, CsPopoverTrigger, CsPopoverContent, CsPopoverAnchor, csPopoverVariants, type CsPopoverContentProps }\n"],"names":[],"mappings":";;;;;AAyB0B,MACxB,oBAAA;AAAA,EACA;AAAA,EAAA;AAAA,IACY,UACR;AAAA,MAAS,SACA;AAAA,QACP,OAAA;AAAA,QACE,SAAA;AAAA,MAEN;AAAA,IACA;AAAA,IAAiB,iBACN;AAAA,MAAA,SAAA;AAAA,IACX;AAAA,EAEJ;AAqEA;AAAmB,SACd,UAAA;AAAA,EACL,GAAuD;AACrD,GAAA;AACF,SAAA,oBAAA,iBAAA,MAAA,EAAA,aAAA,WAAA,GAAA,MAAA,CAAA;AAMA;AAA0B,SACrB,iBAAA;AAAA,EACL,GAA0D;AACxD,GAAA;AACF,SAAA,oBAAA,iBAAA,SAAA,EAAA,aAAA,mBAAA,GAAA,MAAA,CAAA;AAMA;AAA0B,SACxB,iBAAA;AAAA,EACA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA;AAAA,EACF,GAA0B;AACxB,GAAA;AAEI,SAAkB,oBAAA,iBAAA,QAAA,EAAA,UAAA;AAAA,IAAjB,iBAAA;AAAA,IAAA;AAAA,MAEC,aAAA;AAAA,MACA;AAAA,MACA;AAAA,MACC,WAAG,GAAA,kBAAA,EAAA,SAAA,UAAA,CAAA,CAAA;AAAA,MAAA,GAAA;AAAA;EAIZ,EAAA,CAAA;AAMA;AAAyB,SACpB,gBAAA;AAAA,EACL,GAAyD;AACvD,GAAA;AACF,SAAA,oBAAA,iBAAA,QAAA,EAAA,aAAA,kBAAA,GAAA,MAAA,CAAA;;"}

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

@@ -0,0 +1,62 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const csProgressVariants = cva(
+  "relative h-(--progress-height) w-full overflow-hidden rounded-(--progress-radius)",
+  {
+    variants: {
+      variant: {
+        solid: "bg-(--progress-solid-track)",
+        gradient: "bg-(--progress-gradient-track)"
+      }
+    },
+    defaultVariants: {
+      variant: "solid"
+    }
+  }
+);
+const csProgressIndicatorVariants = cva(
+  "h-full w-full flex-1 transition-all",
+  {
+    variants: {
+      variant: {
+        solid: "bg-(--progress-solid-fill)",
+        gradient: "gradient-primary-horizontal"
+      }
+    },
+    defaultVariants: {
+      variant: "solid"
+    }
+  }
+);
+function CsProgress({
+  className,
+  value,
+  variant = "solid",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ProgressPrimitive.Root,
+    {
+      "data-slot": "progress",
+      className: cn(csProgressVariants({ variant }), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ProgressPrimitive.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: csProgressIndicatorVariants({ variant }),
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    }
+  );
+}
+export {
+  CsProgress,
+  csProgressIndicatorVariants,
+  csProgressVariants
+};
+//# sourceMappingURL=cs-progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cs-progress.js","sources":["../../../src/components/progress/cs-progress.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\n/**\n * CsProgress 스타일 시스템 (Design Token Reference)\n *\n * ## Figma Token → Props 매핑\n * | Figma 토큰 패턴 | Props |\n * |----------------|-------|\n * | `progress/solid/*` | `variant=\"solid\"` (기본) |\n * | `progress/gradient/*` | `variant=\"gradient\"` |\n *\n * ## CSS Variables\n * ```css\n * --progress-height | radius\n * --progress-solid-track | fill\n * --progress-gradient-track (fill은 gradient-primary-horizontal 클래스)\n * ```\n */\nconst csProgressVariants = cva(\n  \"relative h-(--progress-height) w-full overflow-hidden rounded-(--progress-radius)\",\n  {\n    variants: {\n      variant: {\n        solid: \"bg-(--progress-solid-track)\",\n        gradient: \"bg-(--progress-gradient-track)\",\n      },\n    },\n    defaultVariants: {\n      variant: \"solid\",\n    },\n  }\n)\n\nconst csProgressIndicatorVariants = cva(\n  \"h-full w-full flex-1 transition-all\",\n  {\n    variants: {\n      variant: {\n        solid: \"bg-(--progress-solid-fill)\",\n        gradient: \"gradient-primary-horizontal\",\n      },\n    },\n    defaultVariants: {\n      variant: \"solid\",\n    },\n  }\n)\n\n/**\n * CsProgress Props\n */\ntype CsProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root> &\n  VariantProps<typeof csProgressVariants> & {\n  /**\n   * 프로그레스 바 스타일\n   * - `solid`: 단색 채우기 (기본) - 일반 진행 표시\n   * - `gradient`: 그라데이션 채우기 - 강조가 필요한 진행 표시\n   * @default 'solid'\n   */\n  variant?: 'solid' | 'gradient'\n  /**\n   * 진행률 (0-100)\n   * undefined면 0%로 표시\n   */\n  value?: number\n}\n\n/**\n * CS Design System 프로그레스 바 컴포넌트\n *\n * 작업 진행률을 시각적으로 표시하는 프로그레스 바. Radix UI 기반.\n * 정량적인 진행 상태(0-100%)를 표시할 때 사용하며,\n * translateX 애니메이션으로 부드러운 전환을 제공합니다.\n *\n * ## 사용 시나리오\n * - 파일 업로드: `value={uploadProgress}` - 업로드 진행률 표시\n * - 다단계 프로세스: 가입 절차, 설문 조사 등의 완료 정도\n * - 점수/퍼센트: 프로필 완성도, 학습 진도율, 퀴즈 정답률\n * - 목표 달성도: `variant=\"gradient\"` - 목표 달성 퍼센트, 모금액 표시\n * - 로딩 진행률: 데이터 로딩, 처리 진행 등 진행 상황\n * - 시간 경과: 타이머, 대기 시간 표시\n *\n * ## 유사 컴포넌트와의 차이\n * - **CsSpinner**: 불확정적 로딩 - 언제 끝날지 모를 때\n * - Progress는 정량적(0-100%), Spinner는 무한 회전\n *\n * @example 기본 (solid)\n * ```tsx\n * <CsProgress value={60} />\n * ```\n *\n * @example gradient 스타일\n * ```tsx\n * <CsProgress variant=\"gradient\" value={60} />\n * ```\n *\n * @example 동적 진행률\n * ```tsx\n * <CsProgress value={uploadProgress} />\n * ```\n *\n * @see {@link https://www.radix-ui.com/primitives/docs/components/progress | Radix Progress}\n */\nfunction CsProgress({\n  className,\n  value,\n  variant = \"solid\",\n  ...props\n}: CsProgressProps) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(csProgressVariants({ variant }), className)}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className={csProgressIndicatorVariants({ variant })}\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { CsProgress, csProgressVariants, csProgressIndicatorVariants, type CsProgressProps }\n"],"names":[],"mappings":";;;;;AAwB2B,MACzB,qBAAA;AAAA,EACA;AAAA,EAAA;AAAA,IACY,UACR;AAAA,MAAS,SACA;AAAA,QACP;QAAU,UAAA;AAAA,MAEd;AAAA,IACA;AAAA,IAAiB,iBACN;AAAA,MAAA,SAAA;AAAA,IACX;AAAA,EAEJ;AAEA;AAAoC,MAClC,8BAAA;AAAA,EACA;AAAA,EAAA;AAAA,IACY,UACR;AAAA,MAAS,SACA;AAAA,QACP;QAAU,UAAA;AAAA,MAEd;AAAA,IACA;AAAA,IAAiB,iBACN;AAAA,MAAA,SAAA;AAAA,IACX;AAAA,EAEJ;AAyDA;AAAoB,SAClB,WAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAG;AAAA,EACL,GAAoB;AAClB;AACE,SAAmB;AAAA,IAAlB,kBAAA;AAAA,IAAA;AAAA,MAEC,aAAW;AAAA,MACV,WAAG,GAAA,mBAAA,EAAA,QAAA,CAAA,GAAA,SAAA;AAAA,MAEJ,GAAA;AAAA,MAAA,UAAmB;AAAA,QAAlB,kBAAA;AAAA,QAAA;AAAA,UAEC,aAAW;AAAA,UACX,WAAS,4BAA0B,EAAA,QAAO,CAAA;AAAA,UAAgB,OAAA,EAAA,WAAA,eAAA,OAAA,SAAA,EAAA,KAAA;AAAA,QAAA;AAAA,MAC5D;AAAA,IACF;AAAA,EAEJ;;"}

package/dist/components/scroll-area/cs-scroll-area.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "../../lib/utils.js";
+const CsScrollArea = React.forwardRef(({ className, children, viewportRef, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ScrollAreaPrimitive.Root,
+  {
+    ref,
+    "data-slot": "scroll-area",
+    className: cn("relative overflow-hidden", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.Viewport,
+        {
+          ref: viewportRef,
+          "data-slot": "scroll-area-viewport",
+          className: "size-full rounded-[inherit]",
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(CsScrollBar, {}),
+      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+    ]
+  }
+));
+CsScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+function CsScrollBar({
+  className,
+  orientation = "vertical",
+  thumbClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-(--scrollbar-vertical-width) border-l border-l-transparent",
+        orientation === "horizontal" && "h-(--scrollbar-horizontal-height) flex-col border-t border-t-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: cn("bg-(--scrollbar-fill) relative flex-1 rounded-(--scrollbar-radius)", thumbClassName)
+        }
+      )
+    }
+  );
+}
+export {
+  CsScrollArea,
+  CsScrollBar
+};
+//# sourceMappingURL=cs-scroll-area.js.map

package/dist/components/scroll-area/cs-scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cs-scroll-area.js","sources":["../../../src/components/scroll-area/cs-scroll-area.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"../../lib/utils\"\n\n/**\n * CsScrollArea 스타일 시스템 (Design Token Reference)\n *\n * ## Figma Token → Props 매핑\n * | Figma 토큰 패턴 | 적용 |\n * |----------------|------|\n * | `scrollbar/vertical-*` | 세로 스크롤바 |\n * | `scrollbar/horizontal-*` | 가로 스크롤바 |\n *\n * ## CSS Variables\n * ```css\n * --scrollbar-vertical-width | horizontal-height | fill | radius\n * ```\n *\n * ## 서브 컴포넌트 구조\n * ```\n * CsScrollArea (Root)\n * ├── Viewport (스크롤 영역)\n * ├── CsScrollBar (스크롤바)\n * │   └── Thumb\n * └── Corner\n * ```\n *\n * @see {@link https://www.radix-ui.com/primitives/docs/components/scroll-area | Radix ScrollArea}\n */\n\n/**\n * CsScrollArea Props\n */\ntype CsScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {\n  /**\n   * Viewport ref 접근용\n   * 스크롤 위치 조작 등에 사용\n   */\n  viewportRef?: React.Ref<HTMLDivElement>\n}\n\n/**\n * CsScrollBar Props\n */\ntype CsScrollBarProps = React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> & {\n  /**\n   * 스크롤바 방향\n   * @default 'vertical'\n   */\n  orientation?: 'vertical' | 'horizontal'\n  /**\n   * Thumb 추가 스타일\n   */\n  thumbClassName?: string\n}\n\n/**\n * CS Design System 스크롤 영역 컴포넌트\n *\n * 브라우저 기본 스크롤바 대신 디자인 시스템 스타일의 커스텀 스크롤바를 표시하는 컴포넌트.\n * 긴 콘텐츠, 가로 스크롤, 고정 높이 영역 등에 사용됩니다.\n *\n * ## 사용 시나리오\n * - 긴 리스트: 고정 높이 내에서 많은 항목 스크롤\n * - 가로 스크롤: 넓은 테이블, 이미지 갤러리\n * - 채팅 창: 메시지 목록 스크롤\n * - 코드 뷰어: 긴 코드 내용 스크롤\n *\n * @example 기본\n * ```tsx\n * <CsScrollArea className=\"h-[200px]\">\n *   <div>긴 내용...</div>\n * </CsScrollArea>\n * ```\n *\n * @example 가로 스크롤\n * ```tsx\n * <CsScrollArea className=\"w-full whitespace-nowrap\">\n *   <div className=\"flex gap-4\">\n *     {items.map(item => <Card key={item.id} />)}\n *   </div>\n * </CsScrollArea>\n * ```\n *\n * @example Viewport ref 접근\n * ```tsx\n * const viewportRef = useRef<HTMLDivElement>(null)\n * <CsScrollArea viewportRef={viewportRef}>...</CsScrollArea>\n * ```\n */\nconst CsScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {\n    viewportRef?: React.Ref<HTMLDivElement>\n  }\n>(({ className, children, viewportRef, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    data-slot=\"scroll-area\"\n    className={cn(\"relative overflow-hidden\", className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport\n      ref={viewportRef}\n      data-slot=\"scroll-area-viewport\"\n      className=\"size-full rounded-[inherit]\"\n    >\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <CsScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nCsScrollArea.displayName = ScrollAreaPrimitive.Root.displayName\n\n/**\n * 스크롤바 컴포넌트\n * CsScrollArea 내부에서 자동 렌더링\n * 독립 사용 시 커스텀 스크롤바 구현 가능\n */\nfunction CsScrollBar({\n  className,\n  orientation = \"vertical\",\n  thumbClassName,\n  ...props\n}: CsScrollBarProps) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none\",\n        orientation === \"vertical\" &&\n          \"h-full w-(--scrollbar-vertical-width) border-l border-l-transparent\",\n        orientation === \"horizontal\" &&\n          \"h-(--scrollbar-horizontal-height) flex-col border-t border-t-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className={cn(\"bg-(--scrollbar-fill) relative flex-1 rounded-(--scrollbar-radius)\", thumbClassName)}\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { CsScrollArea, CsScrollBar, type CsScrollAreaProps, type CsScrollBarProps }\n"],"names":[],"mappings":";;;;;AAmGE,MAAC,eAAA,MAAoB,WAAA,CAAA,EAAA,WAAA,UAAA,aAAA,GAAA,MAAA,GAAA,QAAA;AAAA,EAApB,oBAAA;AAAA,EAAA;AAAA,IAEC;AAAA,IACA,aAAW;AAAA,IACV,WAAG,GAAA,4BAAA,SAAA;AAAA,IAEJ;IAAA,UAAA;AAAA,MAAC;AAAA,QAAA,oBAAA;AAAA,QAAA;AAAA,UAEC,KAAA;AAAA,UACA,aAAU;AAAA,UAET,WAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,MAEA,oBAAC,aAAA,CAAA,CAAA;AAAA,MAA2B,oBAAA,oBAAA,QAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAE/B;AACD,CAAA;AAOA,2BAAqB,oBAAA,KAAA;AAAA,SACnB,YAAA;AAAA,EACA;AAAA,EACA,cAAA;AAAA,EACA;AAAA,EACF,GAAqB;AACnB;AACE,SAAqB;AAAA,IAApB,oBAAA;AAAA,IAAA;AAAA,MAEC,aAAA;AAAA,MACA;AAAA,MAAW,WACT;AAAA,QACA;AAAA,QAEA,gBAAgB,cAAA;AAAA,QAEhB,gBAAA,gBAAA;AAAA,QACF;AAAA,MACC;AAAA,MAED,GAAA;AAAA,MAAA,UAAqB;AAAA,QAApB,oBAAA;AAAA,QAAA;AAAA,UAEC,aAAW;AAAA,UAAuF,WAAA,GAAA,sEAAA,cAAA;AAAA,QAAA;AAAA,MACpG;AAAA,IACF;AAAA,EAEJ;;"}

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

@@ -0,0 +1,195 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { cva } from "class-variance-authority";
+import { csDropdownMenuItemCommonClassName } from "../dropdown-menu/cs-dropdown-menu.js";
+function CsSelect({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function CsSelectGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function CsSelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+const csSelectTriggerVariants = cva(
+  "focus-visible:ring-0 flex w-fit items-center justify-between whitespace-nowrap transition-[color,box-shadow] outline-none disabled:cursor-not-allowed *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center rounded-(--select-base-common-radius) border-(length:--select-base-common-border-width) [&_svg:not([class*='size-'])]:size-(--select-base-common-icon-size) bg-(--select-base-default-bg) border-(--select-base-default-border) text-(--select-base-default-font) data-[placeholder]:text-(--font-color-primary-muted) [&_svg]:text-(--select-base-default-icon) hover:bg-(--select-base-hover-bg) hover:border-(--select-base-hover-border) hover:text-(--select-base-hover-font) hover:[&_svg]:text-(--select-base-hover-icon) disabled:bg-(--select-base-disabled-bg) disabled:border-(--select-base-disabled-border) disabled:text-(--select-base-disabled-font) disabled:[&_svg]:text-(--select-base-disabled-icon)",
+  {
+    variants: {
+      size: {
+        base: "typo-body-sm h-(--select-base-common-height) px-(--select-base-common-padding-x) gap-(--select-base-common-gap) *:data-[slot=select-value]:gap-(--select-base-common-gap)",
+        small: "typo-body-xs h-(--select-small-common-height) px-(--select-small-common-padding-x) gap-(--select-small-common-gap) *:data-[slot=select-value]:gap-(--select-small-common-gap)"
+      }
+    },
+    defaultVariants: {
+      size: "base"
+    }
+  }
+);
+const CsSelectTrigger = React.forwardRef(({ className, children, size = "base", ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    "data-slot": "select-trigger",
+    className: cn(
+      csSelectTriggerVariants({ size }),
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-(--select-base-default-icon) size-(--select-base-common-icon-size)" }) })
+    ]
+  }
+));
+CsSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+function CsSelectContent({
+  className,
+  children,
+  position = "popper",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      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 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        "min-w-[8rem] rounded-(--select-dropdown-radius) gap-(--select-dropdown-gap) px-(--select-dropdown-padding-x) py-(--select-dropdown-padding-y) bg-(--select-dropdown-bg) border-(--select-dropdown-border) border-(length:--dropdown-container-border-width) boxshadow-sm",
+        className
+      ),
+      position,
+      align,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(CsSelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(CsSelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function CsSelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Label,
+    {
+      "data-slot": "select-label",
+      className: cn(
+        csDropdownMenuItemCommonClassName,
+        "typo-productive-label-md text-(--dropdown-item-header-font)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CsSelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        csDropdownMenuItemCommonClassName,
+        "group data-[disabled]:pointer-events-none *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-(--dropdown-item-icon-gap)",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { className: "ml-auto", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+        /* @__PURE__ */ jsx("div", { className: "ml-auto size-(--select-base-common-icon-size) group-data-[state=checked]:hidden" })
+      ]
+    }
+  );
+}
+function CsSelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Separator,
+    {
+      "data-slot": "select-separator",
+      className: cn("bg-(--dropdown-item-common-border) w-full h-(--dropdown-item-common-border-width)", className),
+      ...props
+    }
+  );
+}
+function CsSelectScrollUpButton({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        csDropdownMenuItemCommonClassName,
+        "[&_svg:not([class*='size-'])]:size-(--select-base-common-icon-size) [&_svg]:text-(--select-base-default-icon)",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronUpIcon, {})
+    }
+  );
+}
+function CsSelectScrollDownButton({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        csDropdownMenuItemCommonClassName,
+        "[&_svg:not([class*='size-'])]:size-(--select-base-common-icon-size) [&_svg]:text-(--select-base-default-icon)",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {})
+    }
+  );
+}
+export {
+  CsSelect,
+  CsSelectContent,
+  CsSelectGroup,
+  CsSelectItem,
+  CsSelectLabel,
+  CsSelectScrollDownButton,
+  CsSelectScrollUpButton,
+  CsSelectSeparator,
+  CsSelectTrigger,
+  CsSelectValue,
+  csSelectTriggerVariants
+};
+//# sourceMappingURL=cs-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cs-select.js","sources":["../../../src/components/select/cs-select.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nimport { cn } from \"../../lib/utils\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { csDropdownMenuItemCommonClassName } from \"../dropdown-menu/cs-dropdown-menu\"\n\n/**\n * CS Design System 셀렉트 컴포넌트\n *\n * 여러 옵션 중 하나를 선택하는 드롭다운 컴포넌트의 고급 버전.\n * **일반적인 경우 CsSimpleSelect 사용을 권장합니다.**\n * 옵션 그룹화, 구분선, 커스텀 레이아웃 등 복잡한 조합이 필요할 때만 이 컴포넌트를 직접 사용하세요.\n *\n * ## 사용 시나리오\n * - 옵션 그룹화 필요: 국가/지역을 대륙별로 그룹화\n * - 구분선 필요: 자주 사용하는 옵션과 전체 옵션 구분\n * - 커스텀 아이템: 아이콘, 설명 등 복잡한 레이아웃\n * - 스크롤 버튼 커스텀: 긴 리스트에서 스크롤 UI 조정\n *\n * ## 유사 컴포넌트와의 차이\n * - **CsSimpleSelect**: 단순 리스트 선택 - 일반적인 경우 이것을 사용하세요 (권장)\n * - **CsDropdownMenu**: 액션 메뉴 (선택이 아닌 명령 실행)\n *\n * @example 기본 조합\n * ```tsx\n * <CsSelect defaultValue=\"apple\">\n *   <CsSelectTrigger>\n *     <CsSelectValue placeholder=\"선택...\" />\n *   </CsSelectTrigger>\n *   <CsSelectContent>\n *     <CsSelectItem value=\"apple\">Apple</CsSelectItem>\n *     <CsSelectItem value=\"banana\">Banana</CsSelectItem>\n *   </CsSelectContent>\n * </CsSelect>\n * ```\n *\n * @example 그룹 + 구분선\n * ```tsx\n * <CsSelectContent>\n *   <CsSelectGroup>\n *     <CsSelectLabel>과일</CsSelectLabel>\n *     <CsSelectItem value=\"apple\">Apple</CsSelectItem>\n *   </CsSelectGroup>\n *   <CsSelectSeparator />\n *   <CsSelectGroup>\n *     <CsSelectLabel>채소</CsSelectLabel>\n *     <CsSelectItem value=\"carrot\">Carrot</CsSelectItem>\n *   </CsSelectGroup>\n * </CsSelectContent>\n * ```\n *\n * @see CsSimpleSelect - 단순 리스트 선택 시 래퍼 컴포넌트 권장 (일반적인 경우)\n * @see {@link https://www.radix-ui.com/primitives/docs/components/select | Radix Select}\n */\nfunction CsSelect({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\n/** 옵션 그룹 컨테이너 */\nfunction CsSelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\n/** 선택된 값 표시 영역 */\nfunction CsSelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\n/**\n * CsSelectTrigger 스타일 시스템 (Design Token Reference)\n *\n * ## Figma Token → Props 매핑\n * | Figma 토큰 패턴 | Props |\n * |----------------|-------|\n * | `select/base/*` | `size=\"base\"` |\n * | `select/small/*` | `size=\"small\"` |\n *\n * ## State 매핑\n * | UI 상태 | Token state |\n * |---------|-------------|\n * | 기본 | default |\n * | hover: | hover |\n * | disabled: | disabled |\n *\n * ## CSS Variables\n * ```css\n * --select-base-common-radius | padding-x | height | border-width | gap | icon-size\n * --select-base-{state}-bg | border | font | icon\n * --select-small-common-height | padding-x | gap\n * --select-dropdown-radius | gap | padding-x | padding-y | bg | border\n * ```\n */\nconst csSelectTriggerVariants = cva(\n  \"focus-visible:ring-0 flex w-fit items-center justify-between whitespace-nowrap transition-[color,box-shadow] outline-none disabled:cursor-not-allowed *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center \" +\n  \"rounded-(--select-base-common-radius) border-(length:--select-base-common-border-width) [&_svg:not([class*='size-'])]:size-(--select-base-common-icon-size) \" +\n  \"bg-(--select-base-default-bg) border-(--select-base-default-border) text-(--select-base-default-font) data-[placeholder]:text-(--font-color-primary-muted) [&_svg]:text-(--select-base-default-icon) \" +\n  \"hover:bg-(--select-base-hover-bg) hover:border-(--select-base-hover-border) hover:text-(--select-base-hover-font) hover:[&_svg]:text-(--select-base-hover-icon) \" +\n  \"disabled:bg-(--select-base-disabled-bg) disabled:border-(--select-base-disabled-border) disabled:text-(--select-base-disabled-font) disabled:[&_svg]:text-(--select-base-disabled-icon)\",\n  {\n    variants: {\n      size: {\n        base: \"typo-body-sm h-(--select-base-common-height) px-(--select-base-common-padding-x) gap-(--select-base-common-gap) *:data-[slot=select-value]:gap-(--select-base-common-gap)\",\n        small: \"typo-body-xs h-(--select-small-common-height) px-(--select-small-common-padding-x) gap-(--select-small-common-gap) *:data-[slot=select-value]:gap-(--select-small-common-gap)\",\n      },\n    },\n    defaultVariants: {\n      size: \"base\",\n    },\n  }\n)\n\n/**\n * CsSelectTrigger Props\n */\ntype CsSelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &\n  VariantProps<typeof csSelectTriggerVariants> & {\n  /**\n   * 트리거 크기\n   * - `base`: 기본 크기\n   * - `small`: 작은 크기 - 밀집 UI용\n   * @default 'base'\n   */\n  size?: 'base' | 'small'\n}\n\n/** Select 트리거 버튼 - ChevronDownIcon 자동 포함 */\nconst CsSelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  CsSelectTriggerProps\n>(({ className, children, size = \"base\", ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    data-slot=\"select-trigger\"\n    className={cn(\n      csSelectTriggerVariants({ size }),\n      className\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <ChevronDownIcon className=\"text-(--select-base-default-icon) size-(--select-base-common-icon-size)\" />\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n))\nCsSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\n/**\n * CsSelectContent Props\n */\ntype CsSelectContentProps = React.ComponentProps<typeof SelectPrimitive.Content> & {\n  /**\n   * 콘텐츠 위치 모드\n   * - `popper`: 트리거 기준 floating (기본)\n   * - `item-aligned`: 선택된 아이템에 정렬\n   * @default 'popper'\n   */\n  position?: 'popper' | 'item-aligned'\n  /**\n   * 트리거 대비 정렬 위치\n   * @default 'center'\n   */\n  align?: 'start' | 'center' | 'end'\n}\n\n/** 드롭다운 콘텐츠 컨테이너 */\nfunction CsSelectContent({\n  className,\n  children,\n  position = \"popper\",\n  align = \"center\",\n  ...props\n}: CsSelectContentProps) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\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 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 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          \"min-w-[8rem] rounded-(--select-dropdown-radius) gap-(--select-dropdown-gap) px-(--select-dropdown-padding-x) py-(--select-dropdown-padding-y) bg-(--select-dropdown-bg) border-(--select-dropdown-border) border-(length:--dropdown-container-border-width) boxshadow-sm\",\n            className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <CsSelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          className={cn(\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <CsSelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\n/** 옵션 그룹 라벨 */\nfunction CsSelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\n        csDropdownMenuItemCommonClassName,\n        \"typo-productive-label-md text-(--dropdown-item-header-font)\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** 개별 선택 옵션 */\nfunction CsSelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        csDropdownMenuItemCommonClassName,\n        \"group data-[disabled]:pointer-events-none *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-(--dropdown-item-icon-gap)\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator className=\"ml-auto\">\n        <CheckIcon />\n      </SelectPrimitive.ItemIndicator>\n      <div className=\"ml-auto size-(--select-base-common-icon-size) group-data-[state=checked]:hidden\" />\n    </SelectPrimitive.Item>\n  )\n}\n\n/** 옵션 그룹 구분선 */\nfunction CsSelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-(--dropdown-item-common-border) w-full h-(--dropdown-item-common-border-width)\", className)}\n      {...props}\n    />\n  )\n}\n\n/** 드롭다운 상단 스크롤 버튼 */\nfunction CsSelectScrollUpButton({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        csDropdownMenuItemCommonClassName,\n        \"[&_svg:not([class*='size-'])]:size-(--select-base-common-icon-size) [&_svg]:text-(--select-base-default-icon)\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? <ChevronUpIcon />}\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\n/** 드롭다운 하단 스크롤 버튼 */\nfunction CsSelectScrollDownButton({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        csDropdownMenuItemCommonClassName,\n        \"[&_svg:not([class*='size-'])]:size-(--select-base-common-icon-size) [&_svg]:text-(--select-base-default-icon)\",\n        className\n      )}\n      {...props}\n    >\n      {children ?? <ChevronDownIcon />}\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  CsSelect,\n  CsSelectContent,\n  CsSelectGroup,\n  CsSelectItem,\n  CsSelectLabel,\n  CsSelectScrollDownButton,\n  CsSelectScrollUpButton,\n  CsSelectSeparator,\n  CsSelectTrigger,\n  CsSelectValue,\n  csSelectTriggerVariants,\n  type CsSelectTriggerProps,\n  type CsSelectContentProps,\n}\n"],"names":[],"mappings":"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"}

package/dist/components/select/cs-simple-select.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils.js";
+import { CsSelect, CsSelectTrigger, CsSelectValue, CsSelectContent, CsSelectItem } from "./cs-select.js";
+const CsSimpleSelect = forwardRef(
+  ({
+    list,
+    placeholder,
+    triggerProps,
+    contentProps,
+    className,
+    onSelect,
+    onValueChange,
+    onChange,
+    ...props
+  }, ref) => {
+    const handleValueChange = (newValue) => {
+      onSelect?.(newValue);
+      onValueChange?.(newValue);
+      onChange?.({ target: { value: newValue } });
+    };
+    return /* @__PURE__ */ jsxs(CsSelect, { onValueChange: handleValueChange, ...props, children: [
+      /* @__PURE__ */ jsx(CsSelectTrigger, { ref, ...triggerProps, className: cn(triggerProps?.className, className), children: /* @__PURE__ */ jsx(CsSelectValue, { placeholder }) }),
+      /* @__PURE__ */ jsx(CsSelectContent, { ...contentProps, children: list.map((item) => /* @__PURE__ */ jsx(CsSelectItem, { value: item.value, disabled: item.disabled, children: item.label }, item.value)) })
+    ] });
+  }
+);
+CsSimpleSelect.displayName = "CsSimpleSelect";
+export {
+  CsSimpleSelect
+};
+//# sourceMappingURL=cs-simple-select.js.map