@causw/core 0.0.9 → 0.0.11

package/dist/components/Radio/Radio.cjs

@@ -0,0 +1,97 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_Text = require('../Text/Text.cjs');
+const require_Primitive = require('../Primitive/Primitive.cjs');
+const require_Radio_styles = require('./Radio.styles.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Radio/Radio.tsx
+const RadioGroupContext = (0, react.createContext)(null);
+const useRadioGroupContext = () => {
+	return (0, react.useContext)(RadioGroupContext);
+};
+const RadioGroup = ({ name, value, defaultValue, onValueChange, className, children, ...props }) => {
+	const [internalValue, setInternalValue] = react.default.useState(defaultValue);
+	const currentValue = value ?? internalValue;
+	const { group } = require_Radio_styles.radio();
+	const handleChange = (newValue) => {
+		if (value === void 0) setInternalValue(newValue);
+		onValueChange?.(newValue);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioGroupContext.Provider, {
+		value: {
+			name,
+			value: currentValue,
+			onChange: handleChange
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Primitive.Primitive.div, {
+			role: "radiogroup",
+			className: group({ className }),
+			...props,
+			children
+		})
+	});
+};
+const RadioIcon = ({ checked, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "20",
+	height: "20",
+	viewBox: "0 0 20 20",
+	fill: "none",
+	className,
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+		cx: "10",
+		cy: "10",
+		r: checked ? 7 : 7.5,
+		stroke: "currentColor",
+		strokeWidth: checked ? 6 : 5,
+		className: "transition-all duration-150 ease-in-out"
+	})
+});
+const Radio = ({ value, children, className, checked: checkedProp, onChange, ...props }) => {
+	const group = useRadioGroupContext();
+	const isChecked = group ? group.value === value : checkedProp;
+	const name = group?.name ?? props.name;
+	const handleChange = (e) => {
+		group?.onChange?.(value);
+		onChange?.(e);
+	};
+	const { item, indicatorWrapper, indicatorIcon } = require_Radio_styles.radio({
+		checked: !!isChecked,
+		disabled: props.disabled
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		className: item({ className }),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "radio",
+				name,
+				value,
+				checked: isChecked,
+				onChange: handleChange,
+				className: "sr-only",
+				...props
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: indicatorWrapper(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RadioIcon, {
+					checked: !!isChecked,
+					className: indicatorIcon()
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+				typography: "body-16-regular",
+				textColor: "gray-800",
+				children
+			})
+		]
+	});
+};
+RadioGroup.displayName = "RadioGroup";
+Radio.displayName = "Radio";
+
+//#endregion
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.useRadioGroupContext = useRadioGroupContext;

package/dist/components/Radio/Radio.d.cts

@@ -0,0 +1,48 @@
+import { PrimitiveProps } from "../Primitive/Primitive.cjs";
+import React from "react";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
+
+//#region src/components/Radio/Radio.d.ts
+interface RadioGroupContextValue {
+  name: string;
+  value?: string;
+  onChange?: (value: string) => void;
+}
+declare const useRadioGroupContext: () => RadioGroupContextValue | null;
+interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement>, PrimitiveProps {
+  name: string;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+}
+declare const RadioGroup: {
+  ({
+    name,
+    value,
+    defaultValue,
+    onValueChange,
+    className,
+    children,
+    ...props
+  }: RadioGroupProps): react_jsx_runtime5.JSX.Element;
+  displayName: string;
+};
+interface RadioProps extends Omit<React.ComponentProps<'input'>, 'type'> {
+  value: string;
+  children: React.ReactNode;
+}
+declare const Radio: {
+  ({
+    value,
+    children,
+    className,
+    checked: checkedProp,
+    onChange,
+    ...props
+  }: RadioProps): react_jsx_runtime5.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Radio, RadioGroup, RadioGroupProps, RadioProps, useRadioGroupContext };
+//# sourceMappingURL=Radio.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.cts","names":[],"sources":["../../../src/components/Radio/Radio.tsx"],"mappings":";;;;;UAMU,sBAAA;EACR,IAAA;EACA,KAAA;EACA,QAAA,IAAY,KAAA;AAAA;AAAA,cAKR,oBAAA,QAAoB,sBAAA;AAAA,UAKT,eAAA,SACP,KAAA,CAAM,cAAA,CAAe,cAAA,GAAiB,cAAA;EAC9C,IAAA;EACA,KAAA;EACA,YAAA;EACA,aAAA,IAAiB,KAAA;EACjB,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,cAGL,UAAA;EAAA;;;;;;;;KAQV,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;;;UAuDD,UAAA,SAAmB,IAAA,CAClC,KAAA,CAAM,cAAA;EAGN,KAAA;EACA,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,cAGL,KAAA;EAAA;;;;;;;KAOV,UAAA,GAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/Radio/Radio.d.mts

