@causw/core 0.0.9 → 0.0.11

package/dist/components/RatioChart/RatioChartEditor.mjs

@@ -0,0 +1,120 @@
+import { Checkbox } from "../Checkbox/Checkbox.mjs";
+import { mergeStyles } from "../../utils/mergeStyles/mergeStyles.mjs";
+import { ratioChartEditor } from "./RatioChartEditor.styles.mjs";
+import React, { useCallback, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CloseFilled, Plus } from "@causw/icons";
+
+//#region src/components/RatioChart/RatioChartEditor.tsx
+const RatioChartEditor = ({ options: optionsProp, onOptionsChange, allowMultiple: allowMultipleProp, onAllowMultipleChange, onDelete, minOptions = 2, placeholder = "내용을 입력해주세요", disabled, className, ...props }) => {
+	const baseId = useId();
+	const [internalOptions, setInternalOptions] = useState(() => {
+		const initial = [];
+		for (let i = 0; i < minOptions; i++) initial.push({
+			id: `${baseId}-${i}`,
+			value: ""
+		});
+		return initial;
+	});
+	const [internalAllowMultiple, setInternalAllowMultiple] = useState(false);
+	const isOptionsControlled = optionsProp !== void 0;
+	const isAllowMultipleControlled = allowMultipleProp !== void 0;
+	const options = isOptionsControlled ? optionsProp : internalOptions;
+	const allowMultiple = isAllowMultipleControlled ? allowMultipleProp : internalAllowMultiple;
+	const handleOptionChange = useCallback((id, value) => {
+		const newOptions = options.map((opt) => opt.id === id ? {
+			...opt,
+			value
+		} : opt);
+		if (!isOptionsControlled) setInternalOptions(newOptions);
+		onOptionsChange?.(newOptions);
+	}, [
+		options,
+		isOptionsControlled,
+		onOptionsChange
+	]);
+	const handleAddOption = useCallback(() => {
+		const newOption = {
+			id: `${baseId}-${Date.now()}`,
+			value: ""
+		};
+		const newOptions = [...options, newOption];
+		if (!isOptionsControlled) setInternalOptions(newOptions);
+		onOptionsChange?.(newOptions);
+	}, [
+		options,
+		isOptionsControlled,
+		onOptionsChange,
+		baseId
+	]);
+	const handleRemoveOption = useCallback((id) => {
+		if (options.length <= minOptions) return;
+		const newOptions = options.filter((opt) => opt.id !== id);
+		if (!isOptionsControlled) setInternalOptions(newOptions);
+		onOptionsChange?.(newOptions);
+	}, [
+		options,
+		minOptions,
+		isOptionsControlled,
+		onOptionsChange
+	]);
+	const handleAllowMultipleChange = useCallback((checked) => {
+		if (!isAllowMultipleControlled) setInternalAllowMultiple(checked);
+		onAllowMultipleChange?.(checked);
+	}, [isAllowMultipleControlled, onAllowMultipleChange]);
+	const canRemove = options.length > minOptions;
+	const styles = ratioChartEditor({ disabled });
+	return /* @__PURE__ */ jsxs("div", {
+		className: mergeStyles(styles.root(), className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: styles.fields(),
+			children: [options.map((option) => /* @__PURE__ */ jsxs("div", {
+				className: styles.input(),
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "text",
+					value: option.value,
+					onChange: (e) => handleOptionChange(option.id, e.target.value),
+					placeholder,
+					disabled,
+					className: styles.textInput()
+				}), canRemove && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => handleRemoveOption(option.id),
+					disabled,
+					className: styles.removeButton(),
+					"aria-label": "옵션 삭제",
+					children: /* @__PURE__ */ jsx(CloseFilled, { size: 20 })
+				})]
+			}, option.id)), /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: handleAddOption,
+				disabled,
+				className: styles.addButton(),
+				children: [/* @__PURE__ */ jsx(Plus, { size: 20 }), /* @__PURE__ */ jsx("span", {
+					className: styles.addButtonText(),
+					children: "다른 선택 항목 추가"
+				})]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: styles.footer(),
+			children: [/* @__PURE__ */ jsxs(Checkbox, {
+				checked: allowMultiple,
+				onCheckedChange: handleAllowMultipleChange,
+				disabled,
+				children: [/* @__PURE__ */ jsx(Checkbox.Indicator, {}), /* @__PURE__ */ jsx(Checkbox.Label, { children: "복수 선택 허용" })]
+			}), onDelete && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onDelete,
+				disabled,
+				className: styles.deleteButton(),
+				children: "투표 삭제"
+			})]
+		})]
+	});
+};
+RatioChartEditor.displayName = "RatioChartEditor";
+
+//#endregion
+export { RatioChartEditor };
+//# sourceMappingURL=RatioChartEditor.mjs.map

