@causw/core 0.0.9 → 0.0.11

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

@@ -0,0 +1,66 @@
+import React from "react";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
+
+//#region src/components/RatioChart/RatioChart.d.ts
+interface RatioChartRootSingleProps extends Omit<React.ComponentProps<'div'>, 'defaultValue'> {
+  mode?: 'single';
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+}
+interface RatioChartRootMultipleProps extends Omit<React.ComponentProps<'div'>, 'defaultValue'> {
+  mode: 'multiple';
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  disabled?: boolean;
+}
+type RatioChartRootProps = RatioChartRootSingleProps | RatioChartRootMultipleProps;
+interface RatioChartItemProps extends Omit<React.ComponentProps<'button'>, 'value'> {
+  value: string;
+  label: string;
+  count?: number;
+  ratio?: number;
+  disabled?: boolean;
+}
+interface RatioChartFooterProps extends React.ComponentProps<'div'> {
+  endDate?: Date;
+  endTime?: string;
+  hideParticipantCount?: boolean;
+}
+declare const RatioChart: {
+  (props: RatioChartRootProps): react_jsx_runtime25.JSX.Element;
+  displayName: string;
+} & {
+  Root: {
+    (props: RatioChartRootProps): react_jsx_runtime25.JSX.Element;
+    displayName: string;
+  };
+  Item: {
+    ({
+      value,
+      label,
+      count,
+      ratio,
+      disabled: itemDisabled,
+      className,
+      ...props
+    }: RatioChartItemProps): react_jsx_runtime25.JSX.Element;
+    displayName: string;
+  };
+  Footer: {
+    ({
+      endDate,
+      endTime,
+      hideParticipantCount,
+      className,
+      children,
+      ...props
+    }: RatioChartFooterProps): react_jsx_runtime25.JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion
+export { RatioChart, RatioChartFooterProps, RatioChartItemProps, RatioChartRootProps };
+//# sourceMappingURL=RatioChart.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RatioChart.d.mts","names":[],"sources":["../../../src/components/RatioChart/RatioChart.tsx"],"mappings":";;;;UAUU,yBAAA,SAAkC,IAAA,CAC1C,KAAA,CAAM,cAAA;EAGN,IAAA;EACA,KAAA;EACA,YAAA;EACA,aAAA,IAAiB,KAAA;EACjB,QAAA;AAAA;AAAA,UAIQ,2BAAA,SAAoC,IAAA,CAC5C,KAAA,CAAM,cAAA;EAGN,IAAA;EACA,KAAA;EACA,YAAA;EACA,aAAA,IAAiB,KAAA;EACjB,QAAA;AAAA;AAAA,KAGU,mBAAA,GACR,yBAAA,GACA,2BAAA;AAAA,UAmIa,mBAAA,SAA4B,IAAA,CAC3C,KAAA,CAAM,cAAA;EAGN,KAAA;EACA,KAAA;EACA,KAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,UAuGe,qBAAA,SAA8B,KAAA,CAAM,cAAA;EACnD,OAAA,GAAU,IAAA;EACV,OAAA;EACA,oBAAA;AAAA;AAAA,cA8DW,UAAA;EAAA,QAjTkB,mBAAA,GAAmB,mBAAA,CAAA,GAAA,CAAA,OAAA;;;;YAAnB,mBAAA,GAAmB,mBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;;;;OAoJ/C,mBAAA,GAAmB,mBAAA,CAAA,GAAA,CAAA,OAAA;;;;;;;;;;;OAiInB,qBAAA,GAAqB,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/RatioChart/RatioChart.mjs

@@ -0,0 +1,181 @@
+import { RatioChartContext, useRatioChartContext } from "../../hooks/ratioChart/useRatioChartContext.mjs";
+import { mergeStyles } from "../../utils/mergeStyles/mergeStyles.mjs";
+import { ratioChart } from "./RatioChart.styles.mjs";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/RatioChart/RatioChart.tsx
+const RatioChartRoot = (props) => {
+	const { mode = "single", value: valueProp, defaultValue, onValueChange, disabled, children, className, ...rest } = props;
+	const [internalSingleValue, setInternalSingleValue] = useState(() => mode === "single" && typeof defaultValue === "string" ? defaultValue : "");
+	const [internalMultipleValue, setInternalMultipleValue] = useState(() => mode === "multiple" && Array.isArray(defaultValue) ? defaultValue : []);
+	const [counts, setCounts] = useState(/* @__PURE__ */ new Map());
+	const isControlled = valueProp !== void 0;
+	const currentValue = mode === "single" ? isControlled ? valueProp : internalSingleValue : isControlled ? valueProp : internalMultipleValue;
+	const isSelected = useCallback((itemValue) => {
+		if (mode === "single") return currentValue === itemValue;
+		return currentValue.includes(itemValue);
+	}, [mode, currentValue]);
+	const onSelect = useCallback((itemValue) => {
+		if (disabled) return;
+		if (mode === "single") {
+			if (!isControlled) setInternalSingleValue(itemValue);
+			onValueChange?.(itemValue);
+		} else {
+			const currentArray = currentValue;
+			const newValue = currentArray.includes(itemValue) ? currentArray.filter((v) => v !== itemValue) : [...currentArray, itemValue];
+			if (!isControlled) setInternalMultipleValue(newValue);
+			onValueChange?.(newValue);
+		}
+	}, [
+		mode,
+		disabled,
+		isControlled,
+		currentValue,
+		onValueChange
+	]);
+	const registerCount = useCallback((itemValue, count) => {
+		setCounts((prev) => new Map(prev).set(itemValue, count));
+	}, []);
+	const unregisterCount = useCallback((itemValue) => {
+		setCounts((prev) => {
+			const next = new Map(prev);
+			next.delete(itemValue);
+			return next;
+		});
+	}, []);
+	const totalCount = useMemo(() => {
+		let total = 0;
+		counts.forEach((c) => total += c);
+		return total;
+	}, [counts]);
+	const getRatio = useCallback((itemValue) => {
+		const count = counts.get(itemValue) ?? 0;
+		return totalCount > 0 ? Math.round(count / totalCount * 100) : 0;
+	}, [counts, totalCount]);
+	const styles = ratioChart({ disabled });
+	return /* @__PURE__ */ jsx(RatioChartContext.Provider, {
+		value: {
+			value: currentValue,
+			mode,
+			disabled,
+			onSelect,
+			isSelected,
+			counts,
+			registerCount,
+			unregisterCount,
+			totalCount,
+			getRatio
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			role: "group",
+			className: mergeStyles(styles.root(), className),
+			...rest,
+			children
+		})
+	});
+};
+const RatioChartItem = ({ value, label, count, ratio, disabled: itemDisabled, className, ...props }) => {
+	const { disabled: rootDisabled, onSelect, isSelected, registerCount, unregisterCount, getRatio } = useRatioChartContext();
+	const disabled = itemDisabled || rootDisabled;
+	const selected = isSelected(value);
+	useEffect(() => {
+		if (count !== void 0) {
+			registerCount(value, count);
+			return () => unregisterCount(value);
+		}
+	}, [
+		count,
+		value,
+		registerCount,
+		unregisterCount
+	]);
+	const handleClick = () => {
+		if (!disabled) onSelect(value);
+	};
+	const handleKeyDown = (e) => {
+		if ((e.key === "Enter" || e.key === " ") && !disabled) {
+			e.preventDefault();
+			onSelect(value);
+		}
+	};
+	const displayRatio = count !== void 0 ? getRatio(value) : ratio ?? 0;
+	const showRatio = count !== void 0 || ratio !== void 0;
+	const styles = ratioChart({
+		disabled,
+		selected
+	});
+	const lightContent = ratioChart({ contentVariant: "light" });
+	const darkContent = ratioChart({ contentVariant: "dark" });
+	const contentElement = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: styles.label(),
+		children: label
+	}), showRatio && /* @__PURE__ */ jsxs("span", {
+		className: styles.ratio(),
+		children: [displayRatio, "%"]
+	})] });
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "option",
+		"aria-selected": selected,
+		disabled,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		className: mergeStyles(styles.item(), className),
+		style: { minWidth: 0 },
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: styles.fill(),
+			style: { width: `${displayRatio}%` }
+		}), selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: lightContent.content(),
+			style: { clipPath: `inset(0 ${100 - displayRatio}% 0 0)` },
+			children: contentElement
+		}), /* @__PURE__ */ jsx("span", {
+			className: darkContent.content(),
+			style: { clipPath: `inset(0 0 0 ${displayRatio}%)` },
+			children: contentElement
+		})] }) : /* @__PURE__ */ jsx("span", {
+			className: darkContent.content(),
+			children: contentElement
+		})]
+	});
+};
+function formatTimeRemaining(endDate) {
+	const now = /* @__PURE__ */ new Date();
+	const diff = endDate.getTime() - now.getTime();
+	if (diff <= 0) return "종료됨";
+	const totalHours = diff / (1e3 * 60 * 60);
+	const totalMinutes = diff / (1e3 * 60);
+	if (totalHours >= 24) return `${Math.round(totalHours / 24)}일 후 종료`;
+	if (totalHours >= 1) return `${Math.floor(totalHours)}시간 후 종료`;
+	return `${Math.floor(totalMinutes)}분 후 종료`;
+}
+const RatioChartFooter = ({ endDate, endTime, hideParticipantCount, className, children, ...props }) => {
+	const { totalCount } = useRatioChartContext();
+	const displayEndTime = endDate ? formatTimeRemaining(endDate) : endTime;
+	const styles = ratioChart();
+	return /* @__PURE__ */ jsx("div", {
+		className: mergeStyles(styles.footer(), className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [!hideParticipantCount && /* @__PURE__ */ jsxs("span", {
+			className: styles.footerText(),
+			children: [totalCount, "명 참여"]
+		}), displayEndTime && /* @__PURE__ */ jsx("span", {
+			className: styles.footerText(),
+			children: displayEndTime
+		})] })
+	});
+};
+RatioChartRoot.displayName = "RatioChart.Root";
+RatioChartItem.displayName = "RatioChart.Item";
+RatioChartFooter.displayName = "RatioChart.Footer";
+const RatioChart = Object.assign(RatioChartRoot, {
+	Root: RatioChartRoot,
+	Item: RatioChartItem,
+	Footer: RatioChartFooter
+});
+
+//#endregion
+export { RatioChart };
+//# sourceMappingURL=RatioChart.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RatioChart.mjs","names":[],"sources":["../../../src/components/RatioChart/RatioChart.tsx"],"sourcesContent":["import React, { useState, useCallback, useMemo, useEffect } from 'react';\nimport { mergeStyles } from '../../utils';\nimport { RatioChartContext } from '../../hooks/ratioChart/useRatioChartContext';\nimport {\n  useRatioChartContext,\n  type RatioChartSelectionMode,\n} from '../../hooks/ratioChart';\nimport { ratioChart } from './RatioChart.styles';\n\n// Root Props - 단일 선택\ninterface RatioChartRootSingleProps extends Omit<\n  React.ComponentProps<'div'>,\n  'defaultValue'\n> {\n  mode?: 'single';\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  disabled?: boolean;\n}\n\n// Root Props - 다중 선택\ninterface RatioChartRootMultipleProps extends Omit<\n  React.ComponentProps<'div'>,\n  'defaultValue'\n> {\n  mode: 'multiple';\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  disabled?: boolean;\n}\n\nexport type RatioChartRootProps =\n  | RatioChartRootSingleProps\n  | RatioChartRootMultipleProps;\n\nconst RatioChartRoot = (props: RatioChartRootProps) => {\n  const {\n    mode = 'single',\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    disabled,\n    children,\n    className,\n    ...rest\n  } = props;\n\n  // 단일 선택 내부 상태\n  const [internalSingleValue, setInternalSingleValue] = useState<string>(() =>\n    mode === 'single' && typeof defaultValue === 'string' ? defaultValue : '',\n  );\n\n  // 다중 선택 내부 상태\n  const [internalMultipleValue, setInternalMultipleValue] = useState<string[]>(\n    () =>\n      mode === 'multiple' && Array.isArray(defaultValue) ? defaultValue : [],\n  );\n\n  // count 기반 자동 비율 계산을 위한 state\n  const [counts, setCounts] = useState<Map<string, number>>(new Map());\n\n  const isControlled = valueProp !== undefined;\n\n  const currentValue =\n    mode === 'single'\n      ? isControlled\n        ? (valueProp as string)\n        : internalSingleValue\n      : isControlled\n        ? (valueProp as string[])\n        : internalMultipleValue;\n\n  const isSelected = useCallback(\n    (itemValue: string) => {\n      if (mode === 'single') {\n        return currentValue === itemValue;\n      }\n      return (currentValue as string[]).includes(itemValue);\n    },\n    [mode, currentValue],\n  );\n\n  const onSelect = useCallback(\n    (itemValue: string) => {\n      if (disabled) return;\n\n      if (mode === 'single') {\n        if (!isControlled) {\n          setInternalSingleValue(itemValue);\n        }\n        (onValueChange as ((value: string) => void) | undefined)?.(itemValue);\n      } else {\n        const currentArray = currentValue as string[];\n        const newValue = currentArray.includes(itemValue)\n          ? currentArray.filter((v) => v !== itemValue)\n          : [...currentArray, itemValue];\n\n        if (!isControlled) {\n          setInternalMultipleValue(newValue);\n        }\n        (onValueChange as ((value: string[]) => void) | undefined)?.(newValue);\n      }\n    },\n    [mode, disabled, isControlled, currentValue, onValueChange],\n  );\n\n  // count 등록/해제 함수\n  const registerCount = useCallback((itemValue: string, count: number) => {\n    setCounts((prev) => new Map(prev).set(itemValue, count));\n  }, []);\n\n  const unregisterCount = useCallback((itemValue: string) => {\n    setCounts((prev) => {\n      const next = new Map(prev);\n      next.delete(itemValue);\n      return next;\n    });\n  }, []);\n\n  // 전체 count 합계\n  const totalCount = useMemo(() => {\n    let total = 0;\n    counts.forEach((c) => (total += c));\n    return total;\n  }, [counts]);\n\n  // 항목의 비율 계산\n  const getRatio = useCallback(\n    (itemValue: string) => {\n      const count = counts.get(itemValue) ?? 0;\n      return totalCount > 0 ? Math.round((count / totalCount) * 100) : 0;\n    },\n    [counts, totalCount],\n  );\n\n  const styles = ratioChart({ disabled });\n\n  return (\n    <RatioChartContext.Provider\n      value={{\n        value: currentValue,\n        mode: mode as RatioChartSelectionMode,\n        disabled,\n        onSelect,\n        isSelected,\n        counts,\n        registerCount,\n        unregisterCount,\n        totalCount,\n        getRatio,\n      }}\n    >\n      <div\n        role=\"group\"\n        className={mergeStyles(styles.root(), className)}\n        {...rest}\n      >\n        {children}\n      </div>\n    </RatioChartContext.Provider>\n  );\n};\n\n// Item Props\nexport interface RatioChartItemProps extends Omit<\n  React.ComponentProps<'button'>,\n  'value'\n> {\n  value: string;\n  label: string;\n  count?: number; // count만 전달하면 자동으로 비율 계산\n  ratio?: number; // 0-100, 직접 비율 지정 (count사용 시 count 우선)\n  disabled?: boolean;\n}\n\nconst RatioChartItem = ({\n  value,\n  label,\n  count,\n  ratio,\n  disabled: itemDisabled,\n  className,\n  ...props\n}: RatioChartItemProps) => {\n  const {\n    disabled: rootDisabled,\n    onSelect,\n    isSelected,\n    registerCount,\n    unregisterCount,\n    getRatio,\n  } = useRatioChartContext();\n  const disabled = itemDisabled || rootDisabled;\n  const selected = isSelected(value);\n\n  // count가 있으면 등록\n  useEffect(() => {\n    if (count !== undefined) {\n      registerCount(value, count);\n      return () => unregisterCount(value);\n    }\n  }, [count, value, registerCount, unregisterCount]);\n\n  const handleClick = () => {\n    if (!disabled) {\n      onSelect(value);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n    if ((e.key === 'Enter' || e.key === ' ') && !disabled) {\n      e.preventDefault();\n      onSelect(value);\n    }\n  };\n\n  // count가 있으면 자동 계산, 없으면 ratio prop 사용, 둘 다 없으면 0\n  const displayRatio = count !== undefined ? getRatio(value) : (ratio ?? 0);\n  // ratio 표시 여부: count가 있거나 ratio가 명시적으로 지정된 경우\n  const showRatio = count !== undefined || ratio !== undefined;\n\n  const styles = ratioChart({ disabled, selected });\n  const lightContent = ratioChart({ contentVariant: 'light' });\n  const darkContent = ratioChart({ contentVariant: 'dark' });\n\n  // 텍스트 컨텐츠\n  const contentElement = (\n    <>\n      <span className={styles.label()}>{label}</span>\n      {showRatio && <span className={styles.ratio()}>{displayRatio}%</span>}\n    </>\n  );\n\n  return (\n    <button\n      type=\"button\"\n      role=\"option\"\n      aria-selected={selected}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      className={mergeStyles(styles.item(), className)}\n      style={{ minWidth: 0 }}\n      {...props}\n    >\n      {/* 비율 배경 */}\n      <span className={styles.fill()} style={{ width: `${displayRatio}%` }} />\n\n      {selected ? (\n        <>\n          {/* selected: 흰색 텍스트 (fill 영역에서만 보임) */}\n          <span\n            className={lightContent.content()}\n            style={{ clipPath: `inset(0 ${100 - displayRatio}% 0 0)` }}\n          >\n            {contentElement}\n          </span>\n\n          {/* selected: 검은색 텍스트 (fill 밖에서만 보임) */}\n          <span\n            className={darkContent.content()}\n            style={{ clipPath: `inset(0 0 0 ${displayRatio}%)` }}\n          >\n            {contentElement}\n          </span>\n        </>\n      ) : (\n        /* unselected: 검은색 텍스트 하나만 */\n        <span className={darkContent.content()}>{contentElement}</span>\n      )}\n    </button>\n  );\n};\n\n// Footer Props\nexport interface RatioChartFooterProps extends React.ComponentProps<'div'> {\n  endDate?: Date; // 종료 시간 자동 계산\n  endTime?: string; // 직접 문자열 지정\n  hideParticipantCount?: boolean;\n}\n\n// 남은 시간 계산\nfunction formatTimeRemaining(endDate: Date): string {\n  const now = new Date();\n  const diff = endDate.getTime() - now.getTime();\n\n  if (diff <= 0) return '종료됨';\n\n  const totalHours = diff / (1000 * 60 * 60);\n  const totalMinutes = diff / (1000 * 60);\n\n  // 24시간 이상이면 일 단위 (12시간 기준 반올림/내림)\n  if (totalHours >= 24) {\n    return `${Math.round(totalHours / 24)}일 후 종료`;\n  }\n\n  // 1시간 이상이면 시간 단위 (내림)\n  if (totalHours >= 1) {\n    return `${Math.floor(totalHours)}시간 후 종료`;\n  }\n\n  // 그 외 분 단위 (내림)\n  return `${Math.floor(totalMinutes)}분 후 종료`;\n}\n\nconst RatioChartFooter = ({\n  endDate,\n  endTime,\n  hideParticipantCount,\n  className,\n  children,\n  ...props\n}: RatioChartFooterProps) => {\n  const { totalCount } = useRatioChartContext();\n\n  // endDate가 있으면 자동 계산, 없으면 endTime 사용\n  const displayEndTime = endDate ? formatTimeRemaining(endDate) : endTime;\n\n  const styles = ratioChart();\n\n  return (\n    <div className={mergeStyles(styles.footer(), className)} {...props}>\n      {children ?? (\n        <>\n          {!hideParticipantCount && (\n            <span className={styles.footerText()}>{totalCount}명 참여</span>\n          )}\n          {displayEndTime && (\n            <span className={styles.footerText()}>{displayEndTime}</span>\n          )}\n        </>\n      )}\n    </div>\n  );\n};\n\nRatioChartRoot.displayName = 'RatioChart.Root';\nRatioChartItem.displayName = 'RatioChart.Item';\nRatioChartFooter.displayName = 'RatioChart.Footer';\n\nexport const RatioChart = Object.assign(RatioChartRoot, {\n  Root: RatioChartRoot,\n  Item: RatioChartItem,\n  Footer: RatioChartFooter,\n});\n"],"mappings":"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"}

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