@@ -0,0 +1,49 @@
+import { PrimitiveProps } from "../Primitive/Primitive.mjs";
+import "../Primitive/index.mjs";
+import React from "react";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
+
+//#region src/components/Radio/Radio.d.ts
+interface RadioGroupContextValue {
+  name: string;
+  value?: string;
+  onChange?: (value: string) => void;
+}
+declare const useRadioGroupContext: () => RadioGroupContextValue | null;
+interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement>, PrimitiveProps {
+  name: string;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  children: React.ReactNode;
+}
+declare const RadioGroup: {
+  ({
+    name,
+    value,
+    defaultValue,
+    onValueChange,
+    className,
+    children,
+    ...props
+  }: RadioGroupProps): react_jsx_runtime10.JSX.Element;
+  displayName: string;
+};
+interface RadioProps extends Omit<React.ComponentProps<'input'>, 'type'> {
+  value: string;
+  children: React.ReactNode;
+}
+declare const Radio: {
+  ({
+    value,
+    children,
+    className,
+    checked: checkedProp,
+    onChange,
+    ...props
+  }: RadioProps): react_jsx_runtime10.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { Radio, RadioGroup, RadioGroupProps, RadioProps, useRadioGroupContext };
+//# sourceMappingURL=Radio.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.mts","names":[],"sources":["../../../src/components/Radio/Radio.tsx"],"mappings":";;;;;;UAMU,sBAAA;EACR,IAAA;EACA,KAAA;EACA,QAAA,IAAY,KAAA;AAAA;AAAA,cAKR,oBAAA,QAAoB,sBAAA;AAAA,UAKT,eAAA,SACP,KAAA,CAAM,cAAA,CAAe,cAAA,GAAiB,cAAA;EAC9C,IAAA;EACA,KAAA;EACA,YAAA;EACA,aAAA,IAAiB,KAAA;EACjB,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,cAGL,UAAA;EAAA;;;;;;;;KAQV,eAAA,GAAe,mBAAA,CAAA,GAAA,CAAA,OAAA;;;UAuDD,UAAA,SAAmB,IAAA,CAClC,KAAA,CAAM,cAAA;EAGN,KAAA;EACA,QAAA,EAAU,KAAA,CAAM,SAAA;AAAA;AAAA,cAGL,KAAA;EAAA;;;;;;;KAOV,UAAA,GAAU,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/Radio/Radio.mjs

@@ -0,0 +1,94 @@
+import { Text } from "../Text/Text.mjs";
+import { Primitive } from "../Primitive/Primitive.mjs";
+import { radio } from "./Radio.styles.mjs";
+import React, { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Radio/Radio.tsx
+const RadioGroupContext = createContext(null);
+const useRadioGroupContext = () => {
+	return useContext(RadioGroupContext);
+};
+const RadioGroup = ({ name, value, defaultValue, onValueChange, className, children, ...props }) => {
+	const [internalValue, setInternalValue] = React.useState(defaultValue);
+	const currentValue = value ?? internalValue;
+	const { group } = radio();
+	const handleChange = (newValue) => {
+		if (value === void 0) setInternalValue(newValue);
+		onValueChange?.(newValue);
+	};
+	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+		value: {
+			name,
+			value: currentValue,
+			onChange: handleChange
+		},
+		children: /* @__PURE__ */ jsx(Primitive.div, {
+			role: "radiogroup",
+			className: group({ className }),
+			...props,
+			children
+		})
+	});
+};
+const RadioIcon = ({ checked, className }) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "20",
+	height: "20",
+	viewBox: "0 0 20 20",
+	fill: "none",
+	className,
+	children: /* @__PURE__ */ jsx("circle", {
+		cx: "10",
+		cy: "10",
+		r: checked ? 7 : 7.5,
+		stroke: "currentColor",
+		strokeWidth: checked ? 6 : 5,
+		className: "transition-all duration-150 ease-in-out"
+	})
+});
+const Radio = ({ value, children, className, checked: checkedProp, onChange, ...props }) => {
+	const group = useRadioGroupContext();
+	const isChecked = group ? group.value === value : checkedProp;
+	const name = group?.name ?? props.name;
+	const handleChange = (e) => {
+		group?.onChange?.(value);
+		onChange?.(e);
+	};
+	const { item, indicatorWrapper, indicatorIcon } = radio({
+		checked: !!isChecked,
+		disabled: props.disabled
+	});
+	return /* @__PURE__ */ jsxs("label", {
+		className: item({ className }),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "radio",
+				name,
+				value,
+				checked: isChecked,
+				onChange: handleChange,
+				className: "sr-only",
+				...props
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: indicatorWrapper(),
+				children: /* @__PURE__ */ jsx(RadioIcon, {
+					checked: !!isChecked,
+					className: indicatorIcon()
+				})
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				typography: "body-16-regular",
+				textColor: "gray-800",
+				children
+			})
+		]
+	});
+};
+RadioGroup.displayName = "RadioGroup";
+Radio.displayName = "Radio";
+
+//#endregion
+export { Radio, RadioGroup, useRadioGroupContext };
+//# sourceMappingURL=Radio.mjs.map