package/dist/components/RatioChart/RatioChartEditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatioChartEditor.mjs","names":[],"sources":["../../../src/components/RatioChart/RatioChartEditor.tsx"],"sourcesContent":["import React, { useState, useCallback, useId } from 'react';\nimport { Plus, CloseFilled } from '@causw/icons';\nimport { mergeStyles } from '../../utils';\nimport { Checkbox } from '../Checkbox';\nimport { ratioChartEditor } from './RatioChartEditor.styles';\n\nexport interface RatioChartEditorOption {\n  id: string;\n  value: string;\n}\n\nexport interface RatioChartEditorProps extends Omit<\n  React.ComponentProps<'div'>,\n  'onChange'\n> {\n  /** 옵션 목록 */\n  options?: RatioChartEditorOption[];\n  /** 옵션 변경 콜백 */\n  onOptionsChange?: (options: RatioChartEditorOption[]) => void;\n  /** 복수 선택 허용 여부 */\n  allowMultiple?: boolean;\n  /** 복수 선택 변경 콜백 */\n  onAllowMultipleChange?: (allowMultiple: boolean) => void;\n  /** 투표 삭제 콜백 */\n  onDelete?: () => void;\n  /** 최소 옵션 수 (기본: 2) */\n  minOptions?: number;\n  /** 플레이스홀더 텍스트 */\n  placeholder?: string;\n  /** 비활성화 */\n  disabled?: boolean;\n}\n\nexport const RatioChartEditor = ({\n  options: optionsProp,\n  onOptionsChange,\n  allowMultiple: allowMultipleProp,\n  onAllowMultipleChange,\n  onDelete,\n  minOptions = 2,\n  placeholder = '내용을 입력해주세요',\n  disabled,\n  className,\n  ...props\n}: RatioChartEditorProps) => {\n  const baseId = useId();\n\n  // 내부 상태 (uncontrolled)\n  const [internalOptions, setInternalOptions] = useState<\n    RatioChartEditorOption[]\n  >(() => {\n    const initial: RatioChartEditorOption[] = [];\n    for (let i = 0; i < minOptions; i++) {\n      initial.push({ id: `${baseId}-${i}`, value: '' });\n    }\n    return initial;\n  });\n  const [internalAllowMultiple, setInternalAllowMultiple] = useState(false);\n\n  // controlled vs uncontrolled\n  const isOptionsControlled = optionsProp !== undefined;\n  const isAllowMultipleControlled = allowMultipleProp !== undefined;\n\n  const options = isOptionsControlled ? optionsProp : internalOptions;\n  const allowMultiple = isAllowMultipleControlled\n    ? allowMultipleProp\n    : internalAllowMultiple;\n\n  // 옵션 값 변경\n  const handleOptionChange = useCallback(\n    (id: string, value: string) => {\n      const newOptions = options.map((opt) =>\n        opt.id === id ? { ...opt, value } : opt,\n      );\n      if (!isOptionsControlled) {\n        setInternalOptions(newOptions);\n      }\n      onOptionsChange?.(newOptions);\n    },\n    [options, isOptionsControlled, onOptionsChange],\n  );\n\n  // 옵션 추가\n  const handleAddOption = useCallback(() => {\n    const newOption: RatioChartEditorOption = {\n      id: `${baseId}-${Date.now()}`,\n      value: '',\n    };\n    const newOptions = [...options, newOption];\n    if (!isOptionsControlled) {\n      setInternalOptions(newOptions);\n    }\n    onOptionsChange?.(newOptions);\n  }, [options, isOptionsControlled, onOptionsChange, baseId]);\n\n  // 옵션 삭제\n  const handleRemoveOption = useCallback(\n    (id: string) => {\n      if (options.length <= minOptions) return;\n      const newOptions = options.filter((opt) => opt.id !== id);\n      if (!isOptionsControlled) {\n        setInternalOptions(newOptions);\n      }\n      onOptionsChange?.(newOptions);\n    },\n    [options, minOptions, isOptionsControlled, onOptionsChange],\n  );\n\n  // 복수 선택 토글\n  const handleAllowMultipleChange = useCallback(\n    (checked: boolean) => {\n      if (!isAllowMultipleControlled) {\n        setInternalAllowMultiple(checked);\n      }\n      onAllowMultipleChange?.(checked);\n    },\n    [isAllowMultipleControlled, onAllowMultipleChange],\n  );\n\n  const canRemove = options.length > minOptions;\n\n  const styles = ratioChartEditor({ disabled });\n\n  return (\n    <div className={mergeStyles(styles.root(), className)} {...props}>\n      {/* 입력 필드들 */}\n      <div className={styles.fields()}>\n        {options.map((option) => (\n          <div key={option.id} className={styles.input()}>\n            <input\n              type=\"text\"\n              value={option.value}\n              onChange={(e) => handleOptionChange(option.id, e.target.value)}\n              placeholder={placeholder}\n              disabled={disabled}\n              className={styles.textInput()}\n            />\n            {canRemove && (\n              <button\n                type=\"button\"\n                onClick={() => handleRemoveOption(option.id)}\n                disabled={disabled}\n                className={styles.removeButton()}\n                aria-label=\"옵션 삭제\"\n              >\n                <CloseFilled size={20} />\n              </button>\n            )}\n          </div>\n        ))}\n\n        {/* 항목 추가 버튼 */}\n        <button\n          type=\"button\"\n          onClick={handleAddOption}\n          disabled={disabled}\n          className={styles.addButton()}\n        >\n          <Plus size={20} />\n          <span className={styles.addButtonText()}>다른 선택 항목 추가</span>\n        </button>\n      </div>\n\n      {/* 푸터 */}\n      <div className={styles.footer()}>\n        <Checkbox\n          checked={allowMultiple}\n          onCheckedChange={handleAllowMultipleChange}\n          disabled={disabled}\n        >\n          <Checkbox.Indicator />\n          <Checkbox.Label>복수 선택 허용</Checkbox.Label>\n        </Checkbox>\n\n        {onDelete && (\n          <button\n            type=\"button\"\n            onClick={onDelete}\n            disabled={disabled}\n            className={styles.deleteButton()}\n          >\n            투표 삭제\n          </button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nRatioChartEditor.displayName = 'RatioChartEditor';\n"],"mappings":"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"}

package/dist/components/RatioChart/RatioChartEditor.styles.cjs

@@ -0,0 +1,23 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let tailwind_variants = require("tailwind-variants");
+
+//#region src/components/RatioChart/RatioChartEditor.styles.ts
+const ratioChartEditor = (0, tailwind_variants.tv)({
+	slots: {
+		root: "flex flex-col gap-[1.25rem] pb-[0.5rem] min-w-[20rem]",
+		fields: "flex flex-col gap-[0.75rem] max-h-[16.25rem] overflow-y-auto",
+		input: "flex items-center gap-[1rem] h-[3.5rem] flex-shrink-0 px-[1rem] rounded-[0.75rem] border border-gray-200 bg-white",
+		textInput: "flex-1 h-full bg-transparent outline-none typo-fixed-16 text-gray-800 placeholder:text-gray-400",
+		removeButton: "flex-shrink-0 p-[0.25rem] rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 cursor-pointer transition-colors",
+		addButton: "flex items-center gap-[0.5rem] h-[3.5rem] flex-shrink-0 px-[1rem] rounded-[0.75rem] border border-dashed border-gray-200 bg-white cursor-pointer hover:bg-gray-50 transition-colors",
+		addButtonText: "typo-fixed-16 text-gray-400",
+		footer: "flex items-center justify-between",
+		deleteButton: "typo-fixed-16 text-red-400 cursor-pointer hover:text-red-500 transition-colors"
+	},
+	variants: { disabled: { true: { root: "opacity-50 pointer-events-none" } } },
+	defaultVariants: { disabled: false }
+});
+const ratioChartEditorKeys = ratioChartEditor.variantKeys;
+
+//#endregion
+exports.ratioChartEditor = ratioChartEditor;

package/dist/components/RatioChart/RatioChartEditor.styles.mjs

@@ -0,0 +1,23 @@
+import { tv } from "tailwind-variants";
+
+//#region src/components/RatioChart/RatioChartEditor.styles.ts
+const ratioChartEditor = tv({
+	slots: {
+		root: "flex flex-col gap-[1.25rem] pb-[0.5rem] min-w-[20rem]",
+		fields: "flex flex-col gap-[0.75rem] max-h-[16.25rem] overflow-y-auto",
+		input: "flex items-center gap-[1rem] h-[3.5rem] flex-shrink-0 px-[1rem] rounded-[0.75rem] border border-gray-200 bg-white",
+		textInput: "flex-1 h-full bg-transparent outline-none typo-fixed-16 text-gray-800 placeholder:text-gray-400",
+		removeButton: "flex-shrink-0 p-[0.25rem] rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 cursor-pointer transition-colors",
+		addButton: "flex items-center gap-[0.5rem] h-[3.5rem] flex-shrink-0 px-[1rem] rounded-[0.75rem] border border-dashed border-gray-200 bg-white cursor-pointer hover:bg-gray-50 transition-colors",
+		addButtonText: "typo-fixed-16 text-gray-400",
+		footer: "flex items-center justify-between",
+		deleteButton: "typo-fixed-16 text-red-400 cursor-pointer hover:text-red-500 transition-colors"
+	},
+	variants: { disabled: { true: { root: "opacity-50 pointer-events-none" } } },
+	defaultVariants: { disabled: false }
+});
+const ratioChartEditorKeys = ratioChartEditor.variantKeys;
+
+//#endregion
+export { ratioChartEditor };
+//# sourceMappingURL=RatioChartEditor.styles.mjs.map

package/dist/components/RatioChart/RatioChartEditor.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatioChartEditor.styles.mjs","names":[],"sources":["../../../src/components/RatioChart/RatioChartEditor.styles.ts"],"sourcesContent":["import { tv, type VariantProps } from 'tailwind-variants';\n\nexport const ratioChartEditor = tv({\n  slots: {\n    root: 'flex flex-col gap-[1.25rem] pb-[0.5rem] min-w-[20rem]', // 에디터 컨테이너\n    fields: 'flex flex-col gap-[0.75rem] max-h-[16.25rem] overflow-y-auto', // 입력 필드들 컨테이너 (4개부터 스크롤, 추가 버튼이 있어서 5개 높이)\n    input:\n      'flex items-center gap-[1rem] h-[3.5rem] flex-shrink-0 px-[1rem] rounded-[0.75rem] border border-gray-200 bg-white', // 개별 입력 필드 (크기 고정)\n    textInput:\n      'flex-1 h-full bg-transparent outline-none typo-fixed-16 text-gray-800 placeholder:text-gray-400', // 입력 필드 내 텍스트\n    removeButton:\n      'flex-shrink-0 p-[0.25rem] rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 cursor-pointer transition-colors', // 삭제 버튼 (X 아이콘)\n    addButton:\n      'flex items-center gap-[0.5rem] h-[3.5rem] flex-shrink-0 px-[1rem] rounded-[0.75rem] border border-dashed border-gray-200 bg-white cursor-pointer hover:bg-gray-50 transition-colors', // 항목 추가 버튼 (크기 고정)\n    addButtonText: 'typo-fixed-16 text-gray-400', // 추가 버튼 텍스트\n    footer: 'flex items-center justify-between', // 푸터\n    deleteButton:\n      'typo-fixed-16 text-red-400 cursor-pointer hover:text-red-500 transition-colors', // 삭제 텍스트 버튼\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'opacity-50 pointer-events-none',\n      },\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n});\n\nexport type RatioChartEditorVariants = VariantProps<typeof ratioChartEditor>;\nexport const ratioChartEditorKeys = ratioChartEditor.variantKeys;\n"],"mappings":";;;AAEA,MAAa,mBAAmB,GAAG;CACjC,OAAO;EACL,MAAM;EACN,QAAQ;EACR,OACE;EACF,WACE;EACF,cACE;EACF,WACE;EACF,eAAe;EACf,QAAQ;EACR,cACE;EACH;CACD,UAAU,EACR,UAAU,EACR,MAAM,EACJ,MAAM,kCACP,EACF,EACF;CACD,iBAAiB,EACf,UAAU,OACX;CACF,CAAC;AAGF,MAAa,uBAAuB,iBAAiB"}

package/dist/components/RatioChart/index.d.mts

@@ -0,0 +1,2 @@
+import { RatioChart, RatioChartFooterProps, RatioChartItemProps, RatioChartRootProps } from "./RatioChart.mjs";
+import { RatioChartEditor, RatioChartEditorOption, RatioChartEditorProps } from "./RatioChartEditor.mjs";

package/dist/components/Select/Select.cjs

@@ -0,0 +1,84 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Select_styles = require('./Select.styles.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _causw_icons = require("@causw/icons");
+let _radix_ui_react_select = require("@radix-ui/react-select");
+_radix_ui_react_select = require_rolldown_runtime.__toESM(_radix_ui_react_select);
+
+//#region src/components/Select/Select.tsx
+const SelectRoot = _radix_ui_react_select.Root;
+const SelectGroup = _radix_ui_react_select.Group;
+const SelectValue = _radix_ui_react_select.Value;
+const SelectTrigger = ({ className, children, error, ...props }) => {
+	const { trigger } = require_Select_styles.select({ error });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_select.Trigger, {
+		className: trigger({ className }),
+		...props,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Icon, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_causw_icons.ArrowDown, {})
+		})]
+	});
+};
+SelectTrigger.displayName = _radix_ui_react_select.Trigger.displayName;
+const SelectContent = ({ className, children, position = "popper", sideOffset = 4, maxHeight = "15rem", ...props }) => {
+	const { content, viewport } = require_Select_styles.select({ position });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Content, {
+		className: content({ className }),
+		position,
+		sideOffset,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Viewport, {
+			className: viewport(),
+			style: { maxHeight },
+			children
+		})
+	}) });
+};
+SelectContent.displayName = _radix_ui_react_select.Content.displayName;
+const SelectLabel = ({ className, ...props }) => {
+	const { label } = require_Select_styles.select();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.Label, {
+		className: label({ className }),
+		...props
+	});
+};
+SelectLabel.displayName = _radix_ui_react_select.Label.displayName;
+const SelectItem = ({ className, children, ...props }) => {
+	const { item } = require_Select_styles.select();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_select.Item, {
+		className: item({ className }),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_select.ItemText, { children }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "h-3.5 w-3.5 items-center justify-center",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_select.ItemIndicator, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "12",
+				height: "8",
+				viewBox: "0 0 12 8",
+				fill: "none",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					d: "M1 3.5L4.68421 7L11 1",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			}), " "] })
+		})]
+	});
+};
+SelectItem.displayName = _radix_ui_react_select.Item.displayName;
+const Select = Object.assign(SelectRoot, {
+	Group: SelectGroup,
+	Value: SelectValue,
+	Trigger: SelectTrigger,
+	Content: SelectContent,
+	Label: SelectLabel,
+	Item: SelectItem
+});
+
+//#endregion
+exports.Select = Select;

