@causw/core 0.0.8 → 0.0.10

package/dist/index.mjs

@@ -1,8 +1,13 @@
-import React from 'react';
+import React4, { createContext, useId, useState, useContext } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 
 // src/components/Text/Text.tsx
+function mergeStyles(...inputs) {
+  return twMerge(clsx(inputs));
+}
 
 // src/components/Text/Text.styles.ts
 var colorClasses = {
@@ -16,7 +21,7 @@ var colorClasses = {
   "gray-700": "text-gray-700",
   "gray-800": "text-gray-800",
   "gray-900": "text-gray-900",
-  "blue-50": "text-blue-50",
+  "blue-100": "text-blue-100",
   "blue-500": "text-blue-500",
   "blue-700": "text-blue-700",
   "red-100": "text-red-100",
@@ -24,245 +29,859 @@ var colorClasses = {
   white: "text-white-main",
   black: "text-black-main"
 };
-var variantStyles = {
-  caption: {
-    sm: {
-      normal: {
-        fontSize: "text-12",
-        lineHeight: "leading-normal",
-        fontWeight: "font-regular"
-      },
-      point: {
-        fontSize: "text-12",
-        lineHeight: "leading-normal",
-        fontWeight: "font-semibold"
-      }
+var alignClasses = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+  justify: "text-justify"
+};
+var typographyStyles = {
+  // Caption variants
+  "caption-sm": "typo-caption-sm",
+  "caption-sm-point": "typo-caption-sm-point",
+  "caption-md": "typo-caption-md",
+  "caption-md-point": "typo-caption-md-point",
+  // Body2 variants
+  "body2-sm": "typo-body2-sm",
+  "body2-sm-point": "typo-body2-sm-point",
+  "body2-md": "typo-body2-md",
+  "body2-md-point": "typo-body2-md-point",
+  // Body variants
+  "body-sm": "typo-body-sm",
+  "body-sm-point": "typo-body-sm-point",
+  "body-md": "typo-body-md",
+  "body-md-point": "typo-body-md-point",
+  // Subtitle variants
+  "subtitle-sm": "typo-subtitle-sm",
+  "subtitle-sm-point": "typo-subtitle-sm-point",
+  "subtitle-md": "typo-subtitle-md",
+  "subtitle-md-point": "typo-subtitle-md-point",
+  // Title variants (always bold)
+  "title-sm": "typo-title-sm",
+  "title-md": "typo-title-md",
+  // Head variants (always bold)
+  "head-sm": "typo-head-sm",
+  "head-md": "typo-head-md",
+  // Fixed size variants
+  "fixed-12": "typo-fixed-12",
+  "fixed-14": "typo-fixed-14",
+  "fixed-15": "typo-fixed-15",
+  "fixed-16": "typo-fixed-16",
+  "fixed-18": "typo-fixed-18",
+  "fixed-20": "typo-fixed-20",
+  "fixed-24": "typo-fixed-24"
+};
+function textStyles({
+  typography,
+  textColor,
+  align
+}) {
+  const baseStyles4 = "font-sans";
+  const colorClass = colorClasses[textColor];
+  const typographyClass = typographyStyles[typography];
+  const alignClass = align ? alignClasses[align] : "";
+  return mergeStyles([baseStyles4, colorClass, typographyClass, alignClass]);
+}
+
+// src/components/Text/Text.tsx
+var Text = ({
+  typography = "body-sm",
+  textColor = "gray-700",
+  align,
+  as,
+  children,
+  className = "",
+  ...props
+}) => {
+  const Component = as || "span";
+  const classes = textStyles({ typography, textColor, align });
+  return React4.createElement(
+    Component,
+    {
+      className: mergeStyles(classes, className),
+      ...props
     },
-    md: {
-      normal: {
-        fontSize: "text-14",
-        lineHeight: "leading-normal",
-        fontWeight: "font-medium"
-      },
-      point: {
-        fontSize: "text-14",
-        lineHeight: "leading-normal",
-        fontWeight: "font-semibold"
-      }
+    children
+  );
+};
+Text.displayName = "Text";
+var FieldContext = createContext(null);
+var useFieldContext = () => {
+  const context = useContext(FieldContext);
+  if (!context) {
+    return null;
+  }
+  return context;
+};
+var FieldRoot = ({
+  children,
+  disabled = false,
+  error = false,
+  className,
+  ...props
+}) => {
+  const id = useId();
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value: { id, disabled, error }, children: /* @__PURE__ */ jsx("div", { className: mergeStyles("flex flex-col gap-2", className), ...props, children }) });
+};
+var FieldLabel = ({
+  children,
+  className,
+  typography = "body-sm-point",
+  textColor = "gray-700",
+  ...labelProps
+}) => {
+  const fieldContext = useFieldContext();
+  const id = fieldContext?.id;
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      typography,
+      textColor,
+      htmlFor: id,
+      className: mergeStyles("px-1", className),
+      ...labelProps,
+      children
     }
-  },
-  body2: {
-    sm: {
-      normal: {
-        fontSize: "text-14",
-        lineHeight: "leading-normal",
-        fontWeight: "font-regular"
-      },
-      point: {
-        fontSize: "text-14",
-        lineHeight: "leading-normal",
-        fontWeight: "font-semibold"
-      }
-    },
-    md: {
-      normal: {
-        fontSize: "text-16",
-        lineHeight: "leading-normal",
-        fontWeight: "font-medium"
-      },
-      point: {
-        fontSize: "text-16",
-        lineHeight: "leading-normal",
-        fontWeight: "font-semibold"
-      }
+  );
+};
+var FieldDescription = ({
+  children,
+  className,
+  ...props
+}) => {
+  const fieldContext = useFieldContext();
+  const id = fieldContext?.id;
+  const error = fieldContext?.error;
+  if (error) return null;
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      typography: "body2-sm",
+      textColor: "gray-400",
+      id: id ? `${id}-description` : void 0,
+      className,
+      ...props,
+      children
     }
-  },
-  body: {
-    sm: {
-      normal: {
-        fontSize: "text-16",
-        lineHeight: "leading-tight",
-        fontWeight: "font-regular"
-      },
-      point: {
-        fontSize: "text-16",
-        lineHeight: "leading-normal",
-        fontWeight: "font-bold"
-      }
-    },
-    md: {
-      normal: {
-        fontSize: "text-18",
-        lineHeight: "leading-normal",
-        fontWeight: "font-medium"
-      },
-      point: {
-        fontSize: "text-18",
-        lineHeight: "leading-normal",
-        fontWeight: "font-bold"
-      }
+  );
+};
+var FieldErrorDescription = ({
+  children,
+  className,
+  ...props
+}) => {
+  const fieldContext = useFieldContext();
+  const id = fieldContext?.id;
+  const error = fieldContext?.error;
+  if (!error) return null;
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      typography: "body2-sm",
+      textColor: "red-400",
+      id: id ? `${id}-error` : void 0,
+      className,
+      ...props,
+      children
     }
-  },
-  subtitle: {
-    sm: {
-      normal: {
-        fontSize: "text-18",
-        lineHeight: "leading-normal",
-        fontWeight: "font-medium"
-      },
-      point: {
-        fontSize: "text-18",
-        lineHeight: "leading-normal",
-        fontWeight: "font-bold"
-      }
-    },
-    md: {
-      normal: {
-        fontSize: "text-20",
-        lineHeight: "leading-normal",
-        fontWeight: "font-medium"
-      },
-      point: {
-        fontSize: "text-20",
-        lineHeight: "leading-normal",
-        fontWeight: "font-bold"
+  );
+};
+FieldRoot.displayName = "Field";
+FieldLabel.displayName = "Field.Label";
+FieldDescription.displayName = "Field.Description";
+FieldErrorDescription.displayName = "Field.ErrorDescription";
+var Field = Object.assign(FieldRoot, {
+  Label: FieldLabel,
+  Description: FieldDescription,
+  ErrorDescription: FieldErrorDescription
+});
+var TextInput = ({
+  id: idProp,
+  disabled: disabledProp,
+  error: errorProp,
+  className,
+  leftIcon,
+  rightIcon,
+  variant = "default",
+  typography = "body2-sm",
+  textColor = "gray-700",
+  ...props
+}) => {
+  const field = useFieldContext();
+  const id = idProp ?? field?.id;
+  const disabled = disabledProp ?? field?.disabled ?? false;
+  const error = errorProp ?? field?.error ?? false;
+  const classes = textStyles({ typography, textColor });
+  const inputStyles = mergeStyles(
+    "w-full bg-transparent outline-none",
+    "placeholder:text-gray-400",
+    "caret-gray-600"
+  );
+  const variantStyles = {
+    default: mergeStyles(
+      "rounded-md p-4",
+      "bg-white",
+      "focus-within:ring-2 focus-within:ring-gray-600"
+    ),
+    underline: mergeStyles(
+      "py-2 px-0",
+      "border-b border-gray-400",
+      "bg-transparent",
+      "focus-within:border-gray-600"
+    )
+  };
+  const wrapperStyles = mergeStyles(
+    "flex items-center gap-2 self-stretch",
+    variantStyles[variant],
+    disabled && "cursor-not-allowed opacity-50",
+    error && variant === "default" && "ring-2 ring-red-400 focus-within:ring-red-400",
+    error && variant === "underline" && "border-red-400 focus-within:border-red-400",
+    className
+  );
+  return /* @__PURE__ */ jsxs("div", { className: wrapperStyles, children: [
+    leftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-gray-400", children: leftIcon }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        disabled,
+        className: mergeStyles(inputStyles, classes),
+        ...props
       }
+    ),
+    rightIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-gray-400", children: rightIcon })
+  ] });
+};
+TextInput.displayName = "TextInput";
+function createPrimitive(node) {
+  const Node = (props) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot : node;
+    return /* @__PURE__ */ jsx(Comp, { ...primitiveProps });
+  };
+  Node.displayName = `Primitive.${node}`;
+  return Node;
+}
+var Primitive = {
+  div: createPrimitive("div"),
+  span: createPrimitive("span"),
+  img: createPrimitive("img"),
+  button: createPrimitive("button"),
+  label: createPrimitive("label"),
+  input: createPrimitive("input"),
+  textarea: createPrimitive("textarea"),
+  a: createPrimitive("a"),
+  p: createPrimitive("p"),
+  h2: createPrimitive("h2"),
+  ul: createPrimitive("ul"),
+  li: createPrimitive("li"),
+  svg: createPrimitive("svg"),
+  circle: createPrimitive("circle")
+};
+var TextAreaRoot = ({ className, children, ...props }) => {
+  const field = useFieldContext();
+  const wrapperStyles = mergeStyles(
+    "rounded-md p-4",
+    "bg-white",
+    "focus-within:ring-2 focus-within:ring-gray-600",
+    field?.disabled && "cursor-not-allowed opacity-50",
+    field?.error && "ring-2 ring-red-400 focus-within:ring-red-400",
+    className
+  );
+  return /* @__PURE__ */ jsx(Primitive.div, { className: wrapperStyles, ...props, children });
+};
+var TextAreaInput = ({
+  resize = true,
+  disabled: disabledProp,
+  className,
+  ...props
+}) => {
+  const field = useFieldContext();
+  const disabled = disabledProp ?? field?.disabled ?? false;
+  const textareaStyles = mergeStyles(
+    "w-full min-w-0 min-h-10 bg-transparent outline-none",
+    "typo-body-sm",
+    "text-gray-700 placeholder:text-gray-400",
+    "caret-gray-600",
+    resize ? "resize-y" : "resize-none",
+    disabled && "cursor-not-allowed",
+    className
+  );
+  return /* @__PURE__ */ jsx("textarea", { className: textareaStyles, disabled, ...props });
+};
+var TextAreaFooter = ({
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Primitive.div, { className: mergeStyles("mt-2", className), ...props, children });
+};
+TextAreaRoot.displayName = "TextArea";
+TextAreaInput.displayName = "TextArea.Input";
+TextAreaFooter.displayName = "TextArea.Footer";
+var TextArea = Object.assign(TextAreaRoot, {
+  Input: TextAreaInput,
+  Footer: TextAreaFooter
+});
+var RadioGroupContext = createContext(null);
+var useRadioGroupContext = () => {
+  return useContext(RadioGroupContext);
+};
+var RadioGroup = ({
+  name,
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  children,
+  ...props
+}) => {
+  const [internalValue, setInternalValue] = React4.useState(defaultValue);
+  const currentValue = value ?? internalValue;
+  const handleChange = (newValue) => {
+    if (value === void 0) {
+      setInternalValue(newValue);
     }
-  },
-  title: {
-    sm: {
-      normal: {
-        fontSize: "text-22",
-        lineHeight: "leading-normal",
-        fontWeight: "font-bold"
-      },
-      point: {
-        fontSize: "text-22",
-        lineHeight: "leading-normal",
-        fontWeight: "font-bold"
-      }
-    },
-    md: {
-      normal: {
-        fontSize: "text-32",
-        lineHeight: "leading-normal",
-        fontWeight: "font-bold"
-      },
-      point: {
-        fontSize: "text-32",
-        lineHeight: "leading-normal",
-        fontWeight: "font-bold"
-      }
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsx(
+    RadioGroupContext.Provider,
+    {
+      value: { name, value: currentValue, onChange: handleChange },
+      children: /* @__PURE__ */ jsx(
+        Primitive.div,
+        {
+          role: "radiogroup",
+          className: mergeStyles("flex flex-col gap-5", className),
+          ...props,
+          children
+        }
+      )
     }
-  },
-  head: {
-    sm: {
-      normal: {
-        fontSize: "text-30",
-        lineHeight: "leading-normal",
-        fontWeight: "font-bold"
-      },
-      point: {
-        fontSize: "text-30",
-        lineHeight: "leading-normal",
-        fontWeight: "font-bold"
-      }
-    },
-    md: {
-      normal: {
-        fontSize: "text-48",
-        lineHeight: "leading-normal",
-        fontWeight: "font-bold"
-      },
-      point: {
-        fontSize: "text-48",
-        lineHeight: "leading-normal",
-        fontWeight: "font-bold"
+  );
+};
+var RadioIcon = ({ checked }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    className: "transition-all duration-150 ease-in-out",
+    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"
       }
+    )
+  }
+);
+var 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);
+  };
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: mergeStyles(
+        "flex cursor-pointer items-center gap-2",
+        "transition-opacity duration-150 hover:opacity-80",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            name,
+            value,
+            checked: isChecked,
+            onChange: handleChange,
+            className: "sr-only",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: mergeStyles(
+              "flex-shrink-0 transition-colors duration-150",
+              isChecked ? "text-gray-800 hover:text-gray-800" : "text-gray-200 hover:text-gray-400"
+            ),
+            children: /* @__PURE__ */ jsx(RadioIcon, { checked: !!isChecked })
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { typography: "body-sm", textColor: "gray-800", children })
+      ]
     }