@@ -0,0 +1,42 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let tailwind_variants = require("tailwind-variants");
+
+//#region src/components/RatioChart/RatioChart.styles.ts
+const ratioChart = (0, tailwind_variants.tv)({
+	slots: {
+		root: "flex flex-col gap-[0.75rem] pb-[0.5rem] min-w-[20rem] max-h-[16.25rem] overflow-y-auto",
+		item: "relative flex items-center px-[1rem] h-[3.5rem] flex-shrink-0 rounded-[0.75rem] border border-gray-200 overflow-hidden transition-all duration-200",
+		fill: "absolute inset-y-0 left-0 rounded-l-[0.75rem] transition-all duration-300",
+		content: "absolute inset-0 z-10 flex items-center justify-between px-[1rem] gap-[0.5rem] typo-body1-md-point",
+		label: "truncate",
+		ratio: "flex-shrink-0",
+		footer: "flex items-end justify-between px-[0.25rem]",
+		footerText: "typo-body-14 text-gray-400"
+	},
+	variants: {
+		disabled: {
+			true: {
+				root: "opacity-50 cursor-not-allowed",
+				item: "cursor-not-allowed"
+			},
+			false: { item: "cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-inset" }
+		},
+		selected: {
+			true: { fill: "bg-gray-900" },
+			false: { fill: "bg-gray-200" }
+		},
+		contentVariant: {
+			light: { content: "text-white font-bold" },
+			dark: { content: "text-gray-800 font-medium" }
+		}
+	},
+	defaultVariants: {
+		disabled: false,
+		selected: false,
+		contentVariant: "dark"
+	}
+});
+const ratioChartKeys = ratioChart.variantKeys;
+
+//#endregion
+exports.ratioChart = ratioChart;

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