package/dist/components/Select/Select.d.cts

@@ -0,0 +1,60 @@
+import { SelectVariants } from "./Select.styles.cjs";
+import * as React$1 from "react";
+import * as react_jsx_runtime46 from "react/jsx-runtime";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+//#region src/components/Select/Select.d.ts
+declare const SelectRoot: React$1.FC<SelectPrimitive.SelectProps>;
+type SelectProps = React$1.ComponentProps<typeof SelectRoot>;
+declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+type SelectGroupProps = React$1.ComponentProps<typeof SelectGroup>;
+declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+type SelectValueProps = React$1.ComponentProps<typeof SelectValue>;
+interface SelectTriggerProps extends React$1.ComponentProps<typeof SelectPrimitive.Trigger>, Pick<SelectVariants, 'error'> {}
+interface SelectContentProps extends React$1.ComponentProps<typeof SelectPrimitive.Content>, Pick<SelectVariants, 'position'> {
+  maxHeight?: string | number;
+}
+type SelectLabelProps = React$1.ComponentProps<typeof SelectPrimitive.Label>;
+type SelectItemProps = React$1.ComponentProps<typeof SelectPrimitive.Item>;
+declare const Select: React$1.FC<SelectPrimitive.SelectProps> & {
+  Group: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+  Value: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+  Trigger: {
+    ({
+      className,
+      children,
+      error,
+      ...props
+    }: SelectTriggerProps): react_jsx_runtime46.JSX.Element;
+    displayName: string | undefined;
+  };
+  Content: {
+    ({
+      className,
+      children,
+      position,
+      sideOffset,
+      maxHeight,
+      ...props
+    }: SelectContentProps): react_jsx_runtime46.JSX.Element;
+    displayName: string | undefined;
+  };
+  Label: {
+    ({
+      className,
+      ...props
+    }: SelectLabelProps): react_jsx_runtime46.JSX.Element;
+    displayName: string | undefined;
+  };
+  Item: {
+    ({
+      className,
+      children,
+      ...props
+    }: SelectItemProps): react_jsx_runtime46.JSX.Element;
+    displayName: string | undefined;
+  };
+};
+//#endregion
+export { Select, SelectContentProps, SelectGroupProps, SelectItemProps, SelectLabelProps, SelectProps, SelectTriggerProps, SelectValueProps };
+//# sourceMappingURL=Select.d.cts.map