+  );
+};
+RadioGroup.displayName = "RadioGroup";
+Radio.displayName = "Radio";
+var ToggleContext = React4.createContext(null);
+var useToggleContext = () => {
+  const context = React4.useContext(ToggleContext);
+  if (!context) {
+    throw new Error(
+      "Toggle \uC11C\uBE0C \uCEF4\uD3EC\uB10C\uD2B8\uB294 <Toggle> \uCEF4\uD3EC\uB10C\uD2B8 \uB0B4\uBD80\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4. ex) <Toggle><Toggle.Switch /></Toggle>"
+    );
   }
+  return context;
 };
-var fixedStyles = {
-  12: {
-    fontSize: "text-12",
-    lineHeight: "leading-normal",
-    fontWeight: "font-medium"
-  },
-  14: {
-    fontSize: "text-14",
-    lineHeight: "leading-normal",
-    fontWeight: "font-medium"
-  },
-  15: {
-    fontSize: "text-15",
-    lineHeight: "leading-normal",
-    fontWeight: "font-semibold"
-  },
-  16: {
-    fontSize: "text-16",
-    lineHeight: "leading-normal",
-    fontWeight: "font-medium"
-  },
-  18: {
-    fontSize: "text-18",
-    lineHeight: "leading-normal",
-    fontWeight: "font-medium"
+var ToggleRoot = ({
+  checked: checkedProp,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled,
+  children,
+  className,
+  ...props
+}) => {
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isChecked = checkedProp !== void 0 ? checkedProp : internalChecked;
+  const handleChange = () => {
+    if (disabled) return;
+    const newChecked = !isChecked;
+    if (checkedProp === void 0) {
+      setInternalChecked(newChecked);
+    }
+    onCheckedChange?.(newChecked);
+  };
+  return /* @__PURE__ */ jsx(ToggleContext.Provider, { value: { checked: isChecked, disabled }, children: /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: mergeStyles(
+        "inline-flex cursor-pointer items-center gap-2",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: isChecked,
+            onChange: handleChange,
+            disabled,
+            className: "sr-only"
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+};
+var ToggleSwitch = () => {
+  const { checked } = useToggleContext();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: mergeStyles(
+        "relative inline-flex items-center rounded-full p-1 transition-colors duration-200 ease-in-out",
+        "h-7 w-12",
+        // 48px x 28px
+        checked ? "bg-gray-600" : "bg-gray-200"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: mergeStyles(
+            "pointer-events-none inline-block rounded-full bg-white shadow-sm transition-transform duration-200 ease-in-out",
+            "h-5 w-5",
+            // 20px
+            checked ? "translate-x-5" : "translate-x-0"
+          )
+        }
+      )
+    }
+  );
+};
+var ToggleLabel = ({
+  children,
+  typography = "fixed-16",
+  textColor = "gray-700",
+  ...props
+}) => {
+  const { disabled } = useToggleContext();
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      typography,
+      textColor: disabled ? "gray-400" : textColor,
+      ...props,
+      children
+    }
+  );
+};
+ToggleRoot.displayName = "Toggle";
+ToggleSwitch.displayName = "Toggle.Switch";
+ToggleLabel.displayName = "Toggle.Label";
+var Toggle = Object.assign(ToggleRoot, {
+  Switch: ToggleSwitch,
+  Label: ToggleLabel
+});
+var CheckboxContext = React4.createContext(null);
+var useCheckboxContext = () => {
+  const context = React4.useContext(CheckboxContext);
+  if (!context) {
+    throw new Error(
+      "Checkbox \uC11C\uBE0C \uCEF4\uD3EC\uB10C\uD2B8\uB294 <Checkbox> \uCEF4\uD3EC\uB10C\uD2B8 \uB0B4\uBD80\uC5D0\uC11C \uC0AC\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4. ex) <Checkbox><Checkbox.Indicator /></Checkbox>"
+    );
+  }
+  return context;
+};
+var CheckboxRoot = ({
+  checked: checkedProp,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled,
+  children,
+  className,
+  ...props
+}) => {
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isChecked = checkedProp !== void 0 ? checkedProp : internalChecked;
+  const handleChange = () => {
+    if (disabled) return;
+    const newChecked = !isChecked;
+    if (checkedProp === void 0) {
+      setInternalChecked(newChecked);
+    }
+    onCheckedChange?.(newChecked);
+  };
+  return /* @__PURE__ */ jsx(CheckboxContext.Provider, { value: { checked: isChecked, disabled }, children: /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: mergeStyles(
+        "inline-flex cursor-pointer items-center gap-2",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: isChecked,
+            onChange: handleChange,
+            disabled,
+            className: "sr-only"
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+};
+var CheckboxIndicator = () => {
+  const { checked } = useCheckboxContext();
+  if (checked) {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className: "flex-shrink-0",
+        children: [
+          /* @__PURE__ */ jsx("rect", { width: "18", height: "18", rx: "4", fill: "#1E2939" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M5 9.08333L7.94737 12L13 7",
+              stroke: "white",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: mergeStyles(
+        "flex-shrink-0",
+        "aspect-square h-[18px] w-[18px]",
+        "rounded border-2 border-gray-200 bg-white"
+      )
+    }
+  );
+};
+var CheckboxLabel = ({
+  children,
+  typography = "body-sm",
+  textColor = "gray-600",
+  ...props
+}) => {
+  const { disabled } = useCheckboxContext();
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      typography,
+      textColor: disabled ? "gray-400" : textColor,
+      ...props,
+      children
+    }
+  );
+};
+CheckboxRoot.displayName = "Checkbox";
+CheckboxIndicator.displayName = "Checkbox.Indicator";
+CheckboxLabel.displayName = "Checkbox.Label";
+var Checkbox = Object.assign(CheckboxRoot, {
+  Indicator: CheckboxIndicator,
+  Label: CheckboxLabel
+});
+
+// src/components/Button/Button.styles.ts
+var baseStyles = "inline-flex items-center justify-center gap-[0.375rem] whitespace-nowrap rounded-[0.5rem] transition-colors duration-150 disabled:opacity-50 disabled:pointer-events-none";
+var sizeStyles = {
+  sm: "min-w-[3rem] h-[1.875rem] px-[0.5rem] typo-body2-sm-point",
+  md: "h-[2.375rem] px-[0.75rem] typo-body2-sm-point"
+};
+var colorStyles = {
+  // base와 active에 대한 설정이 아직 정해지지 않음
+  white: {
+    base: "bg-white text-gray-400",
+    active: "bg-white text-gray-400"
   },
-  20: {
-    fontSize: "text-20",
-    lineHeight: "leading-normal",
-    fontWeight: "font-semibold"
+  gray: {
+    base: "bg-gray-100 text-gray-400",
+    active: "bg-gray-100 text-gray-400"
   },
-  24: {
-    fontSize: "text-24",
-    lineHeight: "leading-normal",
-    fontWeight: "font-bold"
+  red: {
+    base: "bg-red-100 text-red-400",
+    active: "bg-red-100 text-red-400"
   }
 };
-function textStyles({
-  variant,
+function buttonStyles({
   size,
-  fixedSize,
-  point,
-  color
+  color,
+  active = false,
+  disabled = false,
+  fullWidth = false
 }) {
-  const baseStyles = "font-sans";
-  const colorClass = colorClasses[color];
-  let config;
-  if (variant === "fixed" && fixedSize) {
-    config = fixedStyles[fixedSize];
-  } else if (variant !== "fixed") {
-    const variantConfig = variantStyles[variant][size];
-    config = point ? variantConfig.point : variantConfig.normal;
-  } else {
-    config = fixedStyles[16];
-  }
-  return `${baseStyles} ${colorClass} ${config.fontSize} ${config.lineHeight} ${config.fontWeight}`.trim();
+  return mergeStyles(
+    baseStyles,
+    disabled ? "cursor-not-allowed pointer-events-none" : "cursor-pointer",
+    sizeStyles[size],
+    active ? colorStyles[color].active : colorStyles[color].base,
+    fullWidth && "w-full"
+  );
 }
-function mergeStyles(...inputs) {
-  return twMerge(clsx(inputs));
+function Button({
+  size = "md",
+  color = "gray",
+  active = false,
+  fullWidth = false,
+  disabled = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: buttonStyles({
+        size,
+        color,
+        active,
+        disabled,
+        fullWidth
+      }),
+      disabled,
+      ...props,
+      children
+    }
+  );
 }
 
-// src/components/Text/Text.tsx
-var Text = ({
-  variant = "body",
-  size = "sm",
-  fixedSize,
-  point = false,
-  color = "gray-700",
-  as: Component = "span",
+// src/components/CTAButton/CTAButton.styles.ts
+var baseStyles2 = "inline-flex items-center justify-center h-[3.375rem] px-[0.5rem] rounded-[0.75rem] typo-fixed-15 whitespace-nowrap select-none transition-colors";
+var widthStyles = {
+  default: "w-[18rem]",
+  full: "w-full"
+};
+var colorStyles2 = {
+  blue: "bg-blue-100 text-blue-700",
+  red: "bg-red-400 text-white",
+  dark: "bg-gray-700 text-white",
+  light: "bg-gray-100 text-gray-500",
+  white: "bg-white text-gray-500",
+  disabled: "bg-gray-200 text-gray-300"
+};
+function ctaButtonStyles({
+  color,
+  fullWidth = false,
+  disabled = false
+}) {
+  return mergeStyles(
+    baseStyles2,
+    fullWidth ? widthStyles.full : widthStyles.default,
+    colorStyles2[disabled ? "disabled" : color],
+    disabled ? "pointer-events-none" : "cursor-pointer"
+  );
+}
+function CTAButton({
+  color = "light",
+  fullWidth = false,
+  disabled = false,
+  asChild = false,
+  className,
   children,
+  ...props
+}) {
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      type: asChild ? void 0 : "button",
+      disabled,
+      className: mergeStyles(
+        ctaButtonStyles({ color, fullWidth, disabled }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/FloatingActionButton/FloatingActionButton.styles.ts
+var baseStyles3 = "inline-flex items-center justify-center bg-gray-100 border border-gray-200 text-gray-500 typo-body-sm-point h-[2.875rem] rounded-[6.1875rem] select-none whitespace-nowrap transition-colors";
+var paddingStyles = "px-[1rem] py-[0.625rem]";
+var iconGapStyles = {
+  left: "gap-[0.25rem]",
+  right: "gap-[0.625rem]",
+  none: ""
+};
+function floatingActionButtonStyles({
+  iconPosition = "none",
+  disabled = false
+}) {
+  return mergeStyles(
+    baseStyles3,
+    paddingStyles,
+    iconGapStyles[iconPosition],
+    disabled ? "opacity-50 pointer-events-none" : "cursor-pointer"
+  );
+}
+function FloatingActionButton({
+  leftIcon,
+  rightIcon,
+  disabled = false,
+  asChild = false,
+  children,
+  className,
+  ...props
+}) {
+  const iconPosition = leftIcon ? "left" : rightIcon ? "right" : "none";
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      type: asChild ? void 0 : "button",
+      disabled,
+      className: mergeStyles(
+        floatingActionButtonStyles({ iconPosition, disabled }),
+        className
+      ),
+      ...props,
+      children: [
+        leftIcon && /* @__PURE__ */ jsx("span", { className: "flex items-center", children: leftIcon }),
+        children && /* @__PURE__ */ jsx("span", { children }),
+        rightIcon && /* @__PURE__ */ jsx("span", { className: "flex items-center", children: rightIcon })
+      ]
+    }
+  );
+}
+
+// src/components/Box/Box.styles.ts
+var paddingClasses = {
+  none: "p-0",
+  xs: "p-1",
+  // 4px
+  sm: "p-2",
+  // 8px
+  md: "p-4",
+  // 16px
+  lg: "p-6"
+  // 24px
+};
+var radiusClasses = {
+  none: "rounded-none",
+  xs: "rounded-sm",
+  sm: "rounded",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl"
+};
+var displayClasses = {
+  block: "block",
+  flex: "flex",
+  grid: "grid",
+  "inline-block": "inline-block",
+  "inline-flex": "inline-flex",
+  none: "hidden"
+};
+var backgroundClasses = {
+  default: "",
+  subtle: "bg-gray-50",
+  inverse: "bg-gray-900 text-white",
+  transparent: "bg-transparent"
+};
+function boxStyles({
+  padding = "none",
+  radius = "none",
+  display = "block",
+  background = "default"
+}) {
+  return mergeStyles([
+    paddingClasses[padding],
+    radiusClasses[radius],
+    displayClasses[display],
+    backgroundClasses[background]
+  ]);
+}
+
+// src/components/Box/Box.tsx
+var Box = ({
+  as,
+  padding,
+  radius,
+  display,
+  background,
   className = "",
+  children,
   ...props
 }) => {
-  const classes = textStyles({
-    variant,
-    size,
-    fixedSize,
-    point,
-    color
-  });
-  return React.createElement(
+  const Component = as || "div";
+  const classes = boxStyles({ padding, radius, display, background });
+  return React4.createElement(
     Component,
     {
       className: mergeStyles(classes, className),
@@ -271,6 +890,331 @@ var Text = ({
     children
   );
 };
-Text.displayName = "Text";
+Box.displayName = "Box";
+
+// src/components/Stack/Stack.styles.ts
+var directionClasses = {
+  horizontal: "flex-row",
+  vertical: "flex-col"
+};
+var gapClasses = {
+  none: "gap-0",
+  xs: "gap-1",
+  // 4px
+  sm: "gap-2",
+  // 8px
+  md: "gap-4",
+  // 16px
+  lg: "gap-6",
+  // 24px
+  xl: "gap-8"
+  // 32px
+};
+var alignClasses2 = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var justifyClasses = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+};
+function stackStyles({
+  direction = "vertical",
+  gap = "md",
+  align = "stretch",
+  justify = "start"
+}) {
+  return mergeStyles([
+    "flex",
+    // Base style
+    directionClasses[direction],
+    gapClasses[gap],
+    alignClasses2[align],
+    justifyClasses[justify]
+  ]);
+}
+
+// src/components/Stack/Stack.tsx
+var Stack = ({
+  as,
+  direction,
+  gap,
+  align,
+  justify,
+  className = "",
+  children,
+  ...props
+}) => {
+  const Component = as || "div";
+  const classes = stackStyles({ direction, gap, align, justify });
+  return React4.createElement(
+    Component,
+    {
+      className: mergeStyles(classes, className),
+      ...props
+    },
+    children
+  );
+};
+Stack.displayName = "Stack";
+var VStack = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Stack, { direction: "vertical", ...props });
+};
+VStack.displayName = "VStack";
+var HStack = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Stack, { direction: "horizontal", ...props });
+};
+HStack.displayName = "HStack";
+
+// src/components/Flex/Flex.styles.ts
+var directionClasses2 = {
+  row: "flex-row",
+  "row-reverse": "flex-row-reverse",
+  column: "flex-col",
+  "column-reverse": "flex-col-reverse"
+};
+var gapClasses2 = {
+  none: "gap-0",
+  xs: "gap-1",
+  // 4px
+  sm: "gap-2",
+  // 8px
+  md: "gap-4",
+  // 16px
+  lg: "gap-6",
+  // 24px
+  xl: "gap-8"
+  // 32px
+};
+var alignClasses3 = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
+};
+var justifyClasses2 = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
+};
+var wrapClasses = {
+  nowrap: "flex-nowrap",
+  wrap: "flex-wrap",
+  "wrap-reverse": "flex-wrap-reverse"
+};
+function flexStyles({
+  direction = "row",
+  gap = "md",
+  align = "stretch",
+  justify = "start",
+  wrap = "nowrap"
+}) {
+  return mergeStyles([
+    "flex",
+    // Base style
+    directionClasses2[direction],
+    gapClasses2[gap],
+    alignClasses3[align],
+    justifyClasses2[justify],
+    wrapClasses[wrap]
+  ]);
+}
+
+// src/components/Flex/Flex.tsx
+var Flex = ({
+  as,
+  direction,
+  gap,
+  align,
+  justify,
+  wrap,
+  className = "",
+  children,
+  ...props
+}) => {
+  const Component = as || "div";
+  const classes = flexStyles({ direction, gap, align, justify, wrap });
+  return React4.createElement(
+    Component,
+    {
+      className: mergeStyles(classes, className),
+      ...props
+    },
+    children
+  );
+};
+Flex.displayName = "Flex";
+
+// src/components/Grid/Grid.styles.ts
+var columnsClasses = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+  6: "grid-cols-6",
+  7: "grid-cols-7",
+  8: "grid-cols-8",
+  9: "grid-cols-9",
+  10: "grid-cols-10",
+  11: "grid-cols-11",
+  12: "grid-cols-12",
+  none: "grid-cols-none"
+};
+var rowsClasses = {
+  1: "grid-rows-1",
+  2: "grid-rows-2",
+  3: "grid-rows-3",
+  4: "grid-rows-4",
+  5: "grid-rows-5",
+  6: "grid-rows-6",
+  none: "grid-rows-none"
+};
+var gapClasses3 = {
+  none: "gap-0",
+  xs: "gap-1",
+  // 4px
+  sm: "gap-2",
+  // 8px
+  md: "gap-4",
+  // 16px
+  lg: "gap-6",
+  // 24px
+  xl: "gap-8"
+  // 32px
+};
+var flowClasses = {
+  row: "grid-flow-row",
+  col: "grid-flow-col",
+  "row-dense": "grid-flow-row-dense",
+  "col-dense": "grid-flow-col-dense"
+};
+function gridStyles({
+  columns = "none",
+  rows = "none",
+  gap = "md",
+  flow = "row"
+}) {
+  return mergeStyles([
+    "grid",
+    columnsClasses[columns],
+    rowsClasses[rows],
+    gapClasses3[gap],
+    flowClasses[flow]
+  ]);
+}
+
+// src/components/Grid/Grid.tsx
+var Grid = ({
+  as,
+  columns,
+  rows,
+  gap,
+  flow,
+  className = "",
+  children,
+  ...props
+}) => {
+  const Component = as || "div";
+  const classes = gridStyles({ columns, rows, gap, flow });
+  return React4.createElement(
+    Component,
+    {
+      className: mergeStyles(classes, className),
+      ...props
+    },
+    children
+  );
+};
+Grid.displayName = "Grid";
+
+// src/components/Separator/Separator.styles.ts
+var orientationClasses = {
+  horizontal: "h-px w-full my-2",
+  vertical: "h-full w-px mx-2 self-stretch"
+};
+var colorClasses2 = "bg-gray-200";
+function separatorStyles({
+  orientation = "horizontal"
+}) {
+  return mergeStyles([colorClasses2, orientationClasses[orientation]]);
+}
+
+// src/components/Separator/Separator.tsx
+var Separator = ({
+  as,
+  orientation = "horizontal",
+  className = "",
+  ...props
+}) => {
+  const Component = as || "div";
+  const classes = separatorStyles({ orientation });
+  return React4.createElement(Component, {
+    role: "separator",
+    "aria-orientation": orientation,
+    className: mergeStyles(classes, className),
+    ...props
+  });
+};
+Separator.displayName = "Separator";
+
+// src/components/Spacer/Spacer.styles.ts
+var sizeClasses = {
+  1: "w-1 h-1",
+  // 4px
+  2: "w-2 h-2",
+  // 8px
+  4: "w-4 h-4",
+  // 16px
+  6: "w-6 h-6",
+  // 24px
+  8: "w-8 h-8",
+  // 32px
+  10: "w-10 h-10",
+  // 40px
+  12: "w-12 h-12",
+  // 48px
+  16: "w-16 h-16",
+  // 64px
+  20: "w-20 h-20",
+  // 80px
+  24: "w-24 h-24"
+  // 96px
+};
+function spacerStyles({ size = "auto" }) {
+  if (size === "auto") {
+    return "flex-1";
+  }
+  return mergeStyles(["flex-none", sizeClasses[size]]);
+}
+
+// src/components/Spacer/Spacer.tsx
+var Spacer = ({
+  as,
+  size,
+  className = "",
+  ...props
+}) => {
+  const Component = as || "div";
+  const classes = spacerStyles({ size });
+  return React4.createElement(Component, {
+    "aria-hidden": "true",
+    className: mergeStyles(classes, className),
+    ...props
+  });
+};
+Spacer.displayName = "Spacer";
 
-export { Text, mergeStyles };
+export { Box, Button, CTAButton, Checkbox, Field, Flex, FloatingActionButton, Grid, HStack, Radio, RadioGroup, Separator, Spacer, Stack, Text, TextArea, TextInput, Toggle, VStack, mergeStyles, useRadioGroupContext };