@@ -0,0 +1,42 @@
+import { tv } from "tailwind-variants";
+
+//#region src/components/RatioChart/RatioChart.styles.ts
+const ratioChart = tv({
+	slots: {
+		root: "flex flex-col gap-[0.75rem] pb-[0.5rem] min-w-[20rem] max-h-[16.25rem] overflow-y-auto",
+		item: "relative flex items-center px-[1rem] h-[3.5rem] flex-shrink-0 rounded-[0.75rem] border border-gray-200 overflow-hidden transition-all duration-200",
+		fill: "absolute inset-y-0 left-0 rounded-l-[0.75rem] transition-all duration-300",
+		content: "absolute inset-0 z-10 flex items-center justify-between px-[1rem] gap-[0.5rem] typo-body1-md-point",
+		label: "truncate",
+		ratio: "flex-shrink-0",
+		footer: "flex items-end justify-between px-[0.25rem]",
+		footerText: "typo-body-14 text-gray-400"
+	},
+	variants: {
+		disabled: {
+			true: {
+				root: "opacity-50 cursor-not-allowed",
+				item: "cursor-not-allowed"
+			},
+			false: { item: "cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-inset" }
+		},
+		selected: {
+			true: { fill: "bg-gray-900" },
+			false: { fill: "bg-gray-200" }
+		},
+		contentVariant: {
+			light: { content: "text-white font-bold" },
+			dark: { content: "text-gray-800 font-medium" }
+		}
+	},
+	defaultVariants: {
+		disabled: false,
+		selected: false,
+		contentVariant: "dark"
+	}
+});
+const ratioChartKeys = ratioChart.variantKeys;
+
+//#endregion
+export { ratioChart };
+//# sourceMappingURL=RatioChart.styles.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RatioChart.styles.mjs","names":[],"sources":["../../../src/components/RatioChart/RatioChart.styles.ts"],"sourcesContent":["import { tv, type VariantProps } from 'tailwind-variants';\n\nexport const ratioChart = tv({\n  slots: {\n    root: 'flex flex-col gap-[0.75rem] pb-[0.5rem] min-w-[20rem] max-h-[16.25rem] overflow-y-auto', // 컨테이너 (5개부터 스크롤)\n    item: 'relative flex items-center px-[1rem] h-[3.5rem] flex-shrink-0 rounded-[0.75rem] border border-gray-200 overflow-hidden transition-all duration-200', // 개별 항목 버튼 (크기 고정)\n    fill: 'absolute inset-y-0 left-0 rounded-l-[0.75rem] transition-all duration-300', // 비율 배경\n    content:\n      'absolute inset-0 z-10 flex items-center justify-between px-[1rem] gap-[0.5rem] typo-body1-md-point', // 텍스트 오버레이\n    label: 'truncate', // 라벨 텍스트\n    ratio: 'flex-shrink-0', // 퍼센트 텍스트\n    footer: 'flex items-end justify-between px-[0.25rem]', // 푸터 컨테이너\n    footerText: 'typo-body-14 text-gray-400', // 푸터 텍스트\n  },\n  variants: {\n    disabled: {\n      true: {\n        root: 'opacity-50 cursor-not-allowed',\n        item: 'cursor-not-allowed',\n      },\n      false: {\n        item: 'cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-inset',\n      },\n    },\n    selected: {\n      true: {\n        fill: 'bg-gray-900',\n      },\n      false: {\n        fill: 'bg-gray-200',\n      },\n    },\n    contentVariant: {\n      light: {\n        content: 'text-white font-bold',\n      },\n      dark: {\n        content: 'text-gray-800 font-medium',\n      },\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n    selected: false,\n    contentVariant: 'dark',\n  },\n});\n\nexport type RatioChartVariants = VariantProps<typeof ratioChart>;\nexport const ratioChartKeys = ratioChart.variantKeys;\n"],"mappings":";;;AAEA,MAAa,aAAa,GAAG;CAC3B,OAAO;EACL,MAAM;EACN,MAAM;EACN,MAAM;EACN,SACE;EACF,OAAO;EACP,OAAO;EACP,QAAQ;EACR,YAAY;EACb;CACD,UAAU;EACR,UAAU;GACR,MAAM;IACJ,MAAM;IACN,MAAM;IACP;GACD,OAAO,EACL,MAAM,+GACP;GACF;EACD,UAAU;GACR,MAAM,EACJ,MAAM,eACP;GACD,OAAO,EACL,MAAM,eACP;GACF;EACD,gBAAgB;GACd,OAAO,EACL,SAAS,wBACV;GACD,MAAM,EACJ,SAAS,6BACV;GACF;EACF;CACD,iBAAiB;EACf,UAAU;EACV,UAAU;EACV,gBAAgB;EACjB;CACF,CAAC;AAGF,MAAa,iBAAiB,WAAW"}