package/dist/components/Select/Select.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.cts","names":[],"sources":["../../../src/components/Select/Select.tsx"],"mappings":";;;;;;cAKM,UAAA,EAAU,OAAA,CAAA,EAAA,CAAA,eAAA,CAAA,WAAA;AAAA,KACJ,WAAA,GAAc,OAAA,CAAM,cAAA,QAAsB,UAAA;AAAA,cAEhD,WAAA,EAAW,OAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,gBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,KACL,gBAAA,GAAmB,OAAA,CAAM,cAAA,QAAsB,WAAA;AAAA,cAErD,WAAA,EAAW,OAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,gBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,KACL,gBAAA,GAAmB,OAAA,CAAM,cAAA,QAAsB,WAAA;AAAA,UAG1C,kBAAA,SAEb,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,GAC5C,IAAA,CAAK,cAAA;AAAA,UAqBQ,kBAAA,SAEb,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,GAC5C,IAAA,CAAK,cAAA;EACP,SAAA;AAAA;AAAA,KA8BU,gBAAA,GAAmB,OAAA,CAAM,cAAA,QAC5B,eAAA,CAAgB,KAAA;AAAA,KASb,eAAA,GAAkB,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,IAAA;AAAA,cAgC7D,MAAA,EAAM,OAAA,CAAA,EAAA,CAAA,eAAA,CAAA,WAAA;;;;;;;;;OA1FhB,kBAAA,GAAkB,mBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;;;OA4BlB,kBAAA,GAAkB,mBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;OAwByB,gBAAA,GAAgB,mBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;OAQP,eAAA,GAAe,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/Select/Select.d.mts