package/dist/components/Radio/Radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.mjs","names":[],"sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\nimport { Primitive, PrimitiveProps } from '../Primitive';\nimport { Text } from '../Text';\nimport { radio } from './Radio.styles';\n\n// RadioGroup Context\ninterface RadioGroupContextValue {\n  name: string;\n  value?: string;\n  onChange?: (value: string) => void;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null);\n\nconst useRadioGroupContext = () => {\n  return useContext(RadioGroupContext);\n};\n\n// RadioGroup\nexport interface RadioGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>, PrimitiveProps {\n  name: string;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  children: React.ReactNode;\n}\n\nexport const RadioGroup = ({\n  name,\n  value,\n  defaultValue,\n  onValueChange,\n  className,\n  children,\n  ...props\n}: RadioGroupProps) => {\n  const [internalValue, setInternalValue] = React.useState(defaultValue);\n  const currentValue = value ?? internalValue;\n  const { group } = radio();\n\n  const handleChange = (newValue: string) => {\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n    onValueChange?.(newValue);\n  };\n\n  return (\n    <RadioGroupContext.Provider\n      value={{ name, value: currentValue, onChange: handleChange }}\n    >\n      <Primitive.div\n        role=\"radiogroup\"\n        className={group({ className })}\n        {...props}\n      >\n        {children}\n      </Primitive.div>\n    </RadioGroupContext.Provider>\n  );\n};\n\n// Radio icons ( icons 구현 전까지 임시 )\nconst RadioIcon = ({\n  checked,\n  className,\n}: {\n  checked: boolean;\n  className?: string;\n}) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"20\"\n    height=\"20\"\n    viewBox=\"0 0 20 20\"\n    fill=\"none\"\n    className={className}\n  >\n    <circle\n      cx=\"10\"\n      cy=\"10\"\n      r={checked ? 7 : 7.5}\n      stroke=\"currentColor\"\n      strokeWidth={checked ? 6 : 5}\n      className=\"transition-all duration-150 ease-in-out\"\n    />\n  </svg>\n);\n\n// Radio\nexport interface RadioProps extends Omit<\n  React.ComponentProps<'input'>,\n  'type'\n> {\n  value: string;\n  children: React.ReactNode;\n}\n\nexport const Radio = ({\n  value,\n  children,\n  className,\n  checked: checkedProp,\n  onChange,\n  ...props\n}: RadioProps) => {\n  const group = useRadioGroupContext();\n\n  const isChecked = group ? group.value === value : checkedProp;\n  const name = group?.name ?? props.name;\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    group?.onChange?.(value);\n    onChange?.(e);\n  };\n\n  const { item, indicatorWrapper, indicatorIcon } = radio({\n    checked: !!isChecked,\n    disabled: props.disabled,\n  });\n\n  return (\n    <label className={item({ className })}>\n      <input\n        type=\"radio\"\n        name={name}\n        value={value}\n        checked={isChecked}\n        onChange={handleChange}\n        className=\"sr-only\"\n        {...props}\n      />\n      <span className={indicatorWrapper()}>\n        <RadioIcon checked={!!isChecked} className={indicatorIcon()} />\n      </span>\n      <Text typography=\"body-16-regular\" textColor=\"gray-800\">\n        {children}\n      </Text>\n    </label>\n  );\n};\n\nRadioGroup.displayName = 'RadioGroup';\nRadio.displayName = 'Radio';\n\nexport { useRadioGroupContext };\n"],"mappings":";;;;;;;AAYA,MAAM,oBAAoB,cAA6C,KAAK;AAE5E,MAAM,6BAA6B;AACjC,QAAO,WAAW,kBAAkB;;AAatC,MAAa,cAAc,EACzB,MACA,OACA,cACA,eACA,WACA,UACA,GAAG,YACkB;CACrB,MAAM,CAAC,eAAe,oBAAoB,MAAM,SAAS,aAAa;CACtE,MAAM,eAAe,SAAS;CAC9B,MAAM,EAAE,UAAU,OAAO;CAEzB,MAAM,gBAAgB,aAAqB;AACzC,MAAI,UAAU,OACZ,kBAAiB,SAAS;AAE5B,kBAAgB,SAAS;;AAG3B,QACE,oBAAC,kBAAkB;EACjB,OAAO;GAAE;GAAM,OAAO;GAAc,UAAU;GAAc;YAE5D,oBAAC,UAAU;GACT,MAAK;GACL,WAAW,MAAM,EAAE,WAAW,CAAC;GAC/B,GAAI;GAEH;IACa;GACW;;AAKjC,MAAM,aAAa,EACjB,SACA,gBAKA,oBAAC;CACC,OAAM;CACN,OAAM;CACN,QAAO;CACP,SAAQ;CACR,MAAK;CACM;WAEX,oBAAC;EACC,IAAG;EACH,IAAG;EACH,GAAG,UAAU,IAAI;EACjB,QAAO;EACP,aAAa,UAAU,IAAI;EAC3B,WAAU;GACV;EACE;AAYR,MAAa,SAAS,EACpB,OACA,UACA,WACA,SAAS,aACT,UACA,GAAG,YACa;CAChB,MAAM,QAAQ,sBAAsB;CAEpC,MAAM,YAAY,QAAQ,MAAM,UAAU,QAAQ;CAClD,MAAM,OAAO,OAAO,QAAQ,MAAM;CAElC,MAAM,gBAAgB,MAA2C;AAC/D,SAAO,WAAW,MAAM;AACxB,aAAW,EAAE;;CAGf,MAAM,EAAE,MAAM,kBAAkB,kBAAkB,MAAM;EACtD,SAAS,CAAC,CAAC;EACX,UAAU,MAAM;EACjB,CAAC;AAEF,QACE,qBAAC;EAAM,WAAW,KAAK,EAAE,WAAW,CAAC;;GACnC,oBAAC;IACC,MAAK;IACC;IACC;IACP,SAAS;IACT,UAAU;IACV,WAAU;IACV,GAAI;KACJ;GACF,oBAAC;IAAK,WAAW,kBAAkB;cACjC,oBAAC;KAAU,SAAS,CAAC,CAAC;KAAW,WAAW,eAAe;MAAI;KAC1D;GACP,oBAAC;IAAK,YAAW;IAAkB,WAAU;IAC1C;KACI;;GACD;;AAIZ,WAAW,cAAc;AACzB,MAAM,cAAc"}