package/dist/components/RatioChart/RatioChartEditor.cjs

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

package/dist/components/RatioChart/RatioChartEditor.d.cts

@@ -0,0 +1,44 @@
+import React from "react";
+import * as react_jsx_runtime35 from "react/jsx-runtime";
+
+//#region src/components/RatioChart/RatioChartEditor.d.ts
+interface RatioChartEditorOption {
+  id: string;
+  value: string;
+}
+interface RatioChartEditorProps extends Omit<React.ComponentProps<'div'>, 'onChange'> {
+  /** 옵션 목록 */
+  options?: RatioChartEditorOption[];
+  /** 옵션 변경 콜백 */
+  onOptionsChange?: (options: RatioChartEditorOption[]) => void;
+  /** 복수 선택 허용 여부 */
+  allowMultiple?: boolean;
+  /** 복수 선택 변경 콜백 */
+  onAllowMultipleChange?: (allowMultiple: boolean) => void;
+  /** 투표 삭제 콜백 */
+  onDelete?: () => void;
+  /** 최소 옵션 수 (기본: 2) */
+  minOptions?: number;
+  /** 플레이스홀더 텍스트 */
+  placeholder?: string;
+  /** 비활성화 */
+  disabled?: boolean;
+}
+declare const RatioChartEditor: {
+  ({
+    options: optionsProp,
+    onOptionsChange,
+    allowMultiple: allowMultipleProp,
+    onAllowMultipleChange,
+    onDelete,
+    minOptions,
+    placeholder,
+    disabled,
+    className,
+    ...props
+  }: RatioChartEditorProps): react_jsx_runtime35.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { RatioChartEditor, RatioChartEditorOption, RatioChartEditorProps };
+//# sourceMappingURL=RatioChartEditor.d.cts.map

package/dist/components/RatioChart/RatioChartEditor.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatioChartEditor.d.cts","names":[],"sources":["../../../src/components/RatioChart/RatioChartEditor.tsx"],"mappings":";;;;UAMiB,sBAAA;EACf,EAAA;EACA,KAAA;AAAA;AAAA,UAGe,qBAAA,SAA8B,IAAA,CAC7C,KAAA,CAAM,cAAA;;EAIN,OAAA,GAAU,sBAAA;EARL;EAUL,eAAA,IAAmB,OAAA,EAAS,sBAAA;EAPS;EASrC,aAAA;EARA;EAUA,qBAAA,IAAyB,aAAA;EAJG;EAM5B,QAAA;EAbiD;EAejD,UAAA;EAf6C;EAiB7C,WAAA;EAhBM;EAkBN,QAAA;AAAA;AAAA,cAGW,gBAAA;EAAA;;;;;;;;;;;KAWV,qBAAA,GAAqB,mBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,44 @@
+import React from "react";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
+
+//#region src/components/RatioChart/RatioChartEditor.d.ts
+interface RatioChartEditorOption {
+  id: string;
+  value: string;
+}
+interface RatioChartEditorProps extends Omit<React.ComponentProps<'div'>, 'onChange'> {
+  /** 옵션 목록 */
+  options?: RatioChartEditorOption[];
+  /** 옵션 변경 콜백 */
+  onOptionsChange?: (options: RatioChartEditorOption[]) => void;
+  /** 복수 선택 허용 여부 */
+  allowMultiple?: boolean;
+  /** 복수 선택 변경 콜백 */
+  onAllowMultipleChange?: (allowMultiple: boolean) => void;
+  /** 투표 삭제 콜백 */
+  onDelete?: () => void;
+  /** 최소 옵션 수 (기본: 2) */
+  minOptions?: number;
+  /** 플레이스홀더 텍스트 */
+  placeholder?: string;
+  /** 비활성화 */
+  disabled?: boolean;
+}
+declare const RatioChartEditor: {
+  ({
+    options: optionsProp,
+    onOptionsChange,
+    allowMultiple: allowMultipleProp,
+    onAllowMultipleChange,
+    onDelete,
+    minOptions,
+    placeholder,
+    disabled,
+    className,
+    ...props
+  }: RatioChartEditorProps): react_jsx_runtime24.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { RatioChartEditor, RatioChartEditorOption, RatioChartEditorProps };
+//# sourceMappingURL=RatioChartEditor.d.mts.map

package/dist/components/RatioChart/RatioChartEditor.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RatioChartEditor.d.mts","names":[],"sources":["../../../src/components/RatioChart/RatioChartEditor.tsx"],"mappings":";;;;UAMiB,sBAAA;EACf,EAAA;EACA,KAAA;AAAA;AAAA,UAGe,qBAAA,SAA8B,IAAA,CAC7C,KAAA,CAAM,cAAA;;EAIN,OAAA,GAAU,sBAAA;EARL;EAUL,eAAA,IAAmB,OAAA,EAAS,sBAAA;EAPS;EASrC,aAAA;EARA;EAUA,qBAAA,IAAyB,aAAA;EAJG;EAM5B,QAAA;EAbiD;EAejD,UAAA;EAf6C;EAiB7C,WAAA;EAhBM;EAkBN,QAAA;AAAA;AAAA,cAGW,gBAAA;EAAA;;;;;;;;;;;KAWV,qBAAA,GAAqB,mBAAA,CAAA,GAAA,CAAA,OAAA"}