@@ -0,0 +1,60 @@
+import { SelectVariants } from "./Select.styles.mjs";
+import * as React$1 from "react";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+//#region src/components/Select/Select.d.ts
+declare const SelectRoot: React$1.FC<SelectPrimitive.SelectProps>;
+type SelectProps = React$1.ComponentProps<typeof SelectRoot>;
+declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+type SelectGroupProps = React$1.ComponentProps<typeof SelectGroup>;
+declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+type SelectValueProps = React$1.ComponentProps<typeof SelectValue>;
+interface SelectTriggerProps extends React$1.ComponentProps<typeof SelectPrimitive.Trigger>, Pick<SelectVariants, 'error'> {}
+interface SelectContentProps extends React$1.ComponentProps<typeof SelectPrimitive.Content>, Pick<SelectVariants, 'position'> {
+  maxHeight?: string | number;
+}
+type SelectLabelProps = React$1.ComponentProps<typeof SelectPrimitive.Label>;
+type SelectItemProps = React$1.ComponentProps<typeof SelectPrimitive.Item>;
+declare const Select: React$1.FC<SelectPrimitive.SelectProps> & {
+  Group: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+  Value: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+  Trigger: {
+    ({
+      className,
+      children,
+      error,
+      ...props
+    }: SelectTriggerProps): react_jsx_runtime20.JSX.Element;
+    displayName: string | undefined;
+  };
+  Content: {
+    ({
+      className,
+      children,
+      position,
+      sideOffset,
+      maxHeight,
+      ...props
+    }: SelectContentProps): react_jsx_runtime20.JSX.Element;
+    displayName: string | undefined;
+  };
+  Label: {
+    ({
+      className,
+      ...props
+    }: SelectLabelProps): react_jsx_runtime20.JSX.Element;
+    displayName: string | undefined;
+  };
+  Item: {
+    ({
+      className,
+      children,
+      ...props
+    }: SelectItemProps): react_jsx_runtime20.JSX.Element;
+    displayName: string | undefined;
+  };
+};
+//#endregion
+export { Select, SelectContentProps, SelectGroupProps, SelectItemProps, SelectLabelProps, SelectProps, SelectTriggerProps, SelectValueProps };
+//# sourceMappingURL=Select.d.mts.map