package/dist/components/Radio/Radio.styles.cjs

@@ -0,0 +1,32 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let tailwind_variants = require("tailwind-variants");
+
+//#region src/components/Radio/Radio.styles.ts
+const radio = (0, tailwind_variants.tv)({
+	slots: {
+		group: "flex flex-col gap-5",
+		item: "flex cursor-pointer items-center gap-2 transition-opacity duration-150",
+		indicatorWrapper: "flex-shrink-0 transition-colors duration-150",
+		indicatorIcon: "transition-all duration-150 ease-in-out",
+		label: ""
+	},
+	variants: {
+		checked: {
+			true: {
+				indicatorWrapper: "text-gray-800 hover:text-gray-800",
+				indicatorIcon: "text-gray-800"
+			},
+			false: {
+				indicatorWrapper: "text-gray-200 hover:text-gray-400",
+				indicatorIcon: "text-current"
+			}
+		},
+		disabled: {
+			true: { item: "opacity-50 cursor-not-allowed" },
+			false: { item: "hover:opacity-80" }
+		}
+	}
+});
+
+//#endregion
+exports.radio = radio;

package/dist/components/Radio/Radio.styles.mjs

@@ -0,0 +1,32 @@
+import { tv } from "tailwind-variants";
+
+//#region src/components/Radio/Radio.styles.ts
+const radio = tv({
+	slots: {
+		group: "flex flex-col gap-5",
+		item: "flex cursor-pointer items-center gap-2 transition-opacity duration-150",
+		indicatorWrapper: "flex-shrink-0 transition-colors duration-150",
+		indicatorIcon: "transition-all duration-150 ease-in-out",
+		label: ""
+	},
+	variants: {
+		checked: {
+			true: {
+				indicatorWrapper: "text-gray-800 hover:text-gray-800",
+				indicatorIcon: "text-gray-800"
+			},
+			false: {
+				indicatorWrapper: "text-gray-200 hover:text-gray-400",
+				indicatorIcon: "text-current"
+			}
+		},
+		disabled: {
+			true: { item: "opacity-50 cursor-not-allowed" },
+			false: { item: "hover:opacity-80" }
+		}
+	}
+});
+
+//#endregion
+export { radio };
+//# sourceMappingURL=Radio.styles.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.styles.mjs","names":[],"sources":["../../../src/components/Radio/Radio.styles.ts"],"sourcesContent":["import { tv, VariantProps } from 'tailwind-variants';\n\nexport const radio = tv({\n  slots: {\n    group: 'flex flex-col gap-5',\n    item: 'flex cursor-pointer items-center gap-2 transition-opacity duration-150',\n    indicatorWrapper: 'flex-shrink-0 transition-colors duration-150',\n    indicatorIcon: 'transition-all duration-150 ease-in-out',\n    label: '',\n  },\n  variants: {\n    checked: {\n      true: {\n        indicatorWrapper: 'text-gray-800 hover:text-gray-800',\n        indicatorIcon: 'text-gray-800',\n      },\n      false: {\n        indicatorWrapper: 'text-gray-200 hover:text-gray-400',\n        indicatorIcon: 'text-current',\n      },\n    },\n    disabled: {\n      true: {\n        item: 'opacity-50 cursor-not-allowed',\n      },\n      false: {\n        item: 'hover:opacity-80',\n      },\n    },\n  },\n});\n\nexport type RadioVariants = VariantProps<typeof radio>;\n"],"mappings":";;;AAEA,MAAa,QAAQ,GAAG;CACtB,OAAO;EACL,OAAO;EACP,MAAM;EACN,kBAAkB;EAClB,eAAe;EACf,OAAO;EACR;CACD,UAAU;EACR,SAAS;GACP,MAAM;IACJ,kBAAkB;IAClB,eAAe;IAChB;GACD,OAAO;IACL,kBAAkB;IAClB,eAAe;IAChB;GACF;EACD,UAAU;GACR,MAAM,EACJ,MAAM,iCACP;GACD,OAAO,EACL,MAAM,oBACP;GACF;EACF;CACF,CAAC"}

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