package/dist/components/Select/Select.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.mts","names":[],"sources":["../../../src/components/Select/Select.tsx"],"mappings":";;;;;;cAKM,UAAA,EAAU,OAAA,CAAA,EAAA,CAAA,eAAA,CAAA,WAAA;AAAA,KACJ,WAAA,GAAc,OAAA,CAAM,cAAA,QAAsB,UAAA;AAAA,cAEhD,WAAA,EAAW,OAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,gBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,KACL,gBAAA,GAAmB,OAAA,CAAM,cAAA,QAAsB,WAAA;AAAA,cAErD,WAAA,EAAW,OAAA,CAAA,yBAAA,CAAA,eAAA,CAAA,gBAAA,GAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,KACL,gBAAA,GAAmB,OAAA,CAAM,cAAA,QAAsB,WAAA;AAAA,UAG1C,kBAAA,SAEb,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,GAC5C,IAAA,CAAK,cAAA;AAAA,UAqBQ,kBAAA,SAEb,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,OAAA,GAC5C,IAAA,CAAK,cAAA;EACP,SAAA;AAAA;AAAA,KA8BU,gBAAA,GAAmB,OAAA,CAAM,cAAA,QAC5B,eAAA,CAAgB,KAAA;AAAA,KASb,eAAA,GAAkB,OAAA,CAAM,cAAA,QAAsB,eAAA,CAAgB,IAAA;AAAA,cAgC7D,MAAA,EAAM,OAAA,CAAA,EAAA,CAAA,eAAA,CAAA,WAAA;;;;;;;;;OA1FhB,kBAAA,GAAkB,mBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;;;OA4BlB,kBAAA,GAAkB,mBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;OAwByB,gBAAA,GAAgB,mBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;OAQP,eAAA,GAAe,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/Select/Select.mjs

@@ -0,0 +1,82 @@
+import { select } from "./Select.styles.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDown } from "@causw/icons";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+//#region src/components/Select/Select.tsx
+const SelectRoot = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = ({ className, children, error, ...props }) => {
+	const { trigger } = select({ error });
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
+		className: trigger({ className }),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ArrowDown, {})
+		})]
+	});
+};
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectContent = ({ className, children, position = "popper", sideOffset = 4, maxHeight = "15rem", ...props }) => {
+	const { content, viewport } = select({ position });
+	return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, {
+		className: content({ className }),
+		position,
+		sideOffset,
+		...props,
+		children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
+			className: viewport(),
+			style: { maxHeight },
+			children
+		})
+	}) });
+};
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = ({ className, ...props }) => {
+	const { label } = select();
+	return /* @__PURE__ */ jsx(SelectPrimitive.Label, {
+		className: label({ className }),
+		...props
+	});
+};
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = ({ className, children, ...props }) => {
+	const { item } = select();
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
+		className: item({ className }),
+		...props,
+		children: [/* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }), /* @__PURE__ */ jsx("span", {
+			className: "h-3.5 w-3.5 items-center justify-center",
+			children: /* @__PURE__ */ jsxs(SelectPrimitive.ItemIndicator, { children: [/* @__PURE__ */ jsx("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				width: "12",
+				height: "8",
+				viewBox: "0 0 12 8",
+				fill: "none",
+				children: /* @__PURE__ */ jsx("path", {
+					d: "M1 3.5L4.68421 7L11 1",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round"
+				})
+			}), " "] })
+		})]
+	});
+};
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const Select = Object.assign(SelectRoot, {
+	Group: SelectGroup,
+	Value: SelectValue,
+	Trigger: SelectTrigger,
+	Content: SelectContent,
+	Label: SelectLabel,
+	Item: SelectItem
+});
+
+//#endregion
+export { Select };
+//# sourceMappingURL=Select.mjs.map