@@ -0,0 +1 @@
+import { Radio, RadioGroup, RadioGroupProps, RadioProps, useRadioGroupContext } from "./Radio.mjs";

package/dist/components/RatioChart/RatioChart.cjs

@@ -0,0 +1,182 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_useRatioChartContext = require('../../hooks/ratioChart/useRatioChartContext.cjs');
+const require_mergeStyles = require('../../utils/mergeStyles/mergeStyles.cjs');
+const require_RatioChart_styles = require('./RatioChart.styles.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("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] = (0, react.useState)(() => mode === "single" && typeof defaultValue === "string" ? defaultValue : "");
+	const [internalMultipleValue, setInternalMultipleValue] = (0, react.useState)(() => mode === "multiple" && Array.isArray(defaultValue) ? defaultValue : []);
+	const [counts, setCounts] = (0, react.useState)(/* @__PURE__ */ new Map());
+	const isControlled = valueProp !== void 0;
+	const currentValue = mode === "single" ? isControlled ? valueProp : internalSingleValue : isControlled ? valueProp : internalMultipleValue;
+	const isSelected = (0, react.useCallback)((itemValue) => {
+		if (mode === "single") return currentValue === itemValue;
+		return currentValue.includes(itemValue);
+	}, [mode, currentValue]);
+	const onSelect = (0, react.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 = (0, react.useCallback)((itemValue, count) => {
+		setCounts((prev) => new Map(prev).set(itemValue, count));
+	}, []);
+	const unregisterCount = (0, react.useCallback)((itemValue) => {
+		setCounts((prev) => {
+			const next = new Map(prev);
+			next.delete(itemValue);
+			return next;
+		});
+	}, []);
+	const totalCount = (0, react.useMemo)(() => {
+		let total = 0;
+		counts.forEach((c) => total += c);
+		return total;
+	}, [counts]);
+	const getRatio = (0, react.useCallback)((itemValue) => {
+		const count = counts.get(itemValue) ?? 0;
+		return totalCount > 0 ? Math.round(count / totalCount * 100) : 0;
+	}, [counts, totalCount]);
+	const styles = require_RatioChart_styles.ratioChart({ disabled });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useRatioChartContext.RatioChartContext.Provider, {
+		value: {
+			value: currentValue,
+			mode,
+			disabled,
+			onSelect,
+			isSelected,
+			counts,
+			registerCount,
+			unregisterCount,
+			totalCount,
+			getRatio
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			role: "group",
+			className: require_mergeStyles.mergeStyles(styles.root(), className),
+			...rest,
+			children
+		})
+	});
+};
+const RatioChartItem = ({ value, label, count, ratio, disabled: itemDisabled, className, ...props }) => {
+	const { disabled: rootDisabled, onSelect, isSelected, registerCount, unregisterCount, getRatio } = require_useRatioChartContext.useRatioChartContext();
+	const disabled = itemDisabled || rootDisabled;
+	const selected = isSelected(value);
+	(0, react.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 = require_RatioChart_styles.ratioChart({
+		disabled,
+		selected
+	});
+	const lightContent = require_RatioChart_styles.ratioChart({ contentVariant: "light" });
+	const darkContent = require_RatioChart_styles.ratioChart({ contentVariant: "dark" });
+	const contentElement = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: styles.label(),
+		children: label
+	}), showRatio && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: styles.ratio(),
+		children: [displayRatio, "%"]
+	})] });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		role: "option",
+		"aria-selected": selected,
+		disabled,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		className: require_mergeStyles.mergeStyles(styles.item(), className),
+		style: { minWidth: 0 },
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: styles.fill(),
+			style: { width: `${displayRatio}%` }
+		}), selected ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: lightContent.content(),
+			style: { clipPath: `inset(0 ${100 - displayRatio}% 0 0)` },
+			children: contentElement
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: darkContent.content(),
+			style: { clipPath: `inset(0 0 0 ${displayRatio}%)` },
+			children: contentElement
+		})] }) : /* @__PURE__ */ (0, react_jsx_runtime.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 } = require_useRatioChartContext.useRatioChartContext();
+	const displayEndTime = endDate ? formatTimeRemaining(endDate) : endTime;
+	const styles = require_RatioChart_styles.ratioChart();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_mergeStyles.mergeStyles(styles.footer(), className),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!hideParticipantCount && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: styles.footerText(),
+			children: [totalCount, "명 참여"]
+		}), displayEndTime && /* @__PURE__ */ (0, react_jsx_runtime.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
+exports.RatioChart = RatioChart;

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

@@ -0,0 +1,66 @@
+import React from "react";
+import * as react_jsx_runtime37 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_runtime37.JSX.Element;
+  displayName: string;
+} & {
+  Root: {
+    (props: RatioChartRootProps): react_jsx_runtime37.JSX.Element;
+    displayName: string;
+  };
+  Item: {
+    ({
+      value,
+      label,
+      count,
+      ratio,
+      disabled: itemDisabled,
+      className,
+      ...props
+    }: RatioChartItemProps): react_jsx_runtime37.JSX.Element;
+    displayName: string;
+  };
+  Footer: {
+    ({
+      endDate,
+      endTime,
+      hideParticipantCount,
+      className,
+      children,
+      ...props
+    }: RatioChartFooterProps): react_jsx_runtime37.JSX.Element;
+    displayName: string;
+  };
+};
+//#endregion
+export { RatioChart, RatioChartFooterProps, RatioChartItemProps, RatioChartRootProps };
+//# sourceMappingURL=RatioChart.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RatioChart.d.cts","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"}