package/dist/components/Select/Select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.mjs","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { ArrowDown } from '@causw/icons';\nimport { select, type SelectVariants } from './Select.styles';\n\nconst SelectRoot = SelectPrimitive.Root;\nexport type SelectProps = React.ComponentProps<typeof SelectRoot>;\n\nconst SelectGroup = SelectPrimitive.Group;\nexport type SelectGroupProps = React.ComponentProps<typeof SelectGroup>;\n\nconst SelectValue = SelectPrimitive.Value;\nexport type SelectValueProps = React.ComponentProps<typeof SelectValue>;\n\n// arrowIcon의 색은 props가 뚫리면 수정할 예정\nexport interface SelectTriggerProps\n  extends\n    React.ComponentProps<typeof SelectPrimitive.Trigger>,\n    Pick<SelectVariants, 'error'> {}\n\nconst SelectTrigger = ({\n  className,\n  children,\n  error,\n  ...props\n}: SelectTriggerProps) => {\n  const { trigger } = select({ error });\n\n  return (\n    <SelectPrimitive.Trigger className={trigger({ className })} {...props}>\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ArrowDown />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nexport interface SelectContentProps\n  extends\n    React.ComponentProps<typeof SelectPrimitive.Content>,\n    Pick<SelectVariants, 'position'> {\n  maxHeight?: string | number;\n}\n\nconst SelectContent = ({\n  className,\n  children,\n  position = 'popper',\n  sideOffset = 4,\n  maxHeight = '15rem', // Default max height\n  ...props\n}: SelectContentProps) => {\n  const { content, viewport } = select({ position });\n\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        className={content({ className })}\n        position={position}\n        sideOffset={sideOffset}\n        {...props}\n      >\n        <SelectPrimitive.Viewport className={viewport()} style={{ maxHeight }}>\n          {children}\n        </SelectPrimitive.Viewport>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n};\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nexport type SelectLabelProps = React.ComponentProps<\n  typeof SelectPrimitive.Label\n>;\n\nconst SelectLabel = ({ className, ...props }: SelectLabelProps) => {\n  const { label } = select();\n  return <SelectPrimitive.Label className={label({ className })} {...props} />;\n};\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nexport type SelectItemProps = React.ComponentProps<typeof SelectPrimitive.Item>;\n\nconst SelectItem = ({ className, children, ...props }: SelectItemProps) => {\n  const { item } = select();\n\n  return (\n    <SelectPrimitive.Item className={item({ className })} {...props}>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n      <span className=\"h-3.5 w-3.5 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"12\"\n            height=\"8\"\n            viewBox=\"0 0 12 8\"\n            fill=\"none\"\n          >\n            <path\n              d=\"M1 3.5L4.68421 7L11 1\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>{' '}\n        </SelectPrimitive.ItemIndicator>\n      </span>\n    </SelectPrimitive.Item>\n  );\n};\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nexport const Select = Object.assign(SelectRoot, {\n  Group: SelectGroup,\n  Value: SelectValue,\n  Trigger: SelectTrigger,\n  Content: SelectContent,\n  Label: SelectLabel,\n  Item: SelectItem,\n});\n"],"mappings":";;;;;;;AAKA,MAAM,aAAa,gBAAgB;AAGnC,MAAM,cAAc,gBAAgB;AAGpC,MAAM,cAAc,gBAAgB;AASpC,MAAM,iBAAiB,EACrB,WACA,UACA,OACA,GAAG,YACqB;CACxB,MAAM,EAAE,YAAY,OAAO,EAAE,OAAO,CAAC;AAErC,QACE,qBAAC,gBAAgB;EAAQ,WAAW,QAAQ,EAAE,WAAW,CAAC;EAAE,GAAI;aAC7D,UACD,oBAAC,gBAAgB;GAAK;aACpB,oBAAC,cAAY;IACQ;GACC;;AAG9B,cAAc,cAAc,gBAAgB,QAAQ;AASpD,MAAM,iBAAiB,EACrB,WACA,UACA,WAAW,UACX,aAAa,GACb,YAAY,SACZ,GAAG,YACqB;CACxB,MAAM,EAAE,SAAS,aAAa,OAAO,EAAE,UAAU,CAAC;AAElD,QACE,oBAAC,gBAAgB,oBACf,oBAAC,gBAAgB;EACf,WAAW,QAAQ,EAAE,WAAW,CAAC;EACvB;EACE;EACZ,GAAI;YAEJ,oBAAC,gBAAgB;GAAS,WAAW,UAAU;GAAE,OAAO,EAAE,WAAW;GAClE;IACwB;GACH,GACH;;AAG7B,cAAc,cAAc,gBAAgB,QAAQ;AAMpD,MAAM,eAAe,EAAE,WAAW,GAAG,YAA8B;CACjE,MAAM,EAAE,UAAU,QAAQ;AAC1B,QAAO,oBAAC,gBAAgB;EAAM,WAAW,MAAM,EAAE,WAAW,CAAC;EAAE,GAAI;GAAS;;AAE9E,YAAY,cAAc,gBAAgB,MAAM;AAIhD,MAAM,cAAc,EAAE,WAAW,UAAU,GAAG,YAA6B;CACzE,MAAM,EAAE,SAAS,QAAQ;AAEzB,QACE,qBAAC,gBAAgB;EAAK,WAAW,KAAK,EAAE,WAAW,CAAC;EAAE,GAAI;aACxD,oBAAC,gBAAgB,YAAU,WAAoC,EAC/D,oBAAC;GAAK,WAAU;aACd,qBAAC,gBAAgB,4BACf,oBAAC;IACC,OAAM;IACN,OAAM;IACN,QAAO;IACP,SAAQ;IACR,MAAK;cAEL,oBAAC;KACC,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;MACf;KACE,EAAC,OACuB;IAC3B;GACc;;AAG3B,WAAW,cAAc,gBAAgB,KAAK;AAE9C,MAAa,SAAS,OAAO,OAAO,YAAY;CAC9C,OAAO;CACP,OAAO;CACP,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACP,CAAC"}

package/dist/components/Select/Select.styles.cjs

@@ -0,0 +1,44 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let tailwind_variants = require("tailwind-variants");
+
+//#region src/components/Select/Select.styles.ts
+const select = (0, tailwind_variants.tv)({
+	slots: {
+		trigger: [
+			"flex items-center justify-between gap-2 rounded-md bg-white p-4 text-sm text-gray-700",
+			"placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+			"[&>span]:line-clamp-1"
+		],
+		content: [
+			"relative overflow-hidden rounded-md border border-gray-200 bg-white text-gray-950 shadow-md",
+			"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"
+		],
+		item: [
+			"relative flex w-full cursor-default select-none items-center justify-between gap-2",
+			"border-b border-gray-100 py-3 px-6 text-gray-500 outline-none typo-body-16-regular",
+			"last:border-0 focus:bg-gray-100 focus:text-gray-800",
+			"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"data-[state=checked]:font-semibold data-[state=checked]:text-gray-700"
+		],
+		label: "py-1.5 px-6 text-gray-800 typo-subtitle-16-bold",
+		viewport: "py-1"
+	},
+	variants: {
+		error: {
+			true: { trigger: "ring-2 ring-red-400 focus:ring-red-400 data-[state=open]:ring-red-400" },
+			false: { trigger: "focus:ring-2 focus:ring-gray-600 data-[state=open]:ring-2 data-[state=open]:ring-gray-600" }
+		},
+		position: {
+			popper: { viewport: "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]" },
+			"item-aligned": {}
+		}
+	},
+	defaultVariants: { error: false }
+});
+
+//#endregion
+exports.select = select;

package/dist/components/Select/Select.styles.d.cts

@@ -0,0 +1,72 @@
+import * as tailwind_variants13 from "tailwind-variants";
+import { VariantProps } from "tailwind-variants";
+
+//#region src/components/Select/Select.styles.d.ts
+declare const select: tailwind_variants13.TVReturnType<{
+  error: {
+    true: {
+      trigger: string;
+    };
+    false: {
+      trigger: string;
+    };
+  };
+  position: {
+    popper: {
+      viewport: string;
+    };
+    'item-aligned': {};
+  };
+}, {
+  trigger: string[];
+  content: string[];
+  item: string[];
+  label: string;
+  viewport: string;
+}, undefined, {
+  error: {
+    true: {
+      trigger: string;
+    };
+    false: {
+      trigger: string;
+    };
+  };
+  position: {
+    popper: {
+      viewport: string;
+    };
+    'item-aligned': {};
+  };
+}, {
+  trigger: string[];
+  content: string[];
+  item: string[];
+  label: string;
+  viewport: string;
+}, tailwind_variants13.TVReturnType<{
+  error: {
+    true: {
+      trigger: string;
+    };
+    false: {
+      trigger: string;
+    };
+  };
+  position: {
+    popper: {
+      viewport: string;
+    };
+    'item-aligned': {};
+  };
+}, {
+  trigger: string[];
+  content: string[];
+  item: string[];
+  label: string;
+  viewport: string;
+}, undefined, unknown, unknown, undefined>>;
+type SelectVariants = VariantProps<typeof select>;
+//#endregion
+export { SelectVariants };
+//# sourceMappingURL=Select.styles.d.cts.map

package/dist/components/Select/Select.styles.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.d.cts","names":[],"sources":["../../../src/components/Select/Select.styles.ts"],"mappings":";;;;cAEa,MAAA,EA+CX,mBAAA,CA/CiB,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CjB,mBAAA,CAAA,YAAA;;;;;;;;;;;;;;;;;;;;;;KAEU,cAAA,GAAiB,YAAA,QAAoB,MAAA"}